*,*:before,*:after{box-sizing:border-box}:root{--color-primary: #1db954;--color-primary-hover: #1ed760;--color-primary-pressed: #1aa34a;--color-bg: #121212;--color-bg-elevated: #181818;--color-bg-hover: #282828;--color-surface: #242424;--color-surface-hover: #2a2a2a;--color-text: #ffffff;--color-text-secondary: #b3b3b3;--color-text-disabled: #737373;--color-text-accent: #1db954;--color-error: #e22134;--color-warning: #ffa42b;--color-success: #1db954;--color-info: #4cb3f8;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:var(--color-text);background-color:var(--color-bg);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:var(--color-text-primary);text-decoration:none}html{margin:0;padding:0;width:100%;height:100%}body{margin:0;padding:0;width:100%;height:100%;background:radial-gradient(circle at 20% 20%,#14532d,#000 70%,#065f46)}h1{font-size:3.2em;line-height:1.1}button{border-radius:calc(infinity * 1px);border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:var(--color-primary);cursor:pointer;transition:border-color .25s}button:hover{background-color:var(--color-primary-hover)}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}button:active{background-color:var(--color-primary-pressed)}#root{margin:0;padding:0;text-align:center;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{background:var(--color-bg);border-radius:20px;box-shadow:0 8px 32px var(--color-bg-elevated);border:1px solid var(--color-surface-hover);padding:2.5rem;min-width:300px;width:100%;max-width:500px;max-height:650px;margin:1rem;display:flex;flex-direction:column;align-items:center}@media (max-width: 30rem){.card{border-radius:0;width:100%;height:100%;max-height:100%;margin:0;padding:1rem}}.main-title{font-size:2.2rem;font-weight:700;color:var(--color-text);margin-bottom:.5rem;text-align:center}.subtitle{color:var(--color-text-secondary);text-align:center;margin:.5rem}.features{width:100%}.features-title{color:var(--color-primary);font-weight:600;margin:.5rem}.features-list{text-align:left;color:var(--color-text);font-size:1rem;margin-left:1.2rem;margin-bottom:0}.login-btn{background-color:var(--color-primary);color:#111;font-weight:600;padding:.9rem 2rem;border-radius:999px;border:none;display:flex;align-items:center;gap:.5rem;justify-content:center;font-size:1.1rem;cursor:pointer;transition:background .2s;margin-top:.5rem}.login-btn:hover{background-color:var(--color-primary-hover)}.login-btn:active{background-color:var(--color-primary-pressed)}.logout-btn{border-radius:calc(infinity * 1px);border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:var(--color-primary);cursor:pointer;transition:border-color .25s}.logout-btn:hover{background-color:var(--color-primary-hover)}.logout-btn:focus,.logout-btn:focus-visible{outline:4px auto -webkit-focus-ring-color}.logout-btn:active{background-color:var(--color-primary-pressed)}.disclaimer{font-size:.8rem;color:var(--color-text-secondary);margin-top:1.2rem;text-align:center}.playlist-list{list-style-type:none;margin:.5rem;padding:0;overflow-y:auto;flex:1;min-height:0;width:100%;max-width:calc(100% - 1rem);border:var(--color-surface-hover) 1px solid;border-radius:8px}.playlist-list li button{width:100%;height:100%;background:var(--color-bg);text-align:left;font-weight:500;text-overflow:ellipsis;white-space:nowrap;overflow-x:hidden;border-radius:0;transition:background .2s ease}.playlist-list li{border-bottom:1px solid var(--color-surface-hover)}.playlist-list li:last-child{border-bottom:none}.playlist-list li button:hover{background:var(--color-bg-hover)}.song-list{overflow-y:auto;overflow-x:hidden;flex:1;min-height:0;width:100%;max-height:600px;max-width:calc(100% - 1rem);padding:.75rem .75rem .75rem 2.5rem;margin:.5rem;border:var(--color-surface-hover) 1px solid;border-radius:8px;text-align:left}.song-list li{text-overflow:ellipsis;white-space:nowrap}.song-list li span{display:block;text-overflow:ellipsis;white-space:nowrap;overflow-x:hidden}.button-container{display:flex;justify-content:center;align-items:center;gap:.5rem}iframe{height:400px;width:100%;border-color:#fff}.card-content{width:100%;display:flex;flex-direction:column;align-items:center;overflow:hidden}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spinner{width:1.5rem;height:1.5rem;animation:spin 2s linear infinite}.loader-container{display:flex;justify-content:center;border:var(--color-surface-hover) 1px solid;border-radius:.5rem;margin:.5rem;align-items:center;width:100%;height:100%;min-height:200px}