:root {
    --bg-dark: #000000;
    --surface: #121212;
    --primary: #ffffff;
    --accent: #00ff00; /* Warna ini berubah dinamis via Script */
    --max-width: 500px;
    --nav-height: 65px;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Roboto', sans-serif; -webkit-tap-highlight-color: transparent; }

body { 
    background: var(--bg-dark); color: white; height: 100vh; overflow: hidden; 
    display: flex; justify-content: center;
    transition: background 0.8s ease; /* Transisi warna background halus */
}

/* --- LITE MODE OPTIMIZATION (Hemat Baterai & GPU) --- */
body.lite-version * {
    transition: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
}

body.lite-version #visualizer {
    display: none !important; /* Paksa sembunyi di Lite Mode */
}

body > div, .view, .player-overlay, .bottom-nav, .settings-modal, .bottom-sheet {
    width: 100%; max-width: var(--max-width); position: relative;
}

.view {
    position: absolute; top: 0; left: 0; height: 100%; width: 100%;
    padding: 20px; padding-bottom: calc(var(--nav-height) + 80px); 
    overflow-y: auto; display: none; scrollbar-width: none; background: transparent;
}
.view::-webkit-scrollbar { display: none; }
.view.active { display: block; }

.top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-top: 10px; }
.brand-logo { font-size: 24px; font-weight: 900; letter-spacing: -0.5px; }

.search-box { background: #222; padding: 8px 15px; border-radius: 25px; display: flex; align-items: center; width: 100%; margin-bottom: 20px; }
#search-input { background: transparent; border: none; color: white; margin-left: 8px; width: 100%; outline: none; font-size: 14px; }

.list-item { display: flex; align-items: center; gap: 15px; padding: 10px; border-radius: 12px; margin-bottom: 5px; transition: 0.2s; }
.list-item:active { background: rgba(255,255,255,0.1); }

.list-img {
    width: 48px; height: 48px; background: #1a1a1a; border-radius: 8px;
    position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.song-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.badge-flac {
    position: absolute; bottom: 0; right: 0; background: var(--accent);
    color: black; font-size: 7px; padding: 2px 4px; border-radius: 4px 0 4px 0; font-weight: 900;
}

.list-info { flex: 1; overflow: hidden; }
.list-info h4 { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-info p { font-size: 12px; color: #aaa; }
.btn-save { background: none; border: none; color: #444; cursor: pointer; }
.btn-save.active { color: var(--accent); }

.bottom-nav {
    position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
    height: var(--nav-height); background: rgba(10, 10, 10, 0.98); backdrop-filter: blur(20px);
    border-top: 1px solid #222; display: flex; justify-content: space-around; align-items: center;
    z-index: 1000; padding-bottom: env(safe-area-inset-bottom);
}
.nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; height: 100%; color: #666; cursor: pointer; }
.nav-icon { font-size: 26px; line-height: 1; margin-bottom: -5px; transition: 0.2s; }
.nav-text { font-size: 10px; font-weight: 500; line-height: 1; transition: 0.2s; }
.nav-item.active { color: white; }
.nav-item.active .nav-icon { color: var(--accent); transform: translateY(-2px); }

.mini-player {
    position: fixed; bottom: calc(var(--nav-height) + 10px + env(safe-area-inset-bottom)); 
    left: 50%; transform: translateX(-50%); width: 94%; max-width: 480px; background: #212121; 
    border-radius: 8px; padding: 0 15px; height: 55px; display: flex; justify-content: space-between; align-items: center;
    z-index: 900; box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.mini-player.hidden { display: none; }
.mini-info h4 { font-size: 13px; margin-bottom: 2px; }
.mini-info p { font-size: 11px; color: #aaa; }

.player-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: 0 auto;
    background: var(--bg-dark); z-index: 2000; transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1); display: flex; flex-direction: column; padding: 25px;
    padding-top: calc(20px + env(safe-area-inset-top)); 
}
.player-overlay.show { transform: translateY(0); }
.player-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; margin-top: 10px; }

.player-img-box {
    width: 100%; aspect-ratio: 1/1; background: #1a1a1a; border-radius: 20px; overflow: hidden;
    margin-bottom: 30px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center;
}
.player-img-box img { width: 100%; height: 100%; object-fit: cover; }

.player-info { text-align: center; margin-bottom: 30px; }
.player-info h2 { font-size: 20px; margin-bottom: 5px; }

/* --- STYLE LIRIK & TRANSLATE (UPDATED) --- */
#lyrics-text {
    color: #ffffff;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.4;
    margin-bottom: 8px; /* Jarak ke translate */
    transition: 0.3s;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

#lyrics-translate {
    color: var(--accent); /* Warna hijau/accent */
    font-size: 13px;
    font-weight: 400;
    font-style: italic;
    opacity: 0.8;
    line-height: 1.3;
    max-width: 85%;
    margin: 0 auto;
    transition: 0.3s;
    display: none; /* Default hidden */
}

.progress-area { width: 100%; display: flex; align-items: center; gap: 10px; font-size: 12px; color: #aaa; margin-bottom: 20px; }
#progress-bar { flex: 1; accent-color: var(--accent); height: 4px; }
.main-controls { display: flex; justify-content: space-between; align-items: center; width: 100%; }

.btn-icon { background: none; border: none; color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.btn-play-large { width: 65px; height: 65px; border-radius: 50%; background: var(--accent); border: none; color: black; display: flex; align-items: center; justify-content: center; }
.btn-play-large .material-icons-round { font-size: 32px; }
.large .material-icons-round { font-size: 36px; }

.settings-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8); z-index: 2500; display: none; backdrop-filter: blur(5px);
}

/* --- SETTINGS MODAL (UPDATED FOR STICKY HEADER) --- */
.settings-modal {
    position: fixed; bottom: 0; left: 50%; transform: translate(-50%, 100%);
    width: 100%; max-width: var(--max-width); background: #111; 
    border-radius: 24px 24px 0 0; 
    z-index: 2600; 
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    border-top: 1px solid #333; box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
    display: flex; flex-direction: column; max-height: 90vh; padding: 0;
    overflow: hidden; /* Penting untuk sticky header */
}
.settings-modal.show { transform: translate(-50%, 0); }

.settings-header { 
    display: flex; justify-content: space-between; align-items: center; 
    padding: 20px 25px;
    padding-top: calc(20px + env(safe-area-inset-top)); 
    border-bottom: 1px solid #222;
    background: #111;
    position: sticky; top: 0; z-index: 50; /* Pastikan selalu di atas */
    flex-shrink: 0;
}
.settings-header h3 { color: var(--accent); font-weight: 900; letter-spacing: 1px; }

.settings-content { 
    overflow-y: auto; 
    padding: 20px 25px 40px 25px; 
    overscroll-behavior: contain;
}

.btn-close { background: #222; border: none; color: #fff; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; }
.btn-close:active { background: #333; transform: scale(0.9); }

.fx-row { display: flex; flex-direction: column; gap: 15px; margin-bottom: 25px; }
.fx-item { background: #1a1a1a; padding: 15px 20px; border-radius: 16px; display: flex; justify-content: space-between; align-items: center; border: 1px solid #222; }
.fx-text { font-size: 14px; font-weight: 500; color: #eee; }

.switch { position: relative; display: inline-block; width: 50px; height: 28px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #333; transition: .4s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
input:checked + .slider { background-color: var(--accent); }
input:checked + .slider:before { transform: translateX(22px); }

.eq-section { margin-top: 10px; }
.eq-header-wrapper { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding: 0 5px; }
.eq-title { font-size: 12px; color: #888; text-align: left; letter-spacing: 2px; font-weight: bold; }

.btn-reset { 
    background: transparent; border: 1px solid #333; color: var(--accent); 
    font-size: 10px; font-weight: bold; padding: 4px 10px; border-radius: 12px; 
    cursor: pointer; letter-spacing: 1px; transition: 0.2s;
}
.btn-reset:active { background: var(--accent); color: black; }

.eq-container { display: flex; justify-content: space-between; height: 160px; padding: 0 10px; }
.eq-band { display: flex; flex-direction: column; align-items: center; gap: 10px; height: 100%; flex: 1; }
.eq-slider { writing-mode: bt-lr; -webkit-appearance: slider-vertical; width: 40px; height: 100%; background: transparent; cursor: pointer; accent-color: var(--accent); }
.eq-freq { font-size: 10px; color: #666; font-weight: bold; }

/* --- VISUALIZER --- */
#visualizer {
    width: 100%; height: 60px; margin-top: 10px; border-radius: 8px;
    background: transparent;
    display: block; /* Default tampil */
}
#visualizer.hidden { display: none !important; }

.btn-quality-badge {
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
    color: #ccc; padding: 4px 10px; border-radius: 20px; font-size: 11px;
    margin-top: 5px; cursor: pointer; display: inline-flex; align-items: center;
    transition: 0.2s;
}
.btn-quality-badge:active { background: rgba(255,255,255,0.2); transform: scale(0.95); }

/* --- BOTTOM SHEET --- */
.bottom-sheet {
    position: fixed; bottom: -100%; left: 0; width: 100%;
    left: 50%; transform: translateX(-50%);
    background: #1a1a1a; border-radius: 20px 20px 0 0; padding: 25px;
    transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 3000;
    box-shadow: 0 -5px 30px rgba(0,0,0,0.8);
    padding-bottom: calc(25px + env(safe-area-inset-bottom));
}
.bottom-sheet.active { bottom: 0; }

.q-option {
    padding: 15px; background: #252525; border-radius: 12px;
    margin-bottom: 10px; display: flex; justify-content: space-between;
    align-items: center; cursor: pointer; border: 1px solid transparent;
    transition: 0.2s;
}
.q-option:active { transform: scale(0.98); }
.q-option.active { border-color: var(--accent); background: rgba(0,255,0,0.1); }
.q-text h4 { color: #fff; margin-bottom: 2px; font-size: 14px; font-weight: 500; }
.q-text p { color: #888; font-size: 11px; }

/* --- SOUNDSCAPE (FOCUS MODE) GRID --- */
.soundscape-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 5px;
}
.sound-btn {
    background: #222; border: 1px solid #333; border-radius: 10px;
    padding: 10px 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    cursor: pointer; transition: 0.2s; color: #666; position: relative;
    overflow: hidden;
}
.sound-btn:active { transform: scale(0.95); }
.sound-btn.active {
    border-color: var(--accent); color: var(--accent); background: rgba(255,255,255,0.05);
}
.sound-btn .material-icons-round { font-size: 24px; margin-bottom: 4px; }
.sound-btn p { font-size: 9px; font-weight: bold; }

/* --- SINGER PROFILE PAGE SPECIFIC --- */
.profile-img-box {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.profile-img-box:active { transform: scale(0.9); }

.profile-header {
    display: flex; flex-direction: column; align-items: center; padding: 20px 0;
    text-align: center;
}
.profile-img-large {
    width: 140px; height: 140px; border-radius: 50%; object-fit: cover;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5); margin-bottom: 15px;
    border: 3px solid #222;
    background: #111;
}
.profile-name-large {
    font-size: 22px; font-weight: 800; margin-bottom: 5px; color: white;
}
.profile-meta {
    font-size: 12px; color: #888; background: #222; padding: 4px 12px; border-radius: 20px;
    display: inline-block; font-weight: 500;
}