:root{
      --bg:#0b0f14;
      --card:#111827;
      --card2:#0f172a;
      --text:#e5e7eb;
      --muted:#94a3b8;
      --border:rgba(255,255,255,.10);
      --accent:#60a5fa;
      --good:#34d399;
      --warn:#fbbf24;
      --bad:#f87171;
      --radius:16px;
      --shadow: 0 10px 30px rgba(0,0,0,.25);
      --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, Arial, "Apple Color Emoji","Segoe UI Emoji";
    }
    *{box-sizing:border-box}

    body{
      margin:0;
      font-family: var(--sans);
      background:
        radial-gradient(1200px 800px at 20% -10%, rgba(96,165,250,.15), transparent 60%),
        radial-gradient(1200px 800px at 90% 10%, rgba(52,211,153,.10), transparent 55%),
        var(--bg);
      color:var(--text);

      display:flex;
      flex-direction:column;
      min-height:100vh;
    }

    a{color:inherit}

    .wrap{
      width:100%;
      margin:0;
      padding:16px 18px 18px;
      flex:1;
      display:flex;
      flex-direction:column;
      min-height:0;
    }

    /* --- Header layout (like your Sankey page) --- */
    .statsHeader{
      padding:0;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      flex-wrap:wrap;
      margin-bottom:14px;
    }

    .leftNav{
      display:flex;
      gap:10px;
      align-items:center;
    }

    .titleBlock{
      flex:1;
      min-width:260px;
    }

    .titleBlock h1{
      margin:0;
      font-size:20px;
      letter-spacing:.2px;
    }

    .subtitle{
      color:var(--muted);
      font-size:13px;
      line-height:1.35;
      max-width:680px;
      margin-top:6px;
    }

    .rightControls{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
    }

    /* Controls styling (reuse chip look, slightly tighter) */
    .chip{
      display:flex;
      align-items:center;
      gap:8px;
      padding:7px 10px;
      border:1px solid var(--border);
      border-radius: 999px;
      background: rgba(0,0,0,.18);
    }
    .chip label{color:var(--muted); font-size:12px}
    select, input[type="text"]{
      background:transparent; color:var(--text);
      border:none; outline:none;
      font-size:13px;
    }
    select option{background:#0b0f14;color:var(--text)}
    input[type="range"]{width:140px}
    .rightControls input[type="text"]{width:150px}

    /* Hidden but keeps JS happy */
    .visuallyHidden{
      position:absolute !important;
      width:1px; height:1px;
      padding:0; margin:-1px;
      overflow:hidden; clip:rect(0,0,0,0);
      white-space:nowrap; border:0;
    }

    /* --- Panel + chart fill --- */
    .panel{
      flex:1;
      display:flex;
      flex-direction:column;
      min-height:0;
    }

    .kpiRow{
      display:grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap:10px;
      padding:12px;
      border-bottom:1px solid var(--border);
      background: rgba(0,0,0,.10);
    }
    @media (max-width: 900px){
      .kpiRow{grid-template-columns: repeat(2, minmax(0, 1fr));}
    }

    .kpi{
      padding:10px 12px;
      border:1px solid var(--border);
      border-radius: 14px;
      background: rgba(0,0,0,.18);
    }
    .kpi .k{color:var(--muted); font-size:12px}
    .kpi .v{font-size:18px; margin-top:4px; font-variant-numeric: tabular-nums;}
    .kpi .s{color:var(--muted); font-size:12px; margin-top:2px; font-family: var(--mono);}

    .chartArea{
      padding:12px;
      flex:1;
      min-height:0;
      overflow:auto;
    }

    .hint{
      color:var(--muted);
      font-size:12px;
      margin-top:8px;
      line-height:1.35;
    }

    /* SVG / D3 */
    .axis text{fill: var(--muted); font-size:12px}
    .axis path, .axis line{stroke: rgba(255,255,255,.12)}
    .bar{cursor:pointer}
    .bar:hover{filter: brightness(1.12)}

    .tooltip{
      position:fixed;
      pointer-events:none;
      z-index:9999;
      background: rgba(17,24,39,.95);
      border:1px solid rgba(255,255,255,.12);
      border-radius: 12px;
      padding:10px 12px;
      box-shadow: var(--shadow);
      max-width: 320px;
      display:none;
    }
    .tooltip .t{font-weight:700}
    .tooltip .m{color:var(--muted); font-size:12px; margin-top:2px}
    .tooltip .p{margin-top:6px; font-family: var(--mono); font-size:12px; color: rgba(229,231,235,.9)}

    .err{
      padding:14px;
      border:1px solid rgba(248,113,113,.35);
      background: rgba(248,113,113,.10);
      color: rgba(248,113,113,.95);
      border-radius: 14px;
      margin: 12px;
      font-family: var(--mono);
      white-space: pre-wrap;
    }