/* 白天模式：明亮科技背景 */
.hero-bg { background-color: #F8FAFC; background-image: radial-gradient(circle at 15% 50%, rgba(249, 115, 22, 0.1), transparent 40%), radial-gradient(circle at 85% 30%, rgba(15, 23, 42, 0.05), transparent 40%); position: relative; }

/* 黑夜模式：宇宙星雲與星光背景 */
html.dark .hero-bg { background-color: #030014; background-image: radial-gradient(circle at 15% 50%, rgba(138, 43, 226, 0.25), transparent 40%), radial-gradient(circle at 85% 30%, rgba(0, 240, 255, 0.25), transparent 40%); }
html.dark .hero-bg::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-image: 
        radial-gradient(1px 1px at 10% 10%, rgba(255,255,255,0.8) 100%, transparent),
        radial-gradient(2px 2px at 20% 30%, rgba(0,240,255,0.8) 100%, transparent),
        radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,0.8) 100%, transparent),
        radial-gradient(2px 2px at 60% 20%, rgba(138,43,226,0.8) 100%, transparent),
        radial-gradient(1px 1px at 80% 80%, rgba(255,255,255,0.8) 100%, transparent),
        radial-gradient(1.5px 1.5px at 90% 10%, rgba(0,240,255,0.8) 100%, transparent);
    background-size: 120px 120px; opacity: 0.5; z-index: 0; pointer-events: none;
}

.image-hover-zoom { overflow: hidden; border-radius: 1rem; }
.image-hover-zoom img { transition: transform 0.5s ease; width: 100%; height: 100%; object-fit: cover; }
.image-hover-zoom:hover img { transform: scale(1.05); }

.modal-table { border-collapse: separate; border-spacing: 0; width: 100%; }
.modal-table th { padding: 1rem; font-weight: 800; text-align: left; }
html:not(.dark) .modal-table th { background: rgba(249, 115, 22, 0.1); color: #F97316; }
html.dark .modal-table th { background: rgba(0, 240, 255, 0.1); color: #00F0FF; }
.modal-table td { padding: 1rem; border-top: 1px solid rgba(156, 163, 175, 0.2); vertical-align: middle; }
.modal-table td:nth-child(2) { font-weight: 700; }

.modal-overlay { opacity: 0; visibility: hidden; transition: all 0.3s ease; }
.modal-overlay.active { opacity: 1; visibility: visible; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* 動畫區 */
.animate-glow { animation: pulse-glow-light 2s infinite; }
html.dark .animate-glow { animation: pulse-glow-dark 2s infinite; }
@keyframes pulse-glow-light { 0%, 100% { box-shadow: 0 0 10px rgba(249, 115, 22, 0.3); } 50% { box-shadow: 0 0 20px rgba(249, 115, 22, 0.6); } }
@keyframes pulse-glow-dark { 0%, 100% { box-shadow: 0 0 10px rgba(0, 240, 255, 0.3); } 50% { box-shadow: 0 0 25px rgba(0, 240, 255, 0.8); } }

/* Zalo 懸浮視窗動畫 */
#zaloWidget { transform: translateX(150%); transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
#zaloWidget.active { transform: translateX(0); }