/* API详情页 - 现代风格 */
*{box-sizing:border-box}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

:root{
    --primary:#6366f1;
    --primary-dark:#4f46e5;
    --primary-light:#a5b4fc;
    --accent:#06b6d4;
    --bg-gradient:linear-gradient(135deg,#0f172a 0%,#1e293b 50%,#0f172a 100%);
    --text-primary:#1e293b;
    --text-secondary:#64748b;
    --text-muted:#94a3b8;
    --shadow-sm:0 1px 3px rgba(0,0,0,0.1);
    --shadow-md:0 4px 20px rgba(0,0,0,0.08);
    --shadow-lg:0 10px 40px rgba(0,0,0,0.12);
    --radius-sm:8px;
    --radius-md:12px;
    --radius-lg:18px;
    --radius-xl:24px;
}

.container{
    width:100%;min-height:100vh;
    background:#f8fafc;position:relative;
    font-family:'PingFang SC','Helvetica Neue',Arial,sans-serif;
    padding:80px 0 40px;
}
.container .decoration1,.container .decoration2{display:none}

.container .api_page{
    width:calc(100% - 60px);max-width:1280px;margin:0 auto;
    display:flex;gap:30px;flex-wrap:nowrap;align-items:flex-start;position:relative;z-index:1;
}
.container .api_page .api_page_left{flex:1;min-width:0}

/* API信息卡片 */
.container .api_page .api_page_left .apiinfo_box{
    width:100%;padding:28px 30px;
    background:#fff;border-radius:var(--radius-xl);
    display:flex;gap:24px;
    box-shadow:var(--shadow-sm);margin-bottom:20px;
    transition:all 0.3s;animation:fadeInUp 0.4s ease;
}
.container .api_page .api_page_left .apiinfo_box .apiinfo_img{
    border-radius:var(--radius-lg);width:90px;height:90px;
    object-fit:cover;flex-shrink:0;
}
.container .api_page .api_page_left .apiinfo_box .apiinfo_text{flex:1}
.container .api_page .api_page_left .apiinfo_box .apiinfo_text .apiinfo_title{
    font-size:24px;font-weight:800;color:var(--text-primary);margin-bottom:8px;
}
.container .api_page .api_page_left .apiinfo_box .apiinfo_text .apiinfo_desc{
    font-size:14px;color:var(--text-secondary);line-height:1.6;margin-bottom:16px;
}
.container .api_page .api_page_left .apiinfo_box .apiinfo_text .tagbox{
    display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;
}
.container .api_page .api_page_left .apiinfo_box .apiinfo_text .tagbox p{
    padding:6px 14px;border-radius:20px;font-size:13px;font-weight:500;
    background:#f1f5f9;color:var(--text-secondary);
}
.container .api_page .api_page_left .apiinfo_box .apiinfo_text .tagbox p.free{background:#dcfce7;color:#16a34a}
.container .api_page .api_page_left .apiinfo_box .apiinfo_text .tagbox p.jiofen{background:#ede9fe;color:#7c3aed}
.container .api_page .api_page_left .apiinfo_box .apiinfo_text .tagbox p.money{background:#fef3c7;color:#d97706}
.container .api_page .api_page_left .apiinfo_box .apiinfo_text .xspcer{display:flex;gap:8px}

/* 文档标签栏 */
.container .api_page .api_page_left .apiinfo_doc{
    width:100%;background:#fff;border-radius:var(--radius-xl);
    padding:16px 20px;box-shadow:var(--shadow-sm);margin-bottom:20px;
}
.container .api_page .api_page_left .apiinfo_doc .tage_box{
    display:flex;gap:4px;border-bottom:2px solid #f1f5f9;padding-bottom:12px;
}
.container .api_page .api_page_left .apiinfo_doc .tage_box .tag{
    padding:8px 20px;border-radius:8px;font-size:14px;font-weight:600;
    color:var(--text-secondary);cursor:pointer;transition:all 0.2s;
}
.container .api_page .api_page_left .apiinfo_doc .tage_box .tag:hover{background:#f1f5f9;color:var(--primary)}
.container .api_page .api_page_left .apiinfo_doc .tage_box .tag.active{background:#eef2ff;color:var(--primary)}

/* 文档内容 */
.container .api_page .api_page_left .apiinfo_doc .apiinfo_doc_box{padding:20px 0}
.container .api_page .api_page_left .apiinfo_doc .apiinfo_doc_box .markdown-body{padding:0}

/* 侧边栏 */
.container .api_page .api_page_right{width:340px;flex-shrink:0}
.container .api_page .api_page_right .tj_item_box,.container .api_page .api_page_right .apiinfo_mer{
    width:100%;background:#fff;border-radius:var(--radius-xl);
    padding:24px;box-shadow:var(--shadow-sm);margin-bottom:20px;
}
.container .api_page .api_page_right .apiinfo_mer .backimg{
    width:calc(100% + 48px);height:100px;object-fit:cover;
    margin:-24px -24px 0;border-radius:var(--radius-xl) var(--radius-xl) 0 0;
    display:block;
}
.container .api_page .api_page_right .apiinfo_mer{position:relative;padding-top:0;overflow:hidden}
.container .api_page .api_page_right .apiinfo_mer .mer_avatar_box{
    padding:20px 24px 24px;display:flex;gap:16px;align-items:center;
}
.container .api_page .api_page_right .apiinfo_mer .mer_avatar_box .avatar{
    width:60px;height:60px;border-radius:50%;flex-shrink:0;
    border:3px solid #fff;margin-top:-30px;box-shadow:var(--shadow-sm);
}
.container .api_page .api_page_right .apiinfo_mer .mer_avatar_box .info{flex:1}
.container .api_page .api_page_right .apiinfo_mer .mer_avatar_box .info .name{font-size:16px;font-weight:700;color:var(--text-primary);margin-bottom:4px}
.container .api_page .api_page_right .apiinfo_mer .mer_avatar_box .info .desc{font-size:13px;color:var(--text-secondary)}
.container .api_page .api_page_right .apiinfo_mer .mer_item_info{
    display:flex;padding:16px 24px;border-top:1px solid #f1f5f9;
}
.container .api_page .api_page_right .apiinfo_mer .mer_item_info .mer_item_info_item{
    flex:1;text-align:center;
}
.container .api_page .api_page_right .apiinfo_mer .mer_item_info .mer_item_info_item span{
    display:block;font-size:14px;font-weight:600;color:var(--text-primary);margin-top:4px;
}
.container .api_page .api_page_right .apiinfo_mer .mer_item_info .mer_item_info_item .icon{width:20px;height:20px}

/* 侧边栏 - 热门接口 */
.container .api_page .api_page_right .tj_item_box .tj_item_title{
    font-size:16px;font-weight:700;color:var(--text-primary);margin-bottom:16px;padding-bottom:12px;
    border-bottom:2px solid #f1f5f9;
}
.container .api_page .api_page_right .tj_item_box .api_item{
    display:flex;gap:12px;padding:12px 0;border-bottom:1px solid #f8fafc;
    text-decoration:none;color:inherit;transition:all 0.2s;
}
.container .api_page .api_page_right .tj_item_box .api_item:hover{background:#f8fafc;margin:0 -12px;padding:12px;border-radius:var(--radius-sm);}
.container .api_page .api_page_right .tj_item_box .api_item .api_icon{
    width:44px;height:44px;border-radius:var(--radius-sm);flex-shrink:0;overflow:hidden;
    background:linear-gradient(135deg,#eef2ff,#e0e7ff);display:flex;align-items:center;justify-content:center;
}
.container .api_page .api_page_right .tj_item_box .api_item .api_icon img{width:28px;height:28px;object-fit:contain}
.container .api_page .api_page_right .tj_item_box .api_item .api_info{flex:1;min-width:0}
.container .api_page .api_page_right .tj_item_box .api_item .api_info .api_name{
    font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.container .api_page .api_page_right .tj_item_box .api_item .api_info .api_desc{font-size:12px;color:var(--text-muted);margin-bottom:6px}
.container .api_page .api_page_right .tj_item_box .api_item .api_info .api_meta{display:flex;gap:6px;flex-wrap:wrap}
.container .api_page .api_page_right .tj_item_box .api_item .api_info .api_meta .xu_getsize{
    display:inline-flex;align-items:center;gap:3px;font-size:11px;color:var(--text-muted);
}
.container .api_page .api_page_right .tj_item_box .api_item .api_info .api_meta .xu_getsize img{width:12px;height:12px}
.container .api_page .api_page_right .tj_item_box .api_item .api_info .api_meta .xu_price{
    display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;
}
.container .api_page .api_page_right .tj_item_box .api_item .api_info .api_meta .xu_price .icon{width:12px;height:12px}
.container .api_page .api_page_right .tj_item_box .api_item .api_info .api_meta .xu_price.free{background:#dcfce7;color:#16a34a}
.container .api_page .api_page_right .tj_item_box .api_item .api_info .api_meta .xu_price.jiofen{background:#ede9fe;color:#7c3aed}
.container .api_page .api_page_right .tj_item_box .api_item .api_info .api_meta .xu_price.money{background:#fef3c7;color:#d97706}

/* 视口小于900px */
@media screen and (max-width:900px){
    .container .api_page{flex-wrap:wrap}
    .container .api_page .api_page_right{width:100%}
    .container .api_page .api_page_left .apiinfo_box{flex-wrap:wrap}
}
/* 视口小于700px */
@media screen and (max-width:700px){
    .container .api_page{width:calc(100% - 30px)}
    .container .api_page .api_page_left .apiinfo_box{padding:20px}
    .container .api_page .api_page_left .apiinfo_box .apiinfo_img{width:70px;height:70px}
    .container .api_page .api_page_left .apiinfo_box .apiinfo_text .apiinfo_title{font-size:20px}
    .container .api_page .api_page_left .apiinfo_doc .tage_box .tag{padding:6px 12px;font-size:13px}
    .container .api_page .api_page_right .apiinfo_mer .backimg{height:80px}
}