/* === LOGIN & REGISTER SCREEN === */

#login-screen.screen,
#register-screen.screen,
#email-verification-screen.screen {
    justify-content: center;
}

.login-container { 
    background-color: rgba(10, 15, 30, 0.85); /* Làm nền tối hơn một chút */
    backdrop-filter: blur(10px); 
    border: none; /* Bỏ viền cũ */
    border-radius: 12px; /* Bo tròn để khớp với viền điện tử */
    padding: 2rem; 
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7); /* Shadow mạnh hơn */
    width: 100%; 
    max-width: 450px; 
    transition: opacity 0.5s, transform 0.5s; 
    text-align: center;
    
    position: relative; /* Bắt buộc để dùng ::before/::after */
    z-index: 1;
    isolation: isolate;

    /* Thêm góc cắt vát (Beveled corners) */
    clip-path: polygon(
        0% 15px, 15px 0%, 
        calc(100% - 15px) 0%, 100% 15px, 
        100% calc(100% - 15px), calc(100% - 15px) 100%, 
        15px 100%, 0% calc(100% - 15px)
    );
}
/* Lớp AURA (Glow mờ bên ngoài)*/
.login-container::before {
    content: '';
    position: absolute;
    inset: -3px; /* Nằm bên ngoài */
    border-radius: inherit;
    background: conic-gradient(
        from 90deg,
        rgba(0, 229, 255, 0.8), /* Cyan */
        rgba(168, 85, 247, 0.6), /* Purple */
        rgba(0, 229, 255, 0.8)
    );
    filter: blur(15px);
    opacity: 0.8;
    z-index: -1;
}

/* Lớp NEON (Viền sắc nét bên trong)*/
.login-container::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px; /* Độ dày viền */
    background: linear-gradient(135deg, 
        rgba(0, 229, 255, 1) 0%, 
        rgba(168, 85, 247, 1) 50%, 
        rgba(0, 229, 255, 1) 100%
    );
    background-size: 200% 200%;
    animation: electric-flow 4s linear infinite; /* Animation viền chạy */
    
    /* Kỹ thuật masking để chỉ hiển thị viền */
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    pointer-events: none;
}

/* Keyframe cho viền chạy (nếu chưa có) */
@keyframes electric-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.login-container.is-animating { 
    opacity: 0; 
    transform: scale(0.9); 
}

.login-slogan { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 1rem; 
    font-size: 1.25rem; 
    font-weight: 700; 
    color: var(--color-text-secondary); 
    text-transform: uppercase; 
}

.slogan-line { 
    height: 1px; 
    width: 50px; 
    background: var(--color-border); 
}

/* Căn chỉnh lại font-title cho vừa với container */
.login-container .font-title {
    white-space: nowrap;
    font-size: clamp(1.8rem, 7vw, 2.5rem);
}