: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; }

        .article-container { max-width: 850px; margin: 40px auto; padding: 0 20px; }
        .breadcrumbs { font-size: 13px; color: var(--text-muted); margin-bottom: 24px; }
        .breadcrumbs a { color: var(--primary-color); }
        .art-title { font-size: clamp(24px, 4vw, 34px); font-weight: 800; color:#fff; line-height: 1.3; margin-bottom: 16px; }
        
        .art-meta { display:flex; align-items:center; gap:20px; font-size:13px; color: var(--text-muted); border-bottom: 1px solid var(--border-color); padding-bottom: 20px; margin-bottom: 30px; flex-wrap:wrap; }
        .art-meta span strong { color:#fff; }

        .art-rich-text { font-size:16px; color:#e5e7eb; line-height:1.8; margin-bottom: 40px; }
        .art-rich-text p { margin-bottom:20px; }
        .art-rich-text h2 { font-size:22px; font-weight:700; color:#fff; margin:36px 0 16px 0; }
        .art-rich-text img { max-width: 100%; border-radius: 8px; margin: 20px 0; display:block; }

        .art-tags-line { margin-top:30px; border-top: 1px solid var(--border-color); padding-top: 20px; font-size:14px; color: var(--text-muted); }
        .art-tags-line a { display:inline-block; background:rgba(255,255,255,0.05); color: var(--primary-color); padding: 4px 10px; border-radius:4px; margin-left:8px; }

        .prev-next-nav { display:grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 40px 0; border-top:1px solid var(--border-color); border-bottom:1px solid var(--border-color); padding:20px 0; }
        .prev-next-nav div span { display:block; font-size:12px; color: var(--text-muted); margin-bottom:6px; }
        .prev-next-nav div a { font-size:14px; font-weight:700; color:#fff; }
        .prev-next-nav div a:hover { color: var(--primary-color); }

        .like-section { margin-top: 60px; }
        .like-title { font-size:20px; font-weight:800; color:#fff; margin-bottom:24px; border-left:3px solid var(--primary-color); padding-left:10px; }
        .like-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; }
        .like-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius:8px; overflow:hidden; transition: all 0.3s; }
        .like-card:hover { border-color: rgba(29, 123, 255, 0.25); }
        .like-img { width:100%; height:120px; object-fit:cover; }
        .like-body { padding:16px; }
        .like-card-title { font-size:14px; font-weight:700; color:#fff; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

        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; }
            .prev-next-nav { grid-template-columns: 1fr; }
            .like-grid { grid-template-columns: 1fr; }
            .footer-grid { grid-template-columns: 1fr; gap:30px; }
            .footer-bottom { flex-direction:column; text-align:center; }
        }