/*
Theme Name: APIHub 接口聚合主题
Theme URI: https://example.com/apihub
Author: APIHub
Author URI: https://example.com
Description: 面向第三方 API 的聚合与分发站点主题。后台以「接口」自定义文章类型管理上游地址与密钥，前台提供接口目录、使用文档与在线调试，并支持站点 Key 鉴权与积分计费。设计语言继承 gsx-query 主题。
Version: 1.1.3
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: apihub
Tags: api, developer, documentation
*/

/* ============================================================
   1. 设计令牌 —— 完全对齐 gsx-query 主题
   ============================================================ */
:root{
    /* —— 单卡片外壳设计令牌（对齐 gsx-query v8.2） —— */
    --apihub-bg:#eef2f6;          /* 页面外壳底色 */
    --apihub-surface:#ffffff;
    --apihub-ink:#1a1a2e;        /* 墨色（标题/强调） */
    --apihub-text:#333333;
    --apihub-muted:#666666;
    --apihub-faint:#6b7280;        /* 加深以达 WCAG AA 对比度（≥4.5:1） */
    --apihub-line:#e0e0e0;
    --apihub-line-soft:#f0f2f5;  /* 区块分隔线 */
    --apihub-link:#2271b1;
    --apihub-accent:#ff6b00;     /* 支付宝橙 */
    --apihub-dark:#1a1a2e;
    --apihub-dark-2:#16213e;
    --apihub-nav-muted:#64748b;  /* 导航静默灰（加深以达 WCAG AA） */

    --apihub-get:#2271b1;
    --apihub-post:#ff6b00;
    --apihub-free:#1b7f4b;
    --apihub-err:#c62828;

    --apihub-radius:8px;         /* 按钮 / 输入框 / 内部小卡（借鉴 dubpro：矩形带点圆角更精致） */
    --apihub-radius-card:16px;   /* 单卡片外壳圆角 */
    --apihub-shadow-sm:0 1px 4px rgba(0,0,0,.04);
    --apihub-shadow-md:0 4px 12px rgba(0,0,0,.08);
    --apihub-shadow-lg:0 16px 48px rgba(0,0,0,.08);
    --apihub-shadow-card:0 1px 3px rgba(0,0,0,.02),0 4px 12px rgba(0,0,0,.04),0 16px 48px rgba(0,0,0,.08);

    --apihub-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

}

/* ============================================================
   2. 基础重置
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
    background:var(--apihub-bg);
    color:var(--apihub-text);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}
a{color:var(--apihub-ink);text-decoration:none}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
code,pre,kbd{font-family:var(--apihub-mono)}

/* ============================================================
   3. 按钮体系（与 .gsxq-btn 视觉一致）
   ============================================================ */
.apihub-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:12px 28px;
    background:var(--apihub-surface);color:var(--apihub-ink);
    border:1px solid var(--apihub-line);border-radius:var(--apihub-radius);
    font-size:14px;font-weight:500;letter-spacing:.6px;line-height:1.4;
    text-decoration:none;cursor:pointer;white-space:nowrap;
    transition:all .2s;font-family:inherit;
}
.apihub-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.08)}
.apihub-btn:disabled,.apihub-btn.is-loading{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}
.apihub-btn-primary{background:var(--apihub-ink);color:#fff;border-color:var(--apihub-ink)}
.apihub-btn-primary:hover{background:#000;border-color:#000}
.apihub-btn-secondary{background:transparent;color:var(--apihub-ink);border-color:var(--apihub-ink)}
.apihub-btn-secondary:hover{background:var(--apihub-ink);color:#fff}
.apihub-btn-ghost{background:transparent;border-color:transparent;color:var(--apihub-muted);padding:8px 12px;letter-spacing:0}
.apihub-btn-ghost:hover{color:var(--apihub-ink);background:var(--apihub-line-soft);box-shadow:none}
.apihub-btn:active{transform:translateY(1px);box-shadow:none}
.apihub-btn-primary:active,.apihub-btn-secondary:active{filter:brightness(.94)}
.apihub-btn-sm{padding:8px 18px;font-size:12.5px;font-weight:500;letter-spacing:.3px;line-height:1.45}
.apihub-btn-large{padding:14px 34px;font-size:16px}
.apihub-btn-block{display:flex;width:100%}

/* ============================================================
   4. 页头
   ============================================================ */
.apihub-header{
    background:var(--apihub-surface);
    position:sticky;top:0;z-index:200;
    border-bottom:1px solid #e8e8e8;
    box-shadow:var(--apihub-shadow-sm);
}
.apihub-header-inner{
    max-width:1200px;margin:0 auto;padding:0 24px;
    display:flex;align-items:center;justify-content:space-between;height:60px;
}
.apihub-brand{display:flex;align-items:center;gap:10px}
.apihub-brand-mark{
    width:28px;height:28px;border-radius:8px;flex-shrink:0;
    background:linear-gradient(135deg,var(--apihub-dark) 0%,#2d2d44 100%);
    color:#fff;display:flex;align-items:center;justify-content:center;
    font-size:13px;font-weight:700;letter-spacing:.5px;
}
.apihub-brand-name{color:var(--apihub-ink);font-size:17px;font-weight:600;letter-spacing:1px}
.apihub-brand-sub{
    font-size:10px;letter-spacing:2px;text-transform:uppercase;
    color:var(--apihub-faint);border-left:1px solid var(--apihub-line);
    padding-left:10px;margin-left:2px;
}

.apihub-nav{display:flex;align-items:center;gap:4px}
.apihub-nav a{
    padding:8px 14px;border-radius:6px;
    font-size:13px;font-weight:500;color:rgba(0,0,0,.65);
    transition:all .25s;
}
.apihub-nav a:hover{color:var(--apihub-ink);background:#f8fafc}
.apihub-nav a.is-active{color:var(--apihub-ink);background:#f1f5f9;font-weight:600}
.apihub-nav-cta{margin-left:10px;display:flex;align-items:center}
.apihub-nav-cta a{
    background:var(--apihub-ink);color:#fff;border-radius:var(--apihub-radius);
    padding:9px 20px;letter-spacing:.5px;display:block;
}
.apihub-nav-cta a:hover{background:#000;color:#fff}

.apihub-menu-toggle{
    display:none;flex-direction:column;gap:5px;
    background:none;border:none;cursor:pointer;padding:6px;
}
.apihub-menu-toggle span{display:block;width:22px;height:2px;background:var(--apihub-ink);transition:all .3s}

/* ============================================================
   5. 布局容器
   ============================================================ */
.apihub-main{min-height:calc(100vh - 200px);padding-bottom:60px}
.apihub-container{max-width:1200px;margin:0 auto;padding:36px 24px 0}
.apihub-narrow{max-width:880px}

/* ============================================================
   6. Hero
   ============================================================ */
.apihub-hero{
    background:linear-gradient(135deg,var(--apihub-dark) 0%,var(--apihub-dark-2) 100%);
    color:#fff;padding:76px 32px 68px;text-align:center;
    border-radius:var(--apihub-radius);margin-bottom:40px;
}
.apihub-hero-eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-size:11px;letter-spacing:2px;text-transform:uppercase;
    color:rgba(255,255,255,.62);
    border:1px solid rgba(255,255,255,.18);border-radius:6px;
    padding:5px 14px;margin-bottom:24px;
}
.apihub-hero-title{
    font-size:36px;font-weight:300;letter-spacing:2px;
    line-height:1.35;margin-bottom:18px;
}
.apihub-hero-title strong{font-weight:600}
.apihub-hero-subtitle{
    font-size:15px;opacity:.78;max-width:640px;margin:0 auto 34px;line-height:1.8;
}
.apihub-hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.apihub-hero .apihub-btn-secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.apihub-hero .apihub-btn-secondary:hover{background:#fff;color:var(--apihub-dark);border-color:#fff}
.apihub-hero .apihub-btn-primary{background:#fff;color:var(--apihub-dark);border-color:#fff}
.apihub-hero .apihub-btn-primary:hover{background:#f1f5f9;border-color:#f1f5f9}

/* Hero 搜索框 */
.apihub-hero-search{
    max-width:520px;margin:0 auto 28px;position:relative;
}
.apihub-hero-search input{
    width:100%;padding:14px 18px 14px 44px;
    border-radius:var(--apihub-radius);border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.08);color:#fff;
    font-size:14px;font-family:inherit;outline:none;transition:all .2s;
}
.apihub-hero-search input::placeholder{color:rgba(255,255,255,.45)}
.apihub-hero-search input:focus{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.4)}
.apihub-hero-search::before{
    content:"⌕";position:absolute;left:16px;top:50%;transform:translateY(-50%);
    font-size:19px;color:rgba(255,255,255,.5);pointer-events:none;
}

/* ============================================================
   7. Section
   ============================================================ */
.apihub-section{margin-bottom:44px}
.apihub-section-header{
    display:flex;justify-content:space-between;align-items:flex-end;
    margin-bottom:22px;gap:16px;flex-wrap:wrap;
}
.apihub-section-title{
    font-size:20px;font-weight:600;letter-spacing:1px;color:var(--apihub-ink);
}
.apihub-section-desc{font-size:13px;color:var(--apihub-faint);margin-top:6px}
.apihub-section-more{font-size:13px;color:var(--apihub-muted);transition:color .2s}
.apihub-section-more:hover{color:var(--apihub-ink)}

.apihub-dot{color:var(--apihub-faint);margin:0 6px}

/* ============================================================
   8. 特性卡片（首页）
   ============================================================ */
.apihub-grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.apihub-feature{
    background:var(--apihub-surface);border:1px solid var(--apihub-line);
    border-radius:var(--apihub-radius);padding:30px 26px;
    transition:transform .2s,box-shadow .2s;
}
.apihub-feature:hover{transform:translateY(-3px);box-shadow:var(--apihub-shadow-md)}
.apihub-feature-icon{
    width:38px;height:38px;border-radius:10px;margin-bottom:16px;
    background:linear-gradient(135deg,var(--apihub-dark) 0%,#2d2d44 100%);
    color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;
}
.apihub-feature-title{font-size:16px;font-weight:600;color:var(--apihub-ink);margin-bottom:8px;letter-spacing:.5px}
.apihub-feature-desc{font-size:13px;color:var(--apihub-muted);line-height:1.75}
/* —— 首页核心能力：轻卡片化，与下方「三步接入」同栅格 / 同 8px 圆角 —— */
.apihub-features-compact{gap:20px;margin-top:0}
.apihub-feature-mini{
    position:relative;display:flex;flex-direction:column;
    background:var(--apihub-surface);border:1px solid var(--apihub-line);
    border-radius:var(--apihub-radius);padding:22px 22px 20px;
    box-shadow:var(--apihub-shadow-sm);overflow:hidden;
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.apihub-feature-mini-icon{
    width:38px;height:38px;flex:0 0 38px;display:flex;align-items:center;justify-content:center;
    border-radius:var(--apihub-radius);margin-bottom:16px;
    background:rgba(34,113,177,.09);color:var(--apihub-get);
}
.apihub-feature-mini-icon svg{width:20px;height:20px;display:block}
.apihub-feature-mini--safe .apihub-feature-mini-icon{background:rgba(34,113,177,.09);color:var(--apihub-get)}
.apihub-feature-mini--unify .apihub-feature-mini-icon{background:rgba(27,127,75,.09);color:var(--apihub-free)}
.apihub-feature-mini--docs .apihub-feature-mini-icon{background:rgba(22,33,62,.07);color:var(--apihub-dark-2)}
.apihub-feature-mini-title{font-size:15.5px;font-weight:600;color:var(--apihub-ink);margin:0 0 8px;letter-spacing:.3px}
.apihub-feature-mini p{font-size:13px;color:var(--apihub-muted);line-height:1.75;margin:0 0 18px}
.apihub-feature-mini-bar{
    display:block;width:26px;height:2px;border-radius:2px;margin-top:auto;
    background:var(--apihub-get);opacity:.5;
    transition:width .25s ease,opacity .25s ease;
}
.apihub-feature-mini--unify .apihub-feature-mini-bar{background:var(--apihub-free)}
.apihub-feature-mini--docs .apihub-feature-mini-bar{background:var(--apihub-dark-2)}
@media (hover:hover){
    .apihub-feature-mini:hover{transform:translateY(-3px);box-shadow:var(--apihub-shadow-md);border-color:#cdd5de}
    .apihub-feature-mini:hover .apihub-feature-mini-bar{width:44px;opacity:1}
}
@media (max-width:768px){
    .apihub-features-compact{gap:14px}
    .apihub-feature-mini{padding:18px 18px 16px}
    .apihub-feature-mini-icon{width:34px;height:34px;flex-basis:34px;margin-bottom:12px}
    .apihub-feature-mini-title{font-size:15px}
    .apihub-feature-mini p{font-size:13.5px;line-height:1.8;margin-bottom:14px}
}

/* ============================================================
   9. 接口卡片
   ============================================================ */
.apihub-api-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;
}
.apihub-api-card{
    background:var(--apihub-surface);border:1px solid var(--apihub-line);
    border-radius:var(--apihub-radius);padding:22px 24px 20px;
    display:flex;flex-direction:column;position:relative;
    transition:transform .2s,box-shadow .2s,border-color .2s;
}
.apihub-api-card:hover{transform:translateY(-2px);box-shadow:var(--apihub-shadow-md);border-color:#cfcfcf}
.apihub-api-card-tags{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.apihub-api-card-title{
    font-size:16px;font-weight:600;color:var(--apihub-ink);
    line-height:1.45;margin-bottom:8px;letter-spacing:.3px;
}
.apihub-api-card-title a{color:inherit}
.apihub-api-card-title a::after{content:"";position:absolute;inset:0;z-index:1}
.apihub-card-actions,.apihub-compare-btn,.apihub-api-card-cta{position:relative;z-index:2}
.apihub-api-card:hover .apihub-api-card-title{color:#000}
.apihub-api-card-desc{
    font-size:13px;color:var(--apihub-muted);line-height:1.7;margin-bottom:16px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    min-height:44px;
}
.apihub-api-card-path{
    font-family:var(--apihub-mono);font-size:11.5px;color:var(--apihub-faint);
    background:#fafafa;border:1px solid var(--apihub-line-soft);border-radius:3px;
    padding:6px 10px;margin-bottom:14px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.apihub-api-card-foot{
    margin-top:auto;display:flex;align-items:center;justify-content:space-between;
    gap:10px;padding-top:14px;border-top:1px solid var(--apihub-line-soft);
    font-size:12px;color:var(--apihub-faint);
}
.apihub-api-card-cta{color:var(--apihub-link);font-weight:500;font-size:12.5px}
.apihub-api-card:hover .apihub-api-card-cta{text-decoration:underline}

/* 方法徽章 */
.apihub-method{
    display:inline-flex;align-items:center;
    font-family:var(--apihub-mono);font-size:10.5px;font-weight:700;
    letter-spacing:.8px;padding:3px 8px;border-radius:3px;
    border:1px solid currentColor;line-height:1.5;
}
.apihub-method-get{color:var(--apihub-get);background:rgba(34,113,177,.06)}
.apihub-method-post{color:var(--apihub-post);background:rgba(255,107,0,.07)}
.apihub-method-put,.apihub-method-delete{color:#6a4fa3;background:rgba(106,79,163,.07)}

/* 积分徽章 */
.apihub-credits{
    display:inline-flex;align-items:center;gap:4px;
    font-size:11px;font-weight:600;letter-spacing:.3px;
    padding:3px 9px;border-radius:6px;line-height:1.5;
    background:#f5f5f5;color:var(--apihub-muted);border:1px solid var(--apihub-line);
}
.apihub-credits-free{background:rgba(27,127,75,.07);color:var(--apihub-free);border-color:rgba(27,127,75,.24)}
.apihub-credits-paid{background:rgba(255,107,0,.07);color:#b34d00;border-color:rgba(255,107,0,.28)}
.apihub-credits-money{background:rgba(214,51,108,.08);color:#b32466;border-color:rgba(214,51,108,.28)}

/* ============================================================
   10. 工具栏 / 筛选
   ============================================================ */
.apihub-toolbar{
    background:var(--apihub-surface);border:1px solid var(--apihub-line);
    border-radius:var(--apihub-radius);padding:16px 20px;
    display:flex;flex-direction:column;gap:14px;
    margin-bottom:24px;
}
.apihub-toolbar-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.apihub-toolbar-search .apihub-search{flex:1 1 260px;min-width:220px}
.apihub-search{position:relative;flex:1 1 260px;min-width:220px}
.apihub-search input{
    width:100%;padding:10px 14px 10px 38px;
    border:1px solid var(--apihub-line);border-radius:var(--apihub-radius);
    font-size:13.5px;font-family:inherit;color:var(--apihub-ink);
    background:#fff;outline:none;transition:border-color .2s,box-shadow .2s;
}
.apihub-search input:focus{border-color:var(--apihub-ink);box-shadow:0 0 0 3px rgba(33,33,33,.06)}
.apihub-search::before{
    content:"⌕";position:absolute;left:14px;top:50%;transform:translateY(-50%);
    color:var(--apihub-faint);font-size:17px;pointer-events:none;
}
.apihub-chips{display:flex;gap:8px;flex-wrap:wrap}
.apihub-chip{
    padding:6px 13px;border-radius:6px;font-size:12.5px;font-weight:500;line-height:1.4;
    background:#fafafa;border:1px solid var(--apihub-line);color:var(--apihub-muted);
    cursor:pointer;transition:all .2s;white-space:nowrap;
}
.apihub-chip:hover{border-color:var(--apihub-ink);color:var(--apihub-ink)}
.apihub-chip.is-active{background:var(--apihub-ink);border-color:var(--apihub-ink);color:#fff}

.apihub-result-meta{font-size:12.5px;color:var(--apihub-faint);margin-bottom:18px}
.apihub-result-meta strong{color:var(--apihub-ink);font-weight:600}

/* ============================================================
   11. 通用卡片 / 表格
   ============================================================ */
.apihub-card{
    background:var(--apihub-surface);border:1px solid var(--apihub-line);
    border-radius:var(--apihub-radius);overflow:hidden;
}
.apihub-card-head{
    padding:18px 24px;border-bottom:1px solid var(--apihub-line-soft);
    display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.apihub-card-head h2,.apihub-card-head h3{font-size:15px;font-weight:600;letter-spacing:.5px;color:var(--apihub-ink)}
.apihub-card-body{padding:24px}

.apihub-table{width:100%;border-collapse:collapse;font-size:13px}
.apihub-table th{
    text-align:left;font-weight:600;color:var(--apihub-ink);
    background:#fafafa;padding:10px 14px;border-bottom:1px solid var(--apihub-line);
    font-size:12px;letter-spacing:.5px;white-space:nowrap;
}
.apihub-table td{padding:11px 14px;border-bottom:1px solid var(--apihub-line-soft);color:var(--apihub-text);vertical-align:top}
.apihub-table tr:last-child td{border-bottom:none}
.apihub-table code{font-size:12px;color:#a63d00;background:#fdf6f0;padding:1px 5px;border-radius:3px}
.apihub-table .req{color:var(--apihub-err);font-size:11px;font-weight:600}

/* ============================================================
   12. 代码块（JSON 高亮）
   ============================================================ */
.apihub-code{
    position:relative;background:#1b1b26;border-radius:var(--apihub-radius);
    overflow:hidden;margin:0;
}
.apihub-code-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:9px 14px;background:rgba(255,255,255,.04);
    border-bottom:1px solid rgba(255,255,255,.07);
}
.apihub-code-lang{
    font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;
    color:rgba(255,255,255,.45);font-family:var(--apihub-mono);
}
.apihub-copy{
    background:none;border:none;color:rgba(255,255,255,.5);
    font-size:11px;cursor:pointer;padding:2px 6px;border-radius:3px;
    font-family:inherit;transition:all .2s;
}
.apihub-copy:hover{color:#fff;background:rgba(255,255,255,.1)}
.apihub-code pre{
    margin:0;padding:16px 18px;overflow:auto;
    font-size:12.5px;line-height:1.75;color:#d4d4d4;
    max-height:420px;
}
.apihub-code pre::-webkit-scrollbar{height:8px;width:8px}
.apihub-code pre::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:4px}

.j-key{color:#9cdcfe}
.j-str{color:#ce9178}
.j-num{color:#b5cea8}
.j-bool{color:#569cd6}
.j-null{color:#808080;font-style:italic}

/* ============================================================
   13. 空状态 / 提示
   ============================================================ */
.apihub-empty{
    text-align:center;padding:64px 24px;color:var(--apihub-faint);
    background:#fafafa;border:1px dashed var(--apihub-line);border-radius:var(--apihub-radius);
}
.apihub-empty-icon{font-size:30px;margin-bottom:12px;opacity:.5}
.apihub-empty-title{font-size:15px;color:var(--apihub-muted);margin-bottom:6px;font-weight:500}
.apihub-empty-desc{font-size:13px}

.apihub-note{
    display:flex;gap:10px;padding:12px 16px;border-radius:var(--apihub-radius);
    font-size:12.5px;line-height:1.7;border:1px solid;margin-top:16px;
}
/* 图标徽标：把裸字符“!”“i”渲染成圆形警示/信息图标，避免看起来像正文开头 */
.apihub-note > span{
    flex:0 0 auto;width:18px;height:18px;display:inline-flex;align-items:center;
    justify-content:center;border-radius:50%;color:#fff;
    font-size:12px;font-weight:700;line-height:1;font-style:normal;margin-top:1px;
}
.apihub-note-info{background:#f4f8fc;border-color:#d8e6f3;color:#26557a}
.apihub-note-info > span{background:#26557a}
.apihub-note-warn{background:#fdf8f0;border-color:#f2e2c9;color:#8a5a12}
.apihub-note-warn > span{background:#8a5a12}
.apihub-note-err{background:#fcf4f4;border-color:#f0d6d6;color:#99302f}
.apihub-note-err > span{background:#99302f}

/* ============================================================
   14. 分页
   ============================================================ */
.apihub-pagination{display:flex;justify-content:center;gap:5px;margin-top:34px}
.apihub-pagination a,.apihub-pagination span{
    padding:8px 14px;background:var(--apihub-surface);
    border:1px solid var(--apihub-line);border-radius:var(--apihub-radius);
    font-size:13px;color:var(--apihub-muted);transition:all .2s;
}
.apihub-pagination a:hover{background:var(--apihub-ink);color:#fff;border-color:var(--apihub-ink)}
.apihub-pagination .current{background:var(--apihub-ink);color:#fff;border-color:var(--apihub-ink)}

/* ============================================================
   15. 首页：统计条 / 三步接入 / 快速开始 / CTA
   ============================================================ */
.apihub-statbar{
    display:grid;grid-template-columns:repeat(5,1fr);
    background:var(--apihub-surface);border:1px solid var(--apihub-line);
    border-radius:var(--apihub-radius);margin-bottom:44px;
    overflow:hidden;
}
.apihub-stat{
    padding:22px 16px;text-align:center;
    border-right:1px solid var(--apihub-line-soft);
}
.apihub-stat:last-child{border-right:none}
.apihub-stat strong{
    display:block;font-size:26px;font-weight:300;color:var(--apihub-ink);
    letter-spacing:1px;line-height:1.3;
}
.apihub-stat span{font-size:12px;color:var(--apihub-faint);letter-spacing:.5px}

.apihub-steps{
    display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:24px;
}
.apihub-step{
    background:var(--apihub-surface);border:1px solid var(--apihub-line);
    border-radius:var(--apihub-radius);padding:24px;
    position:relative;
}
.apihub-step-no{
    font-family:var(--apihub-mono);font-size:11px;letter-spacing:2px;
    color:var(--apihub-faint);display:block;margin-bottom:12px;
}
.apihub-step h3{font-size:15px;font-weight:600;color:var(--apihub-ink);margin-bottom:8px;letter-spacing:.5px}
.apihub-step p{font-size:13px;color:var(--apihub-muted);line-height:1.75}

.apihub-quickstart-code{
    display:grid;grid-template-columns:1.35fr 1fr;gap:20px;
    background:var(--apihub-surface);border:1px solid var(--apihub-line);
    border-radius:var(--apihub-radius);padding:20px;
}
.apihub-quickstart-note p{font-size:12.5px;color:var(--apihub-muted);margin-bottom:10px}
.apihub-quickstart-resp{
    margin:0;padding:16px;background:#fafafa;border:1px solid var(--apihub-line-soft);
    border-radius:var(--apihub-radius);font-size:12px;line-height:1.8;color:#555;
    overflow:auto;
}
.apihub-quickstart-code .apihub-code pre{max-height:220px}

.apihub-cta{
    background:linear-gradient(135deg,var(--apihub-dark) 0%,var(--apihub-dark-2) 100%);
    color:#fff;text-align:center;border-radius:var(--apihub-radius);
    padding:56px 24px;margin-bottom:20px;
}
.apihub-cta h2{font-size:24px;font-weight:300;letter-spacing:2px;margin-bottom:12px}
.apihub-cta p{font-size:13.5px;opacity:.75;margin-bottom:26px}
.apihub-cta .apihub-btn-primary{background:#fff;color:var(--apihub-dark);border-color:#fff}
.apihub-cta .apihub-btn-primary:hover{background:#f1f5f9;border-color:#f1f5f9}
.apihub-cta .apihub-btn-secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.apihub-cta .apihub-btn-secondary:hover{background:#fff;color:var(--apihub-dark)}

/* ============================================================
   16. 页面标题区 / 目录页补充
   ============================================================ */
.apihub-page-head{margin-bottom:24px}
.apihub-page-title{
    font-size:26px;font-weight:300;letter-spacing:2px;color:var(--apihub-ink);
    margin-bottom:8px;
}
.apihub-page-desc{font-size:13.5px;color:var(--apihub-muted);line-height:1.75;max-width:760px}

/* 当前筛选（可一键移除的 chip） */
.apihub-active-filters{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.apihub-active-filters-label{font-size:12px;color:var(--apihub-muted)}
.apihub-active-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--apihub-line);border-radius:6px;background:var(--apihub-surface);font-size:12px;font-weight:500;color:var(--apihub-ink);text-decoration:none;transition:all .15s}
.apihub-active-chip:hover{border-color:var(--apihub-ink)}
.apihub-chip-x{color:var(--apihub-faint);font-size:15px;line-height:1}
.apihub-active-chip:hover .apihub-chip-x{color:var(--apihub-err)}
.apihub-active-clear{font-size:12px;color:var(--apihub-muted);text-decoration:none;margin-left:2px}
.apihub-active-clear:hover{color:var(--apihub-ink);text-decoration:underline}
.apihub-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 服务状态：可用率语义色点 */
.apihub-dot-status{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:middle;background:var(--apihub-faint)}
.apihub-dot-status.is-ok{background:var(--apihub-free)}
.apihub-dot-status.is-warn{background:#e0a020}
.apihub-dot-status.is-bad{background:var(--apihub-err)}

.apihub-chip-count{
    display:inline-block;margin-left:5px;font-size:11px;opacity:.55;
}
.apihub-chip.is-active .apihub-chip-count{opacity:.8}
.apihub-pagination-dots{padding:8px 6px;color:var(--apihub-faint);font-size:13px}

.apihub-center-block{padding:56px 24px;text-align:center}

/* ============================================================
   17. 控制台
   ============================================================ */
.apihub-console-stats{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:20px;
}
.apihub-console-stat{
    background:var(--apihub-surface);border:1px solid var(--apihub-line);
    border-radius:var(--apihub-radius);padding:18px 22px;
}
.apihub-console-stat span{font-size:12px;color:var(--apihub-faint);display:block;margin-bottom:6px}
.apihub-console-stat strong{
    font-size:26px;font-weight:300;color:var(--apihub-ink);letter-spacing:1px;
}
.apihub-key-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.apihub-key{
    flex:1 1 320px;font-family:var(--apihub-mono);font-size:13px;
    background:#fafafa;border:1px solid var(--apihub-line);border-radius:var(--apihub-radius);
    padding:12px 16px;color:var(--apihub-ink);overflow:auto;white-space:nowrap;
}

/* Key 安全设置 */
.apihub-key-sec{
    margin-top:18px;padding-top:18px;border-top:1px solid var(--apihub-line-soft);
}
.apihub-key-sec-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.apihub-key-sec-row.apihub-key-sec-col{display:block;margin-top:16px}
.apihub-key-sec .apihub-doc-h3{font-size:13px;font-weight:600;color:var(--apihub-ink);margin:0 0 4px}
.apihub-key-sec .apihub-doc-muted{font-size:12px;margin:0}
.apihub-key-sec textarea.apihub-input{
    width:100%;margin-top:8px;font-family:inherit;font-size:13px;line-height:1.6;
    border:1px solid var(--apihub-line);border-radius:var(--apihub-radius);
    padding:10px 12px;resize:vertical;box-sizing:border-box;color:var(--apihub-ink);
}
.apihub-key-sec-actions{margin-top:14px;display:flex;align-items:center;gap:10px}
.apihub-key-sec-actions .apihub-doc-muted{font-size:12px}

/* 开关（停用 Key） */
.apihub-switch{position:relative;display:inline-block;width:44px;height:24px;cursor:pointer;flex-shrink:0}
.apihub-switch input{position:absolute;opacity:0;width:0;height:0}
.apihub-switch-track{
    position:absolute;inset:0;background:#cfd4dd;border-radius:20px;transition:.2s;
}
.apihub-switch-track::before{
    content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;
    background:#fff;transition:.2s;box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.apihub-switch input:checked + .apihub-switch-track{background:var(--apihub-err,#c62828)}
.apihub-switch input:checked + .apihub-switch-track::before{transform:translateX(20px)}

.apihub-log-status{
    display:inline-block;padding:3px 9px;border-radius:6px;font-size:11px;font-weight:500;
    background:rgba(27,127,75,.08);color:var(--apihub-free);
}
.apihub-log-status.is-fail,.apihub-log-status.is-error{
    background:rgba(198,40,40,.08);color:var(--apihub-err);
}
.apihub-log-filter-group{display:inline-flex;gap:6px}
.apihub-log-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.apihub-table-wrap{overflow-x:auto}

/* ============================================================
   17.5 单卡片容器（Page / 控制台统一外壳）
   整页内容收进一个白卡，区块之间用分隔线区隔，而非多张漂浮卡片。
   ============================================================ */
.apihub-panel{
    background:var(--apihub-surface);
    border-radius:var(--apihub-radius-card);
    box-shadow:var(--apihub-shadow-card);
    overflow:hidden;
}
.apihub-panel-section{padding:20px;border-bottom:1px solid var(--apihub-line-soft)}
.apihub-panel-section:last-child{border-bottom:none}
.apihub-panel-h{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    margin-bottom:14px;
}
.apihub-panel-h h2,.apihub-panel-h h3{
    font-size:15px;font-weight:600;letter-spacing:.5px;color:var(--apihub-ink);
}

/* 充值套餐网格 */
.apihub-pkg-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;
}
.apihub-pkg{
    display:flex;flex-direction:column;align-items:center;gap:4px;
    padding:20px 14px;border:1px solid var(--apihub-line);border-radius:var(--apihub-radius);
    background:#fff;cursor:pointer;transition:all .2s;text-align:center;font-family:inherit;
    position:relative;overflow:hidden;
}
.apihub-pkg:hover{border-color:var(--apihub-ink);box-shadow:var(--apihub-shadow-sm);transform:translateY(-2px)}
.apihub-pkg-credits{font-size:22px;font-weight:600;color:var(--apihub-ink);letter-spacing:.5px}
.apihub-pkg-credits small{font-size:12px;font-weight:500;color:var(--apihub-faint);margin-left:3px}
.apihub-pkg-amount{font-size:15px;color:var(--apihub-accent);font-weight:600}
.apihub-pkg-label{font-size:11px;color:var(--apihub-faint);letter-spacing:1px}

/* 推荐套餐角标（借鉴 dubpro 的 Best Value 斜切角标） */
.apihub-pkg.is-featured{border-color:var(--apihub-ink);box-shadow:var(--apihub-shadow-md)}
.apihub-pkg-ribbon{
    position:absolute;top:-1px;right:-1px;background:var(--apihub-ink);color:#fff;
    font-size:11px;font-weight:600;letter-spacing:.5px;padding:4px 12px;
    border-radius:0 var(--apihub-radius) 0 0;pointer-events:none;
}

/* 支付弹窗 */
.apihub-modal{position:fixed;inset:0;background:rgba(20,20,40,.6);
    backdrop-filter:blur(4px);
    display:flex;align-items:center;justify-content:center;z-index:999;padding:20px}
.apihub-modal[hidden]{display:none}
.apihub-modal-card{background:#fff;border-radius:var(--apihub-radius-card);max-width:360px;width:100%;
    padding:28px 26px 24px;position:relative;box-shadow:0 24px 60px rgba(15,23,42,.30);
    text-align:center;animation:apihubPayPop .18s ease-out}
.apihub-pay-open{display:block;width:100%;box-sizing:border-box;padding:12px 16px;background:var(--apihub-accent);
    color:#fff;text-decoration:none;border-radius:10px;font-size:14px;font-weight:600;
    margin:0 auto 12px;transition:all .3s}
.apihub-pay-open:hover{background:#e65100;color:#fff}
.apihub-modal-close{position:absolute;top:8px;right:14px;background:none;border:none;
    font-size:24px;line-height:1;color:var(--apihub-faint);cursor:pointer}
.apihub-modal-close:hover{color:var(--apihub-ink)}
@keyframes apihubPayPop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.apihub-modal-title{font-size:17px;font-weight:600;color:var(--apihub-ink);margin-bottom:6px;letter-spacing:.5px}
.apihub-modal-meta{font-size:12.5px;color:var(--apihub-muted);margin-bottom:16px}
.apihub-qr-box{width:220px;height:220px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;
    background:#fff;border:1px solid var(--apihub-line-soft);border-radius:var(--apihub-radius);padding:10px}
.apihub-qr-box svg{width:100%;height:100%;display:block}
.apihub-pay-status{font-size:13px;min-height:20px;margin-bottom:10px}
.apihub-pay-status.is-wait{color:var(--apihub-muted)}
.apihub-pay-status.is-ok{color:var(--apihub-free);font-weight:600}
.apihub-pay-status.is-err{color:var(--apihub-err)}

/* ============================================================
   17.7 单卡片外壳（app shell，完全对齐 gsx-query）
   整页收进一张白卡：自带页头（品牌 + 导航）/ 内容 / 页脚。
   外壳页面隐藏全局页头与页脚，复刻 gsx-query 的应用内壳层。
   ============================================================ */
.apihub-shell{
    background:var(--apihub-bg);
    min-height:100vh;
    padding:24px 0;                  /* 仅纵向留白，横向保持 0：内容左缘由卡片 max-width:1200 与容器内边距统一，和首页 1200 栅格对齐 */
    display:flex;justify-content:center;align-items:flex-start;
    box-sizing:border-box;
}
.apihub-shell-card{
    background:#fff;
    border-radius:var(--apihub-radius-card);
    box-shadow:var(--apihub-shadow-card);
    max-width:1200px;width:100%;     /* 与首页 .apihub-container / .apihub-header-inner 的 1200 栅格对齐 */
    min-height:calc(100vh - 48px);   /* 撑满视口减上下 24px×2，页脚恒定落底（外壳已留纵向 24px） */
    overflow:hidden;
    display:flex;flex-direction:column;
    position:relative;
}
.apihub-shell-header{
    display:flex;align-items:center;justify-content:space-between;
    padding:18px 24px;border-bottom:1px solid var(--apihub-line-soft);
    background:#fff;flex-shrink:0;
}
.apihub-shell-brand{display:flex;align-items:center;gap:12px;text-decoration:none;transition:opacity .2s}
.apihub-shell-brand:hover{opacity:.8}
.apihub-shell-logo{
    width:30px;height:30px;border-radius:8px;flex-shrink:0;
    background:linear-gradient(135deg,var(--apihub-dark) 0%,#2d2d44 100%);
    color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;
}
.apihub-shell-site{font-size:16px;font-weight:700;color:var(--apihub-ink);letter-spacing:.3px}
.apihub-shell-nav{display:flex;align-items:center;gap:2px}
.apihub-shell-nav a,.apihub-shell-nav span{
    padding:8px 16px;border-radius:10px;font-size:13px;font-weight:500;
    color:var(--apihub-nav-muted);text-decoration:none;transition:all .25s;cursor:pointer;
    border:none;background:none;display:inline-flex;align-items:center;gap:6px;
}
.apihub-shell-nav a:hover{color:var(--apihub-ink);background:#f8fafc}
.apihub-shell-nav a.active{color:var(--apihub-ink);background:#f1f5f9;font-weight:600}
.apihub-shell-body{flex:1;padding:0;overflow:auto}
.apihub-shell-footer{
    padding:20px 36px;background:#fafbfc;border-top:1px solid var(--apihub-line-soft);
    text-align:center;flex-shrink:0;
}
.apihub-shell-footer-inner{display:flex;flex-direction:column;align-items:center;gap:8px}
.apihub-shell-footer-copy{font-size:12px;color:var(--apihub-nav-muted);margin:0;letter-spacing:.3px}
.apihub-shell-footer-links{font-size:12px;color:#cbd5e1;margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.apihub-shell-footer-links a{color:var(--apihub-nav-muted);text-decoration:none;transition:color .2s;font-size:12px}
.apihub-shell-footer-links a:hover{color:var(--apihub-ink)}
.apihub-shell-footer-links .sep{color:#e2e8f0}

/* 外壳内：单卡片容器去边框/阴影（外壳卡已提供），区块用分隔线区隔 */
.apihub-shell-body .apihub-panel{box-shadow:none;border-radius:0;background:transparent}
.apihub-shell-body .apihub-container{padding:24px;max-width:none;margin:0}  /* 流体铺满：解除 1200px 上限 */
.apihub-shell-body .apihub-narrow{max-width:none}                          /* 流体铺满：解除控制台/状态页 880px 上限 */

/* 外壳模式下隐藏全局页头页脚 */
body.apihub-shell-mode .apihub-header,
body.apihub-shell-mode .apihub-footer{display:none!important}
body.apihub-shell-mode .apihub-main{min-height:auto;padding-bottom:0}

@media (max-width:768px){
    .apihub-shell{padding:10px}
    .apihub-shell-card{border-radius:0}
    /* 移动端：隐藏站点名、缩小字号、头部保持「Logo + 导航」同一行 */
    .apihub-shell-header{
        flex-direction:row;align-items:center;justify-content:space-between;gap:8px;
        padding:10px 12px;position:sticky;top:0;z-index:100;box-shadow:0 1px 4px rgba(0,0,0,.04)}
    .apihub-shell-site{display:none}                       /* 移动端隐藏站点名称，仅留 Logo */
    .apihub-shell-logo{width:26px;height:26px;font-size:13px;border-radius:7px}
    .apihub-shell-nav{
        flex:1;justify-content:flex-end;gap:1px;flex-wrap:nowrap;overflow-x:auto;
        -webkit-overflow-scrolling:touch;scrollbar-width:none}
    .apihub-shell-nav::-webkit-scrollbar{display:none}
    .apihub-shell-nav a,.apihub-shell-nav span{
        padding:5px 9px;font-size:12px;border-radius:8px;
        white-space:nowrap;flex-shrink:0}
    .apihub-shell-footer{padding:14px}
    .apihub-shell-body .apihub-container{padding:14px}
}

/* 详情页：调用统计小卡 + 趋势图 */
.apihub-doc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.apihub-doc-stat{background:#fafbfc;border:1px solid var(--apihub-line-soft);
    border-radius:var(--apihub-radius);padding:14px 16px;text-align:center}
.apihub-doc-stat strong{display:block;font-size:22px;font-weight:300;color:var(--apihub-ink);letter-spacing:.5px;line-height:1.3}
.apihub-doc-stat span{font-size:11px;color:var(--apihub-faint)}
.apihub-chart-wrap{margin-top:4px}
.apihub-chart-inner{width:100%;height:96px}
.apihub-chart{width:100%;height:100%;display:block}
.apihub-chart-axis{position:relative;height:16px;margin-top:4px;font-size:11px;color:var(--apihub-faint)}
.apihub-chart-label{position:absolute;top:0;white-space:nowrap}

/* 详情页：单栏布局（调试台移至文档下方，避免超出单卡片容器） */
.apihub-doc-layout{display:block}
.apihub-doc-main{margin-bottom:8px}
.apihub-doc-side{margin-top:8px}
.apihub-debug{position:static}

/* 接口状态徽标 */
.apihub-status{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:6px;font-size:11px;font-weight:600;line-height:1}
.apihub-status::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.apihub-status.is-active{color:#1b7f4b;background:rgba(27,127,75,.10)}
.apihub-status.is-maintenance{color:#b07a12;background:rgba(176,122,18,.12)}
.apihub-status.is-down{color:#c62828;background:rgba(198,40,40,.10)}
.apihub-status-uptime{font-size:11px;color:var(--apihub-faint);margin-left:2px}

/* 相关接口 */
.apihub-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.apihub-related-card{display:block;text-decoration:none;background:#fafbfc;border:1px solid var(--apihub-line-soft);border-radius:var(--apihub-radius);padding:16px;transition:all .2s}
.apihub-related-card:hover{border-color:var(--apihub-ink);box-shadow:0 1px 4px rgba(0,0,0,.06);transform:translateY(-2px)}
.apihub-related-card h4{margin:0 0 6px;font-size:14px;color:var(--apihub-ink)}
.apihub-related-card p{margin:0;font-size:12px;color:var(--apihub-muted);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* 控制台：调用记录筛选 */
.apihub-log-filter{display:flex;flex-wrap:wrap;gap:8px 12px;margin-left:auto;align-items:center}
.apihub-log-filter button{border:1px solid var(--apihub-line);background:#fafafa;border-radius:6px;padding:6px 14px;font-size:12.5px;font-weight:500;line-height:1.4;cursor:pointer;color:var(--apihub-muted);font-family:inherit;transition:all .15s}
.apihub-log-filter button:hover{border-color:var(--apihub-ink);color:var(--apihub-ink)}
.apihub-log-filter button.is-active{background:var(--apihub-ink);color:#fff;border-color:var(--apihub-ink)}

/* 控制台：积分消耗 TOP */
.apihub-usage-list{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.apihub-usage-row{display:grid;grid-template-columns:120px 1fr 64px;align-items:center;gap:10px;font-size:13px}
.apihub-usage-name{color:var(--apihub-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.apihub-usage-track{height:10px;background:#f1f4f8;border-radius:6px;overflow:hidden}
.apihub-usage-fill{height:100%;background:linear-gradient(90deg,#3a3a5c,var(--apihub-dark));border-radius:6px}
.apihub-usage-val{text-align:right;color:var(--apihub-muted);font-variant-numeric:tabular-nums}

@media (max-width:768px){
  .apihub-related-grid{grid-template-columns:1fr}
  .apihub-usage-row{grid-template-columns:90px 1fr 52px}
  .apihub-log-filter{width:100%;margin:10px 0 0;gap:8px 10px}
  .apihub-log-filter button{padding:8px 14px;font-size:13px}
  .apihub-btn-sm{padding:9px 16px;font-size:13px;letter-spacing:.2px}
  .apihub-chip{padding:7px 13px;font-size:12.5px}
}

@media (max-width:768px){
    .apihub-panel-section{padding:18px 16px}
    .apihub-doc-stats{grid-template-columns:repeat(2,1fr)}
    .apihub-pkg-grid{grid-template-columns:repeat(2,1fr)}
    .apihub-qr-box{width:200px;height:200px}
}

/* ============================================================
   18. 页脚
   ============================================================ */
.apihub-footer{border-top:1px solid var(--apihub-line);background:var(--apihub-surface);margin-top:20px}
.apihub-footer-inner{
    max-width:1200px;margin:0 auto;padding:36px 24px;
    display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.apihub-footer-brand{font-size:14px;font-weight:600;color:var(--apihub-ink);letter-spacing:.5px;margin-bottom:6px}
.apihub-footer-desc{font-size:12px;color:var(--apihub-faint);line-height:1.7;max-width:420px}
.apihub-footer-links{display:flex;gap:20px;flex-wrap:wrap;font-size:12.5px}
.apihub-footer-links a{color:var(--apihub-muted)}
.apihub-footer-links a:hover{color:var(--apihub-ink)}
.apihub-copyright{
    max-width:1200px;margin:0 auto;padding:16px 24px 24px;
    font-size:12px;color:#b0b0b0;border-top:1px solid var(--apihub-line-soft);
}

/* ============================================================
   16. 响应式
   ============================================================ */
@media (max-width:900px){
    .apihub-hero{padding:60px 22px 54px}
    .apihub-hero-title{font-size:28px}
}
@media (max-width:768px){
    .apihub-header-inner{padding:0 16px}
    .apihub-menu-toggle{display:flex}
    .apihub-nav{
        display:none;position:absolute;top:60px;left:0;right:0;
        background:#fff;border-bottom:1px solid #e8e8e8;
        flex-direction:column;align-items:stretch;gap:2px;padding:14px;
        box-shadow:var(--apihub-shadow-md);z-index:150;
    }
    .apihub-nav.is-open{display:flex}
    .apihub-nav a{padding:11px 14px}
    .apihub-nav-cta{margin:6px 0 0}
    .apihub-nav-cta a{text-align:center;display:block}

    .apihub-container{padding:20px 14px 0}
    .apihub-hero{padding:46px 18px 42px;margin-bottom:28px}
    .apihub-hero-title{font-size:23px;letter-spacing:1px}
    .apihub-hero-subtitle{font-size:13.5px;line-height:1.75}
    .apihub-hero-eyebrow{font-size:10px;letter-spacing:1.5px}

    .apihub-btn{padding:10px 20px;font-size:13px}
    .apihub-btn-large{padding:13px 26px;font-size:14px}

    .apihub-api-grid{grid-template-columns:1fr}
    .apihub-grid-3{grid-template-columns:1fr}
    .apihub-brand-sub{display:none}
    .apihub-section-title{font-size:17px}
    .apihub-toolbar{padding:12px 14px}
    .apihub-card-body{padding:16px}
    .apihub-card-head{padding:14px 16px}
    .apihub-footer-inner{padding:26px 16px;flex-direction:column;gap:16px}
    .apihub-table{font-size:12px}
    .apihub-table th,.apihub-table td{padding:8px 10px}

    .apihub-statbar{grid-template-columns:repeat(2,1fr);margin-bottom:30px}
    .apihub-stat{border-bottom:1px solid var(--apihub-line-soft);padding:16px 10px}
    .apihub-stat:nth-child(2n){border-right:none}
    .apihub-stat:nth-last-child(-n+2){border-bottom:none}
    .apihub-stat strong{font-size:21px}

    .apihub-steps{grid-template-columns:1fr}
    .apihub-quickstart-code{grid-template-columns:1fr;padding:14px}
    .apihub-cta{padding:40px 18px}
    .apihub-cta h2{font-size:19px}

    .apihub-page-title{font-size:21px}
    .apihub-console-stats{grid-template-columns:1fr}
    .apihub-key{font-size:12px}
}


/* ============================================================
   20. 接口收藏（星标 + 控制台收藏墙）
   ============================================================ */
.apihub-fav{
    position:absolute;top:14px;right:14px;z-index:2;
    width:30px;height:30px;border-radius:50%;border:1px solid var(--apihub-line);
    background:var(--apihub-surface);color:var(--apihub-faint);cursor:pointer;
    font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;
    transition:all .2s;
}
.apihub-fav:hover{color:var(--apihub-accent);border-color:var(--apihub-accent)}
.apihub-fav.is-on{color:#ffb020;border-color:#ffb020;background:rgba(255,176,32,.12)}
.apihub-fav-grid{display:flex;flex-wrap:wrap;gap:10px}
.apihub-fav-chip{
    display:inline-flex;align-items:center;gap:8px;padding:7px 8px 7px 13px;
    background:var(--apihub-surface);border:1px solid var(--apihub-line);border-radius:8px;
    font-size:13px;font-weight:500;color:var(--apihub-ink);text-decoration:none;transition:all .2s;
}
.apihub-fav-chip:hover{border-color:var(--apihub-accent);color:var(--apihub-accent)}
.apihub-fav-remove{
    border:none;background:var(--apihub-line-soft);color:var(--apihub-muted);
    width:20px;height:20px;border-radius:50%;cursor:pointer;font-size:13px;line-height:1;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.apihub-fav-remove:hover{background:var(--apihub-err);color:#fff}

/* ============================================================
   21. 接口对比篮
   ============================================================ */
.apihub-card-actions{display:inline-flex;align-items:center;gap:10px}
.apihub-compare-btn{
    border:1px solid var(--apihub-line);background:transparent;color:var(--apihub-muted);
    border-radius:var(--apihub-radius);padding:5px 10px;font-size:11.5px;cursor:pointer;
    font-family:inherit;transition:all .2s;white-space:nowrap;
}
.apihub-compare-btn:hover{color:var(--apihub-ink);border-color:var(--apihub-ink)}
.apihub-compare-btn.is-on{background:var(--apihub-ink);color:#fff;border-color:var(--apihub-ink)}
.apihub-compare-tray{
    position:fixed;right:20px;bottom:20px;z-index:500;
    display:flex;align-items:center;gap:10px;
    background:var(--apihub-surface);border:1px solid var(--apihub-line);
    border-radius:14px;padding:10px 14px;box-shadow:var(--apihub-shadow-md);
}
.apihub-compare-tray[hidden]{display:none}
.apihub-compare-count{font-size:12.5px;color:var(--apihub-muted)}
.apihub-compare-go{
    border:none;background:var(--apihub-accent);color:#fff;border-radius:var(--apihub-radius);
    padding:8px 16px;font-size:13px;cursor:pointer;font-family:inherit;font-weight:600;
}
.apihub-compare-go:hover{background:#ff7a1a}
.apihub-compare-clear{
    border:none;background:transparent;color:var(--apihub-faint);font-size:12px;cursor:pointer;font-family:inherit;
}
.apihub-compare-clear:hover{color:var(--apihub-err)}
.apihub-compare-card{max-width:760px;width:100%;text-align:left;padding:24px}
.apihub-compare-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:18px}
.apihub-compare-col{background:var(--apihub-surface);border:1px solid var(--apihub-line);border-radius:var(--apihub-radius);padding:12px;display:flex;flex-direction:column;gap:8px}
.apihub-compare-name{font-size:13px;font-weight:600;color:var(--apihub-ink);text-decoration:none;line-height:1.4}
.apihub-compare-name:hover{color:var(--apihub-link)}
.apihub-compare-remove{border:1px solid var(--apihub-line);background:transparent;color:var(--apihub-muted);border-radius:var(--apihub-radius);padding:4px 8px;font-size:11px;cursor:pointer;font-family:inherit;align-self:flex-start}
.apihub-compare-remove:hover{color:var(--apihub-err);border-color:var(--apihub-err)}
.apihub-compare-table th{width:120px;white-space:nowrap;font-weight:600}
.apihub-compare-table td{text-align:center}
@media (max-width:768px){
    .apihub-compare-tray{right:12px;bottom:12px;left:12px;justify-content:space-between}
}

/* ============================================================
 * 22. 代码示例 Tabs（控制台/详情通用，纳入主样式确保全页可用）
 * ============================================================ */
.apihub-tabs{border:1px solid var(--apihub-line);border-radius:var(--apihub-radius);overflow:hidden}
.apihub-tabs-nav{
    display:flex;gap:2px;background:#fafafa;border-bottom:1px solid var(--apihub-line);
    padding:8px 8px 0;flex-wrap:wrap;
}
.apihub-tab{
    border:none;background:transparent;padding:8px 16px;
    font-size:12.5px;font-family:inherit;color:var(--apihub-muted);
    cursor:pointer;border-radius:4px 4px 0 0;transition:all .2s;
    border-bottom:2px solid transparent;margin-bottom:-1px;
}
.apihub-tab:hover{color:var(--apihub-ink);background:#f1f5f9}
.apihub-tab.is-active{
    color:var(--apihub-ink);font-weight:600;background:#fff;
    border-bottom-color:var(--apihub-ink);
}
.apihub-tab-panel{display:none}
.apihub-tab-panel.is-active{display:block}
.apihub-tab-panel .apihub-code{border-radius:0;border:none}
.apihub-tab-panel .apihub-code pre{max-height:360px}

/* 紧凑变体（控制台「快速接入」区使用） */
.apihub-tabs-sm{border:none;border-top:1px solid var(--apihub-line-soft);border-radius:0}
.apihub-tabs-sm .apihub-tabs-nav{background:#f4f5f7;padding:6px 8px 0}
.apihub-tabs-sm .apihub-tab{font-size:11.5px;padding:6px 12px}

/* ============================================================
 * 23. 可访问性 & 性能打磨
 * ============================================================ */

/* 键盘焦点可见：仅键盘 Tab 聚焦时显示描边，鼠标点击不打扰 */
:focus-visible{
    outline:2px solid var(--apihub-accent);
    outline-offset:2px;
    border-radius:var(--apihub-radius);
}
/* 文本输入框已有 box-shadow 聚焦环，避免与 outline 叠加过粗 */
.apihub-search input:focus-visible,
.apihub-field input:focus-visible,
.apihub-field select:focus-visible,
textarea:focus-visible,
.apihub-shell-nav a:focus-visible{
    outline:none;
}

/* 筛选 / 搜索：跳转或提交时的加载反馈 */
.apihub-toolbar[aria-busy="true"]{opacity:.7;cursor:progress}
.apihub-toolbar button[type="submit"][aria-busy="true"],
.apihub-toolbar button[type="submit"]:disabled{
    opacity:.6;cursor:progress;
}

/* 尊重「减少动态效果」系统偏好，关闭过渡与动画 */
@media (prefers-reduced-motion: reduce){
    *,
    *::before,
    *::after{
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
        scroll-behavior:auto !important;
    }
}

/* 移动端：关键操作触达区域 ≥ 40px，降低误触 */
@media (max-width:768px){
    .apihub-btn,
    .apihub-chip,
    .apihub-tab,
    .apihub-compare-btn,
    .apihub-log-filter button{
        min-height:40px;
    }
    .apihub-chip{padding:9px 14px}
    .apihub-tab{padding:10px 14px}
    /* 调试台工具按钮保持紧凑，仅适度放大 */
    .apihub-debug-tools .apihub-btn{min-height:34px}
}

/* ============================================================
 * 24. 移动端排版精修：小号字体 + 等比例缩放，更精致
 * ============================================================ */
@media (max-width:768px){
    html{font-size:15px;-webkit-text-size-adjust:100%}
    body{font-size:14px;line-height:1.65}

    /* 主要标题等比例收缩，避免大字号撑满窄屏 */
    .apihub-panel-h h2,
    .apihub-section-title,
    .apihub-page-title,
    .apihub-cta h2,
    .apihub-doc-h2{font-size:17px;line-height:1.4}
    .apihub-hero-title{font-size:21px;letter-spacing:.5px}

    /* 大数字（统计/趋势）改用 clamp 实现流式等比例缩放 */
    .apihub-doc-stats strong,
    .apihub-stat strong{font-size:clamp(18px,5.5vw,22px);font-weight:400;letter-spacing:.3px}

    /* 卡片与说明文字精修 */
    .apihub-api-card-title{font-size:14.5px}
    .apihub-api-card-desc,
    .apihub-page-desc,
    .apihub-doc-muted,
    .apihub-related-card p{font-size:12.5px;line-height:1.7}
    .apihub-api-card-path{font-size:11px}
    .apihub-credits,
    .apihub-status,
    .apihub-key{font-size:11px}

    /* 代码与调试区字号：比桌面略小，窄屏更精致 */
    .apihub-code,
    .apihub-code pre,
    .apihub-debug textarea,
    .apihub-debug input{font-size:12.5px;line-height:1.6}

    /* 表单输入在移动端略放大，触达舒适但不突兀 */
    .apihub-field input,
    .apihub-field select,
    .apihub-search input{font-size:15px}

    /* 列表/表格字号精修 */
    .apihub-table,
    .apihub-log-row{font-size:12px}
    .apihub-table th,
    .apihub-table td{padding:9px 10px}
    .apihub-log-filter button{font-size:12px}
}

/* 超小屏（≤400px）：进一步精修，避免拥挤 */
@media (max-width:400px){
    html{font-size:14px}
    body{font-size:13.5px;line-height:1.6}
    .apihub-shell-header{padding:9px 10px}
    .apihub-shell-site{display:none}
    .apihub-shell-nav a,.apihub-shell-nav span{padding:4px 7px;font-size:11px}
    .apihub-shell-body .apihub-container{padding:12px}
}

/* ============================================================
 * 25. 单卡片容器内文：移动端等比精修（缩小字体、保留 PC 版式比例）
 *     用 .apihub-shell-body 作用域的元素选择器等比下探，确保所有内文
 *     （列表/详情/控制台/状态）统一缩小且结构比例与 PC 一致。
 * ============================================================ */
@media (max-width:768px){
    /* 容器内文整体等比下探 */
    .apihub-shell-body{font-size:13.5px;line-height:1.65}
    .apihub-shell-body p,
    .apihub-shell-body li,
    .apihub-shell-body dd,
    .apihub-shell-body .apihub-doc-muted{font-size:13px;line-height:1.7}
    .apihub-shell-body h2,
    .apihub-shell-body .apihub-doc-h2{font-size:17px;line-height:1.4}
    .apihub-shell-body h3,
    .apihub-shell-body .apihub-doc-h3{font-size:15px}
    .apihub-shell-body h4{font-size:13.5px}
    .apihub-shell-body .apihub-btn{font-size:13px;padding:9px 14px}

    /* 代码块：保留 PC 横向结构，超出部分在本块内滚动，不撑破卡片 */
    .apihub-shell-body pre,
    .apihub-shell-body .apihub-code pre,
    .apihub-shell-body .apihub-quickstart-resp{
        white-space:pre;overflow-x:auto;-webkit-overflow-scrolling:touch;
        max-width:100%;font-size:12px;line-height:1.55;
    }
    /* 表格：保留 PC 列结构，窄屏横向滚动 */
    .apihub-shell-body table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
    .apihub-shell-body .apihub-table th,
    .apihub-shell-body .apihub-table td{padding:8px 10px;font-size:12px;white-space:nowrap}

    /* 卡片内边距收一点，给内容更多空间（仍保留 PC 的卡片观感） */
    .apihub-shell-body .apihub-panel-section{padding:16px 14px}
    .apihub-shell-body .apihub-card,
    .apihub-shell-body .apihub-api-card{padding:14px}
}
@media (max-width:400px){
    .apihub-shell-body{font-size:13px;line-height:1.6}
    .apihub-shell-body p,
    .apihub-shell-body li{font-size:12.5px}
    .apihub-shell-body h2,
    .apihub-shell-body .apihub-doc-h2{font-size:16px}
}

/* ============================================================
 * 注册 / 登录（简约卡片表单）
 * ============================================================ */
.apihub-auth{max-width:420px;margin:36px auto;}
.apihub-auth-card{background:var(--apihub-surface);border:1px solid var(--apihub-line);border-radius:var(--apihub-radius-card);padding:32px 30px 28px;}
.apihub-auth-title{font-size:22px;font-weight:400;letter-spacing:.5px;color:var(--apihub-ink);text-align:center;margin:0 0 6px;}
.apihub-auth-sub{font-size:13px;color:var(--apihub-muted);text-align:center;line-height:1.6;margin:0 0 22px;}
.apihub-field{margin-bottom:14px;}
.apihub-field label{display:block;font-size:13px;color:var(--apihub-ink);margin-bottom:6px;font-weight:500;}
.apihub-field input[type=email],
.apihub-field input[type=password],
.apihub-field input[type=text]{
    width:100%;padding:11px 13px;border:1px solid var(--apihub-line);border-radius:9px;
    font-size:14px;background:var(--apihub-surface);color:var(--apihub-ink);
    box-sizing:border-box;transition:border-color .15s,box-shadow .15s;
}
.apihub-field input:focus{outline:none;border-color:var(--apihub-link);box-shadow:0 0 0 3px rgba(34,113,177,.14);}
.apihub-auth-actions{margin-top:18px;}
.apihub-auth-actions .apihub-btn{width:100%;justify-content:center;}
.apihub-auth-foot{text-align:center;font-size:13px;color:var(--apihub-muted);margin-top:16px;}
.apihub-auth-foot a{color:var(--apihub-link);text-decoration:none;}
.apihub-auth-foot a:hover{text-decoration:underline;}
.apihub-auth-msg{font-size:13px;line-height:1.5;margin-bottom:14px;padding:10px 12px;border-radius:9px;display:none;}
.apihub-auth-msg.is-error{display:block;background:rgba(220,38,38,.08);color:#b42318;border:1px solid rgba(220,38,38,.2);}
.apihub-auth-msg.is-ok{display:block;background:rgba(21,115,71,.08);color:#157347;border:1px solid rgba(21,115,71,.2);}
.apihub-code-row{display:flex;gap:10px;}
.apihub-code-row input{flex:1;min-width:0;}
@media (max-width:480px){
    .apihub-auth-card{padding:24px 18px 22px;}
}

/* ============================================================
   通用内容页（普通页面 / 文章 / 归档 / 搜索 / 404 兜底模板）
   ============================================================ */
.apihub-wp-content{max-width:820px;}
.apihub-wp-content .apihub-section-title{margin:0 0 18px;font-size:24px;letter-spacing:.5px;}
.apihub-wp-content-body{font-size:14.5px;line-height:1.9;color:var(--apihub-ink);}
.apihub-wp-content-body h2,.apihub-wp-content-body h3{margin:24px 0 10px;font-size:17px;}
.apihub-wp-content-body p{margin:0 0 14px;}
.apihub-wp-content-body ul,.apihub-wp-content-body ol{margin:0 0 14px;padding-left:22px;}
.apihub-wp-content-body a{color:var(--apihub-link);text-decoration:underline;}
.apihub-wp-content-body img{max-width:100%;height:auto;}
.apihub-wp-content-body pre{overflow:auto;background:#fafafa;padding:14px;border:1px solid var(--apihub-line);border-radius:var(--apihub-radius);}
.apihub-wp-content-body table{width:100%;border-collapse:collapse;margin-bottom:14px;}
.apihub-wp-content-body th,.apihub-wp-content-body td{border:1px solid var(--apihub-line);padding:8px 10px;text-align:left;}
.apihub-wp-content-body .apihub-btn{text-decoration:none;}
.apihub-wp-list-title{font-size:18px;margin:0 0 8px;}
.apihub-wp-list-title a{color:var(--apihub-ink);text-decoration:none;}
.apihub-wp-list-title a:hover{color:var(--apihub-link);}
.apihub-wp-pagination{margin-bottom:24px;font-size:14px;}
@media (max-width:768px){
    .apihub-wp-content .apihub-section-title{font-size:20px;}
    .apihub-wp-content-body{font-size:14px;}
}