.cost-model {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #091728;
}

.cost-model span { color: var(--muted); }
.cost-model strong { color: var(--green); }

.cost-summary {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin: 24px 0;
}

.cost-summary .capacity-card strong { font-size: clamp(23px, 3.5vw, 35px); }
.cost-chart-panel { margin-top: 18px; }
.cost-chart-wrap { position: relative; height: min(58vh, 500px); min-height: 330px; }
.cost-chart-wrap canvas { display: block; width: 100%; height: 100%; }

.cost-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 2px 14px 12px;
}

.cost-legend span {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: #0c1b2d;
}

.cost-legend i { width: 12px; height: 15px; border-radius: 3px; background: var(--green); }
.cost-legend .high-price i { background: #f4c84a; }
.cost-legend .partial i { border: 1px solid var(--green); background: rgba(101, 217, 154, .38); }

.cost-table-panel {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #081421;
}

.cost-table-heading { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 14px; }
.cost-table-heading h2 { margin: 0; }
.cost-table-heading > span { color: var(--muted); font-size: 13px; }
.cost-table-wrap { overflow-x: auto; }
.cost-table-panel table { width: 100%; border-collapse: collapse; }
.cost-table-panel th,
.cost-table-panel td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.cost-table-panel th:first-child,
.cost-table-panel td:first-child { text-align: left; }
.cost-table-panel th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.coverage-low { color: #f4c84a; font-weight: 750; }
.coverage-good { color: var(--green); font-weight: 750; }

@media (max-width: 820px) {
    .cost-summary { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .cost-summary { grid-template-columns: 1fr; }
    .cost-table-heading { align-items: flex-start; flex-direction: column; }
    .cost-chart-wrap { height: 390px; }
}