/* Here is your custom css styles. */


/* POST-GRID-LAYOUT */
.post-grid-section {
    margin: 20px 0;
    padding: 0 10px;
}

.post-grid-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 30px 10px 20px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.post-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.post-grid-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
}

.post-grid-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    transform: translateY(-4px);
}

.post-grid-card .pg-image {
    height: 180px;
    overflow: hidden;
    position: relative;
    display: block;
}

.post-grid-card .pg-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.post-grid-card:hover .pg-image img {
    transform: scale(1.05);
}

.post-grid-card .pg-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 14px 16px 10px;
    background: linear-gradient(transparent, rgba(0,0,0,0.75));
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-grid-card .pg-body {
    padding: 14px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.post-grid-card .pg-summary {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 12px;
    flex: 1;
}

.post-grid-card .pg-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #999;
    border-top: 1px solid #f5f5f5;
    padding-top: 10px;
}

.post-grid-card .pg-meta a {
    color: #999;
}

.post-grid-card .pg-meta a:hover {
    color: #009688;
}

/* Responsive: tablet 2 cols, mobile 1 col */
@media only screen and (max-width: 992px) {
    .post-grid { grid-template-columns: repeat(2, 1fr); }
}

@media only screen and (max-width: 601px) {
    .post-grid { grid-template-columns: 1fr; }
    .post-grid-card .pg-image { height: 160px; }
}

/* Dark mode */
body.dark .post-grid-card {
    background: #2a2a2a;
}

body.dark .post-grid-card .pg-summary {
    color: #bbb;
}

body.dark .post-grid-card .pg-meta {
    border-top-color: #444;
    color: #888;
}

body.dark .post-grid-title {
    color: #ddd;
}


/* MAIN-CONTENT-SAFE-MARGIN */
/* On wide screens (>1400px), fixed sidebars (270px + 12px gap each) are visible.
   Force main.content to stay within the safe zone so carousel nav buttons
   and other content don't get hidden behind the sidebars. */
@media (min-width: 1401px) {
    main.content {
        margin-left: 294px !important;
        margin-right: 294px !important;
        max-width: calc(100vw - 588px) !important;
    }
}


/* COLLAPSIBLE-SIDEBARS */
/* Collapsed state: thin icon strip, only icon visible */
.cat-sidebar.collapsed,
.hot-sidebar.collapsed {
    width: 48px;
    overflow: hidden;
}
.cat-sidebar.collapsed .cat-title,
.hot-sidebar.collapsed .hot-title {
    font-size: 0;
    padding: 12px 0;
    justify-content: center;
    border-radius: 12px 12px 0 0;
}
.cat-sidebar.collapsed .cat-title i,
.hot-sidebar.collapsed .hot-title i {
    font-size: 20px;
}
.cat-sidebar.collapsed .cat-list,
.hot-sidebar.collapsed .hot-list {
    display: none;
}
/* Cursor and hover hint */
.cat-sidebar .cat-title,
.hot-sidebar .hot-title {
    cursor: pointer;
    user-select: none;
}
.cat-sidebar .cat-title:hover,
.hot-sidebar .hot-title:hover {
    filter: brightness(1.08);
}
/* Smooth transition */
.cat-sidebar,
.hot-sidebar {
    transition: width 0.3s ease;
}

/* Adjust main.content margins when sidebars are collapsed.
   Each collapsed sidebar takes 48px + 12px gap = 60px.
   Expanded sidebar takes 270px + 12px gap = 282px. */
@media (min-width: 1401px) {
    body.cat-collapsed main.content {
        margin-left: 60px !important;
    }
    body.hot-collapsed main.content {
        margin-right: 60px !important;
    }
    body.cat-collapsed.hot-collapsed main.content {
        margin-left: 60px !important;
        margin-right: 60px !important;
        max-width: calc(100vw - 120px) !important;
    }
}


/* VIEW-ALL-BTN */
.view-all-btn-wrap {
    text-align: center;
    margin: 8px 0 16px;
}
.view-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 22px;
    background: linear-gradient(135deg, #009688, #00bcd4);
    color: #fff !important;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(0, 150, 136, 0.25);
    transition: transform 0.2s, box-shadow 0.2s;
}
.view-all-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 150, 136, 0.4);
    color: #fff !important;
}
body.dark .view-all-btn {
    background: linear-gradient(135deg, #00bcd4, #009688);
}


/* ALL-PAGE-HEADER */
.all-page {
    padding-top: 30px;
}
.all-page .carousel-3d-wrapper {
    margin-top: 40px;
}
.all-page-header {
    text-align: center;
    padding: 30px 20px 20px;
    margin-bottom: 10px;
}
.all-page-header h1 {
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0 0 8px;
    color: #333;
}
.all-page-subtitle {
    color: #888;
    font-size: 14px;
    margin: 0 0 16px;
}
.all-page-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    background: rgba(0,0,0,0.08);
    color: #444 !important;
    border-radius: 22px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none !important;
    transition: background 0.2s, transform 0.2s;
}
.all-page-back:hover {
    background: rgba(0,0,0,0.16);
    color: #222 !important;
    transform: translateX(-2px);
}
body.dark .all-page-header h1 { color: #ddd; }
body.dark .all-page-subtitle { color: #aaa; }


/* REC-PAGE-LAYOUT */
.rec-page-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 30px 20px 16px;
    margin-bottom: 8px;
}
.rec-page-title-area {
    text-align: center;
}
.rec-page-title-area h1 {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 0 6px;
    color: #333;
}
.rec-page-subtitle {
    color: #888;
    font-size: 13px;
    margin: 0;
}
.rec-page-back {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    background: rgba(0,0,0,0.06);
    color: #555 !important;
    border-radius: 16px;
    font-size: 12px;
    text-decoration: none !important;
    transition: background 0.2s;
}
.rec-page-back:hover {
    background: rgba(0,0,0,0.12);
    color: #333 !important;
}
.rec-section-title {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 16px 10px 4px;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.rec-section-count {
    font-size: 12px;
    font-weight: 400;
    color: #999;
}
.rec-page-actions {
    text-align: center;
    margin: 20px 0 30px;
}
.rec-page-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 28px;
    background: linear-gradient(135deg, #009688, #00bcd4);
    color: #fff !important;
    border-radius: 22px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none !important;
    box-shadow: 0 3px 12px rgba(0, 150, 136, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}
.rec-page-all-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 18px rgba(0, 150, 136, 0.45);
    color: #fff !important;
}
body.dark .rec-page-title-area h1 { color: #ddd; }
body.dark .rec-page-subtitle { color: #aaa; }
body.dark .rec-page-back { background: rgba(255,255,255,0.08); color: #ccc !important; }
body.dark .rec-page-back:hover { background: rgba(255,255,255,0.16); color: #fff !important; }
body.dark .rec-section-title { color: #bbb; }

/* /recommended/ 页面背景: 首页风格渐变 */
main.rec-page {
    background: linear-gradient(180deg,
        rgba(0, 150, 136, 0.10) 0%,
        rgba(0, 188, 212, 0.05) 25%,
        transparent 100%);
    min-height: 100vh;
    padding-top: 4px;
}
.rec-page-header {
    background: linear-gradient(135deg, rgba(0, 150, 136, 0.15), rgba(0, 188, 212, 0.10));
    border-radius: 0 0 28px 28px;
    padding: 28px 20px 20px !important;
    margin-bottom: 10px !important;
    margin-top: 0 !important;
}



/* FIXED-HEADER-FOOTER */
/* Navbar 跨所有页面统一深色背景 — 见 matery.css 的 'header .nav-transparent' 规则
   (这里不重复定义，避免 specificity 叠加造成意外副作用) */
/* Footer 固定深色背景 */
footer.footer {
    background: #263238 !important;
    color: rgba(255,255,255,0.8) !important;
}
footer.footer a {
    color: rgba(255,255,255,0.7) !important;
}
footer.footer a:hover {
    color: #fff !important;
}
/* cn-region-banner */
.cn-region-banner{position:sticky;top:0;left:0;right:0;z-index:1001;background:linear-gradient(90deg,#ff7e5f 0%,#feb47b 100%);color:#fff;font-size:14px;box-shadow:0 2px 8px rgba(0,0,0,.15);}
.cn-region-banner[hidden]{display:none;}
.cn-region-banner__inner{display:flex;align-items:center;gap:12px;max-width:1080px;margin:0 auto;padding:10px 16px;}
.cn-region-banner__icon{font-size:20px;}
.cn-region-banner__text{display:flex;flex-direction:column;line-height:1.3;flex:1;}
.cn-region-banner__text code{background:rgba(255,255,255,.18);padding:1px 6px;border-radius:4px;}
.cn-region-banner__btn{background:#fff;color:#c84a2c!important;padding:6px 14px;border-radius:999px;font-weight:600;white-space:nowrap;text-decoration:none;}
.cn-region-banner__btn:hover{background:#fff7f3;}
.cn-region-banner__close{background:transparent;border:0;color:#fff;font-size:22px;line-height:1;cursor:pointer;opacity:.85;}
.cn-region-banner__close:hover{opacity:1;}
@media (max-width:600px){.cn-region-banner__text{font-size:12px;}.cn-region-banner__btn{padding:5px 10px;font-size:12px;}}
/* hero motto */
.hero-motto{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:48px auto 0;max-width:760px;font-size:18px;letter-spacing:.05em;font-weight:600;color:#fff;}
.hero-stats{margin:96px auto 0;display:flex;justify-content:center;gap:36px;flex-wrap:wrap;position:relative;padding-top:36px;}
.hero-stats::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:96px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);}
.hero-stat{display:flex;flex-direction:column;align-items:center;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.4);}
.hero-stat-num{font-size:28px;font-weight:700;letter-spacing:.02em;}
.hero-stat-label{font-size:12px;opacity:.85;margin-top:4px;letter-spacing:.08em;}
.hero-tech{margin:56px auto 0;display:flex;justify-content:center;gap:10px;flex-wrap:nowrap;max-width:1100px;padding:0 16px;}
.hero-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.12);backdrop-filter:blur(6px);color:#fff;font-size:13px;letter-spacing:.04em;text-decoration:none;transition:background .25s ease,transform .25s ease;}
.hero-badge:hover,.hero-badge:focus-visible{background:rgba(255,255,255,.22);transform:translateY(-1px);}
.hero-typing{margin:48px auto 0;min-height:28px;color:#fff;font-size:16px;letter-spacing:.05em;opacity:.95;text-shadow:0 1px 4px rgba(0,0,0,.4);}
.hero-motto-line{opacity:.55;transition:opacity .8s ease,transform .8s ease;transform:translateY(2px);text-shadow:0 2px 8px rgba(0,0,0,.4);white-space:nowrap;}
.hero-motto-line.is-active{opacity:1;transform:translateY(0);}
.hero-motto-line + .hero-motto-line::before{content:"· ";opacity:.5;margin-right:14px;color:#fff;}
/* hero sub description */
.hero-subdesc{margin:10px auto 0;max-width:760px;font-size:13px;letter-spacing:.04em;opacity:.92;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.35);}
@media (max-width:600px){.bg-cover .title{display:flex;justify-content:center;text-align:center !important;width:100%;white-space:normal;}.hero-motto{font-size:14px;gap:8px;}.hero-motto-line{white-space:normal;}.hero-motto-line + .hero-motto-line::before{margin-right:8px;}}


/* RESPONSIVE-HERO-FIX */
/* 重写首页 hero 区域，让内容能适应不同高度/宽度的视口，并修复以下问题：
   1) .index-cover { height:100vh } + .carousel { overflow:hidden } 导致 hero 内容
      (title + motto + typed + stats + tech + typing + 按钮) 总高度超过视口时被裁掉，
      进而出现"首页文字被遮挡"。
   2) hero 各元素（title/motto/stats/tech/typing）完全没有响应式，在不同字号下错位。
   3) 侧边栏在 1400-1600px 之间开始挤压主内容，但首页 carousel 不在 main.content 内，
      导致首页 hero 文本被 cat/hot sidebar 遮挡。
   4) navbar-fixed (64px) 与 carousel 内容重叠。 */

/* === A. 首页 carousel 容器自适应高度 === */
.carousel.carousel-slider.center.index-cover {
    height: auto !important;
    min-height: calc(100vh - 64px) !important;
    overflow: visible !important;
    margin-top: 0 !important;
}

/* === B. carousel-item：当前展示的 item 撑开容器 === */
.index-cover > .carousel-item {
    position: absolute !important;
    height: 100% !important;
    min-height: calc(100vh - 64px);
}
.index-cover > .carousel-item.active {
    position: relative !important;
    height: auto !important;
    min-height: calc(100vh - 64px);
    overflow: visible !important;
}
.index-cover > .carousel-item:not(.active) {
    display: none !important;
}

/* === C. hero 内容容器：给 navbar 留 padding-top，给溢出留 padding-bottom === */
.index-cover > .carousel-item.active.bg-cover {
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    padding: 88px 0 48px !important;
    box-sizing: border-box;
}
.index-cover .bg-cover .container {
    position: relative !important;
    z-index: 2;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* === D. hero title 响应式字号 + 减小 margin === */
.bg-cover .title {
    font-size: clamp(1.9rem, 4.5vw, 3.8rem) !important;
    line-height: 1.2 !important;
    margin: 0 0 20px !important;
    word-break: break-word;
    display: flex;
    justify-content: center;
    text-align: center !important;
    width: 100%;
    white-space: nowrap;
}

/* === E. hero motto 紧凑 + 响应式 === */
.hero-motto {
    margin-top: 18px !important;
    font-size: clamp(13px, 1.5vw, 18px) !important;
    gap: 10px !important;
    padding: 0 12px;
    line-height: 1.5;
}

/* === F. hero description (subtitle/typed) 响应式 === */
.bg-cover .description {
    font-size: clamp(14px, 1.4vw, 18px) !important;
    line-height: 1.5 !important;
    margin-top: 8px !important;
}
#subtitle {
    font-size: inherit !important;
}

/* === G. hero-stats 紧凑 + 响应式 === */
.hero-stats {
    margin: 28px auto 0 !important;
    padding-top: 22px !important;
    gap: clamp(18px, 4vw, 48px) !important;
}
.hero-stats::before {
    width: 80px;
}
.hero-stat-num {
    font-size: clamp(20px, 2.8vw, 30px) !important;
}
.hero-stat-label {
    font-size: clamp(11px, 1.1vw, 14px) !important;
}

/* === H. hero-tech 紧凑 + 响应式 === */
.hero-tech {
    margin: 22px auto 0 !important;
    gap: 8px !important;
    padding: 0 12px;
}
.hero-badge {
    font-size: clamp(11px, 1.15vw, 13px) !important;
    padding: 5px 12px !important;
    gap: 5px;
    white-space: nowrap;
}

/* === I. hero-typing 紧凑 === */
.hero-typing {
    margin: 22px auto 0 !important;
    font-size: clamp(12px, 1.3vw, 16px) !important;
    min-height: 22px;
    padding: 0 12px;
}

/* === J. cover-btns 改为相对定位，避免 absolute top:10vh 在不同高度下错位 === */
.cover-btns {
    position: relative !important;
    top: 0 !important;
    margin: 36px 0 0 !important;
    text-align: center;
}
.cover-btns a {
    margin: 8px 10px !important;
    padding: 0 28px !important;
    height: 42px !important;
    line-height: 42px !important;
    font-size: 14px !important;
}
.cover-btns a i {
    font-size: 1rem !important;
}

/* === K. hero-subdesc 响应式 === */
.hero-subdesc {
    font-size: clamp(12px, 1.2vw, 14px) !important;
    margin-top: 8px !important;
    padding: 0 12px;
}

/* === L. 侧边栏断点 1400 → 1600 === */
@media (max-width: 1599px) {
    .cat-sidebar,
    .hot-sidebar {
        display: none !important;
    }
}

/* === M. main.content 边距同步到新断点 === */
@media (min-width: 1600px) {
    main.content {
        margin-left: 294px !important;
        margin-right: 294px !important;
        max-width: calc(100vw - 588px) !important;
    }
    body.cat-collapsed main.content {
        margin-left: 60px !important;
    }
    body.hot-collapsed main.content {
        margin-right: 60px !important;
    }
    body.cat-collapsed.hot-collapsed main.content {
        margin-left: 60px !important;
        margin-right: 60px !important;
        max-width: calc(100vw - 120px) !important;
    }
}
@media (min-width: 1401px) and (max-width: 1599px) {
    main.content {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: none !important;
    }
}

/* === N. 宽屏下让 hero 内容容器避开 sidebar 区域 === */
@media (min-width: 1600px) {
    .index-cover .bg-cover .container {
        max-width: calc(100vw - 624px) !important;
    }
}

/* === O. 移动端 (<=600px) 进一步强化 === */
@media (max-width: 600px) {
    .carousel.carousel-slider.center.index-cover {
        min-height: calc(100vh - 56px) !important;
    }
    .index-cover > .carousel-item.active.bg-cover {
        min-height: calc(100vh - 56px) !important;
        padding: 70px 0 36px !important;
    }
    .bg-cover .title {
        font-size: 1.6rem !important;
        margin-bottom: 14px !important;
    }
    .hero-motto {
        margin-top: 14px !important;
        font-size: 12px !important;
        gap: 4px !important;
        padding: 0 8px;
    }
    .hero-motto-line + .hero-motto-line::before {
        margin-right: 4px !important;
    }
    .bg-cover .description {
        font-size: 13px;
        margin-top: 6px !important;
    }
    .hero-stats {
        margin-top: 20px !important;
        padding-top: 14px !important;
        gap: 14px !important;
    }
    .hero-stats::before {
        width: 56px;
    }
    .hero-stat-num {
        font-size: 18px !important;
    }
    .hero-stat-label {
        font-size: 10px !important;
    }
    .hero-tech {
        margin-top: 16px !important;
        flex-wrap: wrap;
        gap: 5px !important;
        padding: 0 6px;
    }
    .hero-badge {
        font-size: 10.5px !important;
        padding: 3px 8px !important;
        gap: 3px;
    }
    .hero-typing {
        margin-top: 14px !important;
        font-size: 11.5px !important;
        min-height: 18px;
    }
    .cover-btns {
        margin-top: 22px !important;
    }
    .cover-btns a {
        margin: 5px 6px !important;
        padding: 0 18px !important;
        height: 34px !important;
        line-height: 34px !important;
        font-size: 12px !important;
    }
    .cover-btns a i {
        font-size: 0.9rem !important;
    }
}

/* === P. 平板竖屏 (601-768) === */
@media (min-width: 601px) and (max-width: 768px) {
    .bg-cover .title {
        font-size: clamp(1.7rem, 5vw, 2.4rem) !important;
    }
    .hero-motto { font-size: 14px !important; }
    .hero-stat-num { font-size: 22px !important; }
    .hero-tech { gap: 7px !important; }
    .hero-badge { font-size: 12px !important; }
    .cover-btns a { margin: 6px 8px !important; padding: 0 22px !important; }
}

/* === Q. 平板横屏 (769-992) === */
@media (min-width: 769px) and (max-width: 992px) {
    .bg-cover .title {
        font-size: clamp(1.9rem, 4vw, 2.8rem) !important;
    }
    .hero-stats { gap: 32px !important; }
}

/* === R. 中等桌面 (993-1400) === */
@media (min-width: 993px) and (max-width: 1400px) {
    .hero-stat-num { font-size: 26px !important; }
}

/* === S. Navbar 移动端优化 === */
@media (max-width: 992px) {
    .navbar-fixed nav .nav-wrapper .brand-logo .logo-span {
        font-size: 1.2rem !important;
    }
    .navbar-fixed nav .nav-wrapper .brand-logo img.logo-img {
        height: 36px !important;
    }
    .nav-transparent .button-collapse i {
        font-size: 1.4rem !important;
    }
}

/* === T. Footer 移动端紧凑 === */
@media (max-width: 600px) {
    footer.footer {
        padding: 20px 0 18px !important;
    }
    footer.footer .container {
        padding: 0 14px;
    }
    footer.footer p,
    footer.footer .friend-links,
    footer.footer .footer-social-link a {
        font-size: 12px !important;
        line-height: 1.7 !important;
    }
}

/* === U. 推荐文章 grid：补全 601-768 的 2 列规则 === */
@media only screen and (min-width: 601px) and (max-width: 768px) {
    .post-grid { gap: 14px; }
    .post-grid-card .pg-image { height: 150px; }
}

/* === V. 文章卡片/详情：移动端 padding 收紧 === */
@media (max-width: 600px) {
    .card {
        margin: 8px 6px !important;
    }
    .card .card-content {
        padding: 14px 14px !important;
    }
    #artDetail .card .card-content {
        padding: 14px 14px !important;
    }
    #articleContent {
        font-size: 15px !important;
        line-height: 1.75 !important;
    }
    #articleContent h2 { font-size: 1.3rem !important; }
    #articleContent h3 { font-size: 1.15rem !important; }
}

/* === W. 推荐文章/文章卡片：平板 padding 调整 === */
@media (min-width: 601px) and (max-width: 992px) {
    .card .card-content {
        padding: 18px 18px !important;
    }
}

/* === X. 极小屏 (<=400px) 进一步压缩 === */
@media (max-width: 400px) {
    .hero-stats {
        gap: 8px !important;
    }
    .hero-stat-num {
        font-size: 16px !important;
    }
    .hero-tech {
        gap: 4px !important;
    }
    .hero-badge {
        font-size: 10px !important;
        padding: 3px 7px !important;
    }
    .cover-btns a {
        margin: 4px 4px !important;
        padding: 0 14px !important;
        font-size: 11.5px !important;
    }
}

/* === Y. 桌面超宽 (>=1920px) 视觉优化 === */
@media (min-width: 1920px) {
    .index-cover .bg-cover .container {
        max-width: 1280px !important;
    }
}


/* COVER-SOCIAL-LINK-FIX */
/* 修复 cover-social-link (首页 hero 底部社交图标) 在新版 hero flex 布局下
   被 top:23vh 偏移推到 carousel 容器外、与 navbar 重叠 / 压住 hero 内容的问题。
   原因：
     1) matery.css 里 .cover-social-link { top:23vh } 是按 60vh 固定高度 + 内容
        垂直居中设计的；现在 .container 改为 flex column + justify-content:center
        自适应布局后，flex 末尾 + 23vh 双重偏移会导致低分辨率下溢出 carousel。
     2) cover-social-link 没有显式 z-index，navbar-fixed z-index:997 在某些场景
        下会盖住它。 */
.cover-social-link {
    position: relative !important;
    top: 0 !important;
    margin: 28px 0 0 !important;
    width: 100% !important;
    text-align: center !important;
    z-index: 3;  /* 高于 .container 的 z-index:2，但要低于 navbar (z-index:997) */
}
.cover-social-link a {
    padding: 0 12px !important;
    font-size: 1.35rem !important;
    color: #fff !important;
    display: inline-block;
    line-height: 1;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.cover-social-link a:hover {
    opacity: 0.75;
    transform: translateY(-1px);
}

/* cover-btns 已经在上一轮修复里改为相对定位，
   这里只补一个与 cover-social-link 的间距保险。 */
.cover-btns + .cover-social-link {
    margin-top: 24px !important;
}

/* 移动端进一步压缩间距 */
@media (max-width: 600px) {
    .cover-social-link {
        margin: 18px 0 0 !important;
    }
    .cover-social-link a {
        padding: 0 9px !important;
        font-size: 1.2rem !important;
    }
}

/* 平板竖屏 (601-768) */
@media (min-width: 601px) and (max-width: 768px) {
    .cover-social-link {
        margin: 22px 0 0 !important;
    }
    .cover-social-link a {
        padding: 0 11px !important;
    }
}


/* PAGE-RESPONSIVE-FIX */
/* 补充非首页页面的响应式优化：
   1) 文章详情页 post-cover hero + 排版
   2) 上下篇导航 prev-next
   3) 3D 旋转轮播 (all 页面) 在窄屏的卡片尺寸
   4) 归档时间线 archives
   5) 移动端汉堡菜单 mobile-nav
   6) 文章内代码块、表格、图片
   7) tags/categories 标签云
   8) 搜索弹窗
   9) gitalk 评论
   10) footer 友情链接 */

/* === A. 文章详情页 post-cover 高度自适应 === */
.post-cover {
    min-height: 280px !important;
    padding: 80px 0 50px !important;
    box-sizing: border-box;
}
.post-cover .container {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}
@media (max-width: 600px) {
    .post-cover {
        min-height: 240px !important;
        padding: 72px 0 36px !important;
    }
    .post-cover .title {
        font-size: 1.6rem !important;
        line-height: 1.3 !important;
        margin: 8px 0 4px !important;
    }
    .post-cover .post-title {
        font-size: 1.5rem !important;
    }
}
@media (min-width: 601px) and (max-width: 992px) {
    .post-cover .title { font-size: 2rem !important; }
}

/* === B. 上下篇导航 prev-next：窄屏紧凑 + 防溢出 === */
.prev-next {
    margin: 20px 0 !important;
}
.prev-next .row {
    margin: 0 !important;
}
.prev-next .col {
    padding: 0 4px !important;
}
.prev-next .article-badge {
    font-size: 0.9rem !important;
    min-width: 2.5rem !important;
    padding: 3px 8px !important;
}
.prev-next a {
    font-size: 13px !important;
    line-height: 1.4 !important;
    word-break: break-word;
}
@media (max-width: 600px) {
    .prev-next {
        margin: 12px 0 !important;
    }
    .prev-next a {
        font-size: 12px !important;
        line-height: 1.35 !important;
        padding: 6px 4px !important;
    }
    .prev-next .article-badge {
        font-size: 0.8rem !important;
        min-width: 2rem !important;
        padding: 2px 6px !important;
    }
    .prev-next .left-badge,
    .prev-next .right-badge {
        position: static !important;
        display: inline-block;
        margin-right: 4px;
    }
}

/* === C. 3D 旋转轮播（all 页面）：窄屏缩小卡片 === */
@media (max-width: 600px) {
    .carousel-3d-wrapper {
        padding: 4px 0 8px !important;
    }
    .carousel-3d-stage {
        height: 240px !important;
        transform: scale(0.55);
        transform-origin: center center;
    }
    .carousel-3d-card {
        width: 280px !important;
        margin-left: -140px !important;
        margin-top: -120px !important;
    }
    .carousel-3d-card.pos-1 {
        transform: translateX(220px) scale(0.82) rotateY(-25deg) !important;
    }
    .carousel-3d-card.pos--1 {
        transform: translateX(-220px) scale(0.82) rotateY(25deg) !important;
    }
}
@media (min-width: 601px) and (max-width: 992px) {
    .carousel-3d-stage {
        height: 300px !important;
        transform: scale(0.8);
        transform-origin: center center;
    }
    .carousel-3d-card {
        width: 320px !important;
        margin-left: -160px !important;
        margin-top: -140px !important;
    }
    .carousel-3d-card.pos-1 {
        transform: translateX(280px) scale(0.82) rotateY(-25deg) !important;
    }
    .carousel-3d-card.pos--1 {
        transform: translateX(-280px) scale(0.82) rotateY(25deg) !important;
    }
}

/* === D. 归档时间线 archives：中等屏单列不塌陷 === */
@media (min-width: 769px) and (max-width: 1399px) {
    #cd-timeline .year,
    #cd-timeline .month {
        margin-left: 0 !important;
        padding: 14px 16px !important;
    }
    .cd-timeline-content {
        margin-left: 60px !important;
        width: auto !important;
        float: none !important;
    }
    .cd-timeline-block:nth-child(even) .cd-timeline-content {
        float: none !important;
    }
    .cd-timeline-content::before {
        top: 18px !important;
        left: -14px !important;
        right: auto !important;
        border: 1px dashed #ffa726;
    }
}

/* === E. 移动端汉堡菜单 mobile-nav：内容不溢出屏幕 === */
@media (max-width: 992px) {
    .side-nav {
        width: 280px !important;
    }
    .side-nav .mobile-head {
        padding: 0 16px !important;
    }
    .side-nav .mobile-head img {
        margin-top: 24px !important;
        width: 60px !important;
        height: 60px !important;
    }
    .side-nav .mobile-head .logo-name {
        margin-top: -22px !important;
        font-size: 1.3rem !important;
    }
    .side-nav .mobile-head .logo-desc {
        font-size: 0.75rem !important;
        line-height: 1.25rem !important;
        padding-bottom: 8px !important;
    }
    .side-nav .menu-list a {
        height: 44px !important;
        line-height: 44px !important;
        font-size: 0.95rem !important;
    }
    .side-nav .social-link {
        bottom: 24px !important;
        padding-left: 16px !important;
    }
    .side-nav .social-link a {
        font-size: 1.1rem !important;
        padding: 0 10px !important;
    }
}

/* === F. 文章内代码块 + 表格 + 图片 + iframe === */
@media (max-width: 600px) {
    #articleContent pre[class*="language-"] {
        font-size: 12px !important;
        padding: 10px 12px !important;
        margin: 12px 0 !important;
        border-radius: 4px !important;
    }
    #articleContent :not(pre) > code {
        font-size: 12px !important;
        padding: 1px 5px !important;
    }
    #articleContent table {
        font-size: 13px !important;
    }
    #articleContent table th,
    #articleContent table td {
        padding: 6px 8px !important;
    }
    #articleContent img {
        margin: 8px 0 !important;
    }
    #articleContent blockquote {
        padding: 10px 14px !important;
        font-size: 14px !important;
        margin: 12px 0 !important;
    }
    #articleContent pre {
        margin-left: -16px !important;
        margin-right: -16px !important;
        border-radius: 0 !important;
    }
}

/* === G. 文章详情 iframe / video / 嵌入响应式 === */
#articleContent iframe,
#articleContent video,
#articleContent embed,
#articleContent object {
    max-width: 100% !important;
    height: auto !important;
}
/* 16:9 responsive wrapper for iframes (YouTube/Bilibili) */
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    margin: 16px 0;
    border-radius: 8px;
}
.video-wrapper iframe,
.video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* === H. tags 标签云紧凑度 === */
.chip-container .tag-chips {
    padding: 0 12px !important;
}
/* Switch the chip to inline-flex so the text + tag-length count sit on a
   single centered baseline. Materialize's stock .chip uses
   display:inline-block + height:32px + line-height:32px + padding:0 12px,
   but our 4px vertical padding here makes the content area only 24px
   tall while the 32px line-height still pushes the line downward — the
   text overflows the rounded background. inline-flex + align-items:center
   centers the row vertically and removes the overflow entirely. */
.chip-container .chip {
    display: inline-flex !important;
    align-items: center !important;
    height: auto !important;
    line-height: 1.5 !important;
    font-size: 0.9rem !important;
    margin: 4px 4px !important;
    padding: 4px 10px !important;
}
/* matery.css sets margin-right:-2px on .tag-length, which makes the
   count stick out past the chip's right edge and breaks the rounded
   background. Keep the small left spacing but stop the negative pull. */
.chip-container .chip .tag-length {
    margin-right: 0 !important;
    margin-left: 5px !important;
    font-size: 0.85em !important;
    line-height: 1 !important;
}
/* The EJS template applies an inline `background-color: #F5EEF8` to every
   chip. CSS shorthand `background:` with !important doesn't reliably
   carry importance to its longhands in some browsers, so the inline
   `background-color` was beating .chip-active's gradient — the chip
   then showed a light-purple bg with white text (from .chip-active's
   `color: #FFF !important`), which reads as "white text invisible against
   the chip edge". Re-declare the gradient as a longhand here so it
   sticks, and force background-color transparent so the gradient isn't
   masked. */
.chip-container .chip-active {
    background-image: linear-gradient(to bottom right, #FF5E3A 0%, #FF2A68 100%) !important;
    background-color: transparent !important;
    color: #FFF !important;
    box-shadow: 2px 5px 10px #aaa !important;
}
@media (max-width: 600px) {
    .chip-container .chip {
        font-size: 0.8rem !important;
        margin: 3px 3px !important;
        padding: 3px 8px !important;
    }
    .chip-container .tag-chips {
        padding: 0 6px !important;
    }
    .chip-container .tag-title {
        font-size: 1.4rem !important;
        margin: 8px 0 6px !important;
        text-align: center;
    }
}

/* === I. 搜索弹窗 + 搜索输入 === */
@media (max-width: 600px) {
    #searchModal .modal-content {
        padding: 14px !important;
    }
    #searchModal input.search-input {
        font-size: 14px !important;
        padding: 8px 12px !important;
    }
    #searchModal .search-result-list {
        max-height: 60vh !important;
    }
    #searchModal .search-result-title {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }
    #searchModal .search-keyword {
        font-size: 11px !important;
    }
}

/* === J. gitalk 评论卡 === */
@media (max-width: 600px) {
    .gitalk-card {
        margin: 16px 6px !important;
        padding: 14px !important;
    }
    .gitalk-card .gt-header-textarea {
        font-size: 13px !important;
    }
}

/* === K. 相关文章 related-posts === */
.related-posts-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 12px !important;
}
@media (max-width: 600px) {
    .related-posts-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    .related-post-item {
        padding: 8px 10px !important;
        font-size: 13px !important;
    }
    .related-post-name {
        max-width: 60vw !important;
    }
}

/* === L. footer 友情链接 + 社交链接 === */
@media (max-width: 600px) {
    footer.footer .friends-box {
        padding: 0 8px !important;
    }
    footer.footer .friends-box a {
        margin: 3px 4px !important;
        padding: 4px 10px !important;
        font-size: 12px !important;
        display: inline-block;
    }
    footer.footer .footer-social-link {
        text-align: center !important;
    }
    footer.footer .footer-social-link a {
        margin: 0 6px !important;
    }
}
@media (min-width: 601px) and (max-width: 992px) {
    footer.footer .row .col {
        padding: 0 8px !important;
    }
}

/* === M. article-share 分享按钮：窄屏防溢出 === */
#article-share {
    flex-wrap: wrap !important;
    margin: 16px 0 !important;
    padding: 0 !important;
}
#article-share .social-share {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}
#article-share .social-share a {
    margin: 4px 6px !important;
    font-size: 1.1rem !important;
}
@media (max-width: 600px) {
    #article-share .social-share a {
        margin: 4px !important;
        font-size: 1rem !important;
    }
    .share-link {
        margin: 4px !important;
    }
}

/* === N. 推荐文章 carousel-indicator / 滚动指示 === */
@media (max-width: 600px) {
    .carousel .indicators .indicator-item {
        width: 8px !important;
        height: 8px !important;
        margin: 0 3px !important;
    }
}

/* === O. 回到顶部按钮 + 阅读进度条 === */
@media (max-width: 600px) {
    .top-scroll {
        right: 10px !important;
        bottom: 10px !important;
    }
    .top-scroll .btn-floating {
        width: 42px !important;
        height: 30px !important;
    }
    .top-scroll .btn-floating i {
        line-height: 30px !important;
        font-size: 1.4rem !important;
    }
    .reading-progress {
        height: 2px !important;
    }
}

/* === P. about 页面 typography === */
@media (max-width: 600px) {
    .about-container .card {
        margin: 8px 6px !important;
    }
    .about-container .card-content {
        padding: 14px !important;
    }
    .post-statis .statis {
        padding: 0.2rem 0.5rem !important;
    }
    .post-statis .statis .count {
        font-size: 1.1rem !important;
    }
}

/* === Q. 全局平滑滚动 + 选择高亮（保留主题色彩） === */
html { scroll-behavior: smooth; }

/* === R. 移动端 fixed 元素安全区（避免被手势条遮挡） === */
@media (max-width: 600px) {
    .top-scroll {
        bottom: max(10px, env(safe-area-inset-bottom)) !important;
    }
}
/* HOME-CONTENT-PANEL */
.home-content {
    margin-top: 24px;
    padding-bottom: 24px;
}
.stats-banner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 24px 0 36px;
}
.stat-card {
    display: block;
    padding: 22px 14px;
    text-align: center;
    background: var(--stat-card-bg, #fff);
    color: var(--stat-card-fg, #263238);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: transform .15s ease, box-shadow .15s ease;
    text-decoration: none;
}
.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.10);
    color: #009688;
}
.stat-num {
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 4px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
.stat-label {
    font-size: 13px;
    opacity: 0.7;
}
body.DarkMode .stat-card {
    background: #1e272c;
    color: #eceff1;
}
body.DarkMode .stat-card:hover { color: #4dd0e1; }

.home-tabs {
    margin-top: 16px;
}
.home-tabs .tabs {
    background: transparent;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    margin-bottom: 20px;
}
.home-tabs .tabs .tab a {
    color: #555;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.5px;
}
.home-tabs .tabs .tab a:hover,
.home-tabs .tabs .tab a.active {
    color: #009688;
}
.home-tabs .tabs .indicator {
    background-color: #009688;
    height: 3px;
}
body.DarkMode .home-tabs .tabs { border-bottom-color: rgba(255,255,255,0.08); }
body.DarkMode .home-tabs .tabs .tab a { color: #b0bec5; }
body.DarkMode .home-tabs .tabs .tab a.active { color: #4dd0e1; }

.post-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 8px 0 16px;
}
.post-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    transition: transform .15s ease, box-shadow .15s ease;
    height: 100%;
}
.post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.12);
    color: inherit;
}
.post-card__cover {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #eceff1;
}
.post-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
}
.post-card:hover .post-card__cover img {
    transform: scale(1.05);
}
.post-card__cat {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0,150,136,0.92);
    color: #fff;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    backdrop-filter: blur(2px);
}
.post-card__body {
    padding: 14px 16px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.post-card__title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.45;
    margin: 0 0 8px;
    color: #263238;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.post-card__meta {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: #78909c;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.post-card__meta i { margin-right: 3px; }
.post-card__excerpt {
    font-size: 13px;
    color: #546e7a;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.DarkMode .post-card { background: #1e272c; }
body.DarkMode .post-card__title { color: #eceff1; }
body.DarkMode .post-card__excerpt { color: #b0bec5; }
body.DarkMode .post-card__cover { background: #263238; }

.home-tabs__more {
    text-align: center;
    margin: 12px 0 24px;
}
.home-tabs__more .btn-flat {
    color: #009688;
    font-weight: 600;
}
.home-tabs__more .btn-flat:hover {
    background: rgba(0,150,136,0.08);
}

/* Responsive */
@media (max-width: 992px) {
    .post-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-banner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .post-grid { grid-template-columns: 1fr; }
    .stat-num { font-size: 24px; }
}
/* LEARNING-PATH-PANEL */
.learning-path {
    margin: 48px 0 24px;
    padding: 32px 0;
    background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
    border-radius: 16px;
}
body.DarkMode .learning-path {
    background: linear-gradient(135deg, #1a2227 0%, #13191e 100%);
}
.section-title {
    text-align: center;
    margin-bottom: 36px;
}
.section-title h2 {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 8px;
    color: #263238;
    letter-spacing: 0.5px;
}
.section-title h2 i {
    color: #009688;
    margin-right: 6px;
}
.section-subtitle {
    color: #607d8b;
    font-size: 14px;
    margin: 0;
    letter-spacing: 0.3px;
}
body.DarkMode .section-title h2 { color: #eceff1; }
body.DarkMode .section-subtitle { color: #b0bec5; }

.lane-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    padding: 0 16px;
}
.lane-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    padding: 22px 20px;
    color: inherit;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    transition: transform .18s ease, box-shadow .18s ease;
    border-top: 4px solid #009688;
    height: 100%;
}
.lane-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.10);
}
.lane-card--db    { border-top-color: #009688; }
.lane-card--hpn   { border-top-color: #1976d2; }
.lane-card--dist  { border-top-color: #7b1fa2; }
.lane-card--ai    { border-top-color: #e91e63; }
.lane-card--os    { border-top-color: #f57c00; }
.lane-card--mind  { border-top-color: #388e3c; }

.lane-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.lane-card__icon {
    font-size: 26px;
    color: #009688;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,150,136,0.12);
    border-radius: 8px;
}
.lane-card--hpn .lane-card__icon   { color: #1976d2; background: rgba(25,118,210,0.12); }
.lane-card--dist .lane-card__icon  { color: #7b1fa2; background: rgba(123,31,162,0.12); }
.lane-card--ai .lane-card__icon    { color: #e91e63; background: rgba(233,30,99,0.12); }
.lane-card--os .lane-card__icon    { color: #f57c00; background: rgba(245,124,0,0.12); }
.lane-card--mind .lane-card__icon  { color: #388e3c; background: rgba(56,142,60,0.12); }

.lane-card__title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: #263238;
}
.lane-card__desc {
    font-size: 13px;
    color: #607d8b;
    line-height: 1.55;
    margin: 0 0 12px;
    min-height: 40px;
}
.lane-card__posts {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    flex: 1;
}
.lane-card__posts li {
    font-size: 13px;
    color: #455a64;
    line-height: 1.6;
    padding: 4px 0;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.lane-card__posts li i {
    color: #b0bec5;
    font-size: 10px;
    margin-top: 4px;
    flex-shrink: 0;
}
.lane-card__post-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: color .15s ease, border-color .15s ease;
    flex: 1;
    min-width: 0;
}
.lane-card__post-link:hover {
    color: #009688;
    border-bottom-color: currentColor;
}
.lane-card--hpn .lane-card__post-link:hover   { color: #1976d2; }
.lane-card--dist .lane-card__post-link:hover  { color: #7b1fa2; }
.lane-card--ai .lane-card__post-link:hover    { color: #e91e63; }
.lane-card--os .lane-card__post-link:hover    { color: #f57c00; }
.lane-card--mind .lane-card__post-link:hover  { color: #388e3c; }
body.DarkMode .lane-card__post-link { color: #eceff1; }
body.DarkMode .lane-card__post-link:hover { color: #80cbc4; }
.lane-card__empty {
    font-size: 12px;
    color: #90a4ae;
    font-style: italic;
    margin: 12px 0;
}
.lane-card__more {
    font-size: 13px;
    color: #009688;
    font-weight: 600;
    margin-top: 8px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
}
.lane-card--hpn .lane-card__more    { color: #1976d2; }
.lane-card--dist .lane-card__more   { color: #7b1fa2; }
.lane-card--ai .lane-card__more     { color: #e91e63; }
.lane-card--os .lane-card__more     { color: #f57c00; }
.lane-card--mind .lane-card__more   { color: #388e3c; }
.lane-card__more i { margin-left: 4px; transition: transform .2s; }
.lane-card:hover .lane-card__more i { transform: translateX(3px); }

body.DarkMode .lane-card { background: #1e272c; }
body.DarkMode .lane-card__title { color: #eceff1; }
body.DarkMode .lane-card__desc { color: #b0bec5; }
body.DarkMode .lane-card__posts li { color: #cfd8dc; }

@media (max-width: 992px) {
    .lane-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .lane-grid { grid-template-columns: 1fr; }
    .section-title h2 { font-size: 22px; }
    .learning-path { margin: 24px 0 16px; padding: 20px 0; }
}
/* POST-TLDR-AND-ACTIONS */
.post-tldr {
    margin: 0 0 20px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #f0faf8 0%, #e6f4f1 100%);
    border-left: 4px solid #009688;
    border-radius: 0 8px 8px 0;
    position: relative;
}
.post-tldr__label {
    font-size: 12px;
    font-weight: 700;
    color: #009688;
    letter-spacing: 1px;
    margin-bottom: 6px;
    text-transform: uppercase;
}
.post-tldr__label i { margin-right: 2px; }
.post-tldr__body {
    font-size: 15px;
    line-height: 1.7;
    color: #37474f;
}
body.DarkMode .post-tldr {
    background: linear-gradient(135deg, rgba(0,150,136,0.10) 0%, rgba(0,150,136,0.04) 100%);
    border-left-color: #4dd0e1;
}
body.DarkMode .post-tldr__label { color: #4dd0e1; }
body.DarkMode .post-tldr__body { color: #cfd8dc; }

.post-difficulty {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    font-size: 13px;
    color: #607d8b;
}
.post-difficulty__label {
    font-weight: 600;
    color: #455a64;
    margin-right: 2px;
}
.post-difficulty__stars {
    display: inline-flex;
    gap: 2px;
}
.post-difficulty__stars i {
    font-size: 13px;
    color: #ffb300;
}
.post-difficulty__stars i:not(.fa-star) { color: #cfd8dc; }
.post-difficulty__text {
    margin-left: 4px;
    color: #009688;
    font-weight: 600;
}
body.DarkMode .post-difficulty__stars i:not(.fa-star) { color: #455a64; }
body.DarkMode .post-difficulty__label { color: #b0bec5; }

/* Sticky action bar at bottom-right of post pages */
.post-actions {
    position: fixed;
    right: 20px;
    bottom: 24px;
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 8px 6px;
    border-radius: 28px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.10);
    border: 1px solid rgba(0,0,0,0.05);
    transition: opacity .2s ease, transform .2s ease;
}
.post-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    border-radius: 50%;
    color: #607d8b;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, transform .15s ease;
    position: relative;
    padding: 0;
}
.post-action:hover {
    background: rgba(0,150,136,0.10);
    color: #009688;
    transform: scale(1.08);
}
.post-action:active { transform: scale(0.95); }
.post-action i { font-size: 16px; line-height: 1; }
.post-action--like.is-active { color: #e91e63; }
.post-action--like.is-active:hover { background: rgba(233,30,99,0.10); }
.post-action--bookmark.is-active { color: #ffb300; }
.post-action--bookmark.is-active:hover { background: rgba(255,179,0,0.10); }
.post-action--share.is-copied { color: #4caf50; }

.post-action__count {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 14px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    background: #009688;
    color: #fff;
    border-radius: 7px;
    padding: 0 4px;
    box-sizing: border-box;
}

body.DarkMode .post-actions {
    background: rgba(30,39,44,0.85);
    border-color: rgba(255,255,255,0.06);
}
body.DarkMode .post-action { color: #b0bec5; }
body.DarkMode .post-action:hover { color: #4dd0e1; background: rgba(77,208,225,0.10); }

@media (max-width: 600px) {
    .post-actions {
        right: 12px;
        bottom: 12px;
        padding: 6px 4px;
        gap: 6px;
    }
    .post-action { width: 36px; height: 36px; }
    .post-action i { font-size: 14px; }
}

/* "我的收藏" page (optional, lives under /bookmarks/ if URL is hit directly) */
.bookmarks-empty {
    text-align: center;
    padding: 60px 20px;
    color: #607d8b;
}
.bookmarks-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.bookmarks-list li {
    padding: 12px 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    gap: 12px;
}
.bookmarks-list a { flex: 1; color: inherit; }
.bookmarks-list .bm-remove {
    border: none;
    background: transparent;
    color: #b0bec5;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}
.bookmarks-list .bm-remove:hover { color: #e91e63; background: rgba(233,30,99,0.08); }
body.DarkMode .bookmarks-list li { border-bottom-color: rgba(255,255,255,0.06); }
/* SUBSCRIBE-CARD-FOOTER */
.subscribe-card {
    max-width: 720px;
    margin: 24px auto 28px;
    padding: 22px 24px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 14px;
    text-align: center;
}
.subscribe-card__title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
    letter-spacing: 0.5px;
}
.subscribe-card__title i { color: #4dd0e1; }
.subscribe-card__lead {
    color: rgba(255,255,255,0.65);
    font-size: 13px;
    margin: 0 0 14px;
}
.subscribe-card__row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 4px;
}
.subscribe-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: rgba(255,255,255,0.10);
    color: #eceff1;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 18px;
    font-size: 13px;
    text-decoration: none;
    transition: background .15s, transform .15s, color .15s;
    line-height: 1.4;
}
.subscribe-chip i { font-size: 13px; }
.subscribe-chip:hover {
    background: rgba(77,208,225,0.25);
    border-color: rgba(77,208,225,0.4);
    color: #4dd0e1;
    transform: translateY(-1px);
}
.subscribe-card__note {
    color: rgba(255,255,255,0.55);
    font-size: 12px;
    margin: 10px 0 0;
    font-style: italic;
}
@media (max-width: 600px) {
    .subscribe-card { margin: 16px 12px 20px; padding: 18px 16px; }
    .subscribe-chip { font-size: 12px; padding: 5px 12px; }
}

/* SUBSCRIBE-CARD WECHAT-QR MODAL */
.subscribe-chip--qr {
    cursor: pointer;
    font: inherit;
}
.subscribe-chip--qr:focus-visible {
    outline: 2px solid #4dd0e1;
    outline-offset: 2px;
}
.wechat-qr-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: wechat-qr-fade-in .18s ease;
}
.wechat-qr-modal[hidden] { display: none; }
.wechat-qr-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.wechat-qr-modal__panel {
    position: relative;
    background: #fff;
    color: #333;
    border-radius: 14px;
    padding: 26px 24px 20px;
    max-width: 320px;
    width: 100%;
    text-align: center;
    box-shadow: 0 18px 50px rgba(0,0,0,0.35);
    animation: wechat-qr-pop-in .22s ease;
}
.wechat-qr-modal__close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: transparent;
    border: 0;
    font-size: 22px;
    line-height: 1;
    color: #999;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
    transition: color .15s, background .15s;
}
.wechat-qr-modal__close:hover {
    color: #333;
    background: #f0f0f0;
}
.wechat-qr-modal__close:focus-visible {
    outline: 2px solid #4dd0e1;
    outline-offset: 1px;
}
.wechat-qr-modal__title {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 600;
    color: #333;
}
.wechat-qr-modal__title i { color: #07c160; margin-right: 2px; }
.wechat-qr-modal__img-wrap {
    background: #fff;
    padding: 8px;
    border-radius: 8px;
    display: inline-block;
    border: 1px solid #f0f0f0;
}
.wechat-qr-modal__img {
    display: block;
    width: 240px;
    height: 240px;
    max-width: 70vw;
    max-height: 70vw;
    object-fit: contain;
}
.wechat-qr-modal__tip {
    margin: 14px 0 0;
    color: #777;
    font-size: 13px;
}
@keyframes wechat-qr-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes wechat-qr-pop-in {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}
body.wechat-qr-modal-open { overflow: hidden; }
@media (prefers-color-scheme: dark) {
    .wechat-qr-modal__panel { background: #1f1f1f; color: #e0e0e0; }
    .wechat-qr-modal__title { color: #e0e0e0; }
    .wechat-qr-modal__close { color: #999; }
    .wechat-qr-modal__close:hover { color: #fff; background: #2a2a2a; }
    .wechat-qr-modal__img-wrap { background: #fff; border-color: #2a2a2a; }
    .wechat-qr-modal__tip { color: #aaa; }
}
@media (max-width: 600px) {
    .wechat-qr-modal__panel { padding: 22px 18px 16px; }
    .wechat-qr-modal__img { width: 200px; height: 200px; }
}


/* Tag archive: one flat article list, no carousel levels or pagination. */
.tag-post-list{margin:24px auto 0;max-width:960px;}
.tag-post-item{padding:22px 0;border-bottom:1px solid rgba(0,0,0,.12);}
.tag-post-item:first-child{padding-top:0;}
.tag-post-title{margin:0 0 10px;font-size:1.35rem;line-height:1.4;}
.tag-post-title a{color:inherit;}
.tag-post-excerpt{margin:0 0 10px;color:#666;line-height:1.75;}
.tag-post-item .publish-info{font-size:13px;}
@media (max-width:600px){.tag-post-list{margin-top:16px;}.tag-post-item{padding:18px 0;}.tag-post-title{font-size:1.15rem;}.tag-post-excerpt{font-size:14px;}}

/* About profile and mobile navigation links. */
.about-avatar-link,.about-author-link,.mobile-head-link{display:inline-block;color:inherit;text-decoration:none;}
.about-avatar-link:hover .avatar-img,.about-author-link:hover{color:#009688;}
.mobile-head-link{text-align:left;}
@media (max-width:600px){
  .about-container{margin-top:-30px;}
  .profile .avatar-img{max-width:120px;}
  .about-author-link{font-size:1.55rem;}
  .about-container .card-content{padding:18px 14px;}
  .timeline-item{padding:14px 0 14px 22px;}
  .project-card{padding:12px;gap:10px;}
  .edu-item,.honor-item{padding:10px 0;}
}

.about-content{max-width:960px;margin:0 auto;}
@media (max-width:600px){.about-content{width:100%;}}

/* ============================================================
   Mobile optimization for homepage content panels
   统计横幅 / 学习路径 / Tab 列表 / 文章卡片
   桌面端样式保留，<=600px 手机端做紧凑适配
   ============================================================ */
@media (max-width: 600px) {
    /* 通用：section 标题区 */
    .section-title { margin-bottom: 24px; }
    .section-title h2 { font-size: 20px; }
    .section-subtitle { font-size: 12px; padding: 0 8px; line-height: 1.5; }

    /* 统计横幅：保留 2 列布局（<=992px 时已切换），只压缩 padding 与字号 */
    .stats-banner { gap: 10px; margin: 16px 0 24px; }
    .stat-card { padding: 16px 8px; }
    .stat-num { font-size: 22px; margin-bottom: 2px; }
    .stat-label { font-size: 12px; }

    /* 学习路径整体：缩小外边距与内边距 */
    .learning-path { margin: 24px 0 12px; padding: 18px 0; border-radius: 12px; }
    .learning-path .container { padding: 0 6px; }
    .lane-grid { gap: 12px; padding: 0 8px; }

    /* 学习路径卡片：压缩 padding / 字号 / 边框 */
    .lane-card { padding: 16px 14px; border-top-width: 3px; border-radius: 10px; }
    .lane-card__head { gap: 10px; margin-bottom: 8px; }
    .lane-card__icon { font-size: 20px; width: 32px; height: 32px; border-radius: 6px; }
    .lane-card__title { font-size: 16px; }
    .lane-card__desc { font-size: 12px; min-height: 0; margin: 0 0 10px; line-height: 1.5; }
    .lane-card__posts { margin: 0 0 10px; }
    .lane-card__posts li { font-size: 12px; line-height: 1.5; padding: 3px 0; gap: 5px; }
    .lane-card__posts li i { margin-top: 3px; font-size: 9px; }
    .lane-card__more { font-size: 12px; margin-top: 6px; }
    .lane-card__empty { font-size: 11px; margin: 10px 0; }

    /* 首页 Tab 标签：在窄屏缩小字号与内边距，避免换行 */
    .home-tabs { margin-top: 8px; }
    .home-tabs .tabs { margin-bottom: 14px; }
    .home-tabs .tabs .tab a {
        font-size: 13px;
        padding: 0 10px;
        line-height: 44px;
        letter-spacing: 0;
    }
    .home-tabs__more .btn-flat { font-size: 13px; padding: 0 12px; }

    /* 文章卡片（推荐/热门/最新）：压缩 padding 与字号 */
    .post-card__body { padding: 12px 14px 14px; }
    .post-card__title { font-size: 15px; margin-bottom: 6px; }
    .post-card__meta { font-size: 11px; gap: 8px; margin-bottom: 6px; }
    .post-card__excerpt { font-size: 12px; line-height: 1.5; -webkit-line-clamp: 2; }
}

/* 极小屏（<=400px，老 iPhone/SE 1 代等）：stats-banner 改为单列 */
@media (max-width: 400px) {
    .stats-banner { grid-template-columns: 1fr; gap: 8px; }
    .stat-card { padding: 14px 10px; }
    .stat-num { font-size: 22px; }
    .home-tabs .tabs .tab a { font-size: 12px; padding: 0 6px; }
}

/* ============================================================
   MiniSearch 搜索结果样式
   在 matery.css 基础上扩展 .search-result-item / meta / tags / empty
   ============================================================ */
/* 结果卡片：每个 <li>  顶部一条主标题 + 分类 meta + 摘要 + 标签 */
#searchResult .search-result-list .search-result-item {
    border-bottom: 1px solid rgba(0, 0,0,.08);
    padding: 14px 0;
    list-style: none;
}
body.DarkMode #searchResult .search-result-list .search-result-item {
    border-bottom-color: rgba(255, 255, 255,.08);
}

/* 分类 meta（紧跟标题右侧的小字） */
#searchResult .search-result-meta {
    margin-left: 10px;
    font-size: 12px;
    color: #90a4ae;
    font-weight: normal;
    vertical:1px;
}
body.DarkMode #searchResult .search-result-meta { color: #78909c; }

/* 标签行（最底部小字） */
#searchResult .search-result-tags {
    margin: 4px 0 0;
    font-size: 11px;
    color: #b0bec5;
    line-height: 1.4;
}
body.DarkMode #searchResult .search-result-tags { color: #607d8b; }

/* 空结果 / 加载状态 / 出错提示 */
#searchResult .search-empty {
    margin: 18px 0 14px;
    font-size: 13px;
    color: #90a4ae;
    text-align: left;
}
#searchResult .search-empty strong { color: #e96900; }
body.DarkMode #searchResult .search-empty { color: #78909c; }
body.DarkMode #searchResult .search-empty strong { color: #ffb74d; }

/* 关键词高亮（默认样式 .search-keyword 由 matery.css 提供） */
#searchResult em.search-keyword {
    font-weight: 600;
    background-color: rgba(233, 105, 0, .12);
    padding: 1px 4px;
    border-radius: 2px;
}