body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: #f0f2f5; color: #333; display: flex; justify-content: center; align-items: baseline; min-height: 100vh; margin: 0; padding: 10px; box-sizing: border-box; }
.player-container { background-color: white; padding: 20px; border-radius: 20px; box-shadow: 0 8px 30px rgba(0, 0, 0, .12); width: 100%; max-width: 600px; text-align: center; margin:0; }
h1 { color: #1a237e; margin-bottom: 25px; font-weight: bold; }
.controls, .speed-controls, .offset-controls { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 1rem 0;}
.controls button { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; }
#setup-controls button, #save-container button { width: auto; }
.controls button:active { transform: scale(0.95); }
.controls button svg { width: 45%; height: 45%; fill: white; }
#play-pause-btn { width: 75px; height: 75px; background: linear-gradient(145deg, #2196F3, #0c7cd5); box-shadow: 0 4px 15px rgba(33, 150, 243, 0.4); }
#play-pause-btn svg { width: 50%; height: 50%; }
#repeat-prev-line-btn { background: linear-gradient(145deg, #9575CD, #673AB7); box-shadow: 0 4px 15px rgba(103, 58, 183, 0.3); }
#repeat-this-line-btn { background: linear-gradient(145deg, #FFC107, #d4a106); box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4); }
#repeat-4x-btn { background: linear-gradient(145deg, #ef5350, #d32f2f); box-shadow: 0 4px 15px rgba(239, 83, 80, 0.4); color: #fff;font-size: 20px;}
#next-line-jump-btn { background: linear-gradient(145deg, #26A69A, #00796B); box-shadow: 0 4px 15px rgba(0, 150, 136, 0.3); }
.speed-controls { gap: 7px; }
.speed-controls button { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; background: linear-gradient(145deg, #616161, #424242); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); transition: transform 0.2s ease; }
.speed-controls button:active { transform: scale(0.95); }
.speed-controls button:hover { background: linear-gradient(145deg, #757575, #505050); }
.speed-controls button svg { width: 45%; height: 45%; fill: white; }
#speed-display { font-size: 18px; font-weight: 700; color: #555; min-width: 50px; }

.offset-controls { gap: 15px; font-size: 16px; color: #333; }
.offset-controls button { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; background: linear-gradient(145deg, #9E9E9E, #757575); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); transition: transform 0.2s ease; }
.offset-controls button:active { transform: scale(0.94); }
.offset-controls button:hover { background: linear-gradient(145deg, #BDBDBD, #8c8c8c); }
.offset-controls button svg { width: 50%; height: 50%; fill: white; }
#time-offset-display { font-size: 16px;  min-width: 20px; text-align: center; }
/* === THIS IS THE MODIFIED SECTION === */
#lyrics-container {
    margin-top: 25px;
    padding: 10px;
    background-color: #f7f8fc;
    border: 1px solid #e8eaf6;
    height: 250px;
    overflow-y: auto;
    text-align: left;
    scroll-behavior: smooth;
    width: calc(100% + 19px);
    margin-left: -20px;
    border-radius: 0;
    
    /* --- HIDE THE SCROLLBAR --- */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
    
    /* --- DISABLE MOUSE WHEEL SCROLL ON THE CONTAINER --- */
    pointer-events: none;
}
/* Hide scrollbar for Chrome, Safari and Opera */
#lyrics-container::-webkit-scrollbar {
    display: none;
}

#lyrics-container p {
    margin: 0;
    padding: 14px 4px;
    font-size: 21px;
    transition: background-color .3s ease;
    user-select: none;

    /* --- RE-ENABLE CLICKS AND HOVER ON THE LYRICS THEMSELVES --- */
    pointer-events: auto; 
    cursor: pointer;
}
/* ================================ */

#lyrics-container p span { float: right; font-size: 14px; color: #7986cb; display:none;}
.active-lyric { background-color: #3f51b5; color: white; font-weight: bold; transform: scale(1.08); padding-left:15px !important;}
.active-lyric span { color: #e8eaf6; }
.time-display { margin-top: 20px; font-size: 16px; color: #555; }
.setup-section { margin-top: 0; padding-top: 20px; border-top: 1px solid #e0e0e0; }
.setup-mode-container { margin-bottom: 15px; font-size: 16px; color: #555; }
.setup-sub-controls button { font-size: 14px; padding: 8px 16px; font-weight: bold; border-radius: 8px;}
#record-btn { background-color: #ef5350; }
#save-timestamps-btn { background-color: #66BB6A; }
#status-message { margin-top: 10px; font-weight: 700; min-height: 1.2em; transition: color 0.3s; }
#status-message.success { color: #2e7d32; }
#status-message.error { color: #c62828; }