:root {
    --primary-color: #3EC3D5;
    --primary-hover: #4ad5e8;
    --bg-gray: #E0E0E0;
    --icon-bg: #666666;
    --icon-hover: #777777;
    --text-main: #333333;
    --text-sub: #888888;
}

html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; background: #f4f7f6; font-family: "Microsoft JhengHei", sans-serif; }

.outer-container { 
    display: flex; flex-direction: column; height: 100vh; 
    max-width: 480px; margin: 0 auto; width: 100%; padding: 10px; box-sizing: border-box; 
}

/* --- 下拉選單樣式 --- */
.custom-album-dropdown { position: relative; margin-bottom: 8px; flex-shrink: 0; z-index: 10000; }
.selected-album { 
    background: white; border: 2px solid var(--primary-color); border-radius: 8px; 
    padding: 6px 12px; display: flex; align-items: center; cursor: pointer; 
    min-height: 44px;
}
.selected-album img { width: 30px; height: 30px; border-radius: 4px; margin-right: 10px; object-fit: cover; }
.selected-album span { font-weight: bold; color: var(--text-main); font-size: 14px; }

.album-options { 
    display: none; position: absolute; top: 100%; left: 0; right: 0; 
    background: white; border: 1px solid #ddd; border-radius: 8px; 
    margin-top: 4px; max-height: 180px; overflow-y: auto; box-shadow: 0 4px 12px rgba(0,0,0,0.15); 
}
.album-option-item { display: flex; align-items: center; padding: 10px; border-bottom: 1px solid #eee; cursor: pointer; }
.album-option-item img { width: 30px; height: 30px; border-radius: 4px; margin-right: 10px; object-fit: cover; }
.album-option-item span { font-size: 13px; color: #555; }
.album-option-item.active-album { background: #e0f7fa; }

/* --- 播放器主體 --- */
.wptpa_player_inner { background: white; border-radius: 12px; display: flex; flex-direction: column; flex: 1; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }

/* 修正：限制 Cover 大小並保持置中 */
.wptpa_info_section { text-align: center; padding: 15px 10px; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
.wptpa_cover { 
    max-width: 80px; max-height: 80px; width: auto; height: auto; 
    border-radius: 8px; margin: 0 auto 8px auto; display: block; object-fit: cover;
}
.wptpa_title { font-size: 16px; font-weight: bold; color: var(--text-main); margin-bottom: 2px; }
.wptpa_artist { font-size: 13px; color: var(--text-sub); }

/* --- 進度條與控制項 --- */
.wptpa_progress_section { padding: 10px 15px; display: flex; align-items: center; gap: 10px; }
.wptpa_time { font-size: 11px; color: #999; width: 35px; text-align: center; }
.wptpa_range { flex: 1; -webkit-appearance: none; height: 4px; border-radius: 2px; background: var(--bg-gray); outline: none; }
.wptpa_range::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; background: var(--primary-color); border-radius: 50%; border: 2px solid white; }

.wptpa_controls { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 5px 10px 15px; }
.wptpa_btn { width: 36px; height: 36px; background: var(--icon-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; fill: white; cursor: pointer; }
#wptpa_play { width: 48px; height: 48px; background: var(--primary-color); }
.wptpa_vol_container { display: flex; align-items: center; gap: 4px; }
.wptpa_vol_slider { width: 50px !important; }

/* --- 播放清單配色還原 --- */
.wptpa_playlist { flex: 1; overflow-y: auto; background: #fafafa; border-top: 1px solid #eee; }
.wptpa_pllst_itm { display: flex; align-items: center; padding: 10px 15px; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
.wptpa_pllst_itm:hover { background: #f0f0f0; }
.wptpa_pllst_itm.active { background: white; border-left: 4px solid var(--primary-color); }
.wptpa_pl_no { width: 25px; font-size: 12px; color: #bbb; }
.wptpa_pl_title { font-size: 14px; color: var(--text-main); flex: 1; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

/* --- Toast 提示樣式 --- */
.wptpa_toast { 
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); 
    background: rgba(0,0,0,0.8); color: white; padding: 12px 24px; border-radius: 30px; 
    z-index: 99999; display: none; white-space: nowrap; font-size: 14px;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; }