*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
body::before{content:'';position:absolute;width:400px;height:400px;background:rgba(255,255,255,0.1);border-radius:50%;top:-100px;left:-100px;animation:float 6s ease-in-out infinite}
body::after{content:'';position:absolute;width:300px;height:300px;background:rgba(255,255,255,0.05);border-radius:50%;bottom:-50px;right:-50px;animation:float 8s ease-in-out infinite reverse}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(30px)}}
@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}
@keyframes slideIn{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
@keyframes pageExit{0%{opacity:1;transform:scale(1) translateY(0);filter:blur(0)}100%{opacity:0;transform:scale(1.05) translateY(-16px);filter:blur(6px)}}
body.page-exit{animation:pageExit 0.5s cubic-bezier(0.4,0,0.2,1) forwards;pointer-events:none}
.container{position:relative;z-index:10;width:100%;max-width:420px;padding:20px;text-align:center}
.container-wide{max-width:520px}
.container-md{max-width:460px}
.container-left{text-align:left}
.glass-card,.card{background:rgba(255,255,255,0.15);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.2);border-radius:22px;padding:42px 30px;box-shadow:0 16px 45px rgba(0,0,0,0.12);animation:slideUp 0.6s ease-out}
.logo-container{display:flex;justify-content:center;margin-bottom:30px;animation:scaleIn 0.6s ease-out 0.2s backwards}
.logo{width:80px;height:80px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:40px;box-shadow:0 8px 20px 0 rgba(102,126,234,0.4);border:2px solid rgba(255,255,255,0.3)}
.title{color:white;font-size:28px;font-weight:700;margin-bottom:10px;letter-spacing:-0.5px;text-align:center}
.subtitle{color:rgba(255,255,255,0.8);font-size:14px;font-weight:400;margin-bottom:30px;letter-spacing:0.3px;text-align:center}
.text{color:rgba(255,255,255,0.9);font-size:15px;line-height:1.7;margin-bottom:18px}
.description{color:rgba(255,255,255,0.9);font-size:15px;line-height:1.6;margin-bottom:40px}
.form-group{margin-bottom:20px;animation:slideIn 0.6s ease-out forwards}
.form-group:nth-child(1){animation-delay:0.3s}
.form-group:nth-child(2){animation-delay:0.4s}
.form-group:nth-child(3){animation-delay:0.5s}
.form-group:nth-child(4){animation-delay:0.6s}
label{display:block;color:rgba(255,255,255,0.9);font-size:13px;font-weight:500;margin-bottom:8px;text-transform:uppercase;letter-spacing:0.5px}
input[type="text"],input[type="email"],input[type="password"]{width:100%;padding:14px 16px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:12px;color:white;font-size:14px;font-weight:500;transition:all 0.3s ease;backdrop-filter:blur(5px)}
input[type="text"]::placeholder,input[type="email"]::placeholder,input[type="password"]::placeholder{color:rgba(255,255,255,0.6)}
input[type="text"]:focus,input[type="email"]:focus,input[type="password"]:focus{outline:none;background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.4);box-shadow:0 0 0 3px rgba(102,126,234,0.2)}
.remember-me{display:flex;align-items:center;margin-bottom:30px;font-size:13px}
.remember-me input[type="checkbox"]{margin-right:8px;width:16px;height:16px;cursor:pointer;accent-color:rgba(255,255,255,0.9)}
.remember-me label{color:rgba(255,255,255,0.8);cursor:pointer;margin:0;text-transform:none;letter-spacing:normal;font-weight:400}
.btn,button[type="submit"]{width:100%;padding:14px;border:none;border-radius:12px;color:white;font-size:15px;font-weight:600;cursor:pointer;transition:all 0.3s ease;text-transform:uppercase;letter-spacing:0.5px;text-decoration:none;display:inline-block}
.btn-primary,button[type="submit"]{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);box-shadow:0 4px 15px 0 rgba(102,126,234,0.4);animation:slideIn 0.6s ease-out 0.6s backwards}
.btn-primary:hover,button[type="submit"]:hover{transform:translateY(-2px);box-shadow:0 6px 20px 0 rgba(102,126,234,0.6)}
.btn-primary:active,button[type="submit"]:active{transform:translateY(0)}
.btn-secondary{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);backdrop-filter:blur(5px)}
.btn-secondary:hover{background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.4)}
.btn-green{background:linear-gradient(135deg,#48bb78 0%,#2f855a 100%)}
.buttons{display:flex;gap:12px;flex-direction:column;animation:slideIn 0.6s ease-out 0.4s backwards}
.register-link,.login-link,.link-row{text-align:center;margin-top:24px;font-size:13px;color:rgba(255,255,255,0.8)}
.link-row{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
.register-link a,.login-link a,.link-row a,.small-link,.link{color:white;text-decoration:underline;font-weight:600;transition:all 0.3s ease;display:inline-block}
.error-message,.errors{background:rgba(239,68,68,0.2);border:1px solid rgba(239,68,68,0.5);color:#fca5a5;padding:12px 16px;border-radius:12px;margin-bottom:24px;font-size:13px;animation:slideIn 0.6s ease-out}
.success-message,.message,.status{background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.18);color:#eef5ff;padding:14px 16px;border-radius:14px;margin-bottom:20px;font-size:13px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.button{display:inline-block;padding:14px 24px;border-radius:12px;background:linear-gradient(135deg,#48bb78 0%,#2f855a 100%);color:white;text-decoration:none;font-weight:600;transition:transform 0.2s}
.button:hover{transform:translateY(-1px)}
@media(max-width:480px){.glass-card,.card{padding:30px 20px}.title{font-size:24px}.buttons{flex-direction:column}body::before{width:300px;height:300px}body::after{width:250px;height:250px}}