:root{--bg-main: linear-gradient(135deg, #2c3e50 0%, #121212 70%);--bg-card: rgba(255, 255, 255, .07);--bg-player: rgba(28, 28, 28, .85);--text-main: #ffffff;--text-muted: #b3b3b3;--accent: linear-gradient(45deg, #1ed760, #1db954);--accent-hover: linear-gradient(45deg, #25f575, #1ed760);--folder-color: #299dff;--border: rgba(255, 255, 255, .1);--danger: #e91429;--safe-area-bottom: env(safe-area-inset-bottom)}*{box-sizing:border-box}body{margin:0;font-family:Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg-main);background-attachment:fixed;color:var(--text-main);-webkit-font-smoothing:antialiased;padding-bottom:calc(120px + var(--safe-area-bottom))}.app-container{max-width:800px;margin:0 auto;min-height:100vh;position:relative}.app-header{position:sticky;top:0;z-index:10;background-color:#141414b3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:1rem;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border)}.app-title{margin:0;font-size:1.25rem;font-weight:700;letter-spacing:-.5px;color:var(--text-main)}.icon-button{background:transparent;border:none;color:var(--text-main);padding:8px;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .2s}.icon-button:hover{background:rgba(255,255,255,.1)}.settings-panel{background-color:#141414b3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:1.5rem;border-bottom:1px solid var(--border);animation:slideDown .3s ease-out}@keyframes slideDown{0%{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}.input-group{display:flex;flex-direction:column;gap:.75rem}.input-label{font-size:.875rem;color:var(--text-muted)}.text-input{background:#333;border:1px solid transparent;padding:12px;border-radius:4px;color:#fff;font-size:1rem;width:100%}.text-input:focus{outline:none;border-color:#1ed760}.primary-button{background-image:var(--accent);color:#fff;border:none;padding:12px;border-radius:24px;font-weight:700;font-size:1rem;cursor:pointer;transition:transform .1s,filter .2s;width:100%}.primary-button:hover{filter:brightness(1.1)}.primary-button:active{transform:scale(.98)}.primary-button:disabled{opacity:.6;cursor:not-allowed;filter:grayscale(1)}.playlist-container{padding:1rem}.playlist-header{font-size:.875rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);margin-bottom:1rem;display:flex;justify-content:space-between}.track-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}.back-nav-item{display:flex;align-items:center;padding:12px;background-color:#ffffff0d;border-radius:8px;cursor:pointer;margin-bottom:.5rem;color:var(--text-muted);font-weight:600}.back-nav-item:hover{background-color:#ffffff1a;color:#fff}.back-nav-item svg{margin-right:12px;flex-shrink:0}.track-item{display:flex;align-items:center;padding:12px;background-color:var(--bg-card);border-radius:8px;cursor:pointer;transition:background-color .2s;border:1px solid transparent}.track-item:hover{background-color:#ffffff1a}.track-item.active{background-color:#1db95426;border-color:#1db954}.track-item.folder{border-left:4px solid var(--folder-color)}.track-icon{width:40px;height:40px;background:#333;border-radius:4px;display:flex;align-items:center;justify-content:center;margin-right:12px;flex-shrink:0;color:var(--text-muted)}.track-item.folder .track-icon{color:var(--folder-color);background:rgba(41,157,255,.1)}.track-item.active .track-icon{color:#1db954}.track-info{flex:1;overflow:hidden}.track-name{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px;font-size:1rem}.track-status{font-size:.75rem;color:#1db954;display:flex;align-items:center;gap:6px;min-height:16px}.track-meta{font-size:.75rem;color:var(--text-muted)}.error-banner{background-color:#e914291a;border:1px solid var(--danger);color:#ff6b6b;padding:1rem;margin:1rem;border-radius:8px;font-size:.9rem}.bottom-player{position:fixed;bottom:0;left:0;right:0;background-color:var(--bg-player);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--border);padding:12px 16px calc(12px + var(--safe-area-bottom)) 16px;z-index:100;display:flex;flex-direction:column;gap:12px;box-shadow:0 -4px 20px #00000080}.progress-container{width:100%;display:flex;align-items:center;gap:10px}.time-text{font-size:.75rem;color:var(--text-muted);width:40px;text-align:center}.progress-bar-wrapper{flex:1;position:relative;height:20px;display:flex;align-items:center}.seek-slider{-webkit-appearance:none;width:100%;height:4px;background:#4d4d4d;border-radius:2px;outline:none;padding:0;margin:0}.seek-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;background:white;border-radius:50%;cursor:pointer;transition:transform .1s}.seek-slider:active::-webkit-slider-thumb{transform:scale(1.3);background-image:var(--accent)}.player-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.player-track-info{overflow:hidden}.current-track-title{font-size:.9rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}.current-track-status{font-size:.75rem;color:#1db954;margin-top:2px;display:flex;align-items:center;gap:6px;min-height:16px}.player-controls{display:flex;align-items:center;gap:1.5rem}.control-btn{background:none;border:none;color:var(--text-main);cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:opacity .2s}.control-btn:disabled{opacity:.3;cursor:default}.control-btn.play-pause{width:48px;height:48px;background:white;color:#000;border-radius:50%;box-shadow:0 2px 8px #0003}.control-btn.play-pause:active{transform:scale(.95)}.volume-control{display:flex;justify-content:flex-end}.pulse-anim{animation:pulse 2s infinite}@keyframes pulse{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}.spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.1);border-left-color:#1ed760;border-radius:50%;animation:spin .8s linear infinite;display:block}@keyframes spin{to{transform:rotate(360deg)}}@media (min-width: 768px){.app-container{padding-top:2rem}.playlist-container{padding:0 2rem}}