:root {
  --bg:           #030508;
  --bg-1:         #070b10;
  --bg-2:         #0a1018;
  --bg-3:         #0f1825;
  --surface:      rgba(15, 24, 37, .8);
  --border:       rgba(0, 255, 136, .08);
  --border-hover: rgba(0, 255, 136, .22);
  --green:        #00ff88;
  --green-dim:    #00cc6a;
  --green-glow:   rgba(0, 255, 136, .15);
  --green-dark:   rgba(0, 255, 136, .06);
  --red:          #ff3355;
  --amber:        #ffaa00;
  --cyan:         #00d4ff;
  --text-1:       #e0ffe8;
  --text-2:       #7a9e8a;
  --text-3:       #3d5c47;
  --font-mono:    'JetBrains Mono', monospace;
  --font-display: 'Oxanium', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }

body {
  font-family: var(--font-mono);
  background: var(--bg);
  color: var(--text-1);
  cursor: default;
}

/* Scanlines */
body::before {
  content: '';
  position: fixed; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent, transparent 2px,
    rgba(0,0,0,.07) 2px, rgba(0,0,0,.07) 4px
  );
  pointer-events: none; z-index: 9999;
}

/* Noise */
body::after {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 9998; opacity: .5;
}

/* Grid */
.grid-bg {
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(0,255,136,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,136,.025) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none; z-index: 0;
}
.grid-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 40%, var(--bg) 100%);
}

/* Animations */
@keyframes fadeIn   { from { opacity: 0 } to { opacity: 1 } }
@keyframes fadeUp   { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: translateY(0) } }
@keyframes pulse    { 0%,100% { opacity: 1 } 50% { opacity: .4 } }
@keyframes blink    { 0%,100% { opacity: .2 } 50% { opacity: 1 } }
@keyframes scanLine { 0%,100% { opacity: 0; transform: scaleX(.3) } 50% { opacity: 1; transform: scaleX(1) } }
@keyframes bootUp   { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: translateY(0) } }
@keyframes msgIn    { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: translateY(0) } }

@media (max-width: 768px) {
  .sidebar { display: none !important; }
  .topbar-center { display: none !important; }
}

/* ── MOBILE FIXES ── */
@media (max-width: 600px) {
  /* Força altura real da viewport no mobile (evita corte pelo teclado) */
  html, body { height: 100%; height: -webkit-fill-available; }
  #app { height: 100dvh; }
}