*{margin:0;padding:0;box-sizing:border-box}.header-content{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:0 20px}.logo{font-size:24px;font-weight:700}nav ul{list-style:none;display:flex;gap:30px}nav a{color:white;text-decoration:none;transition:opacity .3s}nav a:hover{opacity:.8}.hero{background:linear-gradient(135deg,#0066cc,#2463eb);color:white;padding:60px 20px;text-align:center}.hero h1{font-size:48px;margin-bottom:20px;font-weight:700}.hero p{font-size:18px;max-width:600px;margin:0 auto 30px;opacity:.9}.search-box{max-width:500px;margin:0 auto;display:flex;gap:10px}.search-box input{flex:1;padding:12px 20px;border:none;border-radius:5px;font-size:16px}.search-box button{padding:12px 30px;background:#ff6b35;color:white;border:none;border-radius:5px;cursor:pointer;font-weight:600;transition:background .3s}.search-box button:hover{background:#ff5722}.container{max-width:1200px;margin:0 auto;padding:0 20px}.blog-section{padding:80px 20px}.section-title{font-size:36px;margin-bottom:50px;text-align:center;color:#0066cc;position:relative}.section-title:after{content:"";display:block;width:60px;height:4px;background:#ff6b35;margin:15px auto 0}.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;margin-bottom:60px}.blog-card{background:white;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.1);transition:transform .3s,box-shadow .3s}.blog-card:hover{transform:translateY(-5px);box-shadow:0 5px 15px rgba(0,0,0,.2)}.blog-image{width:100%;height:200px;background:#2463eb;display:flex;align-items:center;justify-content:center;color:white;font-size:48px}.blog-content{padding:25px}.blog-category{display:inline-block;background:#e8f0ff;color:#0066cc;padding:5px 12px;border-radius:20px;font-size:12px;font-weight:600;margin-bottom:10px}.blog-title{font-size:20px;margin-bottom:12px;color:#333;line-height:1.4}.blog-meta{font-size:13px;color:#999;margin-bottom:15px;display:flex;gap:15px}.blog-excerpt{font-size:14px;color:#666;line-height:1.6;margin-bottom:15px}.blog-description{font-size:13px;color:#888;line-height:1.6;margin-bottom:20px;font-style:italic}.read-more{color:#0066cc;text-decoration:none;font-weight:600;display:inline-flex;align-items:center;gap:5px;transition:gap .3s}.read-more:hover{gap:10px}.read-more:after{content:"→"}.blog-container-with-sidebar{display:grid;grid-template-columns:1fr 300px;gap:40px;margin-bottom:60px}.sidebar{background:white;padding:30px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.1);height:fit-content}.sidebar-title{font-size:18px;font-weight:700;margin-bottom:20px;color:#0066cc;border-bottom:2px solid #0066cc;padding-bottom:10px}.sidebar-list{list-style:none}.sidebar-list li{padding:10px 0;border-bottom:1px solid #eee}.sidebar-list li:last-child{border-bottom:none}.sidebar-list a{color:#666;text-decoration:none;transition:color .3s}.sidebar-list a:hover{color:#0066cc}.pagination{display:flex;justify-content:center;gap:10px;margin-top:50px;align-items:center}.pagination a,.pagination span{padding:10px 15px;border:1px solid #ddd;border-radius:5px;color:#0066cc;text-decoration:none;transition:all .3s}.pagination .active,.pagination a:hover{background:#0066cc;color:white}.pagination .active{border-color:#0066cc}.cta-section{background:linear-gradient(135deg,#0066cc,#2463eb);color:white;padding:60px 20px;text-align:center;border-radius:8px;margin:60px 0}.cta-section h2{font-size:32px;margin-bottom:15px}.cta-button{display:inline-block;background:#ff6b35;color:white;padding:15px 40px;border:none;border-radius:5px;cursor:pointer;font-size:16px;font-weight:600;text-decoration:none;transition:background .3s;margin-top:20px}.cta-button:hover{background:#ff5722}footer{background:#1a1a1a;color:white;padding:40px 20px;text-align:center;font-size:14px}.footer-content{max-width:1200px;margin:0 auto}.footer-links{margin-bottom:20px;display:flex;justify-content:center;gap:30px;flex-wrap:wrap}.footer-links a{color:#ccc;text-decoration:none;transition:color .3s}.footer-links a:hover{color:white}@media (max-width:768px){.header-content{flex-direction:column;gap:15px}nav ul{gap:15px;font-size:14px}.hero h1{font-size:32px}.blog-container-with-sidebar{grid-template-columns:1fr}.search-box{flex-direction:column}.blog-grid{grid-template-columns:1fr}}.skeleton-card{pointer-events:none}.skeleton-image{position:relative;overflow:hidden}.skeleton-image,.skeleton-shimmer{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}.skeleton-shimmer{border-radius:4px}.skeleton-category{width:80px;height:24px;margin-bottom:10px;border-radius:20px}.skeleton-title{width:100%;height:20px;margin-bottom:8px}.skeleton-title-2{width:70%;height:20px;margin-bottom:12px}.skeleton-meta{width:100px;height:14px}.skeleton-excerpt{width:100%;height:14px;margin-bottom:8px}.skeleton-excerpt-2{width:85%;height:14px;margin-bottom:20px}.skeleton-button{width:120px;height:20px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.empty-state,.loading-state{text-align:center;padding:60px 20px;color:#666;font-size:18px}.empty-state{background:#f9f9f9;border-radius:8px;margin:40px 0}.blog-detail-wrapper{display:flex;max-width:1300px;margin:0 auto;padding:40px 20px 80px;gap:40px;align-items:flex-start}.blog-detail-container{flex:1;min-width:0;max-width:900px}.toc-sidebar{width:280px;min-width:280px;flex-shrink:0;position:sticky;top:100px;max-height:calc(100vh - 130px);overflow-y:auto;order:2}.toc-nav{padding:0;width:100%}.toc-title{font-size:16px;font-weight:700;color:#1a1a1a;margin-bottom:16px;letter-spacing:0;text-transform:none;white-space:nowrap}.toc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;width:100%;gap:0}.toc-item{margin-bottom:0;width:100%}.toc-link{display:block;width:100%;text-align:left;background:none;padding:7px 0 7px 16px;font-size:14px;color:#888;line-height:1.5;cursor:pointer;border-radius:0;border:none;border-left:2px solid transparent;transition:color .2s ease,border-left-color .2s ease,font-weight .2s ease;white-space:normal;word-wrap:break-word;overflow-wrap:break-word;font-family:inherit}.toc-link:hover{color:#0066cc;background:none;border-left-color:#0066cc}.toc-level-1 .toc-link{font-weight:500;font-size:14px;padding-left:16px}.toc-level-2 .toc-link{font-weight:400;padding-left:28px;font-size:14px}.toc-level-3 .toc-link{padding-left:40px;font-size:13px}.toc-active .toc-link{color:#0066cc;font-weight:500;background:none;border-left-color:#0066cc}.toc-sidebar::-webkit-scrollbar{width:3px}.toc-sidebar::-webkit-scrollbar-track{background:transparent}.toc-sidebar::-webkit-scrollbar-thumb{background:#ddd;border-radius:3px}.toc-sidebar::-webkit-scrollbar-thumb:hover{background:#bbb}.blog-detail{background:white;border-radius:12px;padding:50px;box-shadow:0 2px 12px rgba(0,0,0,.08)}.back-button{background:transparent;border:1px solid #ddd;color:#666;padding:10px 20px;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;margin-bottom:30px;transition:all .3s;display:inline-flex;align-items:center;gap:5px}.back-button:hover{background:#f5f5f5;border-color:#0066cc;color:#0066cc}.blog-detail-category{display:inline-block;background:linear-gradient(135deg,#0066cc,#2463eb);color:white;padding:8px 16px;border-radius:25px;font-size:13px;font-weight:600;margin-bottom:20px;text-transform:uppercase;letter-spacing:.5px}.blog-detail-title{font-size:42px;font-weight:700;color:#1a1a1a;line-height:1.3;margin-bottom:20px}.blog-detail-meta{display:flex;gap:25px;flex-wrap:wrap;padding-bottom:25px;margin-bottom:30px;border-bottom:2px solid #f0f0f0}.meta-item{display:flex;align-items:center;gap:8px;font-size:14px;color:#666}.meta-item svg{color:#0066cc}.meta-updated{color:#999;font-style:italic}.blog-detail-excerpt{font-size:20px;line-height:1.7;color:#444;padding:25px;background:#f8f9fa;border-left:4px solid #0066cc;border-radius:6px;margin-bottom:40px;font-weight:400}.blog-detail-description{margin-bottom:40px}.blog-detail-description h2{font-size:28px;color:#0066cc;margin-bottom:15px;font-weight:600}.blog-detail-description p,.blog-detail-description>div{font-size:16px;line-height:1.8;color:#555}.blog-detail-description p{font-style:italic;margin-bottom:15px}.blog-detail-description h3{font-size:20px;color:#1a1a1a;margin-top:20px;margin-bottom:10px;font-weight:600}.blog-detail-description ul{list-style-type:disc;padding-left:25px;margin-bottom:15px}.blog-detail-description ol{list-style-type:decimal;padding-left:25px;margin-bottom:15px}.blog-detail-description li{font-size:16px;line-height:1.8;color:#555;margin-bottom:8px;padding-left:5px}.blog-detail-description a{color:#0066cc;text-decoration:none;font-weight:500;border-bottom:1px solid transparent;transition:border-bottom-color .2s,color .2s}.blog-detail-description a:hover{color:#004a99;border-bottom-color:#004a99}.blog-detail-description strong{color:#333;font-weight:600}.blog-detail-description em{font-style:italic}.blog-detail-description code{background:#f5f5f5;padding:2px 6px;border-radius:3px;font-family:Courier New,monospace;font-size:14px;color:#d63384}.blog-detail-content{margin-bottom:50px}.blog-detail-content h2{font-size:28px;color:#0066cc;margin-bottom:20px;font-weight:600}.blog-detail-content p{font-size:16px;line-height:1.9;color:#333;margin-bottom:20px}.blog-detail-content h3{font-size:22px;color:#1a1a1a;margin-top:30px;margin-bottom:15px;font-weight:600}.blog-detail-content ul{list-style-type:disc;padding-left:25px;margin-bottom:20px}.blog-detail-content ol{list-style-type:decimal;padding-left:25px;margin-bottom:20px}.blog-detail-content li{font-size:16px;line-height:1.8;color:#333;margin-bottom:10px;padding-left:5px}.blog-detail-content a{color:#0066cc;text-decoration:none;font-weight:500;border-bottom:1px solid transparent;transition:border-bottom-color .2s,color .2s}.blog-detail-content a:hover{color:#004a99;border-bottom-color:#004a99}.blog-detail-content code{background:#f5f5f5;padding:2px 6px;border-radius:3px;font-family:Courier New,monospace;font-size:14px;color:#d63384}.blog-detail-content pre{background:#1a1a1a;color:#f8f8f8;padding:20px;border-radius:8px;overflow-x:auto;margin-bottom:20px}.blog-detail-content pre code{background:transparent;color:#f8f8f8;padding:0}.blog-detail-content blockquote{border-left:4px solid #ff6b35;padding-left:20px;margin:25px 0;font-style:italic;color:#555}.blog-detail-content table,.blog-detail-description table{width:100%;border-collapse:collapse;margin-bottom:25px;font-size:15px}.blog-detail-content th,.blog-detail-description th{padding:12px 16px;text-align:left;font-weight:600;color:#1a1a1a;border:1px solid #d0d5dd;background:#f0f4ff;font-size:14px}.blog-detail-content td,.blog-detail-description td{padding:12px 16px;border:1px solid #d0d5dd;color:#333;font-size:15px;line-height:1.6}.blog-detail-content tr:nth-child(2n),.blog-detail-description tr:nth-child(2n){background:#f9fafb}.blog-detail-content tr:hover,.blog-detail-description tr:hover{background:#f0f4ff}.blog-detail-content img,.blog-detail-description img{max-width:100%;height:auto;border-radius:8px;margin:15px 0}.blog-detail-footer{border-top:2px solid #f0f0f0;padding-top:30px}.share-section h3{font-size:18px;color:#1a1a1a;margin-bottom:15px;font-weight:600}.share-buttons{display:flex;gap:12px;flex-wrap:wrap}.share-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;background:#f5f5f5;border:1px solid #ddd;border-radius:6px;color:#333;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s}.share-btn:hover{background:#0066cc;color:white;border-color:#0066cc}.share-btn svg{width:18px;height:18px}.blog-detail-loading{max-width:900px;margin:0 auto;padding:40px 20px 80px}.blog-detail-skeleton{background:white;border-radius:12px;padding:50px;box-shadow:0 2px 12px rgba(0,0,0,.08)}.skeleton-detail-category{width:120px;height:30px;margin-bottom:20px;border-radius:25px}.skeleton-detail-title{width:100%;height:40px;margin-bottom:15px}.skeleton-detail-title-2{width:70%;height:40px;margin-bottom:20px}.skeleton-detail-meta{width:300px;height:20px;margin-bottom:30px}.skeleton-detail-excerpt{width:100%;height:60px;margin-bottom:30px;border-radius:6px}.skeleton-detail-content{width:100%;height:100px;margin-bottom:20px}.error-state{text-align:center;padding:80px 20px;background:white;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,.08)}.error-state h2{font-size:32px;color:#333;margin-bottom:15px}.error-state p{font-size:16px;color:#666;margin-bottom:30px}.blog-detail-content br{display:none}@media (max-width:1024px){.toc-sidebar{display:none}.blog-detail-wrapper{max-width:900px}}@media (max-width:768px){.blog-detail{padding:30px 20px}.blog-detail-title{font-size:28px}.blog-detail-excerpt{font-size:16px;padding:20px}.blog-detail-content h2,.blog-detail-description h2{font-size:22px}.blog-detail-content h3{font-size:18px}.blog-detail-meta{gap:10px}.blog-detail-meta,.share-buttons{flex-direction:column}.share-btn{width:100%;justify-content:center}}