.app{min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}.header{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;border-bottom:1px solid var(--border);position:sticky;top:0;background:#0a0a0ae6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:10}.logo{display:flex;align-items:center;gap:10px;font-size:1.1rem;font-weight:700;letter-spacing:-.01em;color:var(--text)}.header-actions{display:flex;align-items:center;gap:12px}.status-badge{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--text-mid);font-family:var(--font-mono);padding:6px 12px;border:1px solid var(--border);border-radius:99px}.status-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.btn{padding:8px 18px;border-radius:99px;font-family:var(--font-sans);font-size:.85rem;font-weight:600;transition:all .15s ease;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px}.btn-green{background:var(--green);color:#000}.btn-green:hover{background:#22d65f;transform:scale(1.02)}.btn-outline{background:transparent;color:var(--text);border:1px solid var(--border)}.btn-outline:hover{border-color:var(--text-mid);background:var(--surface)}.btn-sm{padding:6px 14px;font-size:.8rem}.error-banner{background:#e8534a1f;border-bottom:1px solid rgba(232,83,74,.3);color:var(--red);padding:10px 28px;font-size:.85rem;display:flex;align-items:center;justify-content:space-between;font-family:var(--font-mono)}.error-banner button{color:var(--red);font-size:1.2rem;opacity:.7;transition:opacity .1s}.error-banner button:hover{opacity:1}.main{flex:1;display:grid;grid-template-columns:380px 1fr;gap:0;max-width:1100px;width:100%;margin:0 auto;padding:36px 28px;gap:40px}@media (max-width: 720px){.main{grid-template-columns:1fr;gap:32px}}.now-playing{display:flex;flex-direction:column;align-items:center;gap:20px}.album-art-wrap{position:relative;width:240px;height:240px}.album-art,.album-art.placeholder{width:100%;height:100%;border-radius:var(--radius);object-fit:cover;display:block}.album-art.placeholder{background:var(--surface2);display:flex;align-items:center;justify-content:center}.vinyl-ring{position:absolute;top:-8px;right:-8px;bottom:-8px;left:-8px;border-radius:50%;border:2px solid rgba(29,185,84,.3);animation:spin 8s linear infinite;pointer-events:none}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.track-info{text-align:center;width:100%}.track-name{font-size:1.2rem;font-weight:700;color:var(--text);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-artist{font-size:.9rem;color:var(--text-mid)}.playlist-context{display:flex;align-items:center;flex-direction:column;gap:3px;margin-top:7px}.playlist-context-row{display:flex;align-items:center;gap:5px;overflow:hidden}.playlist-name{font-size:.75rem;font-family:var(--font-mono);color:var(--text-mid);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.playlist-dot{font-size:.7rem;color:var(--text-dim);flex-shrink:0}.playlist-owner{font-size:.75rem;font-family:var(--font-mono);color:var(--text-dim);white-space:nowrap;flex-shrink:0}.playlist-remaining{font-size:.72rem;font-family:var(--font-mono);color:var(--green);opacity:.8}.progress-wrap{display:flex;align-items:center;gap:10px;width:100%}.time{font-family:var(--font-mono);font-size:.72rem;color:var(--text-dim);min-width:32px;text-align:center}.progress-bar{flex:1;height:4px;background:var(--border);border-radius:99px;cursor:pointer;position:relative;transition:height .15s}.progress-bar:hover{height:6px}.progress-fill{height:100%;background:var(--green);border-radius:99px;position:relative;transition:width .5s linear}.progress-thumb{width:12px;height:12px;border-radius:50%;background:var(--text);position:absolute;right:-6px;top:50%;transform:translateY(-50%);opacity:0;transition:opacity .15s}.progress-bar:hover .progress-thumb{opacity:1}.controls{display:flex;align-items:center;gap:16px}.ctrl-btn{color:var(--text-mid);width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .15s ease;background:transparent}.ctrl-btn:hover{color:var(--text);background:var(--surface)}.play-btn{width:56px;height:56px;background:var(--green)!important;color:#000!important}.play-btn:hover{transform:scale(1.06)}.volume-row{display:flex;align-items:center;gap:10px;width:100%}.volume-slider{flex:1;-webkit-appearance:none;height:3px;background:var(--border);border-radius:99px;outline:none;cursor:pointer}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--text);cursor:pointer;transition:transform .1s}.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.3)}.shortcuts-section{display:flex;flex-direction:column;gap:24px}.shortcuts-header{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.shortcuts-header h2{font-size:1rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim)}.mono{font-family:var(--font-mono);font-size:.75rem;color:var(--text-dim)}.shortcut-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}@media (max-width: 520px){.shortcut-grid{grid-template-columns:repeat(2,1fr)}}.shortcut-btn{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:18px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);text-align:left;transition:all .18s ease;overflow:hidden;cursor:pointer}.shortcut-btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--green);opacity:0;transition:opacity .18s}.shortcut-btn:hover{border-color:var(--text-mid);transform:translateY(-2px);box-shadow:0 8px 24px #0006}.shortcut-btn:hover:before{opacity:.04}.shortcut-btn.active{border-color:var(--green)}.shortcut-btn.active:before{opacity:.07}.shortcut-btn.loading{opacity:.6;pointer-events:none}.shortcut-btn.loading:after{content:"";position:absolute;top:0;left:-100%;width:200%;height:2px;background:linear-gradient(90deg,transparent,var(--green),transparent);animation:loading-sweep 1s linear infinite}@keyframes loading-sweep{to{left:100%}}.shortcut-top-row{display:flex;align-items:flex-start;justify-content:space-between;width:100%;position:relative}.shortcut-emoji{font-size:1.8rem;line-height:1;position:relative}.shuffle-badge{display:flex;align-items:center;gap:3px;color:var(--green);opacity:.7;transition:opacity .15s;font-family:var(--font-mono);font-size:.65rem;padding-top:2px}.shortcut-btn:hover .shuffle-badge,.shortcut-btn.active .shuffle-badge{opacity:1}.cached-count{font-size:.65rem;line-height:1}.shortcut-label{font-size:.95rem;font-weight:600;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.shortcut-desc{font-size:.75rem;color:var(--text-dim);position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.active-dot{position:absolute;top:10px;right:10px;width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 2s infinite}.empty-shortcuts{grid-column:1 / -1;text-align:center;padding:40px 20px;color:var(--text-dim);font-size:.9rem;border:1px dashed var(--border);border-radius:var(--radius);font-family:var(--font-mono)}.json-config{display:flex;flex-direction:column;gap:8px;padding:20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-top:auto}.json-label{font-size:.72rem;font-family:var(--font-mono);color:var(--text-dim);letter-spacing:.06em;text-transform:uppercase}.json-input-row{display:flex;gap:8px}.json-input{flex:1;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;color:var(--text);font-size:.8rem;outline:none;transition:border-color .15s}.json-input:focus{border-color:var(--text-dim)}.json-input::placeholder{color:var(--text-dim)}.page-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}.page-tab{background:transparent;color:var(--text-dim);border:1px solid var(--border);border-radius:999px;padding:6px 14px;cursor:pointer;font:inherit}.page-tab.active{color:var(--green);border-color:var(--green)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0a0a0a;--surface: #111111;--surface2: #1a1a1a;--border: #222222;--green: #1db954;--green-dim: #158a3e;--text: #f0f0f0;--text-dim: #666666;--text-mid: #999999;--red: #e8534a;--font-sans: "Syne", sans-serif;--font-mono: "DM Mono", monospace;--radius: 12px;--radius-sm: 6px}html,body,#root{height:100%;background:var(--bg);color:var(--text);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}button{cursor:pointer;border:none;background:none;font-family:inherit}input{font-family:var(--font-mono)}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px}