.data-center { display: grid; gap: 1rem; min-width: 0; }
.data-center__filters { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); display: grid; gap: .7rem; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: .85rem; }
.data-filter { display: grid; gap: .3rem; }
.data-filter span { color: var(--text-secondary); font-size: .75rem; font-weight: 750; }
.data-filter select, .data-filter input { min-height: 42px; width: 100%; }
.data-filter--action { align-content: end; }
.data-filter--action button { min-height: 42px; width: 100%; }
.scope-notice { background: #eef6ff; border: 1px solid #cfe3ff; border-left: 4px solid var(--primary); border-radius: .8rem; color: #17375f; padding: .8rem .9rem; }
.scope-notice p { font-size: .82rem; line-height: 1.5; margin: .25rem 0 0; }
.data-section { display: grid; gap: .75rem; min-width: 0; }
.data-section__heading h2 { font-size: 1.2rem; margin: 0; }
.data-section__heading p { color: var(--text-secondary); font-size: .8rem; margin: .2rem 0 0; }
.data-center__cards { display: grid; gap: .7rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.data-metric, .data-chart-panel, .data-source-card, .provider-health__item, .data-state { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.data-metric { display: grid; gap: .32rem; min-width: 0; padding: .9rem; }
.data-metric__label { color: var(--text-secondary); font-size: .75rem; font-weight: 760; }
.data-metric__value { color: var(--navy-dark); font-size: clamp(1.15rem, 2.2vw, 1.6rem); overflow-wrap: anywhere; }
.data-meta { color: var(--text-secondary); font-size: .7rem; line-height: 1.35; margin: 0; }
.data-meta b { color: var(--text-main); }
.data-metric__note { background: var(--surface-soft); border-radius: .55rem; color: var(--text-secondary); font-size: .7rem; line-height: 1.4; margin: .25rem 0 0; padding: .45rem; }
.data-chart-panel { min-width: 0; padding: .9rem; }
.data-chart-panel h3 { font-size: .95rem; margin: 0; }
.data-chart-panel__scope, .data-chart-panel__source { color: var(--text-secondary); font-size: .72rem; margin: .2rem 0; }
.data-chart { align-items: end; display: flex; gap: .22rem; height: 180px; margin-top: .6rem; overflow-x: auto; }
.data-chart__item { align-items: center; display: flex; flex: 1 0 24px; flex-direction: column; height: 100%; justify-content: end; }
.data-chart__bar { background: linear-gradient(180deg, var(--primary), #32a87d); border-radius: 5px 5px 2px 2px; min-height: 4px; width: min(22px, 72%); }
.data-chart small { color: var(--text-secondary); font-size: .58rem; margin-top: .2rem; writing-mode: vertical-rl; }
.data-center__source-grid { display: grid; gap: .7rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.data-source-card { display: grid; gap: .35rem; padding: .85rem; }
.data-source-card > a { color: var(--primary); font-size: .86rem; font-weight: 780; text-decoration: none; }
.provider-health { display: grid; gap: .5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: .7rem; }
.provider-health__item { display: grid; gap: .3rem; padding: .75rem; }
.provider-health__item strong { font-size: .8rem; }
.provider-health__item small { color: var(--text-secondary); font-size: .68rem; }
.provider-status { border-radius: 999px; font-size: .66rem; font-weight: 750; justify-self: start; padding: .22rem .5rem; }
.provider-status--success { background: #e7f8ed; color: #16723a; }
.provider-status--error { background: #fff0f2; color: #b3263b; }
.provider-status--unknown { background: var(--surface-soft); color: var(--text-secondary); }
.data-state { padding: .8rem; }
.data-state p { color: var(--text-secondary); font-size: .8rem; margin: 0; }
.data-state--danger { border-color: var(--danger); }
.data-center__legal { color: var(--text-secondary); font-size: .76rem; }
@media (max-width: 900px) { .data-center__cards, .data-center__source-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .provider-health { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .data-center__filters, .data-center__cards, .data-center__source-grid { grid-template-columns: 1fr; } .data-chart { height: 145px; } }