:root{--primary:#1db954;--primary-dark:#1aa34a;--bg:#121212;--bg-elevated:#181818;--bg-base:#1a1a1a;--text:#fff;--text-muted:#b3b3b3;--border:#282828;--error:#e22134;--success:#1db954;--warning:orange}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);padding-bottom:70px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;overflow-x:hidden}button{cursor:pointer;color:inherit;background:0 0;border:none;font-family:inherit}input,textarea,select{border:1px solid var(--border);background:var(--bg-elevated);color:var(--text);border-radius:4px;width:100%;padding:10px;font-family:inherit}input:focus,textarea:focus,select:focus{outline:2px solid var(--primary);outline-offset:2px}.header{background:var(--bg-elevated);border-bottom:1px solid var(--border);z-index:100;padding:12px 16px;position:sticky;top:0}.header-title{margin-bottom:8px;font-size:18px;font-weight:600}.header-actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.btn{white-space:nowrap;border-radius:20px;padding:8px 16px;font-size:14px;font-weight:500;transition:all .2s}.btn-primary{background:var(--primary);color:#000}.btn-primary:hover{background:var(--primary-dark);transform:scale(1.05)}.btn-secondary{border:1px solid var(--text-muted);color:var(--text);background:0 0}.btn-secondary:hover{border-color:var(--text)}.btn-danger{background:var(--error);color:#fff}.btn-sm{padding:6px 12px;font-size:12px}.main-content{max-width:1200px;margin:0 auto;padding:16px}.section{margin-bottom:24px}.section-title{margin-bottom:12px;font-size:20px;font-weight:700}.section-subtitle{color:var(--text-muted);margin:16px 0 8px;font-size:16px;font-weight:600}.card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:8px;margin-bottom:12px;padding:16px}.card-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;display:grid}.card-item{background:var(--bg-elevated);cursor:pointer;border:1px solid var(--border);border-radius:8px;transition:all .2s;overflow:hidden}.card-item:hover{background:var(--bg-base);transform:translateY(-2px)}.card-image{aspect-ratio:1;object-fit:cover;background:var(--bg-base);width:100%}.card-content{padding:12px}.card-title{text-overflow:ellipsis;white-space:nowrap;margin-bottom:4px;font-size:14px;font-weight:600;overflow:hidden}.card-desc{color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.badge{border-radius:12px;margin-right:4px;padding:2px 8px;font-size:11px;font-weight:600;display:inline-block}.badge-song{color:#000;background:#1db954}.badge-album{color:#fff;background:#ff6b6b}.badge-artist{color:#000;background:#4ecdc4}.form-group{margin-bottom:16px}.form-label{margin-bottom:6px;font-size:14px;font-weight:500;display:block}.form-row{gap:8px;display:flex}.pagination{justify-content:center;align-items:center;gap:8px;margin-top:16px;display:flex}.bottom-tabs{background:var(--bg-elevated);border-top:1px solid var(--border);z-index:200;display:flex;position:fixed;bottom:0;left:0;right:0}.tab{text-align:center;color:var(--text-muted);cursor:pointer;flex:1;padding:12px;font-size:12px;transition:color .2s}.tab.active{color:var(--primary)}.tab-icon{margin-bottom:4px;font-size:20px}.tab-content{display:none}.tab-content.active{display:block}.toast-container{z-index:1000;pointer-events:none;position:fixed;top:16px;right:16px}.toast{background:var(--bg-elevated);border:1px solid var(--border);pointer-events:all;border-radius:8px;min-width:250px;max-width:350px;margin-bottom:8px;padding:12px 16px;animation:.3s slideIn;box-shadow:0 4px 12px #00000080}@keyframes slideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.toast-success{border-left:4px solid var(--success)}.toast-error{border-left:4px solid var(--error)}.toast-warning{border-left:4px solid var(--warning)}.network-log{background:var(--bg-elevated);border-top:2px solid var(--border);z-index:150;max-height:40vh;transition:transform .3s;position:fixed;bottom:70px;left:0;right:0;overflow-y:auto;transform:translateY(100%)}.network-log.open{transform:translateY(0)}.network-log-toggle{z-index:160;background:var(--primary);color:#000;border-radius:20px;padding:8px 16px;font-size:12px;font-weight:600;position:fixed;bottom:76px;right:16px;box-shadow:0 2px 8px #0000004d}.log-entry{border-bottom:1px solid var(--border);padding:8px 12px;font-family:monospace;font-size:12px}.log-method{margin-right:8px;font-weight:700}.log-status-200,.log-status-201,.log-status-202,.log-status-204{color:var(--success)}.log-status-400,.log-status-401,.log-status-403,.log-status-404,.log-status-409{color:var(--error)}.log-status-500{color:var(--warning)}.json-viewer{background:var(--bg);border:1px solid var(--border);border-radius:4px;max-height:400px;padding:12px;font-family:monospace;font-size:12px;overflow:auto}.json-key{color:#9cdcfe}.json-string{color:#ce9178}.json-number{color:#b5cea8}.json-boolean{color:#569cd6}.json-null{color:gray}.json-toggle{cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--text-muted)}.json-collapsed{display:none}.loading{text-align:center;color:var(--text-muted);padding:24px}.spinner{border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;width:40px;height:40px;margin:0 auto;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.error-msg{border:1px solid var(--error);color:var(--error);background:#e221341a;border-radius:4px;margin:12px 0;padding:12px}.success-msg{border:1px solid var(--success);color:var(--success);background:#1db9541a;border-radius:4px;margin:12px 0;padding:12px}.auth-state{color:var(--text-muted);background:var(--bg);border-radius:12px;padding:4px 12px;font-size:12px}.auth-state.logged-in{color:var(--success)}.modal{z-index:300;background:#000c;justify-content:center;align-items:center;padding:16px;display:none;position:fixed;inset:0}.modal.open{display:flex}.modal-content{background:var(--bg-elevated);border-radius:8px;width:100%;max-width:500px;max-height:80vh;padding:24px;overflow-y:auto}.modal-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.modal-title{font-size:18px;font-weight:700}.modal-close{color:var(--text-muted);cursor:pointer;font-size:24px}.empty-state{text-align:center;color:var(--text-muted);padding:48px 24px}.list-item{background:var(--bg-elevated);border:1px solid var(--border);cursor:pointer;border-radius:8px;margin-bottom:8px;padding:12px;transition:all .2s}.list-item:hover{background:var(--bg-base);border-color:var(--primary)}.list-item-title{margin-bottom:4px;font-weight:600}.list-item-meta{color:var(--text-muted);font-size:12px}.action-buttons{flex-wrap:wrap;gap:8px;margin-top:12px;display:flex}.warning-banner{border:1px solid var(--warning);color:var(--warning);background:#ffa5001a;border-radius:4px;margin:12px 0;padding:12px;font-size:14px}.queue-item{background:var(--bg-base);border-radius:4px;justify-content:space-between;align-items:center;margin-bottom:8px;padding:12px;display:flex}.hidden{display:none}@media (min-width:768px){.card-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}.modal-content{max-width:600px}}