.blog-hero{text-align:center;padding:80px 5% 60px;background:#fff}.blog-hero-label{display:inline-block;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#5b7bff;margin-bottom:16px}.blog-article-header h1,.blog-hero h1{font-size:clamp(36px,5vw,56px);font-weight:800;color:#1a1a1a;margin-bottom:20px;line-height:1.15}.blog-hero h1 span{background:linear-gradient(135deg,#5b7bff,#4361ee);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.blog-hero .hero-subtitle{font-size:18px;color:#6b7280;max-width:800px;margin:0 auto;line-height:1.7}.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;max-width:1400px;margin:0 auto;padding:0 5% 80px}.blog-card-link{text-decoration:none;color:inherit;display:block}.blog-card{background:#fff;border-radius:20px;overflow:hidden;border:1px solid #e5e7eb;transition:all .4s ease;display:flex;flex-direction:column;cursor:pointer}.blog-card:hover{transform:translateY(-6px);box-shadow:0 24px 64px rgba(0,0,0,.08);border-color:#d1d5db}.blog-card-image{width:100%;height:220px;overflow:hidden;position:relative}.blog-card-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.blog-card:hover .blog-card-image img{transform:scale(1.05)}.blog-card-category{position:absolute;top:16px;left:16px;display:inline-block;padding:6px 14px;border-radius:50px;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,#5b7bff,#4361ee)}.blog-card-body{padding:28px;flex:1;display:flex;flex-direction:column}.blog-article-content h2,.blog-card-title{font-size:22px;font-weight:700;color:#1a1a1a;margin-bottom:12px;line-height:1.35}.blog-breadcrumb a:hover,.blog-card-link:hover .blog-card-title{color:#5b7bff}.blog-card-excerpt{font-size:15px;color:#6b7280;line-height:1.7;margin-bottom:20px;flex:1}.blog-card-meta{display:flex;align-items:center;gap:16px;padding-top:20px;border-top:1px solid #f3f4f6}.blog-card-author-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#5b7bff,#4361ee);display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700;flex-shrink:0}.blog-card-author-info{display:flex;flex-direction:column}.blog-card-author-name{font-size:13px;font-weight:600;color:#1a1a1a}.blog-card-date,.blog-card-read-time{font-size:12px;color:#9ca3af}.blog-card-read-time{margin-left:auto;display:flex;align-items:center;gap:4px}.blog-card-read-time i{font-size:11px}.blog-article-header{text-align:center;padding:80px 5% 40px;background:#fff;max-width:1000px;margin:0 auto}.blog-breadcrumb{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:24px;font-size:13px}.blog-breadcrumb a,.blog-toc-list a{color:#6b7280;text-decoration:none;transition:color .3s ease}.blog-breadcrumb span{color:#d1d5db}.blog-breadcrumb .current{color:#1a1a1a;font-weight:500}.blog-article-category{display:inline-block;padding:6px 16px;border-radius:50px;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,#5b7bff,#4361ee);margin-bottom:24px}.blog-article-header h1{font-size:clamp(32px,4.5vw,48px);margin-bottom:24px;line-height:1.2}.blog-article-meta{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap}.blog-article-author{display:flex;align-items:center;gap:12px}.blog-article-author-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#5b7bff,#4361ee);display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;font-weight:700}.blog-article-author-info{text-align:left}.blog-article-author-name{font-size:14px;font-weight:600;color:#1a1a1a}.blog-article-author-date{font-size:13px;color:#9ca3af}.blog-meta-divider{width:1px;height:24px;background:#e5e7eb}.blog-article-read-time{font-size:13px;color:#6b7280;display:flex;align-items:center;gap:6px}.blog-article-read-time i{color:#5b7bff}.blog-featured-image{max-width:1200px;margin:0 auto 48px;padding:0 5%}.blog-featured-image img{width:100%;border-radius:20px;display:block}.blog-article-layout{display:grid;grid-template-columns:260px 1fr;gap:60px;max-width:1400px;margin:0 auto;padding:0 5% 80px;align-items:start}.blog-toc{position:sticky;top:100px;background:#f9fafb;border-radius:16px;padding:24px;border:1px solid #e5e7eb}.blog-toc-title{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#9ca3af;margin-bottom:16px}.blog-toc-list{list-style:none;padding:0;margin:0}.blog-toc-list li{margin-bottom:8px}.blog-toc-list a{font-size:13px;line-height:1.5;display:block;transition:all .3s ease;border-left:2px solid transparent;padding:4px 0 4px 12px}.blog-toc-list a.active,.blog-toc-list a:hover{color:#5b7bff;border-left-color:#5b7bff}.blog-article-content{max-width:100%}.blog-article-content h2{font-size:28px;margin-top:48px;margin-bottom:20px;line-height:1.3;scroll-margin-top:80px}.blog-article-content h3{font-size:22px;margin-top:36px;margin-bottom:16px;line-height:1.3;scroll-margin-top:80px}.blog-article-content li,.blog-article-content p{font-size:17px;color:#374151;line-height:1.8;margin-bottom:20px}.blog-article-content ol,.blog-article-content ul{margin-bottom:24px;padding-left:24px}.blog-article-content li{margin-bottom:8px}.blog-article-content h3,.blog-article-content strong,.blog-diff-item h4{color:#1a1a1a;font-weight:600}.blog-article-content a{color:#5b7bff;text-decoration:none;font-weight:500;transition:color .3s ease}.blog-article-content a:hover{color:#4361ee;text-decoration:underline}.blog-article-content img{max-width:100%;border-radius:12px;margin:32px 0;display:block}.blog-diff-item{margin-bottom:24px}.blog-diff-item h4{font-size:18px;margin-bottom:8px;display:flex;align-items:center;gap:8px}.blog-diff-item h4 i{color:#5b7bff;font-size:14px}.blog-diff-native,.blog-diff-react{font-size:15px;color:#4b5563;line-height:1.7;padding-left:24px;margin-bottom:6px;position:relative}.blog-diff-native::before,.blog-diff-react::before{content:"";position:absolute;left:8px;top:10px;width:6px;height:6px;border-radius:50%}.blog-diff-native::before{background:#10b981}.blog-diff-react::before{background:#f59e0b}.blog-table-wrap{margin:32px 0;overflow-x:auto;border-radius:16px;border:1px solid #e5e7eb;-webkit-overflow-scrolling:touch}.blog-table{width:100%;border-collapse:collapse;font-size:14px;min-width:600px}.blog-table thead th{background:#f8fafc;padding:14px 16px;font-weight:600;color:#374151;text-align:center;border-bottom:2px solid #e5e7eb;white-space:nowrap}.blog-table thead th:first-child{text-align:left;position:sticky;left:0;background:#f8fafc;z-index:1}.blog-table thead th.highlight{background:linear-gradient(135deg,#5b7bff,#4361ee);color:#fff}.blog-table tbody td{padding:12px 16px;text-align:center;color:#4b5563;border-bottom:1px solid #f3f4f6;vertical-align:middle}.blog-table tbody td:first-child{font-weight:600;color:#1a1a1a;text-align:left;position:sticky;left:0;background:#fff;z-index:1}.blog-table tbody tr:hover td{background:#f9fafb}.blog-table tbody tr:hover td:first-child{background:#f9fafb}.blog-table tbody tr:last-child td{border-bottom:none}.blog-table .check{color:#10b981;font-size:18px}.blog-table .cross{color:#ef4444;font-size:18px}.blog-table .limited{color:#f59e0b;font-size:12px;display:block}.blog-table .stars{color:#f59e0b;letter-spacing:2px}.blog-callout{background:linear-gradient(135deg,#eff6ff,#f0f4ff);border-left:4px solid #5b7bff;border-radius:0 12px 12px 0;padding:24px 28px;margin:32px 0}.blog-callout p{font-size:16px;color:#374151;line-height:1.7;margin-bottom:0}.blog-callout strong{color:#1a1a1a}.blog-case-study{margin-bottom:28px;padding-left:20px;border-left:3px solid #e5e7eb}.blog-case-study h4,.blog-feature-card h4{font-size:18px;font-weight:700;color:#1a1a1a;margin-bottom:8px}.blog-case-study p{font-size:16px;color:#4b5563;line-height:1.8}.blog-feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:32px 0}.blog-feature-card{background:#f9fafb;border-radius:12px;padding:20px 24px;border:1px solid #e5e7eb}.blog-feature-card h4{font-size:15px;margin-bottom:6px}.blog-feature-card p{font-size:14px;color:#6b7280;line-height:1.6;margin-bottom:0}.blog-share,.blog-share a{display:flex;align-items:center}.blog-share{gap:12px;margin-top:48px;padding-top:32px;border-top:1px solid #e5e7eb}.blog-share-label{font-size:13px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:1px}.blog-share a{width:40px;height:40px;border-radius:10px;background:#f3f4f6;justify-content:center;color:#6b7280;text-decoration:none;transition:all .3s ease;font-size:16px}.blog-share a:hover{background:#5b7bff;color:#fff;transform:translateY(-2px)}.blog-related{padding:80px 5%;background:#f9fafb}.blog-related-header{text-align:center;margin-bottom:40px}.blog-related-header h2{font-size:28px;font-weight:700;color:#1a1a1a}.blog-related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;max-width:1200px;margin:0 auto}@media (max-width:1024px){.blog-article-layout{grid-template-columns:1fr;gap:0}.blog-toc{position:static;margin-bottom:40px}.blog-article-content{max-width:100%}}@media (max-width:768px){.blog-hero{padding:60px 5% 40px}.blog-grid{grid-template-columns:1fr;gap:24px;padding:0 5% 60px}.blog-card-image{height:180px}.blog-article-content h3,.blog-card-title{font-size:20px}.blog-article-header{padding:60px 5% 32px}.blog-article-meta{gap:16px}.blog-meta-divider{display:none}.blog-article-layout{padding:0 5% 60px}.blog-article-content h2{font-size:24px;margin-top:36px}.blog-article-content li,.blog-article-content p{font-size:16px}.blog-feature-grid,.blog-related-grid{grid-template-columns:1fr}.blog-related{padding:60px 5%}}@media (max-width:480px){.blog-card-body{padding:20px}.blog-card-meta{flex-wrap:wrap;gap:10px}.blog-card-read-time{margin-left:0}.blog-article-header h1{font-size:28px}.blog-article-content h2{font-size:22px}}