body { background: #38393c; color: #fff; font-family: 'Segoe UI', sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; padding: 20px; box-sizing: border-box; }
        .card { 
            background: <?= $tipo == 'error' ? '#f8d7da' : '#4b4c4f' ?>; 
            color: <?= $tipo == 'error' ? '#721c24' : '#fff' ?>;
            padding: 40px; border-radius: 10px; text-align: center; 
            box-shadow: 0 10px 25px rgba(0,0,0,0.5); 
            border: 1px solid <?= $tipo == 'error' ? '#f5c6cb' : '#83c4d6' ?>; 
            max-width: 450px; width: 100%;
        }
        h2 { margin-top: 0; color: <?= $tipo == 'error' ? '#842029' : '#83c4d6' ?>; }
        
        /* Spinner para Success */
        .spinner { 
            display: <?= $tipo == 'success' ? 'block' : 'none' ?>;
            border: 4px solid rgba(255,255,255,0.1); 
            border-top: 4px solid #83c4d6; 
            border-radius: 50%; width: 30px; height: 30px; 
            animation: spin 1s linear infinite; margin: 20px auto; 
        }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

        /* Botón para Error */
        .btn-retry { 
            display: <?= $tipo == 'error' ? 'inline-block' : 'none' ?>;
            background: #842029; color: white; padding: 12px 25px; 
            text-decoration: none; border-radius: 6px; font-weight: bold; 
            margin-top: 20px; cursor: pointer; border: none; font-size: 1rem;
        }
        .btn-retry:hover { background: #a5283