.app-shell:has(#page-chart.active) { padding: 32px 36px 40px; }
.app-shell-inner:has(#page-chart.active) { max-width: 1480px; }
.app-shell-inner:has(#page-chart.active) > .wrap { max-width: none; }
.app-shell-inner:has(#page-chart.active) .progress-indicator { display: none; }
.stats-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 22px 0; }
.stats-card { border: 1px solid #d3d5da; border-radius: 9px; padding: 22px; min-width: 0; background: #fff; }
.stats-card h2 { font-size: 17px; margin-bottom: 10px; }
.stats-kpis article { background: #f2f1ff; }
.stats-kpis article:nth-child(2) { background: #fce7dc; }
.stats-kpis article:nth-child(3) { background: #f7f7fa; }
.stats-kpis h2 { font-size: 13px; font-weight: 500; }
.stats-kpis strong { display: block; font-size: 25px; }
.stats-kpis p, .stats-note { font-size: 13px; color: var(--text-secondary); margin-top: 8px; }
.stats-chart-header { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; align-items: center; }
.stats-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.stats-filters button { border: 1px solid #d2d0eb; background: #fff; color: #363577; padding: 8px 12px; border-radius: 6px; font: inherit; font-size: 12px; cursor: pointer; }
.stats-filters button[aria-pressed="true"] { background: #363577; color: #fff; }
.stats-chart { width: 100%; max-width: 1000px; margin: 12px auto 0; }
.stats-chart svg { display: block; width: 100%; height: auto; }
.stats-chart text { fill: #4c4e5c; font: 13px 'Montserrat', sans-serif; }
.stats-gridline { stroke: #e2e3ec; stroke-width: 1; }
.stats-current-line { fill: none; stroke: #4e4f89; stroke-width: 4; }
.stats-best-line { fill: none; stroke: #e67c35; stroke-width: 3; stroke-dasharray: 8 8; }
.stats-current-point { fill: #4e4f89; }
.stats-best-point { fill: none; stroke: #e67c35; stroke-width: 3; }
.stats-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin: 8px 0 16px; font-size: 13px; }
.stats-legend span { display: inline-flex; align-items: center; gap: 8px; }
.stats-legend i { width: 26px; border-top: 3px solid #4e4f89; }
.stats-legend .legend-best { border-top: 3px dashed #e67c35; }
.stats-insights { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 20px 0; }
.stats-strength { border-top: 3px solid #4e4f89; }
.stats-priority { border-top: 3px solid #ff8854; }
.stats-insights strong { font-size: 20px; }
.stats-insights p, .stats-insights li { font-size: 14px; margin-top: 10px; }
.stats-insights ul { padding-left: 20px; }
.stats-table-wrap { overflow-x: auto; }
.stats-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.stats-table th, .stats-table td { padding: 12px; border-bottom: 1px solid var(--border); text-align: left; }
.stats-table thead { background: #f3f3fa; }
.stats-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.pref-dark .stats-card { background: #111; border-color: #555563; }
.pref-dark .stats-kpis article:first-child { background: #292644; }
.pref-dark .stats-kpis article:nth-child(2) { background: #452c21; }
.pref-dark .stats-kpis article:nth-child(3), .pref-dark .stats-table thead { background: #222; }
.pref-dark .stats-filters button { background: #222; color: #dedaff; border-color: #696184; }
.pref-dark .stats-filters button[aria-pressed="true"] { background: #4e4f89; color: #fff; }
.pref-dark .stats-chart text { fill: #e2e1ef; }
.pref-dark .stats-gridline { stroke: #454551; }
.pref-dark .stats-current-line { stroke: #aaa2ff; }
.pref-dark .stats-current-point { fill: #aaa2ff; }
.pref-dark .stats-legend i { border-color: #aaa2ff; }
.pref-dark .stats-legend .legend-best { border-color: #ff9867; }
.pref-dark .stats-best-line, .pref-dark .stats-best-point { stroke: #ff9867; }
.pref-contrast .stats-card { border-width: 2px; border-color: #30304b; }
.pref-dark.pref-contrast .stats-card { border-color: #e0defa; }
.pref-largeText .stats-card :is(p, li), .pref-largeText .stats-table, .pref-largeText .stats-filters button { font-size: 17px; }
.pref-largeText .stats-chart text { font-size: 16px; }
@media (max-width: 760px) {
  .app-shell:has(#page-chart.active) { padding: 20px 12px; }
  .stats-kpis, .stats-insights { grid-template-columns: 1fr; gap: 12px; }
  .stats-card { padding: 18px 14px; }
  .stats-chart { overflow-x: auto; }
  .stats-chart svg { min-width: 540px; }
}