.article-container{max-width:1200px;margin:0 auto;padding:0 20px}.article-layout{display:grid;grid-template-columns:1fr 320px;gap:40px;margin-top:30px}.article-content{background:var(--bg-light);border:1px solid var(--border);border-radius:16px;padding:40px}.article-header{margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid var(--border)}.article-breadcrumb{display:flex;gap:10px;font-size:14px;color:var(--text-muted);margin-bottom:20px;flex-wrap:wrap}.article-breadcrumb a{color:var(--text-muted)}.article-breadcrumb a:hover{color:var(--primary)}.article-breadcrumb span{color:var(--text-muted)}.article-title{font-size:32px;line-height:1.3;margin-bottom:15px}.article-meta{display:flex;gap:20px;flex-wrap:wrap;font-size:14px;color:var(--text-muted)}.article-meta span{display:flex;align-items:center;gap:5px}.article-body{line-height:1.8;color:var(--text)}.article-body p{margin-bottom:20px;font-size:16px}.article-body h2{font-size:24px;margin:35px 0 20px;padding-bottom:10px;border-bottom:1px solid var(--border)}.article-body h3{font-size:20px;margin:25px 0 15px}.article-body img{max-width:100%;height:auto;border-radius:12px;margin:20px 0}.article-body figure{margin:25px 0}.article-body figcaption{text-align:center;font-size:14px;color:var(--text-muted);margin-top:10px}.article-body blockquote{border-left:4px solid var(--primary);padding:15px 20px;margin:20px 0;background:rgba(99,102,241,.05);border-radius:0 8px 8px 0}.article-body ul,.article-body ol{margin:15px 0;padding-left:25px}.article-body li{margin-bottom:10px}.article-body table{width:100%;border-collapse:collapse;margin:20px 0;background:var(--bg);border-radius:8px;overflow:hidden}.article-body th,.article-body td{padding:12px 15px;text-align:left;border-bottom:1px solid var(--border)}.article-body th{background:var(--bg-light);font-weight:600}.article-body .data-table{border:1px solid var(--border)}.article-toc{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:20px;margin:25px 0}.article-toc h4{font-size:16px;margin-bottom:15px}.article-toc ul{list-style:none;padding:0}.article-toc li{margin-bottom:8px}.article-toc a{color:var(--text-muted);font-size:14px}.article-toc a:hover{color:var(--primary)}.article-nav{display:flex;justify-content:space-between;margin-top:40px;padding-top:30px;border-top:1px solid var(--border);gap:20px}.article-nav-item{flex:1;padding:15px;background:var(--bg);border:1px solid var(--border);border-radius:8px;transition:all .3s}.article-nav-item:hover{border-color:var(--primary)}.article-nav-label{font-size:12px;color:var(--text-muted);margin-bottom:5px}.article-nav-title{font-size:14px;color:var(--text)}.article-sidebar{position:sticky;top:100px;align-self:start}.sidebar-card{background:var(--bg-light);border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:20px}.sidebar-card h4{font-size:16px;margin-bottom:15px;padding-bottom:10px;border-bottom:1px solid var(--border)}.sidebar-card ul{list-style:none}.sidebar-card li{margin-bottom:10px}.sidebar-card a{color:var(--text-muted);font-size:14px;display:block;padding:5px 0}.sidebar-card a:hover{color:var(--primary)}.related-articles{margin-top:40px;padding-top:30px;border-top:1px solid var(--border)}.related-articles h3{font-size:20px;margin-bottom:20px}.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.related-card{background:var(--bg);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:all .3s}.related-card:hover{border-color:var(--primary);transform:translateY(-3px)}.related-card img{width:100%;height:120px;object-fit:cover}.related-card-content{padding:15px}.related-card h4{font-size:14px;margin-bottom:8px;line-height:1.4}.related-card p{font-size:12px;color:var(--text-muted)}.comments-section{margin-top:40px;padding-top:30px;border-top:1px solid var(--border)}.comments-section h3{font-size:20px;margin-bottom:20px}.comment-item{display:flex;gap:15px;padding:20px;background:var(--bg);border-radius:12px;margin-bottom:15px}.comment-avatar{width:45px;height:45px;border-radius:50%;background:var(--gradient);display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}.comment-content{flex:1}.comment-header{display:flex;justify-content:space-between;margin-bottom:8px}.comment-name{font-weight:600;font-size:14px}.comment-date{font-size:12px;color:var(--text-muted)}.comment-text{font-size:14px;color:var(--text-muted);line-height:1.6}@media(max-width:1024px){.article-layout{grid-template-columns:1fr}.article-sidebar{position:static}.related-grid{grid-template-columns:1fr}}@media(max-width:768px){.article-content{padding:25px}.article-title{font-size:24px}}