.chart-section {
    width: 100%;
    margin-bottom: 30px;
}

.indicators-page {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.indicators-left {
    flex: 0 0 300px; 
    min-width: 300px;
    max-width: 300px; 
    overflow: hidden; 
}

.indicators-center {
    flex: 1;
}

@media(max-width:1024px){
    .indicators-page {
        flex-direction: column;
    }

    .indicators-left {
        flex: 1 1 auto;
        min-width: 0; 
        max-width: none; 
        width: 100%;
    }

    .indicators-center {
        flex: 1 1 auto;
        width: 100%;
    }
}

.indicators-left .widget-wrapper {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.indicators-left .widget-wrapper.column {
    flex-direction: column;
    gap: 0;
}

.indicators-left .widget-wrapper.column > * + * {
    margin-top: 20px; 
}

.indicators-left .widget-wrapper.column {
    flex-direction: column;
}

.indicators-left .widget-wrapper.column > * {
    width: 100%;
    flex: 1 1 100%;
}

.status-pill {
    display: inline-block;
    padding: 3px 8px;
    border: 1px solid;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.hl-cell { cursor: pointer; transition: all 0.2s; position: relative; min-width: 85px; font-family: 'Roboto Mono', monospace; font-size: 0.9rem; }
.hl-cell:hover { filter: brightness(1.3); background: rgba(255,255,255,0.05); }

.hl-near-high { background: rgba(220, 38, 38, 0.15) !important; color: var(--color-down) !important; font-weight: bold; border-left: 2px solid #dc2626; }
.hl-near-low { background: rgba(16, 185, 129, 0.15) !important; color: var(--color-up) !important; font-weight: bold; border-left: 2px solid #10b981; }

.mode-previous { display: none; }