/*  灵动岛  */
    #ba-dynamic-island {
        position: fixed;
        top: 20px; 
        left: 50%;
        transform: translateX(-50%) scale(1); 
        
        /* 默认状态：时间 */
        width: 150px; 
        height: 44px;
        
        background-color: #000;
        border-radius: 50px;
        z-index: 100000;
        box-shadow: 0 8px 25px rgba(0,0,0,0.3);
        overflow: hidden; 
        
        opacity: 1; 
        
        /* 动画过渡 */
        transition: 
            width 0.6s cubic-bezier(0.5, 1.6, 0.5, 0.8),
            opacity 0.4s ease,
            transform 0.4s ease;
    }

    /* 展开状态 (播放时) */
    #ba-dynamic-island.expanded { 
        width: min(420px, 92vw); 
    }

    /* === 内部元素 === */
    .island-element {
        position: absolute; top: 50%; transform: translateY(-50%);
        display: flex; align-items: center; height: 100%;
    }

    /* 中间：时间 */
    .island-center {
        left: 50%; 
        transform: translate(-50%, -50%); 
        color: #fff; font-family: 'Monaco', 'Consolas', monospace;
        font-size: 15px; font-weight: bold; letter-spacing: 1px;
        white-space: nowrap; 
        pointer-events: auto; cursor: pointer; user-select: none; z-index: 10;
        padding: 10px 20px;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }
    .island-center.fade-blur { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }

    /* 左右两侧 */
    .island-left, .island-right {
        opacity: 0; transition: all 0.4s ease; transform: translateY(-50%) scale(0.5); 
    }
    #ba-dynamic-island.expanded .island-left,
    #ba-dynamic-island.expanded .island-right {
        opacity: 1; transform: translateY(-50%) scale(1); transition-delay: 0.1s;
    }

    /* 左侧定位 */
    .island-left { left: 20px; }
    .vol-icon { width: 16px; height: 16px; margin-right: 8px; }
    .smooth-slider {
        -webkit-appearance: none; width: 90px; height: 4px;
        background: rgba(255,255,255,0.3); border-radius: 10px; outline: none; cursor: pointer;
    }
    .smooth-slider::-webkit-slider-thumb {
        -webkit-appearance: none; width: 12px; height: 12px;
        background: #fff; border-radius: 50%; cursor: pointer; box-shadow: 0 0 5px rgba(0,0,0,0.3);
    }

    /* 右侧定位 */
    .island-right { right: 20px; }
    .icon-container { position: relative; width: 22px; height: 22px; cursor: pointer; }
    .pp-icon { position: absolute; top: 0; left: 0; width: 100%; height: 100%; fill: #fff; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
    .icon-play { opacity: 1; transform: scale(1) rotate(0deg); }
    .icon-pause { opacity: 0; transform: scale(0.5) rotate(-90deg); }
    #ba-play-toggle.playing .icon-play { opacity: 0; transform: scale(0.5) rotate(90deg); }
    #ba-play-toggle.playing .icon-pause { opacity: 1; transform: scale(1) rotate(0deg); }


    /* 2. 小横条 & 弹窗 */
    .home-indicator {
        position: fixed; bottom: 15px; left: 50%; transform: translateX(-50%) scale(1);
        width: clamp(134px, 18vw, 268px); height: 5px;
        background-color: rgba(0, 0, 0, 0.4); border-radius: 100px; z-index: 1000; cursor: pointer;
        overflow: hidden; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
    }
    .home-indicator:hover { background-color: rgba(0, 0, 0, 0.6); }
    .home-indicator:active { transform: translateX(-50%) scale(0.95, 0.8); }
    .home-indicator::before, .home-indicator::after {
        content: ""; position: absolute; top: 0; height: 100%; width: var(--prog-side, 0%);
        background-color: #ffb6c1; box-shadow: 0 0 10px #ffb6c1, 0 0 5px #ff69b4; 
        transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); pointer-events: none;
    }
    .home-indicator::before { left: 0; } .home-indicator::after { right: 0; }
    .home-indicator.charging { box-shadow: 0 0 0 1px rgba(255, 182, 193, 0.3), 0 0 15px rgba(255, 182, 193, 0.2); }

    #ba-modal {
        display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0, 0, 0, 0); z-index: 99999;
        justify-content: center; align-items: center; opacity: 0; transition: opacity 0.5s ease;
        user-select: none; pointer-events: none; 
    }
    #ba-modal.active { opacity: 1; pointer-events: auto; }

    #ba-window {
        position: relative; width: fit-content; height: auto;
        padding: 20px 60px 20px 60px; max-width: 95vw; max-height: 95vh;
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        background: rgba(40, 40, 40, 0.75); 
        backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
        border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.15);
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5); 
        transform: translateY(100px) scale(0.9); opacity: 0;
        transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.6s ease;
        overflow: hidden;
    }
    #ba-modal.active #ba-window { transform: translateY(0) scale(1); opacity: 1; }

    #ba-close {
        position: absolute; top: 10px; right: 15px; width: 30px; height: 30px; 
        line-height: 28px; text-align: center; font-size: 20px;
        color: rgba(255,255,255,0.8); background: rgba(0,0,0,0.3);
        border-radius: 50%; cursor: pointer; transition: all 0.3s;
        border: 1px solid rgba(255,255,255,0.1); z-index: 20;
    }
    #ba-close:hover { background: rgba(255,50,50,0.9); color: #fff; transform: rotate(90deg) scale(1.1); }

    #ba-screen {
        color: #ffffff98; font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
        font-weight: 900; white-space: pre; text-align: center; margin: 0;
        pointer-events: none;
        font-size: 0.52vw; line-height: 1.0em; letter-spacing: -0.1em; 
        transform: scaleX(1.1) scaleY(1.0); 
    }

    #ba-progress-area {
        position: absolute; bottom: 0; left: 0; width: 100%; height: 15px; cursor: pointer; z-index: 10;
        display: flex; align-items: flex-end; 
    }
    #ba-progress-bg { width: 100%; height: 4px; background: rgba(255, 255, 255, 0.2); transition: height 0.2s; }
    #ba-progress-area:hover #ba-progress-bg { height: 6px; }
    #ba-progress-fill {
        width: 0%; height: 100%; background: #ffb6c1;
        box-shadow: 0 0 10px #ffb6c1; border-radius: 0 4px 4px 0; position: relative;
    }
    #ba-progress-fill::after {
        content: ""; position: absolute; right: -4px; top: 50%; transform: translateY(-50%) scale(0);
        width: 10px; height: 10px; border-radius: 50%; background: #fff; transition: transform 0.2s;
    }
    #ba-progress-area:hover #ba-progress-fill::after { transform: translateY(-50%) scale(1); }


    /* 核心修复：独立分级判定 */
    @media (max-width: 768px) {
        #ba-window { padding: 10px; max-width: 98vw; }
        #ba-screen { font-size: 2.2vw; } 
    }

    /* --- 定义隐藏时的动画效果 (共用类) --- */
    /* 注意：这里不直接生效，而是通过下面的 @media 匹配后生效。
       效果：宽度变0 + 透明度变0 + 缩小 
    */
    
    /* 判定一：【展开状态】 (正在播放) 
       如果屏幕宽度 < 400px，隐藏！
    */
    @media (max-width: 400px) {
        #ba-dynamic-island.expanded {
            width: 0 !important;
            opacity: 0 !important;
            transform: translateX(-50%) scale(0.8) !important;
            pointer-events: none;
        }
    }

    /* 判定二：【默认状态】 (只看时间)
       只有屏幕宽度 < 270px，才隐藏！
       :not(.expanded) 确保了这行代码不会干扰展开状态
    */
    @media (max-width: 270px) {
        #ba-dynamic-island:not(.expanded) {
            width: 0 !important;
            opacity: 0 !important;
            transform: translateX(-50%) scale(0.8) !important;
            pointer-events: none;
        }
    }

    /* 判定三：【高度太矮】
       无论什么状态，高度不够直接隐藏
    */
    @media (max-height: 300px) {
        #ba-dynamic-island {
            width: 0 !important;
            opacity: 0 !important;
            transform: translateX(-50%) scale(0.8) !important;
            pointer-events: none;
        }
    }