/* ======================================================
   CMS API 详情页样式 — detail.css
   来源: PhpCode getapi_api_detail.css + 内联 CSS 改写
   ====================================================== */

/* 主容器 */
.doc-wrap{max-width:1200px;margin:30px auto;padding:0 15px;}

/* 接口头部 */
.doc-header{display:flex;align-items:center;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid #e6e6e6;}
.doc-icon{width:52px;height:52px;border-radius:8px;overflow:hidden;background:#f2f2f2;display:flex;align-items:center;justify-content:center;margin-right:15px;flex-shrink:0;}
.doc-icon img{width:100%;height:100%;object-fit:cover;}
.doc-icon .fa{font-size:26px;color:#1E9FFF;}
.doc-info{flex:1;}
.doc-name{font-size:22px;color:#333;font-weight:bold;margin:0 0 6px;}
.doc-meta{font-size:13px;color:#999;}
.doc-meta span{margin-right:15px;}
.doc-meta code{background:#f5f5f5;padding:2px 6px;border-radius:3px;font-size:12px;color:#333;}

/* 接口基本信息栏 */
.api-info-bar{background:#f8f8f8;border:1px solid #e6e6e6;border-radius:4px;padding:14px 18px;margin-bottom:20px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
.api-info-bar .api-label{color:#999;font-size:13px;}
.api-info-bar .api-value{font-family:monospace;font-size:14px;color:#333;font-weight:bold;}
.api-info-bar .api-method{display:inline-block;background:#1E9FFF;color:#fff;padding:2px 10px;border-radius:3px;font-size:12px;font-weight:bold;}

/* Section 区块 */
.doc-section{background:#fff;border:1px solid #e6e6e6;border-radius:4px;margin-bottom:20px;}
.doc-section-head{padding:12px 16px;border-bottom:1px solid #e6e6e6;font-size:16px;color:#333;font-weight:bold;background:#fafafa;}
.doc-section-body{padding:16px;}

/* 参数表格 */
.doc-table{width:100%;border-collapse:collapse;}
.doc-table th,.doc-table td{padding:10px 12px;border:1px solid #e6e6e6;font-size:13px;text-align:left;}
.doc-table th{background:#f8f8f8;color:#666;font-weight:bold;}
.param-toggle{display:inline-block;width:18px;height:18px;line-height:18px;text-align:center;cursor:pointer;background:#1E9FFF;color:#fff;border-radius:3px;font-size:14px;margin-left:6px;user-select:none;vertical-align:middle;}
.param-toggle:hover{background:#0d8de6;}
.param-child td:first-child{padding-left:36px;}

/* 代码块 */
.doc-code{background:#1e1e2e;color:#cdd6f4;border:none;border-radius:6px;padding:16px;font-family:'Consolas','Monaco','Courier New',monospace;font-size:13px;line-height:1.6;overflow-x:auto;white-space:pre;tab-size:2;position:relative;}
.doc-code .copy-btn{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.12);color:#cdd6f4;border:none;border-radius:4px;padding:4px 10px;font-size:12px;cursor:pointer;transition:all .2s;}
.doc-code .copy-btn:hover{background:rgba(255,255,255,.25);}

/* 语法高亮 — Catppuccin Mocha 风格 */
.json-key{color:#89b4fa;}
.json-string{color:#a6e3a1;}
.json-number{color:#fab387;}
.json-boolean{color:#cba6f7;}
.json-null{color:#f38ba8;}
.json-brace{color:#89dceb;}
.json-comment{color:#6c7086;font-style:italic;}
.php-keyword{color:#cba6f7;}
.php-var{color:#89b4fa;}

/* 自定义选项卡（替代 layui-tab） */
.cms-tabs{margin-bottom:24px;}
.cms-tab-titles{display:flex;border-bottom:2px solid #e6e6e6;background:#fff;padding:0 16px;list-style:none;margin:0;}
.cms-tab-titles li{padding:14px 24px;font-size:15px;color:#666;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s;position:relative;}
.cms-tab-titles li:hover{color:#1E9FFF;}
.cms-tab-titles li.active{color:#1E9FFF;border-bottom-color:#1E9FFF;font-weight:600;}
.cms-tab-titles li a{color:inherit;text-decoration:none;}
.cms-tab-contents{}
.cms-tab-content{display:none;padding:24px 0 0;}
.cms-tab-content.active{display:block;}

/* 在线测试表单 */
.doc-test-form{margin-bottom:20px;}
.doc-test-item{margin-bottom:14px;}
.doc-test-label{display:block;margin-bottom:4px;font-size:13px;color:#333;}
.doc-test-label code{background:#f5f5f5;padding:1px 6px;border-radius:3px;font-size:12px;color:#333;}
.doc-test-input{width:100%;height:36px;border:1px solid #d9d9d9;border-radius:4px;padding:0 12px;font-size:13px;color:#333;outline:none;box-sizing:border-box;transition:border-color .2s;}
.doc-test-input:focus{border-color:#1E9FFF;box-shadow:0 0 0 2px rgba(30,159,255,.12);}
.doc-test-btn{display:inline-block;height:36px;padding:0 24px;background:#1E9FFF;color:#fff;border:none;border-radius:4px;font-size:14px;cursor:pointer;transition:background .2s;}
.doc-test-btn:hover{background:#0d8de6;}

/* 测试结果区 */
.doc-test-result{margin-top:15px;}
.doc-test-result pre{background:#1e1e2e;color:#cdd6f4;border:none;border-radius:6px;padding:16px;max-height:460px;overflow:auto;font-size:12px;font-family:'Consolas','Monaco','Courier New',monospace;line-height:1.6;white-space:pre;tab-size:2;}

/* 关联接口 */
.group-products{display:flex;flex-wrap:wrap;gap:12px;}
.group-card{display:block;flex:1;min-width:220px;max-width:400px;padding:14px 18px;border:1px solid #e6e6e6;border-radius:6px;text-decoration:none;color:#333;transition:all 0.2s;}
.group-card:hover{border-color:#1E9FFF;box-shadow:0 2px 8px rgba(30,159,255,0.12);}
.group-card-head{display:flex;align-items:center;gap:10px;}
.group-card-icon{width:36px;height:36px;border-radius:6px;background:#f0f7ff;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.group-card-icon .fa{color:#1E9FFF;font-size:16px;}
.group-card-name{font-weight:bold;font-size:14px;color:#333;}
.group-card-mark{font-size:12px;color:#999;margin-top:2px;}
.group-card-desc{font-size:12px;color:#888;margin-top:8px;line-height:1.5;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}

/* ===== 响应式 ===== */
@media (max-width: 768px) {
    .doc-wrap{margin:15px auto;padding:0 10px;}
    .doc-header{flex-wrap:wrap;}
    .doc-name{font-size:18px;}
    .api-info-bar{flex-direction:column;gap:10px;}
    .cms-tab-titles{padding:0 8px;overflow-x:auto;}
    .cms-tab-titles li{padding:12px 16px;font-size:14px;white-space:nowrap;}
    .doc-table{font-size:12px;}
    .doc-table th,.doc-table td{padding:8px 6px;}
    .group-card{min-width:100%;max-width:100%;}
}