.article-page{padding:0;}.article-page .content-wrapper{display:block;}.article{background:var(--white);border-radius:8px;overflow:hidden;margin-bottom:30px;}.article-cover{width:100%;height:400px;overflow:hidden;}.article-cover img{width:100%;height:100%;object-fit:cover;}.article-header{padding:30px 20px 10px 40px;border-bottom:1px solid var(--border-color);}.article-title{font-size:28px;font-weight:bold;margin-bottom:20px;line-height:1.4;}.article-meta{display:flex;gap:12px;color:#999;font-size:14px;margin-bottom:15px;}.article-meta i{color:#999;margin-right:4px;font-size:14px;}.article-meta a{color:var(--primary-color);}.article-tags{display:flex;gap:10px;}.article-tags .tag{padding:4px 12px;font-size:13px;}.article-content{padding:15px 20px 10px 40px;font-size:16px;line-height:1.8;}.article-content p{margin-bottom:20px;}.article-content img{max-width:100%;height:auto;border-radius:4px;margin:20px 0;}.article-content pre{background:#f6f8fa;border-radius:6px;padding:16px;overflow-x:auto;margin:20px 0;position:relative;}.article-content pre code{font-family:'SF Mono',Consolas,'Liberation Mono',Menlo,monospace;font-size:14px;line-height:1.6;}.article-content code{background:#f0f0f0;padding:2px 6px;border-radius:3px;font-family:'SF Mono',Consolas,monospace;font-size:0.9em;}.article-content h1,.article-content h2,.article-content h3,.article-content h4,.article-content h5,.article-content h6{margin:30px 0 20px;font-weight:600;line-height:1.4;}.article-content h2{font-size:22px;}.article-content h3{font-size:18px;}.article-content blockquote{border-left:4px solid var(--primary-color);padding:15px 20px;margin:20px 0;background:#f5f5f5;color:var(--text-secondary);}.article-content ul,.article-content ol{padding-left:30px;margin:20px 0;}.article-content li{margin:8px 0;}.article-content table{width:100%;border-collapse:collapse;margin:20px 0;}.article-content th,.article-content td{border:1px solid var(--border-color);padding:10px 15px;text-align:left;}.article-content th{background:#f5f5f5;font-weight:600;}.copy-btn{position:absolute;top:10px;right:10px;padding:5px 10px;background:var(--primary-color);color:var(--white);border:none;border-radius:4px;font-size:12px;cursor:pointer;opacity:0;transition:opacity 0.3s;}.article-content pre:hover .copy-btn{opacity:1;}.copy-btn.copied{background:var(--success-color);}.article-actions{display:flex;justify-content:space-between;align-items:center;padding:20px 40px;border-top:1px solid var(--border-color);}.btn-like{padding:10px 30px;background:var(--primary-color);color:var(--white);border:none;border-radius:4px;cursor:pointer;transition:background 0.3s;}.btn-like:hover{background:#40a9ff;}.btn-like.liked{background:var(--danger-color);}.share{display:flex;align-items:center;gap:10px;color:var(--text-secondary);}.share a{padding:5px 15px;border-radius:4px;color:var(--white);}.share-weibo{background:#e6162d;}.share-qq{background:#1296db;}.related-articles{background:var(--white);border-radius:8px;padding:30px;}.related-articles .section-title{margin-bottom:25px;}.article-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px;}.article-item{display:block;background:var(--bg-color);border-radius:6px;overflow:hidden;transition:transform 0.3s;}.article-item:hover{transform:translateY(-5px);}.article-item .article-cover{width:100%;height:140px;}.article-item h4{padding:15px;font-size:14px;color:var(--text-color);line-height:1.4;height:55px;overflow:hidden;}.article-item .date{display:block;padding:0 15px 15px;color:var(--text-light);font-size:12px;}@media(max-width:768px){.article-cover{height:250px;}.article-header{padding:20px;}.article-title{font-size:22px;}.article-content{padding:20px;font-size:15px;}.article-meta{flex-wrap:wrap;gap:10px;}.article-actions{flex-direction:column;gap:15px;padding:20px;}}