:root { --bg:#0b0f14; --card:#141a22; --muted:#7d8b9c; --text:#e7eef6; --ok:#24c08b; --warn:#e9b15b; --err:#ef6a6a; }
      *{box-sizing:border-box}
      body{
        margin:0;
        background:var(--bg);
        color:var(--text);
        font:14px/1.45 system-ui,Segoe UI,Roboto,Helvetica,Arial
      }
      .container{max-width:1100px;margin:0 auto;padding:20px}
      .row{display:grid;gap:16px}
      @media(min-width:900px){.row{grid-template-columns:1fr 1fr}}
      .card{
        background:var(--card);
        border:1px solid rgba(255,255,255,.06);
        border-radius:14px;
        padding:16px;
        box-shadow:0 6px 20px rgba(0,0,0,.18)
      }
      h1{font-size:20px;margin:0 0 12px}
      h2{font-size:16px;margin:0 0 10px;color:var(--muted)}
      .muted{color:var(--muted)}
      .kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
      .kpi{
        background:rgba(255,255,255,.04);
        border:1px solid rgba(255,255,255,.06);
        border-radius:12px;
        padding:12px
      }
      .kpi .label{font-size:12px;color:var(--muted)}
      .kpi .value{font-size:20px;font-weight:700}
      .toolbar{
        display:flex;
        gap:10px;
        align-items:center;
        justify-content:space-between;
        margin-bottom:12px
      }
      button{
        background:#1e2632;
        color:var(--text);
        border:1px solid rgba(255,255,255,.08);
        padding:8px 12px;
        border-radius:10px;
        cursor:pointer
      }
      button:hover{background:#222c3a}
      input,select{
        background:#0f141b;
        color:var(--text);
        border:1px solid rgba(255,255,255,.08);
        padding:8px 10px;
        border-radius:10px
      }
      .list{display:grid;gap:10px;max-height:60vh;overflow:auto;padding-right:4px}
      .item{
        border:1px solid rgba(255,255,255,.08);
        border-radius:12px;
        padding:12px;
        background:rgba(255,255,255,.03)
      }
      .tag{
        display:inline-block;
        font-size:12px;
        padding:2px 8px;
        border-radius:999px;
        margin-right:6px;
        border:1px solid rgba(255,255,255,.15)
      }
      .ok{color:var(--ok);border-color:rgba(36,192,139,.4)}
      .warn{color:var(--warn);border-color:rgba(233,177,91,.4)}
      .err{color:var(--err);border-color:rgba(239,106,106,.4)}
      .grid2{display:grid;gap:12px}
      @media(min-width:900px){.grid2{grid-template-columns:2fr 1fr}}
      .small{font-size:12px}
      .right{float:right}
      .mono{
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
      }

      /* ===== Overlay Heatmap ===== */
      #heatmap-overlay{
        position:fixed;
        inset:0;
        background:rgba(0,0,0,0.92);
        display:none;
        justify-content:center;
        align-items:center;
        flex-direction:column;
        z-index:999;
      }
#heatmap-wrapper{
  position:relative;
  max-width:90vw;
  max-height:90vh;
  overflow:hidden;
}

#heatmap-background{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;
  display:block;
  z-index:1;
}

#heatmap-canvas{
  position:absolute;
  inset:0;
  image-rendering:pixelated;
  pointer-events:none;
  border:1px solid #444;
  background:transparent;
  z-index:2;
}
      #heatmap-close{
        position:absolute;
        top:20px;
        right:20px;
        background:#1e2632;
        color:#fff;
        border:1px solid rgba(255,255,255,.2);
        padding:8px 12px;
        border-radius:10px;
        cursor:pointer;
      }
      #heatmap-close:hover{
        background:#222c3a;
      }
      #heatmap-title{
        margin-bottom:10px;
        color:#e7eef6;
        font-size:16px;
      }