i {
    margin: 0px 8px;
}

/* Reset de focus - sem bordas azuis */
*:focus,
*:focus-visible,
*:focus-within,
.form-control:focus,
.form-select:focus,
.btn:focus,
input:focus,
textarea:focus,
select:focus,
button:focus,
a:focus {
    outline: none !important;
    box-shadow: none !important;
}

* {
    outline: none !important;
}



:root {
  /* Cores principais baseadas na imagem */
  --bg-primary: #0f1419;
  --bg-secondary: #1a202c;
  /* --bg-card: #1e2532; */
  --bg-card: #171c26;
  --bg-hover: #2a3441;

  /* Cores de destaque */
  --purple: #8b5cf6;
  --purple-light: #a78bfa;
  --blue: #06b6d4;
  --blue-light: #22d3ee;

  --purple-dark: #7c3aed;


  --red-dark: #c53030;
  --red: #ef4444;
  --red-light: #f87171;

  /* Cores de texto */
  --text-primary: #ffffff;
  --text-secondary: #9ca3af;
  --text-primary-2: #e5e7eb;
  --text-muted: #6b7280;

  /* Cores de status */
  --success: #10b981;
  --success-2: #059669;
  --success-bg: rgba(16, 185, 129, 0.1);
  --danger: #ef4444;
  --danger-bg: rgba(239, 68, 68, 0.1);

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);

  /* Bordas */
  --border-radius: 12px;
  --border-radius-lg: 16px;

  --bg-primary: #11151d;

  --bg-secondary: #141920;
}


.app-main {
  min-height: 100vh;
  background: var(--bg-primary);
  padding: 24px;
}