.article-hero{position:relative;background:var(--clr-surface);border-bottom:1px solid var(--clr-border);padding-bottom:48px}.article-hero__image-wrap{position:relative;width:100%;height:420px;overflow:hidden;margin-bottom:0}@media (max-width: 767px){.article-hero__image-wrap{height:220px}}.article-hero__image{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;display:block}.article-hero__image-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to bottom,rgba(248,250,252,.05) 0%,rgba(15,30,50,.45) 70%,var(--clr-surface) 100%)}.article-hero__content{padding-top:36px}@media (max-width: 767px){.article-hero__content{padding-top:24px}}.article-breadcrumb .breadcrumb{margin:0}.article-category-badge{display:inline-flex;align-items:center;gap:6px;background:#16b5e51a;border:1px solid rgba(22,181,229,.25);color:var(--clr-accent);font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:5px 14px;border-radius:3px;margin-bottom:20px}.article-title{font-size:clamp(1.75rem,4vw,2.8rem);font-weight:900;color:var(--clr-white);line-height:1.2;letter-spacing:-.5px;margin:0 0 24px;max-width:820px}.article-meta{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.article-meta__item{display:flex;align-items:center;gap:12px}.article-meta__item--right{margin-left:auto}.article-meta__avatar{width:40px;height:40px;background:linear-gradient(135deg,var(--clr-accent),var(--clr-accent2));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:#fff;flex-shrink:0}.article-meta__author{font-size:14px;font-weight:600;color:var(--clr-white);margin:0;line-height:1.2}.article-meta__date{font-size:12px;color:var(--clr-muted);margin:2px 0 0}.article-meta__divider{width:1px;height:32px;background:var(--clr-border);flex-shrink:0}.article-meta__read-time{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--clr-muted)}.article-meta__read-time i{font-size:14px}.article-layout{display:grid;grid-template-columns:1fr 280px;gap:32px;align-items:start;padding-top:40px;padding-bottom:40px}@media (max-width: 1024px){.article-layout{grid-template-columns:1fr}}.article-body{min-width:0}.article-card{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:16px;padding:40px 48px;margin-bottom:24px;box-shadow:0 1px 8px #0f283c12}@media (max-width: 767px){.article-card{padding:24px 20px}}.article-content{font-size:17px;line-height:1.85;color:var(--clr-text);font-family:Roboto,sans-serif}.article-content h1,.article-content h2,.article-content h3,.article-content h4{color:var(--clr-white);font-weight:700;line-height:1.3;margin-top:2.2em;margin-bottom:.6em;scroll-margin-top:90px}.article-content h1{font-size:2rem}.article-content h2{font-size:1.5rem;padding-bottom:10px;border-bottom:1px solid var(--clr-border)}.article-content h3{font-size:1.2rem;color:var(--clr-text)}.article-content h4{font-size:1.05rem;color:var(--clr-muted)}.article-content>h2:first-child,.article-content>h3:first-child{margin-top:0}.article-content p{margin-bottom:1.4em}.article-content p:last-child{margin-bottom:0}.article-content a{color:var(--clr-accent);text-decoration:underline;text-decoration-color:#16b5e559;text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}.article-content a:hover{color:var(--clr-accent2);text-decoration-color:var(--clr-accent2)}.article-content strong{color:var(--clr-white);font-weight:700}.article-content em{color:var(--clr-text);font-style:italic}.article-content img{display:block;max-width:100%;height:auto;border-radius:12px;margin:2em auto;box-shadow:0 4px 20px #0f283c1a;border:1px solid var(--clr-border)}.article-content blockquote{margin:2em 0;padding:20px 24px;border-left:3px solid var(--clr-accent);background:#16b5e50d;border-radius:0 8px 8px 0;color:var(--clr-muted);font-size:1.05em;font-style:italic}.article-content blockquote p{margin:0}.article-content blockquote cite{display:block;margin-top:10px;font-size:.85em;color:var(--clr-muted);font-style:normal}.article-content code{background:#16b5e514;border:1px solid rgba(22,181,229,.18);color:#078bb5;font-size:.88em;padding:2px 7px;border-radius:4px;font-family:Roboto Mono,monospace}.article-content pre{background:var(--clr-surface2);border:1px solid var(--clr-border);border-radius:10px;padding:20px 24px;overflow-x:auto;margin:1.8em 0}.article-content pre code{background:none;border:none;padding:0;font-size:.9em;color:var(--clr-text)}.article-content ul,.article-content ol{padding-left:1.6em;margin-bottom:1.4em}.article-content ul li,.article-content ol li{margin-bottom:.5em;line-height:1.7}.article-content ul li::marker{color:var(--clr-accent)}.article-content ol li::marker{color:var(--clr-accent);font-weight:700}.article-content table{width:100%;border-collapse:collapse;margin:1.8em 0;font-size:.9em}.article-content table th{background:#16b5e512;color:var(--clr-accent);font-weight:700;font-size:11px;letter-spacing:1px;text-transform:uppercase;padding:10px 14px;border:1px solid rgba(22,181,229,.18);text-align:left}.article-content table td{padding:10px 14px;border:1px solid var(--clr-border);color:var(--clr-text);background:var(--clr-surface)}.article-content table tr:hover td{background:#16b5e508}.article-content hr{border:none;border-top:1px solid var(--clr-border);margin:2.5em 0}.article-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}.article-tag{background:var(--clr-surface2);border:1px solid var(--clr-border);color:var(--clr-muted);font-size:12px;font-weight:600;padding:4px 12px;border-radius:20px;transition:border-color .2s,color .2s}.article-tag:hover{border-color:#16b5e559;color:var(--clr-accent)}.article-cta{background:linear-gradient(135deg,#16b5e512,#0ea5d90a);border:1px solid rgba(22,181,229,.22);border-radius:16px;padding:36px 40px;display:flex;gap:24px;align-items:flex-start;margin-bottom:24px;position:relative;overflow:hidden}.article-cta:after{content:"";position:absolute;top:-30px;right:-30px;width:160px;height:160px;background:radial-gradient(circle,rgba(22,181,229,.08) 0%,transparent 70%);pointer-events:none}@media (max-width: 767px){.article-cta{flex-direction:column;padding:24px;gap:16px}}.article-cta__icon{width:52px;height:52px;background:#16b5e51a;border:1px solid rgba(22,181,229,.25);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--clr-accent);flex-shrink:0}.article-cta__body{flex:1}.article-cta__title{font-size:1.2rem;font-weight:800;color:var(--clr-white);margin:0 0 8px}.article-cta__desc{font-size:14px;color:var(--clr-muted);line-height:1.65;margin:0 0 20px}.article-cta__actions{display:flex;gap:12px;flex-wrap:wrap}.article-author-card{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:12px;padding:24px;display:flex;align-items:center;gap:16px;margin-bottom:24px;box-shadow:0 1px 8px #0f283c0f}.article-author-card__avatar{width:52px;height:52px;background:linear-gradient(135deg,var(--clr-accent),var(--clr-accent2));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:#fff;flex-shrink:0}.article-author-card__label{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--clr-muted);margin:0 0 2px}.article-author-card__name{font-size:15px;font-weight:700;color:var(--clr-white);margin:0 0 2px}.article-author-card__role{font-size:12px;color:var(--clr-muted);margin:0}.article-back{padding-bottom:64px;display:flex;align-items:center}.article-sidebar{position:sticky;top:calc(var(--nav-h) + 20px);display:flex;flex-direction:column;gap:16px}@media (max-width: 1024px){.article-sidebar{display:none}}.article-toc{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:12px;padding:20px;overflow:hidden;box-shadow:0 1px 8px #0f283c0f}.article-toc__title{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--clr-accent);margin:0 0 14px;display:flex;align-items:center;gap:6px}.article-toc__title i{font-size:15px}.article-toc__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px}.article-toc__item--sub .article-toc__link{padding-left:16px;font-size:12px}.article-toc__link{display:block;font-size:13px;color:var(--clr-muted);text-decoration:none;padding:5px 8px;border-radius:6px;line-height:1.4;transition:background .15s,color .15s}.article-toc__link:hover{background:var(--clr-surface2);color:var(--clr-text)}.article-toc__link.is-active{background:#16b5e51a;color:var(--clr-accent);font-weight:600}.article-sidebar-card{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:12px;padding:20px;box-shadow:0 1px 8px #0f283c0f}.article-sidebar-card__title{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--clr-muted);margin:0 0 14px}.article-share{display:flex;gap:8px}.article-share__btn{width:38px;height:38px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;text-decoration:none;border:none;cursor:pointer;transition:transform .2s,box-shadow .2s}.article-share__btn:hover{transform:translateY(-2px)}.article-share__btn--wa{background:#25d366;color:#fff;box-shadow:0 4px 12px #25d3664d}.article-share__btn--fb{background:#1877f2;color:#fff;box-shadow:0 4px 12px #1877f24d}.article-share__btn--tw{background:#1da1f2;color:#fff;box-shadow:0 4px 12px #1da1f24d}.article-share__btn--copy{background:var(--clr-surface2);border:1px solid var(--clr-border);color:var(--clr-muted)}.article-share__btn--copy:hover{color:var(--clr-text);background:var(--clr-surface2)}.article-sidebar-cta{background:linear-gradient(135deg,#16b5e514,#0ea5d90d);border:1px solid rgba(22,181,229,.22);border-radius:12px;padding:20px}.article-sidebar-cta__title{font-size:14px;font-weight:700;color:var(--clr-white);margin:0 0 6px}.article-sidebar-cta__desc{font-size:12px;color:var(--clr-muted);line-height:1.6;margin:0 0 16px}