/* 
  ========================================
  VARIÁVEIS GLOBAIS DE CORES
  ========================================
  Configuração global solicitada. Altere os códigos HEX aqui 
  para que as cores sejam atualizadas em todas as telas automaticamente.
*/
:root {
    /* Identidade Visual Principal (Ziexy) */
    --ziexy-light: #a78bfa;
    --ziexy-main: #7C3AED;   /* Roxo principal */
    --ziexy-dark: #5B21B6;
    --ziexy-glow: #8b5cf6;

    /* Fundos e Bases */
    --darkbase: #030014;     /* Fundo quase preto do Dark Mode */
}

/* 
  ========================================
  BASE E RESET
  ========================================
  Suavização de fontes para melhor legibilidade em telas de alta resolução.
*/
body { 
    -webkit-font-smoothing: antialiased; 
}

/* 
  ========================================
  AURORA BACKGROUND (Apenas Dark Mode)
  ========================================
  Controla o efeito de fundo animado "Aurora Borealis".
*/
.aurora-container {
    display: none; /* Escondido por padrão (Light Mode) */
    position: fixed;
    inset: 0;
    z-index: -1;
    background-color: var(--darkbase);
    overflow: hidden;
}
.dark .aurora-container { 
    display: block; /* Visível no Dark Mode */
}

/* Bolhas de luz que compõem a Aurora */
.aurora-blob {
    position: absolute;
    filter: blur(120px); /* Desfoque alto para criar efeito de luz espalhada */
    opacity: 0.5;
    border-radius: 50%;
}
/* Posicionamento e cores específicas de cada bolha de luz */
.blob-1 { top: -20%; left: -10%; width: 60vw; height: 60vw; background: rgba(124, 58, 237, 0.4); } /* Roxo Ziexy */
.blob-2 { bottom: -20%; right: -10%; width: 50vw; height: 50vw; background: rgba(79, 70, 229, 0.4); } /* Índigo */
.blob-3 { top: 30%; left: 40%; width: 40vw; height: 40vw; background: rgba(139, 92, 246, 0.3); } /* Violeta */

/* 
  ========================================
  GLASSMORPHISM (Cards Translúcidos)
  ========================================
*/
/* Estilo Dark: Fundo muito escuro, translúcido e com bordas reflexivas */
.dark .glass-card {
    background: rgba(15, 23, 42, 0.4); 
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
}

/* Estilo Light: Design flat tradicional (fundo branco, sombra suave) */
.glass-card {
    background: #ffffff;
    border: 1px solid #caccce;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

/* 
  ========================================
  CARDS ESPECIAIS (Ex: Licença)
  ========================================
  Efeito holográfico/gradiente para destacar elementos importantes.
*/
.dark .holo-card {
    background: linear-gradient(135deg, rgba(124,58,237,0.2) 0%, rgba(15,23,42,0.8) 100%);
    border: 1px solid rgba(124,58,237,0.3);
    box-shadow: 0 0 20px rgba(124,58,237,0.15), inset 0 0 20px rgba(124,58,237,0.1);
}
.holo-card {
    background: linear-gradient(135deg, #f3e8ff 0%, #ffffff 100%);
    border: 1px solid #e9d5ff;
}

/* 
  ========================================
  CUSTOM SCROLLBAR
  ========================================
  Personaliza a barra de rolagem do navegador para combinar com o app.
*/
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); }
.dark ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* 
  ========================================
  UTILITÁRIOS TEXTUAIS E ANIMAÇÕES
  ========================================
*/
/* Cria texto com preenchimento em gradiente */
.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.dark .text-gradient-primary { background-image: linear-gradient(to right, #c4b5fd, #a78bfa); }
.text-gradient-primary { background-image: linear-gradient(to right, #6d28d9, #4c1d95); }

/* Brilho da bolinha indicadora de status (Sistema Online) */
.status-dot {
    box-shadow: 0 0 12px currentColor;
}

/* Animação suave para carregamento das telas */
.animate-fade-in {
    animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 
  ========================================
  NOVO DESIGN DE CARDS (SAAS PREMIUM)
  ========================================
*/
.plan-card {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
    transform: translateY(0);
}

/* Hover em cards inativos */
.plan-card:not(.active):hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
}
.dark .plan-card:not(.active):hover {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
}