/* Google AI出品必属精品 */
body { background-color: #0b0f19; color: #e2e8f0; font-family: sans-serif; }
    .hide-scroll::-webkit-scrollbar { display: none; }
    .hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }

    /* 1. 圖片加載中的預設佔位樣式 (Loading 状态) */
    .img-placeholder {
        background-color: #DCDCDC; 
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="%2394a3b8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 32px;
    }

    /* 2. 圖片淡入動畫 */
    .img-fade-in { 
        opacity: 0; 
        transition: opacity 0.6s ease; 
        will-change: opacity;
    }
    .img-loaded { opacity: 1 !important; }

    img.opacity-40 {
        opacity: 0.4;
        background-color: #1a202c; 
        border-radius: 8px;        
        transition: opacity 0.3s;
        /* 新增这一行：确保占位图图标居中且不被拉伸变形 */
        object-fit: contain !important; 
    }

.player-error-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    z-index: 10; color: #fff;
}
.player-error-btn {
    margin-top: 15px; padding: 10px 25px;
    background: #3b82f6; border: none; border-radius: 4px;
    color: white; cursor: pointer; font-size: 16px;
}
.player-error-btn:hover { background: #2563eb; }
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 10px; }
.hide-scroll::-webkit-scrollbar { display: none; }