.login-page{height:100vh;min-height:650px;display:grid;grid-template-columns:480px 1fr;overflow:hidden;background:var(--bg-dark);color:var(--text-main);font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,sans-serif}.login-left{background:#0c1222;border-right:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;padding:28px 40px;overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none}.login-left::-webkit-scrollbar{display:none;width:0;height:0}.login-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text-main);margin-bottom:24px;width:fit-content}.login-logo span{font-size:22px;font-weight:800;letter-spacing:-.5px}.login-logo span span{color:var(--accent-red-hover)}.login-form-container{flex:1;display:flex;flex-direction:column;justify-content:center;max-width:390px;margin:0 auto;width:100%}.login-form-container h2{font-size:28px;font-weight:800;letter-spacing:-.5px;margin-bottom:4px;color:var(--text-main)}.login-subtitle{color:#94a3b8;font-size:14px;margin-bottom:20px}.auth-buttons{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}.auth-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:11px 18px;border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;border:none;transition:all .25s ease;font-family:inherit}.auth-btn-guest{background:linear-gradient(135deg,#ff2a542e,#ff6e501a);border:1px solid rgba(255,42,84,.4);color:#ff5e7e;font-weight:700;letter-spacing:.2px;box-shadow:0 4px 15px #ff2a541a}.auth-btn-guest:hover{background:linear-gradient(135deg,#ff2a544d,#ff6e5033);border-color:var(--accent-red-hover);box-shadow:0 6px 25px #ff2a5440;transform:translateY(-2px)}.auth-btn-spotify{background:#1ed76014;border:1px solid rgba(30,215,96,.3);color:#1db954}.auth-btn-spotify:hover{background:#1ed7602e;border-color:#1db954;transform:translateY(-1px)}.auth-btn-secondary{background:#ffffff0a;border:1px solid rgba(255,255,255,.1);color:var(--text-main)}.auth-btn-secondary:hover{border-color:#ffffff40;background:#ffffff14;transform:translateY(-1px)}.auth-divider{display:flex;align-items:center;gap:16px;margin:2px 0 14px;color:#64748b;font-size:13px;font-weight:600}.auth-divider:before,.auth-divider:after{content:"";flex:1;height:1px;background:#ffffff14}.login-form{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}.form-field{display:flex;flex-direction:column;gap:5px}.form-field label{font-size:13px;font-weight:700;color:#e2e8f0}.field-label-row{display:flex;justify-content:space-between;align-items:center}.forgot-link{font-size:12px;color:#94a3b8;text-decoration:none;transition:color .2s}.forgot-link:hover{color:var(--accent-red-hover)}.form-field input,.form-select{width:100%;padding:11px 15px;background:#0f172acc;border:1px solid rgba(255,255,255,.1);border-radius:10px;color:#fff;font-size:14px;font-family:inherit;transition:border-color .2s,box-shadow .2s;outline:none}.form-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px;cursor:pointer}.form-select option{background:#0f172a;color:#fff}.form-field input:focus,.form-select:focus{border-color:var(--accent-red-hover);box-shadow:0 0 0 3px #ff2a5426}.form-field input::placeholder{color:#64748b}.password-wrapper{position:relative}.password-wrapper input{padding-right:42px}.toggle-pw{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:#94a3b8;cursor:pointer;padding:4px;display:flex;align-items:center;transition:color .2s}.toggle-pw:hover{color:#fff}.btn-full{width:100%;padding:13px;font-size:15px;font-weight:700;border-radius:12px;margin-top:2px}.signup-link{font-size:13px;color:#94a3b8;text-align:center;margin-top:6px}.signup-link a{color:var(--accent-red-hover);text-decoration:none;font-weight:700}.terms-text{font-size:11px;color:#64748b;text-align:center;line-height:1.5;margin-top:16px}.terms-text a{color:#94a3b8;text-decoration:underline}.login-right{position:relative;background:#080c16;display:flex;align-items:center;justify-content:center;overflow:hidden}.login-grid-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(255,42,84,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,42,84,.04) 1px,transparent 1px);background-size:48px 48px;pointer-events:none}.login-right:before{content:"";position:absolute;width:650px;height:650px;border-radius:50%;background:radial-gradient(ellipse,rgba(255,42,84,.15) 0%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%)}.login-quote-container{position:relative;z-index:1;max-width:560px;padding:40px}.quote-mark{font-size:110px;font-family:Georgia,serif;line-height:1;color:var(--accent-red-hover);opacity:.35;-webkit-user-select:none;user-select:none;margin-bottom:-24px}blockquote{font-size:26px;font-weight:700;line-height:1.5;letter-spacing:-.3px;color:var(--text-main);border:none;padding:0;margin:0 0 32px}.quote-author{display:flex;align-items:center;gap:14px}.quote-avatar{width:48px;height:48px;border-radius:50%;background:var(--accent-gradient);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;color:#fff;flex-shrink:0;box-shadow:0 0 20px #ff2a5466}.quote-author div{display:flex;flex-direction:column;gap:2px}.quote-author strong{font-size:16px;font-weight:700;color:var(--text-main)}.quote-author span{font-size:13px;color:#94a3b8}@media (max-width: 860px){.login-page{grid-template-columns:1fr}.login-right{display:none}.login-left{padding:28px 24px}}.theme-green .btn-primary{background:linear-gradient(135deg,#10b981,#059669,#047857)!important;border:none!important;box-shadow:0 4px 20px #10b98166!important;color:#fff!important;transition:all .25s ease!important}.theme-green .btn-primary:hover{background:linear-gradient(135deg,#34d399,#10b981,#059669)!important;box-shadow:0 6px 28px #34d3998c!important;transform:translateY(-2px)}.theme-green .quote-avatar{background:linear-gradient(135deg,#10b981,#047857)!important;box-shadow:0 0 20px #10b98166!important}.theme-green .quote-mark{color:#10b981!important}.theme-green .form-field input:focus{border-color:#10b981!important;box-shadow:0 0 0 3px #10b98133!important}.theme-green .login-grid-overlay{background-image:linear-gradient(rgba(16,185,129,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(16,185,129,.04) 1px,transparent 1px)}.theme-green .login-right:before{background:radial-gradient(ellipse,rgba(16,185,129,.18) 0%,transparent 70%)}.theme-purple .btn-primary{background:linear-gradient(135deg,#a855f7,#7c3aed,#6d28d9)!important;border:none!important;box-shadow:0 4px 20px #7c3aed66!important;color:#fff!important;transition:all .25s ease!important}.theme-purple .btn-primary:hover{background:linear-gradient(135deg,#c084fc,#8b5cf6,#7c3aed)!important;box-shadow:0 6px 28px #a855f78c!important;transform:translateY(-2px)}.theme-purple .quote-avatar{background:linear-gradient(135deg,#a855f7,#6d28d9)!important;box-shadow:0 0 20px #a855f766!important}.theme-purple .quote-mark{color:#a855f7!important}.theme-purple .form-field input:focus{border-color:#a855f7!important;box-shadow:0 0 0 3px #a855f733!important}.theme-purple .login-grid-overlay{background-image:linear-gradient(rgba(168,85,247,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(168,85,247,.04) 1px,transparent 1px)}.theme-purple .login-right:before{background:radial-gradient(ellipse,rgba(168,85,247,.18) 0%,transparent 70%)}.theme-red .btn-primary{background:linear-gradient(135deg,#ff2a54,#ff5e7e,#d91b42)!important;border:none!important;box-shadow:0 4px 20px #ff2a5466!important;color:#fff!important;transition:all .25s ease!important}.theme-red .btn-primary:hover{background:linear-gradient(135deg,#ff5e7e,#ff2a54,#d91b42)!important;box-shadow:0 6px 28px #ff2a548c!important;transform:translateY(-2px)}.theme-red .quote-avatar{background:linear-gradient(135deg,#ff2a54,#d91b42)!important;box-shadow:0 0 20px #ff2a5466!important}.theme-red .quote-mark{color:#ff2a54!important}.theme-red .form-field input:focus{border-color:#ff2a54!important;box-shadow:0 0 0 3px #ff2a5433!important}
