/* ============================================================
   BASE — tokens de design (cores, tipografia, radius) e reset
   Por que separado: qualquer ajuste de paleta ou fonte do site
   inteiro (incluindo a nova trilha Python) mexe só neste arquivo,
   sem precisar procurar entre estilos de componentes.
   ============================================================ */
:root{
  --bg:#0B1220;
  --surface:#131C2E;
  --surface-2:#1A2740;
  --surface-3:#22304d;
  --border:#26314a;
  --text:#E7ECF5;
  --text-dim:#8A96AC;
  --text-faint:#5B6780;

  --sql:#38BDF8;
  --sql-dim:#38BDF826;
  --bi:#F5A623;
  --bi-dim:#F5A62326;
  --dax:#C084FC;
  --dax-dim:#C084FC26;
  --python:#3ECF8E;
  --python-dim:#3ECF8E26;
  --core:#2DD4BF;
  --core-dim:#2DD4BF26;

  --ok:#34D399;
  --err:#F87171;

  --radius:16px;
  --radius-sm:10px;
  --font-display:'Space Grotesk',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  background:
    radial-gradient(1200px 600px at 15% -10%, #16233c 0%, transparent 60%),
    radial-gradient(1000px 500px at 100% 0%, #14203a 0%, transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input,textarea{font-family:inherit;}
::selection{background:var(--core);color:#04211d;}
:focus-visible{outline:2px solid var(--core);outline-offset:2px;}
b{font-weight:700;}
pre{font-family:var(--font-mono);white-space:pre-wrap;background:var(--surface-2);padding:10px 12px;border-radius:8px;margin:8px 0;font-size:12.5px;color:#7dd3fc;overflow-x:auto;}
code{font-family:var(--font-mono);}
.hl{color:var(--core);font-weight:600;}

::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:8px;}

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

/* Spinner de carregamento (usado nas telas de IA e no motor Python/Pyodide).
   Era referenciado no HTML original mas nunca tinha uma regra CSS definida
   — corrigido aqui como parte da revisão de qualidade. */
.spinner{width:18px;height:18px;border:2.5px solid var(--surface-3);border-top-color:var(--core);border-radius:50%;animation:biquest-spin .7s linear infinite;flex-shrink:0;}
@keyframes biquest-spin{to{transform:rotate(360deg);}}