* { margin:0; padding:0; box-sizing:border-box; }
        body { font-family:'PingFang SC','Microsoft YaHei',sans-serif; background:#F5F7FA; color:#1e2a3a; }
        .container { max-width:1200px; margin:0 auto; padding:0 20px; }
        .detail-main { padding:24px 0 40px; }
        .article-header { background:#fff; border-radius:12px; padding:30px; margin-bottom:20px; box-shadow:0 1px 6px rgba(0,0,0,0.04); }
        .article-header .category { display:inline-block; background:#08C7A3; color:#fff; padding:2px 12px; border-radius:4px; font-size:12px; margin-bottom:12px; }
        .article-header h1 { font-size:24px; font-weight:600; line-height:1.4; margin-bottom:12px; }
        .article-header .meta { font-size:13px; color:#8a9aa8; display:flex; gap:16px; align-items:center; }
        .article-content { background:#fff; border-radius:12px; padding:30px; box-shadow:0 1px 6px rgba(0,0,0,0.04); line-height:1.8; font-size:15px; color:#2c3e50; overflow:hidden; }
        .article-content img { max-width:100%; height:auto; display:block; margin:10px auto; border-radius:8px; }
        .article-content p { margin-bottom:16px; }
        .article-content h1,.article-content h2,.article-content h3,.article-content h4 { margin:20px 0 12px; font-weight:600; }
        .back-link { display:inline-block; margin-bottom:16px; font-size:14px; color:#08C7A3; text-decoration:none; }
        .back-link:hover { text-decoration:underline; }
        @media (max-width:640px) { .article-header,.article-content { padding:20px; } }
        
        a { text-decoration:none; color:inherit; }
        .search-main { padding:24px 0 40px; }
        .search-header { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
        .search-header h1 { font-size:20px; font-weight:600; }
        .search-header h1 .keyword { color:#08C7A3; }
        .search-header .count { color:#8a9aa8; font-size:14px; }
        .article-list { display:flex; flex-direction:column; gap:16px; }
        .article-card { background:#fff; border-radius:12px; padding:20px; box-shadow:0 1px 6px rgba(0,0,0,0.04); display:flex; gap:18px; cursor:pointer; transition:box-shadow 0.2s; }
        .article-card:hover { box-shadow:0 4px 16px rgba(0,0,0,0.08); }
        .article-card .cover { width:180px; height:120px; border-radius:10px; object-fit:cover; flex-shrink:0; background:#eef2f7; }
        .article-card .info { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:space-between; }
        .article-card .info .title { font-size:17px; font-weight:600; color:#1e2a3a; line-height:1.4; }
        .article-card .info .desc { font-size:13px; color:#6a7a8e; margin-top:8px; line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
        .article-card .info .meta { display:flex; align-items:center; gap:16px; font-size:12px; color:#8a9aa8; margin-top:10px; }
        .article-card .info .meta i { margin-right:3px; }
        .empty-state { text-align:center; padding:60px 20px; color:#8a9aa8; }
        .empty-state i { font-size:48px; opacity:0.4; }
        .empty-state p { margin-top:12px; font-size:15px; }
        .pagination { display:flex; justify-content:center; align-items:center; gap:6px; margin:28px 0 0; padding:0; list-style:none; flex-wrap:wrap; }
        .pagination li { display:inline-block; }
        .pagination a, .pagination span { display:inline-block; min-width:36px; height:36px; line-height:36px; padding:0 10px; border-radius:6px; background:#fff; color:#5a6a7a; font-size:14px; text-align:center; border:1px solid #e6ebf0; }
        .pagination a:hover { color:#08C7A3; border-color:#08C7A3; text-decoration:none; }
        .pagination li.active span { background:#08C7A3; color:#fff; border-color:#08C7A3; }
        .pagination li.disabled span { color:#b6c0cc; background:#f5f7fa; }
        @media (max-width:640px) { .article-card { flex-direction:column; } .article-card .cover { width:100%; height:160px; } }