@import"https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap";:root{--primary-color: #222;--secondary-color: #444;--background-dark: #0a0a0a;--text-light: #eaeaea;--muted: #888;--surface: rgba(34, 34, 34, .12);--error-color: #b71c1c}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Montserrat,Arial,sans-serif;background:linear-gradient(180deg,#0a0a0a,#222);color:var(--text-light);min-height:100vh;margin:0;padding:20px;display:flex;justify-content:center;align-items:center;line-height:1.6}.app{width:100%;margin:0 auto}.app.full{max-width:1200px}@keyframes fadeIn{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.header{text-align:center;margin-bottom:24px}.header h1{font-size:2.6rem;margin-bottom:12px;color:var(--text-light);letter-spacing:.5px;display:flex;align-items:center;justify-content:center;gap:10px}.header h1 .music-icon{color:var(--text-light);background:none;filter:none}.main{display:flex;flex-direction:column;align-items:center;gap:28px;padding:24px 0 8px}.cta{display:flex;flex-direction:column;align-items:center;gap:14px}.hero-cta{display:flex;flex-direction:column;align-items:center;gap:12px}.play-button{background:var(--primary-color);color:var(--text-light);border:none;padding:14px 32px;font-size:1.05rem;font-weight:700;border-radius:14px;cursor:pointer;transition:transform .2s,box-shadow .2s,filter .2s;box-shadow:0 4px 16px #00000080;margin-bottom:8px;display:flex;align-items:center;gap:10px;position:relative}.play-button:hover{background:var(--secondary-color);box-shadow:0 8px 24px #000000b3}.play-button:disabled{opacity:.7;cursor:not-allowed;transform:none}.player-container{width:100%;margin-top:0;display:flex;justify-content:center}.youtube-iframe{border-radius:18px;box-shadow:0 24px 54px #0000008c,0 0 0 1px #c0392b0f inset;width:100%;max-width:720px;aspect-ratio:16 / 9;border:none;background:#000;animation:fadeIn .8s}.player-error{text-align:center;color:var(--error-color);padding:20px;background:#2223;border-radius:10px;margin-top:10px}.player-error .material-icons{font-size:2.5rem;margin-bottom:10px}.footer{margin-top:30px;text-align:center;color:var(--muted);font-size:.95rem;opacity:.9}.footer-text{display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap}.youtube-link,.spotify-link{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;gap:5px;margin-left:5px;transition:opacity .2s}.youtube-link:hover,.spotify-link:hover{color:var(--text-light)}.youtube-link .material-icons,.spotify-link .material-icons{text-decoration:none}.youtube-link:hover .youtube-text,.spotify-link:hover .spotify-text{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .3s}.modal-content{background:#181818;border-radius:18px;padding:30px;text-align:center;max-width:400px;width:90%;box-shadow:0 8px 32px #000000b3;position:relative;animation:slideIn .3s}@keyframes slideIn{0%{transform:translateY(-50px);opacity:0}to{transform:translateY(0);opacity:1}}.modal h2{margin:10px 0;color:var(--text-light)}.modal p{margin-bottom:20px;color:var(--muted);line-height:1.5}.modal-buttons{display:flex;justify-content:center;gap:15px;margin-top:20px;flex-wrap:wrap}.modal-button{padding:10px 20px;border:none;border-radius:8px;font-weight:700;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:8px}.modal-button.confirm{background:var(--primary-color);color:#fff}.modal-button.cancel{background:#444;color:#fff}.modal-button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0003}.error-message{color:var(--error-color);background:#2223;padding:10px 15px;border-radius:8px;margin:10px 0;text-align:center;width:100%;animation:shake .5s}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-5px)}40%,80%{transform:translate(5px)}}.material-icons{vertical-align:middle;font-size:1.2em}.music-icon{margin-right:10px;color:var(--primary-color)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spin{animation:spin 1s linear infinite;display:inline-flex;align-items:center}.error-icon{font-size:3rem;color:var(--error-color);margin-bottom:15px}@media (max-width: 600px){.main{padding:8px 0}.header h1{font-size:1.8rem}.header .description{font-size:.95rem}.play-button{padding:12px 24px;font-size:1rem}.youtube-iframe{height:200px}.footer{font-size:.85rem}}@media (max-width: 400px){.youtube-iframe{height:180px}.modal-content{padding:20px 15px}.modal-buttons{flex-direction:column;gap:10px}.modal-button{width:100%;justify-content:center}}