*{box-sizing:border-box;margin:0;padding:0}body{background-color:#0a0a0a;background-image:radial-gradient(at 20%,#581c8726 0%,#0000 60%),radial-gradient(at 80%,#0f523c26 0%,#0000 60%);background-position:0 0;background-repeat:repeat;background-size:auto;background-attachment:scroll;background-origin:padding-box;background-clip:border-box;min-height:100vh}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#ffffff40}.login-page{display:flex;color:#fff;animation:fadeIn .6s ease-out;flex-direction:column;justify-content:center;align-items: center;gap:12px;height:100vh;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}.login-title{letter-spacing:-.02em;background:linear-gradient(135deg,#fff 0%,#1db954 50%,#a78bfa 100%) 0 0/200% 200%;-webkit-text-fill-color:transparent;animation:gradientShift 6s ease infinite;-webkit-background-clip:text;background-clip:text;font-size:3.2rem;font-weight:800}.login-subtitle{color:#fff6;letter-spacing:.01em;font-size:1.05rem;font-weight:400}.login-btn{color:#000;cursor:pointer;letter-spacing:.01em;background:#1db954;border:none;border-radius:500px;margin-top:16px;padding:14px 40px;transition:transform .15s,box-shadow .3s;font-size:1rem;font-weight:600}.login-btn:hover{transform:scale(1.05);box-shadow:0 0 24px #1db95466}.login-btn:active{transform:scale(.98)}@keyframes fadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes gradientShift{0%,to{background-position:0%}50%{background-position:100%}}.toolbar{position:fixed;display:flex;z-index:9999;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);overflow:hidden;background:#ffffff0f;border:1px solid #ffffff14;border-radius:12px;gap:1px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;bottom:20px;right:20px}.toolbar-btn{color:#ffffffb3;cursor:pointer;letter-spacing:.01em;background:0 0;border:none;padding:10px 20px;transition:background .15s,color .15s;font-size:.82rem;font-weight:500}.toolbar-btn:hover{color:#fff;background:#ffffff14}.toolbar-btn:active{background:#ffffff1f}.toolbar-btn--active{color:#1db954;background:#1db95426}.toolbar-btn--logout{color:#ffffff59}.toolbar-btn--logout:hover{color:#ff6464cc;background:#ff646414}.notice{position:fixed;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:#ffffff80;animation:fadeIn .3s ease-out;background:#ffffff0f;border:1px solid #ffffff14;border-radius:10px;padding:10px 20px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:.82rem;bottom:20px;left:50%;transform:translate(-50%)}.modal-overlay{position:fixed;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;z-index:10000;animation:fadeIn .2s ease-out;background:#0009;justify-content:center;align-items: center;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;inset:0}.modal{display:flex;color:#fff;background:#16161af2;border:1px solid #ffffff14;border-radius:16px;flex-direction:column;width:min(92vw,760px);height:82vh;box-shadow:0 24px 80px #0009}.modal-header{display:flex;align-items: center;gap:12px;padding:20px 20px 16px}.modal-title{white-space:nowrap;letter-spacing:-.01em;margin:0;font-size:1.15rem;font-weight:700}.modal-search{color:#fff;outline:none;background:#ffffff0a;border:1px solid #ffffff14;border-radius:10px;flex:1;padding:10px 14px;transition:border-color .2s,background .2s;font-size:.88rem}.modal-search::placeholder{color:#ffffff40}.modal-search:focus{background:#ffffff0f;border-color:#1db95480}.modal-close{color:#ffffff4d;cursor:pointer;background:0 0;border:none;border-radius:8px;padding:4px 8px;transition:color .15s,background .15s;font-size:1.5rem;line-height:1}.modal-close:hover{color:#fff;background:#ffffff14}.modal-grid-scroll{overflow-y:auto;flex:1;min-height:0}.modal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:10px;padding:4px 20px 20px}.modal-grid--square{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.modal-status{text-align:center;color:#ffffff59;padding:10px;font-size:.82rem}.modal-footer{display:flex;border-top:1px solid #ffffff0f;justify-content:center;gap:10px;padding:16px 20px}.modal-footer--spread{justify-content:space-between}.playlist-tile{cursor:pointer;overflow:hidden;position:relative;aspect-ratio:1;background:#ffffff08;border-radius:10px;transition:transform .15s}.playlist-tile:hover{transform:translateY(-2px)}.playlist-tile:hover .playlist-overlay{opacity:1}.playlist-tile:active{transform:scale(.97)}.playlist-cover{display:block;object-fit:cover;width:100%;height:100%}.playlist-no-cover{display:flex;color:#ffffff26;background:#ffffff0a;justify-content:center;align-items: center;width:100%;height:100%;font-size:1.8rem}.playlist-overlay{position:absolute;opacity:.8;background:linear-gradient(#0000 0%,#000000d9 100%);padding:24px 10px 10px;transition:opacity .15s;bottom:0;left:0;right:0}.playlist-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;font-size:.78rem;font-weight:600}.playlist-meta{color:#ffffff80;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;font-size:.68rem}.playlist-playing{position:absolute;color:#000;letter-spacing:.02em;background:#1db954;border-radius:6px;padding:3px 10px;font-size:.68rem;font-weight:700;top:8px;right:8px}.skin-tile{cursor:pointer;overflow:hidden;outline:2px solid #0000;outline-offset:-2px;background:#ffffff08;border-radius:10px;transition:transform .15s,background .15s}.skin-tile:hover{background:#ffffff0f;transform:translateY(-2px)}.skin-tile:active{transform:scale(.98)}.skin-tile--selected{outline-color:#1db954}.skin-screenshot{display:block;width:100%}.skin-name{color:#ffffff73;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:6px 8px;font-size:.75rem}.btn-ghost{color:#fff9;cursor:pointer;background:0 0;border:1px solid #ffffff1a;border-radius:8px;padding:9px 18px;transition:background .15s,color .15s,border-color .15s;font-size:.82rem}.btn-ghost:hover{color:#fff;background:#ffffff0f;border-color:#ffffff26}.btn-ghost:disabled{opacity:.4;cursor:default}.btn-primary{color:#000;cursor:pointer;background:#1db954;border:none;border-radius:500px;padding:9px 28px;transition:transform .15s,box-shadow .2s,opacity .2s;font-size:.88rem;font-weight:600}.btn-primary:hover{transform:scale(1.03);box-shadow:0 0 16px #1db95459}.btn-primary:disabled{opacity:.35;cursor:default;box-shadow:none;transform:none}