*{box-sizing:border-box;margin:0;padding:0}:root{--primary:#6c63ff;--primary-light:#8b83ff;--primary-dark:#5a52e0;--accent:#ff6b9d;--bg-start:#667eea;--bg-end:#764ba2;--card-bg:#fffffff2;--text:#2d3436;--text-light:#636e72;--text-muted:#b2bec3;--border:#dfe6e9;--error:#e17055;--success:#00b894;--radius:20px;--radius-sm:12px;--shadow:0 20px 60px #00000026;--font:"Zen Maru Gothic", "Hiragino Maru Gothic Pro", sans-serif}body{font-family:var(--font);min-height:100vh;color:var(--text);justify-content:center;align-items:center;display:flex;overflow-x:hidden}.login-bg{background:linear-gradient(135deg, var(--bg-start), var(--bg-end), #f093fb);z-index:-1;background-size:400% 400%;animation:15s infinite gradientFlow;position:fixed;inset:0}@keyframes gradientFlow{0%,to{background-position:0%}50%{background-position:100%}}.floating-shapes{pointer-events:none;position:fixed;inset:0;overflow:hidden}.shape{opacity:.6;font-size:2rem;animation:6s ease-in-out infinite float;position:absolute}.shape-1{font-size:2.5rem;animation-delay:0s;top:10%;left:10%}.shape-2{font-size:2rem;animation-delay:1s;top:20%;right:15%}.shape-3{font-size:3rem;animation-delay:2s;top:60%;left:5%}.shape-4{font-size:2.5rem;animation-delay:.5s;bottom:20%;right:10%}.shape-5{animation-delay:1.5s;top:40%;right:25%}.shape-6{font-size:1.8rem;animation-delay:3s;bottom:30%;left:20%}@keyframes float{0%,to{transform:translateY(0)rotate(0)}25%{transform:translateY(-20px)rotate(5deg)}50%{transform:translateY(-10px)rotate(-3deg)}75%{transform:translateY(-25px)rotate(3deg)}}.login-container{z-index:1;width:100%;max-width:480px;padding:20px}.card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:.6s ease-out slideUp;overflow:hidden}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.card-header{text-align:center;background:linear-gradient(135deg,#6c63ff14,#ff6b9d14);padding:2.5rem 2rem 1.5rem}.card-header h1{background:linear-gradient(135deg, var(--primary), var(--accent));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:.3rem;font-size:2.2rem;font-weight:900}.card-header .subtitle{color:var(--text-light);font-size:1rem;font-weight:500}.card-body{padding:1.5rem 2rem 2rem}.form-section{border-bottom:2px dashed var(--border);margin-bottom:1.5rem;padding-bottom:1.5rem}.form-section:last-of-type{border-bottom:none}.form-section h3{color:var(--primary-dark);margin-bottom:1rem;font-size:1.1rem;font-weight:700}.input-group{margin-bottom:1rem}.input-group label{color:var(--text-light);margin-bottom:.4rem;padding-left:.3rem;font-size:.85rem;font-weight:700;display:block}.input-group input{border:2px solid var(--border);border-radius:var(--radius-sm);width:100%;font-size:1.1rem;font-family:var(--font);color:var(--text);background:#fffc;padding:.9rem 1.2rem;transition:all .3s}.input-group input:focus{border-color:var(--primary);background:#fff;outline:none;box-shadow:0 0 0 4px #6c63ff26}.input-group input::placeholder{color:var(--text-muted)}.btn{border-radius:var(--radius-sm);font-family:var(--font);cursor:pointer;border:none;justify-content:center;align-items:center;gap:.5rem;font-weight:700;transition:all .3s;display:inline-flex;position:relative;overflow:hidden}.btn-primary{background:linear-gradient(135deg, var(--primary), var(--primary-light));color:#fff;box-shadow:0 4px 15px #6c63ff66}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #6c63ff80}.btn-primary:active{transform:translateY(0)}.btn-large{width:100%;margin-top:.5rem;padding:1rem;font-size:1.2rem}.btn-emoji{font-size:1.3rem;animation:2s ease-in-out infinite sparkle}@keyframes sparkle{0%,to{transform:scale(1)rotate(0)}50%{transform:scale(1.2)rotate(10deg)}}.error-message{color:var(--error);text-align:center;min-height:1.5rem;padding:.5rem;font-size:.9rem;font-weight:500}.loading-container{text-align:center;color:#fff;padding:3rem}.loading-spinner{border:4px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:50px;height:50px;margin:0 auto 1rem;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loading-container p{font-size:1.1rem;font-weight:500}.form-link{text-align:center;color:var(--text-light);margin-top:1rem;font-size:.9rem}.form-link a{color:var(--primary);font-weight:700;text-decoration:none;transition:color .2s}.form-link a:hover{color:var(--primary-dark);text-decoration:underline}@media (width<=480px){.card-header h1{font-size:1.8rem}.card-body{padding:1.2rem 1.5rem 1.5rem}.input-group input{padding:.8rem 1rem;font-size:1rem}}