.roi-page {max-width:1280px;margin:32px auto;color:var(--text)}
.roi-heading,.roi-panel-heading {display:flex;justify-content:space-between;align-items:center;gap:24px}
.roi-heading h1 {font-size:32px;margin:4px 0 8px;letter-spacing:-1px}
.roi-eyebrow {font-size:11px;letter-spacing:2px;color:#596879}
.roi-heading p,.roi-note,.roi-panel-heading p {color:#596879;font-size:13px}
.roi-label {font-size:12px;border:1px solid var(--border);padding:8px 12px;border-radius:5px;white-space:nowrap}
.roi-domains {display:flex;border-bottom:1px solid var(--border);margin-top:28px;gap:26px}
.roi-domains a {padding:13px 0;text-decoration:none;color:#596879;font-weight:600}
.roi-domains .selected {color:#2563eb;border-bottom:2px solid #2563eb}
.roi-note {line-height:1.8;margin:16px 0}
.roi-filters {display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin:24px 0}
.roi-filters label {display:grid;gap:7px;font-size:12px;color:#596879}
.roi-filters select {max-width:230px;padding:10px;border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:5px;min-height:40px}
.roi-filters button {padding:11px 20px;background:#2563eb;color:white;border:0;border-radius:5px;cursor:pointer}
.roi-state {display:flex;gap:16px;padding:16px;background:#fff7e6;color:#7c5011;border:1px solid #ebd8b7;border-radius:5px;margin:20px 0;font-size:13px}
.roi-cards {display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:22px 0}
.roi-cards article,.roi-panel {background:var(--card);border:1px solid var(--border);border-radius:8px;padding:22px}
.roi-card-title {font-size:13px;display:flex;justify-content:space-between;align-items:center}
.roi-card-title span {font-size:10px;border:1px solid var(--border);border-radius:3px;padding:2px 6px;color:#596879}
.roi-number {display:block;font-size:34px;color:#19866b;font-variant-numeric:tabular-nums;letter-spacing:-1px;margin:18px 0 12px}
.roi-number.negative {color:#b45348}
.roi-cards p,.roi-cards small {font-size:12px;color:#596879;margin:5px 0}
.roi-panel {margin:20px 0}
.roi-panel h2 {font-size:16px;margin:0 0 8px}
.roi-legend {display:flex;gap:18px;font-size:11px;color:#596879}
#roi-chart {min-height:280px;position:relative}
#roi-chart svg {width:100%;height:auto;display:block}
.roi-chart-empty {padding:90px 0;text-align:center;color:#596879;font-size:13px}
.roi-tooltip {font-size:12px;color:#596879;min-height:18px}
.roi-table-scroll {overflow:auto}
.roi-panel table {width:100%;border-collapse:collapse;font-size:12px}
.roi-panel th,.roi-panel td {text-align:left;padding:14px 10px;border-bottom:1px solid var(--border);white-space:nowrap}
.roi-panel th {color:#596879;font-weight:500}
.roi-panel td small {display:block;color:#596879;margin-top:4px}
.roi-provenance {font-size:12px;color:#596879;padding:16px 0}
.roi-provenance pre {white-space:pre-wrap;word-break:break-all;margin-top:14px}
.roi-page :focus-visible {outline:2px solid #2563eb;outline-offset:4px}
body:has(.roi-page) .navbar-inner {flex-wrap:wrap;gap:10px}
body:has(.roi-page) .navbar-nav {max-width:100%;gap:4px;overflow-x:auto;white-space:nowrap;padding-bottom:4px}
body:has(.roi-page) .navbar-nav a {font-size:13px;padding:4px 10px}
@media(max-width:760px) {
  .roi-cards {grid-template-columns:1fr}
  .roi-heading,.roi-panel-heading {align-items:start;flex-direction:column;gap:8px}
  .roi-heading h1 {font-size:27px}
  .roi-filters label {flex:1;min-width:120px}
  .roi-filters select {width:100%}
  .roi-panel {padding:14px}
  .roi-legend {flex-wrap:wrap;gap:8px}
  .roi-state {flex-direction:column;gap:5px}
  #roi-chart {min-height:160px;overflow-x:auto}
  #roi-chart svg {min-width:600px}
}