/* CSS Reset and Base */  
* {  
    margin: 0;  
    padding: 0;  
    box-sizing: border-box;  
}  
  
:root {  
    /* Color Palette */  
    --primary-color: #667eea;  
    --primary-light: #818cf8;  
    --primary-dark: #4f46e5;  
    --secondary-color: #06b6d4;  
    --secondary-light: #22d3ee;  
    --accent-green: #10b981;  
    --accent-green-light: #34d399;  
    --accent-purple: #8b5cf6;  
    --accent-purple-light: #a78bfa;  
    --accent-pink: #ec4899;  
    --accent-orange: #f59e0b;  
      
    /* Background colors */  
    --bg-glass: rgba(255, 255, 255, 0.25);  
    --bg-card: rgba(255, 255, 255, 0.15);  
    --bg-input: rgba(255, 255, 255, 0.1);  
      
    /* Text colors */  
    --text-white: rgba(255, 255, 255, 0.95);  
    --text-light: rgba(255, 255, 255, 0.8);  
    --text-muted: rgba(255, 255, 255, 0.6);  
      
    /* Shadows */  
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);  
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);  
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);  
    --shadow-colored: 0 10px 15px rgba(102, 126, 234, 0.15);  
    --shadow-glow: 0 0 20px rgba(102, 126, 234, 0.3);  
      
    /* Border radius */  
    --radius-sm: 0.375rem;  
    --radius-md: 0.5rem;  
    --radius-lg: 0.75rem;  
    --radius-xl: 1rem;  
    --radius-2xl: 1.5rem;  
    --radius-3xl: 2rem;  
      
    /* Spacing */  
    --space-1: 0.25rem;  
    --space-2: 0.5rem;  
    --space-3: 0.75rem;  
    --space-4: 1rem;  
    --space-5: 1.25rem;  
    --space-6: 1.5rem;  
    --space-8: 2rem;  
    --space-10: 2.5rem;  
    --space-12: 3rem;  
    --space-16: 4rem;  
      
    /* Typography */  
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;  
    --font-size-sm: 0.875rem;  
    --font-size-base: 1rem;  
    --font-size-lg: 1.125rem;  
    --font-size-xl: 1.25rem;  
    --font-size-2xl: 1.5rem;  
    --font-size-3xl: 1.875rem;  
    --font-size-4xl: 2.25rem;  
      
    /* Transitions */  
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);  
    --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);  
    --transition-bounce: 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);  
      
    /* Dark mode colors */  
    --dark-bg: #121212;  
    --dark-surface: #1e1e1e;  
    --dark-border: #333;  
    --dark-text: #e0e0e0;  
    --dark-text-secondary: #aaa;  
    --dark-hover: #2a2a2a;  
    --dark-active: #333;  
}  
  
/* Base styles */  
html {  
    font-size: 16px;  
    scroll-behavior: smooth;  
}  
  
body {  
    font-family: var(--font-family);  
    font-size: var(--font-size-base);  
    line-height: 1.6;  
    color: var(--text-white);  
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);  
    min-height: 100vh;  
    position: relative;  
    -webkit-font-smoothing: antialiased;  
    -moz-osx-font-smoothing: grayscale;  
    overflow-x: hidden;  
    padding: 0;  
    margin: 0;  
}  
  
/* Animated background elements */  
.background-elements {  
    position: fixed;  
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 100%;  
    pointer-events: none;  
    z-index: 0;  
    overflow: hidden;  
}  
  
.floating-shape {  
    position: absolute;  
    border-radius: 50%;  
    opacity: 0.1;  
    animation: float 6s ease-in-out infinite;  
}  
  
.floating-shape.shape-1 {  
    width: 80px;  
    height: 80px;  
    background: linear-gradient(45deg, var(--accent-green), var(--accent-green-light));  
    top: 20%;  
    left: 10%;  
    animation-delay: 0s;  
}  
  
.floating-shape.shape-2 {  
    width: 120px;  
    height: 120px;  
    background: linear-gradient(45deg, var(--accent-purple), var(--accent-purple-light));  
    top: 60%;  
    right: 15%;  
    animation-delay: 2s;  
}  
  
.floating-shape.shape-3 {  
    width: 60px;  
    height: 60px;  
    background: linear-gradient(45deg, var(--accent-pink), var(--accent-orange));  
    bottom: 30%;  
    left: 20%;  
    animation-delay: 4s;  
}  
  
.floating-shape.shape-4 {  
    width: 100px;  
    height: 100px;  
    background: linear-gradient(45deg, var(--secondary-color), var(--secondary-light));  
    top: 10%;  
    right: 30%;  
    animation-delay: 1s;  
}  
  
@keyframes float {  
    0%, 100% {   
        transform: translateY(0px) rotate(0deg);   
    }  
    50% {   
        transform: translateY(-20px) rotate(180deg);   
    }  
}  
  
/* Progress bar */  
.progress-container {  
    position: fixed;  
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 4px;  
    background: transparent;  
    z-index: 1000;  
}  
  
.progress-bar {  
    height: 100%;  
    background: linear-gradient(90deg, var(--primary-color), var(--accent-purple));  
    width: 0%;  
    transition: width 0.1s ease;  
}  
  
/* Container */  
.container {  
    max-width: 1200px;  
    margin: 0 auto;  
    padding: 0 var(--space-4);  
    width: 100%;  
    position: relative;  
    z-index: 1;  
}  
  
/* Header */  
.header {  
    background: var(--bg-glass);  
    backdrop-filter: blur(20px);  
    -webkit-backdrop-filter: blur(20px);  
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);  
    padding: var(--space-4) 0;  
    position: sticky;  
    top: 0;  
    z-index: 100;  
    box-shadow: var(--shadow-md);  
}  
  
.header-content {  
    display: flex;  
    justify-content: space-between;  
    align-items: center;  
}  
  
.logo-section {  
    display: flex;  
    align-items: center;  
    gap: var(--space-3);  
}  
  
.logo-icon {  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    transition: transform var(--transition-bounce);  
}  
  
.logo-icon:hover {  
    transform: scale(1.1) rotate(5deg);  
}  
  
.logo-text {  
    font-size: var(--font-size-2xl);  
    font-weight: 700;  
    background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.8));  
    -webkit-background-clip: text;  
    -webkit-text-fill-color: transparent;  
    background-clip: text;  
    letter-spacing: -0.025em;  
    text-decoration: none;  
}  
  
.nav-menu {  
    display: flex;  
    gap: var(--space-6);  
}  
  
.nav-link {  
    color: var(--text-white);  
    text-decoration: none;  
    font-weight: 500;  
    transition: all var(--transition-normal);  
    position: relative;  
}  
  
.nav-link:hover {  
    color: var(--text-white);  
}  
  
.nav-link::after {  
    content: '';  
    position: absolute;  
    bottom: -4px;  
    left: 0;  
    width: 0;  
    height: 2px;  
    background: var(--text-white);  
    transition: width var(--transition-normal);  
}  
  
.nav-link:hover::after {  
    width: 100%;  
}  
  
.nav-link.active::after {  
    width: 100%;  
}  
  
.mobile-menu-button {  
    display: none;  
    background: none;  
    border: none;  
    color: var(--text-white);  
    font-size: var(--font-size-xl);  
    cursor: pointer;  
}  
  
/* Main content */  
.main {  
    padding: var(--space-8) 0;  
    position: relative;  
    z-index: 1;  
}  
  
/* Blog layout */  
.blog-layout {  
    display: grid;  
    grid-template-columns: 1fr 350px;  
    gap: var(--space-8);  
    margin-bottom: var(--space-8);  
}  
  
.blog-main {  
    width: 100%;  
}  
  
.blog-sidebar {  
    width: 100%;  
}  
  
/* Blog post content */  
.blog-post {  
    background: var(--bg-glass);  
    backdrop-filter: blur(20px);  
    -webkit-backdrop-filter: blur(20px);  
    border: 1px solid rgba(255, 255, 255, 0.2);  
    border-radius: var(--radius-3xl);  
    padding: var(--space-8);  
    box-shadow: var(--shadow-colored);  
    margin-bottom: var(--space-8);  
}  
  
.post-header {  
    margin-bottom: var(--space-8);  
}  
  
.post-category {  
    display: inline-block;  
    background: var(--primary-color);  
    color: white;  
    font-size: var(--font-size-sm);  
    padding: var(--space-1) var(--space-3);  
    border-radius: var(--radius-md);  
    margin-bottom: var(--space-4);  
    text-decoration: none;  
}  
  
.post-title {  
    font-size: var(--font-size-4xl);  
    font-weight: 700;  
    margin-bottom: var(--space-4);  
    color: var(--text-white);  
    line-height: 1.2;  
}  
  
.post-meta {  
    display: flex;  
    align-items: center;  
    gap: var(--space-6);  
    color: var(--text-light);  
    font-size: var(--font-size-sm);  
    margin-bottom: var(--space-6);  
    flex-wrap: wrap;  
}  
  
.post-author {  
    display: flex;  
    align-items: center;  
    gap: var(--space-2);  
}  
  
.author-avatar {  
    width: 40px;  
    height: 40px;  
    border-radius: 50%;  
    object-fit: cover;  
}  
  
.author-name {  
    font-weight: 500;  
}  
  
.post-date, .post-read-time {  
    display: flex;  
    align-items: center;  
    gap: var(--space-2);  
}  
  
.post-featured-image {  
    width: 100%;  
    height: 400px;  
    object-fit: cover;  
    border-radius: var(--radius-xl);  
    margin-bottom: var(--space-8);  
}  
  
.post-content {  
    color: var(--text-light);  
    font-size: var(--font-size-lg);  
    line-height: 1.8;  
}  
  
.post-content p {  
    margin-bottom: var(--space-6);  
}  
  
.post-content h2 {  
    font-size: var(--font-size-2xl);  
    font-weight: 700;  
    color: var(--text-white);  
    margin: var(--space-8) 0 var(--space-4);  
}  
  
.post-content h3 {  
    font-size: var(--font-size-xl);  
    font-weight: 600;  
    color: var(--text-white);  
    margin: var(--space-6) 0 var(--space-3);  
}  
  
.post-content blockquote {  
    border-left: 4px solid var(--primary-light);  
    padding: var(--space-4) var(--space-6);  
    margin: var(--space-8) 0;  
    font-style: italic;  
    color: var(--text-white);  
    background: var(--bg-input);  
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;  
}  
  
.image-container {  
    margin: var(--space-8) 0;  
}  
  
.content-image {  
    width: 100%;  
    border-radius: var(--radius-lg);  
    box-shadow: var(--shadow-lg);  
}  
  
.image-caption {  
    text-align: center;  
    color: var(--text-muted);  
    font-size: var(--font-size-sm);  
    margin-top: var(--space-2);  
    font-style: italic;  
}  
  
/* Post tags */  
.post-tags {  
    display: flex;  
    flex-wrap: wrap;  
    gap: var(--space-2);  
    margin: var(--space-8) 0;  
}  
  
.post-tag {  
    background: var(--bg-input);  
    color: var(--text-light);  
    padding: var(--space-2) var(--space-3);  
    border-radius: var(--radius-lg);  
    font-size: var(--font-size-sm);  
    text-decoration: none;  
    transition: all var(--transition-normal);  
}  
  
.post-tag:hover {  
    background: var(--primary-color);  
    color: white;  
    transform: translateY(-2px);  
}  
  
/* Share section */  
.post-share {  
    display: flex;  
    align-items: center;  
    gap: var(--space-4);  
    margin: var(--space-8) 0;  
    padding: var(--space-6);  
    background: var(--bg-input);  
    border-radius: var(--radius-xl);  
    flex-wrap: wrap;  
}  
  
.share-title {  
    font-weight: 600;  
    margin-right: var(--space-2);  
}  
  
.share-links {  
    display: flex;  
    gap: var(--space-3);  
}  
  
.share-link {  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    width: 36px;  
    height: 36px;  
    background: var(--bg-glass);  
    border-radius: 50%;  
    color: var(--text-white);  
    text-decoration: none;  
    transition: all var(--transition-normal);  
}  
  
.share-link:hover {  
    background: var(--primary-color);  
    transform: translateY(-3px);  
    box-shadow: var(--shadow-md);  
}  
  
/* Author section */  
.author-section {  
    display: flex;  
    gap: var(--space-6);  
    padding: var(--space-6);  
    background: var(--bg-input);  
    border-radius: var(--radius-xl);  
    margin: var(--space-8) 0;  
    flex-wrap: wrap;  
}  
  
.author-image {  
    width: 100px;  
    height: 100px;  
    border-radius: 50%;  
    object-fit: cover;  
}  
  
.author-info {  
    flex: 1;  
}  
  
.author-title {  
    font-size: var(--font-size-xl);  
    font-weight: 600;  
    margin-bottom: var(--space-2);  
    color: var(--text-white);  
}  
  
.author-bio {  
    color: var(--text-light);  
    margin-bottom: var(--space-4);  
}  
  
.author-social {  
    display: flex;  
    gap: var(--space-3);  
    flex-wrap: wrap;  
}  
  
.author-social-link {  
    color: var(--text-light);  
    text-decoration: none;  
    transition: all var(--transition-fast);  
}  
  
.author-social-link:hover {  
    color: var(--primary-light);  
}  
  
/* Comments section */  
.comments-section {  
    background: var(--bg-glass);  
    backdrop-filter: blur(20px);  
    -webkit-backdrop-filter: blur(20px);  
    border: 1px solid rgba(255, 255, 255, 0.2);  
    border-radius: var(--radius-3xl);  
    padding: var(--space-8);  
    box-shadow: var(--shadow-colored);  
    margin-bottom: var(--space-8);  
}  
  
.comments-title {  
    font-size: var(--font-size-2xl);  
    font-weight: 700;  
    margin-bottom: var(--space-6);  
    color: var(--text-white);  
}  
  
.comment {  
    display: flex;  
    gap: var(--space-4);  
    padding: var(--space-6) 0;  
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);  
}  
  
.comment:last-child {  
    border-bottom: none;  
}  
  
.comment-avatar {  
    width: 50px;  
    height: 50px;  
    border-radius: 50%;  
    object-fit: cover;  
}  
  
.comment-content {  
    flex: 1;  
}  
  
.comment-author {  
    font-weight: 600;  
    color: var(--text-white);  
    margin-bottom: var(--space-1);  
}  
  
.comment-date {  
    font-size: var(--font-size-sm);  
    color: var(--text-muted);  
    margin-bottom: var(--space-2);  
}  
  
.comment-text {  
    color: var(--text-light);  
}  
  
/* Comment form */  
.comment-form {  
    margin-top: var(--space-8);  
}  
  
.form-title {  
    font-size: var(--font-size-xl);  
    font-weight: 600;  
    margin-bottom: var(--space-4);  
    color: var(--text-white);  
}  
  
.form-group {  
    margin-bottom: var(--space-4);  
}  
  
.form-label {  
    display: block;  
    margin-bottom: var(--space-2);  
    color: var(--text-white);  
    font-weight: 500;  
}  
  
.form-input, .form-textarea {  
    width: 100%;  
    padding: var(--space-3) var(--space-4);  
    background: var(--bg-input);  
    border: 1px solid rgba(255, 255, 255, 0.2);  
    border-radius: var(--radius-lg);  
    color: var(--text-white);  
    font-size: var(--font-size-base);  
    font-family: var(--font-family);  
}  
  
.form-textarea {  
    min-height: 150px;  
    resize: vertical;  
}  
  
.form-submit {  
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));  
    color: white;  
    border: none;  
    border-radius: var(--radius-lg);  
    padding: var(--space-3) var(--space-6);  
    font-size: var(--font-size-base);  
    font-weight: 600;  
    cursor: pointer;  
    transition: all var(--transition-bounce);  
}  
  
.form-submit:hover {  
    transform: translateY(-2px);  
    box-shadow: var(--shadow-glow);  
}  
  
/* Related posts */  
.related-posts {  
    margin-bottom: var(--space-12);  
}  
  
.section-title {  
    font-size: var(--font-size-2xl);  
    font-weight: 700;  
    margin-bottom: var(--space-6);  
    color: var(--text-white);  
    position: relative;  
    display: inline-block;  
}  
  
.section-title::after {  
    content: '';  
    position: absolute;  
    bottom: -8px;  
    left: 0;  
    width: 60px;  
    height: 3px;  
    background: var(--primary-light);  
    border-radius: 3px;  
}  
  
.related-grid {  
    display: grid;  
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));  
    gap: var(--space-6);  
}  
  
.related-card {  
    background: var(--bg-glass);  
    backdrop-filter: blur(10px);  
    -webkit-backdrop-filter: blur(10px);  
    border: 1px solid rgba(255, 255, 255, 0.2);  
    border-radius: var(--radius-xl);  
    overflow: hidden;  
    transition: all var(--transition-normal);  
    height: 100%;  
    display: flex;  
    flex-direction: column;  
}  
  
.related-card:hover {  
    transform: translateY(-5px);  
    box-shadow: var(--shadow-lg);  
    border-color: rgba(255, 255, 255, 0.3);  
}  
  
.related-image {  
    width: 100%;  
    height: 200px;  
    object-fit: cover;  
}  
  
.related-content {  
    padding: var(--space-5);  
    display: flex;  
    flex-direction: column;  
    flex: 1;  
}  
  
.related-category {  
    display: inline-block;  
    background: var(--primary-color);  
    color: white;  
    font-size: var(--font-size-sm);  
    padding: var(--space-1) var(--space-3);  
    border-radius: var(--radius-md);  
    margin-bottom: var(--space-3);  
    align-self: flex-start;  
}  
  
.related-card-title {  
    font-size: var(--font-size-xl);  
    font-weight: 600;  
    margin-bottom: var(--space-3);  
    color: var(--text-white);  
}  
  
.related-excerpt {  
    color: var(--text-light);  
    margin-bottom: var(--space-4);  
    flex: 1;  
}  
  
.related-meta {  
    display: flex;  
    justify-content: space-between;  
    align-items: center;  
    color: var(--text-muted);  
    font-size: var(--font-size-sm);  
    margin-top: auto;  
}  
  
.related-author {  
    display: flex;  
    align-items: center;  
    gap: var(--space-2);  
}  
  
/* Sidebar sections */  
.sidebar-section {  
    background: var(--bg-glass);  
    backdrop-filter: blur(10px);  
    -webkit-backdrop-filter: blur(10px);  
    border: 1px solid rgba(255, 255, 255, 0.2);  
    border-radius: var(--radius-2xl);  
    padding: var(--space-6);  
    margin-bottom: var(--space-6);  
    box-shadow: var(--shadow-colored);  
}  
  
.sidebar-title {  
    font-size: var(--font-size-xl);  
    font-weight: 600;  
    margin-bottom: var(--space-4);  
    color: var(--text-white);  
}  
  
.sidebar-text {  
    color: var(--text-light);  
    margin-bottom: var(--space-4);  
}  
  
.sidebar-input {  
    width: 100%;  
    padding: var(--space-3) var(--space-4);  
    background: var(--bg-input);  
    border: 1px solid rgba(255, 255, 255, 0.2);  
    border-radius: var(--radius-lg);  
    color: var(--text-white);  
    font-size: var(--font-size-base);  
    margin-bottom: var(--space-3);  
}  
  
.sidebar-button {  
    width: 100%;  
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));  
    color: white;  
    border: none;  
    border-radius: var(--radius-lg);  
    padding: var(--space-3) var(--space-4);  
    font-size: var(--font-size-base);  
    font-weight: 600;  
    cursor: pointer;  
    transition: all var(--transition-bounce);  
}  
  
.sidebar-button:hover {  
    transform: translateY(-2px);  
    box-shadow: var(--shadow-glow);  
}  
  
/* Table of contents */  
.table-of-contents {  
    background: var(--bg-glass);  
    backdrop-filter: blur(10px);  
    -webkit-backdrop-filter: blur(10px);  
    border: 1px solid rgba(255, 255, 255, 0.2);  
    border-radius: var(--radius-2xl);  
    padding: var(--space-6);  
    margin-bottom: var(--space-6);  
    box-shadow: var(--shadow-colored);  
    position: sticky;  
    top: calc(var(--space-8) + 60px);  
}  
  
.toc-title {  
    font-size: var(--font-size-xl);  
    font-weight: 600;  
    margin-bottom: var(--space-4);  
    color: var(--text-white);  
    display: flex;  
    align-items: center;  
    gap: var(--space-2);  
}  
  
.toc-list {  
    list-style: none;  
}  
  
.toc-item {  
    margin-bottom: var(--space-2);  
}  
  
.toc-link {  
    color: var(--text-light);  
    text-decoration: none;  
    transition: all var(--transition-fast);  
    display: block;  
    padding: var(--space-1) 0;  
}  
  
.toc-link:hover {  
    color: var(--text-white);  
    transform: translateX(var(--space-1));  
}  
  
.toc-link.active {  
    color: var(--primary-light);  
    font-weight: 500;  
}  
  
.toc-link.level-2 {  
    padding-left: var(--space-4);  
    font-size: var(--font-size-sm);  
}  
  
/* Author widget */  
.author-widget {  
    text-align: center;  
}  
  
.author-widget-image {  
    width: 100px;  
    height: 100px;  
    border-radius: 50%;  
    object-fit: cover;  
    margin: 0 auto var(--space-4);  
    border: 3px solid rgba(255, 255, 255, 0.2);  
}  
  
.author-widget-name {  
    font-size: var(--font-size-xl);  
    font-weight: 600;  
    margin-bottom: var(--space-2);  
    color: var(--text-white);  
}  
  
.author-widget-bio {  
    color: var(--text-light);  
    margin-bottom: var(--space-4);  
}  
  
.author-widget-stats {  
    display: flex;  
    justify-content: center;  
    gap: var(--space-6);  
    margin-bottom: var(--space-4);  
}  
  
.stat {  
    text-align: center;  
}  
  
.stat-number {  
    display: block;  
    font-size: var(--font-size-xl);  
    font-weight: 700;  
    color: var(--text-white);  
}  
  
.stat-label {  
    font-size: var(--font-size-sm);  
    color: var(--text-muted);  
}  
  
.author-widget-button {  
    display: inline-block;  
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));  
    color: white;  
    border: none;  
    border-radius: var(--radius-lg);  
    padding: var(--space-2) var(--space-6);  
    font-size: var(--font-size-base);  
    font-weight: 600;  
    cursor: pointer;  
    transition: all var(--transition-bounce);  
    text-decoration: none;  
}  
  
.author-widget-button:hover {  
    transform: translateY(-2px);  
    box-shadow: var(--shadow-glow);  
}  
  
/* Popular posts */  
.popular-posts {  
    display: flex;  
    flex-direction: column;  
    gap: var(--space-4);  
}  
  
.popular-post {  
    display: flex;  
    gap: var(--space-3);  
    text-decoration: none;  
    transition: all var(--transition-normal);  
}  
  
.popular-post:hover {  
    transform: translateY(-2px);  
}  
  
.popular-post-image {  
    width: 60px;  
    height: 60px;  
    border-radius: var(--radius-md);  
    object-fit: cover;  
}  
  
.popular-post-content {  
    flex: 1;  
}  
  
.popular-post-title {  
    font-size: var(--font-size-base);  
    font-weight: 500;  
    color: var(--text-white);  
    margin-bottom: var(--space-1);  
    line-height: 1.4;  
}  
  
.popular-post-date {  
    font-size: var(--font-size-sm);  
    color: var(--text-muted);  
}  
  
/* Footer */  
.footer {  
    background: var(--bg-glass);  
    backdrop-filter: blur(20px);  
    -webkit-backdrop-filter: blur(20px);  
    border-top: 1px solid rgba(255, 255, 255, 0.2);  
    padding: var(--space-12) 0 var(--space-6);  
    margin-top: var(--space-16);  
}  
  
.footer-grid {  
    display: grid;  
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));  
    gap: var(--space-8);  
    margin-bottom: var(--space-8);  
}  
  
.footer-column h3 {  
    font-size: var(--font-size-xl);  
    font-weight: 600;  
    margin-bottom: var(--space-4);  
    color: var(--text-white);  
}  
  
.footer-description {  
    color: var(--text-light);  
    margin-bottom: var(--space-4);  
}  
  
.social-links {  
    display: flex;  
    gap: var(--space-3);  
}  
  
.social-link {  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    width: 36px;  
    height: 36px;  
    background: var(--bg-glass);  
    border-radius: 50%;  
    color: var(--text-white);  
    text-decoration: none;  
    transition: all var(--transition-normal);  
}  
  
.social-link:hover {  
    background: var(--primary-color);  
    transform: translateY(-3px);  
    box-shadow: var(--shadow-md);  
}  
  
.footer-links {  
    list-style: none;  
}  
  
.footer-link {  
    margin-bottom: var(--space-2);  
}  
  
.footer-link a {  
    color: var(--text-light);  
    text-decoration: none;  
    transition: all var(--transition-fast);  
}  
  
.footer-link a:hover {  
    color: var(--text-white);  
}  
  
.footer-bottom {  
    display: flex;  
    justify-content: space-between;  
    align-items: center;  
    padding-top: var(--space-6);  
    border-top: 1px solid rgba(255, 255, 255, 0.1);  
    color: var(--text-muted);  
    font-size: var(--font-size-sm);  
    flex-wrap: wrap;  
    gap: var(--space-4);  
}  
  
.footer-links-bottom {  
    display: flex;  
    gap: var(--space-4);  
}  
  
.footer-links-bottom a {  
    color: var(--text-muted);  
    text-decoration: none;  
    transition: all var(--transition-fast);  
}  
  
.footer-links-bottom a:hover {  
    color: var(--text-white);  
}  
  
/* Back to top button */  
.back-to-top {  
    position: fixed;  
    bottom: 30px;  
    right: 30px;  
    width: 50px;  
    height: 50px;  
    background: var(--bg-glass);  
    backdrop-filter: blur(10px);  
    -webkit-backdrop-filter: blur(10px);  
    border: 1px solid rgba(255, 255, 255, 0.2);  
    border-radius: 50%;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    color: var(--text-white);  
    font-size: var(--font-size-xl);  
    cursor: pointer;  
    transition: all var(--transition-bounce);  
    opacity: 0;  
    visibility: hidden;  
    z-index: 99;  
    box-shadow: var(--shadow-colored);  
}  
  
.back-to-top.visible {  
    opacity: 1;  
    visibility: visible;  
}  
  
.back-to-top:hover {  
    transform: translateY(-5px);  
    box-shadow: var(--shadow-glow);  
}  
  
/* Dark mode toggle */  
.dark-mode-toggle {  
    position: fixed;  
    bottom: 30px;  
    left: 30px;  
    width: 50px;  
    height: 50px;  
    background: var(--bg-glass);  
    backdrop-filter: blur(10px);  
    -webkit-backdrop-filter: blur(10px);  
    border: 1px solid rgba(255, 255, 255, 0.2);  
    border-radius: 50%;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    color: var(--text-white);  
    font-size: var(--font-size-xl);  
    cursor: pointer;  
    transition: all var(--transition-bounce);  
    z-index: 99;  
    box-shadow: var(--shadow-colored);  
}  
  
.dark-mode-toggle:hover {  
    transform: translateY(-5px);  
    box-shadow: var(--shadow-glow);  
}  
  
/* Dark mode styles */  
body.dark-mode {  
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);  
}  
  
body.dark-mode .blog-post,  
body.dark-mode .comments-section,  
body.dark-mode .sidebar-section,  
body.dark-mode .table-of-contents,  
body.dark-mode .header,  
body.dark-mode .footer,  
body.dark-mode .back-to-top,  
body.dark-mode .dark-mode-toggle {  
    background: var(--dark-surface);  
    border-color: var(--dark-border);  
}  
  
body.dark-mode .post-tag,  
body.dark-mode .post-share,  
body.dark-mode .author-section,  
body.dark-mode .info-box,  
body.dark-mode .post-content blockquote,  
body.dark-mode .form-input,  
body.dark-mode .form-textarea,  
body.dark-mode .sidebar-input {  
    background: var(--dark-hover);  
}  
  
/* Responsive styles */  
@media (max-width: 1024px) {  
    .blog-layout {  
        grid-template-columns: 1fr;  
    }  
      
    .blog-sidebar {  
        order: -1;  
    }  
      
    .table-of-contents {  
        position: static;  
    }  
}  
  
@media (max-width: 768px) {  
    .post-title {  
        font-size: var(--font-size-3xl);  
    }  
      
    .post-featured-image {  
        height: 300px;  
    }  
      
    .post-meta {  
        flex-direction: column;  
        align-items: flex-start;  
        gap: var(--space-2);  
    }  
      
    .footer-grid {  
        grid-template-columns: 1fr;  
    }  
      
    .footer-bottom {  
        flex-direction: column;  
        align-items: center;  
        text-align: center;  
    }  
}  
  
@media (max-width: 640px) {  
    .nav-menu {  
        display: none;  
        position: absolute;  
        top: 100%;  
        left: 0;  
        width: 100%;  
        background: var(--bg-glass);  
        backdrop-filter: blur(20px);  
        -webkit-backdrop-filter: blur(20px);  
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);  
        padding: var(--space-4);  
        flex-direction: column;  
        gap: var(--space-4);  
    }  
      
    .nav-menu.active {  
        display: flex;  
    }  
      
    .mobile-menu-button {  
        display: block;  
    }  
      
    .post-title {  
        font-size: var(--font-size-2xl);  
    }  
      
    .post-featured-image {  
        height: 200px;  
    }  
      
    .author-section {  
        flex-direction: column;  
        align-items: center;  
        text-align: center;  
    }  
      
    .author-info {  
        width: 100%;  
    }  
      
    .author-social {  
        justify-content: center;  
    }  
      
    .comment {  
        flex-direction: column;  
        align-items: center;  
        text-align: center;  
    }  
      
    .comment-content {  
        width: 100%;  
    }  
}