style.css

:root{
  --bg:#0b1220;
  --panel:#0f1a2b;
  --panel2:#101f35;
  --border:rgba(255,255,255,.08);
  --text:#e8eefc;
  --muted:rgba(232,238,252,.65);
  --muted2:rgba(232,238,252,.45);
  --accent:#4ea1ff;
  --accent2:#7dd3fc;
  --danger:#ff6b6b;
  --ok:#2ee59d;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius:16px;
  --radius2:22px;
  --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";
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}

/* Body background */
body {
  background: radial-gradient(1200px 600px at 40% 20%, rgba(78,161,255,.12), transparent 60%),
              radial-gradient(900px 500px at 80% 10%, rgba(125,211,252,.08), transparent 55%),
              var(--bg);
}

/* Responsive adjustments */
@media (max-width: 1100px){
  body{ overflow:auto; }
  .app{ grid-template-columns: 1fr; height:auto; overflow:auto; }
  .card{ min-height: 320px; }
}