.switch{transform:scale(.5);display:inline-block;position:relative}.switch__input{clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.switch__label{position:relative;display:inline-block;width:120px;height:60px;background-color:#2b2b2b;border:5px solid #5b5b5b;border-radius:9999px;cursor:pointer;transition:all .4s cubic-bezier(.46,.03,.52,.96)}.switch__indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) translate(-72%);display:block;width:40px;height:40px;background-color:#7b7b7b;border-radius:9999px;box-shadow:10px 0 #0003 inset}.switch__indicator:before,.switch__indicator:after{position:absolute;content:"";display:block;background-color:#fff;border-radius:9999px}.switch__indicator:before{top:7px;left:7px;width:9px;height:9px;opacity:.6}.switch__indicator:after{bottom:8px;right:6px;width:14px;height:14px;opacity:.8}.switch__decoration{position:absolute;top:65%;left:50%;display:block;width:5px;height:5px;background-color:#fff;border-radius:9999px;animation:twinkle .8s infinite -.6s}.switch__decoration:before,.switch__decoration:after{position:absolute;display:block;content:"";width:5px;height:5px;background-color:#fff;border-radius:9999px}.switch__decoration:before{top:-20px;left:10px;opacity:1;animation:twinkle .6s infinite}.switch__decoration:after{top:-7px;left:30px;animation:twinkle .6s infinite -.2s}@keyframes twinkle{50%{opacity:.2}}.switch__indicator,.switch__indicator:before,.switch__indicator:after{transition:all .4s cubic-bezier(.46,.03,.52,.96)}.switch__input:checked+.switch__label{background-color:#8fb5f5;border-color:#347cf8}.switch__input:checked+.switch__label .switch__indicator{background-color:#ecd21f;box-shadow:none;transform:translate(-50%,-50%) translate(72%)}.switch__input:checked+.switch__label .switch__indicator:before,.switch__input:checked+.switch__label .switch__indicator:after{display:none}.switch__input:checked+.switch__label .switch__decoration{top:50%;transform:translateY(-50%);animation:cloud 8s linear infinite;width:20px;height:20px}.switch__input:checked+.switch__label .switch__decoration:before{width:10px;height:10px;top:auto;bottom:0;left:-8px;animation:none}.switch__input:checked+.switch__label .switch__decoration:after{width:15px;height:15px;top:auto;bottom:0;left:16px;animation:none}.switch__input:checked+.switch__label .switch__decoration,.switch__input:checked+.switch__label .switch__decoration:before,.switch__input:checked+.switch__label .switch__decoration:after{border-radius:9999px 9999px 0 0}.switch__input:checked+.switch__label .switch__decoration:after{border-bottom-right-radius:9999px}@keyframes cloud{0%{transform:translateY(-50%)}50%{transform:translate(-50%,-50%)}to{transform:translateY(-50%)}}.language-selector-container{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:5px;width:200px;font-family:Arial,sans-serif}.language-label{font-size:1em}.language-select{color:var(--text-color);padding:4px 8px;font-size:1em;border-radius:4px;outline:none;transition:border-color .3s;width:100%;background-color:#0000000d}.language-select:focus{border-color:#007bff}.language-select option{padding:8px}.side-drawer{font-size:1em;position:fixed;top:0;right:-250px;width:250px;height:100%;background-color:var(--background-color);border-radius:5px 0 0 5px;transition:right .3s ease-in-out,box-shadow .3s ease-in-out;z-index:1000}.side-drawer-content{height:100%;padding:14px;display:flex;flex-direction:column;justify-content:space-between}.side-drawer.open{right:0;box-shadow:0 0 20px #00000080}.drawer-nav ul{list-style:none;padding:0}.drawer-nav li{margin:1.4em 0}.drawer-nav a{color:var(--text-color);font-weight:700;text-decoration:none;font-size:1.3em;transition:color .2s ease}.drawer-nav a:hover{color:var(--link-hover-color)}.drawer-nav a .icon-wrapper{margin-right:.7em;vertical-align:middle}.drawer-bottom-section{display:flex;flex-direction:column;align-items:flex-end}.spotify-login{background-color:#1db954;color:var(--text-color);font-size:16px;padding:10px 20px;border:none;border-radius:25px;display:flex;align-items:center;cursor:pointer;transition:background-color .3s ease}.spotify-login:hover{background-color:#1aa34a}.spotify-logo{width:24px;height:24px;margin-right:10px;fill:var(--background-color)}.spotify-login:disabled{opacity:.6;cursor:not-allowed}.centered-error{text-align:center;color:var(--error-color);font-size:1.5rem}:root{--navbar-height: 56px;--menu-btn-height: 40px;--menu-stripe-height: 2px;--menu-stripe-width: 30px;--menu-stripe-color: var(--text-color)}.navbar{display:flex;align-items:center;justify-content:center;padding:0 16px;height:var(--navbar-height);background-color:var(--header-bar-color);color:var(--text-color);box-shadow:0 4px 8px #0003;position:relative}.navbar__menu-btn{background:none;border:none;cursor:pointer;padding:8px;position:absolute;left:16px;display:flex;flex-direction:column;justify-content:space-around;height:var(--menu-btn-height);transition:transform .3s ease}.navbar__menu-icon{width:var(--menu-stripe-width);height:var(--menu-stripe-height);background-color:var(--menu-stripe-color);border-radius:2px;transition:all .3s ease}.navbar__menu-icon:nth-child(2){transition:all .1s ease}.navbar__menu-btn.open .navbar__menu-icon:nth-child(1){transform:translateY(calc(var(--menu-stripe-height) + 6px)) rotate(45deg)}.navbar__menu-btn.open .navbar__menu-icon:nth-child(2){opacity:0}.navbar__menu-btn.open .navbar__menu-icon:nth-child(3){transform:translateY(-8px) rotate(-45deg)}.navbar__title{font-size:18px;font-weight:700;text-align:center;flex-grow:1;margin:0}.app-container{display:flex;flex-direction:column;position:relative;min-height:100vh;padding-bottom:env(safe-area-inset-bottom);padding-top:env(safe-area-inset-top)}.app-header{z-index:20}.main-content{position:relative;flex-grow:1;display:flex;flex-direction:column;transition:all .3s ease}.overlay{position:fixed;inset:0;z-index:10;background-color:#0000001a}.not-authenticated-container{margin:auto;height:100%;display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center}.toast-container{position:fixed;top:60px;left:50%;transform:translate(-50%);z-index:1000;display:flex;flex-direction:column;gap:10px;width:90%;max-width:400px}.toast{padding:10px 15px;border-radius:5px;color:#fff;cursor:pointer;transition:opacity .3s ease}.toast-success{background-color:var(--success-color)}.toast-error{background-color:var(--error-color)}.toast-info{background-color:var(--info-color)}:root{--primary-color: #3498db;--secondary-color: #2ecc71;--accent-color: #f39c12;--background-color: #f0f0f0;--header-bar-color: #dedede;--card-background-color: #efefef;--card-background-color-border: #e0e0e0;--card-background-color-hover: #c4c4c4;--card-background-color-selected: #c1f6ff;--text-color: #333333;--text-muted-color: #777777;--border-color: #cccccc;--shadow-color: rgba(0, 0, 0, .1);--link-color: var(--primary-color);--link-hover-color: #2980b9;--info-color: #3498db;--success-color: #27ae60;--warning-color: #e67e22;--error-color: #e74c3c;--button-color: var(--primary-color);--button-color-hover: hsl(from var(--button-color) h s 70%);--button-text-color: #ffffff}[data-theme=dark]{--primary-color: #2980b9;--secondary-color: #27ae60;--accent-color: #f39c12;--background-color: #2c2c2c;--header-bar-color: #202020;--card-background-color: #3a3a3a;--card-background-color-border: #444;--card-background-color-hover: #555;--card-background-color-selected: #1e3c72;--text-color: #e0e0e0;--text-muted-color: #aaaaaa;--border-color: #555;--shadow-color: rgba(0, 0, 0, .5);--link-color: var(--primary-color);--link-hover-color: #3498db;--info-color: #2980b9;--success-color: #27ae60;--warning-color: #e67e22;--error-color: #e74c3c;--button-color: var(--primary-color);--button-color-hover: hsl(from var(--button-color) h s 70%);--button-text-color: #ffffff}*{margin:0;padding:0}*,*:before,*:after{box-sizing:border-box}html,body{width:100vw;height:100%;color:var(--text-color);background-color:var(--background-color);scrollbar-color:var(--primary-color) transparent;scrollbar-width:thin}#root{min-height:100vh;width:100%}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.loading-spinner{height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Arial,sans-serif}.spinner{border:8px solid var(--background-color);border-top:8px solid var(--primary-color);border-radius:50%;width:50px;height:50px;animation:spin 1s linear infinite}.loading-spinner p{margin-top:10px;font-size:18px;color:var(--text-color)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}