body.tt-login-body {
    font-family: 'Segoe UI', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    overflow: hidden;
    color: var(--text-color);
}

/* Thèmes */
body.bg-cosmique { background: radial-gradient(circle, #1a0b2e, #05010a); }
body.bg-sombre { background: #000; }
body.bg-clair { background: #f4f7f6; }

/* Conteneur Parent (L'Ancrage) */
.login-wrapper { 
    position: relative; 
    z-index: 10; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.magic-form {
    position: relative;
    z-index: 2; /* S'assure que le formulaire est AU-DESSUS des cercles */
    padding: 3rem;
    border-radius: var(--radius);
    background: var(--form-bg);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 350px;
    box-sizing: border-box;
}

.magic-form h1 { text-align: center; color: var(--text-color); text-shadow: 0 0 10px var(--primary); margin-top: 0; }
label { color: var(--text-color); font-size: 0.8rem; }
input { 
    width: 100%; padding: 10px; margin-top: 5px; background: rgba(0,0,0,0.2); 
    border: 1px solid rgba(255,255,255,0.2); color: var(--text-color); border-radius: 5px;
    box-sizing: border-box;
}
input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 10px var(--primary); }

.crystal-btn {
    width: 100%; padding: 12px; margin-top: 20px; border: none; 
    background: var(--primary); color: #fff; cursor: pointer; border-radius: 5px;
    font-weight: bold; text-transform: uppercase; letter-spacing: 1px;
}

/* --- LES ANNEAUX MAGIQUES --- */
.portal-ring {
    position: absolute; 
    width: 480px; 
    height: 480px; 
    border-radius: 50%;
    border: 2px dashed var(--primary); 
    animation: spin-right 25s linear infinite; 
    pointer-events: none;
    opacity: 0.4;
    /* Centrage mathématique parfait */
    top: calc(50% - 240px);
    left: calc(50% - 240px);
    z-index: 1;
}

.portal-ring-inner {
    position: absolute; 
    width: 420px; 
    height: 420px; 
    border-radius: 50%;
    border-bottom: 2px solid var(--primary); 
    animation: spin-left 15s linear infinite; 
    pointer-events: none;
    opacity: 0.6;
    /* Centrage mathématique parfait */
    top: calc(50% - 210px);
    left: calc(50% - 210px);
    z-index: 1;
}

@keyframes spin-right { 100% { transform: rotate(360deg); } }
@keyframes spin-left { 100% { transform: rotate(-360deg); } }