:root{
      --bg0:#070A12;
      --bg1:#0B1020;
      --card: rgba(255,255,255,.06);
      --stroke: rgba(255,255,255,.10);
      --text: rgba(255,255,255,.88);
      --muted: rgba(255,255,255,.58);
      --good: #2EE59D;
      --bad: #FF5C7A;
      --warn:#FFB020;
      --accent:#7C5CFF;
      --accent2:#30D5FF;
      --shadow: 0 18px 60px rgba(0,0,0,.45);
      --radius: 18px;
      --radius2: 26px;
      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans";
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: var(--sans);
      color: var(--text);
      background:
        radial-gradient(1200px 600px at 20% 10%, rgba(124,92,255,.22), transparent 60%),
        radial-gradient(1000px 600px at 80% 20%, rgba(48,213,255,.18), transparent 60%),
        radial-gradient(900px 500px at 60% 80%, rgba(46,229,157,.14), transparent 55%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
      min-height:100vh;
    }
/* Force ApexCharts tooltip dark (fixes occasional white tooltip backgrounds) */
.apexcharts-tooltip {
  background: rgba(10,12,18,.92) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.90) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.55) !important;
  backdrop-filter: blur(10px);
}
.apexcharts-tooltip-title {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.88) !important;
}
.apexcharts-xaxistooltip,
.apexcharts-yaxistooltip {
  background: rgba(10,12,18,.92) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.90) !important;
}
    .wrap{max-width:1240px;margin:0 auto;padding:28px 18px 48px}
    .topbar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-bottom:18px}
    .brand{display:flex;gap:12px;align-items:center}
    .logo{
      width:42px;height:42px;border-radius:14px;
      background: linear-gradient(135deg, rgba(124,92,255,.95), rgba(48,213,255,.85));
      box-shadow: var(--shadow);
      position:relative; overflow:hidden;
    }
    .logo:after{
      content:""; position:absolute; inset:-40%;
      background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 55%);
      transform: rotate(25deg);
    }
    .brand h1{margin:0;font-size:18px;letter-spacing:.2px}
    .brand p{margin:2px 0 0;color:var(--muted);font-size:12px}

    .pill{
      display:inline-flex;gap:10px;align-items:center;padding:10px 12px;border-radius:999px;
      background: rgba(255,255,255,.06);
      border:1px solid var(--stroke);
      box-shadow: 0 12px 38px rgba(0,0,0,.25);
      backdrop-filter: blur(10px);
    }
    .pill b{font-family:var(--mono);font-size:12px}
    .pill span{color:var(--muted);font-size:12px}

    .tabs{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin: 6px 0 16px}
    .tab{
      cursor:pointer;
      padding:9px 11px;border-radius:999px;
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.04);
      color: var(--muted);
      font-size:12px;
      transition:.15s ease;
      user-select:none;
    }
    .tab.active{
      color: var(--text);
      border-color: rgba(124,92,255,.55);
      background: rgba(124,92,255,.15);
      box-shadow: 0 10px 28px rgba(124,92,255,.12);
    }

    .grid{display:grid;gap:14px;grid-template-columns: repeat(12, 1fr)}
    .card{
      border-radius: var(--radius2);
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
      border: 1px solid var(--stroke);
      box-shadow: var(--shadow);
      backdrop-filter: blur(12px);
      overflow:hidden;
    }
    .cardHeader{
      padding:14px 16px 10px;
      display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
      border-bottom:1px solid rgba(255,255,255,.06);
      background: linear-gradient(180deg, rgba(255,255,255,.06), transparent);
    }
    .cardHeader h2{margin:0;font-size:14px;font-weight:800;letter-spacing:.2px}
    .cardHeader small{display:block;margin-top:4px;color:var(--muted);font-size:12px}
    .cardBody{
      padding:12px 16px 16px;
      
    }
    .max-list{
max-height: 600px;
  overflow: auto;
    }

    .kpi{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-top:2px}
    .kpi .v{font-size:26px;font-weight:900;letter-spacing:.2px}
    .kpi .sub{font-size:12px;color:var(--muted)}
    .kpi .tag{
      font-family:var(--mono);
      font-size:11px;
      padding:4px 8px;border-radius:999px;border:1px solid var(--stroke);
      background: rgba(255,255,255,.05);
    }

    .spark{height:64px;margin-top:8px}
    .chart{height:320px}
    .chartTall{height:360px}

    table{
      width:100%;
      border-collapse:separate;
      border-spacing:0;
      overflow:hidden;
      border-radius: var(--radius);
      border:1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.20);
    }
    thead th{
      text-align:left;
      font-size:12px;
      color:rgba(255,255,255,.72);
      font-weight:800;
      padding:10px 12px;
      border-bottom:1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.04);
    }
    tbody td{
      padding:10px 12px;
      font-size:12px;
      color: rgba(255,255,255,.82);
      border-bottom:1px solid rgba(255,255,255,.06);
      vertical-align:top;
    }
    tbody tr:last-child td{border-bottom:none}

    .rowPill{
      font-family:var(--mono);
      padding:2px 7px;border-radius:999px;border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
      font-size:11px;
      display:inline-block;
    }

    .muted{color:var(--muted)}
    .warn{color:var(--warn)}
    .good{color:var(--good)}
    .bad{color:var(--bad)}
    .mono{font-family:var(--mono)}

    .empty{
      padding:12px 14px;border-radius: var(--radius);
      border:1px dashed rgba(255,255,255,.16);
      background: rgba(0,0,0,.18);
      color: var(--muted);
      font-size:12px;
    }
    .twoCol{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .pg{
      grid-template-columns: 1fr 1fr 1fr !important;
    }
@media (max-width: 980px){ .twoCol{grid-template-columns:1fr} }
    .foot{margin-top:14px;color:rgba(255,255,255,.35);font-size:12px}

    /* ========== PREMIUM TAB BADGE SYSTEM ========== */

/* Ensure tabs allow positioned badge */
.tabs .tab {
  position: relative;
}

/* Generic badge system */
.tabs .tab.tab--badge::after {
  content: attr(data-badge);
  position: absolute;
  top: -12%;
  right: -13%;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 400;
  color: rgba(255,255,255,0.95);
  background: linear-gradient( 180deg, rgba(167,139,250,0.95), rgba(124,58,237,0.88) );
  border: 1px solid rgba(167,139,250,0.35);
  box-shadow: 0 8px 20px rgba(124,58,237,0.25), 0 0 0 1px rgba(0,0,0,0.15) inset;
  pointer-events: none;
  transition: all 0.2s ease;
  transform: rotate(25deg);
}

/* Slight premium glow on active tab */
.tabs .tab.tab--badge.active::after {
  filter: brightness(1.08);
  border-color: rgba(167,139,250,0.55);
  box-shadow:
    0 10px 24px rgba(124,58,237,0.35),
    0 0 0 1px rgba(0,0,0,0.15) inset;
}

/* Responsive tweak */
@media (max-width: 520px) {
  .tabs .tab.tab--badge::after {
    top: 4px;
    right: 6px;
    font-size: 9px;
    padding: 2px 7px;
  }
}

.select-box{
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent);
}