html {
     color-scheme: dark;
 }
 
 body {
     font-family: var(--font);
     background-color: var(--bg-primary);
     color: var(--text-primary);
     line-height: 1.6;
     overflow-x: hidden;
     margin: 0;
     padding: 0;
 }
 
 .logo {
     font-size: 1.5rem;
     font-weight: var(--weight-bold);
     color: var(--primary);
     text-decoration: none;
     font-family: var(--font-alt);
 }
 
 .nav-links {
     display: flex;
     gap: 2rem;
     list-style: none;
     align-items: center;
 }
 
 .nav-links a {
     color: var(--text-secondary);
     text-decoration: none;
     font-weight: var(--weight-medium);
     transition: color var(--transition-base) ease;
 }
 
 .nav-links a:hover {
     color: var(--text-primary);
 }
 
 .nav-links a.active {
     color: var(--primary);
 }
 
 .nav-auth {
     display: flex;
     gap: 1rem;
     align-items: center;
 }
 /* Hero Section */
 
 .blog-hero {
     margin-top: 80px;
     padding: 4rem 2rem;
     background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
     text-align: center;
     position: relative;
     overflow: hidden;
 }
 
 .blog-hero::before {
     content: '';
     position: absolute;
     width: 400px;
     height: 400px;
     background: radial-gradient(circle, rgba(8, 121, 145, 0.08) 0%, transparent 70%);
     top: -200px;
     right: -200px;
     border-radius: 50%;
 }
 
 .hero-content {
     max-width: 800px;
     margin: 0 auto;
     position: relative;
     z-index: 1;
 }
 
 .hero-title {
     font-size: var(--title-3xl);
     font-weight: var(--weight-extrabold);
     margin-bottom: 1rem;
     font-family: var(--font-alt);
     background: linear-gradient(135deg, #fff 0%, var(--primary) 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }
 
 .hero-subtitle {
     font-size: var(--txt-xl);
     color: var(--text-secondary);
     margin-bottom: 2rem;
 }
 /* Search Bar */
 
 .blog-search {
     max-width: 600px;
     margin: 0 auto;
     position: relative;
 }
 
 .search-input {
     width: 100%;
     padding: 1rem 4rem 1rem 1.5rem;
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: var(--ins-radius-l);
     color: var(--text-primary);
     font-size: 1rem;
     transition: all 0.3s ease;
 }
 
 .search-input:focus {
     outline: none;
     border-color: var(--primary);
     box-shadow: 0 0 0 3px rgba(8, 121, 145, 0.1);
 }
 
 .search-btn {
     position: absolute;
     right: 0.75rem;
     top: 50%;
     transform: translateY(-50%);
     background: var(--primary);
     color: white;
     border: none;
     padding: 0.75rem 1.5rem;
     border-radius: var(--ins-radius-m);
     cursor: pointer;
     transition: all 0.3s ease;
     font-weight: var(--weight-semibold);
 }
 
 .search-btn:hover {
     background: var(--primary-dark);
 }
 /* Main Content */
 
 .main-content {
     max-width: 1600px;
     margin: 0 auto;
     padding: 3rem 2rem;
 }
 
 .content-layout {
     display: grid;
     grid-template-columns: 1fr 320px;
     gap: 3rem;
 }
 /* Category Filter */
 
 .category-filter {
     display: flex;
     gap: 0.75rem;
     flex-wrap: wrap;
     margin-bottom: 2rem;
     padding-bottom: 2rem;
     border-bottom: 1px solid var(--border);
 }
 
 .category-btn {
     padding: 0.6rem 1.25rem;
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: var(--ins-radius-m);
     color: var(--text-secondary);
     cursor: pointer;
     transition: all 0.3s ease;
     font-weight: var(--weight-medium);
     font-size: 0.9rem;
 }
 
 .category-btn:hover {
     border-color: var(--primary);
     color: var(--text-primary);
     background: var(--bg-secondary);
 }
 
 .category-btn.active {
     background: var(--primary);
     color: white;
     border-color: var(--primary);
 }
 /* Featured Post */
 
 .featured-post {
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: var(--ins-radius-l);
     overflow: hidden;
     margin-bottom: 3rem;
     transition: all 0.3s ease;
     cursor: pointer;
 }
 
 .featured-post:hover {
     transform: translateY(-5px);
     box-shadow: var(--shadow-lg);
     border-color: var(--primary);
 }
 
 .featured-image {
     width: 100%;
     aspect-ratio: 21/9;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 4rem;
 }
 
 .featured-badge {
     position: absolute;
     top: 1.5rem;
     left: 1.5rem;
     background: var(--warning);
     color: white;
     padding: 0.5rem 1rem;
     border-radius: var(--ins-radius-s);
     font-weight: var(--weight-semibold);
     font-size: 0.85rem;
     display: flex;
     align-items: center;
     gap: 0.5rem;
 }
 
 .featured-content {
     padding: 2rem;
 }
 
 .post-meta {
     display: flex;
     gap: 1.5rem;
     margin-bottom: 1rem;
     font-size: 0.9rem;
     color: var(--text-secondary);
     flex-wrap: wrap;
 }
 
 .meta-item {
     display: flex;
     align-items: center;
     gap: 0.5rem;
 }
 
 .featured-title {
     font-size: 2rem;
     font-weight: var(--weight-bold);
     color: var(--text-primary);
     margin-bottom: 1rem;
     font-family: var(--font-alt);
     line-height: 1.3;
 }
 
 .featured-excerpt {
     font-size: 1.1rem;
     color: var(--text-secondary);
     line-height: 1.7;
     margin-bottom: 1.5rem;
 }
 
 .read-more {
     color: var(--primary);
     font-weight: var(--weight-semibold);
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     transition: all 0.3s ease;
 }
 
 .read-more:hover {
     gap: 0.75rem;
 }
 /* Blog Grid */
 
 .blog-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
     gap: 2rem;
     margin-bottom: 3rem;
 }
 
 .blog-card {
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: var(--ins-radius-l);
     overflow: hidden;
     transition: all 0.3s ease;
     cursor: pointer;
     display: flex;
     flex-direction: column;
 }
 
 .blog-card:hover {
     transform: translateY(-5px);
     box-shadow: var(--shadow-lg);
     border-color: var(--primary);
 }
 
 .post-image {
     width: 100%;
     aspect-ratio: 16/10;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 3rem;
 }
 
 .post-category {
     position: absolute;
     top: 1rem;
     left: 1rem;
     background: rgba(8, 121, 145, 0.9);
     backdrop-filter: blur(10px);
     color: white;
     padding: 0.4rem 0.85rem;
     border-radius: var(--ins-radius-s);
     font-weight: var(--weight-semibold);
     font-size: 0.8rem;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }
 
 .post-content {
     padding: 1.5rem;
     flex: 1;
     display: flex;
     flex-direction: column;
 }
 
 .post-title {
     font-size: 1.25rem;
     font-weight: var(--weight-semibold);
     color: var(--text-primary);
     margin-bottom: 0.75rem;
     line-height: 1.4;
 }
 
 .post-excerpt {
     font-size: 0.95rem;
     color: var(--text-secondary);
     line-height: 1.6;
     margin-bottom: 1rem;
     flex: 1;
 }
 
 .post-footer {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding-top: 1rem;
     border-top: 1px solid var(--border);
 }
 
 .post-author {
     display: flex;
     align-items: center;
     gap: 0.75rem;
 }
 
 .author-avatar {
     width: 32px;
     height: 32px;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 0.9rem;
 }
 
 .author-info {
     display: flex;
     flex-direction: column;
     gap: 0.15rem;
 }
 
 .author-name {
     font-size: 0.85rem;
     font-weight: var(--weight-semibold);
     color: var(--text-primary);
 }
 
 .post-date {
     font-size: 0.75rem;
     color: var(--text-secondary);
 }
 
 .post-stats {
     display: flex;
     gap: 1rem;
     font-size: 0.85rem;
     color: var(--text-secondary);
 }
 /* Sidebar */
 
 .sidebar {
     display: flex;
     flex-direction: column;
     gap: 2rem;
 }
 
 .sidebar-widget {
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: var(--ins-radius-l);
     padding: 1.5rem;
 }
 
 .widget-title {
     font-size: 1.25rem;
     font-weight: var(--weight-bold);
     color: var(--text-primary);
     margin-bottom: 1.25rem;
     font-family: var(--font-alt);
 }
 /* Categories Widget */
 
 .categories-list {
     display: flex;
     flex-direction: column;
     gap: 0.75rem;
 }
 
 .category-item {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0.75rem;
     background: var(--bg-tertiary);
     border-radius: var(--ins-radius-s);
     transition: all 0.3s ease;
     cursor: pointer;
 }
 
 .category-item:hover {
     background: var(--bg-secondary);
     transform: translateX(5px);
 }
 
 .category-name {
     color: var(--text-primary);
     font-weight: var(--weight-medium);
     font-size: 0.95rem;
 }
 
 .category-count {
     background: var(--primary);
     color: white;
     padding: 0.25rem 0.65rem;
     border-radius: var(--ins-radius-s);
     font-size: 0.8rem;
     font-weight: var(--weight-semibold);
 }
 /* Popular Posts Widget */
 
 .popular-posts {
     display: flex;
     flex-direction: column;
     gap: 1rem;
 }
 
 .popular-post-item {
     display: flex;
     gap: 1rem;
     padding: 0.75rem;
     background: var(--bg-tertiary);
     border-radius: var(--ins-radius-s);
     transition: all 0.3s ease;
     cursor: pointer;
 }
 
 .popular-post-item:hover {
     background: var(--bg-secondary);
 }
 
 .popular-post-image {
     width: 80px;
     height: 80px;
     border-radius: var(--ins-radius-s);
     flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 2rem;
 }
 
 .popular-post-info {
     flex: 1;
     display: flex;
     flex-direction: column;
     justify-content: center;
     gap: 0.5rem;
 }
 
 .popular-post-title {
     font-size: 0.9rem;
     font-weight: var(--weight-semibold);
     color: var(--text-primary);
     line-height: 1.4;
 }
 
 .popular-post-meta {
     font-size: 0.75rem;
     color: var(--text-secondary);
 }
 /* Tags Widget */
 
 .tags-cloud {
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem;
 }
 
 .tag-item {
     padding: 0.5rem 1rem;
     background: var(--bg-tertiary);
     border: 1px solid var(--border);
     border-radius: var(--ins-radius-s);
     color: var(--text-secondary);
     font-size: 0.85rem;
     transition: all 0.3s ease;
     cursor: pointer;
 }
 
 .tag-item:hover {
     background: var(--primary);
     color: white;
     border-color: var(--primary);
 }
 /* Newsletter Widget */
 
 .newsletter-form {
     display: flex;
     flex-direction: column;
     gap: 1rem;
 }
 
 .newsletter-text {
     font-size: 0.9rem;
     color: var(--text-secondary);
     line-height: 1.6;
 }
 
 .newsletter-input {
     padding: 0.85rem 1rem;
     background: var(--bg-tertiary);
     border: 1px solid var(--border);
     border-radius: var(--ins-radius-s);
     color: var(--text-primary);
     font-size: 0.95rem;
     transition: all 0.3s ease;
 }
 
 .newsletter-input:focus {
     outline: none;
     border-color: var(--primary);
     background: var(--surface);
 }
 
 .btn-subscribe {
     padding: 0.85rem 1.5rem;
     background: var(--primary);
     color: white;
     border: none;
     border-radius: var(--ins-radius-s);
     font-weight: var(--weight-semibold);
     cursor: pointer;
     transition: all 0.3s ease;
 }
 
 .btn-subscribe:hover {
     background: var(--primary-dark);
     transform: translateY(-2px);
 }
 /* Pagination */
 
 .pagination {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 0.5rem;
     margin-top: 3rem;
 }
 
 .page-btn {
     padding: 0.75rem 1.25rem;
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: var(--ins-radius-s);
     color: var(--text-primary);
     cursor: pointer;
     transition: all 0.3s ease;
     font-weight: var(--weight-medium);
 }
 
 .page-btn:hover {
     background: var(--bg-secondary);
     border-color: var(--primary);
     color: var(--primary);
 }
 
 .page-btn.active {
     background: var(--primary);
     color: white;
     border-color: var(--primary);
 }
 
 .page-btn:disabled {
     opacity: 0.5;
     cursor: not-allowed;
 }
 /* Footer */
 
 footer {
     background: var(--surface);
     border-top: 1px solid var(--border);
     padding: 2rem 0;
     text-align: center;
     color: var(--text-secondary);
     font-size: 0.9rem;
     margin-top: 4rem;
 }
 /* Responsive */
 
 @media (max-width: 1200px) {
     .content-layout {
         grid-template-columns: 1fr;
     }
     .sidebar {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         gap: 1.5rem;
     }
 }
 
 @media (max-width: 768px) {
     .nav-links {
         display: none;
     }
     .blog-hero {
         padding: 3rem 1.5rem;
     }
     .hero-title {
         font-size: 2rem;
     }
     .hero-subtitle {
         font-size: 1rem;
     }
     .main-content {
         padding: 2rem 1rem;
     }
     .blog-grid {
         grid-template-columns: 1fr;
     }
     .sidebar {
         grid-template-columns: 1fr;
     }
     .featured-title {
         font-size: 1.5rem;
     }
     .category-filter {
         gap: 0.5rem;
     }
     .category-btn {
         font-size: 0.85rem;
         padding: 0.5rem 1rem;
     }
 }
 
 @media (max-width: 480px) {
     .nav-container {
         padding: 0 1rem;
     }
     .post-footer {
         flex-direction: column;
         gap: 0.75rem;
         align-items: flex-start;
     }
 }