/* =============================================================
   有分享 · 前台设计体系（site-*）
   底座：Bootstrap 5.3.8（结构/表单/栅格），观感由本文件接管。
   后台有独立的 admin.css（Admin RCL 内），与本文件互不影响。
   ============================================================= */

/* ---------- 1. 设计 token ----------
   亮色为默认（:root），暗色经 <html data-bs-theme="dark"> 整表覆盖（第 1b 节）。
   两条铁律：
   ① 组件规则一律引用 --site-*，不得写裸色值——暗色（及将来任何主题）只改 token 即全局生效；
   ② --site-primary 是「文字/图标/描边」用交互色（暗色下提亮保证对比度），
      --site-primary-solid 是「实心填充」用主色（按钮/徽标底，暗色下保持饱和以确保白字可读）。 */

:root {
    /* 品牌色（Indigo） */
    --site-primary: #4f46e5;
    --site-primary-solid: #4f46e5;
    --site-primary-hover: #4338ca;
    --site-primary-active: #3730a3;
    --site-primary-soft: #eef2ff;
    --site-primary-softer: #f6f7fe;
    --site-primary-border: #c7d2fe;
    --site-primary-focus: #a5b4fc;
    --site-primary-rgb: 79, 70, 229;
    --site-on-primary: #ffffff;
    --site-on-primary-muted: rgba(255, 255, 255, .75);
    --site-brand-gradient: linear-gradient(135deg, #6366f1, #4f46e5);
    --site-header-bg: rgba(255, 255, 255, .86);

    /* 中性色 */
    --site-text: #1f2328;
    --site-text-secondary: #59636e;
    /* 元信息文字：提深以满足 WCAG AA 4.5:1（原 #8b949e 仅 3.1:1；仍浅于 --site-text-secondary） */
    --site-text-muted: #6b7280;
    --site-bg: #f6f8fa;
    --site-surface: #ffffff;
    --site-surface-hover: #f0f2f5;
    --site-surface-2: #f6f8fa;
    --site-border: #d8dee4;
    --site-border-strong: #c4ccd4;

    /* 历史别名：个别旧规则引用的是这两个名字（--site-surface-muted 用于门控块浅底） */
    --site-border-color: var(--site-border);
    --site-text-strong: var(--site-text);
    --site-surface-muted: rgba(79, 70, 229, .03);

    /* 语义状态色（成功/警告/危险/信息：文字 / 浅底 / 描边三件套） */
    --site-success-text: #1a7f37;
    --site-success-soft: #dafbe1;
    --site-success-border: #aceebb;
    --site-warning-text: #92400e;
    --site-warning-soft: #fef3c7;
    --site-warning-border: #fcd34d;
    --site-danger-text: #cf222e;
    --site-danger-soft: #fee2e2;
    --site-danger-border: #f1aeb5;
    --site-info-text: #1e40af;
    --site-info-soft: #dbeafe;
    --site-info-border: #bfdbfe;

    /* 会员金色徽章 */
    --site-gold-text: #8a5300;
    --site-gold-soft: #fff3d6;
    --site-gold-border: #f2d18b;

    /* 付费门控暖色（付费卡底/边 + 付费徽标族） */
    --site-paid-text: #9a3412;
    --site-paid-soft: #ffedd5;
    --site-paid-border: #fdba74;
    --site-paid-card-border: #f3c1b3;
    --site-paid-card-bg: linear-gradient(180deg, #fff8f5, #fdeee8);
    --site-paid-card-bg-unlocked: #fefaf8;

    /* 形状 / 阴影 / 遮罩 / 过渡 */
    --site-radius-sm: .375rem;
    --site-radius: .5rem;
    --site-radius-lg: .75rem;
    --site-shadow: 0 1px 2px rgba(31, 35, 40, .05);
    --site-shadow-md: 0 3px 10px rgba(31, 35, 40, .08);
    --site-shadow-lg: 0 12px 40px rgba(0, 0, 0, .18);
    --site-backdrop: rgba(31, 35, 40, .45);
    --site-transition: 150ms ease;

    /* 字体 */
    --site-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
    --site-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    /* 布局 */
    --site-content-width: 1140px;
    --site-header-height: 60px;

    /* ---- Bootstrap 变量接管 ---- */
    --bs-font-sans-serif: var(--site-font-sans);
    --bs-font-monospace: var(--site-font-mono);
    --bs-body-color: var(--site-text);
    --bs-body-bg: var(--site-bg);
    --bs-body-font-size: 1rem;
    --bs-emphasis-color: var(--site-text);
    --bs-secondary-color: var(--site-text-secondary);
    --bs-tertiary-color: var(--site-text-muted);
    --bs-secondary-bg: var(--site-surface-hover);
    --bs-tertiary-bg: var(--site-surface-2);
    --bs-secondary: #59636e;
    --bs-secondary-rgb: 89, 99, 110;
    --bs-primary: var(--site-primary-solid);
    --bs-primary-rgb: 79, 70, 229;
    --bs-primary-text-emphasis: #3730a3;
    --bs-primary-bg-subtle: var(--site-primary-soft);
    --bs-primary-border-subtle: var(--site-primary-border);
    --bs-success-text-emphasis: var(--site-success-text);
    --bs-success-bg-subtle: var(--site-success-soft);
    --bs-success-border-subtle: var(--site-success-border);
    --bs-warning-text-emphasis: var(--site-warning-text);
    --bs-warning-bg-subtle: var(--site-warning-soft);
    --bs-warning-border-subtle: var(--site-warning-border);
    --bs-danger-text-emphasis: var(--site-danger-text);
    --bs-danger-bg-subtle: var(--site-danger-soft);
    --bs-danger-border-subtle: var(--site-danger-border);
    --bs-info-text-emphasis: var(--site-info-text);
    --bs-info-bg-subtle: var(--site-info-soft);
    --bs-info-border-subtle: var(--site-info-border);
    --bs-border-color: var(--site-border);
    --bs-border-color-translucent: rgba(31, 35, 40, .135);
    --bs-border-radius: var(--site-radius);
    --bs-border-radius-sm: var(--site-radius-sm);
    --bs-border-radius-lg: var(--site-radius-lg);
    --bs-border-radius-xl: 1rem;
    --bs-link-color: var(--site-primary);
    --bs-link-color-rgb: 79, 70, 229;
    --bs-link-hover-color: var(--site-primary-hover);
    --bs-link-hover-color-rgb: 67, 56, 202;
    --bs-link-decoration: none;
}

/* ---------- 1b. 暗色主题（<html data-bs-theme="dark">，js/site-theme.js 负责切换与记忆） ----------
   只覆盖 --site-*（Bootstrap 映射随之整体重解析）；Bootstrap 自身的暗色默认因本文件后加载、
   同特异性下源序在后而被本表接管。暗色调色板参照 GitHub Dark；主色交互色提亮为 ~#8f95f6，
   实心填充保持 #4f46e5（白字对比度 ≥ 6:1）。 */

html[data-bs-theme="dark"] {
    /* 品牌色（Indigo） */
    --site-primary: #8f95f6;
    --site-primary-solid: #4f46e5;
    --site-primary-hover: #a6abf8;
    --site-primary-active: #bcc0f9;
    --site-primary-soft: rgba(139, 147, 248, .16);
    --site-primary-softer: rgba(139, 147, 248, .07);
    --site-primary-border: rgba(139, 147, 248, .42);
    --site-primary-focus: #8f95f6;
    --site-primary-rgb: 143, 149, 246;
    --site-header-bg: rgba(13, 17, 23, .82);

    /* 中性色 */
    --site-text: #e6edf3;
    --site-text-secondary: #9198a1;
    --site-text-muted: #7d8794;
    --site-bg: #0d1117;
    --site-surface: #161b22;
    --site-surface-hover: #1f242c;
    --site-surface-2: #1b212a;
    --site-border: #30363d;
    --site-border-strong: #454c54;
    --site-surface-muted: rgba(139, 147, 248, .06);

    /* 语义状态色 */
    --site-success-text: #3fb950;
    --site-success-soft: rgba(63, 185, 80, .15);
    --site-success-border: rgba(63, 185, 80, .42);
    --site-warning-text: #d29922;
    --site-warning-soft: rgba(187, 128, 9, .16);
    --site-warning-border: rgba(187, 128, 9, .5);
    --site-danger-text: #f85149;
    --site-danger-soft: rgba(248, 81, 73, .16);
    --site-danger-border: rgba(248, 81, 73, .45);
    --site-info-text: #6cb2f7;
    --site-info-soft: rgba(84, 155, 245, .16);
    --site-info-border: rgba(84, 155, 245, .45);

    /* 会员金色 */
    --site-gold-text: #e0b341;
    --site-gold-soft: rgba(214, 146, 20, .16);
    --site-gold-border: rgba(214, 146, 20, .5);

    /* 付费门控暖色 */
    --site-paid-text: #ffa198;
    --site-paid-soft: rgba(248, 81, 73, .22);
    --site-paid-border: rgba(248, 81, 73, .55);
    --site-paid-card-border: rgba(248, 81, 73, .4);
    --site-paid-card-bg: linear-gradient(180deg, rgba(248, 81, 73, .07), rgba(248, 81, 73, .13));
    --site-paid-card-bg-unlocked: rgba(248, 81, 73, .05);

    /* 阴影 / 遮罩 */
    --site-shadow: 0 1px 2px rgba(0, 0, 0, .45);
    --site-shadow-md: 0 3px 10px rgba(0, 0, 0, .45);
    --site-shadow-lg: 0 12px 40px rgba(0, 0, 0, .55);
    --site-backdrop: rgba(1, 4, 9, .62);

    /* Bootstrap 暗色补欠（亮色 :root 未覆盖的杂项） */
    --bs-border-color-translucent: rgba(240, 246, 252, .12);
    --bs-emphasis-color: #f0f6fc;
    --bs-primary-text-emphasis: #bcc0f9;
    --bs-link-color-rgb: 143, 149, 246;
    --bs-link-hover-color-rgb: 166, 171, 248;
    --bs-secondary-rgb: 145, 152, 161;
}

/* ---------- 1c. 暗色组件级补漏 ----------
   只收 token 化不了的第三方内部硬编码：Quill snow 主题的图标描边/下拉/提示框、
   顶栏汉堡 data-URI。组件自有规则一律走 token，不在此处重复。 */

html[data-bs-theme="dark"] .site-nav-toggle-btn {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%239198a1' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M3 5h14M3 10h14M3 15h14'/%3E%3C/svg%3E");
}

html[data-bs-theme="dark"] .site-rte .ql-snow .ql-stroke {
    stroke: var(--site-text-secondary);
}

html[data-bs-theme="dark"] .site-rte .ql-snow .ql-fill,
html[data-bs-theme="dark"] .site-rte .ql-snow .ql-stroke.ql-fill,
html[data-bs-theme="dark"] .site-rte .ql-snow .ql-even .ql-fill {
    fill: var(--site-text-secondary);
}

html[data-bs-theme="dark"] .site-rte .ql-snow .ql-picker-label {
    color: var(--site-text-secondary);
}

html[data-bs-theme="dark"] .site-rte .ql-snow .ql-picker-options {
    background: var(--site-surface);
    box-shadow: var(--site-shadow-md);
}

html[data-bs-theme="dark"] .site-rte .ql-snow .ql-picker-item {
    color: var(--site-text);
}

html[data-bs-theme="dark"] .site-rte .ql-snow .ql-picker-item.ql-selected,
html[data-bs-theme="dark"] .site-rte .ql-snow .ql-picker-item:hover {
    color: var(--site-primary);
}

html[data-bs-theme="dark"] .site-rte .ql-snow .ql-tooltip {
    background: var(--site-surface);
    border-color: var(--site-border);
    box-shadow: var(--site-shadow-md);
    color: var(--site-text);
}

html[data-bs-theme="dark"] .site-rte .ql-snow .ql-tooltip input[type="text"] {
    color: var(--site-text);
    background: var(--site-surface-2);
    border-color: var(--site-border);
}

html[data-bs-theme="dark"] .site-rte .ql-snow button:hover .ql-stroke,
html[data-bs-theme="dark"] .site-rte .ql-snow button:focus .ql-stroke,
html[data-bs-theme="dark"] .site-rte .ql-snow button.ql-active .ql-stroke,
html[data-bs-theme="dark"] .site-rte .ql-snow .ql-picker-label:hover,
html[data-bs-theme="dark"] .site-rte .ql-snow .ql-picker-label.ql-active {
    stroke: var(--site-primary);
    color: var(--site-primary);
}

html, body {
    font-family: var(--site-font-sans);
}

body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection {
    background: var(--site-primary-border);
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:focus-visible {
    outline: 2px solid var(--site-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}

h1, h2, h3 {
    letter-spacing: -.01em;
}

b, strong {
    font-weight: 600;
}

code, kbd, pre, samp {
    font-family: var(--site-font-mono);
}

:not(pre) > code {
    background: var(--site-surface-2);
    border: 1px solid var(--site-border);
    border-radius: 6px;
    padding: .1em .35em;
    font-size: .875em;
}

h1:focus {
    outline: none;
}

.min-w-0 {
    min-width: 0;
}

/* ---------- 2. 布局骨架：页面 / 容器 / 页脚 ---------- */

.site-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-main {
    flex: 1 1 auto;
    padding-block: 2rem 4rem;
}

.site-container {
    width: 100%;
    max-width: var(--site-content-width);
    margin-inline: auto;
    padding-inline: 1rem;
}

@media (min-width: 768px) {
    .site-container {
        padding-inline: 1.5rem;
    }
}

.site-footer {
    border-top: 1px solid var(--site-border);
    background: var(--site-surface);
    padding: 1.6rem 0 1.8rem;
}

.site-footer-inner {
    max-width: var(--site-content-width);
    margin-inline: auto;
    padding-inline: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.5rem;
    align-items: center;
    justify-content: space-between;
    color: var(--site-text-muted);
    font-size: .8125rem;
}

@media (min-width: 768px) {
    .site-footer-inner {
        padding-inline: 1.5rem;
    }
}

.site-footer a {
    color: var(--site-text-secondary);
}

.site-footer a:hover {
    color: var(--site-primary);
}

/* 备案信息行（B7）：仅在 Site__IcpNumber 等配置非空时渲染。 */
.site-footer-filing {
    margin-top: .5rem;
    justify-content: flex-start;
    gap: .35rem 1rem;
    font-size: .75rem;
    color: var(--site-text-muted);
}

/* ---------- 2b. 合规静态页（/terms、/privacy） ---------- */

.site-legal {
    max-width: 46rem;
    margin-inline: auto;
}

.site-legal-body {
    padding: 1.5rem 1.75rem;
}

@media (max-width: 575.98px) {
    .site-legal-body {
        padding: 1.25rem 1.15rem;
    }
}

/* ---------- 3. 顶栏（NavMenu 渲染） ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--site-header-bg);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--site-border);
}

.site-header-inner {
    display: flex;
    align-items: center;
    gap: .75rem;
    height: var(--site-header-height);
    max-width: var(--site-content-width);
    margin-inline: auto;
    padding-inline: 1rem;
}

@media (min-width: 768px) {
    .site-header-inner {
        padding-inline: 1.5rem;
    }
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--site-text);
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: -.01em;
}

.site-brand:hover {
    color: var(--site-text);
    text-decoration: none;
}

.site-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--site-brand-gradient);
    color: var(--site-on-primary);
    font-size: .8125rem;
    font-weight: 700;
    box-shadow: var(--site-shadow);
    flex-shrink: 0;
}

/* Logo 图模式（站点设置可配）：图片替换渐变文字方块，同尺寸圆角裁切 */

.site-brand-mark-img {
    background: none;
    box-shadow: none;
    overflow: hidden;
}

.site-brand-mark-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

img.site-brand-mark-img {
    object-fit: cover;
}

.site-nav {
    display: none;
    align-items: center;
    gap: .25rem;
    margin-left: .75rem;
}

@media (min-width: 768px) {
    .site-nav {
        display: flex;
    }
}

.site-nav-link {
    display: inline-flex;
    align-items: center;
    padding: .4rem .75rem;
    border-radius: var(--site-radius);
    color: var(--site-text-secondary);
    font-weight: 500;
    font-size: .9375rem;
}

.site-nav-link:hover {
    color: var(--site-text);
    background: var(--site-surface-hover);
    text-decoration: none;
}

.site-nav-link.active {
    color: var(--site-primary);
    background: var(--site-primary-soft);
}

.site-header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.site-user-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .25rem .7rem .25rem .3rem;
    border-radius: 50rem;
    color: var(--site-text);
    font-weight: 600;
    font-size: .875rem;
    max-width: 14rem;
}

.site-user-chip:hover {
    background: var(--site-surface-hover);
    text-decoration: none;
}

@media (max-width: 575.98px) {
    /* 窄屏顶栏空间紧张：只留头像（未读红点仍在 summary 上，提示不丢）。 */
    .site-user-name {
        display: none;
    }

    .site-user-menu-summary {
        padding: .2rem;
    }

    .site-user-chip {
        padding: .2rem;
    }
}

/* 移动端：checkbox 折叠开关 + 下拉面板（零 JS：label 原生切换，无内联事件属性） */

.site-nav-checkbox {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.site-nav-toggle-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: var(--site-radius);
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%2359636e' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M3 5h14M3 10h14M3 15h14'/%3E%3C/svg%3E") center/1.375rem no-repeat;
    cursor: pointer;
    flex-shrink: 0;
}

.site-nav-toggle-btn:hover {
    background-color: var(--site-surface-hover);
}

.site-header:has(.site-nav-checkbox:focus-visible) .site-nav-toggle-btn {
    outline: 2px solid var(--site-primary);
    outline-offset: 2px;
}

@media (max-width: 767.98px) {
    .site-nav-toggle-btn {
        display: inline-flex;
    }
}

.site-header-collapse {
    display: none;
    border-top: 1px solid var(--site-border);
    background: var(--site-surface);
    padding: .5rem 1rem .75rem;
}

.site-header:has(#site-nav-toggle:checked) .site-header-collapse {
    display: block;
}

.site-collapse-nav {
    display: flex;
    flex-direction: column;
    gap: .125rem;
}

.site-collapse-nav .site-nav-link {
    padding: .55rem .75rem;
}

/* 顶栏图标按钮（未登录外观入口等）：36px 方圆热区。 */
.site-nav-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: var(--site-radius);
    background: none;
    color: var(--site-text-secondary);
    cursor: pointer;
    transition: color var(--site-transition), background-color var(--site-transition);
}

a.site-nav-icon-btn:hover,
button.site-nav-icon-btn:hover,
summary.site-nav-icon-btn:hover {
    color: var(--site-text);
    background: var(--site-surface-hover);
    text-decoration: none;
}

/* 主题图标：按生效主题换图标（sun 亮 / moon-stars 暗），初始无属性时按亮色显示。 */
html[data-bs-theme="dark"] .site-theme-icon-sun {
    display: none;
}

html:not([data-bs-theme="dark"]) .site-theme-icon-moon {
    display: none;
}

/* ---------- 顶栏弹出面板与用户菜单 ---------- */
/* 未登录的主题菜单仍是原生 details.site-popup（静态 SSR，靠 js/site-menu.js 收起）；
   登录的用户菜单是交互岛，开合为岛内 C# 状态（.site-popup 在此仅提供定位上下文）。 */

.site-popup {
    position: relative;
}

.site-popup > summary {
    list-style: none;
}

.site-popup > summary::-webkit-details-marker {
    display: none;
}

/* 用户菜单触发按钮（原为 summary，改 button 后需重置 UA 默认外观）+ 红点。
   面板绝对定位右对齐（移动端限宽防溢出）。 */
/* 用户菜单触发按钮：胶囊「头像 + 展示名」；未读红点贴合整个胶囊（名字也在可点区域内）。 */
.site-user-menu-summary {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: .2rem .6rem .2rem .25rem;
    background: none;
    color: inherit;
    font: inherit;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color var(--site-transition), border-color var(--site-transition);
}

.site-user-menu-summary:hover {
    background: var(--site-surface-hover);
    border-color: var(--site-border);
}

.site-user-menu-summary:focus-visible {
    outline: 2px solid var(--site-primary);
    outline-offset: 2px;
}

/* 头像 + 名字：名字限宽截断（掩码邮箱仍可能较长），整体不撑破顶栏。 */
.site-user-ident {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
}

.site-user-name {
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .875rem;
    font-weight: 500;
    color: var(--site-text);
}

.site-avatar-dot {
    position: absolute;
    top: 0;
    right: 0;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--site-danger-text);
    box-shadow: 0 0 0 .12rem var(--site-surface);
}

/* 用户菜单点外部关闭：透明全屏遮罩（纯 C# 方案，无 JS）。z-index 取 1099——低于面板 1100、
   高于顶栏 1030 与页面内容，故点页面任意处（含顶栏其它控件）都先关闭菜单。
   坑：.site-header 的 backdrop-filter（毛玻璃）使其成为 fixed 后代的包含块，inset:0 只会
   把遮罩铺满顶栏自身（≈60px 高），点正文永远关不掉——故尺寸用视口单位显式铺满；
   顶栏 sticky 恒在视口顶部，其左上角即视口左上角，锚点因此正确。 */
.site-user-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1099;
    background: transparent;
}

.site-user-panel,
.site-theme-panel {
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    z-index: 1100;
    width: 16.5rem;
    max-width: calc(100vw - 2rem);
    padding: .5rem;
    background: var(--site-surface);
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-lg);
    box-shadow: var(--site-shadow-lg);
}

.site-theme-panel {
    width: auto;
    padding: .35rem;
}

/* 菜单头部：头像 + 昵称 + 等级徽章 */
.site-user-panel-head {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .4rem .5rem .55rem;
}

.site-user-panel-name {
    display: block;
    font-weight: 600;
    font-size: .9375rem;
    color: var(--site-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-user-panel-name:hover {
    color: var(--site-primary);
    text-decoration: none;
}

.site-user-panel-level {
    margin-top: .2rem;
}

/* 经验进度条（当前级 → 下一级） */
.site-user-panel-progress {
    padding: 0 .5rem .55rem;
}

.site-user-panel-bar {
    height: .375rem;
    border-radius: 999px;
    background: var(--site-primary-soft);
    overflow: hidden;
}

.site-user-panel-bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--site-primary-solid);
}

.site-user-panel-progress-text {
    display: block;
    margin-top: .25rem;
    font-size: .75rem;
    color: var(--site-text-muted);
}

/* 菜单项：通栏 hover，左侧图标+文字一组，行尾数字角标 */
.site-user-panel-items {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding-top: .35rem;
    border-top: 1px solid var(--site-border);
}

.site-user-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .5rem .65rem;
    border-radius: var(--site-radius);
    color: var(--site-text);
    font-size: .875rem;
    text-decoration: none;
    transition: background-color var(--site-transition), color var(--site-transition);
}

.site-user-item-main {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.site-user-item .site-user-item-main .site-icon {
    color: var(--site-text-muted);
}

a.site-user-item:hover,
button.site-user-item:hover {
    background: var(--site-surface-hover);
    color: var(--site-text);
    text-decoration: none;
}

a.site-user-item:hover .site-icon,
button.site-user-item:hover .site-icon {
    color: var(--site-text-secondary);
}

.site-user-badge {
    min-width: 1.25rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: var(--site-danger-soft);
    color: var(--site-danger-text);
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-align: center;
}

/* 分区小标题（外观） */
.site-user-panel-section {
    padding: .55rem .65rem .3rem;
    border-top: 1px solid var(--site-border);
    font-size: .75rem;
    color: var(--site-text-muted);
}

/* 外观三选一：当前项由 <html data-theme-pref> 驱动高亮（js/site-theme.js 维护该属性）。 */
.site-theme-opts {
    display: flex;
    gap: .25rem;
    padding: 0 .35rem .35rem;
}

.site-theme-opt {
    flex: 1 1 0;
    padding: .3rem .5rem;
    border: 1px solid transparent;
    border-radius: var(--site-radius-sm);
    background: none;
    color: var(--site-text-secondary);
    font-size: .8125rem;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--site-transition), color var(--site-transition);
}

.site-theme-opt:hover {
    background: var(--site-surface-hover);
    color: var(--site-text);
}

html[data-theme-pref="auto"] .site-theme-opt[data-site-theme-set="auto"],
html[data-theme-pref="light"] .site-theme-opt[data-site-theme-set="light"],
html[data-theme-pref="dark"] .site-theme-opt[data-site-theme-set="dark"] {
    background: var(--site-primary-soft);
    border-color: var(--site-primary-border);
    color: var(--site-primary);
    font-weight: 600;
}

/* 退出登录：通栏按钮，hover 危险色 */
.site-user-panel-logout {
    margin: 0;
    padding-top: .35rem;
    border-top: 1px solid var(--site-border);
}

.site-user-logout {
    width: 100%;
    border: 0;
    background: none;
    font-family: inherit;
    cursor: pointer;
}

button.site-user-logout:hover {
    background: var(--site-danger-soft);
    color: var(--site-danger-text);
}

/* 顶栏搜索框：原生 GET 表单直达 /search，零 JS。窄屏隐藏（折叠面板里有全宽版）。 */
.site-search {
    position: relative;
    display: none;
    width: clamp(10rem, 18vw, 15rem);
}

.site-search .site-search-icon {
    position: absolute;
    left: .7rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--site-text-muted);
    pointer-events: none;
}

.site-search input {
    width: 100%;
    height: 2.25rem;
    padding: 0 .75rem 0 2.1rem;
    border: 1px solid var(--site-border);
    border-radius: 50rem;
    background: var(--site-surface-2);
    color: var(--site-text);
    font-size: .875rem;
    font-family: inherit;
    transition: border-color var(--site-transition), background-color var(--site-transition), box-shadow var(--site-transition);
}

.site-search input::placeholder {
    color: var(--site-text-muted);
}

.site-search input:focus {
    outline: none;
    border-color: var(--site-primary-focus);
    background: var(--site-surface);
    box-shadow: 0 0 0 .2rem rgba(var(--site-primary-rgb), .13);
}

@media (min-width: 768px) {
    .site-search {
        display: block;
        margin-left: auto;
    }

    /* 搜索框已靠右吸边，动作区不再抢 auto 边距 */
    .site-header-inner > .site-header-actions {
        margin-left: 0;
    }
}

/* 折叠面板里的全宽搜索框 */
.site-collapse-search {
    display: block;
    width: 100%;
    margin: 0 0 .6rem;
}

/* /search 页的大号搜索框（顶栏样式复用，尺寸放宽） */
.site-page-search {
    display: block;
    width: min(34rem, 100%);
    margin: 0 0 1.5rem;
}

.site-page-search input {
    height: 2.75rem;
    border-radius: var(--site-radius);
    font-size: 1rem;
    background: var(--site-surface);
}

/* ---------- 4. 页头 / 面包屑 / 卡片 / 徽章 ---------- */

.site-page-header {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.site-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: -.015em;
}

/* 标题区图形前缀（板块徽章）与文本列的间距。 */
.site-page-header > .forum-cat-badge {
    margin-right: .75rem;
}

/* 标题区文本列：占满剩余宽度并允许收缩（长标题 + 右侧动作区不挤压）。 */
.site-page-header-text {
    flex: 1 1 auto;
    min-width: 0;
}

/* 标题与内联标记（置顶/精华/锁定、计数）同行并可换行。 */
.site-page-header-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

/* 单行形态（无副标题）：整行垂直居中，用于 Tag/Topic 这类紧凑标题。 */
.site-page-header.is-single-line {
    align-items: center;
}

/* 右侧动作区。 */
.site-page-header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    flex-shrink: 0;
}

.site-page-subtitle {
    color: var(--site-text-secondary);
    margin: .3rem 0 0;
    font-size: .9375rem;
}

.site-card {
    background: var(--site-surface);
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-lg);
    box-shadow: var(--site-shadow);
    transition: border-color var(--site-transition), box-shadow var(--site-transition);
}

.site-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .28rem .7rem;
    border: 1px solid var(--site-border);
    border-radius: 50rem;
    background: var(--site-surface);
    color: var(--site-text-secondary);
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.45;
    transition: color .12s ease, background-color .12s ease, border-color .12s ease;
}

a.site-chip:hover {
    color: var(--site-primary);
    border-color: var(--site-primary-border);
    background: var(--site-primary-soft);
    text-decoration: none;
}

.site-chip .site-chip-count {
    color: var(--site-text-muted);
    font-weight: 400;
}

/* 内联 SVG 图标基线（SiteIcon 渲染）：行内对齐 + 不被 flex 压缩。 */
.site-icon {
    display: inline-block;
    vertical-align: -.125em;
    flex-shrink: 0;
}

.site-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--site-text-secondary);
    background: var(--site-surface);
    border: 1px dashed var(--site-border-strong);
    border-radius: var(--site-radius-lg);
}

.site-empty .site-empty-icon {
    color: var(--site-text-muted);
    margin-bottom: .6rem;
}

.site-empty .site-empty-title {
    margin: 0;
    font-weight: 600;
    color: var(--site-text);
}

.site-empty .site-empty-desc {
    margin: .35rem 0 0;
    font-size: .875rem;
    color: var(--site-text-secondary);
}

.site-empty .site-empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-top: 1rem;
}

/* 加载骨架：列表/卡片等待态的 shimmer 占位（配合 .site-skeleton-line 组合出骨架布局）。 */
.site-skeleton-line {
    height: .875rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--site-surface-2) 25%, var(--site-surface-hover) 45%, var(--site-surface-2) 65%);
    background-size: 200% 100%;
    animation: site-skeleton-slide 1.2s linear infinite;
}

.site-skeleton-line.w-2x3 { width: 66%; }
.site-skeleton-line.w-half { width: 45%; }
.site-skeleton-line.w-quarter { width: 25%; }

@keyframes site-skeleton-slide {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .site-skeleton-line {
        animation: none;
    }
}

/* 面包屑（微调 Bootstrap breadcrumb 观感） */

.breadcrumb {
    --bs-breadcrumb-divider-color: var(--site-text-muted);
    margin-bottom: 1rem;
    font-size: .8125rem;
}

.breadcrumb-item a {
    color: var(--site-text-secondary);
}

.breadcrumb-item a:hover {
    color: var(--site-primary);
}

.breadcrumb-item.active {
    color: var(--site-text-muted);
}

/* 详情页面包屑当前项（长标题截断；原页面内联 style 收编） */
.breadcrumb-item.site-crumb-topic {
    max-width: 320px;
}

/* ---------- 5. 头像（首字母色块或图片，圆形） ---------- */

.site-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--site-primary-solid);
    color: var(--site-on-primary);
    font-weight: 600;
    font-size: .8125rem;
    line-height: 1;
    flex-shrink: 0;
    user-select: none;
    text-transform: uppercase;
}

/* 图片头像：与色块同尺寸档位，圆形 cover 裁切。 */
img.site-avatar {
    object-fit: cover;
    background: var(--site-border);
}

.site-avatar-sm {
    width: 24px;
    height: 24px;
    font-size: .6875rem;
}

.site-avatar-lg {
    width: 40px;
    height: 40px;
    font-size: .9375rem;
}

/* ---------- 6. 主题列表行（首页 / 板块页） ---------- */

.site-topic-list {
    background: var(--site-surface);
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-lg);
    box-shadow: var(--site-shadow);
    overflow: hidden;
}

/* 行是 div 而非 <a>：行内含标签 chips 链接，不能嵌套锚点（HTML 解析会拆坏 DOM）。
   整行点击由标题链接 .site-topic-link 的 ::after 铺满整行承接（拉伸链接）。 */
.site-topic-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .875rem 1.125rem;
    border-bottom: 1px solid var(--site-border);
    color: inherit;
}

.site-topic-row:last-child {
    border-bottom: 0;
}

.site-topic-row:hover {
    background: var(--site-surface-hover);
    text-decoration: none;
}

/* 标题链接：::after 拉伸覆盖整行（行已 position:relative），未定位的兄弟元素保持可点需自行提升。 */
.site-topic-link {
    color: inherit;
    text-decoration: none;
}

.site-topic-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.site-topic-title {
    font-weight: 600;
    color: var(--site-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-topic-row:hover .site-topic-title {
    color: var(--site-primary);
}

.site-topic-meta {
    font-size: .8125rem;
    color: var(--site-text-secondary);
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .15rem;
}

.site-topic-stats {
    text-align: right;
    color: var(--site-text-secondary);
    font-size: .8125rem;
    line-height: 1.5;
    flex-shrink: 0;
}

.site-topic-replies {
    font-weight: 600;
    color: var(--site-text);
}

/* 点赞/收藏操作条（B12）：主题卡内正文末尾的页脚条（镜像头部 border-top），激活态着色。
   外层 .site-post-engagement 提供与卡头对称的水平内边距与分隔线，条本体只管排布。 */
.site-post-engagement {
    border-top: 1px solid var(--site-border, #dee2e6);
    padding: .7rem 1.25rem;
    margin-top: .75rem;
}

.site-engagement-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
}

.site-engagement-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .8rem;
    border: 1px solid var(--site-border, #dee2e6);
    border-radius: 999px;
    background: transparent;
    color: var(--site-text-secondary, #6c757d);
    font-size: .875rem;
    line-height: 1.4;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.site-engagement-btn:hover:not(:disabled) {
    color: var(--site-text, #212529);
    border-color: var(--site-text-secondary, #6c757d);
    background: var(--site-surface-muted, #f8f9fa);
}

.site-engagement-btn.is-active {
    color: var(--site-primary, #4a5ae8);
    border-color: var(--site-primary, #4a5ae8);
    background: var(--site-primary-soft, #eef0ff);
}

.site-engagement-btn:disabled {
    opacity: .6;
}

/* 主题列表行徽章（置顶/精华/锁定）：小胶囊，标题内联。 */
.site-topic-flag {
    display: inline-block;
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1.4;
    padding: .05rem .4rem;
    border-radius: var(--site-radius-sm, 4px);
    vertical-align: 1px;
    margin-right: .35rem;
    flex-shrink: 0;
}

.site-topic-flag-pin {
    color: var(--site-warning-text);
    background: var(--site-warning-soft);
}

.site-topic-flag-featured {
    color: var(--site-primary);
    background: var(--site-primary-soft);
}

.site-topic-flag-locked {
    color: var(--site-text-secondary);
    background: var(--site-surface-hover);
}

/* 主题列表摘要：单行截断的浅色正文预览。 */
.site-topic-excerpt {
    font-size: .8125rem;
    color: var(--site-text-secondary);
    margin-top: .15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 「最后回复 @xx」截断宽度（原页面内联 style 收编）。 */
.site-topic-last-reply {
    max-width: 12em;
}

/* 搜索命中高亮（HighlightText 渲染的 <mark>）：警告浅底 token，双主题自动适配。 */
mark.site-hl {
    padding: 0 .05em;
    background: var(--site-warning-soft);
    color: inherit;
    border-radius: 2px;
}

/* ---------- 7. 帖子楼层（主题详情页） ---------- */

.site-post {
    background: var(--site-surface);
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-lg);
    box-shadow: var(--site-shadow);
}

/* 卡头区（标题 + 徽章 + 标签）：页头并入主帖卡，标题紧贴正文语境。 */
.site-topic-head {
    padding: 1.4rem 1.5rem 1.1rem;
}

.site-topic-head-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* 徽章内联在标题文字之后：沿用列表行的胶囊，外距从右距换成左距。 */
.site-topic-head-title .site-topic-flag {
    margin-right: 0;
    margin-left: .4rem;
}

.site-topic-head .site-topic-tags {
    margin-top: .7rem;
}

/* 会员徽章（金色系，与信任等级徽章并排使用） */
.site-author-member {
    display: inline-flex;
    align-items: center;
    padding: .125rem .5rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .75rem;
    color: var(--site-gold-text);
    background: var(--site-gold-soft);
    border: 1px solid var(--site-gold-border);
}

.site-post-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    padding: .8rem 1.25rem;
    border-bottom: 1px solid var(--site-border);
    background: var(--site-primary-softer);
}

.site-post-author {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    font-weight: 600;
    font-size: .9375rem;
    color: var(--site-text);
}

/* 楼层头中段（作者/时间）：允许收缩与换行，长标题时间不再把楼层号挤变形。 */
.site-post-header-main {
    flex: 1 1 12rem;
}

.site-post-time {
    font-size: .8125rem;
    color: var(--site-text-muted);
}

.site-post-floor {
    flex-shrink: 0;
    font-size: .75rem;
    font-weight: 600;
    color: var(--site-text-muted);
    background: var(--site-surface);
    border: 1px solid var(--site-border);
    border-radius: 50rem;
    padding: .15rem .6rem;
}

/* 楼层头右端分组：楼层号/楼主 徽章 + 操作按钮，整体右对齐（右对齐职责在这里，故 .site-post-floor 不再自带 auto 边距）。 */
.site-post-header-side {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .4rem;
    margin-left: auto;
    flex-shrink: 0;
}

/* 操作按钮组：紧凑排布，按钮本体再降一档（见下方 --bs-btn-* 覆盖）。 */
.site-post-header-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
}

.site-post-header-actions .btn {
    --bs-btn-padding-y: .15rem;
    --bs-btn-padding-x: .5rem;
    --bs-btn-font-size: .75rem;
    --bs-btn-border-radius: var(--site-radius-sm);
}

/* 楼中楼头部右端的操作按钮（与楼层头同款紧凑度）。
   头部是 baseline 对齐（文本行），按钮需 align-self 拉回中线，否则会随基线偏下。 */
.site-subpost-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    align-self: center;
    gap: .3rem;
    margin-left: auto;
}

.site-subpost-actions .btn {
    --bs-btn-padding-y: .1rem;
    --bs-btn-padding-x: .45rem;
    --bs-btn-font-size: .75rem;
    --bs-btn-border-radius: var(--site-radius-sm);
}

/* 头部操作组是紧凑 flex 条（右侧一行），但编辑/举报面板是**就地展开**的表单，
   作为 flex 项会被压成窄条（实测仅 390px 并挤在右上角）。
   面板在场时让所在分组整行铺满、落到头部下方：分组 flex-basis 100% 触发换行，
   操作组由 inline-flex 转 block，面板即可按正常文档流占满整宽。 */
.site-post-header-side:has(.site-reply-panel-edit) {
    flex: 1 1 100%;
    margin-left: 0;
}

.site-post-header-actions:has(.site-reply-panel-edit) {
    display: block;
    flex: 1 1 100%;
}

.site-subpost-actions:has(.site-reply-panel-edit) {
    display: block;
    flex: 1 1 100%;
    margin-left: 0;
}

.site-post-body {
    padding: 1.15rem 1.25rem 1.35rem;
}

/* 楼层/楼中楼的操作按钮组（编辑、删除、举报等）：由头部右上角分组排布。 */
.site-post-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
}

/* 主帖强调：与楼层同构但明确更重（更强边框/阴影、更大正文行距），让长帖里一眼找到内容主体。 */
.site-post.is-topic {
    border-color: var(--site-border-strong);
    box-shadow: var(--site-shadow-md);
}

.site-post.is-topic .site-post-body {
    padding: 1.5rem 1.5rem 1.6rem;
}

.site-post.is-topic .site-prose {
    font-size: 1.0625rem;
    line-height: 1.8;
}

/* 独立楼层卡：每层一张卡、层间留缝；头部用中性浅底（不再用主色浅底），
   无阴影、正文收紧内边距——与主帖的更强边框/阴影拉开层级，楼层视觉退到主帖之后。 */
.site-floor {
    background: var(--site-surface);
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-lg);
}

.site-floor + .site-floor {
    margin-top: .75rem;
}

.site-floor > .site-post-header {
    background: var(--site-surface-2);
    border-radius: var(--site-radius-lg) var(--site-radius-lg) 0 0;
}

.site-floor .site-post-body {
    padding: 1rem 1.25rem 1.15rem;
}

/* 区段标题（如「回帖 · N」）：下分隔线把正文与讨论区分开。 */
.site-section-head {
    margin: 2rem 0 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--site-border);
    font-size: 1.0625rem;
    font-weight: 700;
}

/* 主题正下方的回复区（#topic-reply）：与主题卡留出间距，紧接其后的回帖区段头自带上边距。 */
.site-topic-reply {
    margin-top: 1rem;
}

/* 滚动落点的顶部留白：避开吸顶顶栏（--site-header-height 由 token 决定）。 */
.site-floor[id^="reply-"],
#topic-reply {
    scroll-margin-top: calc(var(--site-header-height) + 1rem);
}

/* 楼层号按钮化：与文本徽章同观感，但可点（前端滚动定位到本楼层）。 */
button.site-post-floor {
    appearance: none;
    cursor: pointer;
    font-family: inherit;
}

button.site-post-floor:hover {
    color: var(--site-primary);
    border-color: var(--site-primary-border);
    background: var(--site-primary-soft);
}

/* 底部回复区「参与讨论」引导卡（未登录）。 */
.site-reply-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--site-surface);
    border: 1px dashed var(--site-border-strong);
    border-radius: var(--site-radius-lg);
}

.site-reply-cta-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.site-reply-cta-desc {
    margin: .25rem 0 0;
    color: var(--site-text-secondary);
    font-size: .875rem;
}

.site-reply-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* 醒目回复入口（主题/楼层回复区的整宽占位框）。 */
.site-reply-placeholder {
    display: block;
    width: 100%;
    padding: .7rem 1rem;
    text-align: left;
    color: var(--site-text-muted);
    background: var(--site-surface);
    border: 1px dashed var(--site-border-strong);
    border-radius: var(--site-radius-lg);
    font-size: .9375rem;
    transition: color .12s ease, border-color .12s ease, background-color .12s ease;
}

.site-reply-placeholder:hover {
    color: var(--site-primary);
    border-color: var(--site-primary-border);
    background: var(--site-primary-soft);
}

/* 楼层回复框所在容器（每条楼层正文之下）。 */
.site-floor-reply {
    margin-top: 1rem;
}

/* 楼层回复框比主题回复框轻一点：楼层数量多，避免整页被虚线框压满。
   （主题主回复框登录态用 site-reply-cta 卡片，与未登录「参与讨论」同款。） */
.site-floor-reply .site-reply-placeholder {
    padding: .5rem .85rem;
    font-size: .875rem;
}

/* 文字型回复入口（仅楼中楼条目；登录态是 button、未登录是 a，两者外观一致）：
   蓝色文字、无边框底色，左右各留一点边距与正文分开。 */
.site-reply-link {
    appearance: none;
    display: inline-block;
    background: none;
    border: 0;
    padding: 0;
    margin-inline: .4rem;
    color: var(--site-primary);
    font-size: .8125rem;
    font-weight: 500;
    line-height: inherit;
    text-decoration: none;
    cursor: pointer;
}

.site-reply-link:hover {
    color: var(--site-primary-hover);
    text-decoration: underline;
}

/* 楼中楼条目页脚：只放文字型回复按钮，比楼层操作条更紧凑。 */
/* 楼中楼正文与回复入口同行：回复链接贴着正文末尾排在同一行，不单独占一行。
   楼中楼 UI 恒为单段纯文本，但领域层只约束块「类型」不约束段数（ForumContent 只限 MaxBlocks），
   故对多段数据用 ::after 补换行分隔，行内化不会把历史/异常数据挤成一行。 */
.site-subpost .site-prose,
.site-subpost .site-prose > * {
    display: inline;
    margin: 0;
}

.site-subpost .site-prose > *:not(:last-child)::after {
    content: "\A";
    white-space: pre;
}

.site-subpost-footer {
    display: inline;
}

/* 展开成回复面板时恢复块级：面板需要整宽。 */
.site-subpost-footer:has(.site-reply-panel) {
    display: block;
    margin-top: .5rem;
}

/* 浮动回顶按钮：滚动一段距离后由 site-topic.js 加 is-visible 显形。 */
.site-topic-top {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1020;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--site-text-secondary);
    background: var(--site-surface);
    border: 1px solid var(--site-border);
    border-radius: 50%;
    box-shadow: var(--site-shadow-md);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--site-transition), visibility var(--site-transition),
        color .12s ease, border-color .12s ease;
}

.site-topic-top.is-visible {
    opacity: 1;
    visibility: visible;
}

.site-topic-top:hover {
    color: var(--site-primary);
    border-color: var(--site-primary-border);
}

/* 固定回复条：仅窄屏出现（宽屏回复入口已在正文末端与页尾可见，无需常驻遮挡）。 */
.site-reply-dock {
    display: none;
}

@media (max-width: 991.98px) {
    .site-reply-dock {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1020;
        display: block;
        padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom));
        background: var(--site-surface);
        border-top: 1px solid var(--site-border);
        box-shadow: var(--site-shadow-md);
    }

    /* 固定条会盖住页尾：给页面补等价下内边距（:has 选择器，本文件已有先例）。 */
    .site-page:has(.site-reply-dock) {
        padding-bottom: 4.25rem;
    }

    /* 窄屏回顶按钮上移，避免与固定回复条重叠。 */
    .site-topic-top {
        bottom: 4.75rem;
    }

    /* 窄屏头部信息列会折成多行：头像顶对齐作者名，不再居中到徽章那一行。 */
    .site-post-header .site-author-link {
        align-self: flex-start;
    }
}

/* 楼中楼：浅底圆角容器 */

.site-subposts {
    margin-top: 1.1rem;
    padding: .75rem 1rem;
    background: var(--site-surface-2);
    border-radius: var(--site-radius);
}

.site-subpost {
    padding: .55rem 0;
}

.site-subpost + .site-subpost {
    border-top: 1px solid var(--site-border);
}

.site-subpost-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem .5rem;
    font-size: .8125rem;
    color: var(--site-text-muted);
    margin-bottom: .25rem;
}

.site-subpost-author {
    font-weight: 600;
    color: var(--site-text-secondary);
}

/* ---------- 7b. 论坛列表页两栏（主列 + 右侧栏 ForumSidebar） ---------- */

.site-forum-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 1.5rem;
}

.site-forum-aside {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
    min-width: 0;
}

@media (min-width: 992px) {
    .site-forum-layout {
        grid-template-columns: minmax(0, 1fr) 300px;
        align-items: start;
    }

    .site-forum-aside {
        margin-top: 0;
    }
}

.site-aside-card {
    padding: 1rem 1.1rem;
}

.site-aside-card-title {
    font-weight: 700;
    font-size: .9375rem;
    margin-bottom: .65rem;
}

/* 登录用户快捷卡 */
.site-aside-user {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
}

.site-aside-user-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-aside-user-name a {
    color: var(--site-text);
    text-decoration: none;
}

.site-aside-user-name a:hover {
    color: var(--site-primary);
}

.site-aside-user-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-top: .25rem;
}

/* 板块快捷导航 */
.site-aside-cats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.site-aside-cat {
    font-weight: 600;
    font-size: .875rem;
    color: var(--site-text);
    text-decoration: none;
}

.site-aside-cat:hover {
    color: var(--site-primary);
}

/* 板块导航的当前板块高亮（主题详情页侧栏定位用）。 */
.site-aside-cat.is-active {
    color: var(--site-primary);
}

/* 详情页楼主作者卡的统计行（主题/回帖计数）。 */
.site-aside-author-stats {
    margin-top: .75rem;
    font-size: .8125rem;
    color: var(--site-text-muted);
}

.site-aside-subcats {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin-top: .375rem;
}

/* 最新主题 */
.site-aside-topics {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.site-aside-topic {
    display: block;
    font-size: .8125rem;
    color: var(--site-text);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-aside-topic:hover {
    color: var(--site-primary);
}

.site-aside-topic-cat {
    font-size: .75rem;
    color: var(--site-text-muted);
}

/* 站点统计 */
.site-aside-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
}

.site-aside-stat {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.site-aside-stat strong {
    font-size: 1.05rem;
}

.site-aside-stat span {
    font-size: .75rem;
    color: var(--site-text-muted);
}

/* ---------- 8. 正文排版（内容块只读渲染） ---------- */

.site-prose {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--site-text);
    overflow-wrap: break-word;
}

.site-prose > :last-child {
    margin-bottom: 0;
}

.site-prose h1 { font-size: 1.45rem; margin: 1.6em 0 .55em; }
.site-prose h2 { font-size: 1.3rem;  margin: 1.5em 0 .5em; }
.site-prose h3 { font-size: 1.175rem; margin: 1.4em 0 .45em; }
.site-prose h4 { font-size: 1.05rem; margin: 1.3em 0 .4em; }
.site-prose h5 { font-size: .95rem;  margin: 1.2em 0 .4em; }
.site-prose h6 { font-size: .9rem;   margin: 1.2em 0 .4em; color: var(--site-text-secondary); }
.site-prose h1:first-child, .site-prose h2:first-child, .site-prose h3:first-child,
.site-prose h4:first-child, .site-prose h5:first-child, .site-prose h6:first-child {
    margin-top: 0;
}

.site-prose p {
    margin: 0 0 .9em;
    white-space: pre-wrap;
}

/* 行内代码（Quill code 格式） */
.site-prose code {
    font-family: var(--site-font-mono);
    font-size: .875em;
    background: var(--site-surface-2);
    border: 1px solid var(--site-border);
    border-radius: .25rem;
    padding: .08em .35em;
}

/* 链接（净化层已强制 target=_blank + rel=noopener noreferrer nofollow） */
.site-prose a {
    color: var(--site-primary);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--site-primary) 35%, transparent);
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
}

.site-prose a:hover {
    text-decoration-color: var(--site-primary);
}

/* 正文内的 Bootstrap 按钮（下载/去回帖/登录/开通会员等 CTA）：上面的 `.site-prose a`
   （特异性 0,2,0）会盖掉按钮自身的文字色，实心按钮将变成「主色文字 + 主色底」不可读；
   这里恢复按钮配色并去掉链接下划线。 */
.site-prose a.btn {
    color: var(--bs-btn-color);
    text-decoration: none;
}

.site-prose a.btn:hover {
    color: var(--bs-btn-hover-color);
    text-decoration: none;
}

/* 列表（Quill list 格式；Quill 2 导出单个 <ol> 包全部 li，种类由 li[data-list] 区分，
   故 list-style 按属性接管而非依赖 ol/ul 上下文） */
.site-prose ul,
.site-prose ol {
    margin: 0 0 .9em;
    padding-left: 1.6rem;
}

.site-prose li {
    margin: .25em 0;
}

.site-prose li > p {
    margin: 0;
}

.site-prose ul ul,
.site-prose ol ol,
.site-prose ul ol,
.site-prose ol ul {
    margin-bottom: 0;
}

/* 各列表种类的项目符号（按 Quill 导出的 data-list 标记） */
.site-prose li[data-list="bullet"] {
    list-style: disc;
}

.site-prose li[data-list="ordered"] {
    list-style: decimal;
}

.site-prose li[data-list="unchecked"],
.site-prose li[data-list="checked"] {
    list-style: none;
}

/* 任务列表：勾选框由读端 CSS 绘制（编辑器侧 ql-ui 占位经净化剔除） */
.site-prose li[data-list="checked"],
.site-prose li[data-list="unchecked"] {
    position: relative;
}

.site-prose li[data-list="checked"]::before,
.site-prose li[data-list="unchecked"]::before {
    position: absolute;
    left: -1.5rem;
    font-size: 1em;
    line-height: inherit;
}

.site-prose li[data-list="checked"]::before {
    content: "☑";
    color: var(--site-primary);
}

.site-prose li[data-list="unchecked"]::before {
    content: "☐";
    color: var(--site-text-muted);
}

/* 引用块（QuoteBlockView） */

.site-quote {
    margin: 0 0 .9em;
    padding: .6rem 1rem;
    background: var(--site-surface-2);
    border-left: 3px solid var(--site-primary);
    border-radius: var(--site-radius);
    color: var(--site-text-secondary);
    white-space: pre-wrap;
    font-size: .9375rem;
}

.site-prose figure {
    margin: 0 0 1em;
}

.site-prose figure img {
    border-radius: var(--site-radius);
    border: 1px solid var(--site-border);
}

.site-prose figcaption {
    margin-top: .45rem;
    text-align: center;
    font-size: .85rem;
    color: var(--site-text-muted);
}

/* 代码块（CodeBlockView）：浅色卡片 + 头部条（语言徽标 + 复制按钮）。
   代码着色来自 hljs github 主题（js/site-code.js 按需注入），此处只管卡片结构。 */
.site-code {
    margin: 0 0 1em;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    overflow: hidden;
    background: var(--site-surface);
}

.site-code-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .3rem .65rem;
    background: var(--site-surface-2);
    border-bottom: 1px solid var(--site-border);
}

.site-code-lang {
    font-size: .75rem;
    color: var(--site-text-secondary);
    font-family: var(--site-font-mono);
}

.site-code-copy {
    padding: .1rem .55rem;
    border: 1px solid var(--site-border);
    border-radius: 999px;
    background: var(--site-surface);
    color: var(--site-text-secondary);
    font-size: .75rem;
    cursor: pointer;
    transition: color .12s ease, background-color .12s ease, border-color .12s ease;
}

.site-code-copy:hover {
    border-color: var(--site-primary-border);
    color: var(--site-primary);
    background: var(--site-primary-soft);
}

.site-code-copy:disabled {
    color: var(--site-primary);
    border-color: var(--site-primary-border);
    background: var(--site-primary-soft);
    cursor: default;
}

.site-code pre {
    margin: 0;
    padding: .7rem .85rem;
    overflow-x: auto;
    background: var(--site-surface);
}

.site-code pre code.hljs {
    display: block;
    padding: 0;
    background: transparent;
    font-family: var(--site-font-mono);
    font-size: .85rem;
    line-height: 1.6;
    color: var(--site-text);
}

/* 图库块（GalleryBlockView）：WordPress 式自适应行。服务端按「每行张数」分行（.site-gallery-row），
   行内宽度按原始宽高比（内联 --ar）经 flex 求解：basis 与 grow 同比 ⇒ 宽度必与 --ar 成正比、
   行高行内一致 =（容器−间隙）/Σar，任意容器宽度精确铺满，末行同样拉伸无留白。
   --site-gallery-row-src（内联，纯数字）= Columns 映射的目标行高，作 flex 基准与 max-height 钳制基准；
   竖图单独成行被 max-height 截住转 object-fit 裁切（行仍铺满）。窄屏行内允许换行，子行同样经 grow 铺满。
   点击仍走全站灯箱（.site-lightbox-link）。 */
.site-gallery {
    display: flex;
    flex-direction: column;
    gap: var(--site-gallery-gap, .5rem);
}

.site-gallery-row {
    --site-gallery-row: calc(var(--site-gallery-row-src, 210) * 1px);
    display: flex;
    gap: var(--site-gallery-gap, .5rem);
}

/* 行内条目共用的 flex 数学（读端 .site-gallery-item 与编辑器 .site-gallery-edit-cell 同一套）：
   basis 与 grow 同比 ∝ --ar ⇒ 宽度按原始宽高比分配、行高行内一致、精确铺满。 */
.site-gallery-item,
.site-gallery-edit-cell {
    flex-grow: var(--ar, 1);
    flex-shrink: 1;
    flex-basis: calc(var(--ar, 1) * var(--site-gallery-row, 210px));
    aspect-ratio: var(--ar, 1);
    max-height: calc(var(--site-gallery-row, 210px) * 2);
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    background: var(--site-surface-2);
}

.site-prose .site-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
    border-radius: 0;
}

@media (max-width: 767.98px) {
    .site-gallery-row {
        flex-wrap: wrap;
    }
}

/* ---------- 9. 行内回复面板（InlineReply 展开态，Client 组件用全局类） ---------- */

.site-reply-panel {
    margin-top: .75rem;
    padding: .875rem 1rem;
    background: var(--site-surface-2);
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
}

.site-mention-dropdown {
    background: var(--site-surface);
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    box-shadow: var(--site-shadow-md);
    margin-bottom: .5rem;
    overflow: auto;
    max-height: 10rem;
}

.site-mention-option {
    display: block;
    width: 100%;
    text-align: start;
    border: 0;
    background: transparent;
    padding: .35rem .65rem;
    font-size: .875rem;
    font-family: inherit;
    color: var(--site-text);
}

.site-mention-option:hover {
    background: var(--site-primary-soft);
    color: var(--site-primary);
}

/* ---------- 10. 表单 / 按钮 / 控件接管 ---------- */

.btn {
    font-weight: 500;
}

.btn-primary {
    --bs-btn-color: var(--site-on-primary);
    --bs-btn-bg: var(--site-primary-solid);
    --bs-btn-border-color: var(--site-primary-solid);
    --bs-btn-hover-color: var(--site-on-primary);
    --bs-btn-hover-bg: var(--site-primary-hover);
    --bs-btn-hover-border-color: var(--site-primary-hover);
    --bs-btn-focus-shadow-rgb: var(--site-primary-rgb);
    --bs-btn-active-color: var(--site-on-primary);
    --bs-btn-active-bg: var(--site-primary-active);
    --bs-btn-active-border-color: var(--site-primary-active);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    --bs-btn-disabled-color: var(--site-on-primary);
    --bs-btn-disabled-bg: var(--site-primary-solid);
    --bs-btn-disabled-border-color: var(--site-primary-solid);
}

.btn-outline-primary {
    --bs-btn-color: var(--site-primary);
    --bs-btn-border-color: var(--site-primary-border);
    --bs-btn-hover-color: var(--site-on-primary);
    --bs-btn-hover-bg: var(--site-primary-solid);
    --bs-btn-hover-border-color: var(--site-primary-solid);
    --bs-btn-focus-shadow-rgb: var(--site-primary-rgb);
    --bs-btn-active-color: var(--site-on-primary);
    --bs-btn-active-bg: var(--site-primary-active);
    --bs-btn-active-border-color: var(--site-primary-active);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    --bs-btn-disabled-color: var(--site-primary);
    --bs-btn-disabled-border-color: var(--site-primary-border);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus {
    box-shadow: 0 0 0 .25rem rgba(var(--site-primary-rgb), .18);
}

.form-control:focus, .form-select:focus {
    border-color: var(--site-primary-focus);
    box-shadow: 0 0 0 .25rem rgba(var(--site-primary-rgb), .13);
}



.form-check-input:checked {
    background-color: var(--site-primary-solid);
    border-color: var(--site-primary-solid);
}

/* 表单勾选控件聚焦：边框 + 柔和外圈（原被拆成上下两条分别声明，此处合并）。 */
.form-check-input:focus {
    border-color: var(--site-primary-focus);
    box-shadow: 0 0 0 .25rem rgba(var(--site-primary-rgb), .16);
}

.form-label {
    font-weight: 500;
    font-size: .9375rem;
}

.pagination {
    --bs-pagination-color: var(--site-text-secondary);
    --bs-pagination-bg: var(--site-surface);
    --bs-pagination-border-color: var(--site-border);
    --bs-pagination-border-radius: var(--site-radius);
    --bs-pagination-hover-color: var(--site-primary);
    --bs-pagination-hover-bg: var(--site-primary-soft);
    --bs-pagination-hover-border-color: var(--site-primary-border);
    --bs-pagination-focus-color: var(--site-primary);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--site-primary-rgb), .16);
    --bs-pagination-active-bg: var(--site-primary);
    --bs-pagination-active-border-color: var(--site-primary);
    --bs-pagination-disabled-color: var(--site-text-muted);
    --bs-pagination-disabled-bg: var(--site-surface);
    --bs-pagination-disabled-border-color: var(--site-border);
}

/* 校验 */

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--site-success-text);
}

.invalid {
    outline: 1px solid var(--site-danger-text);
}

.validation-message {
    color: var(--site-danger-text);
}

/* 表单/接口错误统一反馈（取代 text-danger 裸文本与 alert-danger 混用）。 */
.site-form-error {
    display: block;
    margin-top: .25rem;
    color: var(--site-danger-text);
    font-size: .875rem;
    overflow-wrap: anywhere;
}

/* ---------- 10b. 认证独立布局 + 登录 / 注册窄列卡片 ----------
   认证页（Account/Pages 全量）走 AuthLayout，脱离 MainLayout 顶栏/公告/完整页脚：
   增强档 = ≥992px 双栏（左品牌面板 + 右表单列），窄屏单列（品牌面板隐藏、顶部品牌条补位）。 */

.site-auth-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
}

.site-auth-pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    /* 右栏整块平面（与左品牌面板同为硬直角整块），不再用页面灰底。 */
    background: var(--site-surface);
}

/* 品牌面板：窄屏隐藏，由顶部品牌条补位（见 .site-auth-topbar-brand）。 */
.site-auth-brand {
    display: none;
}

.site-auth-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1rem;
}

/* 桌面隐藏品牌条后仅剩主题切换：靠右对齐（单子项时 space-between 会靠左）。 */
.site-auth-topbar > .site-popup {
    margin-left: auto;
}

/* 表单列：移动端居中，桌面左对齐（见 ≥992px 媒体查询）。 */
.site-auth-center {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.5rem 1rem 2.5rem;
}

.site-auth-wrap {
    width: 100%;
    max-width: 26rem;
    text-align: center;
}

/* 压平卡片外壳（双类选择器确保压过 .site-card）；类名保留给冒烟断言。 */
.site-card.site-auth-card {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* 认证页上下文提示（源于 ReturnUrl）。 */
.site-auth-context {
    margin: 0 0 1rem;
    padding: .5rem .75rem;
    border-radius: var(--site-radius);
    background: var(--site-primary-softer);
    color: var(--site-text-secondary);
    font-size: .8125rem;
}

/* 密码字段 + 显隐切换按钮（按钮绝对定位在 form-floating 内右侧，输入框留出内边距）。 */
.site-auth-pw .form-control {
    padding-right: 2.75rem;
}

/* 登录/注册页：覆盖浏览器「自动填充」的原生高亮（Firefox 淡黄 / Chromium 淡蓝）为站点表单底色。
   浏览器对带 autocomplete 语义的框自动填充时会给该字段加 UA 背景色，本站未做任何 autofill 样式。
   三引擎必须各写一条规则：把某引擎不识别的伪类与其它选择器并入同组，会让整条规则在该引擎失效。 */
.site-auth-autofill .form-control:autofill {
    background-image: linear-gradient(var(--site-surface), var(--site-surface));
    color: var(--site-text);
    -webkit-text-fill-color: var(--site-text);
}
.site-auth-autofill .form-control:-moz-autofill {
    background-image: linear-gradient(var(--site-surface), var(--site-surface));
    color: var(--site-text);
}
.site-auth-autofill .form-control:-webkit-autofill {
    background-image: linear-gradient(var(--site-surface), var(--site-surface));
    color: var(--site-text);
    -webkit-text-fill-color: var(--site-text);
}

.site-auth-pw-toggle {
    position: absolute;
    top: 50%;
    right: .5rem;
    transform: translateY(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--site-radius-sm);
    background: transparent;
    color: var(--site-text-muted);
    cursor: pointer;
}

.site-auth-pw-toggle:hover {
    color: var(--site-text);
    background: var(--site-surface-hover);
}

/* 密码可见时给眼睛加一道斜杠（无需额外图标资源）。 */
.site-auth-pw-toggle::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 1.5px;
    border-radius: 1px;
    background: currentColor;
    transform: rotate(45deg);
    opacity: 0;
}

.site-auth-pw-toggle.is-revealed::after {
    opacity: 1;
}

/* 表单校验汇总（ValidationSummary）+ 字段级错误（site-form-error）统一 token 化。 */
.site-validation-summary {
    margin-bottom: .75rem;
    color: var(--site-danger-text);
    font-size: .875rem;
}

.site-validation-summary ul {
    margin: 0;
    padding-left: 1.1rem;
}

/* 站点告警条（StatusMessage 等）：语义 token，替代 Bootstrap alert-*。 */
.site-alert {
    display: block;
    margin-bottom: 1rem;
    padding: .6rem .85rem;
    border: 1px solid;
    border-radius: var(--site-radius);
    font-size: .875rem;
}

.site-alert.is-danger {
    color: var(--site-danger-text);
    background: var(--site-danger-soft);
    border-color: var(--site-danger-border);
}

.site-alert.is-success {
    color: var(--site-success-text);
    background: var(--site-success-soft);
    border-color: var(--site-success-border);
}

.site-alert.is-info {
    color: var(--site-info-text);
    background: var(--site-info-soft);
    border-color: var(--site-info-border);
}

.site-alert.is-warning {
    color: var(--site-warning-text);
    background: var(--site-warning-soft);
    border-color: var(--site-warning-border);
}

/* 备选登录区：「或」分隔 + 竖向按钮组（通行密钥 / 第三方）。 */
.site-auth-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.25rem 0 1rem;
    color: var(--site-text-muted);
    font-size: .8125rem;
}

.site-auth-divider::before,
.site-auth-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--site-border);
}

.site-auth-alt {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* 备选登录区小标题（使用其他服务登录 / 注册）。 */
.site-auth-alt-title {
    margin: 0 0 .5rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--site-text-secondary);
}

/* 底部辅助链接行（注册 / 忘记密码 / 重发确认）。 */
.site-auth-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .25rem .75rem;
}

@media (min-width: 992px) {
    .site-auth-layout {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    }

    .site-auth-brand {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end; /* 品牌内容整体靠右贴分隔线（块级右对齐，内部列表仍左对齐、图标不散） */
        gap: 1.5rem;
        padding: 3rem clamp(2rem, 7vw, 5rem); /* 右内距与表单一致，使两侧留白围绕分隔线对称 */
        background: var(--site-brand-gradient);
        color: var(--site-on-primary);
    }

    /* 桌面：表单列左对齐贴一致的栅格内距（与品牌面板内距同节奏）。 */
    .site-auth-center {
        align-items: flex-start;
        padding-inline: clamp(2rem, 7vw, 5rem);
    }

    .site-auth-wrap {
        text-align: left;
    }

    .site-auth-links {
        justify-content: flex-start;
    }

    /* 桌面已有品牌面板，隐藏顶部品牌条（保留右上主题切换）。 */
    .site-auth-topbar-brand {
        display: none;
    }
}

.site-auth-brand-logo {
    color: var(--site-on-primary);
    font-size: 1.375rem;
}

.site-auth-brand-logo .site-brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .18);
    color: var(--site-on-primary);
    font-size: 1.125rem;
    box-shadow: none;
}

.site-auth-brand-tagline {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--site-on-primary);
}

.site-auth-brand-points {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-auth-brand-points li {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--site-on-primary-muted);
    font-size: .9375rem;
}

/* ---------- 11. 个人空间（site-userspace：常驻侧栏 + 正文） ----------
   由 Client 程序集的 UserSpaceShell 渲染，/u/{id}、/levels、/profile、
   /notifications、/messages 与 /account/manage/* 六簇页面共用一条侧栏；
   <992px 折叠为顶部横向 chip 条，身份头隐藏（顶栏头像菜单已有身份位）。 */

.site-userspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

@media (min-width: 992px) {
    .site-userspace {
        grid-template-columns: 200px minmax(0, 1fr);
        gap: 2rem;
    }

    .site-userspace-aside .site-userspace-nav {
        position: sticky;
        top: calc(var(--site-header-height) + 1.5rem);
    }
}

.site-userspace-aside {
    min-width: 0;
}

.site-userspace-nav {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: .75rem;
    background: var(--site-surface);
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-lg);
    box-shadow: var(--site-shadow);
}

.site-userspace-identity {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .375rem .5rem;
    border-radius: var(--site-radius);
    color: inherit;
    text-decoration: none;
}

.site-userspace-identity:hover {
    background: var(--site-surface-hover);
}

.site-userspace-identity-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .125rem;
    min-width: 0;
}

.site-userspace-identity-name {
    font-weight: 600;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-userspace-group {
    display: flex;
    flex-direction: column;
    gap: .125rem;
}

.site-userspace-group-title {
    padding: 0 .625rem .25rem;
    color: var(--site-text-muted);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .05em;
}

.site-userspace-link {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4375rem .625rem;
    border-radius: var(--site-radius);
    color: var(--site-text-secondary);
    font-weight: 500;
    font-size: .9375rem;
}

.site-userspace-link-icon {
    flex-shrink: 0;
    color: var(--site-text-muted);
}

.site-userspace-link-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-userspace-link:hover {
    color: var(--site-text);
    background: var(--site-surface-hover);
    text-decoration: none;
}

.site-userspace-link.active {
    color: var(--site-primary);
    background: var(--site-primary-soft);
}

.site-userspace-link.active .site-userspace-link-icon {
    color: var(--site-primary);
}

.site-userspace-badge {
    margin-left: auto;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 .3125rem;
    border-radius: 999px;
    background: var(--site-primary-solid);
    color: var(--site-on-primary);
    font-size: .6875rem;
    line-height: 1.125rem;
    text-align: center;
}

.site-userspace-body {
    min-width: 0;
}

.site-userspace-body h1 {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.01em;
    margin-bottom: 1rem;
}

@media (max-width: 991.98px) {
    .site-userspace-nav {
        flex-direction: row;
        align-items: center;
        gap: .25rem;
        overflow-x: auto;
        padding: .5rem;
    }

    .site-userspace-identity,
    .site-userspace-group-title {
        display: none;
    }

    .site-userspace-group {
        flex-direction: row;
        gap: .25rem;
    }

    .site-userspace-link {
        white-space: nowrap;
        padding: .375rem .625rem;
        font-size: .875rem;
    }

    .site-userspace-badge {
        margin-left: 0;
    }
}

/* Manage 子页表单卡：底色/边框/圆角/阴影复用 .site-card（razor 同时挂两个类），此处只补内边距。 */
.site-manage-form {
    padding: 1.25rem 1.5rem 1.5rem;
}

/* ---------- 11b. 账号设置区段落骨架（账号信息 / 登录与安全 / 个人数据共用）----------
   一段 = 一张卡（.site-card 只给底色边框，内边距由本组补），卡头为「图标 + 标题 + 状态徽章」，
   卡内是「名称 + 操作」的列表行。节奏按列表式设置页压紧。 */

/* 段落列表：段头之下逐行「名称 + 操作」，行间发丝线（首行也带线，形成表头分隔）。 */
.site-settings-list {
    margin-top: .5rem;
}

.site-settings-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem 0;
    border-top: 1px solid var(--site-border);
}

.site-settings-row:last-child {
    padding-bottom: 0;
}

.site-settings-row-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.site-settings-row-meta {
    flex-shrink: 0;
    color: var(--site-text-muted);
    font-size: .8125rem;
}

.site-settings-section {
    padding: 1rem 1.25rem 1.25rem;
    margin-bottom: .875rem;
}

.site-settings-section:last-child {
    margin-bottom: 0;
}

/* 危险区（注销账号、关闭双因素、重置密钥）：红色左边条 + 红边框，不用整卡填红。 */
.site-settings-section.is-danger {
    border-color: var(--site-danger-border);
    box-shadow: inset 3px 0 0 var(--site-danger-text);
}

.site-settings-section-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4375rem;
    margin-bottom: .25rem;
}

.site-settings-section-icon {
    flex-shrink: 0;
    color: var(--site-text-muted);
}

.site-settings-section-title {
    margin: 0;
    font-size: .9375rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.site-settings-state {
    margin-left: auto;
    padding: 0 .4375rem;
    border: 1px solid;
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.site-settings-state.is-on {
    color: var(--site-success-text);
    background: var(--site-success-soft);
    border-color: var(--site-success-border);
}

.site-settings-state.is-off {
    color: var(--site-text-muted);
    background: var(--site-surface-hover);
    border-color: var(--site-border);
}

.site-settings-section-desc {
    margin: 0 0 .75rem;
    color: var(--site-text-muted);
    font-size: .8125rem;
    line-height: 1.55;
}

.site-settings-subhead {
    margin: .875rem 0 .5rem;
    color: var(--site-text-secondary);
    font-size: .8125rem;
    font-weight: 600;
}

/* 表单列宽跟随所在列；列本身已由网格与卡片内边距收窄，无需再设绝对值。 */
.site-settings-form {
    max-width: 100%;
}

.site-settings-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4375rem;
    margin-top: .75rem;
}

.site-settings-row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .375rem;
    flex-shrink: 0;
}

.site-settings-table .table > :not(caption) > * > * {
    padding: .4375rem .25rem;
    border-bottom-color: var(--site-border);
    background: transparent;
}

.site-settings-divider {
    margin: 1rem 0;
    border-color: var(--site-border);
    opacity: 1;
}

.site-settings-hint {
    color: var(--site-text-muted);
    font-size: .8125rem;
}

.site-settings-danger-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: .875rem;
    padding-top: .75rem;
    border-top: 1px dashed var(--site-border);
}

/* 验证器密钥：等宽 + 可整段选中，便于手动录入。 */
.site-settings-key {
    padding: .75rem 1rem;
    border: 1px dashed var(--site-border-strong);
    border-radius: var(--site-radius);
    background: var(--site-surface-hover);
    font-family: var(--site-font-mono);
    font-size: .9375rem;
    letter-spacing: .05em;
    overflow-wrap: anywhere;
    user-select: all;
}

.site-settings-key code {
    color: var(--site-text);
    font-size: inherit;
}

/* 验证器绑定：左二维码、右密钥与直达链接；窄屏纵向堆叠。二维码保留白底 + 留白（扫描必要条件）。 */
.site-settings-apps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
    margin-bottom: .75rem;
}

.site-settings-apps-label {
    color: var(--site-text-muted);
    font-size: .8125rem;
}

.site-settings-qr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.site-settings-qr-image {
    flex-shrink: 0;
    max-width: 100%;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    background: #fff;
    padding: .25rem;
}

.site-settings-qr-side {
    flex: 1 1 14rem;
    min-width: 0;
}

/* 恢复代码：自适应网格，等宽字体便于抄写。 */
.site-recovery-codes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: .5rem;
}

.site-recovery-codes .recovery-code {
    display: block;
    padding: .5rem .625rem;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-sm);
    background: var(--site-surface-hover);
    color: var(--site-text);
    font-family: var(--site-font-mono);
    font-size: .875rem;
    text-align: center;
    user-select: all;
}

/* 外部链接跳转页的窄列容器（原复用 site-auth-* 属语义错位，独立命名）。 */
.site-jump-wrap {
    max-width: 30rem;
    margin-inline: auto;
}

.site-jump-card {
    padding: 1.5rem;
}

/* ---------- 12. 论坛板块徽标（保留命名，观感并入 token） ---------- */

.forum-cat-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid var(--site-border);
}

.forum-cat-badge-lg {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    font-size: 24px;
}

/* ---------- 13. 模板遗留功能性样式 ---------- */

.darker-border-checkbox.form-check-input {
    border-color: var(--site-border-strong);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

#blazor-error-ui {
    background: var(--site-warning-soft);
    border-top: 1px solid var(--site-warning-border);
    bottom: 0;
    box-shadow: 0 -1px 4px rgba(31, 35, 40, .1);
    display: none;
    left: 0;
    padding: .7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-size: .9rem;
    color: var(--site-text);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: .75rem;
    top: .55rem;
    border: 0;
    background: none;
    color: inherit;
    padding: .15rem .4rem;
    border-radius: 4px;
}

/* ---------- 13b. 富文本编辑器（.site-rte，Quill 段落编辑器） ----------
   编辑器（ParagraphBlockEditor，Ui 共享组件）只在前台客户端交互上下文出现，
   样式集中在本全局表；工具栏默认隐藏，编辑器/工具栏内任一处聚焦（:focus-within）才显示。 */

.site-rte .ql-toolbar.ql-snow {
    display: none;
    padding: .45rem .5rem;
    background: var(--site-surface-2);
    border-color: var(--site-border-strong);
    border-radius: var(--site-radius) var(--site-radius) 0 0;
    font-family: var(--site-font-sans);
}

.site-rte:focus-within .ql-toolbar.ql-snow {
    display: block;
}

/* 工具栏紧凑化：Quill 默认组间 15px、按钮 28px 偏松，窄回复面板里易换行。
   quill.snow.css 是运行时注入 head（排在 app.css 之后），同特异性会被它压过，
   故这两条显式带上 .site-rte + 双类，特异性高于 Quill 默认。 */
.site-rte .ql-snow.ql-toolbar .ql-formats {
    margin-right: 8px;
}

.site-rte .ql-snow.ql-toolbar button {
    width: 26px;
    padding: 3px 4px;
}

/* 字号档位收窄成图标：Quill 默认标签是 Normal/Small/Large/Huge 文本、定宽 98px。
   这里标签只留一个随当前档位缩放的「A」（字形大小即预览），弹出层仍保留原文案与字号预览，
   故单独把 options 撑回 98px——标签收窄不会牺牲下拉里的可读性。 */
.site-rte .ql-snow .ql-picker.ql-size {
    width: 46px;
}

.site-rte .ql-snow .ql-picker.ql-size .ql-picker-options {
    width: 98px;
}

/* 标签选择器必须带 .ql-toolbar：Quill 的 `.ql-size .ql-picker-label[data-value=…]::before`
   与不带 .ql-toolbar 的写法同为 (0,5,0)，而 quill.snow.css 后加载会赢，故叠加一类到 (0,6,0)/(0,7,0)。 */
.site-rte .ql-snow.ql-toolbar .ql-picker.ql-size .ql-picker-label::before {
    content: "A";
    font-size: 14px;
    font-weight: 600;
}

.site-rte .ql-snow.ql-toolbar .ql-picker.ql-size .ql-picker-label[data-value="small"]::before {
    font-size: 10px;
}

.site-rte .ql-snow.ql-toolbar .ql-picker.ql-size .ql-picker-label[data-value="large"]::before {
    font-size: 18px;
}

.site-rte .ql-snow.ql-toolbar .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before {
    font-size: 21px;
}

/* 回复面板内的编辑器是整宽就地展开的表单，而画布编辑器把工具条设计成悬浮覆盖层
   （见「13b 富文本编辑器」节的 .site-editor .site-rte 规则，那条是段落块不引起布局位移所需）。
   覆盖层在面板里会悬到面板外盖住标题行，故此处压过它、还原为文档流内的正常块。
   特异性需高于 .site-editor .site-rte .ql-toolbar.ql-snow（3 类），故显式带上画布层级。 */
.site-reply-panel .site-editor .site-rte .ql-toolbar.ql-snow {
    position: static;
    bottom: auto;
    z-index: auto;
    margin-bottom: .4rem;
}

/* 编辑面板展开时隐藏被编辑的原正文：面板即该条目的编辑态，两者同显会造成同一内容重复。
   仅针对编辑（.site-reply-panel）；举报面板不隐藏——举报时仍需看到被举报内容。 */
.site-post-header:has(.site-reply-panel-edit) + .site-post-body {
    display: none;
}

.site-subpost:has(.site-reply-panel-edit) > .site-prose,
.site-subpost:has(.site-reply-panel-edit) > .site-subpost-footer {
    display: none;
}

.site-rte .ql-container.ql-snow {
    border-color: var(--site-border-strong);
    border-radius: var(--site-radius);
    font-family: var(--site-font-sans);
    transition: border-color .12s ease;
}

.site-rte:focus-within .ql-container.ql-snow {
    border-color: var(--site-primary-border);
    border-radius: 0 0 var(--site-radius) var(--site-radius);
}

.site-rte .ql-editor {
    min-height: 6.5rem;
    padding: .55rem .75rem;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--site-text);
    overflow-wrap: break-word;
}

.site-rte .ql-editor.ql-blank::before {
    left: .75rem;
    right: .75rem;
    color: var(--site-text-muted);
    font-style: normal;
}

/* 交互端接管前的加载占位：ParagraphBlockEditor 只渲染空挂载点，
   WASM/Server 电路就绪并由 JS 建出编辑器后（mount 非空）占位自动消失。 */
.site-rte-mount:empty::before {
    content: "编辑器加载中…";
    display: flex;
    align-items: center;
    min-height: 6.5rem;
    padding: .55rem .75rem;
    color: var(--site-text-muted);
    font-size: .875rem;
}

.site-rte .ql-snow .ql-picker.ql-color-picker .ql-picker-label svg .ql-color-label {
    stroke-width: 2.5px;
}

/* 调色盘：色块加浅描边让白色/浅色块可见；首个「默认色」块（无 data-value）画红斜杠表示清除属性。
   该块由 COLOR_PALETTE 里的 false 生成，点击后移除文字色/背景色。 */
.site-rte .ql-snow .ql-color-picker .ql-picker-item {
    border-color: var(--site-border);
}

.site-rte .ql-snow .ql-color-picker .ql-picker-item:not([data-value]) {
    background-color: #fff;
    background-image: linear-gradient(135deg, transparent 44%, #dc2626 44%, #dc2626 56%, transparent 56%);
}

/* 自定义颜色：调色盘底部一行原生取色输入（预设色块之外的任意颜色）。 */
.site-rte .ql-snow .ql-color-picker .ql-picker-options .site-rte-custom-color {
    display: block;
    clear: both;
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid var(--site-border);
    cursor: pointer;
}

.site-rte .ql-snow .ql-color-picker .ql-picker-options .site-rte-custom-color input[type="color"] {
    display: block;
    width: 100%;
    height: 20px;
    padding: 0 2px;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-sm);
    background: none;
    cursor: pointer;
}

.site-rte .ql-snow .ql-color-picker .ql-picker-options .site-rte-custom-color::after {
    content: "自定义颜色…";
    display: block;
    margin-top: 3px;
    font-size: .7rem;
    line-height: 1.2;
    color: var(--site-text-muted);
}

/* ---------- 14. 文档画布块编辑器（.site-editor，BlockEditorHost） ----------
   整个编辑器一张统一画布，块以文档流相连（无独立边框），配色全走 --site-* token；
   聚焦/hover 的块浮出工具 chip，块间悬停出现 ＋ 插入行。ParagraphBlockEditor 的
   .site-rte 在画布内被覆盖为"无边框纯文本流"，工具栏融合画布配色。 */

.site-editor {
    position: relative;
    background: var(--site-surface);
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-lg);
    padding: .35rem .9rem .75rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.site-editor:focus-within {
    border-color: var(--site-primary-border);
    box-shadow: 0 0 0 3px rgba(var(--site-primary-rgb), .08);
}

/* 裸画布（写作页 Bare=true）：去框去底去内边距，块即纯文档流，与读端 .site-prose 同构——
   容器感由宿主正文卡承担；块水平内边距归零后文字起点 = 卡 padding，与读端文字级对齐。
   楼层回复框等其余调用方保持默认画布（不加此参数即不受影响）。 */
.site-editor.site-editor-bare {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
}

.site-editor.site-editor-bare:focus-within {
    border-color: transparent;
    box-shadow: none;
}

.site-editor-bare .site-editor-block {
    padding-left: 0;
    padding-right: 0;
}

/* 裸画布下段落编辑器的水平内边距一并归零：文字起点与读端完全一致（占位提示同步）。
   特异性须压过第 14 节尾部的画布内融合形态规则（.site-editor .site-rte .ql-editor，0-3-0）。 */
.site-editor.site-editor-bare .site-rte .ql-editor {
    padding-left: 0;
    padding-right: 0;
}

.site-editor.site-editor-bare .site-rte .ql-editor.ql-blank::before {
    left: 0;
    right: 0;
}

/* 块 = 纯文档流单元，无独立边框、无常驻分隔线；hover/聚焦浮出工具 chip 与插入 ＋。 */
.site-editor-block {
    position: relative;
    padding: .25rem .25rem;
    margin: .1rem 0;
    border-radius: var(--site-radius-sm);
}

.site-editor-tools {
    display: none;
    position: absolute;
    top: -.85rem;
    right: .15rem;
    gap: .1rem;
    /* z-35 高于吸附顶部添加栏（z-30）：块滚到栏下时 hover 出的 chip 浮在栏上、保持可点
       （低于插入菜单 backdrop 40 / 菜单 50）。.site-editor-custom 同理。 */
    z-index: 35;
    background: var(--site-surface);
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-sm);
    box-shadow: var(--site-shadow-md);
    padding: .1rem;
}

.site-editor-block:hover .site-editor-tools,
.site-editor-block:focus-within .site-editor-tools {
    display: inline-flex;
}

/* 块悬浮控件的空间规范：右上角=标准排序删除（.site-editor-tools），
   上下缘中点=添加块（.site-editor-add-btn），左上角=块自定义控件（.site-editor-custom）。
   自定义 chip 与工具 chip 同显隐规则，各占一角互不拥挤。 */
.site-editor-custom {
    display: none;
    position: absolute;
    top: -.85rem;
    left: .15rem;
    z-index: 35; /* 同 .site-editor-tools：高于吸附添加栏 z-30 */
    background: var(--site-surface);
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-sm);
    box-shadow: var(--site-shadow-md);
    padding: .1rem;
}

.site-editor-block:hover .site-editor-custom,
.site-editor-block:focus-within .site-editor-custom {
    display: inline-flex;
}

/* 编辑段落期间（工具条悬浮于块上方）工具 chip 临时让位到块右下角：同为覆盖层，无布局位移。 */
.site-editor-block:has(.site-rte:focus-within) .site-editor-tools {
    top: auto;
    bottom: -.85rem;
}

/* 块自定义控件（左上角 chip 内）的下拉：紧凑高度（代码语言、标题等级通用）。 */
.site-editor .site-editor-custom select {
    width: 7.5rem;
    height: 1.4rem;
    padding: 0 .2rem;
    font-size: .75rem;
    line-height: 1.2;
    color: var(--site-text-secondary);
    background: var(--site-surface);
    border-color: var(--site-border);
}

.site-editor-tool {
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0;
    line-height: 1.2;
    border: none;
    border-radius: .25rem;
    background: transparent;
    color: var(--site-text-secondary);
    font-size: .8rem;
    cursor: pointer;
}

.site-editor-tool:hover {
    background: var(--site-surface-hover);
    color: var(--site-text);
}

.site-editor-tool.danger:hover {
    background: var(--site-danger-soft);
    color: var(--site-danger-text);
}

.site-editor-tool:disabled {
    opacity: .3;
    pointer-events: none;
}

/* 拖拽手柄（右上角 chip 内，唯一拖拽源）：鼠标拖拽排序；键盘仍用 ↑↓，故手柄 aria-hidden。
   不设 touch-action:none——HTML5 DnD 本就不支持触摸，别把移动端滚动手势也挡了。 */
.site-editor-grip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
}

.site-editor-grip:active {
    cursor: grabbing;
}

.site-editor-grip .site-icon {
    display: block;
}

/* 拖拽中的来源块半透明；工具 chip 保持可见（拖拽期间 :hover 不可靠）。 */
.site-editor-block.is-dragging {
    opacity: .45;
}

.site-editor-block.is-dragging .site-editor-tools {
    display: inline-flex;
}

/* 插入指示线：伪元素画线，JS 只切 class、不改 DOM 结构（与增强导航的 DOM diff 不冲突）。 */
.site-editor-block.drop-before::before,
.site-editor-block.drop-after::after {
    content: "";
    position: absolute;
    left: .25rem;
    right: .25rem;
    height: 2px;
    background: var(--site-primary);
    border-radius: 2px;
    z-index: 30;
    pointer-events: none;
}

.site-editor-block.drop-before::before {
    top: -.35rem;
}

.site-editor-block.drop-after::after {
    bottom: -.35rem;
}

.site-editor-unsupported {
    color: var(--site-text-muted);
    font-style: italic;
    padding: .35rem .25rem;
}

/* 块间插入：上下缘居中的悬浮 ＋ + 蓝色示意线（均为绝对定位覆盖层，显隐零布局位移）。
   显隐 = 块 hover/focus-within；菜单打开时鼠标移到透明 backdrop 上块会失去 :hover，
   故打开态由 razor 侧以 open 类 / aria-expanded 固定，线与被点的 ＋ 不会消失。 */
.site-editor-add-btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 35; /* 同 .site-editor-tools：高于吸附添加栏 z-30，低于插入菜单 backdrop z-40 */
    display: none;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 1px solid var(--site-primary-border);
    border-radius: 50%;
    background: var(--site-surface);
    color: var(--site-primary);
    font-size: .85rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--site-shadow);
}

.site-editor-add-btn.before {
    top: -.75rem;
}

.site-editor-add-btn.after {
    bottom: -.75rem;
}

.site-editor-add-btn:hover {
    background: var(--site-primary-soft);
}

.site-editor-block:hover .site-editor-add-btn,
.site-editor-block:focus-within .site-editor-add-btn,
.site-editor-add-btn[aria-expanded="true"] {
    display: inline-flex;
}

.site-editor-add-btn:disabled {
    opacity: .35;
    pointer-events: none;
}

/* 唯一性：同一时刻只显示一个块的 ＋/示意线——
   画布内有 hover 块时，其余块（含聚焦块）一律隐藏；
   插入菜单打开时，只保留打开菜单的那个块。 */
/* 唯一性：同一时刻只显示一个块的 ＋/示意线。
   hover 分支用「同级相邻 + 同级前置」两个选择器表达 :not(:hover)，避免在 :has() 内嵌 :not(:has())
   导致鼠标在画布内移动时反复对整个块列表重算（插入菜单分支是低频结构态，保留 :has()）。 */
.site-editor:has(.site-editor-block:hover) .site-editor-block:hover ~ .site-editor-block .site-editor-add-btn,
.site-editor:has(.site-editor-block:hover) .site-editor-block:has(~ .site-editor-block:hover) .site-editor-add-btn,
.site-editor:has(.site-editor-backdrop) .site-editor-block:not(:has(.site-editor-insert-menu)) .site-editor-add-btn {
    display: none;
}

.site-editor-add-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    z-index: 19;
    display: none;
    border-top: 1px solid color-mix(in srgb, var(--site-border) 45%, transparent);
    pointer-events: none;
}

.site-editor-add-line.before {
    top: 0;
}

.site-editor-add-line.after {
    bottom: 0;
}

.site-editor-block:hover .site-editor-add-line,
.site-editor-block:focus-within .site-editor-add-line,
.site-editor-add-line.open {
    display: block;
}

.site-editor:has(.site-editor-block:hover) .site-editor-block:not(:hover) .site-editor-add-line,
.site-editor:has(.site-editor-backdrop) .site-editor-block:not(:has(.site-editor-insert-menu)) .site-editor-add-line {
    display: none;
}

/* 插入菜单：锚定在所属块对应缘的 ＋ 按钮外侧，浮于 backdrop 之上。
   横向一排块类型图标（极窄屏 flex-wrap 降级两行），打开时自 ＋ 一侧横向展开。 */
.site-editor-insert-menu {
    position: absolute;
    left: 50%;
    z-index: 50;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: .15rem;
    max-width: min(22rem, calc(100vw - 2rem));
    padding: .3rem;
    background: var(--site-surface);
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    box-shadow: var(--site-shadow-md);
    transform: translateX(-50%);
    animation: site-editor-insert-in .16s ease-out;
}

.site-editor-insert-menu.after {
    top: calc(100% + .85rem);
    transform-origin: top center;
}

.site-editor-insert-menu.before {
    bottom: calc(100% + .85rem);
    transform-origin: bottom center;
}

@keyframes site-editor-insert-in {
    from {
        opacity: 0;
        transform: translateX(-50%) scale(.82);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-editor-insert-menu {
        animation: none;
    }
}

.site-editor-insert-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border: none;
    border-radius: var(--site-radius-sm);
    background: transparent;
    color: var(--site-text-secondary);
    cursor: pointer;
    transition: color .12s ease, background-color .12s ease;
}

.site-editor-insert-option:hover,
.site-editor-insert-option:focus-visible {
    background: var(--site-primary-soft);
    color: var(--site-primary);
}

/* 悬停块名（纯 CSS tooltip，data-tip）：向所属块一侧弹出（after 菜单向上、before 菜单向下），
   落在菜单与块之间的空隙，既不遮正文也不出视口；触屏无 hover 自然不出现。 */
.site-editor-insert-option::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    z-index: 60;
    padding: .18rem .5rem;
    border-radius: var(--site-radius-sm);
    background: var(--site-text);
    color: var(--site-surface);
    font-size: .75rem;
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-50%) scale(.92);
    transition: opacity .1s ease, transform .1s ease;
}

.site-editor-insert-menu.after .site-editor-insert-option::after {
    bottom: calc(100% + .3rem);
    transform-origin: center bottom;
}

.site-editor-insert-menu.before .site-editor-insert-option::after {
    top: calc(100% + .3rem);
    transform-origin: center top;
}

/* 显示延迟 0.25s（扫过图标不闪 tooltip），隐藏即时——transition 取目的态参数，故延迟只写在显式态。 */
.site-editor-insert-option:hover::after,
.site-editor-insert-option:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
    transition-delay: .25s;
}

.site-editor-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
}

/* 顶部添加栏（2026-10-01 由底部搬迁）：纯图标、悬停/聚焦经 data-tip 显块名；
   sticky 钉在吸顶页头（--site-header-height）之下，随页面滚动在编辑器范围内常驻；
   不透明底 + 下缘细线防滚动内容透出。空状态时整栏隐藏（空态快捷 chips 即添加入口）。 */
.site-editor-addbar {
    position: sticky;
    top: var(--site-header-height);
    z-index: 30;
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: wrap;
    padding: .4rem 0;
    background: var(--site-surface);
    border-bottom: 1px solid var(--site-border);
}

/* 图标圆钮。 */
.site-editor-add {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--site-radius-sm);
    background: transparent;
    color: var(--site-text-secondary);
    cursor: pointer;
    transition: color .12s ease, background-color .12s ease;
}

.site-editor-add:hover {
    border-color: var(--site-primary-border);
    background: var(--site-primary-soft);
    color: var(--site-primary);
}

/* data-tip tooltip（镜像插入菜单的纯 CSS 模式，向下弹出——工具栏在顶部）。 */
.site-editor-addbar .site-editor-add::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + .35rem);
    left: 50%;
    z-index: 60;
    padding: .18rem .5rem;
    border-radius: var(--site-radius-sm);
    background: var(--site-text);
    color: var(--site-surface);
    font-size: .75rem;
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-50%) scale(.92);
    transition: opacity .1s ease, transform .1s ease;
}

/* 显示延迟 0.25s（扫过图标不闪 tooltip），隐藏即时——同插入菜单的显式态参数。 */
.site-editor-addbar .site-editor-add:hover::after,
.site-editor-addbar .site-editor-add:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
    transition-delay: .25s;
}

.site-editor-add:disabled {
    opacity: .35;
    pointer-events: none;
}

.site-editor-count {
    margin-left: auto;
    color: var(--site-text-muted);
    font-size: .75rem;
}

/* 达到块数上限：计数转警示色（添加入口同时禁用并带原因 title）。 */
.site-editor-count.is-full {
    color: var(--site-danger-text);
    font-weight: 600;
}

/* 空态：画布内居中提示 + 快捷添加 chips。 */
.site-editor-empty {
    padding: 2.25rem 1rem 1.75rem;
    text-align: center;
}

.site-editor-empty-title {
    margin: 0 0 .25rem;
    color: var(--site-text-secondary);
    font-weight: 600;
}

.site-editor-empty-hint {
    margin: 0 0 .9rem;
    color: var(--site-text-muted);
    font-size: .8125rem;
}

.site-editor-empty-actions {
    display: flex;
    justify-content: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.site-editor-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .85rem;
    border: 1px solid var(--site-border);
    border-radius: 999px;
    background: var(--site-surface);
    color: var(--site-text-secondary);
    font-size: .875rem;
    cursor: pointer;
    transition: color .12s ease, background-color .12s ease, border-color .12s ease;
}

.site-editor-chip:hover {
    border-color: var(--site-primary-border);
    background: var(--site-primary-soft);
    color: var(--site-primary);
}

/* 画布内块编辑器的融合形态：段落 = 无边框纯文本流；标题按级数字号；引用浅底左条。 */

.site-editor .site-rte .ql-container.ql-snow {
    border: none;
    border-radius: var(--site-radius-sm);
    transition: background-color .12s ease;
}

.site-editor .site-rte:focus-within .ql-container.ql-snow {
    border: none;
    background: color-mix(in srgb, var(--site-primary-softer) 55%, transparent);
    border-radius: var(--site-radius-sm);
}

.site-editor .site-rte .ql-editor {
    min-height: 2.25rem;
    padding: .3rem .45rem;
}

.site-editor .site-rte {
    position: relative;
}

/* 工具条为覆盖层：悬浮于编辑器上方显隐，不占文档流——段落块不再引起布局位移。
   工具条会与右上角的 ↑↓× 工具 chip 重叠，编辑期间该 chip 由上方规则让位到块右下。
   z-35 须高于吸附顶部添加栏（.site-editor-addbar z-30）：段落滚到栏下时工具条
   浮在栏上而非被遮（低于插入菜单 backdrop 40 / 菜单 50）。 */
.site-editor .site-rte .ql-toolbar.ql-snow {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + .2rem);
    z-index: 35;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-sm);
    box-shadow: var(--site-shadow-md);
}

.site-editor .site-rte:focus-within .ql-toolbar.ql-snow {
    border-color: var(--site-primary-border);
}

/* 标题块：等级切换默认隐藏（块悬浮/聚焦时才显示），文本无边框、字号随级数（内联 style 控制）。 */
.site-editor .heading-editor {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.site-editor .heading-editor .heading-editor-level {
    display: none;
    width: 4rem;
    flex: none;
    font-size: .75rem;
    color: var(--site-text-muted);
    background: var(--site-surface-2);
    border-color: transparent;
}

.site-editor .site-editor-block:hover .heading-editor-level,
.site-editor .site-editor-block:focus-within .heading-editor-level {
    display: block;
}

.site-editor .heading-editor .heading-editor-text {
    border-color: transparent;
    background: transparent;
    padding: .3rem .45rem;
    box-shadow: none;
}

.site-editor .heading-editor .heading-editor-text:focus {
    background: var(--site-surface);
    border-color: var(--site-primary-border);
    box-shadow: 0 0 0 3px rgba(var(--site-primary-rgb), .08);
}

/* 引用块：浅底 + 左 indigo 条；默认一行高（field-sizing 支持时随内容自适应）。 */
.site-editor .quote-editor-text {
    background: var(--site-primary-softer);
    border: none;
    border-left: 3px solid var(--site-primary-border);
    border-radius: 0 var(--site-radius-sm) var(--site-radius-sm) 0;
    padding: .5rem .75rem;
    color: var(--site-text);
    font-style: normal;
    field-sizing: content;
    min-height: 2.5rem;
    max-height: 24rem;
}

.site-editor .quote-editor-text:focus {
    border-left-color: var(--site-primary);
    background: var(--site-primary-soft);
    box-shadow: none;
}

/* 图片块：操作条（更换按钮 + ✎说明）主色浅底描边。桌面悬浮图底部轻压图片下缘、
   随悬停图片块或键盘聚焦操作条时显隐（同图库控制条的 hover:hover 策略）；
   触屏无 hover 内联常驻不遮图。说明输入不在条内：桌面为 ✎ 展开/聚焦时常显、
   失焦收起的居中深色胶囊浮层（盖在图片中心，与底部悬浮条/块缘 ＋ 不再抢占同一空间），
   触屏为图片下方的内联输入行（常驻）。 */
.site-editor .image-editor-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .4rem .65rem;
    border: 1px solid var(--site-primary-border);
    border-radius: var(--site-radius);
    background: var(--site-primary-softer);
}

@media (hover: hover) {
    .site-editor .image-editor-bar {
        position: absolute;
        left: .5rem;
        right: .5rem;
        bottom: .5rem;
        z-index: 3;
        box-shadow: 0 6px 24px rgba(0, 0, 0, .22);
        opacity: 0;
        visibility: hidden;
        transition: opacity .12s ease, visibility .12s ease;
    }

    .site-editor .image-editor:hover .image-editor-bar,
    .site-editor .image-editor-bar:focus-within {
        opacity: 1;
        visibility: visible;
    }

    /* 说明输入浮层（textarea）：盖在图片中心，默认单行高。不支持 field-sizing 的浏览器
       固定宽度、超 max-height 行内滚动降级；支持时宽度随内容增长，逼近 max-width
       （两侧各留 1.5rem 空隙、不与图片同宽）后转为自动换行、高度随之增高。 */
    .site-editor .image-editor .image-editor-alt {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: min(420px, calc(100% - 3rem));
        max-height: 16rem;
        resize: none;
        z-index: 4;
        border: 1px solid rgba(255, 255, 255, .25);
        border-radius: var(--site-radius-sm);
        background: rgba(0, 0, 0, .62);
        color: #fff;
        opacity: 0;
        visibility: hidden;
        transition: opacity .12s ease, visibility .12s ease;
    }

    @supports (field-sizing: content) {
        .site-editor .image-editor .image-editor-alt {
            width: auto;
            min-width: 15rem;
            max-width: min(420px, calc(100% - 3rem));
            field-sizing: content;
        }
    }

    .site-editor .image-editor .image-editor-alt::placeholder {
        color: rgba(255, 255, 255, .55);
    }

    .site-editor .image-editor .image-editor-alt:focus {
        outline: none;
        border-color: var(--site-primary-solid);
        box-shadow: none;
        background: rgba(0, 0, 0, .72);
    }

    .site-editor .image-editor.show-alt .image-editor-alt,
    .site-editor .image-editor .image-editor-alt:focus {
        opacity: 1;
        visibility: visible;
    }
}

/* 代码块编辑器：等宽 textarea，默认一行高（field-sizing 支持时随内容自适应）。
   语言选择并入工具 chip（↑↓× 同排），样式见工具 chip 区的 .code-editor-language。 */
.site-editor .code-editor {
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-sm);
}

.site-editor .code-editor .code-editor-text {
    border: none;
    border-radius: var(--site-radius-sm);
    background: var(--site-surface);
    font-family: var(--site-font-mono);
    font-size: .85rem;
    line-height: 1.6;
    padding: .55rem .65rem;
    resize: vertical;
    /* 默认一行高；field-sizing 支持的浏览器随内容自适应，超长后内部滚动。 */
    field-sizing: content;
    min-height: 2.5rem;
    max-height: 24rem;
}

.site-editor .code-editor .code-editor-text:focus {
    box-shadow: none;
    background: var(--site-surface);
}

/* 图片块：空态虚线占位；选中图 WYSIWYG 预览——与读端 img-fluid 同语义（自然宽度、
   上限画布宽），不再压进 420×240 小框；.image-editor 同时是悬浮操作条的定位基准。 */
.site-editor .image-editor {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.site-editor .image-editor-preview {
    display: block;
    align-self: center;
    max-width: 100%;
    height: auto;
    border-radius: var(--site-radius);
    border: 1px solid var(--site-border);
}

.site-editor .image-editor-empty,
.site-editor .site-gallery-empty {
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(420px, 100%);
    height: 120px;
    border: 1.5px dashed var(--site-border-strong);
    border-radius: var(--site-radius);
    color: var(--site-text-muted);
    font-size: .875rem;
    cursor: pointer;
    transition: color .12s ease, background-color .12s ease, border-color .12s ease;
}

.site-editor .image-editor-empty:hover,
.site-editor .site-gallery-empty:hover {
    border-color: var(--site-primary-border);
    background: var(--site-primary-softer);
    color: var(--site-primary);
}

/* 图库块编辑器（GalleryBlockEditor）：与读端同款的自适应行实时预览（复用 §8 的
   .site-gallery-row/.site-gallery-item flex 数学，格共用类 .site-gallery-edit-cell）+
   格内工具胶囊（⠿ grip 拖拽 / ✎ 说明 / ‹ › ×）+ 逐图说明浮层输入条 + 控制条。
   格内图片本体不设 draggable（不劫持选字与图片拖拽），唯一拖拽源 = 格内 grip（.site-gallery-cell-grip），
   与块级 grip（.site-editor-grip）选择器互不识别，两层拖拽互不干扰。 */
.site-gallery-editor {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.site-gallery-edit-grid {
    --site-gallery-gap: .4rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.site-gallery-edit-cell {
    position: relative;
}

.site-gallery-edit-cell img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.site-gallery-cell-tools {
    position: absolute;
    right: .25rem;
    top: .25rem;
    display: flex;
    gap: .1rem;
    padding: .1rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, .55);
}

.site-gallery-cell-tools .site-editor-tool {
    color: #fff;
}

.site-gallery-cell-tools .site-editor-tool:hover {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

.site-gallery-cell-tools .site-editor-tool.danger:hover {
    background: var(--site-danger-text);
    color: #fff;
}

.site-gallery-cell-tools .site-editor-tool:disabled {
    color: rgba(255, 255, 255, .5);
}

.site-gallery-cell-grip {
    cursor: grab;
}

.site-gallery-cell-tools .site-editor-tool.active {
    background: var(--site-primary-solid);
    color: #fff;
}

/* 拖拽进行中的源格与插入指示线（线画在目标格受影响的一侧，类由配套 JS 切换）。 */
.site-gallery-edit-cell.is-dragging {
    opacity: .45;
}

.site-gallery-edit-cell.drop-left::before,
.site-gallery-edit-cell.drop-right::before,
.site-gallery-edit-cell.drop-above::before,
.site-gallery-edit-cell.drop-below::before {
    content: "";
    position: absolute;
    z-index: 2;
    background: var(--site-primary-solid);
    pointer-events: none;
}

.site-gallery-edit-cell.drop-left::before { left: 0; top: 0; bottom: 0; width: 3px; }
.site-gallery-edit-cell.drop-right::before { right: 0; top: 0; bottom: 0; width: 3px; }
.site-gallery-edit-cell.drop-above::before { top: 0; left: 0; right: 0; height: 3px; }
.site-gallery-edit-cell.drop-below::before { bottom: 0; left: 0; right: 0; height: 3px; }

/* 逐图说明（AltText）浮层输入条（textarea）：✎ 展开或聚焦时常显，居中胶囊盖在格心、
   不参与布局（不贴格底——末行不再被悬浮图库底部的控制条遮挡）。宽度基础值两侧各留
   .75rem 空隙；支持 field-sizing 时先随内容增宽至上限后自动换行增高，窄格钳到格宽。 */
.site-gallery-cell-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(calc(100% - 1.5rem), 240px);
    max-height: 12rem;
    display: none;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: var(--site-radius-sm);
    padding: .3rem .5rem;
    background: rgba(0, 0, 0, .62);
    color: #fff;
    font-size: .75rem;
    resize: none;
}

@supports (field-sizing: content) {
    .site-gallery-cell-caption {
        width: auto;
        min-width: min(11rem, calc(100% - 1.5rem));
        max-width: min(calc(100% - 1.5rem), 240px);
        field-sizing: content;
    }
}

.site-gallery-cell-caption::placeholder {
    color: rgba(255, 255, 255, .55);
}

.site-gallery-cell-caption:focus {
    outline: none;
    border-color: var(--site-primary-solid);
}

.site-gallery-edit-cell.show-caption .site-gallery-cell-caption,
.site-gallery-cell-caption:focus {
    display: block;
}

/* 桌面（支持悬停）工具浮层 hover/focus 显隐，说明展开时常显；触屏无 hover 保持常驻。 */
@media (hover: hover) {
    .site-gallery-cell-tools {
        opacity: 0;
        visibility: hidden;
        transition: opacity .12s ease, visibility .12s ease;
    }

    .site-gallery-edit-cell:hover .site-gallery-cell-tools,
    .site-gallery-edit-cell:focus-within .site-gallery-cell-tools,
    .site-gallery-edit-cell.show-caption .site-gallery-cell-tools {
        opacity: 1;
        visibility: visible;
    }
}

.site-gallery-warn {
    font-size: .8rem;
    color: var(--site-danger-text);
}

/* 控制条（每行张数 / 张数统计 / 添加图片）：主色浅底 + 描边与画布区分。桌面悬浮于图库
   底部（绝对定位轻压末行图片），随悬停整个图库编辑器或键盘聚焦控制条时显隐（同格内
   工具胶囊的 hover:hover 策略）；触屏无 hover 保持内联常驻不遮图；空图库（仅空态 tile）
   不悬浮。显隐用 visibility/opacity，零布局位移。 */
.site-gallery-edit-bar {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .4rem .65rem;
    border: 1px solid var(--site-primary-border);
    border-radius: var(--site-radius);
    background: var(--site-primary-softer);
    font-size: .8rem;
    color: var(--site-text-secondary);
}

@media (hover: hover) {
    .site-gallery-edit-bar {
        position: absolute;
        left: .5rem;
        right: .5rem;
        bottom: .5rem;
        z-index: 3;
        box-shadow: 0 6px 24px rgba(0, 0, 0, .22);
        opacity: 0;
        visibility: hidden;
        transition: opacity .12s ease, visibility .12s ease;
    }

    /* 空图库：控制条不悬浮、保持可见（唯一添加入口是空态 tile，控制条不遮挡它）。 */
    .site-gallery-editor:has(.site-gallery-empty) .site-gallery-edit-bar {
        position: static;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
    }

    .site-gallery-editor:hover .site-gallery-edit-bar,
    .site-gallery-edit-bar:focus-within {
        opacity: 1;
        visibility: visible;
    }
}

.site-gallery-columns {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
}

.site-gallery-columns .form-select {
    width: auto;
}

.site-gallery-count {
    color: var(--site-text-muted);
}

.site-gallery-add {
    margin-left: auto;
    padding: .25rem .7rem;
    border: 1px solid var(--site-primary-border);
    border-radius: var(--site-radius-sm);
    background: var(--site-primary-soft);
    color: var(--site-primary);
    font-size: .8rem;
    cursor: pointer;
}

.site-gallery-add:hover:not(:disabled) {
    background: var(--site-primary-softer);
}

.site-gallery-add:disabled {
    opacity: .5;
    cursor: default;
}

/* ---------- 14b. 门控块编辑器（付费/回复可见 · 付费/回复下载） ----------
   四个门控块编辑器共用 .site-editor-gated* 分组壳；下载条目用 .site-editor-download-*；
   会员策略用 .site-editor-member-*。全部随画布 token 走，块内不出现原生控件裸露。 */

.site-editor-gated-fields {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
}

.site-editor-gated-field {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 8rem;
    font-size: .75rem;
    color: var(--site-text-secondary);
}

.site-editor-gated-field-grow {
    flex: 1 1 16rem;
}

.site-editor-gated-field-hint {
    color: var(--site-text-muted);
    font-size: .6875rem;
}

.site-editor-gated-error {
    color: var(--site-danger-text);
    font-size: .8125rem;
}

/* 合并后的门控块编辑器：正文段与资源段各自的小节标题（付费/回复共用） */
.site-editor-gated-section {
    padding-top: .25rem;
    border-top: 1px dashed var(--site-border);
    color: var(--site-text-secondary);
    font-size: .8125rem;
    font-weight: 600;
}

/* ---- 下载条目编辑 ---- */

/* 上传按钮 = label.btn 包 InputFile：原生 file 输入视觉隐藏但仍可被 label 触发。 */

.site-editor-download-ready,
.site-editor-download-broken {
    flex: 1 1 12rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--site-text-secondary);
    font-size: .8125rem;
}

.site-editor-download-broken {
    color: var(--site-warning-text);
}

.site-editor-download-warn {
    color: var(--site-warning-text);
    font-size: .8125rem;
}

.site-editor-download-add {
    align-self: flex-start;
    padding: .25rem .625rem;
    border: 1px dashed var(--site-border-strong);
    border-radius: var(--site-radius-sm);
    background: transparent;
    color: var(--site-primary);
    font-size: .8125rem;
    cursor: pointer;
}

.site-editor-download-add:hover:not(:disabled) {
    border-color: var(--site-primary-border);
    background: var(--site-primary-softer);
}

.site-editor-download-add:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ---- 门控块画布预览卡（GatedBlockPreviewCard） ----
   复用读侧 .site-download-card 皮肤（实心红/虚线空心），叠加编辑态交互。 */
.site-editor .site-download-card.is-editor-gated {
    cursor: pointer;
    transition: box-shadow .12s ease, border-color .12s ease;
}

.site-editor .site-download-card.is-editor-gated:hover,
.site-editor .site-download-card.is-editor-gated:focus-visible {
    border-color: var(--site-primary-border);
    box-shadow: 0 0 0 2px var(--site-primary-softer), var(--site-shadow);
    outline: none;
}

/* ---- 门控块设置弹窗（GatedBlockSettingsDialog，z-index 1050 层） ---- */
.site-gated-settings-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--site-backdrop);
}

.site-gated-settings-panel {
    width: 100%;
    max-width: 720px;
    max-height: min(88vh, 780px);
    display: flex;
    flex-direction: column;
    padding: 1rem 1.1rem;
    border-radius: var(--site-radius-lg);
    background: var(--site-surface);
    box-shadow: var(--site-shadow-lg);
}

.site-gated-settings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding-bottom: .625rem;
    border-bottom: 1px solid var(--site-border);
    font-weight: 600;
}

.site-gated-settings-body {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: .75rem 0;
    overflow: auto;
}

.site-gated-settings-foot {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding-top: .625rem;
    border-top: 1px solid var(--site-border);
}

/* 预览图行：缩略图 + 更换/移除。 */
.site-gated-preview {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

.site-gated-preview-thumb {
    width: 96px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--site-radius-sm);
    border: 1px solid var(--site-border);
}

/* ---- 门控条目二级弹窗（GatedItemEditDialog，z-index 1060 层） ----
   点遮罩不关闭（防丢稿），只走「取消/完成」。 */
.site-gated-item-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--site-backdrop);
}

.site-gated-item-panel {
    width: 100%;
    max-width: 560px;
    max-height: min(86vh, 720px);
    display: flex;
    flex-direction: column;
    gap: .625rem;
    padding: 1rem 1.1rem;
    border-radius: var(--site-radius-lg);
    background: var(--site-surface);
    box-shadow: var(--site-shadow-lg);
    overflow: auto;
}

.site-gated-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    font-weight: 600;
}

.site-gated-item-file {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

.site-gated-item-foot {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding-top: .5rem;
    border-top: 1px dashed var(--site-border);
}

/* ---- 门控条目类型选择四宫格（GatedItemTypeDialog，z-index 1060 层） ---- */
.site-gated-type-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--site-backdrop);
}

.site-gated-type-panel {
    width: 100%;
    max-width: 480px;
    padding: 1rem 1.1rem 1.1rem;
    border-radius: var(--site-radius-lg);
    background: var(--site-surface);
    box-shadow: var(--site-shadow-lg);
}

.site-gated-type-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .75rem;
    font-weight: 600;
}

.site-gated-type-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .625rem;
}

.site-gated-type-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .125rem;
    padding: .625rem .75rem;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    background: var(--site-surface);
    text-align: left;
    cursor: pointer;
}

.site-gated-type-option:hover {
    border-color: var(--site-primary-border);
    background: var(--site-primary-softer);
}

.site-gated-type-icon {
    font-size: 1.25rem;
    line-height: 1;
}

.site-gated-type-name {
    font-weight: 600;
    color: var(--site-text);
}

.site-gated-type-desc {
    color: var(--site-text-muted);
    font-size: .75rem;
}

.site-gated-type-hint {
    margin: .75rem 0 0;
    color: var(--site-text-muted);
    font-size: .75rem;
}

/* ---- 门控条目货架行（GatedItemsEditor） ---- */
.site-gated-items {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.site-gated-items-empty {
    padding: .625rem .75rem;
    border: 1px dashed var(--site-border);
    border-radius: var(--site-radius);
    color: var(--site-text-muted);
    font-size: .8125rem;
}

.site-gated-item-row {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem .625rem;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    background: var(--site-surface-2);
}

.site-gated-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: var(--site-radius-sm);
    background: var(--site-surface);
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}

.site-gated-item-main {
    min-width: 0;
    flex: 1 1 auto;
}

.site-gated-item-name {
    font-weight: 500;
    color: var(--site-text);
    font-size: .875rem;
    overflow-wrap: anywhere;
}

.site-gated-item-summary {
    margin-top: .1rem;
    color: var(--site-text-muted);
    font-size: .75rem;
    overflow-wrap: anywhere;
}

.site-gated-item-tools {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex-shrink: 0;
}

/* ---- 会员策略（MemberPolicyEditor） ---- */

.site-editor-member-policy {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding-top: .5rem;
    border-top: 1px dashed var(--site-border);
}

.site-editor-member-row {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
}

.site-editor-member-label {
    flex: 0 0 4.5rem;
    padding-top: .3rem;
    color: var(--site-text-secondary);
    font-size: .75rem;
}

.site-editor-member-select {
    max-width: 18rem;
}

.site-editor-member-policies {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    flex: 1 1 auto;
    min-width: 0;
}

/* 等级价格摘要列表：等级名 + 计价结果 + 编辑/删除（替代旧的内联多控件行）。 */
.site-editor-member-empty {
    margin: 0;
    color: var(--site-text-muted);
    font-size: .75rem;
}

.site-member-row {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .3rem .5rem;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-sm);
    background: var(--site-surface-2);
}

.site-member-row-tier {
    min-width: 0;
    flex: 1 1 auto;
    color: var(--site-text);
    font-size: .8125rem;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.site-member-row-value {
    flex-shrink: 0;
    padding: .05rem .45rem;
    border-radius: 50rem;
    background: var(--site-surface);
    border: 1px solid var(--site-border);
    color: var(--site-text-secondary);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
}

.site-member-row-value.is-free {
    color: var(--site-success-text);
    background: var(--site-success-soft);
    border-color: var(--site-success-border);
}

.site-member-row-tools {
    display: flex;
    align-items: center;
    gap: .15rem;
    flex-shrink: 0;
}

.site-editor-member-unit {
    color: var(--site-text-secondary);
    font-size: .8125rem;
}

.site-editor-member-add {
    align-self: flex-start;
    padding: .25rem .625rem;
    border: 1px dashed var(--site-border-strong);
    border-radius: var(--site-radius-sm);
    background: transparent;
    color: var(--site-primary);
    font-size: .75rem;
    cursor: pointer;
}

.site-editor-member-add:hover:not(:disabled) {
    border-color: var(--site-primary-border);
    background: var(--site-primary-softer);
}

.site-editor-member-add:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.site-editor-member-hint {
    margin: 0;
    color: var(--site-text-muted);
    font-size: .6875rem;
}

/* ---- 等级价格编辑弹窗（TierPolicyDialog，复用 .site-gated-type-* 外壳） ---- */
.site-tier-dialog-panel {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.site-tier-discount-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .375rem;
}

.site-tier-discount-input {
    flex: 0 0 5rem;
}

.site-tier-preset {
    padding: .15rem .5rem;
    border: 1px solid var(--site-border);
    border-radius: 50rem;
    background: var(--site-surface);
    color: var(--site-text-secondary);
    font-size: .75rem;
    cursor: pointer;
}

.site-tier-preset:hover {
    border-color: var(--site-primary-border);
    color: var(--site-primary);
}

.site-tier-preset.is-active {
    border-color: var(--site-primary-border);
    background: var(--site-primary-softer);
    color: var(--site-primary);
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .site-editor-member-row {
        flex-direction: column;
        gap: .25rem;
    }

    .site-editor-member-label {
        flex: none;
        padding-top: 0;
    }

    .site-editor-gated-field {
        min-width: 0;
        width: 100%;
    }
}

/* ---------- 15. 用户个人主页（/u/{PublicId}，SSR） ---------- */

.site-profile-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
}

.site-profile-identity {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.site-profile-identity .site-avatar-lg {
    width: 64px;
    height: 64px;
    font-size: 1.5rem;
}

.site-profile-text {
    min-width: 0;
}

.site-profile-name {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 .25rem;
    color: var(--site-text-strong, var(--site-text));
}

.site-profile-bio {
    margin: 0 0 .25rem;
    color: var(--site-text);
    font-size: .9375rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.site-profile-meta {
    margin: 0;
    color: var(--site-text-muted);
    font-size: .8125rem;
}

.site-profile-tabs {
    display: flex;
    gap: .25rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--site-border);
}

.site-profile-tab {
    display: inline-block;
    padding: .5rem .875rem;
    margin-bottom: -1px;
    color: var(--site-text-muted);
    text-decoration: none;
    font-size: .9375rem;
    border-bottom: 2px solid transparent;
}

.site-profile-tab:hover {
    color: var(--site-primary);
}

.site-profile-tab.active {
    color: var(--site-primary);
    font-weight: 600;
    border-bottom-color: var(--site-primary);
}

.site-profile-reply-row {
    display: block;
    padding: .75rem 1rem;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--site-border);
}

.site-profile-reply-row:last-child {
    border-bottom: none;
}

.site-profile-reply-row:hover .site-topic-title span:last-child {
    color: var(--site-primary);
}

.site-profile-reply-tag {
    display: inline-block;
    margin-left: .375rem;
    padding: 0 .375rem;
    border: 1px solid var(--site-border);
    border-radius: 999px;
    color: var(--site-text-muted);
    font-size: .6875rem;
    font-weight: 400;
    vertical-align: 1px;
}

/* 帖子/列表里的作者链接（头像与名字） */
a.site-author-link {
    text-decoration: none;
    flex-shrink: 0;
}

.site-post-author a,
.site-subpost-author a {
    color: inherit;
    text-decoration: none;
}

.site-post-author a:hover,
.site-subpost-author a:hover {
    color: var(--site-primary);
}

/* ===================== 16. 举报（site-report-*） ===================== */
/* 举报弹窗：整页覆盖的模态（按钮在卡片头部，弹窗脱离卡片流，见 ReportButton.razor）。
   z-index 与其它自制模态同档（1050）。 */
.site-report-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--site-backdrop);
}

.site-report-panel {
    width: min(420px, 100%);
    padding: 1.1rem 1.25rem 1.25rem;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-lg);
    background: var(--site-surface);
    box-shadow: var(--site-shadow-md);
}

.site-report-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
    font-weight: 600;
}

.site-report-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .875rem;
}

.site-report-done {
    display: inline-block;
    padding: .25rem 0;
}

/* ===================== 17. 私信（site-msg-*） ===================== */
.site-messages {
    display: grid;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
    min-height: 480px;
}

.site-msg-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    background: var(--site-surface);
    overflow: hidden;
}

.site-msg-list-head {
    padding: .625rem .875rem;
    font-weight: 600;
    border-bottom: 1px solid var(--site-border);
}

.site-msg-empty {
    padding: 1.5rem 1rem;
}

.site-msg-item {
    display: flex;
    align-items: center;
    gap: .625rem;
    width: 100%;
    padding: .625rem .875rem;
    border: none;
    border-bottom: 1px solid var(--site-border);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.site-msg-item:hover,
.site-msg-item.active {
    background: var(--site-primary-soft);
}

.site-msg-item-body {
    flex: 1;
    min-width: 0;
}

.site-msg-item-top {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
}

.site-msg-item-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-msg-item-time {
    color: var(--site-text-muted);
    font-size: .75rem;
    flex-shrink: 0;
}

.site-msg-item-preview {
    display: block;
    color: var(--site-text-muted);
    font-size: .8125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-msg-unread {
    flex-shrink: 0;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 .375rem;
    border-radius: 999px;
    background: var(--site-primary-solid);
    color: var(--site-on-primary);
    font-size: .6875rem;
    line-height: 1.25rem;
    text-align: center;
}

.site-msg-thread {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    background: var(--site-surface);
    overflow: hidden;
}

.site-msg-thread-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .625rem .875rem;
    border-bottom: 1px solid var(--site-border);
}

.site-msg-thread-user {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: inherit;
    font-weight: 600;
    text-decoration: none;
}

.site-msg-thread-user:hover {
    color: var(--site-primary);
}

.site-msg-thread-body {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.site-msg-thread-empty {
    margin: auto;
}

.site-msg-row {
    display: flex;
}

.site-msg-row.mine {
    justify-content: flex-end;
}

.site-msg-bubble {
    max-width: 72%;
    padding: .5rem .75rem;
    border-radius: var(--site-radius);
    background: var(--site-surface-hover);
}

.site-msg-row.mine .site-msg-bubble {
    background: var(--site-primary-solid);
    color: var(--site-on-primary);
}

.site-msg-text {
    white-space: pre-wrap;
    word-break: break-word;
}

.site-msg-row.mine .site-msg-time {
    color: var(--site-on-primary-muted);
}

.site-msg-time {
    margin-top: .25rem;
    color: var(--site-text-muted);
    font-size: .6875rem;
    text-align: right;
}

.site-msg-compose {
    padding: .75rem;
    border-top: 1px solid var(--site-border);
}

.site-msg-compose-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: .5rem;
}

@media (max-width: 767.98px) {
    .site-messages {
        grid-template-columns: 1fr;
    }

    .site-msg-thread {
        min-height: 420px;
    }
}

/* ===================== 18. 通知中心（site-notify-*） ===================== */
.site-notify {
    overflow: hidden;
}

.site-notify-item {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    padding: .875rem 1rem;
    border-bottom: 1px solid var(--site-border);
}

.site-notify-item:last-child {
    border-bottom: none;
}

.site-notify-item.unread {
    background: var(--site-primary-soft);
}

.site-notify-body {
    min-width: 0;
    flex: 1;
}

.site-notify-text {
    color: var(--site-text);
    font-size: .9375rem;
    line-height: 1.6;
}

.site-notify-actor,
.site-notify-link {
    color: var(--site-primary);
    font-weight: 500;
    text-decoration: none;
}

.site-notify-actor:hover,
.site-notify-link:hover {
    text-decoration: underline;
}

.site-notify-excerpt {
    margin-top: .25rem;
    color: var(--site-text-secondary);
    font-size: .8125rem;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-notify-note {
    margin-top: .25rem;
    color: var(--site-text-secondary);
    font-size: .8125rem;
}

.site-notify-time {
    margin-top: .25rem;
    color: var(--site-text-muted);
    font-size: .6875rem;
}

.site-notify-dot {
    flex-shrink: 0;
    width: .5rem;
    height: .5rem;
    margin-top: .375rem;
    border-radius: 50%;
    background: var(--site-primary);
}

.site-notify-system {
    flex-shrink: 0;
    padding: .0625rem .375rem;
    border: 1px solid var(--site-border);
    border-radius: 999px;
    color: var(--site-text-muted);
    font-size: .6875rem;
    line-height: 1.5;
}

/* 单条「标为已读」出口：举报处理结果等无跳转目标的通知类型靠它清红（红点 + 未读角标）。 */
.site-notify-read {
    flex-shrink: 0;
    margin-top: .0625rem;
    padding: .125rem .5rem;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-sm);
    background: none;
    color: var(--site-text-secondary);
    font-size: .75rem;
    line-height: 1.5;
    white-space: nowrap;
    cursor: pointer;
}

.site-notify-read:hover:not(:disabled),
.site-notify-read:focus-visible {
    border-color: var(--site-primary);
    color: var(--site-primary);
}

.site-notify-read:disabled {
    opacity: .55;
    cursor: default;
}

/* ===================== 19. 门控内容块（site-gated-*） ===================== */

/* 门控块解锁后的动作与资源展示：下载/条目货架统一见下方「下载卡片（site-download-*）」节。 */

/* 解锁按钮孤岛的余额提示与按钮排布。 */
.site-gated-buy {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
}

/* ===================== 20. 下载卡片（site-download-*） =====================
   门控块统一卡片：付费块 = 实心偏红折叠卡（is-paid-solid，原生 details/summary，默认收起）；
   回复可见块 = 虚线空心卡（is-reply-dashed，同款卡头但常显不可折叠）。
   卡头 = 多行信息区（标题行 + 说明 + 价格行全档会员优惠 + 会员专享行 + meta 行 + 动作行），
   说明常显；**只有条目货架（site-download-body）被折叠**。
   锁定态与解锁态是同一张卡，只换动作内容（解锁态含归属提示）；
   编辑器内的门控预览卡（GatedBlockPreviewCard）复用同一套类，所见即所得。 */

.site-download-card {
    margin: .75rem 0;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-lg);
    background: var(--site-surface);
    box-shadow: var(--site-shadow);
    overflow: hidden;
}

/* 付费块：暖红实底填充 + 红调边框；解锁态略降饱和。 */
.site-download-card.is-paid-solid {
    border-color: var(--site-paid-card-border);
    background: var(--site-paid-card-bg);
}

.site-download-card.is-paid-solid.is-unlocked {
    background: var(--site-paid-card-bg-unlocked);
}

/* 回复可见块：透明底 + 中性虚线边框，无阴影，像内容的一部分。 */
.site-download-card.is-reply-dashed {
    border: 1px dashed var(--site-border-color, var(--site-border));
    background: transparent;
    box-shadow: none;
}

/* 卡头：左右结构（付费块为 summary，点整行折叠/展开；回复块常显 div）。 */
.site-download-head {
    display: block;
    padding: .625rem .75rem;
}

/* 左右结构：左=预览图/图标（固定），右=信息栈（自适应）。 */
.site-download-media {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    min-width: 0;
}

.site-download-main {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    flex: 1 1 auto;
    min-width: 0;
}

summary.site-download-head {
    cursor: pointer;
    list-style: none;
}

summary.site-download-head::-webkit-details-marker {
    display: none;
}

.site-download-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .25rem .5rem;
    min-width: 0;
}

/* 页脚行：meta（左）+ 动作/展开（右）；展开按钮固定在右下角。 */
.site-download-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .375rem .625rem;
    margin-top: .125rem;
}

/* 文字展开按钮：右下角；details[open] 时由 CSS 切换「展开详情/关闭详情」。 */
.site-download-toggle {
    padding: .15rem .6rem;
    border: 1px solid var(--site-border);
    border-radius: 50rem;
    background: var(--site-surface-2);
    color: var(--site-text-secondary);
    font-size: .75rem;
    line-height: 1.4;
    white-space: nowrap;
    flex-shrink: 0;
}

.site-download-toggle .when-open {
    display: none;
}

details[open] > summary.site-download-head .site-download-toggle .when-open {
    display: inline;
}

details[open] > summary.site-download-head .site-download-toggle .when-closed {
    display: none;
}

/* 展开区：只有条目货架，与卡头用分隔线区隔。 */
.site-download-body {
    border-top: 1px solid var(--site-border);
    padding: .25rem 0 .375rem;
}

/* 预览图：付费块左侧（左右结构），尺寸放大；无图时回退 head-icon。
   点击开灯箱：链接包住图片，固定尺寸 + cursor:zoom-in（缩放样式见「帖子内容图灯箱」节）。 */
.site-download-thumb-link {
    flex-shrink: 0;
    border-radius: var(--site-radius);
    overflow: hidden;
}

.site-download-thumb {
    display: block;
    width: 7.5rem;
    height: 7.5rem;
    object-fit: cover;
    border-radius: var(--site-radius);
    border: 1px solid var(--site-border);
    flex-shrink: 0;
}

.site-download-head-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--site-radius);
    background: var(--site-primary-soft);
    font-size: 1.35rem;
    line-height: 1;
    flex-shrink: 0;
}

.site-download-card.is-paid-solid .site-download-head-icon {
    background: var(--site-danger-soft);
}

.site-download-card.is-locked .site-download-head-icon {
    background: var(--site-warning-soft);
}

.site-download-title {
    font-weight: 600;
    font-size: .95rem;
    color: var(--site-text);
    overflow-wrap: anywhere;
}

/* 价格行：红色强调实付价，划线原价弱化。 */
/* 价格行：基础价 + 全档会员优惠（「/」分隔），激励开通会员；金额与扣费同源。 */
.site-download-pricing {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
}

.site-download-price-item {
    color: var(--site-text-secondary);
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
}

.site-download-price-item.is-base {
    color: var(--site-text);
    font-weight: 600;
}

.site-download-price-sep {
    color: var(--site-text-muted);
}

/* 卡头 meta 行（共 N 项 / 站内合计 / 购买人数）。 */
.site-download-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .625rem;
}

/* 卡头/展开区的弱化小项（共 N 项内容、站内文件合计等）。 */
.site-download-meta-item {
    color: var(--site-text-muted);
    font-size: .8125rem;
}

/* 会员专享行（卡头内）与购买人数（meta 行，受块级 ShowUnlockCount 开关控制）。 */
.site-download-member {
    color: var(--site-warning-text);
    font-size: .8125rem;
}

.site-download-buyers {
    color: var(--site-text-secondary);
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
}

.site-download-flag.is-paid {
    color: var(--site-paid-text);
    background: var(--site-paid-soft);
    border-color: var(--site-paid-border);
}

.site-download-flag.is-reply {
    color: var(--site-info-text);
    background: var(--site-info-soft);
    border-color: var(--site-info-border);
}

.site-download-flag.is-free {
    color: var(--site-success-text);
    background: var(--site-success-soft);
    border-color: var(--site-success-border);
}

/* 价格 0 且有会员门槛 = 会员专属：会员专享金色（与「积分解锁」红 / 「免费获取」绿区分）。 */
.site-download-flag.is-member {
    color: var(--site-gold-text);
    background: var(--site-gold-soft);
    border-color: var(--site-gold-border);
}

/* 门控卡紧凑化：卡内标志 chip（积分解锁/回帖可见/会员价）统一小一号；标题折行时不许 chip 内断字。 */
.site-chip.site-download-flag,
.site-chip.site-gated-flag-member {
    padding: .1rem .5rem;
    font-size: .75rem;
    white-space: nowrap;
}

.site-download-desc {
    margin: 0;
    padding: 0;
    color: var(--site-text-secondary);
    font-size: .8125rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* 说明限行：默认最多两行，保持卡片紧凑（超出省略）。 */
.site-download-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.site-download-empty {
    margin: .25rem .75rem .5rem;
    color: var(--site-text-muted);
    font-size: .875rem;
}

.site-download-list {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    margin: .25rem 0 0;
    padding: .375rem .75rem .625rem;
    list-style: none;
}

.site-download-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .375rem .5rem;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
    background: var(--site-surface);
}

.site-download-card.is-reply-dashed .site-download-row {
    background: var(--site-surface);
}

.site-download-row.is-locked {
    background: transparent;
    border-style: dashed;
}

.site-download-kind {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--site-radius-sm);
    background: var(--site-surface-2);
    font-size: .875rem;
    line-height: 1;
    flex-shrink: 0;
}

.site-download-info {
    min-width: 0;
    flex: 1 1 auto;
}

.site-download-name {
    font-weight: 500;
    color: var(--site-text);
    overflow-wrap: anywhere;
}

.site-download-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: .1rem;
    color: var(--site-text-muted);
    font-size: .75rem;
}

.site-download-type {
    color: var(--site-text-secondary);
}

/* 提取码 chip：user-select: all —— 单击全选，天然免 JS 复制。 */
.site-download-code {
    padding: .05rem .45rem;
    border-radius: 6px;
    background: var(--site-surface-2);
    border: 1px solid var(--site-border);
    font-family: var(--site-font-mono);
    color: var(--site-text-secondary);
    user-select: all;
    cursor: pointer;
}

.site-download-size {
    font-variant-numeric: tabular-nums;
}

.site-download-action {
    flex-shrink: 0;
}

.site-download-locked {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--site-text-muted);
}

/* 卡头动作行：购买/去回帖/登录按钮与解锁归属提示（位于页脚行右侧）。 */
.site-download-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    margin-left: auto;
}

/* 展开按钮固定在右下角：动作行内最后一个，靠 margin-left 推到最右。 */
.site-download-actions .site-download-toggle {
    margin-left: .25rem;
}

/* 行内动作提示（回帖后免费查看等弱化文案）。 */
.site-download-hint {
    color: var(--site-text-secondary);
    font-size: .8125rem;
}

/* 解锁归属提示（作者/管理员/会员免费）：柔和绿色正向强调。 */
.site-download-owned {
    color: var(--site-success-text);
    font-size: .8125rem;
}

/* 编辑器预览卡的编辑提示行（点它冒泡到卡片开设置弹窗）。 */
.site-editor .site-download-edit-hint {
    padding: .375rem .75rem 0;
    cursor: pointer;
}

/* 门控条目「查看」弹窗 + 账号设置弹窗（原生 dialog，分别由 site-gated-view.js / site-settings.js 开关）。 */
.site-gated-dialog,
.site-settings-dialog {
    width: min(680px, calc(100vw - 2rem));
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-lg);
    box-shadow: var(--site-shadow-lg);
    padding: 0;
}

/* 账号设置弹窗只装一个短表单，收窄到表单尺度。 */
.site-settings-dialog {
    width: min(30rem, calc(100vw - 2rem));
}

.site-gated-dialog::backdrop,
.site-settings-dialog::backdrop {
    background: var(--site-backdrop);
}

.site-gated-dialog-head,
.site-settings-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--site-border);
}

.site-gated-dialog-title,
.site-settings-dialog-title {
    font-weight: 600;
    color: var(--site-text);
    overflow-wrap: anywhere;
}

.site-gated-dialog-close,
.site-settings-dialog-close {
    border: none;
    background: transparent;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--site-text-muted);
    cursor: pointer;
    padding: .1rem .45rem;
    border-radius: 6px;
}

.site-gated-dialog-close:hover,
.site-settings-dialog-close:hover {
    background: var(--site-surface-2);
    color: var(--site-text);
}

.site-gated-dialog-body,
.site-settings-dialog-body {
    padding: 1rem;
    max-height: min(72vh, 640px);
    overflow: auto;
}

@media (max-width: 575.98px) {
    .site-download-head {
        padding: .5rem;
    }

    /* 窄屏：预览图缩小，避免挤压信息栏。 */
    .site-download-media {
        gap: .5rem;
    }

    .site-download-thumb {
        width: 4.5rem;
        height: 4.5rem;
    }

    .site-download-row {
        flex-wrap: wrap;
    }

    .site-download-action {
        width: 100%;
    }

    .site-download-action .btn {
        width: 100%;
    }
}

/* ===================== 21. 错误卡片（site-error-card） =====================
   两处使用：
   ① 交互子树兜底卡（UiErrorBoundary，只给通用文案 + 重试，绝不展示异常原文）；
   ② 官方错误页 Error.razor（UseExceptionHandler("/Error")：500 + 请求 ID，SSR 未处理异常的出口）。 */

.site-error-card {
    max-width: var(--site-content-width);
    margin: 2rem auto;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--site-warning-border);
    border-radius: var(--site-radius-lg);
    background: var(--site-warning-soft);
    text-align: center;
}

.site-error-head {
    font-weight: 600;
    color: var(--site-warning-text);
}

.site-error-desc {
    margin: .5rem auto 0;
    max-width: 42em;
    color: var(--site-text-secondary);
    font-size: .875rem;
    overflow-wrap: anywhere;
}

.site-error-actions {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: 1rem;
}

/* ===================== 22. 会员页（site-membership-*） ===================== */

.site-membership-status {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    padding: 1rem 1.25rem;
}

.site-membership-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

.site-membership-tier {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1.25rem;
}

.site-membership-tier-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--site-primary);
}

.site-membership-tier-price {
    color: var(--site-text-muted);
    font-size: .875rem;
}

.site-membership-tier-price strong {
    font-size: 1.375rem;
    color: var(--bs-body-color);
}

.site-membership-tier-perks {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--site-text-muted);
    font-size: .8125rem;
}

.site-membership-tier-perks li::before {
    content: "✓ ";
    color: var(--site-primary);
}

.site-membership-buy {
    margin-top: auto;
}

/* 会员卡内的充值周期选择：同一张卡片里平铺多个周期，点选即切换价格与赠送。 */
.site-membership-periods {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
}

.site-membership-period {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .125rem;
    padding: .375rem .5rem;
    border: 1px solid var(--site-border, var(--bs-border-color));
    border-radius: var(--bs-border-radius);
    background: transparent;
    color: var(--bs-body-color);
    font-size: .8125rem;
    line-height: 1.2;
    cursor: pointer;
}

.site-membership-period:hover:not(:disabled) {
    border-color: var(--site-primary);
}

.site-membership-period.is-active {
    border-color: var(--site-primary);
    background: color-mix(in srgb, var(--site-primary) 12%, transparent);
}

.site-membership-period:disabled {
    cursor: not-allowed;
    opacity: .6;
}

.site-membership-period-name {
    white-space: nowrap;
}

.site-membership-period-price {
    color: var(--site-text-muted);
    font-size: .75rem;
}

.site-membership-period.is-active .site-membership-period-price {
    color: var(--site-primary);
    font-weight: 600;
}

/* 未登录时只读的周期价目表。 */
.site-membership-tier-periods {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .875rem;
}

.site-membership-tier-periods li {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
}

.site-membership-buy-total {
    color: var(--site-text-muted);
    font-size: .875rem;
}

.site-membership-promo {
    padding: .75rem 1.25rem;
    border: 1px solid var(--site-primary);
    border-radius: var(--bs-border-radius);
    background: color-mix(in srgb, var(--site-primary) 8%, transparent);
    font-size: .9375rem;
}

/* ===================== 22a. 支付弹窗（site-pay-modal-*，Ui 共享 PayQrModal） ===================== */

.site-pay-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, .55);
}

.site-pay-modal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .625rem;
    width: min(320px, 92vw);
    padding: 1.25rem;
    border-radius: var(--bs-border-radius-lg);
    background: var(--bs-body-bg);
    box-shadow: 0 .5rem 2rem rgba(0, 0, 0, .3);
    text-align: center;
}

.site-pay-modal-title {
    font-weight: 700;
}

.site-pay-modal-amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--site-primary);
}

.site-pay-modal-qr {
    width: 200px;
    height: 200px;
}

/* ===================== 22b. 钱包页（site-wallet-*） ===================== */

.site-wallet-summary {
    padding: 1rem 1.25rem;
}

.site-wallet-amount {
    font-size: 1.5rem;
    font-weight: 700;
}

.site-wallet-tiers {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* 钱包页主卡片（充值/兑换/明细）：.site-card 只给底色/边框/圆角/阴影，内边距由本类补。 */
.site-wallet-card {
    padding: 1.25rem;
}

/* 钱包明细表：金额列不折行；备注列与右对齐的余额列之间补间距——table-sm 每侧仅 4px 内边距，
   右对齐的余额内容会与左对齐的备注内容视觉粘连（表头成「余额 备注」）。 */
.site-wallet-table th:nth-child(3),
.site-wallet-table td:nth-child(3),
.site-wallet-table th:nth-child(4),
.site-wallet-table td:nth-child(4) {
    white-space: nowrap;
}

.site-wallet-table th:last-child,
.site-wallet-table td:last-child {
    padding-left: 1.25rem;
    max-width: 18rem;
}

/* ===================== 22c. 通用模态卡（site-dialog-*，Ui 共享 SiteDialog） ===================== */
/* 确认（金额/等级/周期/渠道）与结果提示（成功）共用外壳；键盘语义由 js/site-modal.js 承载。
   z-index 与其它自制模态同档（1050），背景用统一的遮罩 token。 */
.site-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--site-backdrop);
}

.site-dialog-panel {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: min(360px, 100%);
    padding: 1.1rem 1.25rem 1.25rem;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-lg);
    background: var(--site-surface);
    box-shadow: var(--site-shadow-md);
}

.site-dialog-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--site-success-soft);
    color: var(--site-success-text);
}

.site-dialog-title {
    font-weight: 600;
}

.site-dialog-body {
    color: var(--site-text-muted);
    font-size: .875rem;
}

.site-dialog-body p {
    margin-bottom: .25rem;
}

.site-dialog-body strong {
    color: var(--site-text);
}

.site-dialog-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: .375rem;
}

/* ===================== 23. 等级页（site-levels-*） ===================== */

.site-levels-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    padding: 1rem 1.25rem;
}

.site-levels-status-main {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.site-levels-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    padding: .125rem .5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--site-primary) 12%, transparent);
    color: var(--site-primary);
    font-weight: 700;
    font-size: .875rem;
}

.site-levels-badge-current {
    font-size: 1.125rem;
    padding: .25rem .75rem;
}

.site-levels-progress {
    flex: 1 1 240px;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.site-levels-progress-bar {
    height: .5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--site-primary) 12%, transparent);
    overflow: hidden;
}

.site-levels-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--site-primary);
    transition: width .3s ease;
}

.site-levels-section-title {
    font-size: 1.0625rem;
    font-weight: 700;
    margin-bottom: .75rem;
}

.site-levels-tasks {
    padding: 1.25rem;
}

.site-levels-task-list {
    display: flex;
    flex-direction: column;
    margin: 0 0 .75rem;
    padding: 0;
    list-style: none;
}

.site-levels-task {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .375rem .75rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.site-levels-task:last-child {
    border-bottom: 0;
}

.site-levels-task-mark {
    color: var(--site-text-muted);
}

.site-levels-task-done .site-levels-task-mark {
    color: var(--site-success-text);
    font-weight: 700;
}

.site-levels-task-done .site-levels-task-title {
    color: var(--site-text-muted);
    text-decoration: line-through;
}

.site-levels-task-title {
    font-weight: 500;
}

.site-levels-task-xp {
    color: var(--site-primary);
    font-size: .8125rem;
}

.site-levels-task-guide {
    margin-left: auto;
    font-size: .875rem;
}

.site-levels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.site-levels-tier {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.125rem;
}

.site-levels-tier-current {
    border-color: var(--site-primary);
    box-shadow: 0 0 0 1px var(--site-primary);
}

.site-levels-tier-head {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.site-levels-tier-name {
    font-weight: 700;
}

.site-levels-tier-state {
    margin-left: auto;
}

.site-levels-tier-state-current {
    color: var(--site-primary);
    font-weight: 700;
}

.site-levels-tier-perk {
    font-size: .8125rem;
}

/* 资料页昵称旁的等级徽标（Profile 页复用 site-levels-badge） */
.site-levels-badge-profile {
    vertical-align: middle;
    margin-left: .5rem;
    font-size: .75rem;
    font-weight: 600;
}

/* ===================== 24. 附件选择弹窗（site-file-picker-*） =====================
   下载块编辑器的「选择/更换文件」弹窗（对标 ImagePickerDialog）：附件库浏览 + 上传新附件。
   放全局 app.css（交互组件跨渲染模式复用，隔离样式在 SSR 孤岛不可靠）。 */

.site-file-picker-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--site-backdrop);
}

/* 叠加在门控条目编辑弹窗（1060 层）之上时提升层级。 */
.site-file-picker-backdrop.is-stacked {
    z-index: 1070;
}

.site-file-picker-panel {
    width: 100%;
    max-width: 640px;
    max-height: min(86vh, 720px);
    display: flex;
    flex-direction: column;
    padding: 1rem 1.1rem 1.1rem;
    border-radius: var(--site-radius-lg);
    background: var(--site-surface);
    box-shadow: var(--site-shadow-md);
    overflow: auto;
}

.site-file-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--site-border);
}

.site-file-picker-tabs {
    margin-bottom: .75rem;
}

.site-file-picker-list {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-file-picker-row {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.site-file-picker-pick {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem .625rem;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-sm);
    background: var(--site-surface);
    text-align: left;
    cursor: pointer;
}

.site-file-picker-pick:hover {
    border-color: var(--site-primary-border);
    background: var(--site-primary-softer);
}

.site-file-picker-kind {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: var(--site-radius-sm);
    background: var(--site-surface-2);
    font-size: .95rem;
    line-height: 1;
    flex-shrink: 0;
}

.site-file-picker-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.site-file-picker-name {
    color: var(--site-text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-file-picker-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    color: var(--site-text-muted);
    font-size: .75rem;
}

.site-file-picker-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .75rem;
}

.site-file-picker-upload {
    display: flex;
    flex-direction: column;
    padding: .875rem;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius);
}

.site-file-picker-choose {
    align-self: flex-start;
    position: relative;
    overflow: hidden;
}

/* 内部 file input 视觉隐藏但仍可 Tab 聚焦：容器补焦点圈，避免"键盘可达却看不见焦点"。 */
.site-file-picker-choose:focus-within {
    border-radius: var(--site-radius);
    box-shadow: 0 0 0 .2rem var(--site-primary-soft);
}

.site-file-picker-choose input[type=file] {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.site-file-picker-progress {
    height: .4rem;
}

/* ===================== 25. 主题标签（site-tag-*） ===================== */

/* 列表行/详情页的标签 chips 行。position:relative 使 chips 高于标题链接的 ::after 拉伸层，保持可点。 */
.site-topic-tags {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
    min-width: 0;
}

/* 单个标签 chip（全局复用：列表行、详情页、标签云、输入器）。 */
.site-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .1rem .55rem;
    border: 1px solid var(--site-border);
    border-radius: 50rem;
    background: var(--site-surface);
    color: var(--site-text-secondary);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.6;
    white-space: nowrap;
    transition: color .12s ease, background-color .12s ease, border-color .12s ease;
}

a.site-tag-chip:hover {
    color: var(--site-primary);
    border-color: var(--site-primary-border);
    background: var(--site-primary-soft);
    text-decoration: none;
}

.site-tag-chip .site-chip-count {
    color: var(--site-text-muted);
    font-weight: 400;
}

/* 板块页的活动筛选态 chip（可点清除）。 */
.site-tag-chip-active {
    color: var(--site-primary);
    border-color: var(--site-primary-border);
    background: var(--site-primary-soft);
    text-decoration: none;
}

/* /tags 索引页的标签云（大一号，带使用数）。 */
.site-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.site-tag-chip-lg {
    padding: .35rem .8rem;
    font-size: .875rem;
}

/* 发帖/编辑页的标签输入器（position:relative 是补全下拉的定位锚）。 */
.site-tag-input {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
    padding: .375rem .5rem;
    border: 1px solid var(--site-border);
    border-radius: .5rem;
    background: var(--site-surface);
}

/* 输入框自身 outline:none，焦点可见性由父容器承担：border + 柔和外圈，键盘用户可辨。 */
.site-tag-input:focus-within {
    border-color: var(--site-primary-border);
    box-shadow: 0 0 0 .2rem var(--site-primary-soft);
}

.site-tag-chip-removable {
    padding: .15rem .45rem .15rem .65rem;
}

.site-tag-remove {
    border: 0;
    padding: 0 .2rem;
    background: transparent;
    color: var(--site-text-muted);
    font-size: .9rem;
    line-height: 1;
    cursor: pointer;
}

.site-tag-remove:hover {
    color: var(--site-danger-text);
}

.site-tag-input-field {
    flex: 1 1 8rem;
    min-width: 8rem;
    border: 0;
    outline: none;
    background: transparent;
    color: inherit;
    font-size: .875rem;
    padding: .15rem 0;
}

/* 标签输入的自动补全下拉（挂在 .site-tag-input 下，绝对定位不挤占表单流）。
   横向 chip 排列 + 自动换行：默认最多 10 条，纵向列表会过高。 */
.site-tag-suggestions {
    position: absolute;
    top: calc(100% + .25rem);
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
    padding: .5rem;
    background: var(--site-surface);
    border: 1px solid var(--site-border);
    border-radius: .5rem;
    box-shadow: var(--site-shadow);
}

.site-tag-suggestion {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    border: 1px solid var(--site-border);
    padding: .15rem .55rem;
    border-radius: 50rem;
    background: var(--site-surface);
    color: var(--site-text-secondary);
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.6;
    white-space: nowrap;
    cursor: pointer;
    transition: color .12s ease, background-color .12s ease, border-color .12s ease;
}

.site-tag-suggestion:hover,
.site-tag-suggestion.active {
    background: var(--site-primary-soft);
    border-color: var(--site-primary-border);
    color: var(--site-primary);
}

/* ===================== 26. 发帖/编辑帖草稿横幅（site-draft-banner） ===================== */

/* 走站点 token（此前是裸 Bootstrap alert-info，与全站视觉不一致）；布局仍用 d-flex 工具类。 */
.site-draft-banner {
    flex-wrap: wrap;
    padding: .7rem .9rem;
    border: 1px solid var(--site-primary-border);
    border-radius: var(--site-radius);
    background: var(--site-primary-softer);
    color: var(--site-text);
    font-size: .875rem;
}

.site-draft-banner > span {
    line-height: 1.6;
}

.site-draft-banner-icon {
    flex-shrink: 0;
    color: var(--site-primary);
}

/* 站点公告横幅（B13）：顶栏正下方的品牌色通栏（span 撑满视口），内层定宽对齐内容列。
   通栏 + 定宽内层照抄 .site-header/.site-header-inner 的模式。
   注意：横幅是 .site-page（column flex）的子项，**不能**给自身挂 margin-inline: auto，
   否则自动外边距会让它按内容收缩并居中（只剩一条短条）。 */
.site-notice-bar {
    width: 100%;
    background: var(--site-primary-solid);
    /* 白字在 #4f46e5 上对比度 ≈6.3:1（AA 需 4.5:1）；次级元素也别用 --site-on-primary-muted（仅 4.26:1）。 */
    color: var(--site-on-primary);
}

.site-notice-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    max-width: var(--site-content-width);
    margin-inline: auto;
    padding: .6rem 1rem;
}

@media (min-width: 768px) {
    .site-notice-inner {
        padding-inline: 1.5rem;
    }
}

.site-notice-body {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    min-width: 0;
}

.site-notice-tag {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    flex-shrink: 0;
    margin-top: .1rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    /* 白底药丸 + 品牌字色（对比度 6.3:1），比半透明白底上的白字（4.37:1）更稳。 */
    background: var(--site-on-primary);
    color: var(--site-primary-solid);
    font-size: .75rem;
    font-weight: 600;
}

.site-notice-text {
    min-width: 0;
    font-size: .875rem;
    line-height: 1.55;
}

.site-notice-title {
    font-weight: 600;
}

.site-notice-content {
    display: block;
    /* 换行由 pre-wrap 保留（不再转 <br />）；折叠用 line-clamp，展开时由 .is-expanded 抬起。 */
    white-space: pre-wrap;
    word-break: break-word;
}

.site-notice-bar:not(.is-expanded) .site-notice-content {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.site-notice-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}

.site-notice-toggle {
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    padding: .15rem .6rem;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.4;
}

.site-notice-toggle:hover {
    background: rgba(255, 255, 255, .16);
}

/* 可见性由实测折叠状态驱动（SSR 按长度播种，JS 按真实布局修正）。 */
.site-notice-bar:not([data-overflow="1"]) .site-notice-toggle {
    display: none;
}

.site-notice-close {
    flex-shrink: 0;
    border: 0;
    background: transparent;
    color: inherit;
    opacity: .8;
    padding: .15rem;
    line-height: 1;
}

.site-notice-close:hover {
    opacity: 1;
}

.site-notice-toggle:focus-visible,
.site-notice-close:focus-visible {
    outline: 2px solid var(--site-on-primary);
    outline-offset: 2px;
}

/* 紧急程度配色：重要=橙、紧急=红（白字对比度分别 ≈4.7:1 / ≈5.9:1，均过 AA）；
   「公告」药丸底恒白、字色跟随横幅底色。 */
.site-notice-bar.is-important {
    background: #b45309;
}

.site-notice-bar.is-critical {
    background: #b91c1c;
}

.site-notice-bar.is-important .site-notice-tag {
    color: #b45309;
}

.site-notice-bar.is-critical .site-notice-tag {
    color: #b91c1c;
}

/* 标题即链接：继承横幅字色，悬停下划线（去默认链接蓝与下划线）。 */
a.site-notice-title {
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

a.site-notice-title:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* 紧急级「我知道了」确认钮：白底实心药丸，比描边展开钮更醒目。 */
.site-notice-ack {
    flex-shrink: 0;
    border: 0;
    border-radius: 999px;
    background: var(--site-on-primary);
    color: var(--site-primary-solid);
    padding: .18rem .7rem;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.4;
}

.site-notice-ack:hover {
    filter: brightness(.94);
}

.site-notice-ack:focus-visible {
    outline: 2px solid var(--site-on-primary);
    outline-offset: 2px;
}

/* ---------- 公告中心 / 详情页 ---------- */
.site-ann-list {
    max-width: var(--site-content-width);
    margin-inline: auto;
    padding: 0 1rem 2rem;
    display: grid;
    gap: .85rem;
}

@media (min-width: 768px) {
    .site-ann-list {
        padding-inline: 1.5rem;
    }
}

.site-ann-item {
    background: var(--site-surface);
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-lg);
    box-shadow: var(--site-shadow);
    padding: 1rem 1.25rem;
}

.site-ann-head {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    flex-wrap: wrap;
}

.site-ann-badges {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-shrink: 0;
}

.site-ann-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    min-width: 0;
}

.site-ann-title a {
    color: inherit;
    text-decoration: none;
}

.site-ann-title a:hover {
    color: var(--site-primary-solid);
}

.site-ann-time {
    margin-left: auto;
    flex-shrink: 0;
    font-size: .8125rem;
    color: var(--site-text-secondary, #6c757d);
}

.site-ann-content {
    margin: .5rem 0 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.site-ann-link {
    display: inline-block;
    margin-top: .6rem;
    font-size: .875rem;
    font-weight: 600;
}

.site-aside-announcements {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .6rem;
}

/* 侧栏公告条目整体可点（进详情页）：重置链接观感，标题色/时间色由内部元素自持。 */
.site-aside-announcement-link {
    display: grid;
    gap: .15rem;
    color: inherit;
    text-decoration: none;
}

.site-aside-announcement-link:hover .site-aside-announcement-title {
    color: var(--site-primary-solid);
}

.site-aside-announcement-badges {
    display: flex;
    align-items: center;
    gap: .3rem;
}

.site-aside-announcement-link .badge {
    font-size: .6875rem;
    padding: .1rem .45rem;
}

.site-aside-announcement-title {
    font-weight: 600;
    font-size: .8125rem;
    display: flex;
    align-items: center;
    gap: .3rem;
}

.site-aside-announcement-content {
    font-size: .8125rem;
    color: var(--site-text-secondary, #6c757d);
    white-space: pre-wrap;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ---------- 验证码（ALTCHA PoW widget）：与站点表单观感对齐 ---------- */
/* widget 原生暴露 --altcha-* 定制点；用两级选择器压过其自带默认值（加载顺序无关）。
   颜色/圆角走 Bootstrap 主题变量，亮/暗主题自适应；聚焦圈与 .form-control 同款。 */
.site-captcha .altcha {
    --altcha-color-base: var(--bs-body-bg);
    --altcha-color-border: var(--bs-border-color);
    --altcha-color-border-focus: var(--site-primary-focus);
    --altcha-color-text: var(--bs-body-color);
    --altcha-color-error-text: var(--bs-danger-text-emphasis, var(--bs-danger));
    --altcha-border-radius: var(--bs-border-radius);
    --altcha-max-width: 100%;
    width: 100%;
    font-size: .925rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.site-captcha .altcha:focus-within {
    border-color: var(--site-primary-focus);
    box-shadow: 0 0 0 .25rem rgba(var(--site-primary-rgb), .13);
}

.site-captcha .altcha-main {
    padding: .6rem .75rem;
}

/* widget 的原生复选框（非 bootstrap form-check）用 accent-color 染成站点主色 */
.site-captcha .altcha-checkbox input {
    accent-color: var(--site-primary-solid);
}

/* ---------- 帖子内容图灯箱（ImageBlockView 的 site-lightbox-link + js/site-lightbox.js） ----------
   亮暗主题共用：遮罩自带近黑底色，不随 data-bs-theme 变化。z-index 高于顶栏/用户菜单。
   交互：× / Esc / 点暗色背景关闭；滚轮锚点缩放、双击 1:1、放大后拖拽平移、双指捏合（脚本负责）。
   touch-action:none 把触摸手势整体交给脚本；prefers-reduced-motion 关闭开合动画。 */

.site-lightbox-link {
    display: block;
    cursor: zoom-in;
}

.site-lightbox-link img {
    transition: opacity .15s ease;
}

.site-lightbox-link:hover img {
    opacity: .92;
}

.site-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1900;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    padding: 32px;
    background: rgba(9, 11, 17, .92);
    touch-action: none;
    animation: site-lightbox-in .18s ease-out;
}

.site-lightbox img {
    max-width: 100%;
    max-height: calc(100vh - 110px);
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .55);
    animation: site-lightbox-zoom .22s cubic-bezier(.2, .8, .2, 1);
    transition: transform .18s ease-out;
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
}

.site-lightbox.is-zoomed img {
    cursor: grab;
}

.site-lightbox img.is-panning {
    transition: none;
    cursor: grabbing;
}

.site-lightbox-caption {
    margin: 0;
    max-width: min(80ch, 90vw);
    color: #c7cdd9;
    font-size: .875rem;
    line-height: 1.5;
    text-align: center;
    overflow-wrap: anywhere;
    animation: site-lightbox-caption-in .25s ease-out .06s backwards;
}

.site-lightbox-close {
    position: absolute;
    top: 18px;
    right: 22px;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: #e8ebf2;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease;
}

.site-lightbox-close:hover {
    background: rgba(255, 255, 255, .18);
}

.site-lightbox-closing {
    animation: site-lightbox-out .15s ease-in forwards;
    pointer-events: none;
}

@keyframes site-lightbox-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes site-lightbox-zoom {
    from {
        transform: scale(.94);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes site-lightbox-caption-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes site-lightbox-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-lightbox,
    .site-lightbox img,
    .site-lightbox-caption,
    .site-lightbox-closing {
        animation: none;
    }
}

/* ===================== 27. 发帖/编辑帖写作页（site-compose-*） =====================
   NewTopic.razor 与 EditTopic.razor 共用的写作动线视觉：
   标题 hero → 正文 → 归档（板块/标签）→ 吸底操作栏。样式全走 --site-* token，
   内边距/底色仍由 .site-card 的 p-3 p-md-4 承担。 */

/* 标题：大号无框输入，只留底部细分隔线；聚焦时底线转品牌色 + 极淡底（补回 form-control 的聚焦反馈）。 */
.site-compose-title-wrap {
    position: relative;
}

.site-compose-title {
    display: block;
    width: 100%;
    padding: .45rem .25rem 1.1rem;
    border: 0;
    border-bottom: 1px solid var(--site-border-strong);
    border-radius: 0;
    background: transparent;
    color: var(--site-text);
    font-family: var(--site-font-sans);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.4;
    transition: border-color .12s ease, background-color .12s ease;
}

.site-compose-title::placeholder {
    color: var(--site-text-muted);
    font-weight: 500;
}

.site-compose-title:focus {
    outline: none;
    border-bottom-color: var(--site-primary);
    background: var(--site-primary-softer);
}

/* 字数计数：绝对定位在标题右下角，不挡点击、不参与换行。 */
.site-compose-count {
    position: absolute;
    right: .25rem;
    bottom: .3rem;
    color: var(--site-text-muted);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.site-compose-count.is-near {
    color: var(--site-danger-text);
    font-weight: 600;
}

/* 必填星号。 */
.site-required {
    color: var(--site-danger-text);
    font-weight: 600;
}

/* 两栏写作布局：主卡（标题 + 正文 + 操作栏）与主题详情页主列同宽（1fr + 300px 侧栏 + 1.5rem 列距），
   编辑所见与发布后的真实渲染对齐；板块/标签在右侧栏单张设置卡。
   窄屏单列，主卡在前、设置卡堆到其后（缺板块的错误会镜像到操作栏上方兜底）。 */
.site-compose-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.site-compose-main {
    min-width: 0;
}

.site-compose-aside {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

@media (min-width: 992px) {
    .site-compose-layout {
        grid-template-columns: minmax(0, 1fr) 300px;
        column-gap: 1.5rem;
        align-items: start;
    }
}

/* 侧栏设置卡内的字段组分隔线。 */
.site-aside-field-divider {
    border-top: 1px solid var(--site-border);
    margin: 1.1rem 0;
}

/* 编辑页侧栏的板块只读展示（编辑不可改板块）。 */
.site-compose-static-category {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--site-text);
}

.site-compose-static-category .site-icon {
    flex: none;
}

/* 吸底操作栏：左侧草稿状态、右侧发布/取消；用卡片底色盖住滚过的内容。 */
.site-compose-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: .5rem;
    padding-top: .9rem;
    border-top: 1px solid var(--site-border);
    background: var(--site-surface);
}

.site-compose-status {
    display: inline-flex;
    align-items: center;
    color: var(--site-text-muted);
    font-size: .8125rem;
}

/* ===================== 28. 字段提示气泡（site-hint） =====================
   label 后跟一个小 ⓘ，文案默认不显示；鼠标悬停或键盘聚焦（tabindex）时纯 CSS 浮出。
   文案同时作为外层 aria-label（气泡 aria-hidden，避免读屏重复播报）。无 JS。 */

.site-hint {
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: -.15em;
    margin-left: .25rem;
    color: var(--site-text-muted);
    cursor: help;
}

.site-hint:focus-visible {
    outline: 2px solid var(--site-primary);
    outline-offset: 2px;
    border-radius: 3px;
}

.site-hint .site-icon {
    display: block;
}

.site-hint-tip {
    display: none;
    position: absolute;
    left: 0;
    bottom: calc(100% + .4rem);
    z-index: 30;
    width: max-content;
    max-width: min(18rem, 70vw);
    padding: .4rem .6rem;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-sm);
    background: var(--site-surface);
    box-shadow: var(--site-shadow-md);
    color: var(--site-text);
    font-size: .75rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    white-space: normal;
}

.site-hint:hover .site-hint-tip,
.site-hint:focus .site-hint-tip,
.site-hint:focus-within .site-hint-tip {
    display: block;
}

/* ===================== 21. 回复可见 / 附件块（site-gate-* / site-attachment-*） =====================
   回复可见块 = 红虚线包裹 + 左上角标签（锁定「回复后可见」/ 解锁「以下是隐藏内容」）；
   附件块 = 普通卡片（始终可见）或红虚线包裹（回复可见）。
   标签为绝对定位覆盖层，显隐零布局位移。 */

.site-gate-box {
    position: relative;
    margin: .75rem 0;
    padding: 1.1rem .875rem .75rem;
    border: 1px dashed var(--site-danger-border);
    border-radius: var(--site-radius-lg);
    background: transparent;
}

.site-gate-box.is-editing {
    padding-top: 1.25rem;
    background: var(--site-surface);
}

/* 附件块「始终可见」变体：蓝虚线 + 蓝色角标（默认红虚线 = 回复后可见）。 */
.site-gate-box.is-attachment-open {
    border-color: var(--site-primary-border);
}

.site-gate-box.is-attachment-open .site-gate-label {
    color: var(--site-primary);
}

.site-gate-label {
    position: absolute;
    top: -.6rem;
    left: .75rem;
    padding: 0 .4rem;
    background: var(--site-surface);
    color: var(--site-danger-text);
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.2;
}

.site-gate-content {
    margin: 0;
}

.site-gate-locked {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .25rem 0;
}

.site-gate-locked-inline {
    margin-top: .5rem;
    border-top: 1px dashed var(--site-danger-border);
    padding-top: .5rem;
}

.site-gate-hint {
    color: var(--site-text-secondary);
    font-size: .85rem;
}

.site-gate-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* 附件块：始终可见 = 普通卡片。 */
.site-attachment-card {
    margin: .75rem 0;
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-lg);
    background: var(--site-surface);
    box-shadow: var(--site-shadow);
    overflow: hidden;
}

.site-attachment-head {
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--site-border);
    font-weight: 600;
    font-size: .9rem;
    color: var(--site-text);
}

.site-attachment-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-attachment-row {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--site-border);
}

.site-attachment-row:last-child {
    border-bottom: none;
}

.site-attachment-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    color: var(--site-text-secondary);
    flex-shrink: 0;
}

.site-attachment-info {
    min-width: 0;
    flex: 1;
}

.site-attachment-name {
    font-size: .9rem;
    color: var(--site-text);
    overflow-wrap: anywhere;
}

.site-attachment-size {
    font-size: .75rem;
    color: var(--site-text-muted);
}

.site-attachment-action {
    flex-shrink: 0;
}

.site-attachment-locked {
    color: var(--site-text-muted);
}

.site-attachment-row.is-locked .site-attachment-name {
    color: var(--site-text-secondary);
}

/* 附件块编辑器（画布内联）。 */
.site-attachment-editor {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.site-attachment-visibility {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: .85rem;
}

.site-attachment-empty {
    padding: .5rem .75rem;
    border: 1px dashed var(--site-border);
    border-radius: var(--site-radius-sm);
    color: var(--site-text-muted);
    font-size: .85rem;
}

.site-attachment-tools {
    display: flex;
    gap: .15rem;
    flex-shrink: 0;
}

/* ===== 专题（Collection）与访问门控 ===== */
.site-topic-collections {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .35rem;
}

.site-collection-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .1rem .5rem;
    border: 1px solid var(--site-primary-border);
    border-radius: var(--site-radius-sm);
    background: var(--site-primary-soft);
    color: var(--site-primary);
    font-size: .78rem;
    text-decoration: none;
}

.site-collection-chip:hover {
    background: var(--site-primary-softer);
    color: var(--site-primary-hover);
}

.site-collection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

.site-collection-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--site-transition), transform var(--site-transition);
}

.site-collection-card:hover {
    box-shadow: var(--site-shadow-md);
    transform: translateY(-2px);
}

.site-collection-cover img {
    display: block;
    width: 100%;
    height: 140px;
    object-fit: cover;
}

.site-collection-card-body {
    padding: .85rem 1rem;
}

.site-collection-card-title {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-weight: 600;
    color: var(--site-text-strong);
}

.site-collection-card-desc {
    margin: .35rem 0 0;
    color: var(--site-text-muted);
    font-size: .85rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.site-collection-card-count {
    display: block;
    margin-top: .5rem;
    color: var(--site-text-muted);
    font-size: .78rem;
}

.site-collection-detail-cover {
    margin-bottom: 1rem;
    border-radius: var(--site-radius);
    overflow: hidden;
}

.site-collection-detail-cover img {
    display: block;
    width: 100%;
    max-height: 280px;
    object-fit: cover;
}

.site-access-gate {
    display: flex;
    justify-content: center;
    padding: 3rem 1rem;
}

.site-access-gate-card {
    max-width: 460px;
    width: 100%;
    text-align: center;
    padding: 2rem 1.5rem;
}

.site-access-gate-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--site-warning-soft);
    color: var(--site-warning-border);
    margin-bottom: 1rem;
}

.site-access-gate-title {
    font-size: 1.25rem;
    margin-bottom: .5rem;
}

.site-access-gate-desc {
    color: var(--site-text-muted);
    margin-bottom: 1.25rem;
}

.site-access-gate-actions {
    display: flex;
    justify-content: center;
    gap: .5rem;
    flex-wrap: wrap;
}