.login-modal{opacity:0;width:100%;max-width:600px;transition:all .3s allow-discrete;background-color:#fff;border:none;border-radius:16px;padding:32px 32px 40px;animation:.3s ease-in-out fadeIn;top:49%;left:50%;overflow:visible;transform:translate(-50%,-50%);box-shadow:0 40px 32px -12px #110c2214}.login-modal::backdrop{-webkit-backdrop-filter:blur();backdrop-filter:blur();transition:all .3s allow-discrete;background:0 0;animation:.3s ease-in-out darken}.login-modal[open]{opacity:1;top:50%}.login-modal[open]::backdrop{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#0003}.login-modal .login-modal__header{justify-content:space-between;align-items:center;margin-bottom:32px;display:flex}.login-modal .login-modal__header h2{font-size:1.25rem;line-height:120%}.login-modal .login-modal__header button{background-color:#0000;border:none;width:24px;height:24px}.login-modal .login-modal__header button i{color:#6c757d;font-size:1rem}@keyframes fadeIn{0%{opacity:0;top:49%}to{opacity:1;top:50%}}@keyframes darken{0%{background:0 0}to{background:#0003}}
.login-flow .google-btn,.login-flow .spotify-btn{font-family:var(--font-geist);border-radius:100px;justify-content:center;align-items:center;column-gap:8px;width:100%;height:48px;margin-bottom:16px;font-size:1rem;font-weight:600;line-height:1rem;transition:all .25s ease-in-out;display:flex}.login-flow .google-btn i,.login-flow .spotify-btn i{font-size:1.25rem}.login-flow .spotify-btn{background-color:#1ed760;border:none;display:none}.login-flow .spotify-btn:hover{background-color:#2c55fb}.login-flow .google-btn{background-color:#0000;border:1px solid #6c757d}.login-flow .google-btn:hover{background-color:#ced4da;border-color:#ced4da}.login-flow .or-text{text-align:center;margin:24px 0 16px;font-size:1rem;line-height:150%}.login-flow .email-form{flex-direction:column;row-gap:16px;display:flex}.login-flow .email-form input{background-color:#0000;border:1px solid #6c757d;border-radius:4px;height:48px;padding:0 16px;font-size:1rem;line-height:150%}.login-flow .email-form button{color:#0d6efd;background-color:#0000;border:1px solid #0d6efd;border-radius:100px;height:48px;margin-top:8px;font-size:1rem;font-weight:600;line-height:1rem;transition:all .25s ease-in-out}.login-flow .email-form button:hover{color:#fff;background-color:#0d6efd}.login-flow .login-actions{flex-direction:column;justify-content:space-between;align-items:center;row-gap:8px;margin-top:24px;font-size:1rem;line-height:150%;display:flex}.login-flow .login-actions .forgot-password-link{color:#0d6efd}.login-flow .login-actions .signup-link button{color:#0d6efd;background:0 0;border:none;font-size:1rem}@media screen and (min-width:540px){.login-flow .login-actions{flex-direction:row}}.login-flow .toast-alert{bottom:calc(-100% - 129px)}.login-flow .toast-alert.show{bottom:-100%}
.toast-alert{visibility:hidden;opacity:0;z-index:9999;border-radius:4px;width:max-content;max-width:656px;transition:all .3s cubic-bezier(.445,.05,.55,.95);position:fixed;bottom:0;left:50%;transform:translate(-50%);box-shadow:0 28px 24px -10px #110c2214}.toast-alert.toast-success{background-color:#198754}.toast-alert.toast-error{background-color:#e35d6a}.toast-alert.show{visibility:visible;opacity:1;bottom:129px}.toast-alert .toast-alert__container{box-shadow:0 8px 16px #00000026}.toast-alert .toast-alert__container .toast-alert__header{justify-content:space-between;align-items:center;height:43px;padding:0 16px;display:flex}.toast-alert .toast-alert__container .toast-alert__header div{color:#fff;column-gap:8px;display:flex}.toast-alert .toast-alert__container .toast-alert__header div i{font-size:1rem;line-height:1rem}.toast-alert .toast-alert__container .toast-alert__header div .toast-alert__title{font-weight:700;line-height:1.25rem}.toast-alert .toast-alert__container .toast-alert__header button{color:#ffffff80;background-color:#0000;border:none;width:24px;height:24px;font-size:1rem}.toast-alert .toast-alert__container .toast-alert__message{color:#fff;height:37px;padding:0 72px 0 16px}