/* =====================================================
   IMPORTS — tipografia com personalidade
   DM Mono: técnica/monoespacial para dados
   Plus Jakarta Sans: display moderno e profissional para títulos
   Inter: legível para corpo
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@600;700;800&family=Inter:wght@400;500;600&display=swap');

/* =====================================================
   TOKENS
   ===================================================== */
:root {
  --ink:          #0b1120;
  --ink-2:        #0e1829;
  --ink-3:        #111f35;
  --surface:      #162033;
  --surface-2:    #1c2a42;
  --surface-3:    #243452;
  --grid:         rgba(99, 152, 230, 0.06);
  --border:       rgba(99, 152, 230, 0.14);
  --border-2:     rgba(99, 152, 230, 0.22);
  --text-primary:   #e8edf5;
  --text-secondary: #8fa3c0;
  --text-muted:     #4f6480;
  --text-accent:    #60a5fa;
  --accent:         #3b82f6;
  --accent-glow:    rgba(59, 130, 246, 0.2);
  --accent-bright:  #60a5fa;
  --success:        #34d399;
  --success-bg:     rgba(52, 211, 153, 0.08);
  --warning:        #fbbf24;
  --warning-bg:     rgba(251, 191, 36, 0.08);
  --danger:         #f87171;
  --danger-bg:      rgba(248, 113, 113, 0.08);
  --modified-bg:     #7a5c00;
  --modified-border: rgba(251, 191, 36, 0.3);
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'DM Mono', monospace;
  --radius:    12px;
  --radius-sm:  8px;
  --radius-xs:  6px;
  --t:      0.18s ease;
  --t-slow: 0.35s ease;
  --topbar-h: 80px;
}

/* =====================================================
   RESET
   ===================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  background: var(--ink);
  color: var(--text-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%,  rgba(37, 99, 235, 0.12) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 90% 100%, rgba(16, 185, 129, 0.07) 0%, transparent 70%);
  pointer-events: none;
}

.login-page,
.app-page {
  position: relative;
  z-index: 1;
}

/* =====================================================
   ANIMAÇÕES GLOBAIS
   ===================================================== */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes shake {
  0%, 100% { transform: translateX(0);   }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(5px);  }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(3px);  }
}

.shake { animation: shake 0.38s cubic-bezier(.36,.07,.19,.97); }