
.static-demo-banner{font:500 13px/1.5 system-ui,-apple-system,Segoe UI,sans-serif;
  padding:10px 16px;background:rgba(125,211,252,.10);border-bottom:1px solid rgba(125,211,252,.28);
  color:inherit;text-align:center}
.static-demo-banner a{color:#38bdf8;text-decoration:underline;text-underline-offset:2px}
.static-demo-banner__warn{opacity:.8}


  .regions-v2 .regions-v2-hero {
    background:
      radial-gradient(circle at top right, var(--wa-info-wash), transparent 32%),
      linear-gradient(180deg, var(--wa-surface) 0%, var(--wa-surface) 100%);
  }
  .regions-v2 .regions-v2-hero .regions-v2-hero-subtitle {
    color: var(--wa-info);
  }
  .regions-v2 .regions-v2-kpi-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  @media (max-width: 1199px) {
    .regions-v2 .regions-v2-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (max-width: 767px) {
    .regions-v2 .regions-v2-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  .regions-v2 .regions-v2-nav {
    position: sticky;
    top: 0.75rem;
    z-index: 20;
  }
  .regions-v2 .regions-v2-chart {
    min-height: 340px;
    width: 100%;
  }
  .regions-v2 .regions-v2-bar-row {
    display: grid;
    grid-template-columns: minmax(8.5rem, 1.3fr) minmax(8rem, 3fr) minmax(5.5rem, auto);
    width: 100%;
    gap: .75rem;
    align-items: center;
    padding: .48rem .35rem;
    color: var(--wa-text);
    background: transparent;
    border: 0;
    border-radius: .55rem;
    text-align: left;
  }
  .regions-v2 .regions-v2-bar-row:hover,
  .regions-v2 .regions-v2-bar-row:focus-visible {
    background: var(--wa-accent-wash);
    outline: none;
  }
  .regions-v2 .regions-v2-bar-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .84rem;
    font-weight: 600;
  }
  .regions-v2 .regions-v2-bar-track {
    display: block;
    height: .68rem;
    overflow: hidden;
    background: var(--wa-surface-2);
    border: 1px solid var(--wa-border);
    border-radius: 999px;
  }
  .regions-v2 .regions-v2-bar-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
  }
  .regions-v2 .regions-v2-bar-value {
    color: var(--wa-text-muted);
    font-size: .8rem;
    text-align: right;
  }
  .regions-v2 .regions-v2-opportunity-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    min-height: 0;
  }
  .regions-v2 .regions-v2-quadrant {
    padding: .75rem;
    background: var(--wa-surface-2);
    border: 1px solid var(--wa-border);
    border-top: 3px solid var(--wa-info);
    border-radius: .75rem;
  }
  .regions-v2 .regions-v2-quadrant--scale { border-top-color: var(--wa-good); }
  .regions-v2 .regions-v2-quadrant--protect { border-top-color: var(--wa-warning); }
  .regions-v2 .regions-v2-quadrant--fix { border-top-color: var(--wa-bad); }
  .regions-v2 .regions-v2-quadrant h6 { color: var(--wa-text); }
  .regions-v2 .regions-v2-quadrant-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: .4rem;
    padding: .45rem .55rem;
    color: var(--wa-text);
    background: var(--wa-surface);
    border: 1px solid transparent;
    border-radius: .5rem;
    text-align: left;
  }
  .regions-v2 .regions-v2-quadrant-item:hover,
  .regions-v2 .regions-v2-quadrant-item:focus-visible {
    border-color: var(--wa-accent-line);
    outline: none;
  }
  .regions-v2 .regions-v2-quadrant-item span {
    color: var(--wa-text-muted);
    font-size: .75rem;
  }
  @media (max-width: 575.98px) {
    .regions-v2 .regions-v2-bar-row { grid-template-columns: minmax(6rem, 1fr) minmax(4rem, 1.5fr); }
    .regions-v2 .regions-v2-bar-value { grid-column: 2; }
    .regions-v2 .regions-v2-opportunity-grid { grid-template-columns: 1fr; }
  }
  .regions-v2 .regions-v2-mini-table,
  .regions-v2 .regions-v2-tall-table,
  .regions-v2 .regions-v2-table-wrap {
    max-height: 360px;
    overflow: auto;
  }
  .regions-v2 .regions-v2-table-wrap { max-height: 560px; }
  .regions-v2 .table thead th.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
  }
  .regions-v2 .table thead th.sortable.asc::after { content: " \2191"; }
  .regions-v2 .table thead th.sortable.desc::after { content: " \2193"; }
  .regions-v2 .metric-stack {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
  }
  .regions-v2 .metric-stack-end {
    align-items: flex-end;
  }
  .regions-v2 .metric-sub {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.28rem;
    font-size: 0.72rem;
    color: var(--wa-text-dim);
  }
  .regions-v2 .status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.46rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
  }
  .regions-v2 .status-red {
    color: var(--wa-bad);
    background: var(--wa-bad-wash);
    border-color: var(--wa-bad-wash);
  }
  .regions-v2 .status-orange {
    color: var(--wa-warn);
    background: var(--wa-warn-wash);
    border-color: var(--wa-warn-wash);
  }
  .regions-v2 .status-yellow {
    color: var(--wa-warn);
    background: var(--wa-warn-wash);
    border-color: var(--wa-warn-wash);
  }
  .regions-v2 .status-light-green {
    color: var(--wa-good);
    background: var(--wa-good-wash);
    border-color: var(--wa-good-wash);
  }
  .regions-v2 .status-green {
    color: var(--wa-good);
    background: var(--wa-good-wash);
    border-color: var(--wa-good-wash);
  }
  .regions-v2 .status-neutral {
    color: var(--wa-text);
    background: var(--wa-hairline-soft);
    border-color: var(--wa-hairline);
  }
  .regions-v2 .risk-pill {
    border-radius: 999px;
    font-size: 0.72rem;
    padding: 0.15rem 0.5rem;
    border: 1px solid transparent;
    white-space: nowrap;
  }
  .regions-v2 .risk-high {
    color: var(--wa-bad);
    background: var(--wa-bad-wash);
    border-color: var(--wa-bad-wash);
  }
  .regions-v2 .risk-medium {
    color: var(--wa-warn);
    background: var(--wa-warn-wash);
    border-color: var(--wa-warn-wash);
  }
  .regions-v2 .risk-low,
  .regions-v2 .quality-ok {
    color: var(--wa-good);
    background: var(--wa-good-wash);
    border-color: var(--wa-good-wash);
  }
  .regions-v2 .quality-watch {
    color: var(--wa-warn);
    background: var(--wa-warn-wash);
    border-color: var(--wa-warn-wash);
  }
  .regions-v2 .quality-critical {
    color: var(--wa-bad);
    background: var(--wa-bad-wash);
    border-color: var(--wa-bad-wash);
  }
  .regions-v2 .delta-up { color: var(--wa-good); }
  .regions-v2 .delta-down { color: var(--wa-bad); }
  .regions-v2 .delta-stable { color: var(--wa-text); }
  .regions-v2 .btn[data-quick-filter].active {
    color: var(--wa-text-inverse);
    background: var(--wa-info);
    border-color: var(--wa-info);
  }


      :root {
        --wa-primary: #0d6efd;
        --bs-primary: #0d6efd;
      }
    