.metrics-toolbar { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background:var(--surface); border-radius:13px; margin-bottom:13px; min-height:54px; }
.shell .metrics-toolbar h1 { font-size:14px; margin:0; }
.metrics-toolbar svg,.metrics-period svg,.metrics-summary-icon svg { width:15px; height:15px; }
.metrics-toolbar button { display:grid; place-items:center; padding:5px; }
.shell .metrics-filters { display:flex; align-items:end; gap:12px; padding:14px; margin-bottom:13px; }
.metrics-filters label { flex:1; min-width:0; font-size:10px; }
.shell .metrics-filters select { height:30px; font-size:11px; padding:5px 9px; }
.metrics-filters button { font-size:11px; }
.people-metric-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; margin-bottom:19px; }
.shell .metrics-new-card { display:flex; gap:12px; align-items:center; padding:13px; min-height:67px; border:0; border-radius:13px; }
.metrics-new-card > div > span { display:block; font-size:9px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); }
.shell .metrics-new-card strong { display:block; font-size:21px; line-height:1.25; margin:0; }
.shell .metrics-new-card > .metrics-summary-icon { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; line-height:0; background:#ffffff08; flex:none; }
.metrics-summary-icon > svg { display:block; width:15px; height:15px; flex:none; }
.shell .metrics-chart-card { padding:16px; border:0; border-radius:13px; margin-bottom:18px; min-width:0; }
.metrics-card-heading { display:flex; align-items:center; justify-content:space-between; gap:6px; border-bottom:1px solid var(--line); padding-bottom:13px; margin-bottom:15px; }
.shell .metrics-card-heading h2 { margin:0; font-size:13px; display:flex; align-items:center; gap:6px; }
.metrics-card-heading h2::before { content:''; width:7px; height:13px; background:var(--orange); border-radius:4px; flex:none; }
.shell .metrics-period { display:flex; align-items:center; gap:4px; font-size:9px; padding:4px 6px; white-space:nowrap; background:#ffffff06; border:0; }
.metrics-period svg { width:11px; height:11px; }
.metrics-demographics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.metrics-svg { display:block; width:100%; height:auto; overflow:visible; }
.metrics-svg text { font-family:inherit; font-size:10px; fill:var(--muted); }
.metrics-svg .metrics-donut-total { font-size:26px; font-weight:700; fill:var(--text); }
.metrics-gridline { stroke:var(--line); opacity:.55; stroke-width:1; }
.metrics-svg [tabindex]:hover,.metrics-svg [tabindex]:focus { filter:brightness(1.2); outline:none; stroke:var(--text); stroke-width:2; }
.metrics-legend { display:flex; justify-content:center; flex-wrap:wrap; gap:7px 12px; margin:0 0 10px; }
.metrics-legend-item { display:inline-flex; align-items:center; gap:4px; font-size:9px; color:var(--muted); }
.metrics-legend-item i { width:23px; height:9px; display:inline-block; }
.metrics-legend-item b { font-size:9px; color:var(--text); font-weight:500; }
.shell button.metrics-legend-item { padding:1px; border:0; background:transparent; }
.metrics-legend-item[aria-pressed=false] { opacity:.35; text-decoration:line-through; }
.shell .metrics-note { font-size:10px; line-height:1.5; color:var(--muted); margin:8px 0 0; }
.metrics-empty { font-size:11px; color:var(--muted); text-align:center; padding:10px; }
.metrics-location { display:grid; grid-template-columns:1fr 1fr; gap:35px; }
.shell #metrics-states h3 { font-size:11px; margin:4px 0 18px; font-weight:500; }
.metrics-state-row { margin-bottom:16px; }
.metrics-state-row > div:first-child { display:flex; justify-content:space-between; font-size:10px; margin-bottom:6px; }
.metrics-state-row strong { font-weight:500; }
.metrics-state-track { height:8px; background:#ffffff08; border-radius:4px; overflow:hidden; }
.metrics-state-track > div { height:100%; background:var(--orange); border-radius:4px; }
.metrics-location th,.metrics-location td { font-size:10px; padding:16px 12px; }
.metrics-location .table-wrap { max-height:390px; overflow:auto; }
#metrics-states { min-width:0; padding-right:4px; }
.metrics-brazil-map { max-width:380px; margin:0 auto 15px; }
.metrics-brazil-map path { cursor:pointer; }
.metrics-map-credit { font-size:9px; color:var(--muted); }
@media(max-width:1050px){ .metrics-demographics { grid-template-columns:repeat(2,minmax(0,1fr)); } .metrics-demographics > article:last-child { grid-column:1 / -1; } .metrics-demographics > article:last-child .metrics-svg { max-width:320px; margin:auto; } }
@media(max-width:700px){ .people-metric-cards { grid-template-columns:1fr; gap:8px; } .metrics-demographics,.metrics-location { grid-template-columns:1fr; gap:12px; } .shell .metrics-filters { flex-wrap:wrap; } .metrics-filters label { flex:1 1 40%; } .metrics-demographics > article:last-child { grid-column:auto; } .metrics-demographics .metrics-svg { max-width:360px; margin:auto; } #metrics-evolution { overflow-x:auto; } #metrics-evolution > svg { min-width:640px; } .metrics-card-heading h2 { font-size:12px; } }