@layer pages{.member-container{justify-content:center;align-items:flex-start;padding:20px;display:flex;position:relative;overflow:hidden}.member-container:before{content:"";opacity:.4;background:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><defs><pattern id=\"loginGrid\" width=\"20\" height=\"20\" patternUnits=\"userSpaceOnUse\"><path d=\"M 20 0 L 0 0 0 20\" fill=\"none\" stroke=\"rgba(255,255,255,0.1)\" stroke-width=\"0.5\"/></pattern></defs><rect width=\"100\" height=\"100\" fill=\"url(%23loginGrid)\"/></svg>");position:absolute;inset:0}.member-container:after{content:"";background:radial-gradient(circle,#ffffff1a 0%,#0000 70%);border-radius:50%;width:400px;height:400px;animation:6s ease-in-out infinite floatingCircle1;position:absolute;top:10%;right:10%}.member-container .login-box{background:var(--member-login-box-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:1;border:1px solid #0000003b;border-radius:24px;width:100%;max-width:400px;padding:40px 32px;animation:.8s ease-out slideInLogin;position:relative;box-shadow:0 20px 40px #667eea33,0 0 0 1px #ffffff1a}.member-container .login-box:before{content:"";border-radius:24px 24px 0 0;height:4px;position:absolute;top:0;left:0;right:0}.member-container .login-box .logo-section{text-align:center;margin-bottom:32px}.member-container .login-box .logo-section .logo-icon{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:20px;justify-content:center;align-items:center;width:80px;height:80px;margin:0 auto 16px;font-size:2rem;font-weight:700;animation:3s ease-in-out infinite logoFloat;display:flex;box-shadow:0 8px 24px #667eea4d}.member-container .login-box .logo-section .welcome-text{color:#1f2937;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:8px;font-size:1.8rem;font-weight:700}.member-container .login-box .logo-section .sub-text{color:#6b7280;font-size:.95rem;line-height:1.4}.member-container .login-box .social-section .social-ment{text-align:center;color:#374151;background:linear-gradient(135deg,#f8fafc 0%,#f1f5f9 100%);border:1px solid #e2e8f0;border-radius:12px;margin-bottom:24px;padding:12px;font-size:1rem;font-weight:600;position:relative}.member-container .login-box .social-section .social-ment:before{content:"🚀";position:absolute;top:50%;left:12px;transform:translateY(-50%)}.member-container .login-box .social-section .social-ment span{margin-left:24px}.member-container .login-box .social-section .social-buttons{flex-direction:column;gap:12px;display:flex}.member-container .login-box .social-section .social-buttons .social-button{border-radius:12px;transition:all .3s;position:relative;overflow:hidden;box-shadow:0 4px 12px #0000001a}.member-container .login-box .social-section .social-buttons .social-button:hover{transform:translateY(-2px);box-shadow:0 8px 20px #00000026}.member-container .login-box .social-section .social-buttons .social-button:active{transform:translateY(0)}.member-container .login-box .social-section .social-buttons .social-button a{display:block;position:relative}.member-container .login-box .social-section .social-buttons .social-button a img{border-radius:inherit;width:100%;height:auto;display:block}.member-container .login-box .footer-section{text-align:center;margin-top:32px}.member-container .login-box .footer-section .terms-text{color:#9ca3af;font-size:.8rem;line-height:1.4}.member-container .login-box .footer-section .terms-text a{color:#667eea;font-weight:500;text-decoration:none}.member-container .login-box .footer-section .terms-text a:hover{text-decoration:underline}.member-container .login-box .footer-section .security-badges{justify-content:center;gap:16px;margin-top:16px;display:flex}.member-container .login-box .footer-section .security-badges .badge{color:var(--fg);align-items:center;gap:4px;font-size:.75rem;display:flex}.member-container .login-box .footer-section .security-badges .badge i{color:#10b981}@media (width<=600px){.member-container{padding:16px}.member-container .login-box{padding:32px 24px}.member-container .login-box .logo-section{margin-bottom:24px}.member-container .login-box .logo-section .logo-icon{width:64px;height:64px;font-size:1.6rem}.member-container .login-box .logo-section .welcome-text{font-size:1.5rem}.member-container .login-box .social-section .social-ment{padding:10px;font-size:.9rem}}}@keyframes slideInLogin{0%{opacity:0;transform:translateY(30px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes logoFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes floatingCircle1{0%,to{opacity:.3;transform:translate(0)scale(1)}33%{opacity:.5;transform:translate(20px,-20px)scale(1.1)}66%{opacity:.4;transform:translate(-10px,30px)scale(.9)}}