body {
          font-family: system-ui, Arial, sans-serif;
          margin: 24px;
          background: var(--bg);
          color: var(--text);
}

}

        :root{
          --bg: #ffffff;
          --text: #0b1220;
          --card: #ffffff;
          --border: #dddddd;
        }

        body { background: var(--bg); color: var(--text); }
        .card { background: var(--card); border: 1px solid var(--border); }

        body.dark{
          --bg: #0f172a;
          --text: #e5e7eb;
          --card: #020617;
          --border: #1e293b;
        }

        .row{
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 16px;
          padding: 10px 0;
          border-bottom: 1px solid var(--border);
        }
        .row:last-child{ border-bottom: none; }


        .card {
          background: var(--card);
          border: 1px solid var(--border);
          border-radius: 16px;
          padding: 20px;
          width: 100%;
          max-width: 600px;
          box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        }

}
    .label { font-weight: 600; }
    .muted { color: var(--text); opacity: 0.6; font-size: 0.9rem; }

        .container {
          display: flex;
          flex-direction: column;
          gap: 16px;
          align-items: center;
}

        .menu { position: relative; display: inline-block; margin: 8px 0 16px 0; }
        .menuPanel{
          position: absolute;
          top: 44px;
          left: 0;
          min-width: 240px;
          padding: 12px;
          border-radius: 12px;
          border: 1px solid var(--border);
          background: var(--card);
          box-shadow: 0 10px 30px rgba(0,0,0,0.35);
          z-index: 20;
        }
        .menuRow{ display:flex; gap:10px; align-items:center; padding: 8px 4px; }


        .controls{
          display:flex;
          gap:10px;
          align-items:center;
          margin: 14px 0 18px 0;
        }

        /* prevent “jumping” by keeping card sizes stable */
        #card { min-height: 220px; }
        #nasCard { min-height: 140px; }

        .card { font-variant-numeric: tabular-nums; }

        #card.isLoading, #nasCard.isLoading { opacity: 0.85; }

button{
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
}

button:hover{
  filter: brightness(0.98);
}

body.dark button:hover{
  filter: brightness(1.1);
}

button:disabled{
  opacity: 0.55;
  cursor: not-allowed;
}

        .status{
          font-size: 0.95rem;
          opacity: 0.8;
}

        .banner{
          padding: 10px 14px;
          border-radius: 12px;
          border: 1px solid var(--border);
          background: var(--card);
          margin: 10px 0 14px 0;
          opacity: 0.95;
        }

        /* simple “skeleton” loading bars */
        .skel {
          height: 14px;
          border-radius: 999px;
          border: 1px solid var(--border);
          background: var(--card);
          opacity: 0.6;
          margin: 10px 0;
        }

        /* disabled look */
        button:disabled{
          opacity: 0.55;
          cursor: not-allowed;
        }

        .card { font-variant-numeric: tabular-nums; }

        #card.isLoading { opacity: 0.85; }

        #card {
          min-height: 220px;
        }

        #card { min-height: 220px; }          /* prevents jump */
#nasCard { min-height: 160px; }       /* prevents jump */
#card.isLoading { opacity: 0.75; }    /* subtle loading */

.value-warn { color: #eab308; font-weight: 600; }
.value-hot  { color: #ef4444; font-weight: 600; }
.value-ok   { color: #22c55e; font-weight: 600; }


#secretBtn {
  position: fixed;
  bottom: 12px;
  right: 12px;
  opacity: 0.15;
  font-size: 20px;
  background: none;
  border: none;
  cursor: pointer;
}

#secretBtn:hover {
  opacity: 0.6;
}