/* ===== 27 · 调薪链与带宽尺：折线 + 温度计 · 墨绿 ===== */
.rb-page {
    --cg-accent: #26624d;
    --cg-accent-2: #174433;
    --cg-accent-soft: #e4f0e8;
    --cg-accent-ink: #ffffff;
    background: linear-gradient(180deg, rgba(38, 98, 77, .06), transparent 320px), var(--cg-bg);
}
:root[data-theme="dark"] .rb-page {
    --cg-accent: #7bd0a4;
    --cg-accent-2: #a2e5c1;
    --cg-accent-soft: rgba(123, 208, 164, .14);
    --cg-accent-ink: #082a1b;
    background: linear-gradient(180deg, rgba(123, 208, 164, .06), transparent 320px), var(--cg-bg);
}

.rb-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 460px); gap: 40px; align-items: start; padding: 24px 0 26px; }
.rb-lead .cg-h1 em { color: var(--cg-accent); }
.rb-band-demo { margin-top: 28px; max-width: 500px; padding: 16px 18px; border: 1px solid var(--cg-line); border-radius: 14px; background: var(--cg-surface); box-shadow: var(--cg-shadow); }
.rb-band-demo-h { font-size: 11px; letter-spacing: .08em; color: var(--cg-faint); font-weight: 700; margin-bottom: 14px; text-transform: uppercase; }
.rb-band-track { position: relative; height: 14px; border-radius: 999px; background: linear-gradient(90deg, var(--cg-accent-soft), var(--cg-accent)); border: 1px solid var(--cg-line); }
.rb-band-track .rb-band-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 58%; border-radius: 999px; background: color-mix(in srgb, var(--cg-accent) 30%, transparent); }
.rb-band-track .rb-band-pin { position: absolute; left: 58%; top: -6px; width: 5px; height: 26px; border-radius: 3px; background: var(--cg-bad); transform: translateX(-50%); }
.rb-band-scale { display: flex; justify-content: space-between; margin-top: 8px; font-size: 10.5px; color: var(--cg-faint); font-family: var(--cg-num); }
.rb-lead .cg-value-row { margin-top: 26px; }
.rb-console .cg-console-h { background: var(--cg-accent-2); }
.rb-input { min-height: 128px; }
.rb-kpis .cg-kpi-value { color: var(--cg-accent); }
.rb-kpis .cg-kpi--warn .cg-kpi-value { color: var(--cg-warn); }
.rb-kpis .cg-kpi--ok .cg-kpi-value { color: var(--cg-ok); }

.rb-chart-card { margin-top: 26px; }
.rb-chart { width: 100%; min-height: 260px; }
.rb-chart svg { display: block; width: 100%; height: auto; }
.rb-chart .rb-grid { stroke: var(--cg-line); stroke-width: 1; }
.rb-chart .rb-axis-text { fill: var(--cg-faint); font-size: 11px; font-family: var(--cg-num); }
.rb-chart .rb-band-area { fill: var(--cg-accent-soft); stroke: var(--cg-line); stroke-width: 1; }
.rb-chart .rb-line { fill: none; stroke: var(--cg-accent); stroke-width: 2.5; stroke-linejoin: round; }
.rb-chart .rb-dot { fill: var(--cg-surface); stroke: var(--cg-accent); stroke-width: 2.5; }
.rb-chart .rb-dot.is-stall { stroke: var(--cg-warn); }
.rb-chart .rb-dot.is-out { stroke: var(--cg-bad); fill: var(--cg-bad-soft); }
.rb-chart .rb-node { fill: var(--cg-info); }
.rb-legend { padding: 8px 2px 0; }

.rb-lower { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, 1fr); gap: 16px; margin-top: 18px; align-items: start; }
.rb-table { min-width: 680px; }
.rb-table td.cg-t-num { color: var(--cg-ink); }
.rb-up { color: var(--cg-ok); font-weight: 700; }
.rb-down { color: var(--cg-bad); font-weight: 700; }
.rb-positions { display: grid; gap: 11px; max-height: 340px; overflow: auto; }
.rb-pos-row { font-size: 12px; }
.rb-pos-top { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 5px; color: var(--cg-ink-2); }
.rb-pos-top b { color: var(--cg-ink); font-family: var(--cg-num); }
.rb-pos-track { position: relative; height: 12px; border-radius: 999px; background: var(--cg-surface-3); border: 1px solid var(--cg-line); overflow: visible; }
.rb-pos-track i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 999px; background: color-mix(in srgb, var(--cg-accent) 55%, transparent); }
.rb-pos-track b { position: absolute; top: -4px; width: 4px; height: 20px; border-radius: 2px; background: var(--cg-accent); transform: translateX(-50%); }
.rb-pos-track.is-out b { background: var(--cg-bad); }
.rb-pos-foot { font-size: 10.8px; color: var(--cg-faint); margin-top: 4px; font-family: var(--cg-num); }

@media print {
    .rb-band-demo, .rb-console, .rb-legend { display: none !important; }
    .rb-lower { display: block; }
    .rb-lower > .cg-card + .cg-card { margin-top: 14px; }
    .rb-table { min-width: 0; }
}
@media (max-width: 1080px) { .rb-hero, .rb-lower { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
    .rb-hero { gap: 22px; padding-top: 14px; }
    .rb-band-demo { display: none; }
    .rb-chart { min-height: 200px; }
}