body { font-family: 'Poppins', sans-serif; transition: background-color 0.3s, color 0.3s; }
html, body { overflow-x: hidden; }
.bg-purple-main { background-color: #711f91; }
.text-purple-main { color: #711f91; }
.border-purple-main { border-color: #711f91; }
.news-gradient { background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%); }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.story-modal-card { width: min(450px, 92vw); height: min(85vh, 800px); }
.story-video { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 9 / 16; }
.podcast-modal-card { width: min(600px, 92vw); max-height: min(80vh, 600px); overflow-y: auto; }
.podcast-modal-card::-webkit-scrollbar { width: 6px; }
.podcast-modal-card::-webkit-scrollbar-track { background: rgba(255,255,255,0.1); }
.podcast-modal-card::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 3px; }
.podcast-modal-card::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.5); }
#audio-player { width: 100%; height: 40px; }
#audio-player::-webkit-media-controls-panel { background-color: rgba(255,255,255,0.1); }
.story-modal-card::-webkit-scrollbar { width: 6px; }
.story-modal-card::-webkit-scrollbar-track { background: rgba(255,255,255,0.1); }
.story-modal-card::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 3px; }
.story-modal-card::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.5); }
.video-modal-card { width: min(800px, 92vw); max-height: min(90vh, 750px); overflow-y: auto; }
.video-modal-card::-webkit-scrollbar { width: 6px; }
.video-modal-card::-webkit-scrollbar-track { background: rgba(255,255,255,0.1); }
.video-modal-card::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 3px; }
.video-modal-card::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.5); }

/* Line clamp utilities */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Dark Mode */
.dark { color-scheme: dark; }
.dark body { background-color: #0f0f0f; color: #e5e5e5; }
.dark .bg-white { background-color: #1a1a1a !important; }
.dark .bg-gray-50 { background-color: #141414 !important; }
.dark .text-gray-800 { color: #e5e5e5 !important; }
.dark .text-gray-900 { color: #f5f5f5 !important; }
.dark .text-gray-700 { color: #d4d4d4 !important; }
.dark .text-gray-600 { color: #a3a3a3 !important; }
.dark .text-gray-500 { color: #737373 !important; }
.dark .text-gray-400 { color: #525252 !important; }
.dark .border-gray-100 { border-color: #262626 !important; }
.dark .border-gray-200 { border-color: #303030 !important; }
.dark .border-b { border-color: #262626; }
.dark header.bg-white { background-color: #111111 !important; }
.dark .shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.5) !important; }
.dark .shadow-md { box-shadow: 0 4px 6px rgba(0,0,0,0.5) !important; }
.dark .shadow-lg { box-shadow: 0 10px 15px rgba(0,0,0,0.5) !important; }
.dark article.bg-white { background-color: #1a1a1a !important; border-color: #262626 !important; }
.dark .hover\:bg-purple-50\/50:hover { background-color: rgba(113, 31, 145, 0.1) !important; }

/* Dark Mode Toggle Button */
.dark-mode-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.dark .dark-mode-toggle {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}
.dark-mode-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.dark .dark-mode-toggle::after {
    transform: translateX(20px);
    background: #fbbf24;
}
.dark-mode-toggle .icon-sun,
.dark .dark-mode-toggle .icon-moon { display: none; }
.dark .dark-mode-toggle .icon-sun,
.dark-mode-toggle .icon-moon { display: block; }
.dark-mode-toggle i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
}
.dark-mode-toggle .icon-sun { right: 5px; color: #fbbf24; }
.dark-mode-toggle .icon-moon { left: 5px; color: white; }