/* /Components/Layout/AdminLayout.razor.rz.scp.css */
/* CSS for AdminLayout component */

/* 侧栏顶部 Banner。高度必须等于 --bb-layout-header-height ——
   BB 的 .layout-menu 高度按 calc(100% - var(--bb-layout-header-height)) 计算，
   侧栏顶部本来就预留了这么一个页首等高的位置；少这段菜单会向下溢出。 */
.admin-side-banner[b-2ordmdm1gt] {
    display: flex;
    align-items: center;
    gap: .625rem;
    height: var(--bb-layout-header-height);
    padding: 0 .625rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.admin-side-title[b-2ordmdm1gt] {
    font-size: 1.125rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 品牌标识方块：圆角尺寸没有对应的工具类，只做隔离的最小定制 */
.admin-brand-mark[b-2ordmdm1gt] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    font-size: 15px;
    flex-shrink: 0;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* 展示端主布局的隔离样式（Blazor CSS Isolation，仅作用于本组件）。
   原则：能用 Bootstrap 工具类 / BootstrapBlazor 组件的一律用它们，
   这里只保留工具类表达不了的「品牌标尺寸」与「导航横向滚动」。 */

.brand-mark[b-0dpxz45cny] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    font-size: 15px;
}

/* ── 顶栏 ───────────────────────────────────────────────── */
.site-brand[b-0dpxz45cny] {
    flex: 0 0 auto;
}

/* 站点名不换行：窄屏折行会顶出两行，把工具按钮挤走 */
.site-brand-text[b-0dpxz45cny] {
    line-height: 1.2;
    white-space: nowrap;
}

/* 导航：窄屏独占一行并横向滚动，桌面回到品牌右侧、占满中间 */
.site-nav[b-0dpxz45cny] {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: nowrap;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.site-nav[b-0dpxz45cny]::-webkit-scrollbar {
    display: none;
}

/* 导航项不压缩、文案不换行：分类再多也只是滚动，不会竖排 */
.site-nav > li[b-0dpxz45cny] {
    flex: 0 0 auto;
}

.site-nav .nav-link[b-0dpxz45cny] {
    white-space: nowrap;
}

.site-tools[b-0dpxz45cny] {
    flex: 0 0 auto;
}

@media (min-width: 992px) {
    .site-nav[b-0dpxz45cny] {
        flex: 1 1 auto;
        width: auto;
        margin-right: auto;
    }
}

/* 极窄屏（<360px）收起站点名，只留品牌标 */
@media (max-width: 359.98px) {
    .site-brand-text[b-0dpxz45cny] {
        display: none;
    }
}

/* ── 页脚备案（富文本） ───────────────────────────────────
   内容是 Markdown 渲染出来的 MarkupString，元素上没有隔离属性，
   所以后代选择器必须加 ::deep（否则编译成 p[b-xxx]，一条都匹配不上）。 */
.footer-filing[b-0dpxz45cny]  p,
.footer-filing[b-0dpxz45cny]  ul,
.footer-filing[b-0dpxz45cny]  ol {
    margin-bottom: .25rem;
}

.footer-filing[b-0dpxz45cny]  > *:last-child {
    margin-bottom: 0;
}

.footer-filing[b-0dpxz45cny]  a {
    color: inherit;
    text-decoration: none;
}

.footer-filing[b-0dpxz45cny]  a:hover,
.footer-filing[b-0dpxz45cny]  a:focus-visible {
    color: var(--bs-primary);
    text-decoration: underline;
}

/* 公安备案图标这类行内小图，别把行高撑开 */
.footer-filing[b-0dpxz45cny]  img {
    max-height: 16px;
    vertical-align: -3px;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-bmkdknvbo0],
.components-reconnect-repeated-attempt-visible[b-bmkdknvbo0],
.components-reconnect-failed-visible[b-bmkdknvbo0],
.components-pause-visible[b-bmkdknvbo0],
.components-resume-failed-visible[b-bmkdknvbo0],
.components-rejoining-animation[b-bmkdknvbo0] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-bmkdknvbo0],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-bmkdknvbo0],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-bmkdknvbo0],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-bmkdknvbo0],
#components-reconnect-modal.components-reconnect-retrying[b-bmkdknvbo0],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-bmkdknvbo0],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-bmkdknvbo0],
#components-reconnect-modal.components-reconnect-failed[b-bmkdknvbo0],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-bmkdknvbo0] {
    display: block;
}


#components-reconnect-modal[b-bmkdknvbo0] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-bmkdknvbo0 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-bmkdknvbo0 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-bmkdknvbo0 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-bmkdknvbo0]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-bmkdknvbo0 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-bmkdknvbo0 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-bmkdknvbo0 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-bmkdknvbo0 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-bmkdknvbo0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-bmkdknvbo0] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-bmkdknvbo0] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-bmkdknvbo0] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-bmkdknvbo0] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-bmkdknvbo0] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-bmkdknvbo0] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-bmkdknvbo0 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-bmkdknvbo0] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-bmkdknvbo0 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Admin/AdminLogin.razor.rz.scp.css */
/* AdminLogin 的隔离样式：只放 Bootstrap 工具类做不到的「整页居中」与「品牌标尺寸」。
   卡片 / 输入组 / 警告条 / 按钮一律用 Bootstrap 官方样式，不重写 UI。 */
.admin-login[b-cd7yyi3xvd] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.admin-login-card[b-cd7yyi3xvd] {
    width: 100%;
    max-width: 26rem;
}

.admin-brand-mark[b-cd7yyi3xvd] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    font-size: 20px;
    flex-shrink: 0;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* 首页专属样式：品牌区（Hero）+ 列表分节标题。
   颜色一律取 Bootstrap 令牌，亮 / 暗主题自动适配。
   ⚠ Hero 富文本是 Markdown 渲染出的 MarkupString，元素不带本组件的隔离属性，
   所有后代选择器必须走 ::deep（否则编译成 `.hero-rich h1[b-xxxx]` 全部失效）。 */

/* ── 品牌区 ─────────────────────────────────────────────── */
.home-hero[b-q3yhdb8u9k] {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid var(--bs-border-color);
    /* 三层叠加：左上主色光晕 + 右上信息色光晕 + 页面底色，形成柔和的品牌氛围 */
    background:
        radial-gradient(120% 150% at 0% 0%, color-mix(in srgb, var(--bs-primary) 15%, transparent) 0%, transparent 55%),
        radial-gradient(110% 130% at 100% 0%, color-mix(in srgb, var(--bs-info, #0dcaf0) 13%, transparent) 0%, transparent 60%),
        var(--bs-body-bg);
    box-shadow: var(--bs-box-shadow-sm);
}

/* 顶部品牌渐变条 */
.home-hero[b-q3yhdb8u9k]::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--bs-primary), var(--bs-info, #0dcaf0), var(--bs-primary));
    opacity: .9;
}

/* 右下角装饰光斑：不参与交互与朗读 */
.home-hero-glow[b-q3yhdb8u9k] {
    position: absolute;
    right: -60px;
    bottom: -90px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--bs-primary) 22%, transparent) 0%, transparent 68%);
    pointer-events: none;
}

.home-hero-body[b-q3yhdb8u9k] {
    position: relative;
    padding: clamp(1.6rem, 3.6vw, 3rem);
}

/* ── Hero 富文本排版 ─────────────────────────────────────── */
.hero-rich[b-q3yhdb8u9k] {
    max-width: 68ch;
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--bs-secondary-color);
}

.hero-rich[b-q3yhdb8u9k]  > :first-child {
    margin-top: 0 !important;
}

.hero-rich[b-q3yhdb8u9k]  > :last-child {
    margin-bottom: 0 !important;
}

.hero-rich[b-q3yhdb8u9k]  h1 {
    margin: 0 0 .85rem;
    font-size: clamp(1.75rem, 3.6vw, 2.45rem);
    font-weight: 700;
    line-height: 1.24;
    letter-spacing: -.02em;
    color: var(--bs-body-color);
}

.hero-rich[b-q3yhdb8u9k]  h2 {
    margin: 0 0 .7rem;
    font-size: clamp(1.3rem, 2.2vw, 1.6rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--bs-body-color);
}

.hero-rich[b-q3yhdb8u9k]  h3 {
    margin: 0 0 .6rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--bs-body-color);
}

.hero-rich[b-q3yhdb8u9k]  p {
    margin-bottom: .9rem;
}

.hero-rich[b-q3yhdb8u9k]  strong {
    color: var(--bs-body-color);
    font-weight: 600;
}

.hero-rich[b-q3yhdb8u9k]  ul,
.hero-rich[b-q3yhdb8u9k]  ol {
    padding-left: 1.25rem;
    margin-bottom: .9rem;
}

.hero-rich[b-q3yhdb8u9k]  li {
    margin-bottom: .3rem;
}

/* 回退文案（站点描述）：比正文大一档，撑起首屏 */
.hero-rich[b-q3yhdb8u9k]  .hero-lead {
    margin-bottom: 0;
    font-size: 1.15rem;
}

/* 普通链接：主色 + 细下划线，悬停加深 */
.hero-rich[b-q3yhdb8u9k]  a {
    color: var(--bs-primary);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--bs-primary) 40%, transparent);
    transition: border-color .15s ease, color .15s ease;
}

.hero-rich[b-q3yhdb8u9k]  a:hover {
    border-bottom-color: var(--bs-primary);
}

/* 独占一段的单个链接 = 行动按钮（富文本里写 `[开始阅读](#posts)` 即得） */
.hero-rich[b-q3yhdb8u9k]  p:has(> a:only-child) {
    margin: .4rem 0 0;
}

.hero-rich[b-q3yhdb8u9k]  p:has(> a:only-child) > a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem 1.1rem;
    border: 1px solid var(--bs-primary);
    border-radius: 999px;
    background: var(--bs-primary);
    color: #fff;
    font-size: .95rem;
    font-weight: 500;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--bs-primary) 30%, transparent);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.hero-rich[b-q3yhdb8u9k]  p:has(> a:only-child) > a:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--bs-primary) 35%, transparent);
}

.hero-rich[b-q3yhdb8u9k]  code {
    background: color-mix(in srgb, var(--bs-body-color) 8%, transparent);
    border-radius: .25rem;
    padding: .1rem .35rem;
    font-size: .875em;
    color: var(--bs-body-color);
}

.hero-rich[b-q3yhdb8u9k]  blockquote {
    margin: .2rem 0 .9rem;
    padding: .5rem .9rem;
    border-left: 3px solid color-mix(in srgb, var(--bs-primary) 60%, transparent);
    color: var(--bs-secondary-color);
    font-size: .975rem;
}

.hero-rich[b-q3yhdb8u9k]  img {
    max-width: 100%;
    border-radius: 12px;
}

/* ── 列表分节标题 ───────────────────────────────────────── */
.section-head[b-q3yhdb8u9k] {
    display: flex;
    align-items: flex-end;
    gap: .75rem;
    margin: 2.25rem 0 1rem;
}

.section-title[b-q3yhdb8u9k] {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--bs-body-color);
}

/* 左侧渐变竖条：分节标题的品牌记号 */
.section-title[b-q3yhdb8u9k]::before {
    content: "";
    width: 4px;
    height: 1.1em;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--bs-primary), var(--bs-info, #0dcaf0));
}

.section-sub[b-q3yhdb8u9k] {
    margin: .2rem 0 0 0.65rem;
    font-size: .78rem;
    color: var(--bs-secondary-color);
}

.section-link[b-q3yhdb8u9k] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    padding: .2rem .55rem;
    border-radius: 999px;
    border: 1px solid var(--bs-border-color);
    font-size: .78rem;
    color: var(--bs-secondary-color);
    text-decoration: none;
    transition: color .15s ease, border-color .15s ease;
}

.section-link:hover[b-q3yhdb8u9k] {
    color: var(--bs-primary);
    border-color: color-mix(in srgb, var(--bs-primary) 45%, var(--bs-border-color));
}

/* ── 列表容器 ───────────────────────────────────────────── */
.post-list[b-q3yhdb8u9k] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
/* /Components/Pages/PostPage.razor.rz.scp.css */
/* 文章详情页样式：封面 + 标题区 + 正文 + 页脚 + 上下篇 + 评论。
   颜色全部取 Bootstrap 令牌，亮 / 暗主题自动适配；正文排版在 Prose.razor.css。 */

/* ── 阅读进度条 ─────────────────────────────────────────── */
.post-progress[b-sqyai01pix] {
    position: fixed;
    inset: 0 0 auto 0;
    height: 3px;
    z-index: 1040;
    pointer-events: none;
}

.post-progress span[b-sqyai01pix] {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--bs-primary), var(--bs-info, #0dcaf0));
    box-shadow: 0 0 8px color-mix(in srgb, var(--bs-primary) 60%, transparent);
    transition: width .08s linear;
}

/* ── 文章卡片 ───────────────────────────────────────────── */
.post-article[b-sqyai01pix] {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--bs-box-shadow-sm);
}

/* 暗色下 body-bg 与页面底色相同，卡片会糊成一片 —— 换成第三级别底色做「浮起」 */
[data-bs-theme="dark"] .post-article[b-sqyai01pix],
[data-bs-theme="dark"] .comments-card[b-sqyai01pix],
[data-bs-theme="dark"] .post-nav-link[b-sqyai01pix] {
    background: var(--bs-tertiary-bg);
}

.post-cover[b-sqyai01pix] {
    margin: 0;
    /* 用固定高度而不是 aspect-ratio：aspect-ratio + max-height 会让 Chrome
       反过来按比例缩窄宽度，封面就填不满卡片（实测 966 宽的卡片里图片只有 720）。 */
    height: clamp(190px, 30vw, 360px);
    overflow: hidden;
    background: var(--bs-tertiary-bg);
}

.post-cover img[b-sqyai01pix] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.post-article-body[b-sqyai01pix] {
    padding: clamp(1.25rem, 3vw, 2.75rem);
}

/* ── 标题区 ─────────────────────────────────────────────── */
/* 面包屑：只放「首页 / 分类」路径级（当前文章名由下方 h1 承担，不重复渲染）。
   定位职责 > 装饰职责：小号灰字安静待着，绝不抢下方大标题的视觉焦点；
   悬停才给主题色 + 下划线，保证「这几级能点」仍然被发现。 */
.post-crumbs[b-sqyai01pix] {
    display: flex;
    flex-wrap: wrap; /* 窄屏：长分类名折行 */
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    color: var(--bs-secondary-color);
}

/* 可点级：静态只有文字 —— 没有 padding、没有背景块，宽度代价为零
   （胶囊方案被否掉的原因就是静态凭空变宽）。
   悬停时给一道「荧光笔」底纹，从左向右划过：位置不挪、字宽不变，
   比单纯换色更有质感，也不会像下划线那样和正文的链接下划线撞样式。 */
.post-crumbs a[b-sqyai01pix] {
    color: var(--bs-secondary-color);
    text-decoration: none;
    background-image: linear-gradient(
        to top,
        color-mix(in srgb, var(--bs-primary) 24%, transparent) 0 34%,
        transparent 34%);
    background-repeat: no-repeat;
    background-size: 0 100%;
    transition: background-size .3s cubic-bezier(.4, 0, .2, 1), color .18s ease;
}

.post-crumbs a:hover[b-sqyai01pix],
.post-crumbs a:focus-visible[b-sqyai01pix] {
    color: var(--bs-primary);
    background-size: 100% 100%;
    outline: none;
}

/* 首页小房子：给「路径起点」一个记号，比多写两个字省宽度 */
.post-crumbs-home i[b-sqyai01pix] {
    font-size: .85em;
    margin-right: .35em;
    opacity: .5;
    transition: opacity .18s ease;
}

.post-crumbs-home:hover i[b-sqyai01pix] {
    opacity: 1;
}

/* 分隔符：细角标（fa-angle-right）比 chevron 的笔画更轻，越淡越不抢标题 */
.post-crumbs-sep[b-sqyai01pix] {
    font-size: .58em;
    opacity: .38;
}

@media (prefers-reduced-motion: reduce) {
    .post-crumbs a[b-sqyai01pix] {
        transition: color .18s ease;
    }
}

.post-title[b-sqyai01pix] {
    margin: .7rem 0 .8rem;
    font-size: clamp(1.6rem, 3.4vw, 2.15rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.02em;
    color: var(--bs-body-color);
}

/* 摘要：比正文略大、颜色更淡，像「引子」而不是正文的第一段 */
.post-lead[b-sqyai01pix] {
    max-width: 68ch;
    margin: 0 0 1.1rem;
    font-size: 1.015rem;
    line-height: 1.78;
    color: var(--bs-secondary-color);
}

.post-meta[b-sqyai01pix] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem 1.15rem;
    padding-bottom: 1.35rem;
    border-bottom: 1px solid var(--bs-border-color);
    font-size: .8rem;
    color: var(--bs-secondary-color);
}

.post-meta > span[b-sqyai01pix],
.post-meta > time[b-sqyai01pix],
.post-meta > a[b-sqyai01pix] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: inherit;
    text-decoration: none;
}

.post-meta-comments:hover[b-sqyai01pix] {
    color: var(--bs-primary);
}

/* ── 页脚：标签 + 分享 ─────────────────────────────────── */
.post-footer[b-sqyai01pix] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    margin-top: 2.2rem;
    padding-top: 1.35rem;
    border-top: 1px solid var(--bs-border-color);
}

.post-tags[b-sqyai01pix] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.post-tags a[b-sqyai01pix] {
    /* 标签色：后台取色器配置，未配置时回落中性灰（变量由 TagBadge.Style 注入） */
    --fz-tag-fill: var(--fz-tag-color, #6b7280);
    display: inline-flex;
    align-items: center;
    padding: .18rem .6rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--fz-tag-fill) 13%, transparent);
    color: color-mix(in srgb, var(--fz-tag-fill) 78%, var(--bs-body-color));
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    transition: color .15s ease, background .15s ease;
}

.post-tags a:hover[b-sqyai01pix] {
    color: color-mix(in srgb, var(--fz-tag-fill) 85%, var(--bs-body-color));
    background: color-mix(in srgb, var(--fz-tag-fill) 22%, transparent);
}

/* 暗色主题：深色标签需要往白色方向提亮才够对比度 */
[data-bs-theme="dark"] .post-tags a[b-sqyai01pix] {
    color: color-mix(in srgb, var(--fz-tag-fill) 52%, #fff);
    background: color-mix(in srgb, var(--fz-tag-fill) 18%, transparent);
}

.post-share[b-sqyai01pix] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .28rem .8rem;
    border-radius: 999px;
    border: 1px solid var(--bs-border-color);
    background: transparent;
    color: var(--bs-secondary-color);
    font-size: .8rem;
    transition: color .15s ease, border-color .15s ease;
}

.post-share:hover[b-sqyai01pix] {
    color: var(--bs-primary);
    border-color: color-mix(in srgb, var(--bs-primary) 45%, var(--bs-border-color));
}

/* ── 上一篇 / 下一篇 ───────────────────────────────────── */
.post-nav[b-sqyai01pix] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}

.post-nav-link[b-sqyai01pix] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: .85rem 1.1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 14px;
    background: var(--bs-body-bg);
    text-decoration: none;
    min-width: 0;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.post-nav-link:hover[b-sqyai01pix] {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--bs-primary) 35%, var(--bs-border-color));
    box-shadow: 0 8px 22px -14px color-mix(in srgb, var(--bs-body-color) 40%, transparent);
}

.post-nav-next[b-sqyai01pix] {
    text-align: right;
    grid-column: 2;
}

.post-nav-label[b-sqyai01pix] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .74rem;
    color: var(--bs-secondary-color);
}

.post-nav-next .post-nav-label[b-sqyai01pix] {
    justify-content: flex-end;
}

.post-nav-title[b-sqyai01pix] {
    font-size: .92rem;
    font-weight: 500;
    color: var(--bs-body-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.post-nav-link:hover .post-nav-title[b-sqyai01pix] {
    color: var(--bs-primary);
}

@media (max-width: 575.98px) {
    .post-nav[b-sqyai01pix] {
        grid-template-columns: minmax(0, 1fr);
    }

    .post-nav-next[b-sqyai01pix] {
        grid-column: 1;
    }
}

/* ── 评论区 ─────────────────────────────────────────────── */
.comments-card[b-sqyai01pix] {
    margin-top: 1.25rem;
    padding: clamp(1.25rem, 2.5vw, 2rem);
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 18px;
    scroll-margin-top: 84px;
}

.comments-title[b-sqyai01pix] {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 1rem;
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--bs-body-color);
}

.comments-title i[b-sqyai01pix] {
    color: var(--bs-primary);
}

.comments-count[b-sqyai01pix] {
    padding: .05rem .5rem;
    border-radius: 999px;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    font-size: .76rem;
    font-weight: 500;
}

.comment-list[b-sqyai01pix] {
    display: flex;
    flex-direction: column;
}

.comment-item[b-sqyai01pix] {
    padding: 1rem 0;
    border-top: 1px solid var(--bs-border-color);
}

.comment-list > .comment-item:first-child[b-sqyai01pix] {
    border-top: 0;
    padding-top: 0;
}

.comment-head[b-sqyai01pix] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.comment-author[b-sqyai01pix] {
    font-size: .9rem;
    font-weight: 600;
    color: var(--bs-body-color);
}

.comment-reply-to[b-sqyai01pix] {
    font-size: .76rem;
    color: var(--bs-secondary-color);
}

.comment-time[b-sqyai01pix] {
    margin-left: auto;
    font-size: .74rem;
    color: var(--bs-secondary-color);
}

.comment-body[b-sqyai01pix] {
    margin: .5rem 0 0 2.4rem;
    font-size: .925rem;
    line-height: 1.7;
    color: var(--bs-body-color);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.comment-replies[b-sqyai01pix] {
    margin: .75rem 0 0 2.4rem;
    padding-left: 1rem;
    border-left: 2px solid var(--bs-border-color);
}

.comment-reply[b-sqyai01pix] {
    padding: .6rem 0;
    border-top: 1px dashed var(--bs-border-color);
}

.comment-reply:first-child[b-sqyai01pix] {
    border-top: 0;
    padding-top: 0;
}

.comment-reply .comment-body[b-sqyai01pix] {
    margin-left: 0;
    font-size: .9rem;
}

.comment-form[b-sqyai01pix] {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--bs-border-color);
}

/* ── 邮箱验证码 ─────────────────────────────────────────── */
/* 输入框 + 取码按钮同一行：格式校验在服务端，这里只负责把两者视觉上绑在一起 */
.comment-code-row[b-sqyai01pix] {
    display: flex;
    align-items: stretch;
    gap: .5rem;
}

.comment-code-input[b-sqyai01pix] {
    max-width: 12rem;
    font-family: var(--bs-font-monospace);
    font-weight: 600;
    letter-spacing: .35em;
}

.comment-code-input[b-sqyai01pix]::placeholder {
    font-family: var(--bs-body-font-family);
    font-weight: 400;
    letter-spacing: normal;
}

.comment-code-btn[b-sqyai01pix] {
    flex: 0 0 auto;
    min-width: 7.5rem;
    white-space: nowrap;
}

/* 发送结果提示：空的时候不占位（:empty 才不显示），有内容才出现一行 */
.comment-code-msg[b-sqyai01pix] {
    margin-top: .45rem;
    font-size: .8rem;
    line-height: 1.55;
    color: var(--bs-secondary-color);
    overflow-wrap: anywhere;
}

.comment-code-msg:empty[b-sqyai01pix] {
    display: none;
}

.comment-code-msg[data-kind="success"][b-sqyai01pix] {
    color: var(--bs-success-text-emphasis, #0f5132);
}

.comment-code-msg[data-kind="danger"][b-sqyai01pix] {
    color: var(--bs-danger-text-emphasis, #842029);
}

.comment-hint[b-sqyai01pix] {
    font-size: .78rem;
    line-height: 1.5;
    color: var(--bs-secondary-color);
}

/* 窄屏：输入框让出宽度、按钮收窄，一行放得下就不换行 ——
   分成两行会把「取码」和「填码」的视觉关联切断；只有极窄（<360px）才允许堆叠 */
@media (max-width: 575.98px) {
    .comment-code-row[b-sqyai01pix] {
        flex-wrap: nowrap;
    }

    .comment-code-input[b-sqyai01pix] {
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
    }

    .comment-code-btn[b-sqyai01pix] {
        min-width: 6.5rem;
        padding-inline: .6rem;
    }
}

@media (max-width: 359.98px) {
    .comment-code-row[b-sqyai01pix] {
        flex-wrap: wrap;
    }

    .comment-code-btn[b-sqyai01pix] {
        width: 100%;
    }
}
/* /Components/Pages/ProductDetail.razor.rz.scp.css */
/* 软件项目详情页：面包屑 + 头部（图标 + 标题 + 徽章 + 价格 + 购买按钮）。
   长文介绍不在本站重复维护，正文区只有头部信息卡。 */

/* 面包屑：只放「首页 / 软件项目」路径级（当前产品名由下方产品大标题承担，
   不重复渲染）。与文章页 post-crumbs 同一视觉语言——定位职责 > 装饰职责：
   小号灰字安静待着不抢标题焦点，悬停才给主题色 + 下划线表明「能点」。 */
.product-crumbs[b-wxrkmub9dk] {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    color: var(--bs-secondary-color);
}

/* 与文章页 post-crumbs 同一套语气：静态纯文字（零宽度代价），
   悬停时主题色 + 荧光笔底纹从左划过，不是「变宽」而是「点亮」 */
.product-crumbs a[b-wxrkmub9dk] {
    color: var(--bs-secondary-color);
    text-decoration: none;
    background-image: linear-gradient(
        to top,
        color-mix(in srgb, var(--bs-primary) 24%, transparent) 0 34%,
        transparent 34%);
    background-repeat: no-repeat;
    background-size: 0 100%;
    transition: background-size .3s cubic-bezier(.4, 0, .2, 1), color .18s ease;
}

.product-crumbs a:hover[b-wxrkmub9dk],
.product-crumbs a:focus-visible[b-wxrkmub9dk] {
    color: var(--bs-primary);
    background-size: 100% 100%;
    outline: none;
}

/* 首页小房子：路径起点的记号 */
.product-crumbs-home i[b-wxrkmub9dk] {
    font-size: .85em;
    margin-right: .35em;
    opacity: .5;
    transition: opacity .18s ease;
}

.product-crumbs-home:hover i[b-wxrkmub9dk] {
    opacity: 1;
}

/* 细角标分隔符 */
.product-crumbs-sep[b-wxrkmub9dk] {
    font-size: .58em;
    opacity: .38;
}

@media (prefers-reduced-motion: reduce) {
    .product-crumbs a[b-wxrkmub9dk] {
        transition: color .18s ease;
    }
}

.product-hero[b-wxrkmub9dk] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.product-hero-head[b-wxrkmub9dk] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.product-hero-icon[b-wxrkmub9dk] {
    width: 72px;
    height: 72px;
    border-radius: 0.75rem;
    object-fit: cover;
    flex-shrink: 0;
}

.product-hero-icon-fallback[b-wxrkmub9dk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-primary);
    color: #fff;
    font-weight: 700;
    font-size: 2rem;
    line-height: 1;
}

.product-hero-title[b-wxrkmub9dk] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.35rem;
}

.product-badges[b-wxrkmub9dk] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.product-hero-summary[b-wxrkmub9dk] {
    color: var(--bs-secondary-color);
    margin: 0;
}

.product-hero-foot[b-wxrkmub9dk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.product-price-lg[b-wxrkmub9dk] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--bs-primary);
    line-height: 1;
}

/* 窄屏：图标与标题竖排，价格按钮独占一行 */
@media (max-width: 576px) {
    .product-hero-head[b-wxrkmub9dk] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .product-hero-foot[b-wxrkmub9dk] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
}
/* /Components/Pages/Products.razor.rz.scp.css */
/* 软件项目列表页：自适应栅格 + 卡片。
   卡片用 Bootstrap 的 card 类（暗色下自动跟随 --bs-tertiary-bg），
   这里只补栅格、图标与价格排版。 */
.product-grid[b-7jpokpp4oi] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.product-card .card-body[b-7jpokpp4oi] {
    min-height: 100%;
}

.product-icon[b-7jpokpp4oi] {
    width: 48px;
    height: 48px;
    border-radius: 0.5rem;
    object-fit: cover;
    flex-shrink: 0;
}

/* 没配图标时的首字母占位 */
.product-icon-fallback[b-7jpokpp4oi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-primary);
    color: #fff;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1;
}

.product-price[b-7jpokpp4oi] {
    font-weight: 700;
    color: var(--bs-primary);
    white-space: nowrap;
}

/* 窄屏时价格与按钮换行也不会挤成一团 */
@media (max-width: 400px) {
    .product-card .d-flex.justify-content-between[b-7jpokpp4oi] {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.5rem;
    }
}
/* /Components/Shared/AdminPageHeader.razor.rz.scp.css */
/* 后台页面标题条的隔离样式。
   图标用主色的浅底圆角方块（亮 / 暗主题都取令牌，自动适配）。 */
.admin-page-header-icon[b-r7s7zu3osv] {
    width: 42px;
    height: 42px;
    font-size: 18px;
    color: var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
    border: 1px solid var(--bs-primary-border-subtle);
}
/* /Components/Shared/AdSlot.razor.rz.scp.css */
/* AdSlot 组件的隔离样式：广告位与正文的视觉区分。
   设计要点：虚线边框 + 第三级别底色 + 顶部「广告」标识签，
   让读者一眼看出这不是正文内容（内容页广告紧贴文章正文，尤其需要）。
   颜色全部取 Bootstrap 令牌，亮 / 暗主题自动适配。 */
.ad-slot[b-yp639iny0k] {
    position: relative;
    /* 虚线边框取主色调与边框色的混合：比纯边框色更「不像正文」，
       又不至于抢眼；color-mix 不支持时退回 --bs-border-color（上一行声明）。 */
    border: 1px dashed var(--bs-border-color);
    border-color: color-mix(in srgb, var(--bs-primary) 45%, var(--bs-border-color));
    border-radius: 10px;
    background: var(--bs-tertiary-bg);
    padding: 1.35rem 1rem 1rem;
}

/* 标识签：骑在边框上，左右留出呼吸空间；用 warning 弱底色，第一眼就能认出是广告 */
.ad-slot-tag[b-yp639iny0k] {
    position: absolute;
    top: -.72rem;
    left: .9rem;
    display: inline-flex;
    align-items: center;
    padding: .1rem .55rem;
    font-size: .72rem;
    line-height: 1.4;
    letter-spacing: .05em;
    color: var(--bs-warning-text-emphasis);
    background: var(--bs-warning-bg-subtle);
    border: 1px solid var(--bs-warning-border-subtle);
    border-radius: 999px;
}

/* 内容容器：脚本广告通过 document.currentScript.parentNode 注入到这里，
   标识签是它的兄弟节点，互不影响。内部可能是联盟脚本 / 图文 / Markdown 排版，
   统一收窄一点字号、弱化存在感。
   ⚠ 广告内容是 MarkupString / 运行时脚本注入的 HTML，不带本组件的隔离属性，
   后代选择器必须加 ::deep，否则编译成 `.ad-slot-body img[b-xxxx]` 一个都匹配不上。 */
.ad-slot-body[b-yp639iny0k] {
    font-size: .92rem;
    color: var(--bs-secondary-color);
}

.ad-slot-body[b-yp639iny0k]  > :first-child {
    margin-top: 0;
}

.ad-slot-body[b-yp639iny0k]  > :last-child {
    margin-bottom: 0;
}

/* 广告内的图片不抢眼：统一限制圆角，宽度交给内容自身控制 */
.ad-slot-body[b-yp639iny0k]  img {
    border-radius: 8px;
}
/* /Components/Shared/FeaturedCarousel.razor.rz.scp.css */
/* 首页精选走马灯的隔离样式。
   走马灯本体是 Bootstrap 标准 .carousel 结构（BB Carousel 渲染），
   这里只定义「幻灯片内容层」的尺寸与文字排版 —— 亮 / 暗主题通用：
   所有幻灯片都带压暗层，文字固定白色，不随站点主题变化。 */
.featured-slide[b-1v45ldiw5r] {
    position: relative;
    display: block;
    height: 300px;
}

.featured-slide-body[b-1v45ldiw5r] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    padding: 28px 32px;
    background: linear-gradient(to top, rgba(15, 23, 42, .78), rgba(15, 23, 42, 0));
}

.featured-slide-title[b-1v45ldiw5r] {
    display: block;
    font-weight: 600;
    line-height: 1.3;
    /* 两行截断，避免长标题把幻灯片撑高 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.featured-slide-summary[b-1v45ldiw5r] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 指示器与左右箭头：压暗底色，避免在花背景上看不清 */
.featured-carousel .carousel-indicators button[b-1v45ldiw5r] {
    background-color: rgba(255, 255, 255, .55);
    border: 0;
    height: 4px;
    border-radius: 2px;
}

.featured-carousel .carousel-indicators .active[b-1v45ldiw5r] {
    background-color: #fff;
}

.featured-carousel .carousel-control-prev[b-1v45ldiw5r],
.featured-carousel .carousel-control-next[b-1v45ldiw5r] {
    opacity: 0;
    transition: opacity .2s ease-in-out;
}

.featured-carousel:hover .carousel-control-prev[b-1v45ldiw5r],
.featured-carousel:hover .carousel-control-next[b-1v45ldiw5r] {
    opacity: .8;
}

/* 移动端降低高度 */
@@media (max-width: 575.98px) {
    .featured-slide[b-1v45ldiw5r] {
        height: 200px;
    }

    .featured-slide-body[b-1v45ldiw5r] {
        padding: 16px 18px;
    }
}
/* /Components/Shared/PageHeader.razor.rz.scp.css */
/* 列表页统一页头：标题 + 渐变短线 + 说明行。 */
.page-head[b-3zm06imnk5] {
    margin-bottom: 1.6rem;
}

.page-head-title[b-3zm06imnk5] {
    margin: 0;
    font-size: clamp(1.45rem, 2.6vw, 1.85rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.02em;
    color: var(--bs-body-color);
}

/* 标题下的短渐变条：与首页「最新文章」的竖条同一套记号 */
.page-head-title[b-3zm06imnk5]::after {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    margin-top: .65rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--bs-primary), var(--bs-info, #0dcaf0));
}

.page-head-sub[b-3zm06imnk5] {
    margin-top: .85rem;
    font-size: .88rem;
    line-height: 1.6;
    color: var(--bs-secondary-color);
}
/* /Components/Shared/PostCard.razor.rz.scp.css */
/* PostCard：横向卡片（左封面 / 右内容）。
   颜色全部取 Bootstrap 令牌，亮暗主题自动适配。
   这里只放工具类表达不了的东西：网格布局、封面裁切、两行截断、悬停动效。 */

.post-card[b-rbjxnwke7r] {
    position: relative;
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 14px;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* 无封面：内容占满整行 */
.post-card.no-cover[b-rbjxnwke7r] {
    grid-template-columns: minmax(0, 1fr);
}

/* 暗色下 body-bg 与页面底色相同，卡片会糊成一片 —— 换成第三级别底色做「浮起」 */
[data-bs-theme="dark"] .post-card[b-rbjxnwke7r] {
    background: var(--bs-tertiary-bg);
}

.post-card:hover[b-rbjxnwke7r] {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--bs-primary) 30%, var(--bs-border-color));
    box-shadow: 0 10px 28px -12px color-mix(in srgb, var(--bs-body-color) 30%, transparent);
}

/* 封面：固定高度、裁切填满，悬停轻微放大 */
.post-card-cover[b-rbjxnwke7r] {
    display: block;
    position: relative;
    min-height: 168px;
    overflow: hidden;
    background: var(--bs-tertiary-bg);
}

.post-card-cover img[b-rbjxnwke7r] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.post-card:hover .post-card-cover img[b-rbjxnwke7r] {
    transform: scale(1.05);
}

/* 内容区 */
.post-card-body[b-rbjxnwke7r] {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    min-width: 0;
    padding: 1.1rem 1.3rem;
}

/* 眉标行：置顶 + 分类（都为空时不占高度） */
.post-card-eyebrow[b-rbjxnwke7r] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.post-card-eyebrow:empty[b-rbjxnwke7r] {
    display: none;
}

.post-card-top[b-rbjxnwke7r] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
    color: var(--bs-warning-text-emphasis, #664d03);
    background: var(--bs-warning-bg-subtle, #fff3cd);
}

.post-card-cat[b-rbjxnwke7r] {
    font-size: .75rem;
    font-weight: 500;
    color: var(--bs-primary);
    text-decoration: none;
    letter-spacing: .01em;
}

.post-card-cat:hover[b-rbjxnwke7r] {
    text-decoration: underline;
}

/* 标题 */
.post-card-title[b-rbjxnwke7r] {
    margin: 0;
    font-size: 1.16rem;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: -.005em;
}

.post-card-title a[b-rbjxnwke7r] {
    color: var(--bs-body-color);
    text-decoration: none;
    transition: color .15s ease;
}

.post-card:hover .post-card-title a[b-rbjxnwke7r],
.post-card-title a:focus-visible[b-rbjxnwke7r] {
    color: var(--bs-primary);
}

/* 摘要：两行截断 */
.post-card-summary[b-rbjxnwke7r] {
    margin: 0;
    font-size: .885rem;
    line-height: 1.65;
    color: var(--bs-secondary-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 底部元信息：日期 / 阅读时长 / 浏览 / 评论 / 标签 */
.post-card-meta[b-rbjxnwke7r] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem .9rem;
    margin-top: auto;
    padding-top: .3rem;
    font-size: .76rem;
    color: var(--bs-secondary-color);
}

.post-card-meta > span[b-rbjxnwke7r],
.post-card-meta > time[b-rbjxnwke7r] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.post-card-tags[b-rbjxnwke7r] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-left: auto;
}

.post-card-tags a[b-rbjxnwke7r] {
    color: var(--bs-secondary-color);
    text-decoration: none;
    transition: color .15s ease;
}

.post-card-tags a:hover[b-rbjxnwke7r] {
    color: var(--bs-primary);
}

/* ── 响应式 ─────────────────────────────────────────────── */
/* 中屏收窄封面，给标题更多空间 */
@media (max-width: 991.98px) {
    .post-card[b-rbjxnwke7r] {
        grid-template-columns: 190px minmax(0, 1fr);
    }

    .post-card-cover[b-rbjxnwke7r] {
        min-height: 150px;
    }
}

/* 手机：封面回到顶部，高度固定 170px */
@media (max-width: 575.98px) {
    .post-card[b-rbjxnwke7r] {
        grid-template-columns: minmax(0, 1fr);
    }

    .post-card-cover[b-rbjxnwke7r] {
        min-height: 0;
        height: 170px;
    }

    .post-card-body[b-rbjxnwke7r] {
        padding: 1rem 1.05rem;
    }

    .post-card-title[b-rbjxnwke7r] {
        font-size: 1.06rem;
    }

    .post-card-tags[b-rbjxnwke7r] {
        margin-left: 0;
    }
}
/* /Components/Shared/Prose.razor.rz.scp.css */
/* Prose 组件的隔离样式：Markdown 正文排版。
   颜色全部取 Bootstrap 令牌，亮 / 暗主题自动适配；不重写任何 UI 组件样式。

   ⚠ 必须用 ::deep：正文是 Markdown 渲染好的 HTML（MarkupString），
   这些元素由父组件生成，不带本组件的隔离属性（b-xxxx）。若直接写 `.prose pre`，
   编译产物是 `.prose pre[b-xxxx]`，一个都匹配不上 —— 表现就是「正文完全没排版、
   代码块只有底色没有内边距」，曾经踩过。::deep 之后的右半边不再加隔离属性。 */
.prose[b-6lajjf0kye] {
    font-size: 16.5px;
    line-height: 1.8;
    color: var(--bs-body-color);
    word-wrap: break-word;
}

/* ── 标题 ───────────────────────────────────────────────── */
.prose[b-6lajjf0kye]  h1,
.prose[b-6lajjf0kye]  h2,
.prose[b-6lajjf0kye]  h3,
.prose[b-6lajjf0kye]  h4 {
    margin: 2em 0 .75em;
    line-height: 1.4;
    font-weight: 650;
    color: var(--bs-body-color);
    scroll-margin-top: 84px;
}

.prose[b-6lajjf0kye]  h1 {
    font-size: 27px;
}

/* h2 用左侧渐变竖条代替整条下划线：更轻，也不打断阅读节奏 */
.prose[b-6lajjf0kye]  h2 {
    position: relative;
    padding-left: .8rem;
    font-size: 23px;
}

.prose[b-6lajjf0kye]  h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: .22em;
    bottom: .22em;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--bs-primary), var(--bs-info, #0dcaf0));
}

.prose[b-6lajjf0kye]  h3 {
    font-size: 19.5px;
}

.prose[b-6lajjf0kye]  h4 {
    font-size: 17.5px;
}

/* 锚点标题被 FocusOnNavigate 聚焦时不要蓝框 */
.prose[b-6lajjf0kye]  h1:focus,
.prose[b-6lajjf0kye]  h2:focus,
.prose[b-6lajjf0kye]  h3:focus {
    outline: none;
}

/* ── 段落与列表 ─────────────────────────────────────────── */
.prose[b-6lajjf0kye]  p {
    margin: 1.05em 0;
}

.prose[b-6lajjf0kye]  ul,
.prose[b-6lajjf0kye]  ol {
    margin: 1em 0;
    padding-left: 1.5em;
}

.prose[b-6lajjf0kye]  li {
    margin: .4em 0;
}

.prose[b-6lajjf0kye]  li::marker {
    color: color-mix(in srgb, var(--bs-primary) 70%, var(--bs-body-color));
}

.prose[b-6lajjf0kye]  a {
    color: var(--bs-primary);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--bs-primary) 35%, transparent);
    transition: border-color .15s ease;
}

.prose[b-6lajjf0kye]  a:hover {
    border-bottom-color: var(--bs-primary);
}

.prose[b-6lajjf0kye]  strong {
    font-weight: 650;
}

/* ── 引用 ───────────────────────────────────────────────── */
.prose[b-6lajjf0kye]  blockquote {
    margin: 1.4em 0;
    padding: .85em 1.15em;
    border-left: 3px solid var(--bs-primary);
    background: color-mix(in srgb, var(--bs-primary) 6%, var(--bs-body-bg));
    border-radius: 0 10px 10px 0;
    color: var(--bs-secondary-color);
}

.prose[b-6lajjf0kye]  blockquote > :first-child {
    margin-top: 0;
}

.prose[b-6lajjf0kye]  blockquote > :last-child {
    margin-bottom: 0;
}

/* ── 行内代码 ───────────────────────────────────────────── */
.prose[b-6lajjf0kye]  code {
    background: color-mix(in srgb, var(--bs-body-color) 7%, transparent);
    padding: .16em .42em;
    border-radius: 5px;
    font-size: .89em;
    color: var(--bs-body-color);
}

/* ── 代码块 ─────────────────────────────────────────────── */
/* 盒式样式放在 pre 上，code 透明。这样 highlight.js 的调色板只要覆盖 pre 的背景即可整体换肤
   （见 lib/highlightjs/highlight.min.css 的 `.prose pre:has(> code.hljs)`，
   特异性高于这条，能接管背景与边框）。JS 未执行时退回第三级别底色。 */
.prose[b-6lajjf0kye]  pre {
    margin: 1.4em 0;
    padding: 16px 18px;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    overflow-x: auto;
    font-size: 13.5px;
    line-height: 1.65;
}

.prose[b-6lajjf0kye]  pre code {
    background: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;
    font-size: inherit;
    white-space: pre;
    tab-size: 4;
}

/* 代码块的「复制」按钮由 app.js 的 fzHighlight 注入，
   样式放在全局 app.css —— 广告位 / 评论区里的代码块也要一致（它们不在 .prose 内）。 */

/* ── 表格 ───────────────────────────────────────────────── */
.prose[b-6lajjf0kye]  table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.4em 0;
    font-size: .94em;
    display: block;
    overflow-x: auto;
}

.prose[b-6lajjf0kye]  th,
.prose[b-6lajjf0kye]  td {
    border: 1px solid var(--bs-border-color);
    padding: 9px 13px;
    text-align: left;
}

.prose[b-6lajjf0kye]  thead th {
    background: var(--bs-tertiary-bg);
    font-weight: 600;
}

.prose[b-6lajjf0kye]  tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--bs-body-color) 3%, transparent);
}

/* ── 图片与分隔线 ───────────────────────────────────────── */
.prose[b-6lajjf0kye]  img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.5em auto;
    border-radius: 12px;
    box-shadow: 0 6px 24px -16px color-mix(in srgb, var(--bs-body-color) 70%, transparent);
}

.prose[b-6lajjf0kye]  hr {
    border: 0;
    height: 1px;
    margin: 2.4em 0;
    background: linear-gradient(90deg, transparent, var(--bs-border-color), transparent);
}