:root {
        --bg: #0f1216;
        --panel: #151a20;
        --panel-2: #1b2129;
        --text: #e6eaf0;
        --muted: #9aa4b2;
        --accent: #d61f26;
        --accent-2: #36c;
        --ok: #24c28a;
        --warn: #e0b422;
        --bad: #f05252;
        --chip: #222832;
        --border: #2a313b;
      }

      * {
        box-sizing: border-box
      }

    @font-face {
    font-family: MazdaTypeTT;
    font-display: block;
    src: url(MazdaTypeTT-Regular.0d21eb65.woff2)format("woff2");
    font-weight: 400;
    font-style: normal
    }

    @font-face {
        font-family: MazdaTypeTT;
        font-display: block;
        src: url(MazdaTypeTT-Medium.9624f6d9.woff2)format("woff2");
        font-weight: 500;
        font-style: normal
    }

    @font-face {
        font-family: MazdaTypeTT;
        font-display: block;
        src: url(MazdaTypeTT-MediumItalic.a53b6f72.woff2)format("woff2"),url(MazdaTypeTT-MediumItalic.80ac4c7a.woff)format("woff");
        font-weight: 500;
        font-style: italic
    }

    @font-face {
        font-family: MazdaTypeTT;
        font-display: block;
        src: url(MazdaTypeTT-Bold.ab9454ad.woff2)format("woff2"),url(MazdaTypeTT-Bold.51bdb672.woff)format("woff");
        font-weight: 600;
        font-style: normal
    }

    @font-face {
        font-family: MazdaTypeTT;
        font-display: block;
        src: url(MazdaTypeTT-BoldItalic.7c8532e8.woff2)format("woff2"),url(MazdaTypeTT-BoldItalic.72c56847.woff)format("woff");
        font-weight: 600;
        font-style: italic
    }

      body {
        margin: 0;
        font-family: MazdaTypeTT,Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
        background: linear-gradient(180deg,#0d1014,#0f1216 20% 100%);
        color: var(--text);
      }

      header {
        padding: 20px 16px;
        position: sticky;
        top: 0;
        z-index: 5;
        background: linear-gradient(180deg,#0f1216 70%,transparent);
        border-bottom: 1px solid var(--border);
      }

      .wrap {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 8px
      }

      .header {
        display: flex;
        flex-direction: row;
        text-align: center;
      }

      h1 {
        font-size: 2em;
        letter-spacing: .2px;
        margin-left: 20%;
      }

      .controls {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-top: 12px
      }

      select,.btn {
        background: var(--panel-2);
        color: var(--text);
        border: 1px solid var(--border);
        padding: 8px 10px;
        border-radius: 8px;
        font-size: 14px;
        cursor: pointer;
      }

      .btn {
        background: linear-gradient(180deg,#1a222c,#141a22);
        border-color: #334255
      }

      main {
        padding: 16px 0 48px
      }

      .grid {
        display: grid;
        gap: 12px;
        grid-template-columns: repeat(12,1fr)
      }

      .card {
        background: linear-gradient(180deg,#151a20,#12171e);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 14px;
        box-shadow: 0 4px 16px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.02);
        margin-bottom: 10px;
      }

      .kpi {
        grid-column: span 3;
        min-width: 180px
      }

      .kpi h3 {
        margin: 0 0 8px;
        font-size: 12px;
        color: var(--muted);
        font-weight: 600;
        letter-spacing: .4px;
        text-transform: uppercase
      }

      .kpi .val {
        font-size: 22px;
        font-weight: 700
      }

      .kpi .sub {
        font-size: 12px;
        color: var(--muted);
        margin-top: 6px
      }

      .accent {
        color: var(--accent)
      }

      .ok {
        color: var(--ok)
      }

      .bad {
        color: var(--bad)
      }

      .muted {
        color: var(--muted)
      }

      .span-12 {
        grid-column: span 12
      }

      .span-6 {
        grid-column: span 6
      }

      .panel-title {
        margin: 0 0 10px;
        font-size: 14px;
        color: #d5dbe5;
        letter-spacing: .2px;
        margin-bottom: 10px;
      }

      .panel-details {
        display: flex;
        align-items: center;      /* Vertically align items */
        justify-content: space-between; /* Pushes items to the ends */
        padding: 8px 0px;        /* Optional: adjust as needed */
      }

      .chart-wrap {
        height: 320px
      }

      table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px
      }

      thead th {
        text-align: left;
        padding: 10px;
        color: #c8d0db;
        font-weight: 600;
        border-bottom: 1px solid var(--border);
        background: var(--panel-2);
        position: sticky;
        top: 0;
        z-index: 1;
      }

      tbody td {
        padding: 8px 10px;
        border-bottom: 1px solid #212833;
        color: #dde4ee
      }

      tbody tr:hover {
        background: #151b23
      }

      .chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 2px 8px;
        border-radius: 999px;
        background: var(--chip);
        color: #d0d7e2;
        border: 1px solid #2a3340;
        font-size: 12px
      }

      .muted-note {
        font-size: 12px;
        color: var(--muted);
        margin-top: 10px;
        margin-bottom: 10px;
      }

      @media (max-width:960px) {
        .kpi {
          grid-column: span 6
        }

        .span-6 {
          grid-column: span 12
        }
      }

      @media (max-width:640px) {
        .kpi {
          grid-column: span 12
        }
      }