:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0}.search-container{position:relative;margin-bottom:24px}.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);z-index:1}.search-input{width:100%;padding:12px 16px 12px 40px;background-color:#2d2d2d;color:#f3f3f3;border:1px solid #444;border-radius:8px;font-size:16px;outline:none;transition:border-color .2s;box-sizing:border-box}.search-input:focus{border-color:#ef4444}.track{display:flex;align-items:center;justify-content:space-between;padding:10px;background-color:#2d2d2d;border-radius:8px;transition:background-color .2s;cursor:pointer}.track:hover{background-color:#3c3c3c}.track-info{display:flex}.track-art{width:68px;height:68px;margin-right:8px;flex-shrink:0}.cover-art{width:100%;height:100%;object-fit:cover;border-radius:4px}.placeholder-art{width:100%;height:100%;background:linear-gradient(135deg,#dc2626,#991b1b);border-radius:4px;display:flex;align-items:center;justify-content:center}.track-title{color:#f3f3f3;font-weight:500;margin:0;font-size:14px}.track-artist{color:#b0b0b0;margin:0;font-size:12px}.track-album{color:#888;margin:0;font-size:11px}.track-actions{display:flex;align-items:center;margin-left:6px}.duration{color:#b0b0b0;margin:0;font-size:12px}.add-button{padding:8px;background-color:#b91c1c;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.add-button:hover{background-color:#7f1d1d}.remove-button{padding:8px;background-color:#ef4444;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.remove-button:hover{background-color:#b91c1c}.section-title{font-size:20px;font-weight:700;color:#f3f3f3;margin-bottom:16px}.empty-state{text-align:center;padding:48px 0;display:flex;flex-direction:column;align-items:center;gap:16px}.empty-state-text{color:#9ca3af;margin:0}.playlist{background-color:#222;border-radius:8px;padding:24px}.playlist-header{margin-bottom:24px}.playlist-title{font-size:24px;font-weight:700;background-color:transparent;color:#f3f3f3;border:none;outline:none;width:100%;margin-bottom:8px;padding:0}.playlist-info{color:#b0b0b0;margin:0}.playlist-empty{text-align:center;padding:48px 0;display:flex;flex-direction:column;align-items:center;gap:16px}.empty-playlist-text{color:#b0b0b0;margin:0;font-size:16px}.empty-playlist-subtext{color:#888;margin:0;font-size:14px}.playlist-track{display:flex;align-items:center;gap:12px}.playlist-track-content{flex:1}.track-list{display:flex;flex-direction:column;gap:12px}.save-section{margin:16px;display:flex;justify-content:center}.save-btn{cursor:pointer;border:none;padding:8px 20px;position:relative;display:inline-block;letter-spacing:.6px;font-weight:700;border-radius:40px;overflow:hidden;background:#222;color:#fff;border:2px solid #991b1b}.save-btn span{position:relative;z-index:10;transition:color .4s}.save-btn:hover span,.save-icon:hover span{color:#939393}.save-btn:before,.save-btn:after{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0}.save-btn:before{content:"";background:#991b1b;width:120%;left:-10%;transform:skew(30deg);transition:transform .4s cubic-bezier(.3,1,.8,1)}.save-btn:hover:before{transform:translate3d(100%,0,0)}.save-icon{margin-right:8px;position:relative;top:3px}.footer{background-color:#222;margin-top:auto}.footer-content{max-width:1200px;margin:0 auto;text-align:center;color:#b0b0b0;font-size:.8rem;letter-spacing:1px}.footer-content a{color:#fff}.footer-content a:hover{color:#b0b0b0}.app{min-height:100vh;background-color:#1a1a1a;color:#f3f3f3;font-family:Arial,sans-serif;display:flex;flex-direction:column}.container{max-width:1200px;margin:0 auto;padding:40px 20px;flex:1}.header{margin-bottom:20px;display:flex;justify-content:space-between;align-items:center}.app-title{font-size:56px;font-weight:700;background:linear-gradient(to right,#ef4444,#991b1b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0}.app-subtitle{color:#b0b0b0;margin:0}.main-content{display:grid;grid-template-columns:1fr 1fr;gap:32px}.search-section,.playlist-section{display:flex;flex-direction:column}.login-btn{cursor:pointer;border:none;padding:8px 20px;position:relative;display:inline-block;letter-spacing:.6px;font-weight:700;border-radius:40px;overflow:hidden;background:#222;color:#fff;border:2px solid #991b1b}.login-btn span{position:relative;z-index:10;transition:color .4s}.login-btn:hover span{color:#939393}.login-btn:before,.login-btn:after{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0}.login-btn:before{content:"";background:#991b1b;width:120%;left:-10%;transform:skew(30deg);transition:transform .4s cubic-bezier(.3,1,.8,1)}.login-btn:hover:before{transform:translate3d(100%,0,0)}.logged{color:#b0b0b0;border:2px solid #991b1b;padding:6px 10px;border-radius:8px}@media (max-width: 768px){.main-content{grid-template-columns:1fr;gap:24px}.container{padding:20px}.header{flex-direction:column}.login-btn{margin-top:20px}.app-title{font-size:38px}.main-content{gap:24px}.playlist{padding:16px}}