/* ================================================================
   API 设计原则页专属（api-design.html），公共接口页复用 ad- 接口卡片
   源：pages.css（原第 2914-3329 行区间内容，按需拆分）
   ================================================================ */

.ad-card + .ad-card {
    margin-top: var(--space-24);
}
.ad-card:hover {
    border-color: rgba(93, 151, 67, 0.28);
    box-shadow: 0 10px 26px rgba(93, 151, 67, 0.10);
}
.ad-card-intro {
    background:
        linear-gradient(140deg, rgba(93, 151, 67, 0.10), rgba(255, 255, 255, 0.88) 55%);
    border-color: rgba(93, 151, 67, 0.28);
}
.ad-card-header {
    display: flex;
    align-items: baseline; gap: var(--space-12);
    margin-bottom: var(--space-10);
}
.ad-card-num {
    font-family: var(--font-mono);
    font-size: var(--fs-30);
    font-weight: 800;
    line-height: 1;
    color: rgba(93, 151, 67, 0.32);
}
.ad-card-title {
    font-size: var(--fs-18);
    font-weight: 700;
    color: var(--text-primary);
}
.ad-card-desc {
    margin-bottom: var(--space-16);
    font-size: var(--fs-13);
    line-height: var(--lh-loose);
    color: var(--text-secondary);
}
.ad-subtitle {
    margin: 20px 0 10px;
    font-size: var(--fs-14);
    font-weight: 700;
    color: var(--primary-dark);
}
.ad-code, .ad-code-sm {
    padding: var(--space-16);
    border-radius: var(--radius-8);
    border: 1px solid rgba(93, 151, 67, 0.14);
    background: #f8fbf4;
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    line-height: var(--lh-loose);
    color: #41533a;
    white-space: pre-wrap;
    word-break: break-all;
}
.ad-code-sm {
    padding: var(--space-10) var(--space-12);
    font-size: var(--fs-12);
}
.ad-code-comment {
    color: #8aa07c;
    font-style: italic;
}
.ad-code-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-16);
}
.ad-code-block {
    border-radius: var(--radius-8);
    border: 1px solid rgba(93, 151, 67, 0.14);
    background: #f8fbf4;
    overflow: hidden;
}
.ad-code-tag {
    display: inline-block;
    padding: var(--space-4) var(--space-12);
    font-size: var(--fs-12);
    font-weight: 700;
    color: #fff;
}
.ad-code-2xx { background: var(--primary-color); }
.ad-code-3xx { background: #2563eb; }
.ad-code-4xx { background: #ea580c; }
.ad-code-5xx { background: #dc2626; }
.ad-code-block pre {
    padding: var(--space-12) var(--space-16);
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    line-height: var(--lh-base);
    color: #41533a;
    overflow-x: auto;
}
.ad-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-8);
    border: 1px solid rgba(93, 151, 67, 0.13);
    background: rgba(255, 255, 255, 0.75);
}
.ad-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-13);
}
.ad-table th {
    padding: var(--space-10) var(--space-16);
    background: var(--primary-lighter);
    border-bottom: 2px solid rgba(93, 151, 67, 0.20);
    font-size: var(--fs-12);
    font-weight: 700;
    color: var(--primary-dark);
    text-align: left;
    white-space: nowrap;
}
.ad-table td {
    padding: var(--space-10) var(--space-16);
    border-bottom: 1px solid var(--border-light);
    color: var(--text-secondary);
    line-height: var(--lh-base);
    vertical-align: top;
}
.ad-table tbody tr:hover {
    background: rgba(93, 151, 67, 0.055);
}
.ad-table tbody tr:last-child td {
    border-bottom: none;
}
.ad-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
}
.ad-two-col-item {
    padding: var(--space-16) var(--space-20);
    border-radius: var(--radius-8);
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.75);
}
.ad-two-col-item h4 {
    margin-bottom: var(--space-10);
    font-size: var(--fs-14);
    font-weight: 700;
    color: var(--text-primary);
}
/* HTTP 方法卡 */
.ad-method-grid {
    display: grid;
    gap: var(--space-12);
}
.ad-method-item {
    display: flex;
    gap: var(--space-16);
    align-items: flex-start;
    padding: var(--space-16);
    border-radius: var(--radius-8);
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.78);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.ad-method-item:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
}
.ad-method-badge {
    flex: none;
    min-width: 74px;
    padding: var(--space-4) var(--space-10);
    border-radius: var(--radius-6);
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    font-weight: 800;
    text-align: center;
    color: #fff;
}
.ad-method-get    .ad-method-badge { background: var(--primary-color); }
.ad-method-post   .ad-method-badge { background: #2563eb; }
.ad-method-put    .ad-method-badge { background: #ca8a04; }
.ad-method-patch  .ad-method-badge { background: #7c3aed; }
.ad-method-delete .ad-method-badge { background: #dc2626; }
.ad-method-body strong {
    display: block; margin-bottom: var(--space-2);
    font-size: var(--fs-13);
    color: var(--text-primary);
}
.ad-method-body p {
    margin-bottom: var(--space-6);
    font-size: var(--fs-12);
    line-height: var(--lh-base);
    color: var(--text-secondary);
}
.ad-method-code {
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    color: var(--primary-dark);
}
/* 认证卡 */
.ad-auth-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-16);
}
.ad-auth-card {
    padding: var(--space-20);
    border-radius: var(--radius-8);
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.80);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.ad-auth-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.ad-auth-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-12);
    border-radius: var(--radius-12);
    background: rgba(93, 151, 67, 0.10);
    border: 1px solid rgba(93, 151, 67, 0.16);
    color: var(--auth-color, var(--primary-color));
}
.ad-auth-card h3 {
    margin-bottom: var(--space-8);
    font-size: var(--fs-15);
    font-weight: 700;
    color: var(--text-primary);
}
.ad-auth-card > p {
    margin-bottom: var(--space-12);
    font-size: var(--fs-12);
    line-height: var(--lh-base);
    color: var(--text-secondary);
}
.ad-list {
    margin-top: var(--space-10);
}
.ad-list li {
    position: relative;
    padding: 4px 0 4px 18px;
    font-size: var(--fs-12);
    line-height: var(--lh-base);
    color: var(--text-secondary);
}
.ad-list li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--primary-color);
}
.ad-list-sm li {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}
/* REST 成熟度 */
.ad-maturity-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-16);
}
.ad-maturity-item {
    padding: var(--space-16);
    border-radius: var(--radius-8);
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.78);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.ad-maturity-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.ad-maturity-level {
    display: inline-block;
    margin-bottom: var(--space-8);
    padding: var(--space-2) var(--space-10);
    border-radius: var(--radius-pill);
    background: rgba(93, 151, 67, 0.12);
    color: var(--primary-dark);
    font-size: var(--fs-11);
    font-weight: 700;
    letter-spacing: 0.06em;
}
.ad-maturity-item h3 {
    margin-bottom: var(--space-6);
    font-size: var(--fs-14);
    font-weight: 700;
    color: var(--text-primary);
}
.ad-maturity-item p {
    margin-bottom: var(--space-8);
    font-size: var(--fs-12);
    line-height: var(--lh-base);
    color: var(--text-secondary);
}
/* 工具格 */
.ad-tools-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-12);
}
.ad-tool-item {
    padding: var(--space-12) var(--space-16);
    border-radius: var(--radius-8);
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.78);
    font-size: var(--fs-13);
    font-weight: 600;
    color: var(--text-secondary);
    transition: transform var(--transition-fast), color var(--transition-fast);
}
.ad-tool-item:hover {
    transform: translateY(-2px);
    color: var(--primary-dark);
}
/* enrich */
.ad-enrich, .ad-contract {
    padding-top: var(--space-32);
    border-top: 1px dashed rgba(93, 151, 67, 0.25);
}
.ad-spec-grid, .ad-check-grid, .ad-contract-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-16);
}
.ad-spec-grid article, .ad-check-grid > div, .ad-contract-grid article {
    padding: var(--space-20);
    border-radius: var(--radius-8);
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.78);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.ad-spec-grid article:hover, .ad-check-grid > div:hover, .ad-contract-grid article:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.ad-spec-grid h3, .ad-check-grid h3, .ad-contract-grid h3 {
    margin-bottom: var(--space-8);
    font-size: var(--fs-14);
    font-weight: 700;
    color: var(--text-primary);
}
.ad-spec-grid p, .ad-check-grid p, .ad-contract-grid p {
    font-size: var(--fs-12);
    line-height: var(--lh-base);
    color: var(--text-secondary);
}
@media (max-width: 991px) {
    .ad-code-group, .ad-two-col, .ad-auth-grid, .ad-maturity-grid,
    .ad-tools-grid, .ad-spec-grid, .ad-check-grid, .ad-contract-grid {
        grid-template-columns: 1fr;
    }
}
/* ================================================================
   CSS 常用技巧（ct-）— 规则已拆分到 pages-css-tricks.css
   ================================================================ */