/**
 * 数据服务中心公共布局样式（v2.2.0）
 * 覆盖页面：/data-intro/ /data-service/ /data-docs/ /data-account/
 * 形态：左侧固定导航卡 + 右侧内容区（对齐会员中心 userside/usercontent）
 */

.qxds-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    max-width: 1240px;
    margin: 0 auto;
    padding: 28px 20px 72px;
    box-sizing: border-box;
}
.qxds-layout *, .qxds-layout *::before, .qxds-layout *::after { box-sizing: border-box; }

/* ============ 全局清除 DUX 主题 .article-content 对 ul/ol 强加的 50px 左外边距污染 ============ */
.article-content .qxds-layout ul,
.article-content .qxds-layout ol,
.qxds-layout ul,
.qxds-layout ol {
    margin-left: 0 !important;
}
.article-content .qxds-layout li,
.qxds-layout li {
    margin-left: 0 !important;
}

/* ============ 左侧导航 ============ */
.qxds-side {
    width: 228px;
    flex-shrink: 0;
    position: sticky;
    top: 84px;
}
.qxds-side-card {
    background: #fff;
    border: 1px solid #E6EBF2;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(12, 20, 36, .05);
}
.qxds-side-brand {
    display: block;
    padding: 20px 20px 16px;
    line-height: 1.4;
    background: linear-gradient(160deg, #F2FBF6 0%, #FFFFFF 75%);
    position: relative;
    text-decoration: none;
    transition: background .15s ease;
}
a.qxds-side-brand:hover { background: linear-gradient(160deg, #E8F8EF 0%, #FFFFFF 80%); text-decoration: none; }
.qxds-side-brand::after {
    content: '';
    position: absolute;
    left: 20px; right: 20px; bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, #07C160, transparent 80%);
    border-radius: 2px;
}
.qxds-side-brand strong {
    display: block;
    font-size: 18px;
    font-weight: 800;
    color: #1A2333;
    letter-spacing: 1px;
}
.qxds-side-brand span {
    display: inline-block;
    margin-top: 4px;
    font-size: 11.5px;
    color: #7C8AA0;
    letter-spacing: 2px;
}

.qxds-side-nav { padding: 8px 0; }
.qxds-side-nav a {
    display: block;
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #47556B;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background .15s ease, color .15s ease;
}
.qxds-side-nav a small {
    display: block;
    font-size: 11.5px;
    font-weight: 400;
    color: #7C8AA0;
    margin-top: 2px;
}
.qxds-side-nav a:hover {
    color: #059048;
    background: #F7F9FC;
}
.qxds-side-nav a.is-active {
    color: #059048;
    background: rgba(7, 193, 96, .08);
    border-left-color: #07C160;
}

/* 侧栏底部转化卡 */
.qxds-side-cta {
    margin: 12px 14px 10px;
    padding: 16px 16px 18px;
    background: linear-gradient(160deg, #F0FBF5 0%, #E2F6EB 100%);
    border: 1px solid rgba(7, 193, 96, .18);
    border-radius: 12px;
    text-align: center;
}
.qxds-side-cta-title {
    margin: 0;
    font-size: 12px;
    color: #5B6B82;
}
.qxds-side-cta-bonus {
    margin: 4px 0 12px;
    font-size: 30px;
    font-weight: 800;
    color: #059048;
    font-variant-numeric: tabular-nums;
}
.qxds-side-cta-bonus small {
    font-size: 12px;
    font-weight: 600;
    color: #07C160;
}
.qxds-side-cta-btn {
    display: block;
    padding: 9px 0;
    border-radius: 9px;
    background: #07C160;
    color: #fff !important;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    transition: background .18s ease;
}
.qxds-side-cta-btn:hover { background: #059048; }

/* 侧栏特别声明提示条 */
.qxds-side-notice {
    margin: 0 14px 14px;
    padding: 10px 12px;
    background: #FFFBEB;
    border: 1px solid #FCD34D;
    border-left: 3px solid #D97706;
    border-radius: 8px;
    font-size: 11.5px;
    line-height: 1.55;
    color: #78350F;
}
.qxds-side-notice-hd {
    font-weight: 700;
    color: #92400E;
    margin-bottom: 3px;
    font-size: 11.5px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.qxds-side-notice-bd {
    margin: 0;
    color: #92400E;
    font-size: 11px;
    line-height: 1.5;
}

.qxds-side-links {
    display: flex;
    justify-content: space-between;
    padding: 12px 6px 0;
    font-size: 12.5px;
}
.qxds-side-links a { color: #7C8AA0; text-decoration: none; }
.qxds-side-links a:hover { color: #059048; }

/* ============ 右侧内容 ============ */
.qxds-main { flex: 1; min-width: 0; }
/* 各页根元素自带间距，嵌入布局后去掉顶部留白 */
.qxds-main > .qxci-root,
.qxds-main > .abv2c-root,
.qxds-main > .qxcd-root { margin-top: 0; }

/* ============ 顶部醒目服务边界提示横幅（覆盖4个页面） ============ */
.qxds-notice-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    margin-bottom: 22px;
    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
    border: 1px solid #FCD34D;
    border-left: 5px solid #D97706;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(217, 119, 6, .08);
}
.qxds-notice-icon {
    flex-shrink: 0;
    color: #D97706;
    margin-top: 1px;
}
.qxds-notice-content {
    flex: 1;
    min-width: 0;
}
.qxds-notice-title {
    font-size: 15px;
    font-weight: 800;
    color: #92400E;
    margin-bottom: 6px;
    letter-spacing: .2px;
}
.qxds-notice-text {
    font-size: 13.5px;
    line-height: 1.68;
    color: #78350F;
    margin: 0;
}
.qxds-notice-text strong {
    color: #92400E;
    font-weight: 700;
}
.qxds-notice-highlight {
    display: inline;
    color: #B45309;
    font-weight: 600;
}

/* ============ 响应式 ============ */
@media (max-width: 860px) {
    .qxds-notice-banner {
        padding: 13px 15px;
        gap: 10px;
        margin-bottom: 16px;
    }
    .qxds-notice-title {
        font-size: 13.5px;
    }
    .qxds-notice-text {
        font-size: 12.5px;
        line-height: 1.6;
    }
    .qxds-layout { flex-direction: column; padding: 12px 12px 44px; gap: 14px; }
    .qxds-side { width: 100%; position: static; }
    .qxds-side-brand, .qxds-side-cta, .qxds-side-links { display: none; }
    .qxds-side-nav {
        display: flex;
        overflow-x: auto;
        padding: 4px;
        -webkit-overflow-scrolling: touch;
    }
    .qxds-side-nav a {
        flex-shrink: 0;
        border-left: none;
        border-bottom: 3px solid transparent;
        border-radius: 10px;
        padding: 9px 16px;
        white-space: nowrap;
    }
    .qxds-side-nav a small { display: none; }
    .qxds-side-nav a.is-active { border-bottom-color: #07C160; }
}