.chart-condition {
    padding: 6px 9px;
    border: 1px solid rgba(70, 210, 229, .2);
    border-radius: 999px;
    background: rgba(70, 210, 229, .08);
    color: #83dfeb;
    font-family: var(--font-mono);
    font-size: .62rem;
    font-weight: 700;
    white-space: nowrap;
}
.chart-condition.watch { border-color: rgba(245,182,77,.3); background: rgba(245,182,77,.1); color: #f5c46c; }
.chart-condition.warning { border-color: rgba(255,98,117,.34); background: rgba(255,98,117,.1); color: #ff8796; }
.chart-tooltip {
    position: absolute;
    z-index: 4;
    min-width: 150px;
    max-width: 230px;
    padding: 9px 11px;
    border: 1px solid rgba(151,202,219,.24);
    border-radius: 9px;
    background: rgba(3,14,23,.94);
    box-shadow: 0 10px 28px rgba(0,0,0,.3);
    color: #dcebee;
    font-family: var(--font-mono);
    font-size: .62rem;
    line-height: 1.55;
    pointer-events: none;
    transform: translate(10px,-100%);
}
.chart-tooltip strong, .chart-tooltip span { display: block; }
.chart-tooltip strong { margin-bottom: 3px; color: #fff; }
.chart-tooltip span { color: #9cb2bf; }
.range-switch {
    display: inline-flex;
    gap: 3px;
    margin-top: 15px;
    padding: 3px;
    border: 1px solid rgba(147,190,207,.14);
    border-radius: 8px;
    background: rgba(3,14,23,.34);
}
.range-switch button {
    min-width: 38px;
    padding: 5px 8px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #718d9e;
    font-family: var(--font-mono);
    font-size: .61rem;
    font-weight: 700;
    cursor: pointer;
}
.range-switch button:hover, .range-switch button:focus-visible { color: #dff5f8; }
.range-switch button.active { background: rgba(70,210,229,.14); color: #8ce7f1; }