:root{
  --bmi-state:#3ba776;
  --bmi-region:#f8b400;
  --bmi-hover:#e34b4b;
}
.bmi-wrap{ width:var(--bmi-width,100%); }
.bmi-stage{ display:grid; grid-template-columns:1.2fr .8fr; min-height:520px; gap:0; background:#0e1117; color:#e9eef3; border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.08); }
.bmi-map{ display:flex; align-items:center; justify-content:center; background:#0e1117; }
.bmi-side{ padding:16px; border-left:1px solid rgba(255,255,255,.08); background:#111520; }
.bmi-card{ background:#0f1218; border:1px solid rgba(255,255,255,.06); border-radius:10px; padding:12px; }
.bmi-header{ display:flex; justify-content:flex-end; margin:8px 0; }
.bmi-legend{ display:flex; gap:14px; font-size:12px; color:#cfd8e3; }
.bmi-legend i{ width:12px; height:12px; border-radius:50%; display:inline-block; margin-right:6px; vertical-align:middle; }

.bmi-wrap svg{ max-width:100%; height:auto; }
.bmi-state { fill: var(--bmi-state); stroke: #fff; stroke-width:.8; transition:fill .15s ease, filter .15s ease; cursor:pointer; }
.bmi-in-region { fill: var(--bmi-region) !important; }
.bmi-hovered { fill: var(--bmi-hover) !important; filter: drop-shadow(0 2px 6px rgba(0,0,0,.55)); }
.bmi-dim { opacity:.25; }

@media (max-width:900px){
  .bmi-stage{ grid-template-columns:1fr; }
  .bmi-side{ border-left:none; border-top:1px solid rgba(255,255,255,.08); }
}