/* app/assets/stylesheets/markdown.css */

.prose {
  color: #374151;
  max-width: none;
}

.prose h1 {
  color: #111827;
  font-weight: 800;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
}

.prose h2 {
  color: #0A7AFF;
  font-weight: 700;
  font-size: 1.875em;
  margin-top: 1.5em;
  margin-bottom: 1em;
  line-height: 1.3333333;
  padding-bottom: 0.5em;
  border-bottom: 2px solid rgba(10, 122, 255, 0.2);
}

.prose h3 {
  color: #1F2937;
  font-weight: 600;
  font-size: 1.5em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}

.prose h4 {
  color: #374151;
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}

.prose p {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  line-height: 1.75;
}

.prose strong {
  color: #111827;
  font-weight: 600;
}

.prose em {
  color: #4B5563;
  font-style: italic;
}

.prose ul,
.prose ol {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.625em;
}

.prose ul {
  list-style-type: disc;
}

.prose ol {
  list-style-type: decimal;
}

.prose li {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  padding-left: 0.375em;
}

.prose li::marker {
  color: #0A7AFF;
  font-weight: 600;
}

.prose blockquote {
  font-weight: 500;
  font-style: italic;
  color: #1F2937;
  border-left: 0.25rem solid #0A7AFF;
  quotes: "\201C""\201D""\2018""\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-left: 1em;
  background-color: rgba(10, 122, 255, 0.05);
  padding: 1em;
  padding-left: 1.5em;
  border-radius: 0.5rem;
}

.prose code {
  color: #7C3AED;
  font-weight: 600;
  font-size: 0.875em;
  background-color: rgba(124, 58, 237, 0.1);
  padding: 0.2em 0.4em;
  border-radius: 0.25rem;
  font-family: 'Monaco', 'Courier New', monospace;
}

.prose pre {
  color: #E5E7EB;
  background-color: #1F2937;
  overflow-x: auto;
  font-weight: 400;
  font-size: 0.875em;
  line-height: 1.7142857;
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  border-radius: 0.75rem;
  padding: 1.1428571em 1.1428571em;
  border: 1px solid #374151;
}

.prose pre code {
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

.prose table {
  width: 100%;
  table-layout: auto;
  text-align: left;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  line-height: 1.7142857;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid #E5E7EB;
}

.prose thead {
  background: linear-gradient(135deg, #0A7AFF 0%, #7C3AED 100%);
}

.prose thead th {
  color: white;
  font-weight: 600;
  vertical-align: bottom;
  padding: 0.8571429em 0.8571429em;
  border-bottom: none;
}

.prose tbody tr {
  border-bottom-width: 1px;
  border-bottom-color: #E5E7EB;
  background-color: white;
}

.prose tbody tr:nth-child(even) {
  background-color: #F9FAFB;
}

.prose tbody tr:hover {
  background-color: rgba(10, 122, 255, 0.05);
}

.prose tbody td {
  vertical-align: baseline;
  padding: 0.8571429em 0.8571429em;
}

.prose a {
  color: #0A7AFF;
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid rgba(10, 122, 255, 0.3);
  transition: all 0.2s;
}

.prose a:hover {
  color: #0559CC;
  border-bottom-color: #0559CC;
}

.prose hr {
  border-color: rgba(10, 122, 255, 0.2);
  margin-top: 3em;
  margin-bottom: 3em;
  border-top-width: 2px;
}

/* Destaque para números e métricas */
.prose strong:has(+ em),
.prose strong em {
  color: #00D98E;
  font-size: 1.1em;
}

/* Estilo para listas aninhadas */
.prose ul ul,
.prose ul ol,
.prose ol ul,
.prose ol ol {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

/* Estilo para del (texto riscado) */
.prose del {
  color: #9CA3AF;
  text-decoration: line-through;
}

/* Dark Mode Styles for Markdown Content */
.markdown-content {
  color: #D1D5DB;
  max-width: none;
}

.markdown-content h1 {
  color: #FFFFFF;
  font-weight: 700;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
}

.markdown-content h2 {
  color: #60A5FA;
  font-weight: 600;
  font-size: 1.875em;
  margin-top: 1.5em;
  margin-bottom: 1em;
  line-height: 1.3333333;
  padding-bottom: 0.5em;
  border-bottom: 2px solid rgba(96, 165, 250, 0.2);
}

.markdown-content h3 {
  color: #E5E7EB;
  font-weight: 600;
  font-size: 1.5em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}

.markdown-content h4 {
  color: #D1D5DB;
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}

.markdown-content p {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  line-height: 1.75;
  color: #D1D5DB;
}

.markdown-content strong {
  color: #FFFFFF;
  font-weight: 600;
}

.markdown-content em {
  color: #9CA3AF;
  font-style: italic;
}

.markdown-content ul,
.markdown-content ol {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.625em;
}

.markdown-content ul {
  list-style-type: disc;
}

.markdown-content ol {
  list-style-type: decimal;
}

.markdown-content li {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  padding-left: 0.375em;
  color: #D1D5DB;
}

.markdown-content li::marker {
  color: #60A5FA;
  font-weight: 600;
}

.markdown-content blockquote {
  font-weight: 500;
  font-style: italic;
  color: #E5E7EB;
  border-left: 0.25rem solid #60A5FA;
  quotes: "\201C""\201D""\2018""\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-left: 1em;
  background-color: rgba(96, 165, 250, 0.1);
  padding: 1em;
  padding-left: 1.5em;
  border-radius: 0.5rem;
}

.markdown-content code {
  color: #C084FC;
  font-weight: 600;
  font-size: 0.875em;
  background-color: rgba(192, 132, 252, 0.15);
  padding: 0.2em 0.4em;
  border-radius: 0.25rem;
  font-family: 'Monaco', 'Courier New', monospace;
}

.markdown-content pre {
  color: #E5E7EB;
  background-color: rgba(0, 0, 0, 0.3);
  overflow-x: auto;
  font-weight: 400;
  font-size: 0.875em;
  line-height: 1.7142857;
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  border-radius: 0.75rem;
  padding: 1.1428571em 1.1428571em;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.markdown-content pre code {
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

.markdown-content table {
  width: 100%;
  table-layout: auto;
  text-align: left;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  line-height: 1.7142857;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.markdown-content thead {
  background: linear-gradient(135deg, #0A7AFF 0%, #7C3AED 100%);
}

.markdown-content thead th {
  color: white;
  font-weight: 600;
  vertical-align: bottom;
  padding: 0.8571429em 0.8571429em;
  border-bottom: none;
}

.markdown-content tbody tr {
  border-bottom-width: 1px;
  border-bottom-color: rgba(255, 255, 255, 0.1);
  background-color: rgba(255, 255, 255, 0.02);
}

.markdown-content tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.04);
}

.markdown-content tbody tr:hover {
  background-color: rgba(10, 122, 255, 0.1);
}

.markdown-content tbody td {
  vertical-align: baseline;
  padding: 0.8571429em 0.8571429em;
  color: #D1D5DB;
}

.markdown-content a {
  color: #60A5FA;
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid rgba(96, 165, 250, 0.3);
  transition: all 0.2s;
}

.markdown-content a:hover {
  color: #93C5FD;
  border-bottom-color: #93C5FD;
}

.markdown-content hr {
  border-color: rgba(96, 165, 250, 0.2);
  margin-top: 3em;
  margin-bottom: 3em;
  border-top-width: 2px;
}

/* Destaque para números e métricas em dark mode */
.markdown-content strong:has(+ em),
.markdown-content strong em {
  color: #34D399;
  font-size: 1.1em;
}

/* Estilo para listas aninhadas */
.markdown-content ul ul,
.markdown-content ul ol,
.markdown-content ol ul,
.markdown-content ol ol {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

/* Estilo para del (texto riscado) */
.markdown-content del {
  color: #6B7280;
  text-decoration: line-through;
}
/**
 * Paleta de Cores - Autoridade Premium (Tema Escuro)
 * IgSpy - Instagram Analysis System
 * 
 * Sistema de cores estratégico para transmitir:
 * - Autoridade e Confiança
 * - Modernidade e Tecnologia
 * - Conhecimento e Desenvolvimento
 * - Prosperidade e Sucesso
 */

:root {
  /* ========================================
     CORES PRIMÁRIAS (Autoridade Premium)
     ======================================== */
  
  /* Azul Profundo - Cor principal de autoridade e confiança */
  --color-primary: #0A7AFF;
  --color-primary-light: #3B9EFF;
  --color-primary-lighter: #6CB3FF;
  --color-primary-dark: #0559CC;
  --color-primary-darker: #033D99;
  
  /* Verde Esmeralda - Crescimento e prosperidade */
  --color-secondary: #00D98E;
  --color-secondary-light: #1FE5A0;
  --color-secondary-lighter: #3FFAB2;
  --color-secondary-dark: #00A86B;
  --color-secondary-darker: #007A52;
  
  /* ========================================
     CORES DE DESTAQUE
     ======================================== */
  
  /* Ouro Clássico - Exclusividade e sucesso */
  --color-accent-gold: #FFD700;
  --color-accent-gold-light: #FFE135;
  --color-accent-gold-lighter: #FFED4E;
  --color-accent-gold-dark: #DAA520;
  --color-accent-gold-darker: #B8860B;
  
  /* ========================================
     CORES NEUTRAS
     ======================================== */
  
  /* Branco Puro - Clareza e simplicidade */
  --color-white: #FFFFFF;
  --color-white-soft: #F9FAFB;
  --color-white-muted: #F4F4F4;
  
  /* Preto Carbono - Sofisticação e elegância */
  --color-black: #1C1C1C;
  --color-black-soft: #2A2A2A;
  --color-black-pure: #000000;
  
  /* Cinzas - Equilíbrio e profissionalismo (adaptadas para tema escuro) */
  --color-gray-50: #F9FAFB;
  --color-gray-100: #F3F4F6;
  --color-gray-200: #E5E7EB;
  --color-gray-300: #D1D5DB;
  --color-gray-400: #9CA3AF;
  --color-gray-500: #6B7280;
  --color-gray-600: #4B5563;
  --color-gray-700: #374151;
  --color-gray-800: #1F2937;
  --color-gray-900: #111827;
  
  /* Cinzas escuros para tema dark */
  --color-dark-bg: #0F1419;
  --color-dark-bg-secondary: #1A1F2E;
  --color-dark-bg-tertiary: #252D3D;
  --color-dark-border: #3A4452;
  --color-dark-text: #E5E7EB;
  --color-dark-text-secondary: #A1A5B0;
  
  /* ========================================
     CORES SEMÂNTICAS
     ======================================== */
  
  /* Sucesso - Ações positivas e confirmações */
  --color-success: #10B981;
  --color-success-light: #34D399;
  --color-success-dark: #059669;
  
  /* Aviso - Alertas e informações importantes */
  --color-warning: #F59E0B;
  --color-warning-light: #FBBF24;
  --color-warning-dark: #D97706;
  
  /* Erro - Mensagens de erro e ações destrutivas */
  --color-error: #FF6B6B;
  --color-error-light: #FF8787;
  --color-error-dark: #E03131;
  
  /* Informação - Mensagens informativas */
  --color-info: #3B82F6;
  --color-info-light: #60A5FA;
  --color-info-dark: #2563EB;
  
  /* ========================================
     CORES DE FUNDO (TEMA ESCURO)
     ======================================== */
  
  --bg-primary: #0F1419;
  --bg-secondary: #1A1F2E;
  --bg-tertiary: #252D3D;
  --bg-dark: #0A0E14;
  --bg-darker: #000000;
  --bg-card: #16161F;
  
  /* ========================================
     CORES DE TEXTO (TEMA ESCURO)
     ======================================== */
  
  --text-primary: #E5E7EB;
  --text-secondary: #A1A5B0;
  --text-tertiary: #7A7F8A;
  --text-inverse: #0F1419;
  --text-link: #0A7AFF;
  --text-link-hover: #3B9EFF;
  --text-muted: #6B6B7B;
  
  /* ========================================
     CORES DE BORDA (TEMA ESCURO)
     ======================================== */
  
  --border-light: #3A4452;
  --border-medium: #4A5562;
  --border-dark: #5A6572;
  --border-primary: #0A7AFF;
  --border-secondary: #00D98E;
  --border-color: rgba(255, 255, 255, 0.08);
  
  /* ========================================
     CORES DE BOTÕES (CTAs)
     ======================================== */
  
  /* Botão Primário - Ações principais */
  --btn-primary-bg: #0A7AFF;
  --btn-primary-bg-hover: #3B9EFF;
  --btn-primary-text: #FFFFFF;
  --btn-primary-border: #0A7AFF;
  
  /* Botão Secundário - Ações alternativas */
  --btn-secondary-bg: #00D98E;
  --btn-secondary-bg-hover: #1FE5A0;
  --btn-secondary-text: #0F1419;
  --btn-secondary-border: #00D98E;
  
  /* Botão de Destaque - Ações urgentes ou premium */
  --btn-accent-bg: #FFD700;
  --btn-accent-bg-hover: #FFE135;
  --btn-accent-text: #0F1419;
  --btn-accent-border: #FFD700;
  
  /* Botão Outline - Ações secundárias com borda */
  --btn-outline-bg: transparent;
  --btn-outline-bg-hover: #0A7AFF;
  --btn-outline-text: #0A7AFF;
  --btn-outline-text-hover: #FFFFFF;
  --btn-outline-border: #0A7AFF;
  
  /* ========================================
     OPACIDADES E OVERLAYS
     ======================================== */
  
  --overlay-light: rgba(15, 20, 25, 0.5);
  --overlay-medium: rgba(15, 20, 25, 0.7);
  --overlay-dark: rgba(15, 20, 25, 0.9);
  
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.4);
  
  /* ========================================
     GRADIENTES (TEMA ESCURO)
     ======================================== */
  
  --gradient-primary: linear-gradient(135deg, #0A7AFF 0%, #3B9EFF 100%);
  --gradient-secondary: linear-gradient(135deg, #00D98E 0%, #1FE5A0 100%);
  --gradient-premium: linear-gradient(135deg, #0A7AFF 0%, #FFD700 100%);
  --gradient-success: linear-gradient(135deg, #00D98E 0%, #10B981 100%);
  --gradient-tech: linear-gradient(135deg, #0A7AFF 0%, #6366F1 50%, #22D3EE 100%);
  --accent-gradient: linear-gradient(135deg, #0A7AFF 0%, #7C3AED 100%);
  
  /* ========================================
     EFEITOS ESPECIAIS
     ======================================== */
  
  --accent-glow: 0 0 30px rgba(10, 122, 255, 0.3);
  --radius: 12px;
  --radius-lg: 20px;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   CLASSES UTILITÁRIAS
   ======================================== */

/* Cores de Texto */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-accent { color: var(--color-accent-gold); }
.text-white { color: var(--color-white); }
.text-black { color: var(--color-black); }
.text-muted { color: var(--text-secondary); }

/* Cores de Fundo */
.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-accent { background-color: var(--color-accent-gold); }
.bg-white { background-color: var(--color-white); }
.bg-black { background-color: var(--color-black); }
.bg-gray-light { background-color: var(--color-gray-100); }

/* Gradientes */
.bg-gradient-primary { background: var(--gradient-primary); }
.bg-gradient-secondary { background: var(--gradient-secondary); }
.bg-gradient-premium { background: var(--gradient-premium); }
.bg-gradient-tech { background: var(--gradient-tech); }

/* Bordas */
.border-primary { border-color: var(--color-primary); }
.border-secondary { border-color: var(--color-secondary); }
.border-accent { border-color: var(--color-accent-gold); }
.border-light { border-color: var(--border-light); }

/* Sombras */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *



 */

/* Force dark background */
html, body {
  background-color: #0F1419 !important;
  color: #E5E7EB !important;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

/* Landing Page Styles */
.glass {
  background: rgba(22, 22, 31, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.gradient-border {
  position: relative;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, #00D98E 0%, #0A7AFF 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Animations */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(0, 217, 142, 0.3); }
  50% { box-shadow: 0 0 40px rgba(0, 217, 142, 0.6); }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-fade-up {
  animation: fade-up 0.6s ease-out forwards;
  opacity: 0;
}

.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}