/**
 * CN/biz/roi.html · 可读性优化
 * 补全 cost/benefit/result 样式 · 章节导航 · 浅绿 Hero
 * v=20260614
 */
body.roi-page {
    font-size: 15px;
    line-height: 1.65;
}

/* 章节导航（sticky：顶栏 + biz-tab） */
.roi-toc-bar {
    position: sticky;
    top: calc(var(--nav-h, 55px) + var(--tab-h, 44px));
    z-index: 35;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border, #e5e7eb);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    margin: 0 -1rem;
    padding: 0 1rem;
}

@media (min-width: 768px) {
    .roi-toc-bar {
        margin: 0;
        padding: 0;
    }
}

.roi-toc-inner {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.roi-toc-inner::-webkit-scrollbar {
    display: none;
}

.roi-toc-label {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
}

.roi-toc-label i {
    color: #10B981;
    margin-right: 4px;
}

.roi-toc-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s;
}

.roi-toc-chip:hover,
.roi-toc-chip.is-active {
    color: #047857;
    border-color: rgba(16, 185, 129, 0.35);
    background: #ecfdf5;
}

.roi-toc-chip .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    background: #d1fae5;
    color: #047857;
}

/* Hero：浅绿底，减轻大块渐变 */
body.roi-page .roi-hero {
    background: linear-gradient(165deg, #f0fdf4 0%, #ecfdf5 55%, #f8fafc 100%) !important;
    border: 1px solid rgba(16, 185, 129, 0.15) !important;
    box-shadow: none !important;
    text-align: left !important;
    padding: 1.25rem 1.5rem !important;
}

body.roi-page .roi-hero h1,
body.roi-page .roi-hero p {
    color: #1D2129 !important;
    text-align: left !important;
    margin-left: 0 !important;
}

body.roi-page .roi-hero p {
    color: #64748b !important;
    font-size: 0.9375rem !important;
    max-width: 640px;
}

body.roi-page .commercial-badge {
    background: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

body.roi-page .hero-tags {
    justify-content: flex-start !important;
}

body.roi-page .hero-tag {
    background: #fff !important;
    color: #047857 !important;
    border: 1px solid rgba(16, 185, 129, 0.2) !important;
    font-size: 0.8125rem !important;
}

body.roi-page .hero-tag i {
    color: #10B981 !important;
}

/* 老板速算器：略减饱和度 */
body.roi-page .boss-dashboard {
    background: #fff !important;
    border: 1px solid rgba(16, 185, 129, 0.2) !important;
    padding: 1.5rem !important;
}

body.roi-page .boss-dashboard::before {
    display: none;
}

body.roi-page .boss-title {
    font-size: 1.25rem !important;
    color: #1D2129 !important;
}

body.roi-page .boss-sub {
    color: #64748b !important;
}

/* 公式说明卡 */
.roi-formula-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-left: 3px solid #10B981;
    border-radius: 12px;
    padding: 1.25rem 1.375rem;
    margin-bottom: 1.5rem;
}

.roi-formula-card h2 {
    font-size: 1.0625rem !important;
    font-weight: 700;
    color: #1D2129;
    margin: 0 0 0.875rem;
    display: flex;
    align-items: center;
    gap: 8px;
    border: none !important;
    padding: 0 !important;
}

.roi-formula-card h2 i {
    color: #10B981;
}

.roi-formula-list {
    margin: 0;
    padding: 0;
    list-style: none;
    color: #334155;
    font-size: 0.9375rem;
    line-height: 1.75;
}

.roi-formula-list li {
    padding: 0.5rem 0;
    border-bottom: 1px dashed #e5e7eb;
    margin-bottom: 0;
}

.roi-formula-list li:last-child {
    border-bottom: none;
}

.roi-formula-list b {
    color: #047857;
}

.roi-formula-list .muted {
    display: block;
    color: #64748b;
    font-size: 0.8125rem;
    margin-top: 0.25rem;
}

.roi-formula-note {
    margin-top: 0.875rem;
    padding: 0.625rem 0.875rem;
    background: rgba(16, 185, 129, 0.08);
    border-radius: 8px;
    font-size: 0.8125rem;
    color: #065f46;
    line-height: 1.6;
}

/* 成本 / 收益块（原 CN 页缺失） */
body.roi-page .cost-item {
    background: #fafbfc;
    border: 1px solid #e8eaed;
    border-left: 4px solid #059669;
    padding: 1.125rem 1.25rem;
    border-radius: 12px;
    margin-bottom: 14px;
}

body.roi-page .cost-item h3 {
    color: #047857;
    font-size: 1rem !important;
    font-weight: 700;
    margin-bottom: 8px;
}

body.roi-page .cost-item p,
body.roi-page .cost-item li {
    color: #475569;
    font-size: 0.875rem;
    line-height: 1.65;
}

body.roi-page .benefit-item {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #10B981;
    padding: 1.125rem 1.25rem;
    border-radius: 12px;
    margin-bottom: 14px;
}

body.roi-page .benefit-item h3 {
    color: #047857;
    font-size: 1rem !important;
}

body.roi-page .benefit-item p,
body.roi-page .benefit-item li {
    font-size: 0.875rem;
    line-height: 1.65;
    color: #475569;
}

/* 结果区：绿底白字 */
body.roi-page .result-box {
    background: linear-gradient(135deg, #10B981, #059669);
    border-radius: 16px;
    padding: 1.75rem 1.5rem;
    margin-top: 1rem;
    color: #fff;
}

body.roi-page .result-box p,
body.roi-page .result-box li,
body.roi-page .result-box strong,
body.roi-page .result-box .text-gray-900,
body.roi-page .result-box .text-emerald-700,
body.roi-page .result-box .text-gray-900\/70,
body.roi-page .result-box .text-gray-900\/80 {
    color: rgba(255, 255, 255, 0.95) !important;
}

body.roi-page .result-box .text-6xl {
    color: #fff !important;
    font-size: clamp(2rem, 6vw, 3.5rem) !important;
}

/* 算数优势区 */
body.roi-page .advantage-section {
    background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 16px;
    padding: 1.75rem 1.5rem;
    margin-top: 2rem;
    box-shadow: none;
}

body.roi-page .advantage-section::before {
    display: none;
}

body.roi-page .advantage-section h2 {
    color: #065f46 !important;
    font-size: 1.25rem !important;
    text-align: left !important;
}

body.roi-page .advantage-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    backdrop-filter: none;
    color: #334155;
}

body.roi-page .advantage-card p {
    color: #047857;
    font-weight: 700;
}

body.roi-page .advantage-card li {
    color: #475569;
    font-size: 0.875rem;
}

/* 在线计算器入口：统一绿色 */
body.roi-page .roi-calc-banner {
    background: linear-gradient(145deg, #ecfdf5, #f0fdf4) !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
    text-align: center;
}

body.roi-page .roi-calc-banner h2 {
    color: #065f46 !important;
    border-bottom-color: rgba(16, 185, 129, 0.2) !important;
}

body.roi-page .roi-calc-banner p {
    color: #64748b !important;
    font-size: 0.9375rem !important;
}

body.roi-page .roi-calc-banner .cta-button {
    background: linear-gradient(135deg, #10B981, #059669) !important;
    color: #fff !important;
}

/* 指标卡 */
body.roi-page .metric-card {
    padding: 1rem;
}

body.roi-page .metric-value {
    font-size: clamp(1.25rem, 4vw, 1.75rem);
}

body.roi-page .metric-card p {
    font-size: 0.8125rem;
    margin: 0;
}

/* 案例卡 */
body.roi-page .case-card {
    background: #fafbfc;
    border: 1px solid #e8eaed;
    border-left: 4px solid #10B981;
    border-radius: 12px;
    padding: 1.125rem 1.25rem;
    margin-bottom: 1rem;
}

body.roi-page .case-card h3 {
    font-size: 1rem !important;
    color: #1D2129;
}

body.roi-page .case-card ul {
    font-size: 0.875rem;
    line-height: 1.65;
}

/* 相关推荐：修复白底 invisible */
body.roi-page .roi-related-grid a {
    display: block;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.25rem;
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

body.roi-page .roi-related-grid a:hover {
    border-color: rgba(16, 185, 129, 0.35);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.08);
}

body.roi-page .roi-related-grid h3 {
    font-size: 1rem !important;
    color: #1D2129 !important;
}

/* 锚点偏移 */
#bossEstimator,
#roi-formula,
#detail-cost,
#roi-benefit,
#roi-result,
#roi-cases,
#roi-calc-banner {
    scroll-margin-top: calc(var(--nav-h, 55px) + var(--tab-h, 44px) + 52px);
}

body.roi-page .boss-detail-link {
    font-size: 0.875rem;
    line-height: 1.6;
}

body.roi-page .section-card {
    padding: 1.25rem 1.375rem;
    margin-bottom: 1.25rem;
}

body.roi-page .section-card h2 {
    font-size: 1.125rem !important;
    margin-bottom: 1rem;
}

@media (max-width: 640px) {
    body.roi-page .boss-options {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    body.roi-page .boss-kpi-value {
        font-size: 1.5rem !important;
    }
}