/* ==========================================================================
   STOCKMASTER - STYLE CONNEXION PREMIUM COMPLET
   ========================================================================== */

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

body, html {
    width: 100%; height: 100vh;
    background-color: #0b1120;
    font-family: 'Inter', sans-serif;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; color: white;
}

/* --- BOUTON RETOUR VITRINE --- */
.btn-back-home {
    position: absolute; 
    top: 30px; 
    left: 40px;
    color: rgba(255, 255, 255, 0.7); 
    text-decoration: none;
    display: flex; 
    align-items: center; 
    gap: 10px; 
    font-weight: 600;
    background: rgba(255, 255, 255, 0.05); 
    padding: 10px 24px;
    border-radius: 100px; 
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    z-index: 50;
}

.btn-back-home:hover {
    color: #ffffff; 
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(-5px);
    border-color: rgba(255, 255, 255, 0.2);
}

@media (max-width: 576px) {
    .btn-back-home { top: 15px; left: 15px; padding: 8px 16px; font-size: 0.85rem; }
}

/* --- EFFETS DE LUMIÈRE (ORBS) --- */
.orb {
    position: absolute; width: 500px; height: 500px;
    border-radius: 50%; filter: blur(100px); opacity: 0.25; z-index: 0;
}
.orb-1 { background: #6366f1; top: -100px; left: -100px; }
.orb-2 { background: #8b5cf6; bottom: -200px; right: -200px; }

/* --- LOGO --- */
.logo-box {
    background: linear-gradient(135deg, #6366f1, #8b5cf6); 
    width: 60px; height: 60px; border-radius: 15px; 
    display: flex; align-items: center; justify-content: center; 
    margin: 0 auto 15px; 
    box-shadow: 0 10px 20px rgba(99, 102, 241, 0.3);
}

/* --- CARTE LOGIN GLASSMORPHISM --- */
.login-wrapper { position: relative; z-index: 10; width: 100%; max-width: 400px; padding: 20px; text-align: center; }

.login-card {
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px; padding: 40px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* --- INPUTS --- */
.input-box { position: relative; margin-bottom: 20px; text-align: left; }
.input-box i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #94a3b8; }
.input-box input {
    width: 100%; padding: 15px 15px 15px 45px;
    background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px; color: white; outline: none; transition: 0.3s;
}
.input-box input:focus { border-color: #6366f1; background: rgba(15, 23, 42, 0.8); }

/* --- BOUTON CONNEXION --- */
.btn-connect {
    width: 100%; padding: 15px; background: #6366f1; border: none;
    border-radius: 12px; color: white; font-weight: 700; font-size: 16px;
    cursor: pointer; transition: 0.3s;
}
.btn-connect:hover { 
    background: #4f46e5; transform: translateY(-2px); 
    box-shadow: 0 10px 20px rgba(99, 102, 241, 0.3); 
}

/* --- MODALE --- */
.modal-content { border-radius: 24px; color: #1e293b; border: none; overflow: hidden; }