:root {
    --bg-color: #121212; --primary-color: #1DB954; --card-bg: #282828;
    --text-color: #FFFFFF; --text-secondary: #B3B3B3; --modal-bg: #33333d;
    --red-color: #e53935; --yellow-color: #ffca28;
    --border-color: #4a4a4a;
}
html, body {
    margin: 0; background-color: var(--bg-color); color: var(--text-color);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    scroll-behavior: smooth;
}
.logout-button {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: var(--yellow-color);
    color: black;
    padding: 8px 18px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9em;
    z-index: 1001;
    transition: all 0.2s ease-in-out;
    border: 1px solid var(--yellow-color);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.logout-button:hover {
    transform: scale(1.05);
    background-color: #ffd75b;
}
#backToTopBtn {
    display: none; 
    position: fixed;
    bottom: 30px;
    right: 20px;
    background-color: var(--yellow-color);
    color: black;
    padding: 8px 18px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9em;
    z-index: 1001;
    transition: opacity 0.3s, transform 0.2s ease-in-out;
    border: 1px solid var(--yellow-color);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    cursor: pointer;
    opacity: 0;
}
#backToTopBtn.show {
    display: block;
    opacity: 1;
}
#backToTopBtn:hover {
    transform: scale(1.05);
    background-color: #ffd75b;
}
.main-container { width: 90%; max-width: 1400px; text-align: center; margin: 0 auto; padding: 20px 0 20vh; box-sizing: border-box; transition: filter 0.3s ease-in-out; }

#logo { 
    display: block; 
    margin: 0 auto 12px auto; 
    font-size: 2.6em; 
    font-weight: bold; 
    color: var(--text-color); 
    letter-spacing: 1px; 
    user-select: none; 
}

.search-container { max-width: 900px; margin: 0 auto; }
.unified-search-bar { display: flex; width: 100%; border: 2px solid var(--card-bg); border-radius: 50px; background-color: var(--card-bg); transition: border-color 0.3s; overflow: hidden; }
.unified-search-bar:focus-within { border-color: var(--primary-color); }
#searchInput { flex-grow: 1; border: none; background: transparent; padding: 8px 20px; color: var(--text-color); font-size: 1em; outline: none; min-width: 50px; }
.unified-search-bar button { background: transparent; border: none; border-left: 1px solid var(--border-color); color: var(--text-secondary); cursor: pointer; padding: 0 20px; transition: background-color 0.2s, color 0.2s; font-size: 1em; display: flex; align-items: center; white-space: nowrap; }
#directDownloadButton { display: flex !important; }
.unified-search-bar button:hover { background-color: var(--primary-color); color: black; }
.unified-search-bar button svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}
.sticky-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--bg-color);
    padding-top: 10px;
    padding-bottom: 5px;
}
.filter-container { margin-top: 0; margin-bottom: 0; max-width: 100%; margin-left: auto; margin-right: auto; display: none; padding-top: 0; }
.filter-tabs { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 15px; }
.filter-tab { padding: 8px 18px; border: 1px solid var(--card-bg); border-radius: 20px; cursor: pointer; transition: all 0.2s; font-size: 0.9em; text-decoration: none; color: var(--text-color); display: inline-block; background-color: var(--card-bg); }
.filter-tab:hover { background-color: var(--primary-color); color: black; border-color: var(--primary-color); }
.filter-tab.source-tab.active { background-color: var(--primary-color); color: black; font-weight: bold; border-color: var(--primary-color); }
.filter-tab.type-tab.active { background-color: var(--yellow-color); color: black; font-weight: bold; border-color: var(--yellow-color); }

.region-control-wrap { display: inline-flex; align-items: center; gap: 10px; position: relative; }
.region-select { padding: 6px 14px; width: auto; min-width: 90px; border: 1px solid var(--card-bg); border-radius: 25px; cursor: pointer; transition: all 0.2s ease-in-out; font-size: 0.9em; background-color: var(--card-bg); color: var(--text-color); outline: none; text-align: center; position: relative; user-select: none; }
.region-select:hover, .region-select:focus, .region-select.open { border-color: var(--primary-color); }
.region-dropdown-trigger { display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 500; }
.region-dropdown-trigger::after { content: "▾"; font-size: 0.8em; color: var(--text-secondary); }
.region-dropdown-menu { display: none; position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); width: 100px; max-height: 350px; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; background-color: var(--modal-bg); border: 1px solid var(--border-color); border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,0.6); z-index: 1005; padding: 6px 0; text-align: left; }
.region-dropdown-menu::-webkit-scrollbar { display: none; }
.region-select.open .region-dropdown-menu { display: block; }
.region-option-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 8px; font-size: 0.9em; transition: background-color 0.15s; white-space: nowrap; }
.region-option-row.valid { color: var(--text-color); cursor: pointer; }
.region-option-row.valid:not(.selected):hover { background-color: rgba(255, 202, 40, 0.2); }
.region-option-row.selected { background-color: var(--yellow-color); font-weight: bold; color: black; }
.region-option-row.disabled { color: #666666; opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.region-decrypt-chk { cursor: pointer; accent-color: var(--primary-color); width: 15px; height: 15px; margin: 0; }
.region-option-row.disabled .region-decrypt-chk { cursor: not-allowed; }
.all-decrypt-switch { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--card-bg); border-radius: 20px; background-color: var(--card-bg); color: var(--text-color); font-size: 0.85em; cursor: pointer; user-select: none; transition: all 0.2s ease-in-out; }
.all-decrypt-switch:hover { border-color: var(--primary-color); }
.all-decrypt-switch input { accent-color: var(--primary-color); cursor: pointer; margin: 0; width: 15px; height: 15px; }

.homepage-tab-container {
    max-width: 100%;
    margin: 0 auto 0 auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 15px;
}
.homepage-tab {
    padding: 6px 18px;
    border: 1px solid var(--card-bg);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    font-size: 0.9em;
    background-color: var(--card-bg);
    color: var(--text-color);
}
.homepage-tab:hover {
    background-color: var(--primary-color);
    color: black;
    border-color: var(--primary-color);
    transform: translateY(-2px);
}
.homepage-tab.active {
    background-color: var(--primary-color);
    color: black;
    font-weight: bold;
    border-color: var(--primary-color);
}

.module-section {
    margin-top: 0;
    display: none; 
}
.module-title {
    text-align: left;
    font-size: 1.8em;
    color: var(--yellow-color);
    font-weight: 400;
    margin: 0 0 0 15px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

.cover-wall { 
    display: grid; 
    grid-template-columns: repeat(8, minmax(0, 1fr)); 
    gap: 18px; 
    min-height: 180px; 
    transition: all 0.3s ease;
    padding: 18px 0 10px 0;
}

.loading-indicator-container {
    text-align: center; 
    padding: 20px; 
    color: var(--text-secondary);
    display: none;
}

.cover-item { 
    position: relative; 
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease-out;
    cursor: pointer; 
    transform: translateZ(0);
}
.cover-item:hover { 
    transform: scale(1.15); 
    z-index: 20; 
}
.cover-box {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
}
.cover-caption {
    margin-top: 6px;
    font-size: 0.8em;
    color: var(--text-color);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}
.explicit-badge {
    display: inline-block;
    background-color: var(--yellow-color);
    color: black;
    font-weight: bold;
    font-size: 0.75em;
    line-height: 1.1;
    padding: 1px 4px;
    border-radius: 3px;
    margin-right: 4px;
    vertical-align: baseline;
}
.cover-item img { width: 100%; display: block; background-color: var(--card-bg); }
.cover-item[data-item-type="album"] img { aspect-ratio: 1/1; }

.cover-item[data-item-type="video"] .cover-box { display: flex; align-items: center; justify-content: center; aspect-ratio: 1/1; background-color: #000; }
.cover-item[data-item-type="video"] .cover-box::before { content: ""; position: absolute; inset: 0; background-image: var(--video-bg); background-size: cover; background-position: center; filter: blur(15px); transform: scale(1.15); opacity: 0.8; }
.cover-item[data-item-type="video"] img { position: relative; width: 100%; height: auto; max-height: 100%; object-fit: contain; background-color: transparent; }
.cover-item[data-item-type="artist"] img { aspect-ratio: 1/1; border-radius: 50%; }

.quality-badge, .source-badge { position: absolute; top: 0; padding: 2px 8px; font-size: 0.7em; z-index: 2; font-weight: bold; }
.quality-badge { left: 0; border-radius: 8px 0 8px 0; background-color: var(--yellow-color); color: black; }
.source-badge { right: 0; border-radius: 0 8px 0 8px; background-color: var(--yellow-color); color: black; }
.source-apple { background-color: var(--yellow-color); color: black; }
.source-tidal { background-color: #00ffff; color: black; }
.source-qobuz { background-color: #4A90E2; color: white; }

.cover-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); opacity: 0; pointer-events: none; transition: opacity 0.3s; display: flex; flex-direction: column; justify-content: space-between; padding: 12px; box-sizing: border-box; }
.cover-item:hover .cover-overlay { opacity: 1; pointer-events: auto; }
.overlay-info { text-align: left; font-size: 0.75em; line-height: 1.4; color: var(--text-secondary); overflow-y: auto; flex-grow: 1; padding-top: 5px; }
.overlay-info::-webkit-scrollbar { display: none; }
.overlay-info div { margin-bottom: 2px; }

.artist-link {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s;
}
.artist-link:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.overlay-actions { position: relative; display: flex; justify-content: space-around; align-items: center; margin-top: auto; padding-top: 4px; border-top: 1px solid #444; flex-shrink: 0; }
.action-item a, .action-item button { cursor: pointer; transition: transform 0.2s, color 0.2s; padding: 0; color: white; display: flex; background: none; border: none; }
.action-item a:hover, .action-item button:hover { transform: scale(1.15); color: var(--primary-color); }
.action-item a.copied, .action-item button.copied { color: var(--primary-color); }
.action-item svg { width: 24px; height: 24px; fill: currentColor; }
.gofile-link-btn svg { color: var(--yellow-color); }

.download-view { display:none; flex-direction: column; justify-content: center; align-items: center; height: 100%; text-align: center; padding-top: 14px; box-sizing: border-box; }
.download-view-item, .download-view-back-btn { background: rgba(40, 40, 40, 0.8); border: 1px solid var(--border-color); color: var(--text-color); padding: 4px 10px; border-radius: 12px; margin: 2px 0; cursor: pointer; transition: all 0.2s; width: 85%; font-size: 0.75em; }
.download-view-item:hover, .download-view-back-btn:hover { background-color: var(--primary-color); border-color: var(--primary-color); color: black; box-shadow: 0 0 10px 1px rgba(29, 185, 84, 0.5); }
.download-view-back-btn { margin-top: 5px; background-color: var(--red-color); }
.download-view-back-btn:hover { background-color: #f44336; border-color: #f44336; box-shadow: 0 0 10px 1px rgba(229, 57, 53, 0.5); }

.status-toast { position: fixed; bottom: 0; left: 50%; width: fit-content; max-width: min(90%, 1400px); background-color: var(--card-bg); color: var(--text-color); border: 1px solid var(--border-color); border-radius: 12px 0 12px 12px; box-shadow: 0 -4px 20px rgba(0,0,0,0.6); z-index: 1002; padding: 10px 25px 10px 10px; box-sizing: border-box; transform: translate(-50%, 100%); transition: transform 0.3s ease-in-out; display: flex; align-items: center; justify-content: space-between; }
.status-toast.show { transform: translate(-50%, 0); }
.status-toast.minimized { transform: translate(-50%, 100%); }
.taskbar-left { display: flex; align-items: center; min-width: 80px; gap: 15px; }
.queue-badge { background: rgba(255, 202, 40, 0.15); border: 1px solid var(--yellow-color); color: var(--yellow-color); font-weight: bold; font-size: 1.1em; padding: 4px 12px; border-radius: 16px; cursor: pointer; user-select: none; }
.queue-popup { 
    display: none; 
    position: absolute; 
    bottom: 100%;
    left: 0;
    width: 340px; 
    max-height: 260px; 
    overflow-y: auto; 
    background-color: var(--modal-bg); 
    border: 1px solid var(--border-color); 
    border-bottom: none;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 -4px 15px rgba(0,0,0,0.5); 
    padding: 10px; 
    z-index: 1003; 
}
.queue-popup.open { display: block; }
.queue-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 6px; border-bottom: 1px solid var(--border-color); font-size: 0.85em; text-align: left; }
.queue-item:last-child { border-bottom: none; }
.queue-item-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 10px; }
.queue-cancel-btn { background-color: var(--red-color); color: white; border: none; border-radius: 4px; padding: 3px 8px; cursor: pointer; font-size: 0.85em; flex-shrink: 0; }
.taskbar-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden; padding: 0 15px; }
.taskbar-row1 { font-weight: bold; font-size: 0.95em; color: var(--text-color); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.taskbar-row2 { font-size: 0.85em; color: var(--text-secondary); display: flex; gap: 18px; justify-content: center; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-family: 'Courier New', Courier, monospace; }
.taskbar-right { display: flex; align-items: center; gap: 10px; min-width: 80px; justify-content: flex-end; }
.taskbar-cancel-btn { padding: 5px 12px; background: var(--red-color); color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 0.85em; }
.taskbar-thumb { width: 50px; height: 50px; border-radius: 6px; object-fit: cover; flex-shrink: 0; box-shadow: 0 2px 6px rgba(0,0,0,0.5); }
.taskbar-toggle-btn { position: absolute; top: -28px; right: -1px; background-color: var(--card-bg); color: var(--yellow-color); border: 1px solid var(--border-color); border-bottom: none; border-radius: 8px 8px 0 0; padding: 4px 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.taskbar-toggle-btn svg { width: 18px; height: 18px; fill: currentColor; pointer-events: none; }
.taskbar-total-progress-fill { display: block; position: absolute; bottom: 0; left: 0; height: 2px; background-color: var(--yellow-color); transition: width 0.2s ease; width: 0%; z-index: 1; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }

.modal-overlay-container { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); backdrop-filter: blur(5px); justify-content: center; align-items: center; }
.modal-content { 
    background-color: var(--modal-bg); 
    color: white; 
    width: 90%; 
    border-radius: 12px; 
    overflow: hidden; 
    animation: slide-in 0.3s ease-out; 
    position: relative;
}
@keyframes slide-in { from { transform: translateY(-30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.close-button { position: absolute; top: 10px; right: 15px; font-size: 2em; cursor: pointer; color: var(--text-secondary); z-index: 1002; }

#track-modal .modal-content {
    max-width: 800px;
    max-height: 90vh;
    display: block;
    overflow-y: auto;
}
#track-modal, #video-modal { z-index: 1010; }
#track-modal .modal-header {
    display: flex;
    flex-direction: column;
    padding: 25px;
    background-color: var(--card-bg);
}
#track-modal .modal-album-details { display: flex; width: 100%; align-items: center; }
#track-modal .modal-player-container { 
    display: flex; 
    align-items: center; 
    padding: 15px 25px 5px 25px;
    background-color: var(--card-bg);
}
#track-modal #modal-audio-player { flex-grow: 1; display: none; }
#track-modal #closePlayerBtn { display: none; background: none; border: none; color: var(--text-secondary); font-size: 1.8em; cursor: pointer; padding: 0 0 0 15px; line-height: 1; }
#track-modal .modal-header img { width: 100px; height: 100px; border-radius: 8px; margin-right: 20px; background-color: var(--card-bg); flex-shrink: 0;}
#track-modal .modal-album-info .title { font-size: 1.5em; font-weight: bold; }
#track-modal .modal-album-info .artist { color: var(--text-secondary); }

#modal-album-description {
     padding: 0 25px 15px 25px;
     background-color: var(--card-bg);
     color: var(--text-secondary); 
     line-height: 1.6; 
     font-size: 0.9em; 
     text-align: left;
     border-bottom: 1px solid #444;
     padding-bottom: 20px;
}
.album-desc-text-body {
     white-space: pre-wrap;
     word-break: break-word;
}
.album-desc-text-body.collapsed {
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 3;
     overflow: hidden;
}
.album-desc-toggle-btn {
     margin-top: 8px;
     padding: 4px 14px;
     background-color: var(--card-bg);
     color: var(--text-secondary);
     border: 1px solid var(--border-color);
     border-radius: 14px;
     font-size: 0.85em;
     cursor: pointer;
     transition: all 0.2s ease-in-out;
}
.album-desc-toggle-btn:hover {
     background-color: var(--primary-color);
     color: black;
     border-color: var(--primary-color);
}

#track-modal #track-list {
    padding: 10px 0;
}
.track-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 25px; border-bottom: 1px solid #444; transition: background-color 0.2s, color 0.2s; }
.track-item.playing { background-color: var(--primary-color); color: black; margin: 4px 10px; border-radius: 50px; }
.track-item.playing .track-listen-btn, .track-item.playing .track-download-btn-server { color: black; }
.track-item:not(.playing):hover { background-color: rgba(255,255,255,0.1); }
.track-item:last-child { border-bottom: none; }
.track-actions { display: flex; align-items: center; gap: 15px; }
.track-listen-btn, .track-download-btn-server { cursor: pointer; padding: 0; background: none; border: none; line-height: 0; color: white; }
.track-listen-btn:hover, .track-download-btn-server:hover { color: var(--primary-color); }
.track-listen-btn svg, .track-download-btn-server svg { width: 20px; height: 20px; fill: currentColor; transition: transform 0.2s; }
.track-listen-btn:hover svg, .track-download-btn-server:hover svg { transform: scale(1.1); }

#video-modal .modal-content { max-width: 1200px; padding: 20px; box-sizing: border-box; align-items: center; }
#video-player { width: 100%; max-height: 80vh; border-radius: 8px; margin-bottom: 15px; background-color: black;}
#video-info .title { font-size: 1.3em; font-weight: bold; }
#video-info .artist { font-size: 1em; color: var(--text-secondary); }
.video-action-button { margin-top: 15px; padding: 10px 20px; background-color: var(--primary-color); color: black; text-decoration: none; border-radius: 8px; font-weight: bold; }

#history-modal .modal-content {
    max-width: 1250px;
    height: 80vh;
    padding: 0;
    display: block;
    overflow: hidden; 
}
.history-grid-container {
    box-sizing: border-box;
    padding: 20px 25px;
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr;   
    grid-template-columns: 1fr auto; 
    gap: 15px; 
}
.history-controls-left {
    grid-column: 1 / 2; 
    grid-row: 1 / 2;
    display: flex;
    align-items: center; 
    gap: 20px;
}
.history-controls-left h2 {
    margin: 0;
    font-size: 1.5em;
    font-weight: bold;
    white-space: nowrap;
}
.history-search-container input {
    padding: 8px 12px;
    font-size: 1em;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: var(--card-bg);
    color: var(--text-color);
}
.history-pagination {
    grid-column: 2 / 3; 
    grid-row: 1 / 2;
    justify-self: end; 
    display: flex;
    align-items: center;
    gap: 5px;
}
.history-pagination button {
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    padding: 8px;
    font-size: 1em;
    transition: color 0.2s;
}
.history-pagination button:hover:not(:disabled) {
    color: var(--primary-color);
}
.history-pagination button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}
.history-pagination input {
    width: 45px;
    padding: 6px;
    font-size: 1em;
    text-align: center;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    color: white;
}
.history-table-wrapper {
    grid-column: 1 / 3;
    grid-row: 2 / 3;   
    overflow: auto;    
}
#history-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
#history-table th, #history-table td {
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
}
#history-table td:nth-child(2) {
    white-space: normal;
    word-break: break-word;
}
#history-table th:first-child, #history-table td:first-child { width: 8%; text-align: center; }
#history-table th:nth-child(2) { width: auto; }
#history-table th:last-child, #history-table td:last-child { width: 10%; text-align: center; }
#history-table a {
    color: var(--primary-color);
    text-decoration: none;
}
#history-table a:hover {
    text-decoration: underline;
}

#artist-detail-modal .modal-content {
    max-width: 1400px;
    max-height: 90vh;
    padding: 25px; 
    overflow-y: auto; 
    box-sizing: border-box;
}
#artistDetailView {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px 0 25px;
    box-sizing: border-box;
}
.artist-detail-top-bar {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--bg-color);
    padding: 10px 0;
    margin-top: 0;
}
.artist-back-btn,
.artist-home-btn,
.artist-forward-btn {
    padding: 8px 14px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    font-size: 0.95em;
    font-weight: bold;
    background-color: var(--card-bg);
    color: var(--text-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.artist-back-btn:hover:not(:disabled),
.artist-home-btn:hover:not(:disabled),
.artist-forward-btn:hover:not(:disabled) {
    background-color: var(--primary-color);
    color: black;
    border-color: var(--primary-color);
    transform: translateY(-2px);
}
.artist-back-btn:disabled,
.artist-forward-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.artist-modal-header { 
    display: flex; 
    align-items: center; 
    gap: 30px; 
    margin-bottom: 30px; 
    text-align: left;
}
.artist-modal-header img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background-color: var(--card-bg); }
.artist-modal-info h1 { font-size: 2.2em; margin: 0 0 10px; }
.artist-modal-info p { 
    color: var(--text-secondary); 
    line-height: 1.6; 
    font-size: 0.9em; 
    white-space: pre-wrap;
}
.artist-modal-body { }
.artist-modal-body h2 { 
    font-size: 1.5em; 
    border-top: 2px solid var(--border-color);
    padding-top: 15px; 
    margin-bottom: 20px; 
    margin-top: 40px; 
    text-align: left; 
}
.artist-modal-body h2:first-child { margin-top: 15px; }
.artist-modal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 25px; }
.artist-modal-grid-loading {
    text-align: center;
    padding: 20px;
    color: var(--text-secondary);
    grid-column: 1 / -1; 
}
.artist-load-more-wrap {
    text-align: center;
    margin: 22px 0 10px;
}
.artist-load-more-btn {
    padding: 8px 20px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background-color: var(--card-bg);
    color: var(--text-secondary);
    font-size: 0.9em;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.artist-load-more-btn:hover:not(:disabled) {
    background-color: var(--primary-color);
    color: black;
    border-color: var(--primary-color);
    transform: translateY(-2px);
}
.artist-load-more-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.no-spinners::-webkit-inner-spin-button,
.no-spinners::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.no-spinners {
    -moz-appearance: textfield;
}