:root {
        --primary-color: #6c5ce7;
        --background-color: #ffffff;
        --text-color: #2d3436;
        --card-bg: #ffffff;
        --border-color: #e0e0e0;
      }

      .dark-mode {
        --primary-color: #7B4AE2;
        --background-color: #121212;
        --text-color: #e0e0e0;
        --card-bg: #1e1e1e;
        --border-color: #333333;
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      html, body {
        height: 100%;
        font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
        background-color: var(--background-color);
        overflow: hidden;
        transition: background-color 0.3s ease;
      }

      .splash-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
        animation: fadeIn 1.2s ease-in-out;
      }
     .loading-text {
        font-size: 1rem;
        opacity: 0.8;
        margin-top: 20px;
        animation: fadeInOut 1.5s infinite;
      }
      .dark-mode .loading-text{
        color: #e0e0e0;
      }
  @keyframes fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
      }
      
      @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.05); }
        100% { transform: scale(1); }
      }
      
      @keyframes fadeInOut {
        0%, 100% { opacity: 0.5; }
        50% { opacity: 1; }
      }
      .logo {
        width: 90px;
        height: 90px;
        background-color: var(--primary-color);
        border-radius: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 10px 25px rgba(108, 92, 231, 0.3);
        margin-bottom: 25px;
      }

      .logo i {
        font-size: 42px;
        color: white;
      }

      .app-title {
        font-size: 28px;
        font-weight: 600;
        color: var(--text-color);
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: scale(0.95);
        }
        to {
          opacity: 1;
          transform: scale(1);
        }
      }