:root {
    --color-bg-primary:    #000000;
    --color-bg-secondary:  #0a0a0a;
    --color-bg-card:       #0d0d0d;
    --color-text-primary:  #ffffff;
    --color-text-secondary:#a1a1aa;
    --color-text-muted:    #71717a;
    --color-accent:        #00d4ff;
    --color-accent-dark:   #0099cc;
    --color-accent-hover:  #33ddff;
    --color-border:        #1f1f23;
    --color-success:       #10b981;
    --color-warning:       #f59e0b;
    --color-error:         #ef4444;
    --color-purple:        #8b5cf6;
    --color-pink:          #ec4899;
    --color-gold:          #ffd700;
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --shadow-sm:        0 1px 2px rgba(0,0,0,.4);
    --shadow-md:        0 4px 8px rgba(0,0,0,.5);
    --shadow-lg:        0 10px 25px rgba(0,0,0,.6);
    --shadow-xl:        0 24px 64px rgba(0,0,0,.8);
    --shadow-glow-cyan: 0 0 48px rgba(0,212,255,.25);
    --radius-sm:  8px;
    --radius-md:  12px;
    --radius-lg:  16px;
    --radius-xl:  20px;
    --radius-2xl: 28px;
    --transition-fast:   150ms ease;
    --transition-normal: 250ms cubic-bezier(.4,0,.2,1);
    --gradient-primary: linear-gradient(135deg,#00d4ff 0%,#0099cc 100%);
    --gradient-mesh:
        radial-gradient(at 40% 20%, rgba(0,212,255,.12) 0%, transparent 50%),
        radial-gradient(at 80% 0%,  rgba(139,92,246,.10) 0%, transparent 50%),
        radial-gradient(at 0%  50%, rgba(255,51,102,.08)  0%, transparent 50%);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family:    var(--font-primary);
    background:     var(--gradient-mesh), var(--color-bg-primary);
    color:          var(--color-text-primary);
    line-height:    1.6;
    min-height:     100vh;
    display:        flex;
    flex-direction: column;
    overflow-x:     hidden;
}

img { max-width: 100%; display: block; }
a   { color: inherit; }

.container {
    max-width: 1400px;
    margin:    0 auto;
    padding:   0 20px;
}

.blog-header {
    position:        sticky;
    top:             0;
    z-index:         1000;
    background:      rgba(10,10,10,.95);
    backdrop-filter: blur(20px);
    border-bottom:   1px solid var(--color-border);
    padding:         12px 0;
}

.header-container {
    max-width:       1400px;
    margin:          0 auto;
    padding:         0 20px;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             16px;
}

.header-left {
    display:     flex;
    align-items: center;
    gap:         32px;
    flex:        1;
    min-width:   0;
}

.header-right {
    display:     flex;
    align-items: center;
    gap:         12px;
    flex-shrink: 0;
}

.logo {
    display:         flex;
    align-items:     center;
    gap:             10px;
    text-decoration: none;
    transition:      all var(--transition-normal);
    flex-shrink:     0;
}
.logo:hover { transform: translateY(-2px); }

.logo-icon {
    width:         36px;
    height:        36px;
    border-radius: 50%;
    object-fit:    cover;
}

.logo-text { display: flex; flex-direction: column; gap: 2px; }

.logo-title {
    font-size:   1rem;
    font-weight: 700;
    color:       var(--color-text-primary);
    line-height: 1;
    white-space: nowrap;
}

.logo-subtitle {
    font-size:   .6875rem;
    color:       var(--color-text-muted);
    line-height: 1;
    white-space: nowrap;
}

.main-nav { display: flex; gap: 4px; }

.main-nav a {
    display:         flex;
    align-items:     center;
    gap:             6px;
    padding:         8px 12px;
    border-radius:   var(--radius-md);
    color:           var(--color-text-secondary);
    text-decoration: none;
    font-size:       .875rem;
    font-weight:     500;
    transition:      all var(--transition-normal);
    white-space:     nowrap;
}

.main-nav a:hover,
.main-nav a.active {
    color:      var(--color-text-primary);
    background: rgba(0,212,255,.1);
}

.search-box {
    position:    relative;
    display:     flex;
    align-items: center;
}

.search-box > i {
    position:        absolute;
    left:            12px;
    color:           var(--color-text-muted);
    pointer-events:  none;
    font-size:       .875rem;
    z-index:         1;
}

.search-box input {
    width:         200px;
    padding:       8px 12px 8px 34px;
    background:    rgba(255,255,255,.04);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
    color:         var(--color-text-primary);
    font-size:     .875rem;
    font-family:   var(--font-primary);
    transition:    all var(--transition-normal);
}

.search-box input:focus {
    outline:      none;
    border-color: var(--color-accent);
    background:   rgba(255,255,255,.06);
    width:        260px;
}

.search-dropdown {
    position:        absolute;
    top:             calc(100% + 8px);
    left:            0;
    right:           0;
    background:      rgba(10,10,10,.98);
    backdrop-filter: blur(20px);
    border:          1px solid var(--color-border);
    border-radius:   var(--radius-lg);
    box-shadow:      var(--shadow-xl);
    z-index:         2000;
    overflow:        hidden;
    display:         none;
}

.search-dropdown.active { display: block; }

.search-result-item {
    display:         flex;
    align-items:     center;
    gap:             12px;
    padding:         12px 16px;
    text-decoration: none;
    color:           var(--color-text-primary);
    transition:      all var(--transition-fast);
    border-bottom:   1px solid var(--color-border);
}

.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: rgba(0,212,255,.08); }

.search-result-thumb {
    width:           44px;
    height:          36px;
    border-radius:   var(--radius-sm);
    object-fit:      cover;
    flex-shrink:     0;
    background:      rgba(0,212,255,.08);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--color-text-muted);
    font-size:       .75rem;
    overflow:        hidden;
}

.search-result-info { flex: 1; min-width: 0; }

.search-result-title {
    font-size:     .875rem;
    font-weight:   600;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.search-result-meta {
    font-size:  .75rem;
    color:      var(--color-text-muted);
    margin-top: 2px;
}

.search-no-results {
    padding:    16px;
    text-align: center;
    color:      var(--color-text-muted);
    font-size:  .875rem;
}

.mobile-menu-toggle {
    display:         none;
    width:           36px;
    height:          36px;
    background:      rgba(255,255,255,.04);
    border:          1px solid var(--color-border);
    border-radius:   var(--radius-md);
    color:           var(--color-text-primary);
    cursor:          pointer;
    transition:      all var(--transition-normal);
    flex-shrink:     0;
    align-items:     center;
    justify-content: center;
}

.mobile-menu-toggle:hover {
    background:   rgba(255,255,255,.08);
    border-color: var(--color-accent);
}

.mobile-menu {
    position:        fixed;
    top:             0;
    right:           -100%;
    width:           100%;
    max-width:       320px;
    height:          100vh;
    background:      rgba(10,10,10,.98);
    backdrop-filter: blur(20px);
    border-left:     1px solid var(--color-border);
    z-index:         2000;
    transition:      right var(--transition-normal);
    overflow-y:      auto;
}

.mobile-menu.active { right: 0; }

.mobile-menu-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         20px;
    border-bottom:   1px solid var(--color-border);
}

.mobile-menu-header span { font-weight: 700; font-size: 1.125rem; }

.mobile-menu-close {
    width:           36px;
    height:          36px;
    background:      rgba(255,255,255,.04);
    border:          1px solid var(--color-border);
    border-radius:   var(--radius-md);
    color:           var(--color-text-primary);
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      all var(--transition-normal);
}

.mobile-menu-close:hover {
    background:   rgba(255,255,255,.08);
    border-color: var(--color-accent);
}

.mobile-nav {
    display:        flex;
    flex-direction: column;
    padding:        20px;
}

.mobile-nav a {
    display:         flex;
    align-items:     center;
    gap:             12px;
    padding:         12px 16px;
    border-radius:   var(--radius-md);
    color:           var(--color-text-secondary);
    text-decoration: none;
    font-size:       1rem;
    font-weight:     500;
    transition:      all var(--transition-normal);
    margin-bottom:   8px;
}

.mobile-nav a:hover {
    color:      var(--color-text-primary);
    background: rgba(0,212,255,.1);
}

.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    padding:         8px 16px;
    border:          none;
    border-radius:   var(--radius-md);
    font-size:       .875rem;
    font-weight:     600;
    font-family:     var(--font-primary);
    text-decoration: none;
    cursor:          pointer;
    transition:      all var(--transition-normal);
    white-space:     nowrap;
}

.btn-small { padding: 6px 12px; font-size: .8125rem; }
.btn-large { padding: 14px 28px; font-size: 1rem; }
.btn-full  { width: 100%; }

.btn-primary {
    background: var(--gradient-primary);
    color:      #000;
    box-shadow: 0 4px 16px rgba(0,212,255,.3);
}
.btn-primary:hover {
    transform:  translateY(-2px);
    box-shadow: var(--shadow-glow-cyan);
}

.btn-secondary {
    background: rgba(255,255,255,.04);
    border:     1px solid var(--color-border);
    color:      var(--color-text-primary);
}
.btn-secondary:hover {
    background:   rgba(255,255,255,.08);
    border-color: var(--color-accent);
    transform:    translateY(-2px);
}

.badge {
    display:        inline-flex;
    align-items:    center;
    gap:            5px;
    padding:        4px 10px;
    border-radius:  999px;
    font-size:      .75rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-decoration:none;
}

.badge-success { background:rgba(16,185,129,.15);  color:var(--color-success); border:1px solid rgba(16,185,129,.3); }
.badge-purple  { background:rgba(139,92,246,.15);  color:var(--color-purple);  border:1px solid rgba(139,92,246,.3); }
.badge-cyan    { background:rgba(0,212,255,.15);   color:var(--color-accent);  border:1px solid rgba(0,212,255,.3);  }
.badge-pink    { background:rgba(236,72,153,.15);  color:var(--color-pink);    border:1px solid rgba(236,72,153,.3); }
.badge-gold    { background:rgba(255,215,0,.15);   color:var(--color-gold);    border:1px solid rgba(255,215,0,.3);  }
.badge-warning { background:rgba(245,158,11,.15);  color:var(--color-warning); border:1px solid rgba(245,158,11,.3); }

.hero-section {
    padding:    80px 0 60px;
    position:   relative;
    overflow:   hidden;
    text-align: center;
}

.hero-section::before {
    content:        '';
    position:       absolute;
    top:            0;
    left:           50%;
    transform:      translateX(-50%);
    width:          1200px;
    height:         800px;
    background:     radial-gradient(circle, rgba(0,212,255,.12) 0%, transparent 70%);
    pointer-events: none;
    animation:      heroPulse 8s ease-in-out infinite;
}

@keyframes heroPulse {
    0%,100% { opacity:.5; transform:translateX(-50%) scale(1); }
    50%     { opacity:.8; transform:translateX(-50%) scale(1.1); }
}

.hero-container { max-width:900px; margin:0 auto; padding:0 20px; position:relative; z-index:1; }

.hero-content .badge { margin-bottom: 20px; }

.hero-content h1 {
    font-size:              3.5rem;
    font-weight:            900;
    margin-bottom:          20px;
    letter-spacing:         -.04em;
    line-height:            1.1;
    background:             var(--gradient-primary);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:        text;
}

.hero-content p {
    font-size:   1.25rem;
    color:       var(--color-text-secondary);
    max-width:   600px;
    margin:      0 auto;
    line-height: 1.7;
}

.page-banner {
    padding:  48px 0 32px;
    position: relative;
    overflow: hidden;
}

.page-banner::before {
    content:        '';
    position:       absolute;
    top:0; left:0; right:0; bottom:0;
    background:     radial-gradient(at 50% 0%, rgba(0,212,255,.07) 0%, transparent 60%);
    pointer-events: none;
}

.page-banner__content { position:relative; z-index:1; }

.page-banner__content h1 {
    font-size:      2rem;
    font-weight:    900;
    margin-bottom:  8px;
    letter-spacing: -.03em;
    display:        flex;
    align-items:    center;
    gap:            10px;
}

.page-banner__content h1 i { color: var(--color-accent); }

.page-banner__content p {
    color:     var(--color-text-secondary);
    font-size: .9375rem;
}

.content-section { padding: 48px 0 80px; }

.content-wrapper {
    display:               grid;
    grid-template-columns: 1fr 320px;
    gap:                   40px;
    align-items:           start;
}

.section-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   32px;
}

.section-header h2 {
    font-size:      1.75rem;
    font-weight:    900;
    letter-spacing: -.03em;
    display:        flex;
    align-items:    center;
    gap:            10px;
}

.section-header h2 i { color: var(--color-accent); }

.link-arrow {
    display:         flex;
    align-items:     center;
    gap:             8px;
    color:           var(--color-accent);
    text-decoration: none;
    font-weight:     600;
    font-size:       .9375rem;
    transition:      all var(--transition-normal);
}

.link-arrow:hover {
    gap:   12px;
    color: var(--color-accent-hover);
}

.featured-section { padding: 64px 0 0; }

.featured-grid {
    display:               grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows:    auto auto;
    gap:                   24px;
}

.featured-card {
    background:      rgba(13,13,13,.6);
    border:          1px solid var(--color-border);
    border-radius:   var(--radius-xl);
    overflow:        hidden;
    backdrop-filter: blur(12px);
    transition:      all var(--transition-normal);
    display:         flex;
    flex-direction:  column;
}

.featured-card:hover {
    border-color: var(--color-accent);
    box-shadow:   var(--shadow-glow-cyan);
    transform:    translateY(-4px);
}

.featured-card--large { grid-row: 1 / 3; }

.featured-card__image {
    display:       block;
    position:      relative;
    overflow:      hidden;
    aspect-ratio:  16/9;
    background:    rgba(0,212,255,.04);
}

.featured-card--large .featured-card__image { aspect-ratio: 16/10; }

.featured-card__image img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.featured-card:hover .featured-card__image img { transform: scale(1.05); }

.featured-card__image--placeholder {
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--color-text-muted);
    font-size:       2.5rem;
}

.featured-card__body {
    padding:        24px;
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            12px;
}

.featured-card__body h3 {
    font-size:   1.25rem;
    font-weight: 700;
    line-height: 1.3;
}

.featured-card--large .featured-card__body h3 { font-size: 1.625rem; }

.featured-card__body h3 a {
    text-decoration: none;
    color:           var(--color-text-primary);
    transition:      color var(--transition-fast);
}

.featured-card__body h3 a:hover { color: var(--color-accent); }

.featured-card__body p {
    color:       var(--color-text-secondary);
    font-size:   .9375rem;
    line-height: 1.6;
    flex:        1;
}

.posts-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap:                   24px;
}

.posts-grid--3 { grid-template-columns: repeat(3, 1fr); }

.post-card {
    background:      rgba(13,13,13,.6);
    border:          1px solid var(--color-border);
    border-radius:   var(--radius-xl);
    overflow:        hidden;
    backdrop-filter: blur(12px);
    transition:      all var(--transition-normal);
    display:         flex;
    flex-direction:  column;
}

.post-card:hover {
    transform:    translateY(-6px);
    border-color: var(--color-accent);
    box-shadow:   var(--shadow-glow-cyan);
}

.post-card__image-link {
    display:       block;
    position:      relative;
    overflow:      hidden;
    aspect-ratio:  16/9;
    background:    rgba(0,212,255,.04);
}

.post-card__image {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.post-card:hover .post-card__image { transform: scale(1.05); }

.post-card__image--placeholder {
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--color-text-muted);
    font-size:       2rem;
    width:  100%;
    height: 100%;
}

.post-card__category {
    position: absolute;
    top:      10px;
    left:     10px;
}

.post-card__body {
    padding:        20px;
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            10px;
}

.post-card__title {
    font-size:   1.0625rem;
    font-weight: 700;
    line-height: 1.35;
}

.post-card__title a {
    text-decoration: none;
    color:           var(--color-text-primary);
    transition:      color var(--transition-fast);
}

.post-card__title a:hover { color: var(--color-accent); }

.post-card__excerpt {
    color:       var(--color-text-secondary);
    font-size:   .875rem;
    line-height: 1.6;
    flex:        1;
}

.post-card__read-more {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    color:           var(--color-accent);
    text-decoration: none;
    font-size:       .875rem;
    font-weight:     600;
    transition:      all var(--transition-normal);
    margin-top:      auto;
}

.post-card__read-more:hover { gap:10px; color:var(--color-accent-hover); }

.post-meta {
    display:   flex;
    flex-wrap: wrap;
    gap:       12px;
    font-size: .8125rem;
    color:     var(--color-text-muted);
}

.post-meta span {
    display:     flex;
    align-items: center;
    gap:         4px;
}

.post-meta i { color:var(--color-accent); font-size:.75rem; }

.results-info {
    font-size:     .875rem;
    color:         var(--color-text-muted);
    margin-bottom: 20px;
}

.category-pills {
    display:       flex;
    flex-wrap:     wrap;
    gap:           8px;
    margin-bottom: 24px;
}

.category-pill {
    padding:         6px 16px;
    background:      rgba(255,255,255,.04);
    border:          1px solid var(--color-border);
    border-radius:   999px;
    color:           var(--color-text-secondary);
    text-decoration: none;
    font-size:       .8125rem;
    font-weight:     600;
    transition:      all var(--transition-normal);
    display:         flex;
    align-items:     center;
    gap:             6px;
}

.category-pill span {
    font-size:     .75rem;
    color:         var(--color-text-muted);
    background:    rgba(255,255,255,.06);
    padding:       1px 7px;
    border-radius: 999px;
}

.category-pill:hover,
.category-pill.active {
    background:   rgba(0,212,255,.1);
    border-color: var(--color-accent);
    color:        var(--color-text-primary);
}

.blog-search-form {
    display:       flex;
    gap:           12px;
    margin-bottom: 32px;
}

.blog-search-input {
    position: relative;
    flex:     1;
}

.blog-search-input i {
    position:        absolute;
    left:            14px;
    top:             50%;
    transform:       translateY(-50%);
    color:           var(--color-text-muted);
    pointer-events:  none;
}

.blog-search-input input {
    width:         100%;
    padding:       11px 40px 11px 38px;
    background:    rgba(255,255,255,.04);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
    color:         var(--color-text-primary);
    font-size:     .9375rem;
    font-family:   var(--font-primary);
    transition:    all var(--transition-normal);
}

.blog-search-input input:focus {
    outline:      none;
    border-color: var(--color-accent);
    background:   rgba(255,255,255,.06);
}

.search-clear {
    position:  absolute;
    right:     12px;
    top:       50%;
    transform: translateY(-50%);
    color:     var(--color-text-muted);
    font-size: .875rem;
    transition:color var(--transition-fast);
}
.search-clear:hover { color: var(--color-error); }

.pagination {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    margin-top:      48px;
}

.pagination-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           40px;
    height:          40px;
    border-radius:   var(--radius-md);
    background:      rgba(255,255,255,.04);
    border:          1px solid var(--color-border);
    color:           var(--color-text-secondary);
    text-decoration: none;
    font-size:       .875rem;
    font-weight:     600;
    transition:      all var(--transition-normal);
}

.pagination-btn:hover {
    background:   rgba(0,212,255,.1);
    border-color: var(--color-accent);
    color:        var(--color-text-primary);
}

.pagination-btn.active {
    background:   var(--gradient-primary);
    border-color: transparent;
    color:        #000;
    box-shadow:   0 4px 16px rgba(0,212,255,.3);
}

.blog-sidebar {
    position:       sticky;
    top:            80px;
    height:         fit-content;
    display:        flex;
    flex-direction: column;
    gap:            24px;
}

.sidebar-widget {
    background:      rgba(13,13,13,.6);
    border:          1px solid var(--color-border);
    border-radius:   var(--radius-xl);
    padding:         24px;
    backdrop-filter: blur(12px);
}

.sidebar-widget__title {
    font-size:      .8125rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color:          var(--color-text-primary);
    margin-bottom:  16px;
    display:        flex;
    align-items:    center;
    gap:            8px;
}

.sidebar-widget__title i { color: var(--color-accent); }

.sidebar-search {
    display: flex;
    gap:     8px;
}

.sidebar-search input {
    flex:          1;
    padding:       9px 12px;
    background:    rgba(255,255,255,.04);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
    color:         var(--color-text-primary);
    font-size:     .875rem;
    font-family:   var(--font-primary);
    transition:    all var(--transition-normal);
}

.sidebar-search input:focus {
    outline:      none;
    border-color: var(--color-accent);
}

.sidebar-search button {
    width:         36px;
    height:        36px;
    background:    var(--gradient-primary);
    border:        none;
    border-radius: var(--radius-md);
    color:         #000;
    cursor:        pointer;
    font-size:     .875rem;
    transition:    all var(--transition-normal);
    flex-shrink:   0;
}

.sidebar-search button:hover {
    transform:  translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,212,255,.3);
}

.sidebar-categories {
    list-style: none;
    display:    flex;
    flex-direction: column;
    gap:        4px;
}

.sidebar-categories a {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         9px 12px;
    border-radius:   var(--radius-md);
    color:           var(--color-text-secondary);
    text-decoration: none;
    font-size:       .875rem;
    font-weight:     500;
    transition:      all var(--transition-normal);
}

.sidebar-categories a:hover,
.sidebar-categories a.active {
    background: rgba(0,212,255,.1);
    color:      var(--color-text-primary);
}

.sidebar-categories .count {
    font-size:     .75rem;
    color:         var(--color-text-muted);
    background:    rgba(255,255,255,.06);
    padding:       2px 8px;
    border-radius: 999px;
}

.sidebar-recent {
    list-style: none;
    display:    flex;
    flex-direction: column;
    gap:        12px;
}

.sidebar-recent__item {
    display:         flex;
    align-items:     center;
    gap:             12px;
    text-decoration: none;
    transition:      all var(--transition-normal);
    color:           var(--color-text-primary);
}

.sidebar-recent__item:hover { color: var(--color-accent); }

.sidebar-recent__item img,
.sidebar-recent__placeholder {
    width:         56px;
    height:        44px;
    border-radius: var(--radius-sm);
    object-fit:    cover;
    flex-shrink:   0;
}

.sidebar-recent__placeholder {
    background:      rgba(0,212,255,.08);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--color-text-muted);
    font-size:       1rem;
}

.sidebar-recent__title {
    display:     block;
    font-size:   .875rem;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom:3px;
}

.sidebar-recent__date {
    display:   block;
    font-size: .75rem;
    color:     var(--color-text-muted);
}

.sidebar-cta {
    text-align:   center;
    background:   rgba(0,212,255,.05);
    border-color: rgba(0,212,255,.2);
}

.sidebar-cta i {
    font-size:     2rem;
    color:         var(--color-accent);
    margin-bottom: 12px;
    display:       block;
}

.sidebar-cta h4 { font-size:.9375rem; font-weight:700; margin-bottom:8px; }

.sidebar-cta p {
    font-size:     .8125rem;
    color:         var(--color-text-secondary);
    margin-bottom: 16px;
}

.post-page { padding: 32px 0 80px; }

.post-layout {
    display:               grid;
    grid-template-columns: 1fr 300px;
    gap:                   48px;
    align-items:           start;
}

.breadcrumb {
    display:       flex;
    flex-wrap:     wrap;
    align-items:   center;
    gap:           8px;
    font-size:     .8125rem;
    color:         var(--color-text-muted);
    margin-bottom: 28px;
}

.breadcrumb a { color:var(--color-accent); text-decoration:none; transition:color var(--transition-fast); }
.breadcrumb a:hover { color: var(--color-accent-hover); }
.breadcrumb i { font-size: .625rem; }

.post-header { margin-bottom: 32px; }

.post-header h1 {
    font-size:      2.25rem;
    font-weight:    900;
    margin:         16px 0 14px;
    letter-spacing: -.03em;
    line-height:    1.2;
}

.post-excerpt {
    font-size:     1.125rem;
    color:         var(--color-text-secondary);
    line-height:   1.6;
    margin-bottom: 20px;
}

.post-meta-bar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             16px;
    padding:         16px 0;
    border-top:      1px solid var(--color-border);
    border-bottom:   1px solid var(--color-border);
}

.post-author {
    display:     flex;
    align-items: center;
    gap:         10px;
}

.author-avatar,
.author-avatar-placeholder {
    width:         40px;
    height:        40px;
    border-radius: 50%;
    object-fit:    cover;
    flex-shrink:   0;
}

.author-avatar-placeholder {
    background:      var(--gradient-primary);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1rem;
    font-weight:     700;
    color:           #000;
}

.author-name {
    font-size:   .9375rem;
    font-weight: 700;
    color:       var(--color-text-primary);
}

.post-meta-right {
    display:   flex;
    flex-wrap: wrap;
    gap:       16px;
    font-size: .8125rem;
    color:     var(--color-text-muted);
}

.post-meta-right span {
    display:     flex;
    align-items: center;
    gap:         5px;
}

.post-meta-right i { color: var(--color-accent); }

.post-thumbnail {
    margin-bottom: 32px;
    border-radius: var(--radius-xl);
    overflow:      hidden;
    border:        1px solid var(--color-border);
    aspect-ratio:  16/7;
}

.post-thumbnail img {
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.post-body {
    font-size:   1.0625rem;
    line-height: 1.8;
    color:       var(--color-text-secondary);
    word-break:  break-word;
}

.post-body h1,.post-body h2,.post-body h3,
.post-body h4,.post-body h5,.post-body h6 {
    color:          var(--color-text-primary);
    font-weight:    800;
    margin:         2em 0 .75em;
    letter-spacing: -.02em;
    line-height:    1.25;
}
.post-body h1 { font-size: 2rem; }
.post-body h2 { font-size: 1.625rem; padding-bottom:.5em; border-bottom:1px solid var(--color-border); }
.post-body h3 { font-size: 1.25rem; }
.post-body h4 { font-size: 1.0625rem; }

.post-body p { margin-bottom: 1.5em; }

.post-body a { color:var(--color-accent); text-decoration:underline; text-underline-offset:3px; }
.post-body a:hover { color: var(--color-accent-hover); }

.post-body ul,.post-body ol {
    margin:  0 0 1.5em 1.5em;
    display: flex;
    flex-direction: column;
    gap:     .4em;
}

.post-body li { color: var(--color-text-secondary); }
.post-body li::marker { color: var(--color-accent); }

.post-body blockquote {
    margin:        0 0 1.5em;
    padding:       16px 20px;
    border-left:   4px solid var(--color-accent);
    background:    rgba(0,212,255,.05);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color:         var(--color-text-secondary);
    font-style:    italic;
}

.post-body code {
    background:    rgba(255,255,255,.08);
    padding:       2px 6px;
    border-radius: var(--radius-sm);
    font-family:   'JetBrains Mono', 'Fira Code', monospace;
    font-size:     .875em;
    color:         var(--color-accent);
}

.post-body pre {
    background:    rgba(13,13,13,.8);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding:       20px;
    overflow-x:    auto;
    margin:        0 0 1.5em;
}

.post-body pre code {
    background: none;
    padding:    0;
    color:      inherit;
    font-size:  .9rem;
}

.post-body img {
    max-width:     100%;
    border-radius: var(--radius-lg);
    border:        1px solid var(--color-border);
    margin:        1em 0;
}

.post-body table {
    width:           100%;
    border-collapse: collapse;
    margin:          0 0 1.5em;
    font-size:       .9375rem;
}

.post-body th,.post-body td {
    padding:      10px 14px;
    text-align:   left;
    border-bottom:1px solid var(--color-border);
}

.post-body th {
    background:  rgba(0,212,255,.06);
    color:       var(--color-text-primary);
    font-weight: 700;
}

.post-body td { color: var(--color-text-secondary); }

.post-body hr {
    border:     none;
    border-top: 1px solid var(--color-border);
    margin:     2em 0;
}

.post-tags {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         8px;
    margin-top:  40px;
    padding-top: 24px;
    border-top:  1px solid var(--color-border);
}

.post-tags i { color: var(--color-text-muted); }

.post-tag {
    padding:         5px 12px;
    background:      rgba(255,255,255,.04);
    border:          1px solid var(--color-border);
    border-radius:   999px;
    color:           var(--color-text-secondary);
    text-decoration: none;
    font-size:       .8125rem;
    transition:      all var(--transition-normal);
}

.post-tag:hover {
    background:   rgba(0,212,255,.1);
    border-color: var(--color-accent);
    color:        var(--color-text-primary);
}

.post-share {
    display:     flex;
    align-items: center;
    gap:         12px;
    margin-top:  24px;
    padding-top: 24px;
    border-top:  1px solid var(--color-border);
    font-size:   .875rem;
    color:       var(--color-text-muted);
}

.share-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           36px;
    height:          36px;
    border-radius:   50%;
    border:          1px solid var(--color-border);
    background:      rgba(255,255,255,.04);
    color:           var(--color-text-secondary);
    text-decoration: none;
    font-size:       .9rem;
    cursor:          pointer;
    transition:      all var(--transition-normal);
}

.share-btn:hover { transform: translateY(-2px); }

.share-btn--twitter:hover  { border-color:#1da1f2; color:#1da1f2; background:rgba(29,161,242,.1); }
.share-btn--linkedin:hover { border-color:#0077b5; color:#0077b5; background:rgba(0,119,181,.1); }
.share-btn--copy:hover     { border-color:var(--color-accent); color:var(--color-accent); background:rgba(0,212,255,.1); }

.author-box {
    display:       flex;
    gap:           20px;
    padding:       24px;
    background:    rgba(0,212,255,.04);
    border:        1px solid rgba(0,212,255,.2);
    border-radius: var(--radius-xl);
    margin-top:    40px;
    align-items:   flex-start;
}

.author-box__avatar,
.author-box__avatar--placeholder {
    width:         64px;
    height:        64px;
    border-radius: 50%;
    object-fit:    cover;
    flex-shrink:   0;
}

.author-box__avatar--placeholder {
    background:      var(--gradient-primary);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.5rem;
    font-weight:     700;
    color:           #000;
}

.author-box__info h4 {
    font-size:     1rem;
    font-weight:   700;
    margin-bottom: 6px;
}

.author-box__info p {
    font-size:     .875rem;
    color:         var(--color-text-secondary);
    margin-bottom: 14px;
}

.related-section {
    margin-top:  64px;
    padding-top: 48px;
    border-top:  1px solid var(--color-border);
}

.empty-state {
    text-align:  center;
    padding:     60px 20px;
    grid-column: 1/-1;
}

.empty-state i {
    font-size:     3rem;
    color:         var(--color-text-muted);
    margin-bottom: 20px;
    display:       block;
}

.empty-state h3 { font-size:1.25rem; font-weight:700; margin-bottom:10px; }
.empty-state p  { color:var(--color-text-secondary); margin-bottom:20px; }

.error-section {
    min-height:      calc(100vh - 200px);
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         60px 0;
}

.error-box {
    max-width:       560px;
    margin:          0 auto;
    text-align:      center;
    padding:         48px;
    background:      rgba(13,13,13,.6);
    border:          1px solid var(--color-border);
    border-radius:   var(--radius-2xl);
    backdrop-filter: blur(20px);
}

.error-icon {
    width:           80px;
    height:          80px;
    margin:          0 auto 24px;
    background:      radial-gradient(circle at 30% 30%, rgba(0,212,255,.2), transparent 70%);
    border:          1px solid rgba(0,212,255,.3);
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.error-icon i { font-size:2.25rem; color:var(--color-accent); }

.error-code {
    font-size:              5rem;
    font-weight:            900;
    letter-spacing:         -.04em;
    background:             var(--gradient-primary);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:        text;
    line-height:            1;
    margin-bottom:          16px;
}

.error-box h1 {
    font-size:     1.75rem;
    font-weight:   900;
    margin-bottom: 12px;
}

.error-box p {
    color:         var(--color-text-secondary);
    margin-bottom: 28px;
}

.error-actions {
    display:         flex;
    gap:             12px;
    justify-content: center;
    flex-wrap:       wrap;
}

.blog-footer {
    background: rgba(10,10,10,.8);
    border-top: 1px solid var(--color-border);
    margin-top: auto;
}

.footer-container {
    max-width: 1400px;
    margin:    0 auto;
    padding:   0 20px;
}

.footer-top {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   48px;
    padding:               48px 0 32px;
    border-bottom:         1px solid var(--color-border);
}

.footer-brand .logo { margin-bottom: 16px; }

.footer-tagline {
    font-size:   .875rem;
    color:       var(--color-text-muted);
    max-width:   320px;
    line-height: 1.6;
}

.footer-links-grid {
    display:               grid;
    grid-template-columns: repeat(3,1fr);
    gap:                   24px;
}

.footer-col h4 {
    font-size:      .8125rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color:          var(--color-text-primary);
    margin-bottom:  16px;
}

.footer-col a {
    display:         block;
    color:           var(--color-text-secondary);
    text-decoration: none;
    font-size:       .875rem;
    margin-bottom:   10px;
    transition:      color var(--transition-fast);
}

.footer-col a:hover { color: var(--color-accent); }
.footer-col a i     { margin-right: 6px; }

.footer-bottom {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         20px 0;
    flex-wrap:       wrap;
    gap:             12px;
}

.footer-bottom p {
    color:     var(--color-text-muted);
    font-size: .8125rem;
}

.footer-bottom-links { display: flex; gap: 20px; }

.footer-bottom-links a {
    color:           var(--color-text-secondary);
    text-decoration: none;
    font-size:       .8125rem;
    transition:      color var(--transition-fast);
}

.footer-bottom-links a:hover { color: var(--color-accent); }

.toast {
    position:      fixed;
    bottom:        24px;
    right:         24px;
    padding:       12px 20px;
    background:    rgba(13,13,13,.95);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow:    var(--shadow-xl);
    color:         var(--color-text-primary);
    font-size:     .875rem;
    font-weight:   600;
    display:       flex;
    align-items:   center;
    gap:           10px;
    z-index:       9999;
    transform:     translateY(100px);
    opacity:       0;
    transition:    all var(--transition-normal);
}

.toast.show { transform:translateY(0); opacity:1; }
.toast i    { color: var(--color-accent); }

@media (max-width:1100px) {
    .featured-grid { grid-template-columns:1fr; }
    .featured-card--large { grid-row:auto; }
    .post-layout,.content-wrapper { grid-template-columns:1fr; }
    .blog-sidebar { position:static; }
    .footer-top { grid-template-columns:1fr; gap:28px; }
    .footer-links-grid { grid-template-columns:repeat(3,1fr); }
    .posts-grid--3 { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:768px) {
    .main-nav           { display:none; }
    .mobile-menu-toggle { display:flex; }
    .hero-content h1    { font-size:2.5rem; }
    .hero-content p     { font-size:1.0625rem; }
    .post-header h1     { font-size:1.75rem; }
    .post-meta-bar      { flex-direction:column; align-items:flex-start; }
    .section-header     { flex-direction:column; align-items:flex-start; gap:10px; }
    .section-header h2  { font-size:1.5rem; }
    .posts-grid--3      { grid-template-columns:1fr; }
    .posts-grid         { grid-template-columns:1fr; }
    .blog-search-form   { flex-direction:column; }
    .footer-links-grid  { grid-template-columns:1fr 1fr; gap:20px; }
    .footer-bottom      { flex-direction:column; text-align:center; }
    .footer-bottom-links{ flex-direction:column; gap:10px; }
    .author-box         { flex-direction:column; align-items:center; text-align:center; }
    .author-box__info p { margin-bottom:12px; }
    .error-actions      { flex-direction:column; }
    .error-actions .btn { width:100%; justify-content:center; }
}

@media (max-width:480px) {
    .hero-content h1    { font-size:2rem; }
    .post-header h1     { font-size:1.5rem; }
    .error-code         { font-size:4rem; }
    .search-box input   { width:110px; }
    .search-box input:focus { width:140px; }
    .header-right .btn-secondary { display:none; }
    .logo-icon          { width:32px; height:32px; }
    .logo-title         { font-size:.9375rem; }
    .footer-links-grid  { grid-template-columns:1fr; }
}