:root { --bg: #0f0f0f; --card: #1a1a1a; --primary: #007bff; --accent: #FFD700; --text: #e0e0e0; }
body { background: var(--bg); color: var(--text); font-family: 'Inter', sans-serif; margin: 0; padding-bottom: 20px; overflow-x: hidden; }

/* Header & Search */
.stars-header { background: #000; padding: 15px; position: relative; top: 0; z-index: 1000; border-bottom: 1px solid #222; }
.logo { font-weight: 800; color: #fff; margin: 0 0 10px 0; font-size: 24px; cursor: pointer; }
.logo span { color: var(--primary); }
.search-box { display: flex; gap: 5px; background: #222; padding: 5px; border-radius: 8px; }
.search-box input, .search-box select { background: none; border: none; color: #fff; outline: none; padding: 8px; font-size: 14px; }

/* Navigasi Abjad */
.alphabet-nav { background: #111; padding: 10px; overflow-x: auto; white-space: nowrap; border-bottom: 1px solid #222; position: sticky; top: 0px; z-index: 999; }
.btn-alpha { background: none; border: none; color: #888; padding: 8px 15px; cursor: pointer; font-weight: 600; font-size: 14px; }
.btn-alpha.active { color: var(--primary); border-bottom: 2px solid var(--primary); }

/* Main Layout */
.container { padding: 15px; min-height: 80vh; }
.view-navigation { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 20px; }
#btnBack { background: #333; color: #fff; border: none; padding: 8px 18px; border-radius: 20px; cursor: pointer; font-weight: bold; }
.section-title { margin: 0; font-size: 20px; }

/* Grid & List */
.artist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 15px; }
.artist-card { background: var(--card); padding: 15px; border-radius: 12px; text-align: center; cursor: pointer; }
.artist-card img { width: 70px; height: 70px; border-radius: 50%; margin-bottom: 10px; object-fit: cover; }
.song-list-full { display: flex; flex-direction: column; gap: 10px; }
.song-item-btn { background: var(--card); color: #fff; border: 1px solid #333; padding: 15px; text-align: left; border-radius: 10px; cursor: pointer; }

/* Chord Page Engine */
.chord-page { padding-bottom: 120px; }
.chord-lyric-line {
    position: relative;
    padding-top: 1.5em; /* Ruang untuk chord melayang */
    margin-bottom: 12px;
    line-height: 1.4;
    color: #ccc;
    display: block; /* Kembalikan ke block agar lirik bisa turun */
    word-wrap: break-word; /* Paksa patah kata jika kepanjangan */
    overflow-wrap: break-word;
}
.unit-block { display: inline-flex; flex-direction: column; margin-right: 2px; vertical-align: top; }
.chord-mark {
    position: absolute;
    top: 0;
    color: var(--accent);
    font-size: 0.85em;
    pointer-events: none;
    white-space: nowrap; /* Chord jangan sampai wrap sendiri */
}
.lyric-text {
    white-space: normal; /* INI KUNCINYA: Menjaga spasi tapi tetap wrap */
    word-break: break-word;
    display: inline-block;
    max-width: 100%;
}
.lyric-mark { color: #ccc; font-size: 1.1em; white-space: pre; }
.plain-row { color: var(--accent); font-weight: bold; margin: 15px 0 5px 0; border-left: 3px solid var(--primary); padding-left: 10px; }

/* Styling untuk [Intro], [Chorus], dll */
.song-structure {
    color: #007bff;
    font-weight: bold;
    text-transform: uppercase;
    margin: 20px 0 10px 0;
    padding-left: 10px;
    border-left: 4px solid #007bff;
    font-size: 0.85em;
    background: rgba(0, 123, 255, 0.1);
    display: inline-block;
    padding-right: 15px;
    border-radius: 0 5px 5px 0;
}

/* Sticky Bottom Controls */
.chord-controls {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 10px 5px;
    border-top: 1px solid #333;
    z-index: 9999;
}
.control-group { display: flex; align-items: center; background: #222; border-radius: 10px; padding: 0 5px; }
.control-group button { background: none; border: none; color: #fff; padding: 10px 12px; cursor: pointer; font-size: 16px; font-weight: bold; }
.control-group span { font-weight: bold; min-width: 20px; text-align: center; }
.control-item { display: flex; align-items: center; gap: 5px; }
.control-item button { background: none; border: none; color: white; font-size: 18px; font-weight: bold; padding: 5px 10px; }
.control-item button:active {
    transform: scale(0.9);
    color: var(--primary);
    transition: 0.1s;
}
.divider { width: 1px; height: 25px; background: #444; }

input[type=range] { width: 60px; accent-color: #007bff; }

/* Utility */
.back-to-top { position: fixed; bottom: 85px; right: 20px; background: var(--primary); color: #fff; border: none; width: 45px; height: 45px; border-radius: 50%; display: none; z-index: 100; cursor: pointer; font-size: 20px; }

.song-info-header {
    margin-bottom: 25px;
    border-left: 4px solid var(--primary);
    padding-left: 12px;
}

.artist-label {
    color: var(--primary);
    font-weight: 800;
    font-size: 1.1em;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.key-badge-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.badge-item {
    background: #222;
    color: #eee;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.85em;
    border: 1px solid #333;
}

.badge-item b {
    color: var(--accent);
}

/* KASTA TERTINGGI: KHUSUS TABLATURE */
.chord-lyric-line.is-tab, 
.plain-row.is-tab { 
    /* Menghilangkan gaya .plain-row */
    border-left: none !important; 
    padding-left: 0 !important;
    margin: 0 !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    
    /* Gaya Tab yang Rapi */
    line-height: 1.1 !important; 
    font-family: 'Courier New', monospace !important;
    background: transparent !important;
    color: #2ecc71 !important; /* Hijau Tab */
    letter-spacing: -0.5px;
    display: block;
}

/* Pastikan chord di dalam Tab tidak lari */
.is-tab .chord-mark {
    display: none; /* Biasanya Tab tidak butuh chord melayang di atasnya */
}