.dynamics-page {
    max-width: 1080px;
}

.chart-card {
    margin-top: 28px;
}

.marker-apex-chart {
    width: 100%;
    min-height: 280px;
}


.marker-chart {
    width: 100%;
    max-width: 760px;
    height: 260px;
    padding: 24px;
    border-radius: 24px;
    background: #fff;
    overflow: hidden;
}

.marker-chart-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.marker-chart polyline {
    stroke-width: 0.8;
}

.marker-chart circle {
    r: 1;
}


.chart-card {
    margin-top: 24px;
}

.marker-chart {
    width: 100%;
    height: 280px;
    padding: 24px;
    box-sizing: border-box;
    border-radius: 24px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
    overflow: hidden;
}

.marker-chart-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.chart-line {
    stroke: #172033;
    stroke-width: 1.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chart-point {
    r: 1.4;
    fill: #172033;
}

.chart-point-current {
    r: 2.4;
    fill: #172033;
    stroke: #ffffff;
    stroke-width: .9;
}

.chart-zone {
    opacity: .12;
}

.chart-zone-normal {
    fill: #22c55e;
}

.chart-zone-optimal {
    fill: #3b82f6;
}

.chart-zone-borderline {
    fill: #f59e0b;
}

.chart-zone-needs-control {
    fill: #ef4444;
}

.chart-zone-urgent {
    fill: #dc2626;
}

.chart-reference-line {
    stroke: #667085;
    stroke-width: .35;
    stroke-dasharray: 2 2;
    opacity: .65;
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
    margin-top: 16px;
    font-size: 14px;
    color: #667085;
}

.chart-legend > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chart-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    display: inline-block;
}

.chart-legend-normal {
    background: rgba(34, 197, 94, .35);
}

.chart-legend-line {
    width: 24px;
    border-top: 1px dashed #667085;
    display: inline-block;
}


.chart-zone {
    opacity: .08;
}

.chart-zone-normal {
    fill: #22c55e;
}

.chart-zone-optimal {
    fill: #3b82f6;
}

.chart-zone-borderline {
    fill: #f59e0b;
}

.chart-zone-needs-control {
    fill: #ef4444;
}

.chart-zone-urgent {
    fill: #dc2626;
}

.chart-reference-line {
    stroke: rgba(255,255,255,.35);
    stroke-width: .45;
    stroke-dasharray: 2 2;
}

.chart-reference-line-reference_min {
    stroke: rgba(255,255,255,.28);
}

.chart-reference-line-reference_max {
    stroke: rgba(255,255,255,.28);
}

.marker-apex-chart {
    width: 100%;
    min-height: 320px;
}

.chart-tooltip {
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #eef2f7;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(16,24,40,.12);
    font-size: 13px;
    color: #172033;
}

.chart-tooltip strong {
    display: block;
    margin-bottom: 6px;
}


.table-scroll {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.data-table th,
.data-table td {
    padding: 14px 12px;
    border-bottom: 1px solid #eef2f7;
    text-align: left;
    vertical-align: middle;
}

.data-table th {
    color: #667085;
    font-weight: 600;
    font-size: 13px;
}

.data-table td {
    color: #172033;
}

.chart-hint {
    margin-top: 12px;
    font-size: 14px;
}