:root{
      --bg:#0b0f14;
      --panel:#0f1620;
      --text:#e8eef6;
      --muted:#9fb0c3;
      --stroke:rgba(255,255,255,.10);
      --chip:rgba(255,255,255,.06);
      --accent:#7ec8ff;
    }

    *{ box-sizing:border-box; }

    html, body{
      height:100%;
    }

    body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background:var(--bg);
      color:var(--text);
      display:flex;
      flex-direction:column;
      overflow:hidden; /* important: chart fills remaining area without scrollbars */
    }

    /* Header (unchanged look) */
    .homeBtn svg,
    .statsBtn svg{
      width:18px;
      height:18px;
      display:block;
    }

    .homeBtn,
    .statsBtn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:40px;
      height:40px;
      border-radius:999px;
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.05);
      color: #2dff00;
      text-decoration:none;
      transition: background .15s ease, transform .08s ease;
    }

    .homeBtn:hover,
    .statsBtn:hover{
      background: rgba(255,255,255,.12);
      transform: translateY(-1px);
    }

    .statsHeader{
      display:flex;
      align-items:center;
      gap:16px;
      padding:16px 18px 10px;
      flex-wrap:wrap;
      border-bottom:1px solid var(--stroke);
      background: linear-gradient(180deg, rgba(255,255,255,.03), transparent);
      flex:0 0 auto;
    }

    .navBtns{
      display:flex;
      gap:10px;
      flex-shrink:0;
    }

    .titleWrap{
      display:flex;
      flex-direction:column;
      gap:4px;
    }

    .statsHeader h1{
      margin:0;
      font-size:20px;
    }

    .subtitle{
      font-size:12px;
      color:var(--muted);
    }

    /* FULL-PAGE LAYOUT (no max-width box) */
    .wrap{
      flex:1 1 auto;
      min-height:0;
      display:flex;
      flex-direction:column;
      padding:12px;              /* keep a little breathing room */
      gap:10px;
    }

    /* Controls stay at top, chart takes the rest */
    .panel{
      flex:1 1 auto;
      min-height:0;
      display:flex;
      flex-direction:column;
      background:var(--panel);
      border:1px solid var(--stroke);
      border-radius:14px;
      box-shadow: 0 10px 30px rgba(0,0,0,.25);
      overflow:hidden;           /* keep chart tidy */
    }

    .row{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      align-items:center;
      padding:12px 12px 10px;
      border-bottom:1px solid var(--stroke);
      background: linear-gradient(180deg, rgba(255,255,255,.03), transparent);
      flex:0 0 auto;
    }

    .chip{
      background:var(--chip);
      border:1px solid var(--stroke);
      border-radius:999px;
      padding:8px 10px;
      display:flex;
      gap:8px;
      align-items:center;
    }

    label{
      color:var(--muted);
      font-size:12px;
      white-space:nowrap;
    }

    input[type="range"]{ width:220px; }

    #status{
      color:var(--muted);
      font-size:12px;
      margin-left:auto;
    }

    .err{ color:#ffb3b3; }

    /* Chart fills remaining height */
    #chart{
      flex:1 1 auto;
      min-height:0;
      position:relative;
    }

    /* SVG should fill chart area */
    #chart svg{
      width:100%;
      height:100%;
      display:block;
    }

    .tooltip{
      position:fixed;
      pointer-events:none;
      background: rgba(10,14,20,.95);
      color: var(--text);
      border:1px solid rgba(255,255,255,.14);
      padding:10px 10px;
      border-radius:10px;
      font-size:12px;
      box-shadow: 0 10px 25px rgba(0,0,0,.35);
      max-width: 320px;
      line-height: 1.25;
      display:none;
      z-index:9999;
    }

    .tooltip .mut{ color: var(--muted); }

    .hint{
      color:var(--muted);
      font-size:12px;
      padding:10px 12px 12px;
      border-top:1px solid var(--stroke);
      background: rgba(255,255,255,.02);
      flex:0 0 auto;
    }

    .kbd{
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 11px;
      padding: 2px 6px;
      border: 1px solid var(--stroke);
      border-radius: 8px;
      background: rgba(255,255,255,.04);
      color: var(--muted);
    }

    .qInput{
      width:180px;
      background:transparent;
      border:1px solid var(--stroke);
      border-radius:999px;
      padding:6px 10px;
      color:var(--text);
      outline:none;
    }
    .qInput::placeholder{ color: rgba(159,176,195,.75); }

    .chkLbl{
      display:flex; align-items:center; gap:8px;
      user-select:none;
      color: var(--muted);
      font-size:12px;
    }
    .chkLbl input{ transform: translateY(1px); }

    button{
      font: inherit;
    }