*{margin:0;padding:0;box-sizing:border-box;font-family:'Montserrat Alternates',sans-serif}body{background:#0d0d0d;height:100vh;display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative;transition:background .3s ease}body.light-mode{background:#f0f0f0}.bg-gradient{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background-image:radial-gradient(circle 500px at 50% 300px,#424dfc,transparent)}body.light-mode .bg-gradient{background-image:radial-gradient(circle 500px at 50% 300px,#6d75fc,transparent)}.container{display:flex;gap:30px;align-items:center;justify-content:center;width:90%;max-width:900px;z-index:2;position:relative}.login-card{width:100%;max-width:420px;background:rgba(20,20,20,0.85);backdrop-filter:blur(18px);padding:28px;border-radius:25px;color:white;border:2px solid #1e1e1e;animation:fadeIn .8s ease-in-out;transition:all .3s ease}body.light-mode .login-card{background:rgba(255,255,255,0.85);color:#333;border:2px solid #e0e0e0}@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.desktop-features{width:100%;max-width:420px;background:rgba(20,20,20,0.85);backdrop-filter:blur(18px);padding:28px;border-radius:25px;color:white;border:2px solid #1e1e1e;animation:fadeIn .8s ease-in-out .2s both;transition:all .3s ease}body.light-mode .desktop-features{background:rgba(255,255,255,0.85);color:#333;border:2px solid #e0e0e0}.desktop-features h3{font-size:22px;margin-bottom:20px;text-align:center;font-weight:700}.features-list{display:flex;flex-direction:column;gap:15px}.feature-item{display:flex;align-items:center;gap:12px;padding:12px;background:#131f22;color:white;border:2px solid #202f36;border-radius:16px;transition:all .3s ease}body.light-mode .feature-item{background:white;color:#323232;font-weight:600;border:2px solid #e0e0e0}.feature-item:hover{transform:translateX(5px)}.feature-item i{color:#424dfc;font-size:20px;width:24px}.feature-item span{font-size:14px;font-weight:500}.logo-container{display:flex;align-items:center;gap:12px;margin-bottom:15px}.logo{width:50px;transition:filter .3s ease}body.light-mode .logo{filter:brightness(0.2)}.logo-text{font-size:24px;font-weight:700;color:white;transition:color .3s ease}body.light-mode .logo-text{color:#333}h2{font-size:26px;margin-bottom:6px;font-weight:700}p{font-size:15px;margin-bottom:22px;opacity:.8}.btn{width:100%;padding:14px;border-radius:16px;font-size:16px;border:0;cursor:pointer;margin-bottom:16px;transition:all .3s ease;position:relative;overflow:hidden;text-decoration:none;display:block;text-align:center}.btn:active{transform:scale(0.98)}.btn-primary{background:white;color:#323232;font-weight:600;border:2px solid #e0e0e0;box-shadow:0 3px 0 #e0e0e0}body.light-mode .btn-primary{background:#424dfc;color:white;border:2px solid #6d75fc;box-shadow:0 3px 0 #6d75fc}body.light-mode .btn-primary:hover{background:#424dfc;transform:translate(0,3px);border:2px solid #6d75fc;box-shadow:none}.btn-primary:hover{background-color:#fff;transform:translate(0,3px);border:2px solid #e0e0e0;box-shadow:none}.btn-dark{background:#131f22;color:white;border:2px solid #202f36;box-shadow:0 3px 0 #202f36}body.light-mode .btn-dark{background:#ecf0f1;color:#131f22;font-weight:bold;border:2px solid #bdc3c7;box-shadow:0 3px 0 #bdc3c7}body.light-mode .btn-dark:hover{background:#ecf0f1;transform:translate(0,3px);border:2px solid #bdc3c7;box-shadow:none}.btn-dark:hover{background-color:#131f22;transform:translate(0,3px);border:2px solid #202f36;box-shadow:none}body.light-mode .btn:active::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,0.3);border-radius:16px;animation:clickEffect .3s ease-out}@keyframes clickEffect{0{transform:scale(0);opacity:1}100%{transform:scale(2);opacity:0}}.grid-btn{display:grid;grid-template-columns:1fr 1fr;gap:12px}.icon-btn{background:#131f22;padding:14px;border-radius:18px;border:2px solid #202f36;box-shadow:0 3px 0 #202f36;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:.25s;text-decoration:none}.icon-btn img{width:20px}body.light-mode .icon-btn{background:#ecf0f1;border:2px solid #bdc3c7;box-shadow:0 3px 0 #bdc3c7}body.light-mode .icon-btn:hover{background:#ecf0f1;transform:translate(0,3px);border:2px solid #bdc3c7;box-shadow:none}.icon-btn:hover{background-color:#131f22;transform:translate(0,3px);border:2px solid #202f36;box-shadow:none}.icon-btn i{font-size:26px;transition:color .3s ease}.google-icon{color:#4285f4}.apple-icon{color:white}body.light-mode .apple-icon{color:#333}.close-btn{position:absolute;top:20px;right:20px;background:0;border:0;color:white;font-size:24px;cursor:pointer;transition:color .3s ease;z-index:4}body.light-mode .close-btn{color:#333}.close-btn:hover{color:#ff4757}.toggle{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;cursor:pointer;line-height:1;background:#131f22;border:2px solid #202f36;transition:all .3s ease}body.light-mode .toggle{background:#ecf0f1;border:2px solid #bdc3c7}.input{display:none}.icon{grid-column:1 / 1;grid-row:1 / 1;transition:transform 500ms;line-height:.1}.icon--moon{transition-delay:200ms;color:#b4b4b4}.icon--sun{transform:scale(0);color:orange}#switch:checked+.icon--moon{transform:rotate(360deg) scale(0)}#switch:checked ~ .icon--sun{transition-delay:200ms;transform:scale(1) rotate(360deg)}.theme-toggle{display:flex;align-items:center;justify-content:center;margin-top:20px;gap:15px}.theme-line{flex:1;height:1px;background:#202f36;transition:background .3s ease}body.light-mode .theme-line{background:#bdc3c7}.error-message{background:rgba(255,0,0,0.1);border:1px solid rgba(255,0,0,0.3);color:#ff6b6b;padding:12px;border-radius:12px;margin-bottom:16px;display:flex;align-items:center;gap:10px;animation:fadeIn .3s ease}body.light-mode .error-message{background:rgba(255,0,0,0.05);border:1px solid rgba(255,0,0,0.2);color:#e74c3c}.loading{display:none;justify-content:center;align-items:center;gap:10px;padding:12px;background:rgba(66,77,252,0.1);border:1px solid rgba(66,77,252,0.3);border-radius:12px;margin-bottom:16px;color:#424dfc}body.light-mode .loading{background:rgba(66,77,252,0.05);border:1px solid rgba(66,77,252,0.2)}@media(max-width:768px){.container{flex-direction:column}.desktop-features{display:none}}@media(min-width:769px){.desktop-features{display:block}}