:root{--accent-color-1:#6366f1;--accent-color-2:#8b5cf6;--accent-color-3:#ec4899;--bg-dark:#09090b;--text-primary:#fafafa;--text-secondary:#d4d4d8;--text-muted:#71717a;--lastfm-red:#d51007;--fw-thin:200;--fw-light:300;--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--clock-time-size:8rem;--clock-date-size:2rem;--clock-align:center;--clock-padding:3rem 4rem}*{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0;font-family:Outfit,sans-serif}body{background-color:var(--bg-dark);color:var(--text-primary);width:100vw;height:100vh;overflow:hidden}body.ui-cleared .settings-btn,body.ui-cleared .app-footer,body.ui-cleared .settings-modal{display:none!important}.ambient-bg{z-index:0;background-color:var(--bg-dark);width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}.overlay{-webkit-backdrop-filter:blur(100px);backdrop-filter:blur(100px);z-index:2;background:radial-gradient(circle,#09090b33 0%,#09090bd9 80%);width:100%;height:100%;position:absolute;top:0;left:0}.blob{filter:blur(80px);opacity:.45;mix-blend-mode:screen;border-radius:50%;transition:background 1.5s;position:absolute}.blob-1{background:radial-gradient(circle, var(--accent-color-1) 0%, #0000 70%);width:600px;height:600px;animation:25s ease-in-out infinite alternate float-1;top:-100px;left:-100px}.blob-2{background:radial-gradient(circle, var(--accent-color-2) 0%, #0000 70%);width:500px;height:500px;animation:30s ease-in-out infinite alternate float-2;bottom:-50px;right:-50px}.blob-3{background:radial-gradient(circle, var(--accent-color-3) 0%, #0000 70%);width:450px;height:450px;animation:28s ease-in-out infinite alternate float-3;top:40%;left:50%}@keyframes float-1{0%{transform:translate(0)scale(1)}50%{transform:translate(150px,80px)scale(1.1)}to{transform:translate(50px,180px)scale(.9)}}@keyframes float-2{0%{transform:translate(0)scale(1)}50%{transform:translate(-100px,-120px)scale(.9)}to{transform:translate(-180px,-50px)scale(1.15)}}@keyframes float-3{0%{transform:translate(-50%,-50%)translate(0)}50%{transform:translate(-50%,-50%)translate(120px,-80px)scale(1.1)}to{transform:translate(-50%,-50%)translate(-80px,100px)scale(.85)}}#app{z-index:10;flex-direction:column;width:100%;height:100%;display:flex;position:relative}.glass-panel{-webkit-backdrop-filter:blur(25px)saturate(160%);background:#ffffff05;border:1px solid #ffffff12;border-radius:24px;box-shadow:0 4px 30px #0006,inset 0 1px 1px #ffffff0d}#clock-widget{z-index:20;flex-direction:column;justify-content:center;transition:all .85s cubic-bezier(.16,1,.3,1);display:flex;position:absolute}#clock-time{font-size:var(--clock-time-size);font-weight:var(--fw-thin);letter-spacing:-2px;color:var(--text-primary);text-shadow:0 4px 24px #0000004d;font-variant-numeric:tabular-nums;line-height:.95;transition:font-size .85s cubic-bezier(.16,1,.3,1)}#clock-date{font-size:var(--clock-date-size);font-weight:var(--fw-light);letter-spacing:.5px;color:var(--text-secondary);opacity:.85;margin-top:.5rem;transition:font-size .85s cubic-bezier(.16,1,.3,1)}#now-playing-widget{z-index:15;width:680px;max-width:90%;padding:2.2rem;transition:all .85s cubic-bezier(.16,1,.3,1);position:absolute}.state-idle #clock-widget{padding:var(--clock-padding);text-align:center;border-color:#ffffff12;top:50%;left:50%;transform:translate(-50%,-50%)}.state-idle #now-playing-widget{opacity:0;pointer-events:none;visibility:hidden;top:50%;left:50%;transform:translate(-50%,-40%)scale(.85)}.state-playing{--clock-time-size:2.4rem;--clock-date-size:.9rem}.state-playing #clock-widget{text-align:left;border-color:#ffffff0a;padding:1.2rem 2rem;top:2.5rem;left:2.5rem;transform:translate(0)}.state-playing #now-playing-widget{opacity:1;pointer-events:auto;visibility:visible;top:50%;left:50%;transform:translate(-50%,-50%)scale(1)}.widget-content{flex-direction:row;align-items:center;gap:2.5rem;display:flex}.album-art-container{border-radius:16px;flex-shrink:0;width:230px;height:230px;position:relative}#album-art{object-fit:cover;z-index:5;border:1px solid #ffffff1a;border-radius:16px;width:100%;height:100%;position:relative;box-shadow:0 8px 30px #00000080}.album-glow{filter:blur(28px);opacity:.8;z-index:3;background-position:50%;background-size:cover;border-radius:16px;width:100%;height:100%;transition:background-image 1.2s,opacity 1s;position:absolute;top:5px;left:5px;transform:scale(.96)translateY(10px)}.lastfm-badge{z-index:8;background:#09090bd9;border:1px solid #ffffff1a;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;display:flex;position:absolute;top:-10px;left:-10px;box-shadow:0 4px 10px #0000004d}.metadata-container{flex-direction:column;flex-grow:1;justify-content:center;display:flex;overflow:hidden}.track-scroller{width:100%;margin-bottom:.3rem;position:relative;overflow:hidden}#track-name{font-size:1.8rem;font-weight:var(--fw-bold);letter-spacing:-.5px;white-space:nowrap;color:var(--text-primary);text-shadow:0 2px 10px #0003;display:inline-block}.scrolling{padding-right:4rem;animation:15s linear infinite scroll-text}@keyframes scroll-text{0%{transform:translate(0)}to{transform:translate(-50%)}}#track-artist{font-size:1.15rem;font-weight:var(--fw-medium);color:var(--text-secondary);opacity:.9;white-space:nowrap;text-overflow:ellipsis;margin-bottom:.2rem;overflow:hidden}#track-album{font-size:.9rem;font-weight:var(--fw-regular);color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;margin-bottom:1.5rem;overflow:hidden}.player-footer{align-items:center;gap:.8rem;display:flex}#active-device-name{font-size:.85rem;font-weight:var(--fw-medium);color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.eq-icon{justify-content:space-between;align-items:flex-end;width:16px;height:14px;display:flex}.eq-icon .bar{background-color:var(--lastfm-red);transform-origin:bottom;border-radius:1px;width:3px;height:100%;transition:transform .3s;transform:scaleY(.1)}.state-playing .eq-icon.active .bar{animation:1.2s infinite alternate bounce-eq}.state-playing .eq-icon.active .bar:first-child{animation-duration:1.1s;animation-delay:.1s}.state-playing .eq-icon.active .bar:nth-child(2){animation-duration:.8s;animation-delay:.3s}.state-playing .eq-icon.active .bar:nth-child(3){animation-duration:1.3s;animation-delay:0s}.state-playing .eq-icon.active .bar:nth-child(4){animation-duration:.9s;animation-delay:.2s}@keyframes bounce-eq{0%{transform:scaleY(.15)}to{transform:scaleY(1)}}.app-footer{z-index:20;position:absolute;bottom:1.5rem;right:1.5rem}.status-badge{font-size:.75rem;font-weight:var(--fw-semibold);letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);background:#ffffff08;border:1px solid #ffffff0d;border-radius:20px;align-items:center;gap:.4rem;padding:.4rem .8rem;transition:all .3s;display:flex}.status-badge:before{content:"";background-color:var(--text-muted);border-radius:50%;width:6px;height:6px;display:inline-block}.status-badge.status-connected{color:var(--text-secondary)}.status-badge.status-connected:before{background-color:var(--lastfm-red);box-shadow:0 0 8px var(--lastfm-red)}.status-badge.status-disconnected{color:#ef4444}.status-badge.status-disconnected:before{background-color:#ef4444;box-shadow:0 0 8px #ef4444}@media (width<=768px){#clock-widget{padding:2rem 3rem}.state-playing #clock-widget{text-align:center;width:90%;top:1.5rem;left:50%;transform:translate(-50%)}.state-playing #now-playing-widget{width:90%;padding:1.5rem;top:55%;transform:translate(-50%,-45%)scale(1)}.widget-content{text-align:center;flex-direction:column;gap:1.5rem}.album-art-container{width:180px;height:180px;margin:0 auto}.track-scroller{justify-content:center}#track-name{font-size:1.5rem}#track-artist{font-size:1.05rem}.player-footer{justify-content:center}}.error-overlay{flex-direction:column;justify-content:center;align-items:center;width:100%;padding:1rem 0;animation:.5s cubic-bezier(.16,1,.3,1) errorFadeIn;display:flex}@keyframes errorFadeIn{0%{opacity:0;transform:scale(.95)translateY(10px)}to{opacity:1;transform:scale(1)translateY(0)}}.settings-btn{z-index:20;color:var(--text-muted);cursor:pointer;background:#ffffff08;border:1px solid #ffffff0d;border-radius:50%;outline:none;justify-content:center;align-items:center;width:42px;height:42px;transition:all .3s;display:flex;position:absolute;bottom:1.5rem;left:1.5rem}.settings-btn:hover{color:var(--text-primary);background:#ffffff14;transform:rotate(45deg)}.settings-modal{z-index:100;-webkit-backdrop-filter:blur(15px);opacity:0;pointer-events:none;background:#09090b80;justify-content:center;align-items:center;width:100vw;height:100vh;transition:opacity .4s;display:flex;position:fixed;top:0;left:0}.settings-modal.active{opacity:1;pointer-events:auto}.settings-content{flex-direction:column;width:450px;max-width:90%;padding:2.2rem;animation:.4s cubic-bezier(.16,1,.3,1) modalSlideUp;display:flex}@keyframes modalSlideUp{0%{opacity:0;transform:translateY(30px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}.settings-header{border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:.8rem;display:flex}.settings-header h3{letter-spacing:-.3px;font-size:1.2rem;font-weight:600}.close-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;font-size:1.8rem;line-height:1;transition:color .3s}.close-btn:hover{color:var(--text-primary)}.form-group{flex-direction:column;gap:.4rem;margin-bottom:1.2rem;display:flex}.form-group label{color:var(--text-secondary);font-size:.85rem;font-weight:500}.form-group input,.form-group select{color:var(--text-primary);background:#ffffff0a;border:1px solid #ffffff14;border-radius:8px;outline:none;padding:.7rem .9rem;font-size:.9rem;transition:all .3s}.form-group input:focus,.form-group select:focus{border-color:var(--accent-color-1);background:#ffffff14;box-shadow:0 0 0 2px #6366f133}.help-text{color:var(--text-muted);margin-top:.2rem;font-size:.75rem}.help-text a{color:var(--accent-color-1);text-decoration:none;transition:color .3s}.help-text a:hover{color:var(--accent-color-3);text-decoration:underline}.save-btn{background:linear-gradient(90deg, var(--accent-color-1) 0%, var(--accent-color-2) 100%);color:#fff;cursor:pointer;border:none;border-radius:8px;margin-top:1rem;padding:.8rem 1.5rem;font-weight:600;transition:all .3s}.save-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px #8b5cf666}