:root {
            --primary-color: #1D7BFF;
            --primary-glow: rgba(29, 123, 255, 0.15);
            --bg-dark: rgb(32, 33, 36);
            --bg-deep: #0a1128;
            --bg-card: rgba(255, 255, 255, 0.03);
            --border-color: rgba(255, 255, 255, 0.08);
            --text-main: #f3f4f6;
            --text-muted: #9ca3af;
            --text-white: #ffffff;
            --max-width: 1200px;
        }

        * { box-sizing: border-box; margin:0; padding:0; }
        body {
            background-color: var(--bg-dark);
            color: var(--text-main);
            font-family: -apple-system, BlinkMacSystemFont, sans-serif;
            line-height: 1.6;
        }
        a { color: inherit; text-decoration: none; transition: all 0.3s; }

        
        header { background: rgba(32, 33, 36, 0.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-color); position: sticky; top:0; z-index:100; }
        .header-container { max-width: var(--max-width); margin:0 auto; padding:16px 20px; display:flex; align-items:center; justify-content:space-between; }
        .logo { display:inline-flex; align-items:center; gap:12px; }
        .logo img { height:40px; width:auto; max-width:160px; object-fit:contain; }
        .logo span { font-size:20px; font-weight:800; color: var(--text-white); }
        nav.desktop-nav { display:flex; gap:28px; }
        nav.desktop-nav a { font-size:15px; color: var(--text-muted); }
        nav.desktop-nav a:hover, nav.desktop-nav a.active { color: var(--primary-color); }
        .btn-download-top { background: linear-gradient(135deg, #1D7BFF, #0052cc); color:#fff; padding:8px 20px; border-radius:6px; font-weight:600; font-size:14px; }
        .menu-toggle { display:none; background:none; border:none; color:#fff; font-size:24px; cursor:pointer; }
        .drawer-backdrop { position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(0,0,0,0.6); z-index:199; opacity:0; visibility:hidden; transition:all 0.3s; }
        .drawer-backdrop.active { opacity:1; visibility:visible; }
        .mobile-drawer { position:fixed; top:0; left:-320px; width:300px; height:100vh; background:var(--bg-dark); border-right:1px solid var(--border-color); z-index:200; padding:24px; display:flex; flex-direction:column; gap:32px; transition:all 0.3s ease; }
        .mobile-drawer.active { left:0; }
        .drawer-header { display:flex; justify-content:space-between; align-items:center; }
        .drawer-close { background:none; border:none; color:#fff; font-size:28px; }
        .drawer-nav { display:flex; flex-direction:column; gap:20px; }

        
        .page-header {
            background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-dark) 100%);
            padding: 50px 20px;
            text-align: center;
            border-bottom: 1px solid var(--border-color);
        }
        .breadcrumbs {
            font-size: 13px;
            color: var(--text-muted);
            margin-bottom: 12px;
        }
        .breadcrumbs a { color: var(--primary-color); }
        .page-title { font-size: 28px; font-weight:800; color:#fff; margin-bottom: 8px;}
        .page-desc { font-size: 14px; color: var(--text-muted); max-width: 600px; margin: 0 auto; }

        .list-container {
            max-width: var(--max-width);
            margin: 0 auto;
            padding: 50px 20px;
            display: grid;
            grid-template-columns: 8fr 3fr;
            gap: 40px;
        }

        .list-feed {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        .feed-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            overflow: hidden;
            display: flex;
            transition: all 0.3s ease;
        }
        .feed-card:hover { border-color: rgba(29, 123, 255, 0.25); transform: translateY(-2px); }
        .feed-img-box { width: 240px; min-width: 240px; background: rgba(255,255,255,0.02); overflow:hidden; position:relative; }
        .feed-img { width:100%; height:100%; object-fit:cover; }
        .feed-content { padding: 24px; flex-grow: 1; display:flex; flex-direction:column; justify-content:space-between; }
        .feed-meta { display:flex; justify-content:space-between; font-size:12px; color: var(--text-muted); margin-bottom:10px; }
        .feed-title { font-size: 18px; font-weight:700; color:#fff; margin-bottom:10px; line-height:1.4; }
        .feed-summary { font-size:14px; color: var(--text-muted); line-height:1.5; margin-bottom: 16px; }
        .feed-tags { font-size: 11px; background: rgba(255,255,255,0.05); padding: 3px 8px; border-radius: 4px; color: var(--primary-color); }

        
        .pagination-container {
            margin-top: 40px;
            display: flex;
            justify-content: center;
            gap: 8px;
        }
        .pagination-container a, .pagination-container span {
            padding: 8px 16px;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            color: var(--text-muted);
            font-size: 14px;
        }
        .pagination-container .current {
            background: var(--primary-color);
            color: #fff;
            border-color: var(--primary-color);
        }

        
        .sidebar-widget {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 24px;
            margin-bottom: 30px;
        }
        .widget-title { font-size: 16px; font-weight:700; color:#fff; margin-bottom:16px; border-left: 3px solid var(--primary-color); padding-left: 10px; }
        .widget-list { list-style: none; display: flex; flex-direction:column; gap:12px; }
        .widget-list-item { font-size: 14px; color: var(--text-muted); display:flex; justify-content:space-between; gap:10px; }
        .widget-list-item a:hover { color: var(--primary-color); }

        
        .widget-tagcloud { display:flex; flex-wrap:wrap; gap:8px; }
        .widget-tagcloud a { background: rgba(255,255,255,0.05); border: 1px solid var(--border-color); font-size: 12px; padding: 6px 12px; border-radius: 4px; color: var(--text-muted); }
        .widget-tagcloud a:hover { border-color: var(--primary-color); color: var(--primary-color); }

        
        footer { background: #060913; border-top: 1px solid var(--border-color); padding: 60px 20px 30px 20px; }
        .footer-grid { max-width: var(--max-width); margin:0 auto 40px auto; display:grid; grid-template-columns: 2fr repeat(3, 1fr); gap:40px; }
        .footer-brand { display:flex; flex-direction:column; gap:16px; }
        .footer-brand p { font-size:14px; color: var(--text-muted); max-width:320px; }
        .footer-col h4 { font-size:15px; font-weight:700; color:#fff; margin-bottom:16px; }
        .footer-links { list-style:none; display:flex; flex-direction:column; gap:12px; }
        .footer-links a { font-size:13px; color: var(--text-muted); }
        .footer-links a:hover { color: var(--primary-color); }
        .footer-bottom { max-width: var(--max-width); margin:0 auto; border-top: 1px solid var(--border-color); padding-top: 30px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:12px; color: var(--text-muted); }

        @media (max-width: 968px) {
            .list-container { grid-template-columns: 1fr; }
        }
        @media (max-width: 768px) {
            nav.desktop-nav, .header-actions { display:none; }
            .menu-toggle { display:block; }
            .feed-card { flex-direction: column; }
            .feed-img-box { width:100%; height:180px; min-width:auto; }
            .footer-grid { grid-template-columns: 1fr; gap:30px; }
            .footer-bottom { flex-direction:column; text-align:center; }
        }