.blog-detail-page{background:var(--color-bg);min-height:100vh}.article-hero{background:linear-gradient(135deg, var(--surface-sunken) 0%, var(--surface-sunken) 100%);border-bottom:1px solid var(--color-border);padding:3rem 0 2rem}.article-hero-content{color:var(--color-white);padding:3rem 0}.article-category{background:var(--accent-strong);color:var(--color-white);text-transform:uppercase;letter-spacing:.5px;margin-bottom:1.5rem;padding:.5rem 1rem;font-size:.85rem;font-weight:600;display:inline-block}.article-hero-title{color:var(--color-text);margin-bottom:1.5rem;font-size:2.5rem;font-weight:300;line-height:1.2}.article-hero-meta{color:var(--color-text-light);flex-wrap:wrap;gap:2rem;font-size:.95rem;display:flex}.article-hero-meta span{align-items:center;gap:.5rem;display:flex}.article-featured-image{background:var(--color-white);border-bottom:1px solid var(--color-border);padding:3rem 0}.article-featured-image img{border:1px solid var(--color-border);width:100%;max-width:1024px;height:auto;margin:0 auto;display:block}.article-container{max-width:1200px;padding:4rem 2rem}.article-layout{grid-template-columns:1fr 340px;gap:2rem;display:grid}.article-main{min-width:0}.article-content{color:var(--color-text);font-size:1.1rem;line-height:1.8}.article-content p{margin-bottom:1.5rem}.article-content h2{color:var(--color-text);margin:2.5rem 0 1.25rem;font-size:1.75rem;font-weight:400}.article-content h3{color:var(--color-text);margin:2rem 0 1rem;font-size:1.35rem;font-weight:400}.article-content img{border:1px solid var(--color-border);width:100%;max-width:1024px;height:auto;margin:2rem auto;display:block}.article-content ul,.article-content ol{margin:1.5rem 0;padding-left:2rem}.article-content li{color:var(--color-text-light);margin-bottom:.75rem}.article-content blockquote{border-left:4px solid var(--color-accent);color:var(--color-text-light);margin:2rem 0;padding-left:1.5rem;font-style:italic}.article-tags{border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);flex-wrap:wrap;align-items:center;gap:.75rem;margin:3rem 0;padding:1.5rem 0;display:flex}.article-tags svg{color:var(--color-text-light)}.tag{background:var(--surface-sunken);color:var(--color-text);border:1px solid var(--color-border);padding:.35rem .875rem;font-size:.85rem;transition:all .3s}.tag:hover{background:var(--accent-strong);color:var(--color-white);border-color:var(--accent-ink)}.article-share{margin:3rem 0}.article-share h4{color:var(--color-text);margin-bottom:1rem;font-size:1.1rem;font-weight:500}.share-buttons{flex-wrap:wrap;gap:1rem;display:flex}.share-btn{border:1px solid var(--color-border);background:var(--color-white);width:48px;height:48px;color:var(--color-text);cursor:pointer;justify-content:center;align-items:center;padding:0;transition:all .3s;display:flex}.share-btn:hover{background:var(--color-text);color:var(--color-white);border-color:var(--color-text);transform:translateY(-3px);box-shadow:0 6px 16px #0000001f}.share-btn.facebook:hover{color:#fff;background:#1877f2;border-color:#1877f2}.share-btn.twitter:hover{color:#fff;background:#1da1f2;border-color:#1da1f2}.share-btn.line:hover{color:#fff;background:#00b900;border-color:#00b900}.share-btn.copy:hover{background:var(--accent-strong);color:#fff;border-color:var(--accent-ink)}.article-sidebar{height:fit-content;position:sticky;top:120px}.sidebar-section{background:var(--color-white);border:1px solid var(--color-border);margin-bottom:2rem;padding:2rem}.sidebar-title{color:var(--color-text);margin-bottom:1.5rem;font-size:1.15rem;font-weight:500}.related-articles{flex-direction:column;gap:1.25rem;display:flex}.related-article{gap:1rem;transition:all .3s;display:flex}.related-article:hover{transform:translate(4px)}.related-article img{object-fit:cover;flex-shrink:0;width:80px;height:80px}.related-content h4{color:var(--color-text);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:.5rem;font-size:.95rem;font-weight:400;line-height:1.4;display:-webkit-box;overflow:hidden}.related-date{color:var(--color-text-light);font-size:.85rem}.btn-back-to-blog{background:var(--accent-strong);color:var(--color-white);justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1rem;font-size:.9rem;font-weight:500;transition:all .3s;display:inline-flex}.btn-back-to-blog:hover{background:var(--color-accent-dark);transform:translateY(-2px)}@media (max-width:968px){.article-layout{grid-template-columns:1fr;gap:3rem}.article-sidebar{position:static}}@media (max-width:768px){.article-hero{min-height:300px;padding:2rem 0 1.5rem}.article-hero-title{font-size:1.75rem}.article-hero-meta{gap:1rem;font-size:.85rem}.article-featured-image{padding:2rem 0}.article-featured-image img{max-width:100%}.article-container{padding:2rem 1rem}.article-content{font-size:1rem}.article-content h2{font-size:1.35rem}.article-content h3{font-size:1.15rem}.share-buttons{flex-direction:column}.share-btn{justify-content:center;width:100%}.sidebar-section{padding:1.5rem}}.article-detail{padding-block:var(--space-xl) var(--space-2xl)}.article-detail .breadcrumb{font-size:var(--step--1);color:var(--text-3);margin-bottom:var(--space-md);align-items:center;gap:.5rem;display:flex}.article-detail .breadcrumb a:hover{color:var(--accent-ink)}.article-header{max-width:46rem;margin:0 auto var(--space-lg);text-align:center}.article-header h1{font-size:var(--step-4);margin-block:var(--space-2xs) var(--space-sm)}.article-header .article-meta{gap:var(--space-sm);font-size:var(--step--1);color:var(--text-3);flex-wrap:wrap;justify-content:center;align-items:center;display:flex}.article-header .author{color:var(--text-2);font-weight:500}.article-hero-image{width:100%;max-width:60rem;margin:0 auto var(--space-lg);border-radius:var(--radius-lg);box-shadow:var(--shadow-2);display:block}.article-body{max-width:42rem;font-size:var(--step-0);margin:0 auto;line-height:1.75}.article-body>*+*{margin-top:1.15rem}.article-body h2{font-size:var(--step-2);margin-top:var(--space-lg);margin-bottom:.5rem}.article-body h3{font-size:var(--step-1);margin-top:var(--space-md);margin-bottom:.4rem}.article-body p{color:var(--text-2)}.article-body img{border-radius:var(--radius-md);margin-block:var(--space-md)}.article-body ul,.article-body ol{color:var(--text-2);padding-inline-start:1.4rem}.article-body li+li{margin-top:.4rem}.article-body blockquote{padding:var(--space-xs) var(--space-sm);border-inline-start:3px solid var(--accent-ink);background:var(--surface-sunken);border-radius:var(--radius-sm);color:var(--text-2);margin-inline:0}.article-body a{color:var(--accent-ink);text-underline-offset:3px;text-decoration:underline}.article-tags{max-width:42rem;margin:var(--space-lg) auto 0;flex-wrap:wrap;gap:.5rem;padding:0;list-style:none;display:flex}.article-tags li{border:1px solid var(--line-2);border-radius:var(--radius-full);font-size:var(--step--1);color:var(--text-3);padding:4px 12px}