/* ===== Yahoo Hover START ===== */
        .yahoo-icon { background: linear-gradient(135deg, #720e9e 0%, #ff0084 100%); }
        .yahoo-bar { 
            background: linear-gradient(135deg, #720e9e 0%, #ff0084 100%); 
            left: var(--yahoo-position); 
            width: var(--yahoo-duration); 
        }
        .yahoo-animation-popup { 
            width: 600px; 
            height: 400px; 
            background: #FFFFFF; 
            font-family: Arial, Helvetica, sans-serif; 
            font-size: 12px; 
            padding: 0; 
            overflow: hidden;
            /* 提高 z-index 確保動畫顯示在年代列上方 */
            z-index: 100 !important;
            /* 調整位置避免被年代列遮蓋 */
            top: -30% !important;
            transform: translateY(0%) translateX(10px) scale(0.9) !important;
        }
        
        /* 當滑鼠懸停時也要調整位置 */
        .timeline-bar:hover + .yahoo-animation-popup {
            transform: translateY(0%) translateX(0) scale(1) !important;
        }
        .yahoo-animation-popup .yahoo-container { width: 100%; max-width: 800px; margin: 0 auto; background: white; animation: yh-pageLoad 2s ease-in-out; }
        @keyframes yh-pageLoad { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
        .yahoo-animation-popup .header { background: linear-gradient(to bottom, #7B68EE 0%, #6A5ACD 100%); padding: 10px; border-bottom: 2px solid #4B0082; }
        .yahoo-animation-popup .yahoo-logo { text-align: center; margin-bottom: 15px; }
        .yahoo-animation-popup .logo-text { font-size: 32px; font-weight: bold; color: #FF0000; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); animation: yh-logoGlow 3s ease-in-out infinite; letter-spacing: 2px; }
        @keyframes yh-logoGlow { 0%, 100% { color: #FF0000; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); } 50% { color: #FF4500; text-shadow: 2px 2px 8px rgba(255, 69, 0, 0.5), 0 0 15px rgba(255, 0, 0, 0.3); } }
        .yahoo-animation-popup .logo-exclamation { color: #FFD700; animation: yh-exclamationBounce 2s ease-in-out infinite; }
        @keyframes yh-exclamationBounce { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.2) rotate(5deg); } }
        .yahoo-animation-popup .tagline { text-align: center; color: white; font-size: 14px; font-weight: bold; animation: yh-taglinePulse 4s ease-in-out infinite; }
        @keyframes yh-taglinePulse { 0%, 100% { opacity: 0.9; } 50% { opacity: 1; transform: scale(1.05); } }
        .yahoo-animation-popup .search-section { background: #F0F0F0; padding: 15px; border-bottom: 1px solid #CCCCCC; text-align: center; }
        .yahoo-animation-popup .search-box { width: 300px; height: 25px; border: 2px inset #CCCCCC; padding: 3px 5px; font-size: 12px; animation: yh-searchGlow 3s ease-in-out infinite; }
        @keyframes yh-searchGlow { 0%, 100% { border-color: #CCCCCC; box-shadow: none; } 50% { border-color: #7B68EE; box-shadow: 0 0 8px rgba(123, 104, 238, 0.5); } }
        .yahoo-animation-popup .search-button { background: linear-gradient(to bottom, #E0E0E0, #C0C0C0); border: 2px outset #C0C0C0; padding: 5px 15px; margin-left: 5px; font-size: 12px; font-weight: bold; animation: yh-buttonHover 4s ease-in-out infinite; }
        @keyframes yh-buttonHover { 0%, 90%, 100% { background: linear-gradient(to bottom, #E0E0E0, #C0C0C0); border-style: outset; } 5%, 85% { background: linear-gradient(to bottom, #F0F0F0, #D0D0D0); border-style: inset; } }
        .yahoo-animation-popup .main-content { display: flex; background: white; height: 200px; }
        .yahoo-animation-popup .categories { width: 200px; background: #F8F8FF; border-right: 1px solid #CCCCCC; padding: 15px; }
        .yahoo-animation-popup .category-title { background: linear-gradient(to bottom, #7B68EE, #6A5ACD); color: white; padding: 5px 8px; font-weight: bold; font-size: 11px; margin-bottom: 10px; animation: yh-categoryGlow 5s ease-in-out infinite; }
        @keyframes yh-categoryGlow { 0%, 100% { background: linear-gradient(to bottom, #7B68EE, #6A5ACD); } 50% { background: linear-gradient(to bottom, #8B78FF, #7A6ADD); } }
        .yahoo-animation-popup .category-list { list-style: none; padding: 0; margin: 0 0 20px 0; }
        .yahoo-animation-popup .category-item { margin: 3px 0; animation: yh-itemFloat 3s ease-in-out infinite; }
        .yahoo-animation-popup .category-item:nth-child(1) { animation-delay: 0s; }
        .yahoo-animation-popup .category-item:nth-child(2) { animation-delay: 0.2s; }
        .yahoo-animation-popup .category-item:nth-child(3) { animation-delay: 0.4s; }
        @keyframes yh-itemFloat { 0%, 100% { transform: translateX(0px); } 50% { transform: translateX(3px); } }
        .yahoo-animation-popup .category-link { color: #0000EE; text-decoration: underline; font-size: 11px; animation: yh-linkFlash 4s ease-in-out infinite; }
        @keyframes yh-linkFlash { 0%, 90%, 100% { color: #0000EE; } 5%, 85% { color: #FF00FF; } }
        .yahoo-animation-popup .content-area { flex: 1; padding: 15px; }
        .yahoo-animation-popup .section-header { background: linear-gradient(to right, #FFD700, #FFA500); color: #8B0000; padding: 5px 10px; font-weight: bold; font-size: 13px; border: 1px solid #FF8C00; animation: yh-headerShimmer 3s ease-in-out infinite; }
        @keyframes yh-headerShimmer { 0%, 100% { background: linear-gradient(to right, #FFD700, #FFA500); } 50% { background: linear-gradient(to right, #FFE55C, #FFB347); } }
        /* ===== Yahoo Hover END ===== */