:root{
      --bg:#000000;
      --panel:#eef0f4; /* fondo de .main: gris neutro, sin tinte azul, para no chocar con las tarjetas blancas ni con la barra lateral oscura */
      --panel2:rgba(121, 130, 156, 0.634);
      --text:#000000;
      --muted:#6b7280;

      /* Marca PaySuite: azul corporativo + negro/blanco (del logo), sin degradados de dos tonos */
      --pink:#2F5FE0;
      --purple:#17399c;
      --rose:#4C7CFF;

      --ok:#16a34a;
      --warn:#d97706;
      --danger:#dc2626;

      --border:rgba(20, 24, 36, .12);
      --shadow: 0 12px 32px rgba(8, 12, 30, .14);
      --shadow2: 0 8px 20px rgba(8, 12, 30, .09);

      --radius: 14px;
      --radius2: 10px;

      --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", "Noto Sans", "Liberation Sans", sans-serif;

      --focus: 0 0 0 4px rgba(47, 95, 224, 0.30);
    }

    *{ box-sizing:border-box; }
    html, body{ height:100%; }

    /* Scrollbar a juego con la marca (Chrome/Edge/Safari + Firefox) */
    *{ scrollbar-width: thin; scrollbar-color: rgba(47,95,224,.45) transparent; }
    *::-webkit-scrollbar{ width:10px; height:10px; }
    *::-webkit-scrollbar-track{ background:transparent; }
    *::-webkit-scrollbar-thumb{
      background-color: rgba(47,95,224,.45);
      border-radius:999px;
      border:2px solid transparent;
      background-clip:padding-box;
    }
    *::-webkit-scrollbar-thumb:hover{ background-color: rgba(47,95,224,.7); }
    *::-webkit-scrollbar-corner{ background:transparent; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  min-height:100vh;

  background:
    radial-gradient(900px 650px at 8% 6%, rgba(47,95,224,.10), transparent 60%),
    radial-gradient(750px 550px at 92% 18%, rgba(23,57,156,.12), transparent 60%),
    linear-gradient(160deg,#000000,#0a0e1a);

  background-attachment: fixed;
}

.app{
  width:100%;
  max-width:100%;
  margin:0;
  padding:16px;
  display:grid;
  grid-template-columns:300px 1fr;
  gap:16px;
}
@media (min-width:1600px){

.app{
grid-template-columns:340px 1fr;
gap:20px;
}

}
h1,h2,h3,h4{
color:white;
font-weight:800;
}
.discount-line{
  font-size: 12px;
  opacity: 0.85;
}
#reloadBtn{
  position:fixed;
  bottom:20px;
  right:20px;
  width:55px;
  height:55px;
  border-radius:50%;
  background:#16a34a;
  color:#fff;
  font-size:24px;
  border:none;
  cursor:pointer;
  z-index:9999;
  box-shadow:0 8px 20px rgba(0,0,0,.4);
}