:root{--color-primary: #ef4444;--color-bg: #0f172a;--color-card: #1e293b;--color-text: #f8fafc;--color-text-muted: #94a3b8;--color-accent: #3b82f6;--color-border: rgba(255, 255, 255, .05);--color-hover: rgba(255, 255, 255, .03);--color-play-bg: #f8fafc;--color-play-text: #0f172a;--color-btn-muted: #475569;--font-main: "Outfit", system-ui, sans-serif;--shadow-lg: 0 20px 25px -5px rgb(0 0 0 / .3), 0 8px 10px -6px rgb(0 0 0 / .3);--shadow-card: 0 25px 50px -12px rgb(0 0 0 / .5);--transition-speed: .3s}.light-theme{--color-bg: #f1f5f9;--color-card: #ffffff;--color-text: #0f172a;--color-text-muted: #64748b;--color-border: rgba(0, 0, 0, .05);--color-hover: #f8fafc;--color-play-bg: #0f172a;--color-play-text: #ffffff;--color-btn-muted: #94a3b8;--shadow-lg: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--shadow-card: 0 25px 50px -12px rgb(0 0 0 / .15)}*{box-sizing:border-box;margin:0;padding:0;transition:background-color var(--transition-speed),color var(--transition-speed),border-color var(--transition-speed),box-shadow var(--transition-speed)}body{font-family:var(--font-main);background:var(--color-bg);color:var(--color-text);min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:2rem 1rem}.container{width:100%;max-width:800px;display:flex;flex-direction:column;gap:2.5rem}.header{display:flex;flex-direction:column;align-items:center;gap:1rem;position:relative}.theme-toggle{position:absolute;top:0;right:0;background:var(--color-card);border:1px solid var(--color-border);color:var(--color-text);width:3.5rem;height:3.5rem;border-radius:1rem;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-lg);transition:transform .2s}.theme-toggle:hover{transform:scale(1.05)}.logo-large{filter:drop-shadow(0 10px 15px rgba(0,0,0,.3))}.card{background:var(--color-card);border-radius:2.5rem;padding:2.5rem;box-shadow:var(--shadow-card);border:1px solid var(--color-border);display:flex;flex-direction:column;gap:2.5rem}.player-section{display:flex;gap:2.5rem;align-items:stretch}@media(max-width:640px){.player-section{flex-direction:column;align-items:center}.card{padding:1.5rem}.theme-toggle{position:fixed;bottom:2rem;right:2rem;z-index:100}}.cover-wrapper{width:280px;height:280px;flex-shrink:0;border-radius:1.5rem;overflow:hidden;box-shadow:var(--shadow-lg);border:4px solid var(--color-card)}.cover-img{width:100%;height:100%;object-fit:cover}.controls-wrapper{flex:1;display:flex;flex-direction:column;justify-content:space-between}.title{font-size:1.75rem;font-weight:800;color:var(--color-text);margin-bottom:.25rem}.artist{font-size:1.125rem;font-weight:500;color:var(--color-text-muted)}.progress-area{margin-top:1.5rem}.time-info{display:flex;justify-content:space-between;font-size:.75rem;font-weight:700;color:var(--color-text-muted);margin-bottom:.5rem}.progress-bar{height:4px;background:var(--color-border);border-radius:999px;position:relative}.progress-fill{height:100%;background:var(--color-accent);width:35%;border-radius:999px}.progress-knob{position:absolute;left:35%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;background:var(--color-accent);border-radius:50%;box-shadow:0 0 10px #3b82f680}.buttons-row{display:flex;align-items:center;justify-content:space-between;margin-top:1.5rem}.play-btn{width:3.5rem;height:3.5rem;border-radius:50%;background:var(--color-play-bg);color:var(--color-play-text);display:flex;align-items:center;justify-content:center;transition:all .2s;border:none;cursor:pointer}.play-btn:hover{transform:scale(1.1);opacity:.9}.small-btn{background:none;border:none;color:var(--color-btn-muted);cursor:pointer;transition:color .2s}.small-btn:hover{color:var(--color-text)}.volume-area{display:flex;align-items:center;gap:1rem;margin-top:1.5rem}.volume-slider{flex:1;appearance:none;background:var(--color-border);height:4px;border-radius:999px;cursor:pointer}.volume-slider::-webkit-slider-thumb{appearance:none;width:10px;height:10px;background:var(--color-text);border-radius:50%}.history-section{border-top:1px solid var(--color-border);padding-top:2rem}.section-title{font-size:1.125rem;font-weight:800;margin-bottom:1.5rem;display:flex;justify-content:space-between}.history-item{display:flex;align-items:center;gap:1.25rem;padding:1rem;border-radius:1.25rem;transition:background .2s}.history-item:hover{background:var(--color-hover)}.item-index{width:4rem;height:4rem;background:var(--color-border);border-radius:1rem;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}.item-info{flex:1;overflow:hidden}.item-title{font-size:1.1rem;font-weight:700;color:var(--color-text);margin-bottom:.25rem}.item-artist{font-size:.9rem;font-weight:500;color:var(--color-text-muted)}.vumeter-container{display:flex;align-items:flex-end;justify-content:center;gap:4px;height:32px;width:100%;padding:0 10px}.vumeter-bar{flex:1;max-width:6px;background:var(--color-accent);border-radius:2px;height:20%;will-change:height;transition:height .3s ease}.vumeter-active .vumeter-bar{animation:vumeter-simple .8s ease-in-out infinite alternate}@keyframes vumeter-simple{0%{height:20%;opacity:.6}to{height:90%;opacity:1}}.vumeter-bar:nth-child(1){animation-delay:0s}.vumeter-bar:nth-child(2){animation-delay:.2s}.vumeter-bar:nth-child(3){animation-delay:.4s}.vumeter-bar:nth-child(4){animation-delay:.1s}.vumeter-bar:nth-child(5){animation-delay:.3s}.vumeter-bar:nth-child(6){animation-delay:.5s}.vumeter-bar:nth-child(7){animation-delay:.15s}.vumeter-bar:nth-child(8){animation-delay:.35s}.vumeter-bar:nth-child(9){animation-delay:.55s}.vumeter-bar:nth-child(10){animation-delay:.25s}.vumeter-bar:nth-child(11){animation-delay:.45s}.vumeter-bar:nth-child(12){animation-delay:.65s}.friends-links{display:flex;justify-content:center;gap:2rem;margin-top:1rem;padding:1rem}.friend-link{color:var(--color-text-muted);text-decoration:none;font-size:.85rem;font-weight:600;transition:color .2s,transform .2s;letter-spacing:.05em;opacity:.6}.friend-link:hover{color:var(--color-accent);opacity:1;transform:translateY(-2px)}@media(max-width:640px){.friends-links{flex-direction:column;align-items:center;gap:1rem}}.ad-section{width:100%;display:flex;justify-content:center;margin:1rem 0}.ad-wrapper{width:100%;max-width:728px;min-height:90px;background:var(--color-card);border:1px dashed var(--color-border);border-radius:1.25rem;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.5rem;overflow:hidden;position:relative}.ad-label{font-size:.6rem;font-weight:700;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.15em;opacity:.5;margin-bottom:.25rem}@media(max-width:640px){.ad-wrapper{max-width:320px;min-height:100px}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .6s ease-out forwards}.app-container{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:2rem 1rem;gap:2rem}.header-logo{width:80px;height:80px;border-radius:1rem;box-shadow:var(--shadow-lg)}.main-content{width:100%;max-width:600px}.player-card{background:var(--color-card);border-radius:2rem;padding:2rem;box-shadow:var(--shadow-card);display:flex;gap:2rem;align-items:center}@media(max-width:640px){.player-card{flex-direction:column;text-align:center}}.cover-container{width:160px;height:160px;flex-shrink:0;border-radius:1rem;overflow:hidden;box-shadow:var(--shadow-lg)}.cover-art{width:100%;height:100%;object-fit:cover}.player-info{flex:1;display:flex;flex-direction:column;gap:.5rem}.song-title{font-size:1.5rem;font-weight:700;color:var(--color-text)}.artist-name{font-size:1rem;color:var(--color-text-muted)}.play-button-large{margin-top:1rem;padding:1rem 2rem;font-size:1.1rem;font-weight:700;background:var(--color-primary);color:#fff;border:none;border-radius:2rem;cursor:pointer;transition:transform .2s,box-shadow .2s}.play-button-large:hover{transform:scale(1.05);box-shadow:0 10px 25px #ef444466}.embedded-player{margin-top:1rem;display:flex;flex-direction:column;gap:.5rem}.player-iframe{width:100%;height:400px;border:none;border-radius:1rem;background:var(--color-bg)}.close-player-btn{padding:.5rem 1rem;font-size:.9rem;background:var(--color-card);color:var(--color-text-muted);border:1px solid var(--color-border);border-radius:1rem;cursor:pointer}.close-player-btn:hover{color:var(--color-text)}.external-link{display:inline-flex;align-items:center;gap:.5rem;margin-top:.5rem;color:var(--color-text-muted);font-size:.85rem;text-decoration:none}.external-link:hover{color:var(--color-accent)}.live-badge{display:inline-block;margin-top:.5rem;padding:.25rem .75rem;font-size:.7rem;font-weight:700;background:var(--color-primary);color:#fff;border-radius:1rem;text-transform:uppercase;letter-spacing:.1em}.footer{margin-top:auto;text-align:center}.footer-links{display:flex;gap:2rem;justify-content:center;margin-bottom:1rem}.footer-links a{color:var(--color-text-muted);text-decoration:none;font-size:.85rem}.footer-links a:hover{color:var(--color-accent)}.copyright{font-size:.75rem;color:var(--color-text-muted);opacity:.6}