.article-hero{background:linear-gradient(135deg,var(--navy) 0%,var(--blue-dark) 60%,var(--navy) 100%);padding-block:80px 60px;text-align:center;}.article-hero__inner{max-width:860px;margin-inline:auto;}.breadcrumb{display:flex;align-items:center;gap:8px;justify-content:center;font-size:13px;}.breadcrumb a{color:rgba(255,255,255,0.5);text-decoration:none;transition:color 0.2s;}.breadcrumb a:hover{color:rgba(255,255,255,0.85);}.breadcrumb span{color:rgba(255,255,255,0.3);}.article-hero__meta{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:28px;flex-wrap:wrap;}.article-hero__author{display:flex;align-items:center;gap:10px;}.article-hero__author-avatar{width:36px;height:36px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;flex-shrink:0;}.article-hero__stats{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,0.55);font-size:13px;}.article-hero__stats span{display:flex;align-items:center;gap:5px;}.article-hero__dot{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,0.3);}#reading-progress{position:fixed;top:var(--header-h);left:0;height:3px;background:linear-gradient(to right,var(--blue),var(--blue-light));z-index:1000;width:0%;transition:width 0.1s linear;}.article-body-section{background:var(--white);padding-block:60px 80px;}.article-layout{display:grid;grid-template-columns:260px 1fr;gap:60px;align-items:start;}.article-toc{position:relative;}.article-toc__inner{position:sticky;top:calc(var(--header-h)+24px);background:var(--cream);border-radius:16px;padding:24px;}.article-toc__title{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-muted);margin-bottom:16px;}.article-toc__list{list-style:none;display:flex;flex-direction:column;gap:2px;}.article-toc__link{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:var(--radius-md);font-size:13px;font-weight:500;color:var(--text-muted);text-decoration:none;transition:all 0.2s var(--ease);line-height:1.4;}.article-toc__link:hover{background:rgba(38,123,241,0.07);color:var(--blue);}.article-toc__link.active{background:rgba(38,123,241,0.1);color:var(--blue);font-weight:600;}.article-toc__num{font-size:13px;color:var(--blue);flex-shrink:0;margin-top:1px;opacity:0.6;}.article-toc__link.active .article-toc__num{opacity:1;}.article-toc__progress{height:2px;background:rgba(38,123,241,0.12);border-radius:1px;margin-top:16px;overflow:hidden;}.article-toc__progress-fill{width:100%;height:0%;background:var(--blue);transition:height 0.15s linear;border-radius:1px;}.article-lead{font-size:19px;line-height:1.8;color:var(--text-muted);font-style:italic;border-left:3px solid var(--blue);padding-left:20px;margin-bottom:48px;}.article-section{margin-bottom:52px;scroll-margin-top:100px;}.article-section__title{display:flex;align-items:flex-start;gap:14px;font-size:24px;font-family:var(--font-sans);font-weight:700;color:var(--text);margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid rgba(38,123,241,0.08);}.article-section__num{font-size:13px;color:var(--blue);font-weight:700;margin-top:6px;opacity:0.6;flex-shrink:0;}.article-section__body{font-size:16px;line-height:1.8;color:var(--text);}.article-section__body p{margin-bottom:16px;}.article-section__body p:last-child{margin-bottom:0;}.article-section__body strong{color:var(--text);font-weight:700;}.article-section__body ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin:16px 0;padding:20px 24px;background:var(--cream);border-radius:var(--radius-md);border-left:3px solid var(--blue);}.article-section__body ul li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--text-muted);line-height:1.6;}.article-section__body ul li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--blue);flex-shrink:0;margin-top:8px;}.article-cta-box{display:flex;align-items:flex-start;gap:20px;background:linear-gradient(135deg,rgba(38,123,241,0.05),rgba(26,86,176,0.08));border:1px solid rgba(38,123,241,0.15);border-radius:16px;padding:28px;margin:48px 0 40px;}.article-cta-box__icon{font-size:28px;flex-shrink:0;}.article-share{display:flex;align-items:center;gap:16px;padding-top:32px;border-top:1px solid rgba(38,123,241,0.08);flex-wrap:wrap;}.article-share__label{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--text-muted);flex-shrink:0;}.article-share__buttons{display:flex;gap:10px;flex-wrap:wrap;}.article-share__btn{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:100px;font-size:13px;font-weight:600;color:var(--text);background:var(--cream);border:1px solid rgba(38,123,241,0.12);cursor:pointer;transition:all 0.2s;}.article-share__btn:hover{background:rgba(38,123,241,0.08);color:var(--blue);border-color:var(--blue);}.blog-index-hero{background:linear-gradient(135deg,var(--navy),var(--blue-dark));}.blog-filter-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}.blog-filter-btn{padding:7px 16px;border-radius:100px;font-size:13px;font-weight:600;border:1.5px solid rgba(38,123,241,0.15);background:var(--white);color:var(--text-muted);cursor:pointer;transition:all 0.2s;}.blog-filter-btn:hover{border-color:var(--blue);color:var(--blue);}.blog-filter-btn.active{background:var(--blue);border-color:var(--blue);color:#fff;}.blog-search{position:relative;margin-left:auto;}.blog-search input{padding:8px 16px 8px 38px;border-radius:100px;border:1.5px solid rgba(38,123,241,0.15);background:var(--white);font-size:13px;color:var(--text);outline:none;transition:border-color 0.2s,box-shadow 0.2s;width:220px;}.blog-search input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(38,123,241,0.1);}.blog-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none;}@media(max-width:1024px){.article-layout{grid-template-columns:1fr;}.article-toc{display:none;}}@media(max-width:640px){.article-hero{padding-block:60px 40px;}.article-hero__meta{flex-direction:column;gap:12px;}.article-cta-box{flex-direction:column;}.article-share{flex-direction:column;align-items:flex-start;}}.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}.blog-card{overflow:hidden;cursor:pointer;text-decoration:none;display:block;}.blog-card__img{aspect-ratio:16/9;background:linear-gradient(135deg,var(--blue) 0%,var(--navy) 100%);border-radius:var(--radius-lg) var(--radius-lg) 0 0;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;transition:transform 0.4s var(--ease);}.blog-card:hover .blog-card__img{transform:scale(1.03);}.blog-card__img-placeholder{font-size:40px;opacity:0.35;}.blog-card__img-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(13,27,42,0.65) 0%,transparent 60%);}.blog-card__body{padding:24px;border:1px solid rgba(38,123,241,0.08);border-top:none;border-radius:0 0 var(--radius-lg) var(--radius-lg);background:var(--white);}.blog-card__tag{display:inline-block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--blue);background:rgba(38,123,241,0.08);padding:3px 10px;border-radius:100px;margin-bottom:10px;}.blog-card__title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:10px;line-height:1.4;transition:color 0.2s var(--ease);}.blog-card:hover .blog-card__title{color:var(--blue);}.blog-card__meta{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--text-muted);}.blog-card__meta-dot{width:3px;height:3px;border-radius:50%;background:var(--text-muted);flex-shrink:0;}@media(max-width:900px){.related-grid{grid-template-columns:repeat(2,1fr);}}@media(max-width:540px){.related-grid{grid-template-columns:1fr;gap:16px;}.blog-card__body{padding:18px;}.blog-card__title{font-size:15px;}}
.blog-featured-grid{display:grid;grid-template-columns:1.2fr 1fr;overflow:hidden;border-radius:var(--radius-xl);text-decoration:none;color:inherit;}@media(max-width:768px){.blog-featured-grid{grid-template-columns:1fr;}.blog-featured-grid .blog-card__img{min-height:200px !important;border-radius:var(--radius-xl) var(--radius-xl) 0 0;}.blog-featured-grid .blog-card__body{padding:24px !important;border-left:none !important;border-top:1px solid rgba(38,123,241,0.08);}}.related-grid-fix{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}@media(max-width:900px){.related-grid-fix{grid-template-columns:repeat(2,1fr);}}@media(max-width:540px){.related-grid-fix{grid-template-columns:1fr;gap:16px;}}