/*
 * 青柠内容页侧栏样式（scoped）
 * ------------------------------------------------------------------
 * 全部限定在 .qq-side 作用域内，不含任何全局 reset / body 覆盖，
 * 因此可与现有 softsell 页头/页脚共存，不影响其它页面。
 * 供 single.php（文章）与 single-docs.php（文档）加载。
 */

/* 文章页两栏：正文加宽 + 右侧栏 300px */
.softsell-single-page .content-wrapper.qq-has-side {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 40px;
    align-items: start;
}
.softsell-single-page .content-wrapper.qq-has-side > .post-article,
.softsell-single-page .content-wrapper.qq-has-side > .post-navigation,
.softsell-single-page .content-wrapper.qq-has-side > .comments-section {
    grid-column: 1;
    min-width: 0;
    max-width: none;
}
.softsell-single-page .content-wrapper.qq-has-side > .qq-side {
    grid-column: 2;
    grid-row: 1 / span 3;
    position: sticky;
    top: 92px;
}

.qq-side {
    display: flex;
    flex-direction: column;
    gap: 18px;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* side-card 容器 */
.qq-side .side-card {
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.qq-side .side-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 800;
    color: #0b1220;
    margin: 0 0 12px;
    letter-spacing: -.01em;
}
.qq-side .side-title.qq-side-title-left { justify-content: flex-start; gap: 6px; }
.qq-side .side-title a {
    font-size: 12px;
    font-weight: 600;
    color: #65a30d;
    text-decoration: none;
}
.qq-side .side-title a:hover { color: #4d7c0f; }

/* 列表项：最近文章 / 最近报告 */
.qq-side .side-list-item {
    display: flex;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid #eef2f6;
    align-items: flex-start;
    text-decoration: none;
}
.qq-side .side-list-item:last-child { border-bottom: none; padding-bottom: 0; }
.qq-side .side-list-item .idx {
    font-family: "JetBrains Mono", "SF Mono", Consolas, monospace;
    font-weight: 700; font-size: 13px; color: #65a30d;
    flex: 0 0 auto; margin-top: 1px;
}
.qq-side .side-list-item .tt {
    display: block;
    font-size: 13.5px; font-weight: 600; color: #0b1220; line-height: 1.45;
    transition: color .2s ease;
}
.qq-side .side-list-item:hover .tt { color: #4d7c0f; }
.qq-side .side-list-item .dt {
    display: block;
    font-size: 11px; color: #8a97ab; margin-top: 3px;
    font-family: "JetBrains Mono", "SF Mono", Consolas, monospace;
}

/* 排名项：策略收益榜（单行：名次 + 名称 + 收益 + 评级） */
.qq-side .side-rank {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 0; border-bottom: 1px solid #eef2f6;
    text-decoration: none; min-height: 0; line-height: 1.3;
}
.qq-side .side-rank:last-child { border-bottom: none; padding-bottom: 0; }
.qq-side .side-rank .no {
    width: 18px; height: 18px; border-radius: 5px;
    background: #f6f8fa; color: #47536b;
    font-family: "JetBrains Mono", "SF Mono", Consolas, monospace;
    font-weight: 700; font-size: 11px;
    display: grid; place-items: center; flex: 0 0 auto;
}
.qq-side .side-rank .no.top { background: linear-gradient(135deg, #a3e635 0%, #22c55e 100%); color: #0a2c05; }
.qq-side .side-rank .nm { flex: 1; font-size: 12.5px; font-weight: 600; color: #0b1220; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qq-side .side-rank .qq-rank-right {
    display: flex; align-items: baseline; gap: 6px;
    text-align: right; flex: 0 0 auto; white-space: nowrap;
}
.qq-side .side-rank .rr { font-family: "JetBrains Mono", "SF Mono", Consolas, monospace; font-weight: 700; font-size: 12.5px; display: inline; }
.qq-side .side-rank .rr.up { color: #f0454b; }
.qq-side .side-rank .rr.down { color: #22b07d; }
.qq-side .side-rank .gg { font-size: 11px; color: #8a97ab; }

/* Agent 入口 CTA 卡（暗色） */
.qq-side .side-cta {
    background: radial-gradient(900px 400px at 100% -20%, rgba(132, 204, 22, .22), transparent 60%), linear-gradient(180deg, #0d1420 0%, #070b12 100%);
    border-color: #182338;
    color: #e8edf5;
    position: relative;
    overflow: hidden;
}
.qq-side .side-cta .in { position: relative; z-index: 1; }
.qq-side .qq-side-pill {
    display: inline-flex; align-items: center;
    font-size: 12px; font-weight: 700; color: #a3e635;
    background: rgba(163, 230, 53, .12);
    border: 1px solid rgba(163, 230, 53, .3);
    padding: 4px 12px; border-radius: 999px;
}
.qq-side .qq-side-cta-title { color: #fff; font-size: 19px; font-weight: 800; margin: 12px 0; line-height: 1.25; }
.qq-side .qq-side-cta-desc { color: #93a2ba; font-size: 14px; margin: 0 0 18px; line-height: 1.6; }
.qq-side .qq-side-btn {
    display: block; text-align: center;
    padding: 11px 16px; border-radius: 10px;
    font-size: 14px; font-weight: 700; text-decoration: none;
    transition: transform .2s ease, opacity .2s ease;
}
.qq-side .qq-side-btn + .qq-side-btn { margin-top: 10px; }
.qq-side .qq-side-btn-primary { background: linear-gradient(135deg, #a3e635 0%, #22c55e 100%); color: #0a2c05; }
.qq-side .qq-side-btn-primary:hover { transform: translateY(-1px); }
.qq-side .qq-side-btn-ghost { background: rgba(255, 255, 255, .06); color: #e8edf5; border: 1px solid rgba(148, 163, 184, .22); }
.qq-side .qq-side-btn-ghost:hover { background: rgba(255, 255, 255, .12); }

/* 二维码 */
.qq-side .side-qr { text-align: center; }
.qq-side .side-qr img {
    width: 170px; height: 170px; object-fit: contain;
    display: block; margin: 14px auto 10px;
    border-radius: 12px; border: 1px solid #e3e8ef;
    background: #fff; padding: 6px;
}
.qq-side .side-qr p { font-size: 12.5px; color: #47536b; margin: 0; line-height: 1.5; }

/* 文档页文末转化 CTA（正文列内，宽卡片） */
.qq-doc-cta {
    margin-top: 40px;
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 30px 32px;
    border-radius: 18px;
    background: radial-gradient(700px 260px at 100% -30%, rgba(132, 204, 22, .20), transparent 60%), linear-gradient(180deg, #0d1420 0%, #070b12 100%);
    border: 1px solid #182338;
    color: #e8edf5;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
.qq-doc-cta-main { flex: 1; min-width: 0; }
.qq-doc-cta-eyebrow {
    display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: #a3e635; margin-bottom: 8px;
}
.qq-doc-cta h3 { color: #fff; font-size: 21px; font-weight: 800; margin: 0 0 8px; line-height: 1.3; }
.qq-doc-cta p { color: #93a2ba; font-size: 14.5px; margin: 0 0 18px; line-height: 1.6; }
.qq-doc-cta-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.qq-doc-btn {
    display: inline-block; padding: 11px 22px; border-radius: 10px;
    font-size: 14px; font-weight: 700; text-decoration: none; transition: transform .2s ease;
}
.qq-doc-btn-primary { background: linear-gradient(135deg, #a3e635 0%, #22c55e 100%); color: #0a2c05; }
.qq-doc-btn-primary:hover { transform: translateY(-1px); }
.qq-doc-btn-ghost { background: rgba(255, 255, 255, .06); color: #e8edf5; border: 1px solid rgba(148, 163, 184, .22); }
.qq-doc-btn-ghost:hover { background: rgba(255, 255, 255, .12); }
.qq-doc-cta-qr { flex: 0 0 auto; text-align: center; }
.qq-doc-cta-qr img {
    width: 120px; height: 120px; object-fit: contain;
    border-radius: 12px; border: 1px solid rgba(148, 163, 184, .22);
    background: #fff; padding: 5px; display: block; margin: 0 auto 6px;
}
.qq-doc-cta-qr span { font-size: 12px; color: #93a2ba; }
@media (max-width: 720px) {
    .qq-doc-cta { flex-direction: column; align-items: flex-start; padding: 24px; }
    .qq-doc-cta-qr { align-self: center; }
}

/* 响应式：窄屏收起为单栏，侧栏移到正文下方 */
@media (max-width: 900px) {
    .softsell-single-page .content-wrapper.qq-has-side {
        grid-template-columns: 1fr;
    }
    .softsell-single-page .content-wrapper.qq-has-side > .qq-side {
        grid-column: 1;
        grid-row: auto;
        position: static;
    }
}