* { box-sizing: border-box; } body { font-family: 'Muli-Regular', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 20px; display: flex; justify-content: center; align-items: center; min-height: 100vh; color: #333; } .loader-container { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-radius: 20px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); padding: 40px 30px; text-align: center; max-width: 400px; width: 100%; border: 1px solid rgba(255, 255, 255, 0.2); } .logo { margin-bottom: 20px; } .logo img { max-width: 200px; width: 100%; height: auto; filter: brightness(0.8); transition: filter 0.3s ease; } .spinner { width: 50px; height: 50px; border: 4px solid rgba(0, 0, 0, 0.2); border-top-color: #000000; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 20px; } @keyframes spin { to { transform: rotate(360deg); } } .message { font-size: 18px; color: #555; margin-bottom: 30px; font-weight: 300; } .button-container { display: flex; flex-direction: column; gap: 15px; } .open-app-button { background: #FA7268; color: white; text-decoration: none; padding: 16px 32px; border-radius: 12px; font-size: 16px; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3); border: none; text-transform: uppercase; letter-spacing: 0.5px; } .open-app-button:active { transform: translateY(0); } .help-link { background: transparent; color: #000000; text-decoration: none; padding: 12px 20px; border-radius: 8px; font-size: 14px; transition: all 0.3s ease; border: 2px solid rgba(0, 0, 0, 0.3); font-weight: 500; } /* Mobile responsiveness */ @media (max-width: 480px) { body { padding: 15px; } .logo img { max-width: 160px; } .loader-container { padding: 30px 20px; border-radius: 16px; } .logo { font-size: 24px; } .message { font-size: 16px; } .open-app-button { padding: 14px 24px; font-size: 15px; } .help-link { font-size: 13px; padding: 10px 16px; } } @media (max-width: 320px) { .loader-container { padding: 25px 15px; } .open-app-button { padding: 12px 20px; font-size: 14px; } } /* Tablet styles */ @media (min-width: 768px) and (max-width: 1024px) { .loader-container { max-width: 450px; padding: 50px 40px; } } /* Accessibility improvements */ @media (prefers-reduced-motion: reduce) { .spinner { animation: none; } .open-app-button, .help-link { transition: none; } .open-app-button:hover { transform: none; } .help-link:hover { transform: none; } }