.article-hero{padding:calc(var(--header-height, 80px) + var(--space-20)) 0 var(--space-20);background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary-color) 50%,var(--accent-color) 100%);color:#fff;position:relative;overflow:hidden}.article-hero-content{max-width:900px;margin:0 auto}.article-breadcrumb{font-size:var(--text-sm);color:#fffc;margin-bottom:var(--space-4);display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.article-breadcrumb a{color:#ffffffe6;text-decoration:none;transition:color .3s ease}.article-breadcrumb a:hover{color:#fff}.article-breadcrumb span{color:#fff;font-weight:600;text-shadow:0 0 10px rgba(255,255,255,.4),0 0 20px rgba(255,255,255,.2);display:inline-flex;align-items:center;gap:var(--space-2);position:relative;padding-left:20px}.article-breadcrumb span:before{content:"";position:absolute;left:0;width:16px;height:16px;background:#fff;border-radius:var(--radius-full);box-shadow:0 2px 6px #0003;display:flex;align-items:center;justify-content:center}.article-breadcrumb .breadcrumb-icon{filter:brightness(0);width:12px;height:12px;object-fit:contain;position:absolute;left:2px;top:50%;transform:translateY(-50%);z-index:1}.article-title{font-size:var(--text-5xl);font-weight:800;color:#fff;margin-bottom:var(--space-8);letter-spacing:-.02em;line-height:1.2;text-align:center}.article-meta-header{display:flex;flex-wrap:wrap;gap:var(--space-6);justify-content:center;margin-bottom:var(--space-6)}.article-meta-item{display:flex;flex-direction:column;gap:var(--space-1);text-align:center}.meta-label{font-size:var(--text-xs);color:#ffffffb3;text-transform:uppercase;letter-spacing:.05em}.meta-value{font-size:var(--text-base);color:#fff;font-weight:500}.article-tags-header{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center}.article-tags-header .article-tag{background:#fff3;color:#fff;padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:500;backdrop-filter:blur(10px)}.article-content{background-color:var(--gray-50);padding:var(--space-20) 0}.article-content-wrapper{max-width:900px;margin:0 auto}.article-body{font-size:var(--text-base);line-height:1.8;color:var(--gray-900)}.article-body h2{font-size:var(--text-3xl);font-weight:700;color:var(--primary-color);margin-top:var(--space-12);margin-bottom:var(--space-6);line-height:1.3}.article-body h3{font-size:var(--text-2xl);font-weight:600;color:var(--gray-900);margin-top:var(--space-8);margin-bottom:var(--space-4);line-height:1.4}.article-body p{margin-bottom:var(--space-6)}.article-body ul,.article-body ol{margin-bottom:var(--space-6);padding-left:var(--space-8)}.article-body li{margin-bottom:var(--space-2)}.article-body table{width:100%;border-collapse:collapse;margin:var(--space-8) 0;overflow-x:auto;display:block}.article-body table thead{background:var(--primary-color);color:#fff}.article-body table th,.article-body table td{padding:var(--space-3) var(--space-4);text-align:left;border:1px solid var(--gray-200)}.article-body table tbody tr:nth-child(2n){background:var(--gray-50)}.article-body blockquote{border-left:4px solid var(--primary-color);padding-left:var(--space-6);margin:var(--space-8) 0;color:var(--gray-700);font-style:italic}.article-body code{background:var(--gray-100);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-size:.9em;font-family:Courier New,monospace}.article-body pre{background:var(--gray-900);color:#fff;padding:var(--space-6);border-radius:var(--radius-lg);overflow-x:auto;margin:var(--space-8) 0}.article-body pre code{background:transparent;padding:0;color:inherit}.article-body img{max-width:100%;height:auto;border-radius:var(--radius-lg);margin:var(--space-8) 0}.article-body hr{border:none;border-top:2px solid var(--gray-200);margin:var(--space-12) 0}.article-footer{padding:var(--space-16) 0}@media(max-width:768px){.article-hero{padding:calc(80px + var(--space-12)) 0 var(--space-12)}.article-title{font-size:var(--text-3xl)}.article-meta-header{flex-direction:column;gap:var(--space-4)}.article-body{font-size:var(--text-sm)}.article-body h2{font-size:var(--text-2xl)}.article-body h3{font-size:var(--text-xl)}.article-body table{font-size:var(--text-sm)}}