.reading-progress{width:100%;height:4px;z-index:var(--z-fixed);pointer-events:none;background:#ffffff1a;position:fixed;top:0;left:0}.progress-bar{background:var(--gradient-primary);width:0%;height:100%;transition:width .1s ease-out}.blog-hero{min-height:70vh;color:var(--color-white);justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.hero-background{z-index:1;width:100%;height:100%;position:absolute;top:0;left:0}.hero-image{object-fit:cover;object-position:center;width:100%;height:100%}.hero-overlay{backdrop-filter:blur(2px);background:linear-gradient(135deg,#000000b3 0%,#00000080 50%,#000c 100%);width:100%;height:100%;position:absolute;top:0;left:0}.hero-content{z-index:2;max-width:1200px;padding:var(--spacing-2xl) var(--spacing-lg);text-align:center;margin:0 auto;position:relative}.breadcrumb{margin-bottom:var(--spacing-lg)}.breadcrumb-list{justify-content:center;align-items:center;gap:var(--spacing-sm);flex-wrap:wrap;list-style:none;display:flex}.breadcrumb-item{font-size:var(--fs-sm);align-items:center;font-weight:500;display:flex}.breadcrumb-item a{color:#fffc;transition:var(--transition-base);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);text-decoration:none}.breadcrumb-item a:hover{color:var(--color-white);background:#ffffff1a;text-decoration:none}.breadcrumb-item.active{color:var(--color-white);font-weight:600}.breadcrumb-item:not(:last-child):after{content:"/";color:#fff9;margin-left:var(--spacing-sm);font-weight:400}.hero-meta{margin-bottom:var(--spacing-lg)}.blog-category-badge{align-items:center;gap:var(--spacing-xs);background:var(--gradient-primary);color:var(--color-white);padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-full);font-weight:600;font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.5px;box-shadow:var(--shadow-lg);display:inline-flex}.hero-title{color:var(--color-gray-200);margin-bottom:var(--spacing-lg);text-shadow:0 2px 4px #00000080;max-width:900px;margin-left:auto;margin-right:auto;font-size:clamp(2rem,4vw,3.5rem);font-weight:800;line-height:1.1}.hero-excerpt{max-width:700px;margin:0 auto var(--spacing-xl) auto}.hero-excerpt p{font-size:var(--fs-lg);color:#ffffffe6;margin:0;line-height:1.6}.hero-info{justify-content:center;align-items:center;gap:var(--spacing-lg);font-size:var(--fs-sm);flex-wrap:wrap;display:flex}.author-info,.publish-date,.reading-time{align-items:center;gap:var(--spacing-xs);color:#ffffffe6;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;display:flex}.hero-info i{color:var(--color-primary-light)}.blog-main{padding:var(--spacing-4xl) 0;background:var(--color-light)}.container{max-width:1400px;padding:0 var(--spacing-lg);margin:0 auto}.blog-layout{gap:var(--spacing-4xl);grid-template-columns:1fr 350px;align-items:start;display:grid}.blog-content{background:var(--color-white);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);overflow:hidden}.blog-sidebar{top:calc(80px + var(--spacing-lg));gap:var(--spacing-xl);flex-direction:column;display:flex;position:sticky}.social-share{padding:var(--spacing-xl) var(--spacing-2xl) var(--spacing-lg);border-bottom:1px solid var(--color-gray-200);background:var(--color-gray-50)}.share-title{font-size:var(--fs-base);color:var(--color-gray-800);margin-bottom:var(--spacing-md);font-weight:600}.share-buttons{gap:var(--spacing-md);flex-wrap:wrap;display:flex}.share-btn{align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);background:var(--color-white);border:1px solid var(--color-gray-300);border-radius:var(--radius-md);color:var(--color-gray-700);font-size:var(--fs-sm);cursor:pointer;transition:var(--transition-base);font-weight:500;text-decoration:none;display:flex}.share-btn:hover{box-shadow:var(--shadow-md);text-decoration:none;transform:translateY(-2px)}.share-btn.facebook:hover{color:var(--color-white);background:#1877f2;border-color:#1877f2}.share-btn.twitter:hover{color:var(--color-white);background:#1da1f2;border-color:#1da1f2}.share-btn.linkedin:hover{color:var(--color-white);background:#0077b5;border-color:#0077b5}.share-btn.copy-link:hover,.share-btn.copied{background:var(--color-success);color:var(--color-white);border-color:var(--color-success)}.content-wrapper{padding:var(--spacing-2xl);font-weight:400;font-size:var(--fs-base);color:var(--color-gray-800);line-height:1.8}.content-wrapper h1,.content-wrapper h2,.content-wrapper h3,.content-wrapper h4,.content-wrapper h5,.content-wrapper h6{color:var(--color-gray-900);margin:var(--spacing-2xl) 0 var(--spacing-lg) 0;scroll-margin-top:var(--anchor-scroll-offset);font-weight:700;line-height:1.3}.content-wrapper h1{font-size:var(--fs-3xl);border-bottom:3px solid var(--color-primary);padding-bottom:var(--spacing-md)}.content-wrapper h2{font-size:var(--fs-2xl);position:relative}.content-wrapper h3{font-size:var(--fs-xl);color:var(--color-primary)}.content-wrapper p{margin-bottom:var(--spacing-lg);text-align:justify}.content-wrapper p:first-of-type{font-size:var(--fs-lg);color:var(--color-gray-700);font-weight:500}.content-wrapper a{color:var(--color-primary);text-underline-offset:3px;transition:var(--transition-base);font-weight:500;text-decoration:underline #0000}.content-wrapper a:hover{text-decoration-color:var(--color-primary);color:var(--color-primary-dark)}.content-wrapper img{border-radius:var(--radius-lg);max-width:100%;height:auto;box-shadow:var(--shadow-md);margin:var(--spacing-xl) 0}.content-wrapper blockquote{background:var(--color-gray-50);border-left:4px solid var(--color-primary);margin:var(--spacing-xl) 0;padding:var(--spacing-lg) var(--spacing-xl);border-radius:0 var(--radius-md) var(--radius-md) 0;font-style:italic;font-size:var(--fs-lg);color:var(--color-gray-700);position:relative}.content-wrapper blockquote:before{content:"\"";color:var(--color-primary);top:-10px;left:var(--spacing-lg);font-size:4rem;font-weight:700;line-height:1;position:absolute}.content-wrapper table{border-collapse:collapse;width:100%;margin:var(--spacing-xl) 0;background:var(--color-white);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden}.content-wrapper table th,.content-wrapper table td{padding:var(--spacing-md);text-align:left;border-bottom:1px solid var(--color-gray-200)}.content-wrapper table th{background:var(--color-gray-100);color:var(--color-gray-800);font-weight:600}.content-wrapper pre{background:var(--color-gray-900);color:var(--color-gray-100);padding:var(--spacing-lg);border-radius:var(--radius-lg);font-size:var(--fs-sm);margin:var(--spacing-xl) 0;line-height:1.5;overflow-x:auto}.content-wrapper code{background:var(--color-gray-100);color:var(--color-primary);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);font-family:Courier New,monospace;font-size:.9em}.content-wrapper pre code{color:inherit;background:0 0;border-radius:0;padding:0}.tags-section{padding:var(--spacing-xl) var(--spacing-2xl);border-top:1px solid var(--color-gray-200)}.tags-title{font-size:var(--fs-base);color:var(--color-gray-800);margin-bottom:var(--spacing-md);font-weight:600}.tags-list{gap:var(--spacing-sm);flex-wrap:wrap;display:flex}.tag{align-items:center;gap:var(--spacing-xs);background:var(--color-gray-100);color:var(--color-gray-700);padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-full);font-size:var(--fs-sm);transition:var(--transition-base);cursor:pointer;font-weight:500;text-decoration:none;display:inline-flex}.tag:hover{background:var(--color-primary);color:var(--color-white);text-decoration:none;transform:translateY(-2px)}.tag i{font-size:var(--fs-xs)}.sidebar-section{background:var(--color-white);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:var(--spacing-xl);border:1px solid var(--color-gray-200)}.sidebar-title{font-size:var(--fs-lg);color:var(--color-gray-900);margin-bottom:var(--spacing-lg);padding-bottom:var(--spacing-sm);border-bottom:2px solid var(--color-primary);font-weight:700;position:relative}.sidebar-title:after{content:"";background:var(--color-secondary);width:40px;height:2px;position:absolute;bottom:-2px;left:0}.toc-nav{max-height:400px;overflow-y:auto}.toc-list{margin:0;padding:0;list-style:none}.toc-list li{margin:0;padding:0}.toc-list a{padding:var(--spacing-sm) var(--spacing-md);color:var(--color-gray-700);font-size:var(--fs-sm);border-radius:var(--radius-md);transition:var(--transition-base);border-left:3px solid #0000;line-height:1.4;text-decoration:none;display:block}.toc-list a:hover{background:var(--color-gray-100);border-left-color:var(--color-primary);color:var(--color-primary);text-decoration:none}.toc-list a.active{border-left-color:var(--color-primary);color:var(--color-primary);background:#bf17251a;font-weight:600}.toc-list .toc-h2{padding-left:var(--spacing-md)}.toc-list .toc-h3{padding-left:var(--spacing-lg)}.toc-list .toc-h4{padding-left:var(--spacing-xl)}.action-buttons{gap:var(--spacing-sm);flex-direction:column;display:flex}.action-btn{align-items:center;gap:var(--spacing-sm);background:var(--color-gray-100);border:1px solid var(--color-gray-300);border-radius:var(--radius-md);padding:var(--spacing-md);color:var(--color-gray-700);font-size:var(--fs-sm);cursor:pointer;transition:var(--transition-base);text-align:left;width:100%;font-weight:500;display:flex}.action-btn:hover{background:var(--color-primary);color:var(--color-white);border-color:var(--color-primary);transform:translateY(-1px)}.action-btn i{font-size:var(--fs-base);text-align:center;width:16px}.related-list{gap:var(--spacing-md);flex-direction:column;display:flex}.related-article{gap:var(--spacing-md);padding:var(--spacing-md);background:var(--color-gray-50);border-radius:var(--radius-lg);transition:var(--transition-base);text-decoration:none;display:flex}.related-article:hover{background:var(--color-gray-100);text-decoration:none;transform:translateY(-2px)}.related-thumbnail{border-radius:var(--radius-md);object-fit:cover;background:var(--color-gray-200);flex-shrink:0;width:80px;height:60px}.related-content h4{font-size:var(--fs-sm);color:var(--color-gray-800);margin:0 0 var(--spacing-xs) 0;font-weight:600;line-height:1.3}.related-meta{font-size:var(--fs-xs);color:var(--color-gray-600);align-items:center;gap:var(--spacing-sm);display:flex}.blog-navigation{background:var(--color-white);border-top:1px solid var(--color-gray-200);padding:var(--spacing-xl) 0}.nav-buttons{justify-content:space-between;align-items:center;gap:var(--spacing-lg);display:flex}.nav-btn{align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-lg);background:var(--color-gray-100);color:var(--color-gray-700);border-radius:var(--radius-md);transition:var(--transition-base);border:1px solid var(--color-gray-300);font-weight:500;text-decoration:none;display:flex}.nav-btn:hover{background:var(--color-primary);color:var(--color-white);border-color:var(--color-primary);text-decoration:none;transform:translateY(-2px)}.nav-actions{gap:var(--spacing-md);display:flex}.share-btn-mobile{display:none}[hidden].toc-section{display:none!important}.content-wrapper.font-small{font-size:14px}.content-wrapper.font-medium{font-size:16px}.content-wrapper.font-large{font-size:18px}.content-wrapper.font-small h1{font-size:1.8rem}.content-wrapper.font-small h2{font-size:1.5rem}.content-wrapper.font-small h3{font-size:1.3rem}.content-wrapper.font-large h1{font-size:2.5rem}.content-wrapper.font-large h2{font-size:2.2rem}.content-wrapper.font-large h3{font-size:1.8rem}.notification-container{top:var(--spacing-xl);right:var(--spacing-xl);z-index:1050;pointer-events:none;position:fixed}.notification-container .notification{min-width:250px;max-width:400px;margin-bottom:var(--spacing-sm);pointer-events:auto;background:var(--color-white);border-left:4px solid var(--color-primary);justify-content:space-between;animation:.3s ease-out slideInRight;position:relative;top:auto;right:auto}.notification-container .notification.success{border-left-color:var(--color-success)}.notification-container .notification.error{border-left-color:var(--color-warning)}.notification-container .notification-close{margin-left:var(--spacing-md);flex-shrink:0}@keyframes slideInRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@media (width<=1024px){.blog-layout{gap:var(--spacing-2xl);grid-template-columns:1fr}.blog-sidebar{gap:var(--spacing-lg);order:-1;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));display:grid;position:static}.toc-section{grid-column:1/-1}.hero-info{gap:var(--spacing-md)}.author-info,.publish-date,.reading-time{padding:var(--spacing-sm);font-size:var(--fs-xs)}}@media (width<=768px){.blog-hero{min-height:50vh}.hero-content{padding:var(--spacing-xl) var(--spacing-md)}.hero-title{margin-bottom:var(--spacing-md);font-size:clamp(1.5rem,5vw,2.5rem)}.hero-info{align-items:stretch;gap:var(--spacing-sm);flex-direction:column}.author-info,.publish-date,.reading-time{justify-content:center}.breadcrumb-list{font-size:var(--fs-xs);justify-content:flex-start}.content-wrapper{padding:var(--spacing-lg)}.content-wrapper h2:before{left:-var(--spacing-sm);width:3px}.social-share{padding:var(--spacing-lg)}.share-buttons{justify-content:center}.share-btn{flex:1;justify-content:center;min-width:0}.share-btn span{display:none}.tags-section,.sidebar-section{padding:var(--spacing-lg)}.blog-sidebar{grid-template-columns:1fr}.nav-buttons{align-items:stretch;gap:var(--spacing-md);flex-direction:column}.share-btn-mobile{justify-content:center;display:flex}.notification-container{right:var(--spacing-md);left:var(--spacing-md)}.notification-container .notification{max-width:none}}@media (width<=576px){.hero-content{padding:var(--spacing-lg) var(--spacing-sm)}.breadcrumb-list{gap:var(--spacing-xs);flex-wrap:wrap}.content-wrapper{padding:var(--spacing-md)}.content-wrapper h1{font-size:var(--fs-2xl)}.content-wrapper h2{font-size:var(--fs-xl)}.social-share{padding:var(--spacing-md)}.share-buttons{gap:var(--spacing-sm);grid-template-columns:repeat(2,1fr);display:grid}.tags-section,.sidebar-section{padding:var(--spacing-md)}.action-buttons{grid-template-columns:repeat(2,1fr);display:grid}.related-article{flex-direction:column}.related-thumbnail{width:100%;height:120px}}@media (prefers-reduced-motion:reduce){.reading-progress .progress-bar,.share-btn,.action-btn,.tag,.related-article,.nav-btn,.notification-container .notification{transition:none;animation:none}.share-btn:hover,.action-btn:hover,.related-article:hover,.nav-btn:hover,.tag:hover{transform:none}}@media (prefers-contrast:high){.blog-content,.sidebar-section,.share-btn,.action-btn,.nav-btn{border:2px solid var(--color-gray-800)}.tag{border:1px solid var(--color-gray-600)}}.share-btn:focus-visible,.action-btn:focus-visible,.nav-btn:focus-visible,.toc-list a:focus-visible,.related-article:focus-visible,.breadcrumb-item a:focus-visible,.notification-close:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}@media print{.blog-hero,.social-share,.blog-navigation,.blog-sidebar,.reading-progress{display:none}.blog-layout{grid-template-columns:1fr}.content-wrapper{padding:0;font-size:12pt;line-height:1.5}.content-wrapper h1,.content-wrapper h2,.content-wrapper h3{break-after:avoid;page-break-after:avoid}.blog-content{box-shadow:none;border:1px solid #000}}
