:root {
            --primary-color: #1D7BFF;
            --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 { 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; }

        .tag-hero { background: radial-gradient(circle at 50% 30%, var(--bg-deep) 0%, var(--bg-dark) 100%); padding: 50px 20px; text-align: center; border-bottom: 1px solid var(--border-color); }
        .tag-title { font-size: 28px; font-weight: 800; color:#fff; margin-bottom: 8px; }
        .tag-desc { font-size: 14px; color: var(--text-muted); }

        .tag-container { max-width: 900px; margin: 40px auto; padding: 0 20px; }
        .tag-feed { display: flex; flex-direction: column; gap: 24px; }
        .tag-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 24px; display: flex; gap: 24px; transition: all 0.3s; }
        .tag-card:hover { border-color: rgba(29, 123, 255, 0.25); transform: translateY(-2px); }
        .tag-img-box { width: 180px; height: 120px; border-radius: 8px; overflow: hidden; background: rgba(255,255,255,0.02); flex-shrink: 0; }
        .tag-img { width: 100%; height: 100%; object-fit: cover; }
        .tag-body { flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; }
        .tag-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); }
        .tag-art-title { font-size: 18px; font-weight: 700; color:#fff; line-height:1.4; margin-bottom: 8px; }
        .tag-art-desc { font-size: 13px; color: var(--text-muted); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

        .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); }

        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-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: 768px) {
            nav.desktop-nav, .header-actions { display:none; }
            .menu-toggle { display:block; }
            .tag-card { flex-direction: column; }
            .tag-img-box { width: 100%; height: 160px; }
            .footer-grid { grid-template-columns: 1fr; gap:30px; }
            .footer-bottom { flex-direction:column; text-align:center; }
        }