#download-audio {
    border: none;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 0px 0px;
    cursor: pointer;
    text-decoration: underline;
    margin-right: 5px;
}

#download-audio:hover {
    background-color: #3e8e41;
    border-radius: 50%;
    color: blue;
}
/*附加檔案*/
.file-item{
    border: none;
    color: #000000;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 0px 0px;
    cursor: pointer;
    text-decoration: underline;
    margin-right: 5px;
}
.file-item:hover{
    border-radius: 50%;
    color: rgb(225, 62, 141);
}

#download-extfile .file-item:hover{
    background-color: #3e8e41;
    border-radius: 50%;
    color: blue;
}

.lrc-container {
    text-align: left;
    /* 歌詞靠左對齊 */
    font-family: monospace;
    /* 使用等寬字體，使時間對齊 */
}

.lrc-time {
    color: #290bd9;
    background-color: #e9fbc5;
    margin-right: 0.5em;
    /* 時間和歌詞之間增加間距 */
    font-size: small;
}

.lrc-text {
    display: inline-block;
    /* 確保文字正確換行 */
    word-break: break-word;
    /* 長歌詞換行 */
}

.highlight {
    background-color: rgba(255, 255, 0, 0.3);
    /* 高亮背景色，帶透明度 */
    color: black;
    font-weight: bold;

}

.highlight .lrc-time {
    color: red;
}

.highlight .lrc-text {
    font-size: large;
}

#lrc-container p {
    margin: 0.2rem 0;
}

#lrc-container {
    /* ... 其他樣式 */
    height: 400px;
    /* 設定容器高度 */
    overflow-y: auto;
    /* 允許垂直捲動 */
}

#song-list li {
    padding: 0.5rem;
    /* 增加項目間距 */
    cursor: pointer;
    /* 滑鼠游標樣式 */
    transition: background-color 0.2s ease;
    /* 平滑的 hover 效果 */
}

#song-list li:hover {
    background-color: #f0f0f0;
    /* hover 時的背景色 */
}

#song-list li.active {
    background-color: #d0e0ff;
    /*選中時的背景色*/
}

#song-list-dialog li.active {
    background-color: #d0e0ff;
    /*選中時的背景色*/
}

div[role="dialog"] {
    width: 85% !important;

    transform: translate(-50%, -50%);
    /* 對齊到視窗中心 */
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 1rem;
    /* 增加內距 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    /* 增加陰影 */
}

.lrc-line {
    display: flex;
    /* 使用 Flexbox 佈局 */
    align-items: flex-start;
    /* 垂直方向靠上對齊 */
    margin-bottom: 0.5em;
    /* 行間距 */
}

.lrc-time {
    width: 60px;
    /* 設定時間標籤的寬度，可根據需要調整 */
    text-align: left;
    /* 時間靠左對齊 */
    margin-right: 10px;
    /* 時間和歌詞之間的間距 */
    white-space: nowrap;
    /* 防止時間標籤換行 */
    font-family: monospace;
    /* 使用等寬字體，使時間對齊更整齊 */
}

.lrc-text {
    flex-grow: 1;
    /* 歌詞文字佔據剩餘寬度 */
    text-align: left;
    /* 歌詞靠左對齊 */
    word-wrap: break-word;
    /* 長歌詞自動換行 */
}

.option-style {
    /* 預設選項樣式 */
}

.option-style.selected {
    background-color: #e0f2f7;
    /* 淺藍色背景 */
    font-weight: bold;
    /* 粗體 */
}

/*根據子元素i的active選項，調整shuffle按鈕的顏色*/
#shuffle-button i {
    font-weight: 900;
}

#shuffle-button.active {
    background-color: #e9fbc5;
    background-color: red;

    /* 淺藍色背景 */
    font-weight: bold;
    /* 粗體 */
}

/*版面樣式設定*/
#playback-interface {
    background-color: darkgoldenrod;
    padding-top: 10px;
    padding-bottom: 5px;
    max-height: 96vh;
}

select#category-select option:nth-child(1) {
    font-style: italic;
    /* 將第一個選項的字體設為斜體 */
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}

select#category-select option:nth-child(1) :hover {
    background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}

#subcategory-select {
    width: 120px;
}

select#subcategory-select option:nth-child(1) {
    font-style: italic;
    /* 將第一個選項的字體設為斜體 */
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}

select#subcategory-select option:nth-child(1) :hover {
    background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}


#lrc-container {
    background-color: beige;
    /*陰影*/
    border: 1px solid black;
    /*邊框*/
    border-radius: 5px;
    /*圓角*/
    padding: 10px;
    /*內距*/
    margin: 10px;
    /*外邊距*/
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    /*陰影*/
    width: 100%;
    margin: 0 auto;
}

/*播放清單介面樣式*/
#playlist-panel {
    background-color: #f0f0f0;
    /*背景色*/
    border: 1px solid black;
    /*邊框*/
    border-radius: 5px;
    /*圓角*/
    padding: 10px;
    /*內距*/
    margin: 10px;
    margin-top: 15px;
    /*外邊距*/
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    /*陰影*/
    max-height: 90vh;
    overflow-y: auto;
    height: auto;
}

#playlist-panel h2 {
    margin-top: 0;
    /*清除預設 margin-top*/
    background-color: beige;
    width: fit-content;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    border: 1px solid black;
    /*邊框*/
    border-radius: 5px;
    padding: 5px;
}

/*播放清單項目樣式*/
#playlist-panel li {
    padding: 5px;
    /*內距*/
    margin: 5px;
    /*外邊距*/
    cursor: pointer;
    /*滑鼠游標樣式*/
    transition: background-color 0.2s ease;
    /*平滑的 hover 效果*/
}

/*播放清單項目 hover 效果*/
#playlist-panel li:hover {
    background-color: #e0f2f7;
    /*淺藍色背景*/
}


#theme-category-list li {
    display: inline-block;
    /*水平排列*/
    margin: 5px;
    margin-bottom: 2px;
    /*外邊距*/
    padding: 1px;
    /*內距*/
    cursor: pointer;
    /*滑鼠游標樣式*/
    transition: background-color 0.2s ease;
    /*平滑的 hover 效果*/
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 50%;
}

#theme-category-list li:hover {
    background-color: #e0f2f7;
    /*淺藍色背景*/
}

#theme-category-list li.active {
    background-color: #d0e0ff;
    /*選中時的背景色*/
}

#theme-category-list li div {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

#theme-category-list li.active {
    background-color: #d0e0ff;
    /*選中時的背景色*/
    border: 1px solid rgb(178, 219, 43);
}

/* theme-Default 樣式*/
body.theme-Default #playback-interface {
    opacity: 1;
}

/* theme-Sloppy 樣式*/
body.theme-Sloppy #playback-interface {
    background-image: url(bg.png);
    background-repeat: no-repeat;
    background-clip: unset;
    background-size: cover;
    opacity: 1;
    background-position-x: center;
    background-position-y: bottom;
    background-size: contain;
    background-blend-mode: hard-light;
}

body.theme-Sloppy #lrc-container {
    opacity: 0.8;
    /*透明度*/
}

/* theme-Black 樣式*/
body.theme-Black #playback-interface {
    background-color: black;
    /*背景色*/
}

body.theme-Black #lrc-container {
    /*字體顏色*/
    color: white;
    /*背景色*/
    background-color: #333333;
}

body.theme-Black .lrc-time {
    color: #ccc;
    background-color: #666666;
}

body.theme-Black #metadata {
    color: white;

}

/* theme-White 樣式*/
body.theme-White #playback-interface {
    background-color: white;
    /*背景色*/
}

/* 全螢幕模式:瀏覽器 */
body.fullscreen-mode {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    /* 確保在最上層 */
}

.fullscreen-mode .player-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    /* 半透明黑色背景 */
    display: flex;
    justify-content: center;
    /* 水平置中 */
    align-items: center;
    /* 垂直置中 */
    z-index: 9999;
    /* 確保在最上層 */
    max-width: 100%;
    max-height: 100% !important;
}

.fullscreen-mode #lrc-container {
    /*針對全螢幕模式下的歌詞容器進行樣式調整*/
    width: 100%;
    height: 90%;
    max-width: calc(100vw - 350px);
    min-width: 360px;
    margin-top: 40px;
    position: fixed;
    top: 30px;
    right: 40px;
}

.fullscreen-mode .button-playlist {
    width: fit-content;
    top: 48px;
    right: 2px;
    display: none;
}

.fullscreen-mode .controls {
    /*全螢幕模式下隱藏控制列*/
    position: fixed;
    top: 0;

}

.fullscreen-mode .controls button {
    margin: 0 5px;
    height: 40px;
    display: flex
}

.fullscreen-mode .controls button#play {
    display: none;
}

.fullscreen-mode audio {
    /*全螢幕模式下隱藏音訊控制列*/
    display: none;
}

.fullscreen-mode #metadata {
    position: fixed;
    top: 40px;
    font-weight: 800;
}

.fullscreen-mode .select-container {
    /*全螢幕模式下隱藏選單列*/
    display: none !important;
}

.fullscreen-mode .playlist-dialog {
    /*全螢幕模式下隱藏播放清單*/
    display: none;
}

.fullscreen-mode #playlist-panel {
    /*全螢幕模式下隱藏播放清單*/
    /*display: none !important;*/
    position: fixed;
    top: 60px;
    left: 0;
    max-width: 260px;
}

.fullscreen-mode #theme-category {
    /*全螢幕模式下隱藏主題選單*/
    display: none;
}

/* 全螢幕模式:視窗 */
body.real-fullscreen-mode {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.real-fullscreen-mode .player-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    /* 半透明黑色背景 */
    display: flex;
    justify-content: center;
    /* 水平置中 */
    align-items: center;
    /* 垂直置中 */
    z-index: 10;
    /* 確保在最上層 */
    max-width: 100%;
    max-height: 100% !important;
}

.real-fullscreen-mode #lrc-container {
    /*針對全螢幕模式下的歌詞容器進行樣式調整*/
    width: 100%;
    height: 90%;
    min-width: 360px;
    margin-top: 40px;
    position: fixed;
    top: 30px;
    right: 0px;
    max-height: 89vh;
    overflow-y: auto;
    max-width: calc(100vw - 350px);
}

.real-fullscreen-mode .button-playlist {
    width: fit-content;
    top: 48px;
    right: 2px;
    display: none;
}

.real-fullscreen-mode .controls {
    /*全螢幕模式下隱藏控制列*/
    position: fixed;
    top: 0;
    margin: 0;
    margin-top: 5px;
}

.real-fullscreen-mode .controls button {
    margin: 0 5px;
    height: 40px;
    display: flex
}

.real-fullscreen-mode .controls button#play {
    display: none;
}

.real-fullscreen-mode .controls button#rewind {
    display: none;
}

.real-fullscreen-mode .controls button#fast-forward {
    display: none;
}

.real-fullscreen-mode .controls button#fullscreen-button {
    display: none;
}

.real-fullscreen-mode audio {
    /*全螢幕模式下隱藏音訊控制列*/
    display: none;
}

.real-fullscreen-mode #metadata {
    position: fixed;
    top: 45px;
    font-weight: 800;
}

.real-fullscreen-mode .select-container {
    /*全螢幕模式下隱藏選單列*/
    display: none !important;
}

.real-fullscreen-mode .playlist-dialog {
    /*全螢幕模式下隱藏播放清單*/
    /*display: none;*/
}

.real-fullscreen-mode #playlist-panel {
    /*全螢幕模式下播放清單*/
    position: fixed;
    top: 60px;
    left: 0;
    max-width: 260px;
}

.real-fullscreen-mode #playlist-panel h2 {
    display: none;
}

.real-fullscreen-mode #theme-category {
    /*全螢幕模式下隱藏主題選單*/
    display: none;
}