/* ===== 设计 Token（唯一来源，禁止在组件内硬编码色值） ===== */
:root {
    /* Bootstrap 覆盖 */
    --bs-primary: #2563eb;                                    /* 品牌主色 */
    --bs-primary-rgb: 37, 99, 235;
    --bs-primary-text-emphasis: #1e40af;
    --bs-primary-bg-subtle: #eef4ff;
    --bs-primary-border-subtle: #c7dbfe;
    --bs-body-bg: #f8fafc;                                   /* 页面背景 */
    --bs-body-bg-rgb: 248, 250, 252;
    --bs-body-color: #0f172a;                                /* 正文 */
    --bs-body-color-rgb: 15, 23, 42;
    --bs-secondary-color: #475569;
    --bs-tertiary-color: #94a3b8;
    --bs-border-color: #e2e8f0;
    --bs-border-color-translucent: rgba(15, 23, 42, 0.08);
    --bs-border-radius: 0.75rem;                             /* 卡片圆角 */
    --bs-border-radius-sm: 0.625rem;
    --bs-border-radius-lg: 1rem;
    --bs-border-radius-pill: 50rem;
    --bs-box-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --bs-box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05);
    --bs-box-shadow-lg: 0 24px 48px -12px rgba(15, 23, 42, 0.14);
    --bs-link-color: #2563eb;
    --bs-link-hover-color: #1d4ed8;

    /* 应用语义变量 */
    --app-bg: #f8fafc;
    --app-surface: #ffffff;
    --app-surface-hover: #f6f9ff;
    --app-text: #0f172a;
    --app-text-muted: #475569;
    --app-text-faint: #94a3b8;
    --app-border: #e8edf4;
    --app-shadow: 0 2px 4px rgba(15, 23, 42, 0.05);
    --app-shadow-hover: 0 12px 24px -8px rgba(37, 99, 235, 0.16);
    --app-gradient: linear-gradient(120deg, #2563eb, #60a5fa);  /* Hero 渐变 */
    --app-glow: rgba(37, 99, 235, 0.35);
    --app-glow-soft: rgba(37, 99, 235, 0.12);
    --app-grid: rgba(37, 99, 235, 0.06);

    /* 博客语义 */
    --app-hero-text: #ffffff;                                /* Hero 文字 */
    --app-tag-bg: #eef4ff;                                   /* 栏目徽章底色 */
    --app-tag-text: #1e40af;                                 /* 栏目徽章文字 */
    --app-like: #ef4444;                                     /* 点赞/热度红 */

    /* 精选 Banner 装饰 */
    --app-ring-soft: rgba(37, 99, 235, 0.06);                /* Banner 装饰环内圈 */
    --app-ring-softer: rgba(37, 99, 235, 0.04);              /* Banner 装饰环外圈 */
    --app-cover-shadow: rgba(37, 99, 235, 0.18);             /* Banner 封面阴影 */

    /* 商城语义：免费 / Pro 徽章 */
    --app-free: #059669;                                     /* 免费徽章绿 */
    --app-free-bg: rgba(5, 150, 105, 0.12);
    --app-pro: #7c3aed;                                      /* Pro 徽章紫 */
    --app-pro-grad: linear-gradient(120deg, #7c3aed, #a78bfa);

    /* 文章正文排版（Markdown 渲染） */
    --app-code-bg: #f1f5f9;                                  /* 代码块背景 */
    --app-inline-code-bg: #eef4ff;                           /* 行内代码背景 */
    --app-table-stripe: #f8fafc;                             /* 表格斑马纹 */
    --app-quote-bg: linear-gradient(135deg, #eef4ff, #f8faff); /* 引用块渐变底 */

    /* 代码高亮 Token 配色（highlight.js，亮色） */
    --hl-comment: #6a737d;    /* 注释 */
    --hl-keyword: #d73a49;    /* 关键字 */
    --hl-string: #032f62;     /* 字符串 */
    --hl-number: #005cc5;     /* 数字 */
    --hl-title: #6f42c1;      /* 函数/标题 */
    --hl-attr:  #22863a;      /* 属性 */
    --hl-built: #e36209;      /* 内建类型 */
    --hl-meta:  #005cc5;      /* 标签/元信息 */
}

[data-bs-theme="dark"] {
    --bs-primary: #3b82f6;
    --bs-primary-rgb: 59, 130, 246;
    --bs-primary-text-emphasis: #93c5fd;
    --bs-primary-bg-subtle: rgba(59, 130, 246, 0.16);
    --bs-primary-border-subtle: rgba(59, 130, 246, 0.4);
    --bs-body-bg: #0b1220;
    --bs-body-bg-rgb: 11, 18, 32;
    --bs-body-color: #e2e8f0;
    --bs-body-color-rgb: 226, 232, 240;
    --bs-secondary-color: #94a3b8;
    --bs-tertiary-color: #64748b;
    --bs-border-color: #1e293b;
    --bs-border-color-translucent: rgba(148, 163, 184, 0.12);
    --bs-box-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --bs-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    --bs-box-shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.55);
    --bs-link-color: #60a5fa;
    --bs-link-hover-color: #93c5fd;

    --app-bg: #0b1220;
    --app-surface: #101a2e;
    --app-surface-hover: #16233d;
    --app-text: #e2e8f0;
    --app-text-muted: #94a3b8;
    --app-text-faint: #64748b;
    --app-border: #1e293b;
    --app-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    --app-shadow-hover: 0 16px 32px -8px rgba(0, 0, 0, 0.5);
    --app-gradient: linear-gradient(120deg, #3b82f6, #93c5fd);
    --app-glow: rgba(59, 130, 246, 0.35);
    --app-glow-soft: rgba(59, 130, 246, 0.12);
    --app-grid: rgba(96, 165, 250, 0.06);

    --app-tag-bg: rgba(59, 130, 246, 0.16);
    --app-tag-text: #93c5fd;
    --app-like: #f87171;

    /* 精选 Banner 装饰（暗色） */
    --app-ring-soft: rgba(96, 165, 250, 0.08);
    --app-ring-softer: rgba(96, 165, 250, 0.05);
    --app-cover-shadow: rgba(0, 0, 0, 0.45);

    /* 商城语义：免费 / Pro 徽章（暗色） */
    --app-free: #34d399;
    --app-free-bg: rgba(52, 211, 153, 0.14);
    --app-pro: #c4b5fd;
    --app-pro-grad: linear-gradient(120deg, #7c3aed, #a78bfa);

    /* 文章正文排版（Markdown 渲染） */
    --app-code-bg: #151e31;                                  /* 代码块背景 */
    --app-inline-code-bg: rgba(59, 130, 246, 0.14);          /* 行内代码背景 */
    --app-table-stripe: #0e1730;                             /* 表格斑马纹 */
    --app-quote-bg: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(59, 130, 246, 0.06)); /* 引用块渐变底 */

    /* 代码高亮 Token 配色（highlight.js，暗色） */
    --hl-comment: #8b949e;
    --hl-keyword: #ff7b72;
    --hl-string: #a5d6ff;
    --hl-number: #79c0ff;
    --hl-title: #d2a8ff;
    --hl-attr:  #7ee787;
    --hl-built: #ffa657;
    --hl-meta:  #79c0ff;
}

/* ===== 基础布局 ===== */
html { font-size: 14px; }
@media (min-width: 768px) { html { font-size: 16px; } }

/* 页脚吸底：body flex 列布局 */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ===== 特效类（fx- 前缀，避免与 Bootstrap 冲突） ===== */

/* Hero 渐变背景 */
.fx-hero {
    background: var(--app-gradient);
    color: var(--app-hero-text);
}

/* 卡片悬停上浮 */
.fx-card-hover {
    transition: transform .2s ease, box-shadow .2s ease;
}
.fx-card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 .75rem 1.5rem rgba(37, 99, 235, .12);
}

/* 栏目徽章 */
.fx-tag {
    display: inline-block;
    padding: .2rem .6rem;
    font-size: .75rem;
    border-radius: 999px;
    background: var(--app-tag-bg);
    color: var(--app-tag-text);
}

/* 热度红（点赞/爱心图标） */
.fx-like {
    color: var(--app-like);
}

/* ===== 博客页组件样式 ===== */

/* 品牌渐变文字 */
.brand-text {
    font-weight: 800;
    background: var(--app-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* 通用 muted 文本 */
.text-muted-app { color: var(--app-text-muted) !important; }

/* 首页双域卡：整卡链接去下划线
   （asp-page Tag Helper 渲染的 <a> 不携带页面 CSS 隔离作用域属性，
   隔离样式表中的 .domain-card[b-xxx] 无法命中锚点，必须用全局规则） */
a.domain-card,
a.domain-card:hover,
a.domain-card:focus {
    text-decoration: none;
}

/* ===== Hero：紧凑首屏 + 渐变光晕 + 细网格 ===== */
.hero {
    position: relative;
    overflow: hidden;
    background: var(--app-bg);
    border-bottom: 1px solid var(--app-border);
}

/* 搜索区容器：搜索框 + 建议列表同宽，宽度自适应（≤560px） */
.search-wrap {
    max-width: 560px;
}
.hero::before {
    content: "";
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 60%;
    background:
        radial-gradient(60% 60% at 50% 0%, var(--app-glow-soft), transparent 70%),
        radial-gradient(40% 45% at 20% 10%, rgba(37, 99, 235, 0.07), transparent 70%),
        radial-gradient(40% 45% at 80% 15%, rgba(96, 165, 250, 0.09), transparent 70%);
    pointer-events: none;
}
.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--app-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--app-grid) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(70% 70% at 50% 20%, #000 30%, transparent 100%);
    mask-image: radial-gradient(70% 70% at 50% 20%, #000 30%, transparent 100%);
    pointer-events: none;
}

/* ===== 搜索框 ===== */
.search-box {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--bs-border-radius-pill);
    padding: 0.4rem 0.4rem 0.4rem 1.25rem;
    box-shadow: var(--bs-box-shadow);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    max-width: 560px;
}
.search-box:focus-within {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 4px var(--app-glow-soft);
}
.search-box input {
    border: none;
    outline: none;
    background: transparent;
    color: var(--app-text);
    font-size: 0.95rem;
}

/* ===== 搜索建议（独立搜索，不混入文章列表）=====
   正常文档流渲染：自动撑高 hero 区域，不被裁剪、不遮挡下方内容 */
.fx-suggest {
    margin-top: 0.5rem;   /* 与搜索框的间距 */
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--bs-box-shadow-lg);
    overflow: hidden;
    padding: 0.375rem;
    text-align: left;
}
.fx-suggest-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    border-radius: 0.625rem;
    color: var(--app-text);
    text-decoration: none;
    transition: background-color 0.15s ease;
}
.fx-suggest-item:hover,
.fx-suggest-item.active {
    background: var(--app-surface-hover);
}
/* 复用 category-badge 渐变色，覆盖 absolute → static，缩小尺寸 */
.fx-suggest-tag {
    position: static;
    box-shadow: none;
    flex-shrink: 0;
    font-size: 0.7rem;
    padding: 0.18rem 0.6rem;
}
.fx-suggest-text {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.fx-suggest-title {
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fx-suggest-desc {
    font-size: 0.75rem;
    color: var(--app-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fx-suggest-meta {
    flex-shrink: 0;
    font-size: 0.78rem;
    color: var(--app-text-muted);
}
.fx-suggest-empty {
    padding: 1rem 0.5rem;
    text-align: center;
    color: var(--app-text-faint);
    font-size: 0.875rem;
}

/* ===== 区块标题 ===== */
.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
    border: 1px solid var(--bs-primary-border-subtle);
    padding: 0.28rem 0.85rem;
    border-radius: var(--bs-border-radius-pill);
}

/* ===== 栏目导航条 ===== */
.cat-strip {
    background: var(--app-surface);
    border-bottom: 1px solid var(--app-border);
}
.cat-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--app-border);
    border-radius: 0.75rem;
    background: var(--app-surface);
    color: var(--app-text);
    text-decoration: none;
    transition: all 0.18s ease;
}
.cat-item:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--bs-primary-rgb), 0.45);
    color: var(--bs-primary);
    box-shadow: var(--bs-box-shadow);
}
.cat-item i {
    color: var(--bs-primary);
    font-size: 1.15rem;
}

/* ===== 精选 Banner 轮播（商品卡片式） ===== */
.carousel-banner {
    box-shadow: var(--bs-box-shadow-lg);
    border: 1px solid var(--app-border);
    transition: box-shadow 0.25s ease;
    overflow: hidden;
    /* 亮色主题纯白底，暗色主题保持深色底 */
    background: var(--bs-white);
}
[data-bs-theme="dark"] .carousel-banner {
    background: var(--bs-body-bg);
}
/* hover 投影增强：配合内部卡片放大产生浮起感 */
.carousel-banner:hover {
    box-shadow: var(--app-shadow-hover);
}
/* 轮播卡片容器：卡片式浅底，Token 驱动自动适配明暗主题 */
.banner-slide {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    aspect-ratio: 6 / 1;
    color: var(--bs-body-color);
    /* 透明底：透出 .carousel-banner 容器的白底/暗色底 */
    background: transparent;
    padding-inline: 4rem;
    cursor: pointer;
    /* hover 放大过渡 */
    transition: transform 0.25s ease;
}
/* hover 卡片放大：轻微放大配合外层投影增强产生浮起感 */
.banner-slide:hover {
    transform: scale(1.02);
}
.banner-slide::after {
    content: "";
    position: absolute;
    right: -3rem;
    top: 50%;
    transform: translateY(-50%);
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 0 0 34px var(--app-ring-soft), 0 0 0 68px var(--app-ring-softer);
    pointer-events: none;
}
.banner-slide .banner-icon {
    font-size: 2.75rem;
    color: var(--bs-primary);
}
/* 左侧文案区 */
.banner-body {
    position: relative;
    z-index: 1;
    min-width: 0;
}
.banner-chips {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.375rem;
}
.banner-badge {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--app-tag-text);
    background: var(--app-tag-bg);
    border-radius: 999px;
    padding: 0.125rem 0.625rem;
}
.banner-tag {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
    border-radius: 999px;
    padding: 0.125rem 0.5rem;
}
.banner-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.banner-desc {
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
    margin-bottom: 0.625rem;
}
.banner-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.banner-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--bs-primary);
}
.banner-meta {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}
/* 右侧商品封面：有图显示图，无图回退品牌图标砖 */
.banner-cover {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: clamp(160px, 16vw, 240px);
    aspect-ratio: 16 / 9;
    height: auto;
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--app-tag-bg);
    box-shadow: 0 6px 18px var(--app-cover-shadow);
}
.banner-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.banner-cover .bi {
    font-size: 2.5rem;
    color: var(--bs-primary);
}
/* 轮播封面 Emoji 图标砖（数据库 Icon 为 Emoji 时与 bi 图标同尺寸对齐） */
.banner-icon-emoji {
    font-size: 2.5rem;
    line-height: 1;
}
/* ===== 博客/软件轮播右侧封面使用默认样式，与资源集市页 banner-cover 保持一致 ===== */
.carousel-banner .carousel-indicators {
    margin-bottom: 0.6rem;
}
.carousel-banner .carousel-indicators [data-bs-target] {
    width: 26px;
    height: 4px;
    border-radius: 2px;
    background-color: var(--app-border);
}
.carousel-banner .carousel-indicators [data-bs-target].active {
    background-color: var(--bs-primary);
}
.carousel-banner .carousel-control-prev,
.carousel-banner .carousel-control-next {
    top: 50%;
    bottom: auto;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: 50%;
    background-color: var(--bs-primary);
    box-shadow: var(--bs-box-shadow-sm);
    opacity: 0.9;
    transform: translateY(-50%);
    transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.carousel-banner .carousel-control-prev {
    left: 1rem;
}
.carousel-banner .carousel-control-next {
    right: 1rem;
}
.carousel-banner:hover .carousel-control-prev,
.carousel-banner:hover .carousel-control-next {
    opacity: 1;
}
/* 左右切换按钮 hover：放大 + 投影增强，与卡片浮起感呼应 */
.carousel-banner .carousel-control-prev:hover,
.carousel-banner .carousel-control-next:hover {
    transform: translateY(-50%) scale(1.12);
    box-shadow: var(--app-shadow-hover);
}
/* Bootstrap 默认箭头为白色 SVG，缩放到圆形按钮内 */
.carousel-banner .carousel-control-prev-icon,
.carousel-banner .carousel-control-next-icon {
    width: 1rem;
    height: 1rem;
    background-size: 1rem 1rem;
}

/* 窄屏适配：隐藏封面图，避免 5:1 比例挤压文案 */
@media (max-width: 767.98px) {
    .banner-slide {
        aspect-ratio: auto;
        padding: 2.75rem;
    }
    .banner-cover {
        display: none;
    }
    .carousel-banner .carousel-control-prev,
    .carousel-banner .carousel-control-next {
        width: 2rem;
        height: 2rem;
    }
    .carousel-banner .carousel-control-prev { left: 0.5rem; }
    .carousel-banner .carousel-control-next { right: 0.5rem; }
}

/* ===== 文章卡片 ===== */
.post-card {
    display: block;
    color: var(--app-text);
    text-decoration: none;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 0.9rem;
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.post-card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--bs-primary-rgb), 0.45);
    box-shadow: var(--app-shadow-hover);
}
.post-cover {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--app-surface-hover);
}
.post-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.post-card:hover .post-cover img {
    transform: scale(1.06);
}

/* 栏目徽章 */
.category-badge {
    position: absolute;
    left: 0.7rem;
    bottom: 0.7rem;
    padding: 0.22rem 0.8rem;
    border-radius: var(--bs-border-radius-pill);
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    background: rgba(15, 23, 42, 0.55); /* 半透明深色底，压在图片上保证白字可读 */
    backdrop-filter: blur(6px);
    box-shadow: var(--bs-box-shadow-sm);
}
.category-badge.is-frontend { background: linear-gradient(120deg, #0ea5e9, #38bdf8); }
.category-badge.is-backend  { background: linear-gradient(120deg, #f59e0b, #fbbf24); }
.category-badge.is-cloud    { background: linear-gradient(120deg, #8b5cf6, #a78bfa); }
.category-badge.is-ai       { background: linear-gradient(120deg, #ef4444, #f87171); }
.category-badge.is-tools    { background: linear-gradient(120deg, #10b981, #34d399); }
.category-badge.is-arch     { background: linear-gradient(120deg, #f97316, #fb923c); }

/* 点赞心形 */
.like-btn {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--app-text-muted);
    font-size: 0.95rem;
    box-shadow: var(--bs-box-shadow);
    transition: all 0.18s ease;
}
.like-btn:hover { transform: scale(1.1); }
.like-btn.liked { color: var(--app-like); }
.like-btn.liked i { animation: heartPop 0.3s ease; }
@keyframes heartPop {
    0%  { transform: scale(0.6); }
    60% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

/* 栏目小标签 */
.tag-chip {
    padding: 0.18rem 0.6rem;
    border-radius: var(--bs-border-radius-pill);
    background: var(--app-tag-bg);
    color: var(--app-tag-text);
    font-size: 0.72rem;
    font-weight: 600;
}

/* 文章列表行内分类徽章（补齐样式，与轮播封面/图标块同色系） */
.cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.65rem;
    border-radius: var(--bs-border-radius-pill);
    font-size: 0.74rem;
    font-weight: 600;
    color: #fff;
    background: var(--app-gradient);
}
.cat-chip.is-frontend { background: linear-gradient(120deg, #0ea5e9, #38bdf8); }
.cat-chip.is-backend  { background: linear-gradient(120deg, #f59e0b, #fbbf24); }
.cat-chip.is-cloud    { background: linear-gradient(120deg, #8b5cf6, #a78bfa); }
.cat-chip.is-ai       { background: linear-gradient(120deg, #ef4444, #f87171); }
.cat-chip.is-tools    { background: linear-gradient(120deg, #10b981, #34d399); }
.cat-chip.is-arch     { background: linear-gradient(120deg, #f97316, #fb923c); }

/* 作者头像 */
.avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    background: var(--app-gradient);
    flex-shrink: 0;
}

/* 筛选 Tab */
.filter-tab {
    padding: 0.4rem 1rem;
    border-radius: var(--bs-border-radius-pill);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--app-text-muted);
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
    background: transparent;
}
.filter-tab:hover { background: var(--app-surface-hover); color: var(--app-text); }
.filter-tab.active {
    background: var(--app-text);
    color: var(--app-bg);
    font-weight: 600;
}

/* ===== 文章列表（文字列表式） ===== */
.post-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* 列表项：左侧分类色条 + 内容区 */
.post-list-item {
    display: flex;
    align-items: stretch;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 0.9rem;
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.post-list-item:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--bs-primary-rgb), 0.45);
    box-shadow: var(--app-shadow-hover);
}

/* 左侧分类图标区：浅底圆角图标块（分类渐变小方块，与轮播封面同色系） */
.post-list-aside {
    flex-shrink: 0;
    width: 220px;
    padding: 0.75rem;          /* 图片与卡片边缘留呼吸感，左右对称 */
    display: flex;
    align-items: center;
    justify-content: center;
}
.post-list-aside img {
    width: 100%;
    aspect-ratio: 16 / 11;    /* 锁定比例 → 高度≈151px，自行决定 */
    object-fit: cover;
    border-radius: 1.1rem;         /* 更圆润 */
    box-shadow: var(--app-shadow); /* 比 sm 更立体的柔和阴影 */
    display: block;
}

/* 内容区 */
.post-list-body {
    padding: 1.1rem 1.25rem;
    min-width: 0; /* 防止 flex 子项文字溢出 */
}

/* 标题 / 摘要两行截断，与原来图片卡片一致的阅读节奏 */
.post-list-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.18s ease;
}
.post-list-title:hover { color: var(--bs-primary); }
.post-list-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 底部元信息分隔线 */
.post-list-foot {
    border-top: 1px dashed var(--app-border);
}

/* 行内点赞按钮（数字版，复用 heartPop 动画） */
.like-btn-text {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: none;
    background: transparent;
    padding: 0.2rem 0.4rem;
    border-radius: 0.5rem;
    color: var(--app-text-muted);
    font-size: 0.875rem;
    transition: color 0.18s ease, transform 0.18s ease;
}
.like-btn-text:hover { color: var(--app-like); transform: scale(1.05); }
.like-btn-text.liked { color: var(--app-like); font-weight: 600; }
.like-btn-text.liked i { animation: heartPop 0.3s ease; }

/* 移动端收窄左侧色条 */
@media (max-width: 575.98px) {
    .post-list-aside {
        width: 132px;
        padding: 0.5rem;       /* 移动端收紧内边距 */
    }
    .post-list-aside img {
        width: 100%;
        aspect-ratio: 16 / 11;
        border-radius: 1rem;
    }
}

/* ===== CTA 订阅横幅 ===== */
.cta-band {
    background: linear-gradient(120deg, #1d4ed8 0%, #2563eb 55%, #3b82f6 100%);
    border-radius: var(--bs-border-radius-lg);
    position: relative;
    overflow: hidden;
}
.cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(50% 80% at 15% 0%, rgba(255, 255, 255, 0.18), transparent 70%),
        radial-gradient(45% 70% at 90% 100%, rgba(255, 255, 255, 0.12), transparent 70%);
    pointer-events: none;
}
.cta-email {
    max-width: 440px;
    border-radius: var(--bs-border-radius-pill);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(6px);
}
.cta-email input {
    border: none;
    outline: none;
    background: transparent;
    color: #fff;
    padding: 0.6rem 1.1rem;
    width: 100%;
}
.cta-email input::placeholder { color: rgba(255, 255, 255, 0.75); }

/* ===== 按钮圆角统一 ===== */
.btn { --bs-btn-border-radius: 0.65rem; }

/* Vue 挂载前隐藏，防止模板闪烁 */
[v-cloak] { display: none; }

/* ===== 布局美化（_Layout 专用） ===== */

/* 主题切换平滑过渡 */
html {
    transition: background-color .35s ease, color .35s ease;
}

/* 导航栏毛玻璃效果 */
.navbar-fx {
    background: #ffffff !important;
    backdrop-filter: blur(16px) saturate(1.6);
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
    border-bottom: 1px solid var(--bs-border-color-translucent) !important;
}
[data-bs-theme="dark"] .navbar-fx {
    background: rgba(var(--bs-body-bg-rgb), 0.65) !important;
}

/* 滚动后导航条：加深背景 + 阴影 */
.navbar-fx.scrolled {
    background: var(--bs-primary-bg-subtle) !important;
    box-shadow: 0 8px 24px -8px rgba(15, 23, 42, 0.14);
}
[data-bs-theme="dark"] .navbar-fx.scrolled {
    background: rgba(var(--bs-body-bg-rgb), 0.8) !important;
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.55);
}

/* 品牌 Logo 微动效 */
.fx-brand {
    display: inline-flex;
    align-items: center;
    transition: opacity .2s ease;
    text-decoration: none !important;
}

/* 品牌图标方块：居中显示，无背景 */
.fx-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-right: 0.55rem;
    transition: transform .25s ease;
}
.fx-brand-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}
.fx-brand:hover .fx-brand-mark {
    transform: scale(1.08) rotate(-6deg);
    box-shadow: 0 6px 16px var(--app-glow);
}

/* 品牌文字：渐变字 */
.fx-brand-text {
    background: var(--app-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 1.15rem;
}

/* 导航链接圆角高亮 */
.navbar-nav .nav-link {
    position: relative;
    border-radius: 0.5rem;
    padding: 0.45rem 0.75rem;
    margin: 0 0.1rem;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
.navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.25rem;
    height: 2px;
    border-radius: 2px;
    background: var(--bs-primary);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .22s ease;
}
.navbar-nav .nav-link:hover {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary) !important;
    transform: translateY(-1px);
}
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
    transform: scaleX(1);
}
.navbar-nav .nav-link.active {
    background: var(--app-gradient);
    color: #fff !important;
    font-weight: 600;
}

/* 主题切换开关（日月切换） */
.theme-switch {
    position: relative;
    width: 48px;
    height: 26px;
    border-radius: 999px;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    cursor: pointer;
    transition: background .3s ease, border-color .3s ease;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.06);
}
.theme-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--app-gradient);
    box-shadow: 0 1px 4px rgba(37,99,235,.35);
    transition: transform .3s cubic-bezier(.4,.0,.2,1), box-shadow .3s ease;
}
[data-bs-theme="dark"] .theme-switch::after {
    transform: translateX(22px);
    box-shadow: 0 1px 4px rgba(96,165,250,.4);
}
.theme-switch .bi {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.72rem;
    transition: opacity .3s ease;
    color: var(--app-text-muted);
}
.theme-switch .bi-sun-fill {
    left: 5px;
}
.theme-switch .bi-moon-stars-fill {
    right: 5px;
}
[data-bs-theme="light"] .theme-switch .bi-moon-stars-fill { opacity: 0.4; }
[data-bs-theme="dark"]  .theme-switch .bi-sun-fill { opacity: 0.4; }

/* 移动端折叠菜单：卡片化，毛玻璃 */
@media (max-width: 991.98px) {
    .navbar-collapse {
        margin-top: 0.5rem;
        padding: 0.5rem;
        background: rgba(var(--bs-body-bg-rgb), 0.9);
        backdrop-filter: blur(16px) saturate(1.6);
        -webkit-backdrop-filter: blur(16px) saturate(1.6);
        border: 1px solid var(--bs-border-color-translucent);
        border-radius: var(--bs-border-radius);
        box-shadow: var(--bs-box-shadow-lg);
    }
}

/* 页脚美化 */
.site-footer {
    background: var(--app-surface);
    border-top: 1px solid var(--app-border);
    transition: background .3s ease;
}
.site-footer .footer-brand {
    font-weight: 700;
    background: var(--app-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.site-footer a {
    transition: color .15s ease;
}
.site-footer a:hover {
    color: var(--bs-primary) !important;
}
.site-footer .footer-divider {
    width: 1px;
    height: 16px;
    background: var(--app-border);
}

/* ===== 搜索建议下拉：正常文档流，撑高 hero，两行卡片（和 Weblog/Index.cshtml 完全对齐）===== */
.fx-suggest {
    margin-top: 0.6rem;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--bs-box-shadow-lg);
    padding: 0.5rem;
    text-align: left;
    animation: suggestIn 0.18s ease;
}
@keyframes suggestIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fx-suggest-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.65rem;
    border-radius: 0.55rem;
    color: var(--app-text);
    text-decoration: none;
    transition: background-color 0.12s ease;
}
.fx-suggest-item:hover,
.fx-suggest-item.active {
    background: var(--app-surface-hover);
}
.fx-suggest-tag {
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.12rem 0.55rem;
    border-radius: var(--bs-border-radius-pill);
    background: var(--app-tag-bg);
    color: var(--app-text-white);
    letter-spacing: 0.03em;
}
/* Weblog 里已有的 tag class 兼容 */
.fx-suggest-tag.is-frontend { background: linear-gradient(120deg,#6366f1,#8b5cf6); }
.fx-suggest-tag.is-backend  { background: linear-gradient(120deg,#0891b2,#06b6d4); }
.fx-suggest-tag.is-cloud    { background: linear-gradient(120deg,#0369a1,#0ea5e9); }
.fx-suggest-tag.is-ai       { background: linear-gradient(120deg,#b45309,#f59e0b); }
.fx-suggest-tag.is-tools    { background: linear-gradient(120deg,#059669,#10b981); }
.fx-suggest-tag.is-arch     { background: linear-gradient(120deg,#64748b,#94a3b8); }
.fx-suggest-text {
    flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem;
}
.fx-suggest-title {
    font-size: 0.88rem; font-weight: 600; line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fx-suggest-desc {
    font-size: 0.75rem; color: var(--app-text-muted); line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fx-suggest-meta {
    flex-shrink: 0;
    font-size: 0.78rem;
    color: var(--app-text-muted);
}
.fx-suggest-empty {
    padding: 1rem 0.5rem; text-align: center; color: var(--app-text-faint); font-size: 0.875rem;
}

/* ===== 代码高亮（highlight.js，Markdown 正文代码块语法着色）===== */
pre code.hljs {
    display: block;
    padding: 0;
    background: transparent;
}
.hljs-comment,
.hljs-quote { color: var(--hl-comment); font-style: italic; }
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-doctag { color: var(--hl-keyword); }
.hljs-string,
.hljs-regexp,
.hljs-addition { color: var(--hl-string); }
.hljs-number,
.hljs-symbol,
.hljs-bullet { color: var(--hl-number); }
.hljs-title,
.hljs-title.function_,
.hljs-section { color: var(--hl-title); font-weight: 600; }
.hljs-attr,
.hljs-attribute,
.hljs-variable,
.hljs-template-variable { color: var(--hl-attr); }
.hljs-built_in,
.hljs-type,
.hljs-class { color: var(--hl-built); }
.hljs-meta,
.hljs-name,
.hljs-tag { color: var(--hl-meta); }
.hljs-selector-class,
.hljs-selector-id,
.hljs-selector-pseudo { color: var(--hl-keyword); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }
.hljs-link { text-decoration: underline; }

/* ===== Markdown 正文统一样式（.markdown-body）=====
   博客文章 / 资源详情 / 软件详情 三处正文共用，替代各自的
   .article-body / .resource-body 重复样式（以 Weblog 版超集为基准） */
.markdown-body {
    font-size: 1rem;
    line-height: 1.9;
    color: var(--app-text);
    word-break: break-word;
    /* 卡片容器：与 Hero / 相关推荐卡片视觉呼应 */
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--bs-border-radius-lg);
    padding: 1.5rem;
    box-shadow: var(--bs-box-shadow-sm);
}
/* 桌面端加大正文内边距 */
@media (min-width: 768px) {
    .markdown-body { padding: 2rem 2.25rem; }
}

/* 标题装饰：h2 渐变下划线 + 品牌色竖条 / h3 左侧品牌色小竖条 */
.markdown-body h2 {
    font-size: 1.45rem;
    font-weight: 700;
    margin: 2.2rem 0 1rem;
    padding-bottom: .45rem;
    border-bottom: 2px solid transparent;
    background: linear-gradient(var(--app-border), var(--app-border)) bottom / 100% 1px no-repeat;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.markdown-body h2::before {
    content: "";
    display: inline-block;
    width: .35rem;
    height: 1.2rem;
    border-radius: 3px;
    background: var(--app-gradient);
    flex-shrink: 0;
}
.markdown-body h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 1.6rem 0 .8rem;
    display: flex;
    align-items: center;
    gap: .55rem;
}
.markdown-body h3::before {
    content: "";
    width: .25rem;
    height: 1em;
    border-radius: 3px;
    background: var(--bs-primary);
    flex-shrink: 0;
}
.markdown-body h4 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 1.2rem 0 .6rem;
}
.markdown-body p {
    margin: 0.85rem 0;
    line-height: 1.9;
}

/* 列表：marker 品牌色 */
.markdown-body ul, .markdown-body ol {
    padding-left: 1.6rem;
    margin: 0.85rem 0;
}
.markdown-body li { margin: .35rem 0; }
.markdown-body li::marker { color: var(--bs-primary); }

/* 引用块：渐变底色 + 品牌左边线 + 角落引号水印 */
.markdown-body blockquote {
    position: relative;
    margin: 1.25rem 0;
    padding: 1rem 1.3rem;
    border-left: 4px solid var(--bs-primary);
    border-radius: 0 .75rem .75rem 0;
    background: var(--app-quote-bg);
    color: var(--app-text);
    box-shadow: var(--bs-box-shadow-sm);
    overflow: hidden;
}
.markdown-body blockquote > p { margin: 0; }
/* 多段引用：段间保留呼吸感 */
.markdown-body blockquote > p + p { margin-top: .6rem; }
/* 角落大引号水印：绝对定位右上，低透明度，不挤占正文 */
.markdown-body blockquote::before {
    content: "\201C";
    position: absolute;
    top: -.7rem;
    right: .7rem;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 4.5rem;
    line-height: 1;
    color: var(--bs-primary);
    opacity: .14;
    pointer-events: none;
}
/* 引用块内链接：品牌色 + 加粗，增强可读性 */
.markdown-body blockquote a { color: var(--bs-primary); font-weight: 600; }

/* 行内代码：淡蓝底 + 品牌色文字 + 细边框 */
.markdown-body code {
    font-family: 'Consolas', 'Fira Code', monospace;
    font-size: 0.92em;
    padding: .2rem .45rem;
    border-radius: .4rem;
    background: var(--app-inline-code-bg);
    border: 1px solid var(--bs-primary-border-subtle);
    color: var(--bs-primary-text-emphasis);
}

/* 键盘按键：模拟按键立体感 */
.markdown-body kbd {
    background: var(--app-code-bg);
    border: 1px solid var(--app-border);
    border-bottom-width: 2px;
    border-radius: .4rem;
    color: var(--app-text);
    font-family: 'Consolas', 'Fira Code', monospace;
    font-size: .85em;
    padding: .15rem .45rem;
}

/* 荧光笔高亮：品牌色半透明底衬 */
.markdown-body mark {
    background: linear-gradient(transparent 55%, rgba(var(--bs-primary-rgb), .25) 55%);
    color: inherit;
    padding: 0 .1em;
}

/* 代码块：Token 背景 + 圆角阴影 + 编辑器顶栏 */
.markdown-body pre {
    position: relative;
    margin: 1.25rem 0;
    padding: 3.1rem 1.15rem 1.15rem;
    border-radius: var(--bs-border-radius-lg);
    overflow-x: auto;
    background: var(--app-code-bg);
    border: 1px solid var(--app-border);
    box-shadow: var(--bs-box-shadow-sm);
}
.markdown-body pre::before {
    content: "";
    position: absolute;
    top: .85rem;
    left: 1.15rem;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--app-like);
    box-shadow: 1.05rem 0 0 #fbbf24, 2.1rem 0 0 #34d399;
}
.markdown-body pre code {
    padding: 0;
    background: transparent;
    color: inherit;
    font-size: 0.9em;
    border: none;
    display: block;
    line-height: 1.7;
}

/* 代码块横向滚动条：细条 + 品牌灰 thumb */
.markdown-body pre::-webkit-scrollbar { height: 8px; }
.markdown-body pre::-webkit-scrollbar-track { background: transparent; }
.markdown-body pre::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--app-muted) 35%, transparent);
    border-radius: 4px;
}
.markdown-body pre::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--app-muted) 55%, transparent);
}

/* 图片：正常 100% 宽度，上限 800px */
.markdown-body img {
    width: 100%;
    max-width: 800px;
    height: auto;
    border-radius: var(--bs-border-radius);
    margin: 1.25rem 0;
    border: 1px solid var(--app-border);
    box-shadow: var(--bs-box-shadow);
    transition: box-shadow .2s ease;
}
.markdown-body img:hover { box-shadow: var(--app-shadow-hover); }

/* 表格：圆角容器 + 表头品牌底色 + 斑马纹 + 行 hover + 竖向分隔线 */
.markdown-body table {
    width: 100%;
    margin: 1.25rem 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.92rem;
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    box-shadow: var(--bs-box-shadow-sm);
    border: 1px solid var(--app-border);
}
.markdown-body th, .markdown-body td {
    padding: .65rem .85rem;
    border-bottom: 1px solid var(--app-border);
}
.markdown-body th {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    font-weight: 600;
}
.markdown-body th:not(:last-child),
.markdown-body td:not(:last-child) { border-right: 1px solid var(--app-border); }
.markdown-body tbody tr:nth-child(even) { background: var(--app-table-stripe); }
.markdown-body tbody tr:hover { background: var(--app-surface-hover); }

/* 任务列表：勾选框对齐 + 品牌色 accent */
.markdown-body li > input[type="checkbox"] {
    margin-right: .45rem;
    vertical-align: middle;
    accent-color: var(--bs-primary);
}

/* 链接：虚线品牌色下划线 */
.markdown-body a {
    color: var(--bs-link-color);
    text-decoration: none;
    border-bottom: 1px dashed rgba(var(--bs-primary-rgb), .4);
    transition: all .15s ease;
}
.markdown-body a:hover {
    color: var(--bs-link-hover-color);
    border-bottom-style: solid;
}

/* 分割线：渐变淡出 */
.markdown-body hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--app-border), transparent);
    margin: 2rem 0;
}

/* ===== 移动端适配：收紧内边距与代码块 ===== */
@media (max-width: 575.98px) {
    .markdown-body { padding: 1.15rem 1rem; font-size: .95rem; }
    .markdown-body pre { padding: 2.7rem .85rem .85rem; }
    .markdown-body pre code { font-size: .82rem; }
    /* 表格横向滚动，防止撑破容器 */
    .markdown-body table { display: block; overflow-x: auto; }
}