.top-bar,body{align-items:center;display:flex}*{margin:0;padding:0;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif}:root{--primary-gradient:linear-gradient(135deg, #667eea 0%, #764ba2 100%);--border-radius-xl:40px;--border-radius-lg:20px;--border-radius-md:15px;--shadow-sm:0 2px 10px rgba(0, 0, 0, 0.05);--shadow-md:0 4px 15px rgba(0, 0, 0, 0.1);--shadow-lg:0 8px 25px rgba(0, 0, 0, 0.2);--color-primary:#667eea;--color-secondary:#764ba2;--color-text-dark:#1d1d1f;--color-text-light:#666;--color-background:#2d2d2d;--color-card:#3d3d3d;--color-white:#ffffff}body{min-height:100vh;justify-content:center;background:linear-gradient(135deg,#667eea 0,#764ba2 100%);padding:20px;color:#333}.iphone-container{width:100%;max-width:550px;background:#f5f5f7;border-radius:40px;padding:20px;box-shadow:0 8px 25px rgba(0,0,0,.2);position:relative;animation:.5s ease-out scaleIn}.top-bar{justify-content:space-between;padding:10px 0;margin-bottom:30px}.back-button,.refresh-button{width:40px;height:40px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.1);transition:.3s}.form-input,.icon-circle{transition:.3s cubic-bezier(.4, 0, .2, 1)}.back-button:hover{background:var(--color-primary);color:var(--color-white)}.page-title{font-size:24px;font-weight:700;color:#1d1d1f;flex:1;text-align:center;margin:0 15px}.refresh-button:hover{transform:rotate(45deg)}.content{padding:20px;background:#fff;border-radius:30px;margin-top:20px;animation:.6s ease-out fadeIn}.form-group{margin-bottom:25px;position:relative;animation:.6s ease-out backwards fadeIn}.form-group:first-child{animation-delay:.2s}.form-group:nth-child(2){animation-delay:.3s}.form-group label{display:block;margin-bottom:8px;color:#1d1d1f;font-size:14px;font-weight:600}.input-wrapper{position:relative;display:flex;align-items:center}.icon-circle,.remember-me{align-items:center;display:flex}.icon-circle{position:absolute;left:15px;width:36px;height:36px;background:#f7f7f5;border-radius:50%;justify-content:center;color:#667eea}.input-wrapper:focus-within .icon-circle{transform:scale(1.1);background:#667eea;color:#fff}#loginForm.loading::before,.profile-wrapper.loading::before{background:rgba(255,255,255,.7);inset:0;backdrop-filter:blur(4px)}.form-input{width:100%;padding:15px 15px 15px 60px;border:1px solid #e1e1e1;border-radius:15px;font-size:15px;background:#f9f9f9}.form-input:focus{outline:0;border-color:#667eea;background:#fff;box-shadow:0 0 0 4px rgba(102,126,234,.1);transform:translateY(-2px)}.password-toggle{position:absolute;right:15px;background:0 0;border:none;color:#666;cursor:pointer;padding:8px;transition:.2s}.password-toggle:hover{transform:scale(1.1)}.remember-forgot{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding:0 5px}.remember-me{gap:8px}.remember-me input[type=checkbox]{width:20px;height:20px;accent-color:#667eea;border:2px solid #667eea;border-radius:70%;transition:.3s}.remember-me input[type=checkbox]:hover{border-color:#764ba2;box-shadow:0 0 5px rgba(102,126,234,.5)}.remember-me input[type=checkbox]:checked{background-color:#667eea;border-color:#667eea}.remember-me label{color:#666;font-size:14px}.forgot-link{color:#667eea;text-decoration:none;font-size:14px;font-weight:600;transition:color .3s}.profile-wrapper.loading,.sign-in-btn{transition:.3s}.forgot-link:hover{color:#764ba2}.sign-in-btn{position:relative;width:100%;padding:15px;background:var(--color-primary);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;overflow:hidden}.divider,.register-link{text-align:center;font-size:14px}.sign-in-btn:hover{background:var(--color-secondary);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.15)}.sign-in-btn:active{transform:translateY(0)}.sign-in-btn .btn-loader,.sign-in-btn::after{top:50%;left:50%;transform:translate(-50%,-50%);position:absolute}.sign-in-btn .btn-text{display:inline-block;transition:.3s}.sign-in-btn .btn-loader{display:none;width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:.8s linear infinite spin}.sign-in-btn.loading{pointer-events:none;background:var(--color-secondary)}.sign-in-btn.loading .btn-text{opacity:0}.sign-in-btn.loading .btn-loader{display:block}.sign-in-btn::after{content:'';width:0;height:0;background:rgba(255,255,255,.2);border-radius:50%;opacity:0}#loginForm.loading,.profile-wrapper.loading{opacity:.8;pointer-events:none;filter:blur(1px);position:relative}.sign-in-btn:active::after{animation:.6s ease-out ripple}@keyframes ripple{0%{width:0;height:0;opacity:.5}100%{width:200%;height:200%;opacity:0}}.divider{display:flex;align-items:center;margin:30px 0;color:#666}.divider::after,.divider::before{content:'';flex:1;border-bottom:1px solid #e1e1e1}.divider span{margin:0 15px;color:#666;font-weight:500}.social-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:30px}.register-link{margin-top:20px;color:var(--color-text-light)}.register-link a{color:var(--color-primary);text-decoration:none;font-weight:500;transition:color .2s}.register-link a:hover{color:var(--color-secondary);text-decoration:underline}@media (max-width:480px){.iphone-container{border-radius:30px;padding:15px}.content{padding:15px}.page-title{font-size:20px}.social-buttons{gap:10px}.social-btn{height:45px}.social-btn img{width:20px;height:20px}}@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}.saved-profile{margin:20px 0;animation:.3s ease-out slideIn}.profile-wrapper{background:#f3f4f6;border-radius:var(--border-radius-lg);padding:16px;display:flex;align-items:center;gap:16px;cursor:pointer;transition:.2s;position:relative;user-select:none}.profile-wrapper:active{transform:scale(.98)}.profile-avatar{width:36px;height:36px;background:var(--primary-gradient);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.profile-avatar i{font-size:16px;color:var(--color-white)}.profile-info{flex:1;min-width:0}.profile-email{color:var(--color-text-dark);font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.remove-account-btn{width:20px;height:20px;border-radius:50%;background:#ef4444;color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s;padding:0;flex-shrink:0;position:relative;z-index:2}.profile-wrapper:hover .remove-account-btn{opacity:1;transform:scale(1)}#loginForm.loading::after,.profile-wrapper.loading::after,.sign-in-btn.loading::after{content:'';left:50%;transform:translate(-50%,-50%);top:50%}.remove-account-btn i{font-size:12px}.remove-account-btn:hover{background:#f11;transform:scale(1.1)}.remove-account-btn:active{transform:scale(.9)}@keyframes fadeInScale{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes slideIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.profile-wrapper.loading::before{content:'';position:absolute;border-radius:var(--border-radius-lg);z-index:1}.profile-wrapper.loading::after{position:absolute;width:30px;height:30px;border:3px solid var(--color-primary);border-radius:50%;border-top-color:transparent;z-index:2;box-shadow:0 0 15px rgba(102,126,234,.2)}#loginForm.loading::before{content:'';position:absolute;border-radius:15px;z-index:1}#loginForm.loading::after{position:absolute;width:40px;height:40px;border:4px solid var(--color-primary);border-radius:50%;border-top-color:transparent;z-index:2;box-shadow:0 0 20px rgba(102,126,234,.3)}#loginForm.loading::after,.profile-wrapper.loading::after{animation:.8s linear infinite spin,1.5s ease-in-out infinite alternate glow}@keyframes glow{from{box-shadow:0 0 5px var(--color-primary),0 0 10px var(--color-primary),0 0 15px var(--color-primary)}to{box-shadow:0 0 10px var(--color-primary),0 0 20px var(--color-primary),0 0 30px var(--color-primary)}}.sign-in-btn.loading{position:relative;color:transparent!important;background:linear-gradient(45deg,var(--color-primary),var(--color-secondary))!important;background-size:200% 200%!important;animation:2s infinite gradient;filter:blur(.5px)}.form-input.error,.sign-in-btn.error{animation:.5s cubic-bezier(.36,.07,.19,.97) both shake}.sign-in-btn.loading::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,.1);border-radius:12px;backdrop-filter:blur(4px);z-index:1}.sign-in-btn.loading::after{position:absolute;width:25px;height:25px;border:3px solid rgba(255,255,255,.5);border-radius:50%;border-top-color:#fff;animation:.8s linear infinite spin,1.5s ease-in-out infinite alternate buttonGlow;z-index:2}@keyframes buttonGlow{from{box-shadow:0 0 5px rgba(255,255,255,.5),0 0 10px rgba(255,255,255,.5)}to{box-shadow:0 0 10px rgba(255,255,255,.7),0 0 20px rgba(255,255,255,.7)}}@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}@keyframes rotate{from{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}@keyframes gradient{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}.profile-wrapper.loading .profile-avatar{animation:1.5s infinite pulse}@keyframes pulse{0%,100%{transform:scale(.95)}50%{transform:scale(1)}}.profile-wrapper:hover{background:#e5e7eb;transform:translateY(-1px);box-shadow:0 2px 4px rgba(0,0,0,.05)}.error-message{background:#fee2e2;color:#dc2626;padding:12px 16px 12px 40px;border-radius:8px;margin-bottom:20px;font-size:14px;display:none;animation:.3s ease-out slideDown;position:relative;line-height:1.5}.form-input.error{border-color:#dc2626!important}.sign-in-btn.error{background:#dc2626}@keyframes shake{0%,100%{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-4px)}20%,40%,60%,80%{transform:translateX(4px)}}@keyframes slideDown{from{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}.error-message::before{content:'\f071';font-family:'Font Awesome 6 Free';font-weight:900;position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#dc2626}