:root{color-scheme:light;font-family:Segoe UI,system-ui,-apple-system,sans-serif;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:#fef9ef;color:#1a1a2e}.app{min-height:100vh;display:flex;flex-direction:column}.header{background:linear-gradient(135deg,#ff6b6b,#feca57,#48dbfb,#ff9ff3);background-size:300% 300%;animation:headerShift 8s ease infinite;padding:1.5rem 2rem;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.15)}@keyframes headerShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.header h1{font-size:2rem;font-weight:800;letter-spacing:-.03em}.header p{opacity:.9;font-size:.95rem;margin-top:.25rem}.main{flex:1;display:grid;grid-template-columns:1fr 380px;gap:0;max-width:1200px;margin:2rem auto;width:100%;padding:0 2rem}@media(max-width:800px){.main{grid-template-columns:1fr}}.library{padding-right:2rem}.section-title{font-size:1.1rem;font-weight:700;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}.section-title .icon{font-size:1.3rem}.song-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem}.song-card{background:#fff;border-radius:1rem;overflow:hidden;box-shadow:0 4px 20px #0000000f;transition:transform .25s ease,box-shadow .25s ease;cursor:pointer;position:relative}.song-card:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 12px 32px #0000001f}.song-card.added{opacity:.5;pointer-events:none}.song-cover{width:100%;aspect-ratio:1;position:relative;overflow:hidden}.song-cover-art{width:100%;height:100%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;animation:coverPulse 4s ease-in-out infinite}@keyframes coverPulse{0%,to{filter:saturate(1) brightness(1)}50%{filter:saturate(1.3) brightness(1.1)}}.song-cover-art .quad{transition:transform .6s ease}.song-card:hover .song-cover-art .quad:nth-child(1){transform:scale(1.1)}.song-card:hover .song-cover-art .quad:nth-child(2){transform:scale(1.1) rotate(2deg)}.song-card:hover .song-cover-art .quad:nth-child(3){transform:scale(1.1) rotate(-2deg)}.song-card:hover .song-cover-art .quad:nth-child(4){transform:scale(1.1)}.song-card:hover .song-cover-art{animation:coverSpin .8s ease}@keyframes coverSpin{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.song-info{padding:.75rem}.song-title{font-weight:700;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-artist{font-size:.75rem;color:#888;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.add-badge{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;background:#fffffff2;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:700;color:#ff6b6b;box-shadow:0 2px 8px #00000026;opacity:0;transform:scale(.5);transition:all .2s ease}.song-card:hover .add-badge{opacity:1;transform:scale(1)}.playlist-panel{background:#fff;border-radius:1.25rem;box-shadow:0 4px 30px #00000014;padding:1.5rem;height:fit-content;position:sticky;top:2rem;border:2px solid transparent;background-clip:padding-box;position:relative}.playlist-panel:before{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:1.35rem;background:linear-gradient(135deg,#ff6b6b,#feca57,#48dbfb,#ff9ff3);z-index:-1;animation:borderGlow 6s ease infinite;background-size:300% 300%}@keyframes borderGlow{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.playlist-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.playlist-name-input{font-size:1.1rem;font-weight:700;border:none;background:transparent;color:#1a1a2e;width:100%;outline:none;border-bottom:2px solid #eee;padding-bottom:.25rem;transition:border-color .3s}.playlist-name-input:focus{border-color:#ff6b6b}.playlist-count{font-size:.8rem;color:#999;background:#f5f5f5;padding:.2rem .6rem;border-radius:1rem;white-space:nowrap}.playlist-tracks{display:flex;flex-direction:column;gap:.5rem;min-height:80px;max-height:400px;overflow-y:auto}.playlist-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1rem;color:#ccc;text-align:center}.playlist-empty .icon{font-size:2.5rem;margin-bottom:.5rem;animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.playlist-empty p{font-size:.85rem}.track-item{display:flex;align-items:center;gap:.75rem;padding:.5rem;border-radius:.75rem;background:#fafafa;transition:background .2s,transform .2s;animation:slideIn .35s ease}@keyframes slideIn{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.track-item:hover{background:#fff0f0}.track-mini-cover{width:40px;height:40px;border-radius:.5rem;overflow:hidden;flex-shrink:0}.track-mini-cover .quad{width:50%;height:50%;float:left}.track-details{flex:1;min-width:0}.track-details .t-title{font-weight:600;font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-details .t-artist{font-size:.72rem;color:#999}.track-remove{width:26px;height:26px;border-radius:50%;border:none;background:#ff6b6b;color:#fff;font-size:.85rem;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s,transform .2s;flex-shrink:0}.track-item:hover .track-remove{opacity:1}.track-remove:hover{transform:scale(1.15);background:#ee5a5a}.playlist-total{margin-top:1rem;padding-top:.75rem;border-top:1px solid #eee;display:flex;justify-content:space-between;font-size:.82rem;color:#888}.save-btn{margin-top:1rem;width:100%;padding:.85rem;border:none;border-radius:.75rem;background:linear-gradient(135deg,#ff6b6b,#ff9ff3);color:#fff;font-size:.95rem;font-weight:700;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 16px #ff6b6b4d}.save-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px #ff6b6b66}.save-btn:active{transform:translateY(0)}.toast{position:fixed;bottom:2rem;left:50%;transform:translate(-50%) translateY(100px);background:#1a1a2e;color:#fff;padding:.85rem 1.5rem;border-radius:1rem;font-weight:600;font-size:.9rem;box-shadow:0 8px 32px #0003;z-index:100;opacity:0;transition:all .4s cubic-bezier(.34,1.56,.64,1)}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}.cover-pattern-0{background:linear-gradient(135deg,#ff6b6b,#feca57)}.cover-pattern-1{background:linear-gradient(135deg,#48dbfb,#ff9ff3)}.cover-pattern-2{background:linear-gradient(135deg,#0abde3,#10ac84)}.cover-pattern-3{background:linear-gradient(135deg,#f368e0,#ff9f43)}.cover-pattern-4{background:linear-gradient(135deg,#ee5a24,#feca57)}.cover-pattern-5{background:linear-gradient(135deg,#6c5ce7,#a29bfe)}.cover-pattern-6{background:linear-gradient(135deg,#fd79a8,#fdcb6e)}.cover-pattern-7{background:linear-gradient(135deg,#00b894,#55efc4)}.cover-pattern-8{background:linear-gradient(135deg,#e17055,#fab1a0)}.cover-pattern-9{background:linear-gradient(135deg,#0984e3,#74b9ff)}.cover-pattern-10{background:linear-gradient(135deg,#d63031,#ff7675)}.cover-pattern-11{background:linear-gradient(135deg,#e84393,#fd79a8)}.song-cover:after{content:"";position:absolute;bottom:-50%;left:-20%;width:140%;height:60%;background:#fff3;border-radius:40%;transition:transform .6s ease;transform:translateY(60%)}.song-card:hover .song-cover:after{transform:translateY(20%)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}