* { -webkit-tap-highlight-color: transparent; }
    ::-webkit-scrollbar { width: 0; height: 0; }
    body { font-family: 'Plus Jakarta Sans', sans-serif; }
    
    /* ============================================
       THEMES
       ============================================ */
    body.theme-light { background: #f5f5f4; color: #1c1917; }
    body.theme-light .app-bg { background: #f5f5f4; }
    body.theme-light .card-bg { background: #ffffff; border-color: rgba(0,0,0,0.06); }
    body.theme-light .header-bar { background: rgba(255,255,255,0.92); border-color: rgba(0,0,0,0.06); }
    body.theme-light .bottom-bar { background: rgba(255,255,255,0.92); border-color: rgba(0,0,0,0.06); }
    body.theme-light .sidebar-bg { background: #ffffff; border-color: rgba(0,0,0,0.06); }
    body.theme-light .mobile-frame { background: #ffffff; }
    
    body.theme-sepia { background: #f5e6c8; color: #5c4b37; }
    body.theme-sepia .app-bg { background: #f5e6c8; }
    body.theme-sepia .card-bg { background: #fdf6e3; border-color: rgba(92,75,55,0.1); }
    body.theme-sepia .header-bar { background: rgba(253,246,227,0.92); border-color: rgba(92,75,55,0.1); }
    body.theme-sepia .bottom-bar { background: rgba(253,246,227,0.92); border-color: rgba(92,75,55,0.1); }
    body.theme-sepia .sidebar-bg { background: #fdf6e3; border-color: rgba(92,75,55,0.1); }
    body.theme-sepia .mobile-frame { background: #fdf6e3; }
    
    body.theme-dark { background: #0f172a; color: #e2e8f0; }
    body.theme-dark .app-bg { background: #0f172a; }
    body.theme-dark .card-bg { background: #1e293b; border-color: rgba(255,255,255,0.06); }
    body.theme-dark .header-bar { background: rgba(15,23,42,0.92); border-color: rgba(255,255,255,0.06); }
    body.theme-dark .bottom-bar { background: rgba(15,23,42,0.92); border-color: rgba(255,255,255,0.06); }
    body.theme-dark .sidebar-bg { background: #1e293b; border-color: rgba(255,255,255,0.06); }
    body.theme-dark .mobile-frame { background: #1e293b; }
    body.theme-dark .text-gray-500 { color: #94a3b8 !important; }
    body.theme-dark .text-gray-600 { color: #94a3b8 !important; }
    body.theme-dark .text-gray-700 { color: #cbd5e1 !important; }
    body.theme-dark .text-gray-800 { color: #e2e8f0 !important; }
    body.theme-dark .text-gray-400 { color: #64748b !important; }
    body.theme-dark .border-gray-100, body.theme-dark .border-gray-200 { border-color: rgba(255,255,255,0.06) !important; }
    
    /* ============================================
       UTILITIES
       ============================================ */
    .glass { background: rgba(255,255,255,0.7); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.3); }
    .glass-card { background: rgba(255,255,255,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.5); box-shadow: 0 8px 32px rgba(0,0,0,0.08); }
    .gradient-mesh {
    background:
    radial-gradient(at 30% 20%, rgba(34,197,94,0.12) 0px, transparent 50%),
    radial-gradient(at 70% 10%, rgba(14,165,233,0.12) 0px, transparent 50%),
    radial-gradient(at 10% 60%, rgba(249,115,22,0.1) 0px, transparent 50%),
    radial-gradient(at 80% 70%, rgba(34,197,94,0.08) 0px, transparent 50%),
    radial-gradient(at 20% 90%, rgba(14,165,233,0.1) 0px, transparent 50%);
    }
    .gradient-text-green { background: linear-gradient(135deg,#16a34a,#22c55e,#4ade80); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
    .gradient-text-sky { background: linear-gradient(135deg,#0284c7,#0ea5e9,#38bdf8); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
    .gradient-text-orange { background: linear-gradient(135deg,#ea580c,#f97316,#fb923c); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
    .gradient-text-combo { background: linear-gradient(135deg,#16a34a,#0ea5e9,#f97316); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
    .gradient-bg-combo { background: linear-gradient(135deg,#16a34a,#0ea5e9,#f97316); background-size:300% 300%; animation: gradient-shift 8s ease infinite; }
    .gradient-bg-green { background: linear-gradient(135deg,#16a34a,#22c55e,#4ade80); }
    .gradient-bg-sky { background: linear-gradient(135deg,#0284c7,#0ea5e9,#38bdf8); }
    .gradient-bg-orange { background: linear-gradient(135deg,#ea580c,#f97316,#fb923c); }
    .card-hover { transition: all 0.3s cubic-bezier(0.4,0,0.2,1); }
    .card-hover:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.12); }
    
    .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; }
    
    /* ============================================
       MOBILE VIEW
       ============================================ */
    .mobile-view { display: none; }
    @media (max-width: 767px) {
        .mobile-view { display: block; }
        .desktop-view { display: none; }
    }
    
    /* ============================================
       DESKTOP VIEW
       ============================================ */
    .desktop-view { display: none; }
    @media (min-width: 768px) {
        .desktop-view { display: flex; }
    }
    
    /* ============================================
       ANIMATIONS
       ============================================ */
    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
    @keyframes gradient-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
    @keyframes fade-in { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
    @keyframes slide-up { from{transform:translateY(100%)} to{transform:translateY(0)} }
    .animate-fade-in { animation: fade-in 0.5s ease-out forwards; }
    .animate-float { animation: float 6s ease-in-out infinite; }
    .animate-float-delayed { animation: float 6s ease-in-out 3s infinite; }
    
    /* ============================================
       COMPONENT STYLES
       ============================================ */
    .theme-btn {
        width: 40px; height: 40px; border-radius: 50%;
        border: 2px solid #e2e8f0; transition: all 0.2s ease; cursor: pointer;
    }
    .theme-btn.active { border-color: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.2); }
    
    .article-card {
        transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    }
    .article-card:hover {
        transform: translateY(-4px);
    }
    
    .pagination-btn {
        min-width: 40px; height: 40px; border-radius: 10px;
        display: flex; align-items: center; justify-content: center;
        font-size: 14px; font-weight: 500; transition: all 0.2s ease;
    }
    .pagination-btn.active {
        background: linear-gradient(135deg,#16a34a,#22c55e);
        color: white; box-shadow: 0 4px 12px rgba(34,197,94,0.3);
    }
    .pagination-btn:not(.active):hover {
        background: #f1f5f9;
    }
    
    .search-input {
        border: 2px solid #e2e8f0; border-radius: 12px; padding: 10px 16px;
        font-size: 14px; width: 100%; transition: all 0.2s ease;
        outline: none; background: transparent;
    }
    .search-input:focus { border-color: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.1); }
    
    .tag-chip {
        padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600;
        transition: all 0.2s ease; cursor: pointer;
    }
    .tag-chip.active {
        background: linear-gradient(135deg,#16a34a,#22c55e); color: white;
    }
    .tag-chip:not(.active) {
        background: #f1f5f9; color: #64748b;
    }
    .tag-chip:not(.active):hover {
        background: #e2e8f0;
    }
    
    body.theme-dark .pagination-btn:not(.active) { background: #334155; color: #94a3b8; }
    body.theme-dark .pagination-btn:not(.active):hover { background: #475569; }
    body.theme-dark .search-input { border-color: #334155; color: #e2e8f0; }
    body.theme-dark .search-input:focus { border-color: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.15); }
    body.theme-dark .tag-chip:not(.active) { background: #334155; color: #94a3b8; }
    body.theme-dark .tag-chip:not(.active):hover { background: #475569; }
    body.theme-dark .theme-btn { border-color: #334155; }