/* QingCMS 后台补充样式（Bootstrap 5 之上） */

/* =====================================================================
   QingCMS 后台设计令牌（Design Tokens）
   ---------------------------------------------------------------------
   统一字号 / 间距 / 圆角 / 阴影 / 动效 / 表面色，供 admin-* 与 qc-* 共用。
   主题色仍由下方 [data-admin-theme] 覆盖 --bs-primary 系列，互不冲突。
   暗色模式由 [data-bs-theme="dark"] 触发（Bootstrap 5.3 原生机制）。
   ===================================================================== */
:root {
    /* 字号：后台正文基准 14px（原为 13px，低于可读性下限） */
    --qc-font-size-2xs: 0.6875rem;  /* 11px：角标 / 辅助说明 */
    --qc-font-size-xs: 0.75rem;     /* 12px */
    --qc-font-size-sm: 0.8125rem;   /* 13px */
    --qc-font-size-base: 0.875rem;  /* 14px */
    --qc-font-size-md: 1rem;        /* 16px */
    --qc-font-size-lg: 1.125rem;    /* 18px */

    /* 间距：4px 基准 */
    --qc-space-1: 0.25rem;
    --qc-space-2: 0.5rem;
    --qc-space-3: 0.75rem;
    --qc-space-4: 1rem;
    --qc-space-5: 1.25rem;
    --qc-space-6: 1.5rem;
    --qc-space-8: 2rem;

    /* 圆角 */
    --qc-radius-xs: 0.25rem;
    --qc-radius-sm: 0.35rem;
    --qc-radius-md: 0.625rem;
    --qc-radius-lg: 0.875rem;
    --qc-radius-pill: 999px;

    /* 阴影 */
    --qc-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --qc-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.10);

    /* 动效 */
    --qc-transition-fast: 150ms ease;
    --qc-transition-normal: 200ms ease;

    /* 表面与描边（暗色模式覆盖） */
    --qc-surface: #ffffff;
    --qc-surface-muted: rgba(15, 23, 42, 0.02);
    --qc-surface-soft: rgba(15, 23, 42, 0.04);
    --qc-border-color: rgba(15, 23, 42, 0.12);
    --qc-border-strong: rgba(15, 23, 42, 0.18);

    /* 语义交互色：收敛各处散落的 rgba()/十六进制硬编码，
       表格表头、行悬停、悬停表面统一走这里，四套主题自动跟随。 */
    --qc-head-bg: rgba(var(--bs-primary-rgb), 0.06);
    --qc-head-border: rgba(var(--bs-primary-rgb), 0.2);
    --qc-surface-hover: rgba(var(--bs-primary-rgb), 0.06);
    --qc-row-hover: rgba(var(--bs-primary-rgb), 0.045);
    --qc-row-hover-strong: rgba(var(--bs-primary-rgb), 0.11);
}

/* 暗色底上白色叠层可见度更高，统一在此提权，避免在每处规则里各写一份 */
[data-bs-theme="dark"] {
    --qc-surface: #1a1d21;
    --qc-surface-muted: rgba(255, 255, 255, 0.03);
    --qc-surface-soft: rgba(255, 255, 255, 0.05);
    --qc-border-color: rgba(255, 255, 255, 0.14);
    --qc-border-strong: rgba(255, 255, 255, 0.22);
    --qc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
    --qc-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);

    --qc-head-bg: rgba(255, 255, 255, 0.05);
    --qc-head-border: var(--qc-border-color);
    --qc-surface-hover: rgba(255, 255, 255, 0.07);
    --qc-row-hover: rgba(255, 255, 255, 0.055);
    --qc-row-hover-strong: rgba(var(--bs-primary-rgb), 0.18);
}

/* 三套主题：覆盖 Bootstrap 主色（导航栏 bg-primary、按钮、链接、侧栏高亮等） */
[data-admin-theme="blue"] {
    --bs-primary: #0d6efd;
    --bs-primary-rgb: 13, 110, 253;
    --admin-accent-soft: rgba(13, 110, 253, 0.12);
}

[data-admin-theme="emerald"] {
    --bs-primary: #198754;
    --bs-primary-rgb: 25, 135, 84;
    --bs-link-color: #198754;
    --bs-link-hover-color: #146c43;
    --admin-accent-soft: rgba(25, 135, 84, 0.12);
}

[data-admin-theme="slate"] {
    --bs-primary: #475569;
    --bs-primary-rgb: 71, 85, 105;
    --bs-link-color: #475569;
    --bs-link-hover-color: #334155;
    --admin-accent-soft: rgba(71, 85, 105, 0.14);
}

:root {
    /* 让 Topbar/侧栏/移动端菜单高度对齐（避免硬编码 56px 导致错位） */
    --admin-topnav-height: 56px;
}

.admin-body {
    min-height: 100vh;
    /* 由 13px 提升至 14px：13px 在 1.5 行高下中文可读性偏低 */
    font-size: var(--qc-font-size-base, 0.875rem);
    line-height: 1.5;
}

/* =====================================================================
   .admin-content —— 页面内容样式层的作用域锚点
   ---------------------------------------------------------------------
   后台有两套壳，页面内容会落在其中之一：
     · layout.html      整页壳：<main class="admin-main admin-main--tabs">
                        只放标签条，不渲染 bodyHtml（内容由 iframe 载入）
     · layout_embed.html 内容态壳：<div class="admin-embed-wrap">
                        渲染 bodyHtml —— 页面正文实际都在这里

   因此「内容样式层」（按钮 / 表单 / 表格 / 徽章 / 分页 / 卡片…）统一挂在
   .admin-content 上，两套壳都带这个类；而 .admin-main 只保留布局几何
   （定高、flex、max-width、自身滚动），绝不用于选内容。

   历史坑：2026-10-01 多标签改造前，内容直接渲染在 .admin-main 内，
   样式遂全部写成 `.admin-main X`。改造后 .admin-main 不再包裹内容，
   导致这一整层规则全部匹配不到 —— 2026-10-02 统一迁移为 .admin-content。
   新增规则请一律用 .admin-content，不要再用 .admin-main 选内容。
   ===================================================================== */

/* 桌面端：壳定高，仅右侧主区滚动（见 docs/superpowers/specs/2026-10-01-admin-sidebar-main-scroll-design.md） */
@media (min-width: 768px) {
    html:has(body.admin-body) {
        height: 100%;
        overflow: hidden;
    }

    body.admin-body {
        height: 100vh;
        max-height: 100vh;
        min-height: 0;
        overflow: hidden;
    }

    .admin-shell {
        height: calc(100vh - var(--admin-topnav-height, 56px));
        max-height: calc(100vh - var(--admin-topnav-height, 56px));
        min-height: 0;
        overflow: hidden;
    }

    .admin-shell > .row {
        height: 100%;
        min-height: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .admin-sidebar-wrap {
        height: 100%;
        max-height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .admin-sidebar {
        position: static; /* 定高壳下不再依赖 sticky */
        top: auto;
        height: 100%;
        min-height: 0;
        max-height: 100%;
        overflow: hidden;
        flex: 1 1 auto;
    }

    .admin-sidebar-inner {
        height: 100%;
        min-height: 0;
        max-height: 100%;
        overflow: hidden;
    }

    .admin-sidebar-nav {
        flex: 1 1 auto;
        min-height: 0;
        /* Bootstrap .nav 默认 flex-wrap:wrap；定高后会折成多列，必须 nowrap 才能走纵向滚动 */
        flex-direction: column;
        flex-wrap: nowrap;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .admin-sidebar-nav > * {
        flex-shrink: 0;
        width: 100%;
        max-width: 100%;
    }

    .admin-sidebar-inner > .mt-auto,
    .admin-sidebar-inner > .border-top {
        flex-shrink: 0;
    }

    .admin-main {
        height: 100%;
        min-height: 0;
        max-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* 多标签壳：主区不滚动，由 iframe 内部滚动 */
    .admin-main--tabs {
        overflow: hidden;
        display: flex;
        flex-direction: column;
        padding: 0 !important;
    }
}


.admin-topnav {
    z-index: 1030;
    backdrop-filter: blur(10px);
    background-image: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.95), rgba(var(--bs-primary-rgb), 0.82));
}

.admin-brand-mark {
    width: 1.95rem;
    height: 1.95rem;
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

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

.admin-brand-title {
    line-height: 1.1;
}

.admin-top-actions .btn {
    border-radius: var(--qc-radius-pill);
    backdrop-filter: blur(4px);
}

/* 顶栏「有更新」：暖色胶囊，版本号不再套深色 badge */
.admin-top-actions .admin-top-update-btn {
    --bs-btn-color: #5a3b08;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: rgba(255, 236, 179, 0.55);
    --bs-btn-hover-color: #3f2804;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: rgba(255, 248, 220, 0.85);
    --bs-btn-active-color: #3f2804;
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: rgba(255, 248, 220, 0.85);
    --bs-btn-padding-x: 0.55rem;
    --bs-btn-padding-y: 0.18rem;
    gap: 0.35rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    background-image: linear-gradient(180deg, #ffe9a8 0%, #f6c445 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 8px rgba(15, 23, 42, 0.16);
    transition: filter var(--qc-transition-fast, 0.15s ease),
        transform var(--qc-transition-fast, 0.15s ease),
        box-shadow var(--qc-transition-fast, 0.15s ease),
        border-color var(--qc-transition-fast, 0.15s ease);
}

.admin-top-actions .admin-top-update-btn:hover,
.admin-top-actions .admin-top-update-btn:focus-visible {
    background-image: linear-gradient(180deg, #fff1c2 0%, #f8cc55 100%);
    filter: brightness(1.03);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 4px 12px rgba(15, 23, 42, 0.2);
}

.admin-top-actions .admin-top-update-btn .bi {
    font-size: 0.95rem;
    opacity: 0.92;
}

.admin-top-actions .admin-top-update-label {
    font-size: var(--qc-font-size-xs, 0.75rem);
    line-height: 1;
}

.admin-top-actions .admin-top-update-ver {
    font-size: var(--qc-font-size-2xs, 0.6875rem);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: 0.02em;
    color: inherit;
    opacity: 0.72;
    background: none;
    padding: 0;
    border: 0;
}

.admin-top-actions .btn-outline-light,
.admin-top-actions .btn-light {
    border-color: rgba(255, 255, 255, 0.35);
    background-color: rgba(255, 255, 255, 0.14);
}

.admin-top-actions .btn-outline-light:hover,
.admin-top-actions .btn-light:hover {
    border-color: rgba(255, 255, 255, 0.55);
    background-color: rgba(255, 255, 255, 0.22);
}

.admin-theme-switcher {
    margin-top: 0.1rem;
}

.admin-brand-wrap {
    position: relative;
}

.admin-theme-switcher-near-brand {
    position: absolute;
    left: calc(100% + 54px);
    bottom: 3px;
    display: inline-flex;
    align-items: center;
}

.admin-theme-switcher-near-brand .admin-theme-switcher {
    margin-top: 0;
}

@media (max-width: 991.98px) {
    .admin-theme-switcher-near-brand {
        position: static;
    }

    .admin-theme-switcher-near-brand .admin-theme-switcher {
        margin-top: 0.12rem;
    }
}

@media (max-width: 576px) {
    .admin-theme-switch-btn {
        padding-left: 0.12rem;
        padding-right: 0.12rem;
    }
}

.admin-theme-switch-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    border: 1px solid transparent;
    background: transparent;
    color: #fff;
    border-radius: var(--qc-radius-pill);
    padding: 0.08rem 0.16rem;
    font-size: var(--qc-font-size-2xs, 0.6875rem);
    line-height: 1;
    cursor: pointer;
    transition: transform var(--qc-transition-fast, 0.15s ease);
}

.admin-theme-switch-btn:hover {
    transform: translateY(-1px);
}

.admin-theme-switch-btn.is-active {
    transform: scale(1.08);
}

.admin-theme-switch-swatch {
    width: 0.78rem;
    height: 0.78rem;
    border-radius: 50%;
    border: 0;
    flex-shrink: 0;
}

.admin-theme-switch-swatch.theme-slate {
    background: #475569;
}

.admin-theme-switch-swatch.theme-blue {
    background: #0d6efd;
}

.admin-theme-switch-swatch.theme-emerald {
    background: #198754;
}

.admin-shell {
    min-height: calc(100vh - var(--admin-topnav-height, 56px));
}

@media (min-width: 768px) {
    .admin-shell {
        /* 高度由 body flex 子项分配，避免再按 100vh 撑破 */
        min-height: 0;
    }
}

.admin-sidebar-wrap {
    align-self: stretch;
}

@media (min-width: 768px) {
    .admin-sidebar-wrap {
        flex: 0 0 clamp(220px, 18vw, 252px);
        max-width: clamp(220px, 18vw, 252px);
        transition: flex-basis var(--qc-transition-normal, 0.2s ease),
            max-width var(--qc-transition-normal, 0.2s ease);
    }

    .admin-main {
        flex: 1 1 auto;
        max-width: calc(100% - clamp(220px, 18vw, 252px));
        transition: max-width var(--qc-transition-normal, 0.2s ease);
    }
}

@media (min-width: 768px) {
    .admin-sidebar-collapsed .admin-sidebar-wrap {
        flex: 0 0 86px;
        max-width: 86px;
    }

    .admin-sidebar-collapsed .admin-main {
        max-width: calc(100% - 86px);
    }

    .admin-sidebar-collapsed .admin-sidebar-brand-text,
    .admin-sidebar-collapsed .admin-sidebar-group-header,
    .admin-sidebar-collapsed .admin-sidebar-nav .nav-link span,
    .admin-sidebar-collapsed .admin-sidebar .border-top .nav-link span,
    .admin-sidebar-collapsed .admin-sidebar-inner > .mt-auto .nav-link span {
        display: none !important;
    }

    .admin-sidebar-collapsed .admin-sidebar-brand {
        display: none !important;
    }

    .admin-sidebar-collapsed .admin-sidebar {
        padding: 0.5rem;
    }

    .admin-sidebar-collapsed .admin-sidebar-nav {
        padding: 0.35rem !important;
        gap: 0.35rem;
    }

    .admin-sidebar-collapsed .admin-sidebar-nav .nav-link {
        justify-content: center;
        padding-left: 0.45rem !important;
        padding-right: 0.45rem !important;
    }

    .admin-sidebar-collapsed .admin-sidebar-nav .nav-link > i {
        margin-right: 0 !important;
    }

    .admin-sidebar-collapsed .admin-sidebar-inner > .mt-auto .nav-link {
        justify-content: center;
        padding-left: 0.45rem !important;
        padding-right: 0.45rem !important;
    }

    .admin-sidebar-collapsed .admin-sidebar-inner > .mt-auto .nav-link > i {
        margin-right: 0 !important;
    }

    .admin-sidebar-collapsed .admin-sidebar .border-top {
        border-top: 0 !important;
        padding-top: 0 !important;
    }
}

.admin-sidebar {
    min-height: calc(100vh - var(--admin-topnav-height, 56px));
    /* 移动端 / 回退：保留 sticky；桌面 md+ 由上方定高壳规则改为 static */
    position: sticky;
    top: var(--admin-topnav-height, 56px);
    /* 取消「悬浮卡片」内边距，侧栏贴齐壳层 */
    padding: 0;
    background: transparent !important;
}

.admin-sidebar-inner {
    min-height: calc(100vh - var(--admin-topnav-height, 56px));
    /* 区域直角：去掉圆角与大投影，改右侧细描边分区 */
    border: 0;
    border-right: 1px solid var(--qc-border-color, rgba(15, 23, 42, 0.12));
    border-radius: 0;
    background: var(--qc-surface, var(--bs-body-bg));
    box-shadow: none;
}

@media (min-width: 768px) {
    .admin-sidebar,
    .admin-sidebar-inner {
        min-height: 0;
    }
}

.admin-sidebar-collapse-btn {
    width: 1.85rem;
    height: 1.85rem;
    padding: 0;
    border-radius: var(--qc-radius-sm, 0.35rem);
    line-height: 1;
    color: var(--bs-secondary);
    border-color: rgba(var(--bs-primary-rgb), 0.22);
    background: rgba(var(--bs-primary-rgb), 0.04);
}

.admin-sidebar-collapse-btn:hover {
    color: var(--bs-primary);
    border-color: rgba(var(--bs-primary-rgb), 0.4);
    background: rgba(var(--bs-primary-rgb), 0.1);
}

.admin-sidebar-collapse-btn:focus-visible {
    outline: 2px solid rgba(var(--bs-primary-rgb), 0.55);
    outline-offset: 2px;
}

/* 品牌区的描边与渐变统一定义在下方的「侧栏品牌区」块，此处不重复声明 */
.admin-sidebar-brand-name {
    font-size: var(--qc-font-size-base, 0.875rem);
    line-height: 1.25;
}
.admin-sidebar-brand-sub {
    color: var(--bs-body-color);
    opacity: 0.5;
}
.admin-sidebar-group-header {
    margin: 0.45rem 0.5rem 0.15rem;
    padding: 0.32rem 0.55rem !important;
    border-radius: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-body-color);
    opacity: 0.55;
    letter-spacing: 0.04em;
    cursor: pointer;
}
.admin-sidebar-group-header:hover {
    opacity: 0.85;
    background: rgba(var(--bs-primary-rgb), 0.04);
}

/* 标签条左侧：侧栏宽窄切换 */
.admin-tabs-sidebar-toggle {
    align-self: center;
    margin: 0 0.35rem 0 0.15rem;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-right: 1px solid var(--qc-border-color, rgba(15, 23, 42, 0.1));
    border-radius: var(--qc-radius-sm, 0.35rem) 0 0 var(--qc-radius-sm, 0.35rem);
}
.admin-tabs-sidebar-toggle[aria-pressed="true"] {
    color: var(--bs-primary);
    border-color: rgba(var(--bs-primary-rgb), 0.45);
    background: rgba(var(--bs-primary-rgb), 0.12);
}

.admin-settings-ops-links {
    background: transparent;
}
.admin-settings-page .qc-settings-dev-col {
    display: none;
}
.admin-settings-page.qc-settings-show-dev .qc-settings-dev-col {
    display: table-cell;
}
.admin-settings-toolbar {
    gap: 0.75rem 1rem;
}

.admin-sidebar-group-title {
    letter-spacing: 0.02em;
}

/* Mobile offcanvas: group header 可点击折叠 */
.admin-offcanvas .admin-sidebar-group-toggle {
    cursor: pointer;
}

/* 桌面侧栏同样支持分组点击折叠 */
.admin-sidebar .admin-sidebar-group-toggle {
    cursor: pointer;
}

.admin-sidebar-group-chevron {
    display: none;
    transition: transform var(--qc-transition-fast, 0.15s ease);
    flex-shrink: 0;
}

.admin-sidebar .admin-sidebar-group-chevron,
.admin-offcanvas .admin-sidebar-group-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-sidebar .admin-sidebar-group-header[aria-expanded="true"] .admin-sidebar-group-chevron,
.admin-offcanvas .admin-sidebar-group-header[aria-expanded="true"] .admin-sidebar-group-chevron {
    transform: rotate(90deg);
}

.admin-offcanvas .admin-sidebar-group-header.is-toggle-hit {
    box-shadow: inset 0 0 0 2px rgba(var(--bs-primary-rgb), 0.35);
    border-radius: var(--qc-radius-sm, 0.35rem);
}

.admin-offcanvas .admin-sidebar-group-toggle:focus-visible {
    outline: 2px solid rgba(var(--bs-primary-rgb), 0.7);
    outline-offset: 2px;
}

/* 菜单较多时允许独立滚动，避免依赖整页滚动。
   注意：Bootstrap .nav 默认 flex-wrap:wrap，与定高侧栏叠加会折成多列。 */
.admin-sidebar-nav {
    flex-direction: column;
    flex-wrap: nowrap;
    overflow-x: hidden;
    overflow-y: auto;
}

.admin-sidebar-nav > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
}

.admin-sidebar-nav .nav-link {
    color: var(--bs-body-color);
    font-size: var(--qc-font-size-sm, 0.8125rem);
    margin: 0 0.35rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.65rem;
    padding-right: 0.65rem;
    /* 菜单项轻微圆角即可，不做「胶囊块」感 */
    border-radius: var(--qc-radius-sm, 0.35rem);
    transition: background-color var(--qc-transition-fast, 0.15s ease), color var(--qc-transition-fast, 0.15s ease);
}

.admin-sidebar-nav .nav-link:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.07);
    color: var(--bs-primary);
}

.admin-sidebar-nav .nav-link.active {
    background-color: var(--admin-accent-soft, rgba(var(--bs-primary-rgb), 0.12));
    color: var(--bs-primary);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), 0.18);
}

.admin-sidebar-nav .nav-link.active i {
    color: var(--bs-primary);
}

.admin-sidebar-nav .nav-link > i {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: var(--qc-radius-sm, 0.35rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--bs-primary-rgb), 0.08);
}

.admin-sidebar-nav .nav-link.active > i {
    background: rgba(var(--bs-primary-rgb), 0.16);
}

.admin-sidebar-nav .nav-link:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(var(--bs-primary-rgb), 0.45);
}

.admin-offcanvas {
    --bs-offcanvas-width: min(20rem, 88vw);
    /* 从 Topbar 下方开始显示（保持移动端体验一致） */
    top: var(--admin-topnav-height, 56px);
    height: calc(100vh - var(--admin-topnav-height, 56px));
}

.admin-offcanvas .offcanvas-body {
    overflow-y: auto;
    max-height: 100%;
}

.admin-offcanvas .admin-sidebar-inner {
    min-height: 0;
    height: 100%;
    border-right: 0;
    border-radius: 0;
    box-shadow: none;
}

/* 侧栏品牌区：直角分区线，贴齐侧栏边缘 */
.admin-sidebar-brand {
    border-bottom: 1px solid var(--qc-border-color, rgba(15, 23, 42, 0.12)) !important;
    background: linear-gradient(180deg, rgba(var(--bs-primary-rgb), 0.04), transparent 85%);
}

.admin-main {
    min-width: 0;
}

/* —— 多标签条 + iframe 窗格 —— */
.admin-main--tabs {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--admin-topnav-height, 56px));
    padding: 0 !important;
    overflow: hidden;
}

.admin-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: calc(100vh - var(--admin-topnav-height, 56px));
    background: var(--bs-body-bg);
}

.admin-tabs-bar {
    display: flex;
    align-items: stretch;
    flex: 0 0 auto;
    border-bottom: 1px solid var(--qc-border-color, rgba(15, 23, 42, 0.12));
    background: var(--qc-surface-soft, var(--bs-tertiary-bg, #f8f9fa));
    min-height: 2.5rem;
    padding: 0.2rem 0.35rem 0;
}

.admin-tabs-scroll-btn {
    flex: 0 0 2rem;
    border: 0;
    background: transparent;
    color: var(--bs-secondary-color, #6c757d);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-tabs-scroll-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.admin-tabs-scroll-btn:not(:disabled):hover {
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.06);
}

.admin-tabs-list {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: stretch;
    gap: 0.15rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    padding: 0.25rem 0.15rem;
}

.admin-tabs-list::-webkit-scrollbar {
    display: none;
}

.admin-tab {
    flex: 0 0 auto;
    max-width: 11rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 0;
    border-radius: var(--qc-radius-sm, 0.35rem) var(--qc-radius-sm, 0.35rem) 0 0;
    background: transparent;
    color: var(--bs-secondary-color, var(--bs-body-color));
    padding: 0.35rem 0.5rem 0.35rem 0.6rem;
    font-size: var(--qc-font-size-sm, 0.8125rem);
    line-height: 1.2;
    white-space: nowrap;
    transition: background-color var(--qc-transition-fast, 0.15s ease), color var(--qc-transition-fast, 0.15s ease);
}

.admin-tab:hover {
    background: rgba(var(--bs-primary-rgb), 0.06);
    color: var(--bs-primary);
}

.admin-tab.is-active {
    background: var(--qc-surface, var(--bs-body-bg));
    color: var(--bs-body-color);
    box-shadow: inset 0 0 0 1px var(--qc-border-color, rgba(15, 23, 42, 0.12)),
                0 1px 0 var(--qc-surface, var(--bs-body-bg));
    font-weight: 600;
}

.admin-tab-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--bs-secondary-color);
    flex-shrink: 0;
}

.admin-tab.is-active .admin-tab-dot {
    background: var(--bs-success);
}

.admin-tab-title {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 7.5rem;
}

.admin-tab-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: var(--qc-radius-sm, 0.35rem);
    color: var(--bs-secondary-color);
    flex-shrink: 0;
    transition: background-color var(--qc-transition-fast, 0.15s ease),
        color var(--qc-transition-fast, 0.15s ease);
}

.admin-tab-close:hover {
    background: rgba(var(--bs-danger-rgb), 0.12);
    color: var(--bs-danger);
}

.admin-tabs-panes {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    background: var(--bs-secondary-bg, #e9ecef);
}

/* 多标签壳的无 JS 兜底容器：<noscript> 内的正文落在这里。
   平时（启用脚本）该节点不在 DOM 中，因此不影响标签窗格布局。
   内边距对齐 embed 壳的 .admin-embed-wrap（p-3 / p-lg-4）。 */
.admin-tabs-noscript-fallback {
    height: 100%;
    padding: var(--qc-space-4, 1rem) var(--qc-space-3, 0.75rem);
    overflow: auto;
    overscroll-behavior: contain;
}

@media (min-width: 992px) {
    .admin-tabs-noscript-fallback {
        padding: var(--qc-space-6, 1.5rem);
    }
}

.admin-tab-pane {
    position: absolute;
    inset: 0;
}

.admin-tab-pane.is-active {
    z-index: 1;
}

.admin-tab-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: var(--bs-body-bg);
}

.admin-body--embed {
    min-height: 100vh;
    overflow: auto;
}

.admin-body--embed.admin-body {
    height: auto;
    max-height: none;
}

@media (min-width: 768px) {
    html:has(body.admin-body--embed) {
        height: auto;
        overflow: auto;
    }
}

.admin-main > .p-3,
.admin-main > .p-lg-4 {
    padding-top: 1rem !important;
}

.admin-page-card > .card-header.admin-page-card-header {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.admin-page-card {
    border: 1px solid var(--qc-border-color, rgba(15, 23, 42, 0.12)) !important;
    border-radius: var(--qc-radius-md, 0.625rem) !important;
    box-shadow: var(--qc-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.06)) !important;
    background: var(--qc-surface, var(--bs-body-bg));
}

.admin-page-card-header {
    background: linear-gradient(180deg, rgba(var(--bs-primary-rgb), 0.07), rgba(var(--bs-primary-rgb), 0.02)) !important;
    border-bottom: 1px solid var(--qc-border-color, rgba(15, 23, 42, 0.1));
}

.admin-card-body {
    background: transparent;
}

.admin-page-header-actions .btn {
    white-space: nowrap;
    border-radius: var(--qc-radius-sm, 0.35rem);
    box-shadow: none;
}

.admin-content .card-header {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

.admin-content .card-body {
    padding: 0.85rem;
}

.admin-content .btn {
    --bs-btn-font-size: var(--qc-font-size-sm, 0.8125rem);
}

.admin-content .btn-sm {
    --bs-btn-font-size: var(--qc-font-size-xs, 0.75rem);
}

.admin-content .form-control,
.admin-content .form-select {
    font-size: var(--qc-font-size-sm, 0.8125rem);
    min-height: calc(1.5em + 0.45rem + 2px);
    padding-top: 0.225rem;
    padding-bottom: 0.225rem;
}

.admin-content .form-control-sm,
.admin-content .form-select-sm {
    min-height: calc(1.5em + 0.3rem + 2px);
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
}

/* 表格基线：表头底色 / 行悬停统一走语义变量。
   此前媒体库用 --bs-tertiary-bg、主题模板用 #f1f5f9、审计日志用 emphasis 色、
   文章列表 hover 又是另一套 0.04，四者互不一致且部分不随主题变化。 */
.admin-content .table {
    --bs-table-hover-bg: var(--qc-row-hover);
    border-color: var(--qc-border-color, rgba(15, 23, 42, 0.12));
}

.admin-content .table thead th {
    background: var(--qc-head-bg);
    border-bottom-color: var(--qc-head-border);
}

.admin-content .table > :not(caption) > * > * {
    padding-top: 0.58rem;
    padding-bottom: 0.58rem;
}

.admin-content .input-group-text {
    background: rgba(var(--bs-primary-rgb), 0.06);
    border-color: rgba(var(--bs-primary-rgb), 0.2);
}

/* 插件管理列表 */
.admin-plugin-list-card .admin-plugin-table thead th {
    font-weight: 600;
    font-size: var(--qc-font-size-xs, 0.75rem);
}

.admin-plugin-list-card .admin-plugin-table tbody td {
    vertical-align: middle;
    font-size: var(--qc-font-size-sm, 0.8125rem);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* 操作列最小宽度（原为控制器内联 style="min-width:11rem"） */
.admin-plugin-table .col-actions {
    min-width: 11rem;
}

/* 评论插件：设置表单宽度 */
.admin-comment-settings-form {
    max-width: 640px;
}

/* 登录页（与后台同主题变量） */
.admin-login-page {
    min-height: 100vh;
    background: linear-gradient(
        155deg,
        rgba(var(--bs-primary-rgb), 0.08) 0%,
        var(--bs-body-bg) 42%,
        var(--bs-secondary-bg) 100%
    );
}

.admin-login-badge {
    width: 3.25rem;
    height: 3.25rem;
    color: #fff;
    background: linear-gradient(135deg, var(--bs-primary) 0%, rgba(var(--bs-primary-rgb), 0.85) 100%);
    box-shadow: 0 0.25rem 0.75rem rgba(var(--bs-primary-rgb), 0.35);
}

.admin-login-badge-img {
    width: 1.6rem;
    height: 1.6rem;
    display: block;
}

.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.media-card {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--qc-radius-md, 0.625rem);
    padding: 0.5rem;
    /* var(--bs-light) 属固定调色板色，不随 data-bs-theme 变化 → 暗色模式白底刺眼 */
    background: var(--bs-tertiary-bg);
}

.media-card-main {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.media-thumb-link {
    width: 96px;
    min-width: 96px;
    height: 72px;
    display: block;
    border-radius: var(--bs-border-radius-sm);
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
}

.media-card img {
    max-width: 100%;
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
    margin: 0;
}

.media-grid.media-fit-cover .media-card img {
    object-fit: cover;
    background: transparent;
}

.media-grid.media-fit-contain .media-card img {
    object-fit: contain;
    background: var(--bs-tertiary-bg);
}

.media-meta {
    font-size: var(--qc-font-size-sm, 0.8125rem);
    word-break: break-all;
    margin-bottom: 0;
    color: var(--bs-secondary-color);
    flex: 1;
    min-width: 0;
}

.media-meta > div + div {
    margin-top: 0.2rem;
}

.media-meta code {
    background: var(--bs-tertiary-bg);
    padding: 0.125rem 0.25rem;
    border-radius: var(--bs-border-radius-sm);
}

.media-list-table .table > :not(caption) > * > * {
    vertical-align: middle;
}

.media-list-table .table thead th {
    white-space: nowrap;
    background: var(--qc-head-bg);
}

.media-list-thumb-link {
    width: 76px;
    height: 76px;
    display: inline-block;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
    overflow: hidden;
    background: var(--bs-tertiary-bg);
}

button.media-list-thumb-link {
    padding: 0;
}

.media-list-thumb {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.media-list-table.media-fit-cover .media-list-thumb {
    object-fit: cover;
}

.media-list-table.media-fit-contain .media-list-thumb {
    object-fit: contain;
    background: var(--bs-tertiary-bg);
}

.media-classic-edit-btn {
    display: block;
    width: 100%;
    border: 0;
    padding: 0;
    background: transparent;
}

.media-editor-stage {
    width: 100%;
    height: 65vh;
    min-height: 420px;
    max-height: 70vh;
    padding: 10px;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    position: relative;
}

.media-editor-cropper-root {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

/* Cropper.js 兜底：强制裁剪界面填满根节点，避免遮罩/画布视觉越界 */
.media-editor-cropper-root .cropper-container {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
}

.media-editor-cropper-root .cropper-canvas,
.media-editor-cropper-root .cropper-modal,
.media-editor-cropper-root .cropper-view-box,
.media-editor-cropper-root .cropper-crop-box {
    max-width: 100%;
    max-height: 100%;
}

.media-editor-stage img {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

.media-editor-stage .cropper-container {
    /* 防止 cropper 容器在弹窗滚动/重排时出现越界渲染 */
    overflow: hidden;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

.media-editor-overlay-watermark {
    position: absolute;
    left: 14px;
    top: 12px;
    right: auto;
    bottom: auto;
    z-index: 3;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    pointer-events: auto;
    cursor: grab;
    user-select: none;
    display: none;
    white-space: nowrap;
}

.media-editor-overlay-size {
    position: absolute;
    left: 12px;
    bottom: 10px;
    z-index: 3;
    font-size: var(--qc-font-size-sm, 0.8125rem);
    color: #fff;
    background: rgba(0, 0, 0, 0.42);
    border-radius: var(--qc-radius-sm, 0.35rem);
    padding: 0.1rem 0.4rem;
    pointer-events: none;
}

/* 媒体选择器 iframe 内 */
.admin-media-picker-page .admin-media-pick-item {
    cursor: pointer;
    transition: box-shadow var(--qc-transition-fast, 0.15s ease),
        transform var(--qc-transition-fast, 0.15s ease);
}

.admin-media-picker-page .admin-media-pick-item:hover {
    box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.12);
}

.admin-media-picker-page .admin-media-pick-item.is-selected {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.25);
}

.admin-media-picker-page .admin-media-pick-item:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.admin-media-picker-toolbar {
    z-index: 2;
}

.admin-card-body > h2:first-child,
.admin-card-body > h3:first-child {
    margin-top: 0;
}

/* =====================================================================
   媒体库列表列宽 / 全局确认弹窗图标 / 栏目行内编辑 / 侧栏选项面板
   以下规则原为控制器与 layout.html 内的内联 <style>、style="…"，
   按去内联化外移到此处，**数值/颜色保持不变**。
   ===================================================================== */
.media-list-table .col-check {
    width: 44px;
}
.media-list-table .col-thumb {
    width: 96px;
}
.media-list-table .col-dims,
.media-list-table .col-size {
    width: 110px;
}
.media-list-table .col-uploader {
    width: 140px;
}
.media-list-table .col-uploaded-at {
    width: 160px;
}
.media-list-table .col-refs,
.media-list-table .col-actions {
    width: 90px;
}

/* 全局确认弹窗：标题图标圆底 */
.qc-confirm-modal-icon-wrap {
    width: 1.75rem;
    height: 1.75rem;
    background: rgba(var(--bs-primary-rgb), 0.12);
}

/* 栏目管理：行内编辑（展开按钮 + 行内字段布局）
   2026-10-02 统一：原为 slate/indigo/sky 三套互不相干的硬编码色，
   与后台主题色（blue/emerald/slate）完全脱节，暗色模式下亦刺眼；
   改走主色语义变量，四套主题与明暗模式自动跟随。 */
.admin-cat-toggle {
    width: 28px;
    height: 28px;
    line-height: 1;
    padding: 0;
    border-radius: var(--qc-radius-sm, 0.35rem);
    border: 1px solid var(--qc-border-color, rgba(15, 23, 42, 0.12));
    background: var(--qc-surface-soft, rgba(15, 23, 42, 0.04));
    color: var(--bs-body-color);
    font-weight: 700;
    transition: color var(--qc-transition-fast, 0.15s ease),
        background-color var(--qc-transition-fast, 0.15s ease),
        border-color var(--qc-transition-fast, 0.15s ease);
}
.admin-cat-toggle:hover {
    background: var(--qc-surface-hover);
    border-color: rgba(var(--bs-primary-rgb), 0.45);
    color: var(--bs-primary);
}
.admin-cat-toggle.is-expanded {
    background: var(--qc-row-hover-strong);
    border-color: rgba(var(--bs-primary-rgb), 0.5);
    color: var(--bs-primary);
}
.admin-category-row-line {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    overflow-x: auto;
}
.admin-category-row-line .form-control,
.admin-category-row-line .form-select {
    min-width: 0;
}
.admin-category-field-sort .form-control {
    min-width: 5.5rem;
}
.admin-category-field-name {
    flex: 1 1 7rem;
    min-width: 6rem;
    max-width: 11rem;
}
.admin-category-field-parent {
    flex: 1 1 9rem;
    min-width: 7.5rem;
    max-width: 13rem;
}
.admin-category-field-sort {
    flex: 0 0 5.75rem;
    width: 5.75rem;
}
.admin-category-field-status {
    flex: 0 0 5.25rem;
    width: 5.25rem;
}
.admin-category-field-submission {
    flex: 0 0 7.5rem;
    width: 7.5rem;
}
.admin-category-row-actions {
    flex: 0 0 auto;
    margin-left: auto;
}
@media (max-width: 991.98px) {
    .admin-category-row-line {
        flex-wrap: wrap;
    }
    .admin-category-row-actions {
        margin-left: 0;
        width: 100%;
        justify-content: flex-end;
        display: flex;
    }
}

/* 侧栏选项面板：展开/收起过渡 */
.qc-screen-options-panel {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    overflow: hidden;
    pointer-events: none;
    transition: max-height var(--qc-transition-normal, 0.2s ease),
        opacity var(--qc-transition-fast, 0.15s ease),
        transform var(--qc-transition-normal, 0.2s ease),
        padding-top var(--qc-transition-fast, 0.15s ease),
        padding-bottom var(--qc-transition-fast, 0.15s ease),
        margin-top var(--qc-transition-fast, 0.15s ease);
    margin-top: 0;
}
.qc-screen-options-panel.qc-open {
    max-height: 260px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    margin-top: 0.35rem;
}

/* =====================================================================
   站点设置 / 栏目 / 订阅后台 / 主题模板手册
   以下规则原为控制器内的 style="…" 与内联 <style>，
   按去内联化外移到此处，**数值/颜色保持不变**。
   ===================================================================== */
.qc-settings-table .col-desc {
    width: 220px;
}
.qc-settings-table .col-var {
    width: 160px;
}

/* 栏目：图片预览 */
.qc-category-image-preview {
    width: 160px;
    height: 96px;
    object-fit: cover;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--qc-radius-md, 0.625rem);
    display: block;
    background: var(--bs-tertiary-bg);
}

/* 批量标题字段最小宽度 */
.qc-ct-title-field {
    min-width: 260px;
}

/* 回收站清空：确认词输入框最大宽度（原为内联 style="max-width:180px"） */
.qc-trash-confirm-input {
    max-width: 180px;
}

/* 订阅（Newsletter）后台 */
/* 可点击的 <summary>（原为内联 style="cursor:pointer;user-select:none"） */
.qc-summary-clickable {
    cursor: pointer;
    user-select: none;
}
.qc-newsletter-limit-input {
    width: 90px;
}
.newsletter-template-preview {
    width: 82%;
    max-width: 360px;
    height: 220px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--qc-radius-sm, 0.35rem);
    background: var(--bs-tertiary-bg);
}
.newsletter-template-frame {
    width: 680px;
    height: 1200px;
    transform-origin: top left;
    border: 0;
    pointer-events: none;
}

/* 主题模板手册页（原为 AdminThemeTemplateController 内联 <style>）
   2026-10-02 统一：硬编码 #0d6efd / #fffbeb / #e2e8f0 不随后台主题与明暗模式变化，
   改走语义变量；13px / 12px 归入字号令牌（0.8125rem / 0.75rem，数值等价）。 */
.theme-tpl-manual .manual-toc .list-group-item {
    border-left: 3px solid transparent;
    padding: 0.45rem 0.65rem;
    font-size: var(--qc-font-size-sm, 0.8125rem);
}
.theme-tpl-manual .manual-toc .list-group-item.active {
    border-left-color: var(--bs-primary);
    font-weight: 600;
}
.theme-tpl-manual .manual-toc .list-group-item-action:hover {
    background: var(--qc-row-hover);
}
.theme-tpl-manual pre.manual-code {
    font-size: var(--qc-font-size-xs, 0.75rem);
    background: var(--qc-surface-soft, rgba(15, 23, 42, 0.04));
    border: 1px solid var(--qc-border-color, rgba(15, 23, 42, 0.12));
    border-radius: var(--qc-radius-sm, 0.35rem);
    padding: 0.65rem 0.85rem;
    white-space: pre-wrap;
    margin-bottom: 0.75rem;
}

/* 手册目录吸顶与滚动（原为内联 style） */
.qc-manual-toc {
    top: 0.75rem;
    max-height: calc(100vh - 1.5rem);
    overflow: auto;
}

/* 历史备份下拉宽度（原为内联 style） */
.qc-backup-select {
    width: auto;
    min-width: 11rem;
}

/* 数据库备份页细粒度打磨 */
.admin-backup-page .admin-backup-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}
.admin-backup-page .admin-backup-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.admin-backup-page .admin-backup-filter {
    min-width: 9rem;
    width: 10rem;
}
.admin-backup-page .admin-backup-table-panel {
    max-height: 16rem;
    overflow: auto;
    background: var(--qc-surface-muted, rgba(15, 23, 42, 0.02));
}
.admin-backup-page .backup-table-group > summary {
    cursor: pointer;
    list-style: none;
    padding: 0.15rem 0.25rem;
    border-radius: var(--qc-radius-sm, 0.35rem);
}
.admin-backup-page .backup-table-group > summary::-webkit-details-marker {
    display: none;
}
.admin-backup-page .backup-table-group > summary::before {
    content: "▸";
    display: inline-block;
    width: 0.9rem;
    color: var(--bs-secondary-color);
    transition: transform var(--qc-transition-fast, 0.15s ease);
}
.admin-backup-page .backup-table-group[open] > summary::before {
    transform: rotate(90deg);
}
.admin-backup-page .backup-table-row {
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
}
.admin-backup-page .admin-backup-noise-badge {
    font-size: var(--qc-font-size-2xs, 0.6875rem);
    vertical-align: middle;
}
.admin-backup-page .admin-backup-schedule-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.25rem;
    padding: 0.55rem 0.75rem;
    border: 1px dashed var(--qc-border-color, rgba(15, 23, 42, 0.14));
    border-radius: var(--qc-radius-sm, 0.35rem);
    background: rgba(var(--bs-primary-rgb), 0.03);
}
.admin-backup-page .admin-backup-hour-presets {
    flex-wrap: wrap;
}
.admin-backup-page .admin-backup-schedule-actions {
    padding-top: 0.25rem;
    border-top: 1px solid var(--qc-border-color, rgba(15, 23, 42, 0.08));
}
.admin-backup-page .admin-backup-empty {
    background: rgba(var(--bs-secondary-rgb), 0.04);
}
.admin-backup-page .admin-backup-row-prerestore {
    background: rgba(var(--bs-warning-rgb), 0.06);
}
.admin-backup-page #adminBackupInventory .btn-group .btn {
    font-size: var(--qc-font-size-xs, 0.75rem);
}
@media (max-width: 575.98px) {
    .admin-backup-page .admin-backup-filter {
        width: 100%;
        min-width: 0;
    }
}

/* =====================================================================
   主题模板管理（后台在线编辑）
   以下规则原为 AdminThemeTemplateController 内的内联 <style> 与 style="…"，
   按去内联化外移到此处，**数值/颜色保持不变**。
   ===================================================================== */
.theme-tpl-mgmt .tpl-toolbar {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--qc-radius-md, 0.625rem);
    background: linear-gradient(180deg, var(--qc-surface-soft, rgba(15, 23, 42, 0.04)), transparent 100%);
    padding: 0.55rem 0.85rem;
    margin-bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.theme-tpl-mgmt .tpl-breadcrumb {
    font-size: var(--qc-font-size-sm, 0.8125rem);
    color: var(--bs-secondary-color);
    margin: 0;
}
.theme-tpl-mgmt .tpl-breadcrumb strong {
    color: var(--bs-body-color);
}
.theme-tpl-mgmt .table {
    font-size: var(--qc-font-size-sm, 0.8125rem);
}
.theme-tpl-mgmt .table thead th {
    background: var(--qc-head-bg);
    border-bottom-color: var(--qc-head-border);
    border-bottom-width: 1px;
}
.theme-tpl-mgmt .table tbody tr:hover {
    background: var(--qc-row-hover);
}

/* 列宽（原为 th 内联 style="width/min-width"） */
.theme-tpl-mgmt .col-modified {
    width: 11rem;
}
.theme-tpl-mgmt .col-actions {
    min-width: 9rem;
}

/* 模板手册：快速参考表（原为 table/td 内联 style） */
.qc-quick-ref-table {
    font-size: var(--qc-font-size-sm, 0.8125rem);
}
.qc-quick-ref-table .col-name {
    min-width: 7rem;
}
.qc-quick-ref-table .col-required {
    width: 4rem;
}
.qc-quick-ref-table .col-default {
    width: 7rem;
}
.qc-quick-ref-table .col-label {
    width: 12rem;
}

/* 积分规则表：数值输入列宽（原为 td 内联 style="width:…"） */
.qc-points-rules-table .col-delta {
    width: 7rem;
}
.qc-points-rules-table .col-cap {
    width: 8rem;
}

/* 媒体库：搜索框 / 上传控件宽度（原为内联 style="min-width:…;max-width:…"） */
.qc-media-search-input {
    min-width: 14rem;
}
.qc-media-upload-input {
    min-width: 14rem;
    max-width: 18rem;
}

/* 顶栏：移动端品牌名截断最大宽度（原为 layout.html 内联 style="max-width: 10rem"） */
.admin-brand-title-sm {
    max-width: 10rem;
}

/* =====================================================================
   内容列表表格：标签 / 专题 / 单页
   列宽沿用「作用域语义类」约定（见 .admin-article-table .col-*）。
   原为控制器内联 style="width:…"，按去内联化外移到此处，**数值保持不变**。
   ===================================================================== */
.admin-tag-table .col-count {
    width: 7rem;
}
.admin-tag-table .col-rename {
    min-width: 14rem;
}

.admin-special-table .col-id {
    width: 4rem;
}
.admin-special-table .col-slug {
    width: 10rem;
}
.admin-special-table .col-status {
    width: 6rem;
}
.admin-special-table .col-created,
.admin-special-table .col-updated {
    width: 11rem;
}
.admin-special-table .col-frontend {
    width: 10rem;
}
.admin-special-table .col-actions {
    width: 12rem;
}

.admin-page-table .col-id {
    width: 4rem;
}
.admin-page-table .col-published {
    width: 8rem;
}
.admin-page-table .col-slug {
    width: 10rem;
}
.admin-page-table .col-stem {
    width: 12rem;
}
.admin-page-table .col-compiled {
    width: 10rem;
}
.admin-page-table .col-updated {
    width: 11rem;
}
.admin-page-table .col-actions {
    width: 12rem;
}

/* 文章管理：类 WP 列表 + 表格 */
.admin-article-manage {
    max-width: 100%;
}

.admin-article-heading .btn-group .btn.active {
    background-color: var(--bs-secondary-bg);
    font-weight: 600;
}

.admin-article-nav-tabs {
    border-bottom: 1px solid var(--bs-border-color);
}

.admin-article-nav-tabs .nav-link {
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: var(--qc-radius-sm, 0.35rem) var(--qc-radius-sm, 0.35rem) 0 0;
    padding: 0.375rem 0.7rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    font-size: var(--qc-font-size-sm, 0.8125rem);
    transition: color var(--qc-transition-fast, 0.15s ease),
        border-color var(--qc-transition-fast, 0.15s ease);
}

.admin-article-nav-tabs .nav-link:hover {
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

.admin-article-nav-tabs .nav-link.active {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    border-bottom-color: var(--bs-body-bg);
    margin-bottom: -1px;
    font-weight: 600;
}

.admin-article-create .card-header {
    font-size: var(--qc-font-size-base, 0.875rem);
}

.admin-article-create-page .admin-article-create textarea[name="content"] {
    min-height: 18rem;
}

.admin-tinymce-wrap .tox-tinymce {
    min-height: 20rem;
}

.admin-ckeditor-wrap .ck-editor__editable {
    min-height: 18rem;
}

/* CKEditor 5 右下角 “Powered by” 角标（.ck-powered-by-balloon）。商业授权可在页面设置 window.__qingcmsCkeditorLicenseKey 以官方方式关闭角标。 */
.admin-ckeditor-wrap .ck-powered-by-balloon {
    display: none !important;
}

.admin-article-toolbar-wrap {
    border-radius: var(--qc-radius-sm, 0.35rem) var(--qc-radius-sm, 0.35rem) 0 0;
    border-bottom: none;
}

.admin-article-table-wrap {
    border: 1px solid var(--bs-border-color);
    border-radius: 0 0 var(--qc-radius-sm, 0.35rem) var(--qc-radius-sm, 0.35rem);
    background: var(--bs-body-bg);
}

.admin-article-toolbar-wrap + .admin-article-table-wrap {
    border-top: 1px solid var(--bs-border-color);
    margin-top: -1px;
    border-radius: 0 0 var(--qc-radius-sm, 0.35rem) var(--qc-radius-sm, 0.35rem);
}

.admin-article-table {
    font-size: var(--qc-font-size-sm, 0.8125rem);
}

.admin-article-table thead th {
    font-weight: 600;
    font-size: var(--qc-font-size-xs, 0.75rem);
    text-transform: none;
    letter-spacing: 0;
    border-bottom-width: 1px;
}

.admin-article-table .col-title {
    min-width: 200px;
}

.admin-article-table .col-check {
    width: 2.5rem;
}

.admin-article-table .col-cat {
    width: 10%;
}

.admin-article-table .col-tags {
    width: 14%;
}

.admin-article-table .col-date {
    width: 11%;
    white-space: nowrap;
}

.admin-article-table .col-views {
    width: 4.5rem;
    white-space: nowrap;
}

.admin-article-table .col-status {
    width: 5.5rem;
}

.admin-article-table .col-permission {
    width: 7rem;
    white-space: nowrap;
}

.admin-article-table .col-actions {
    width: 7rem;
}

.admin-article-table .col-time {
    width: 11rem;
}

.admin-article-table .col-cat,
.admin-article-table .col-author,
.admin-article-table .col-date,
.admin-article-table .col-views,
.admin-article-table .col-status,
.admin-article-table .col-permission,
.admin-article-table .col-actions {
    text-align: center;
}

.admin-article-table tbody td:nth-child(4),
.admin-article-table tbody td:nth-child(5),
.admin-article-table tbody td:nth-child(6),
.admin-article-table tbody td:nth-child(7),
.admin-article-table tbody td:nth-child(8),
.admin-article-table tbody td:nth-child(9),
.admin-article-table tbody td:nth-child(10) {
    text-align: center;
}

/* 2026-10-02 统一：原为硬编码 #111（暗色模式下近乎不可见）与 #dc3545，
   改走 Bootstrap 语义色变量，明暗模式自动适配。 */
.article-title-cell .article-title-text {
    display: inline-block;
    line-height: 1.35;
    color: var(--bs-body-color);
}

.article-title-cell .article-title-text:hover,
.article-title-cell .article-title-text:focus {
    color: var(--bs-danger);
}

.article-row-actions {
    font-size: var(--qc-font-size-xs, 0.75rem);
}

.admin-article-row:hover {
    --bs-table-hover-bg: var(--qc-row-hover);
}

.admin-article-edit-form textarea {
    min-height: 6rem;
}

.admin-article-trash-hint {
    margin-bottom: 0.75rem;
}

@media (max-width: 991.98px) {
    .admin-article-table .col-tags,
    .admin-article-table .col-cat {
        min-width: 5rem;
    }
}

/* 栏目管理：行内编辑布局微调 */
.admin-category-row .form-control-sm,
.admin-category-row .form-select-sm {
    min-height: calc(1.5em + 0.45rem + 2px);
}

.admin-category-row .badge {
    font-weight: 500;
}

/* 栏目管理：鼠标经过整行高亮（包含按钮区），并兼容层级底色（inline style）
   行内编辑行需要比普通表格行更明确的反馈，故用 --qc-row-hover-strong 而非 --qc-row-hover。 */
.admin-category-row {
    transition: background-color var(--qc-transition-fast, 0.15s ease),
        box-shadow var(--qc-transition-fast, 0.15s ease);
}

.admin-category-row:hover,
.admin-category-row:focus-within {
    background-color: var(--qc-row-hover-strong) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), 0.32);
}

@media (min-width: 992px) {
    .admin-category-row .btn {
        white-space: nowrap;
    }
}

/* Admin: user avatar picker (create/edit) */
/* 尺寸与圆角原为按钮内联 style="…"；注意 display 以实际生效的 flex 为准
   （内联样式此前覆盖掉这里的 inline-flex），合并时保留 flex 以免布局变化。 */
.admin-user-avatar-trigger {
    width: 56px;
    height: 56px;
    padding: 0;
    border: 0;
    border-radius: var(--qc-radius-pill);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-user-avatar-preview-wrapper {
    width: 56px;
    height: 56px;
    border-radius: var(--qc-radius-pill);
    border: 1px dashed var(--bs-border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    user-select: none;
}

.admin-user-avatar-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.admin-user-avatar-preview-ph {
    font-size: 1.9rem;
    line-height: 1;
    color: var(--bs-secondary-color);
    font-weight: 700;
}

/* =====================================================================
   QingCMS 后台美化提升（2026-08-15）
   说明：以下均为「追加式」增强，不修改既有规则，覆盖安全。
   主题变量（--bs-primary 等）随 data-admin-theme 自动切换。
   2026-10-03：品牌绿（green）主题风格已清除，保留灰/蓝/翠。
   ===================================================================== */

/* ---- 1. 登录页精致化 ---- */
.admin-login-page {
    position: relative;
    overflow: hidden;
}

.admin-login-page::before,
.admin-login-page::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(64px);
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}

.admin-login-page::before {
    width: 440px;
    height: 440px;
    top: -140px;
    right: -90px;
    background: radial-gradient(circle at center, rgba(var(--bs-primary-rgb), 0.5), transparent 70%);
}

.admin-login-page::after {
    width: 380px;
    height: 380px;
    bottom: -140px;
    left: -70px;
    background: radial-gradient(circle at center, rgba(var(--bs-primary-rgb), 0.32), transparent 70%);
}

.admin-login-page .container {
    position: relative;
    z-index: 1;
}

/* 登录卡片顶部品牌渐变条 */
.admin-login-page .card {
    position: relative;
    border-top: 4px solid var(--bs-primary) !important;
}

.admin-login-page .card::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--bs-primary), rgba(var(--bs-primary-rgb), 0.55));
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

/* 输入框聚焦微动效 */
.admin-login-page .form-control {
    transition: border-color var(--qc-transition-fast, 0.15s ease),
        box-shadow var(--qc-transition-fast, 0.15s ease);
}

.admin-login-page .form-control:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.18);
}

/* 登录按钮渐变 + 浮起光晕 */
.admin-login-page .btn-primary {
    background-image: linear-gradient(135deg, var(--bs-primary), rgba(var(--bs-primary-rgb), 0.82));
    border-color: transparent;
    box-shadow: 0 10px 24px rgba(var(--bs-primary-rgb), 0.36);
    transition: transform var(--qc-transition-fast, 0.15s ease),
        box-shadow var(--qc-transition-fast, 0.15s ease),
        filter var(--qc-transition-fast, 0.15s ease);
}

.admin-login-page .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(var(--bs-primary-rgb), 0.44);
    filter: brightness(1.03);
}

.admin-login-page .btn-primary:active {
    transform: translateY(0);
}

/* 错误提示入场动画 */
.admin-login-page .alert {
    animation: qy-fade-down 0.3s ease both;
}

@keyframes qy-fade-down {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
}

/* ---- 3. 内页微交互与组件增强 ---- */
/* 页面卡片入场淡入。
   注意(2026-08-16 修复)：只能做透明度淡入，不能做位移/缩放——
   transform 动画会在动画结束/fill 后残留非 none 值（matrix(1,0,0,1,0,0)），
   创建 containing block + stacking context，使卡片内部 position:fixed 的
   Bootstrap modal 相对卡片定位且 z-index(1055) 被困在卡片上下文内，
   被 body 级 .modal-backdrop(1050) 覆盖 → 弹窗内容全部无法点击。 */
@keyframes qy-card-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.admin-page-card {
    animation: qy-card-in 0.3s ease;
}

/* 顶栏 brand 悬停微反馈 */
.admin-brand-mark {
    transition: transform 0.15s ease;
}

.admin-topnav .navbar-brand:hover .admin-brand-mark {
    transform: scale(1.06) rotate(-3deg);
}

/* primary 按钮渐变 + 浮起（覆盖 Bootstrap 默认纯色） */
.admin-content .btn-primary {
    background-image: linear-gradient(135deg, var(--bs-primary), rgba(var(--bs-primary-rgb), 0.82));
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(var(--bs-primary-rgb), 0.28);
    transition: transform var(--qc-transition-fast, 0.15s ease),
        box-shadow var(--qc-transition-fast, 0.15s ease),
        filter var(--qc-transition-fast, 0.15s ease);
}

.admin-content .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(var(--bs-primary-rgb), 0.36);
    filter: brightness(1.03);
}

.admin-content .btn-primary:active {
    transform: translateY(0);
}

/* 表单聚焦环品牌色 + 平滑过渡 */
.admin-content .form-control,
.admin-content .form-select {
    transition: border-color var(--qc-transition-fast, 0.15s ease),
        box-shadow var(--qc-transition-fast, 0.15s ease);
}

.admin-content .form-control:focus,
.admin-content .form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.18);
}

/* 自定义滚动条（侧栏 / 主区 / 卡片体） */
.admin-sidebar-nav,
.admin-main,
.admin-card-body {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--bs-primary-rgb), 0.3) transparent;
}

.admin-sidebar-nav::-webkit-scrollbar,
.admin-content ::-webkit-scrollbar,
.admin-card-body::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.admin-sidebar-nav::-webkit-scrollbar-thumb,
.admin-content ::-webkit-scrollbar-thumb,
.admin-card-body::-webkit-scrollbar-thumb {
    background: rgba(var(--bs-primary-rgb), 0.28);
    border-radius: var(--qc-radius-pill);
}

.admin-sidebar-nav::-webkit-scrollbar-thumb:hover,
.admin-content ::-webkit-scrollbar-thumb:hover,
.admin-card-body::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--bs-primary-rgb), 0.45);
}

/* 状态徽章统一精致（圆角 + 轻微层级） */
.admin-content .badge {
    font-weight: 500;
    letter-spacing: 0.02em;
}

.admin-content .badge.text-bg-success,
.admin-content .badge.text-bg-primary,
.admin-content .badge.text-bg-danger,
.admin-content .badge.text-bg-warning,
.admin-content .badge.text-bg-secondary,
.admin-content .badge.text-bg-info {
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}

/* 侧栏 active 项左侧指示条 */
.admin-sidebar .admin-sidebar-nav .nav-link.active,
.admin-offcanvas .admin-sidebar-nav .nav-link.active {
    position: relative;
}

.admin-sidebar .admin-sidebar-nav .nav-link.active::before,
.admin-offcanvas .admin-sidebar-nav .nav-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--bs-primary);
}

/* 表格行 hover 更柔和（保留既有底色，补过渡） */
.admin-content .table > tbody > tr {
    transition: background-color var(--qc-transition-fast, 0.15s ease);
}

/* 顶栏操作按钮悬停浮起 */
.admin-page-header-actions .btn {
    transition: transform var(--qc-transition-fast, 0.15s ease),
        box-shadow var(--qc-transition-fast, 0.15s ease);
}

.admin-page-header-actions .btn:hover {
    transform: translateY(-1px);
}

/* =====================================================================
   控制台 / 数据展示组件（qc-*）
   ---------------------------------------------------------------------
   2026-09-10：由 dashboard_body.html 内联 <style> 迁移至此。
   原先内联导致：无法被浏览器缓存、其它页面无法复用、与 admin-* 命名割裂。
   迁移后全局可用，并纳入统一设计系统。
   ===================================================================== */
/* ── 控制台专属样式 ─────────────────────────────────────── */

/* 欢迎区 */
.qc-dash-hero {
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg,
        rgba(var(--bs-primary-rgb), 0.1) 0%,
        rgba(var(--bs-primary-rgb), 0.04) 100%);
    border-radius: var(--qc-radius-lg, 0.875rem);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.2);
}
.qc-dash-welcome {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    color: var(--bs-body-color);
}
.qc-dash-version-update {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-left: 0.15rem;
    border-radius: 50%;
    color: var(--bs-secondary-color, #6c757d);
    text-decoration: none;
    line-height: 1;
}
.qc-dash-version-update:hover,
.qc-dash-version-update:focus-visible {
    background: rgba(108, 117, 125, 0.12);
    color: var(--bs-secondary-color, #6c757d);
}
.qc-dash-version-update[hidden] {
    display: none !important;
}
.qc-dash-version-update.is-update,
.qc-dash-version-update.is-update:hover,
.qc-dash-version-update.is-update:focus-visible {
    color: #fff;
    background: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.35);
}

/* 升级提示 */
.qc-dash-alert-upgrade {
    background: linear-gradient(135deg,
        rgba(var(--bs-primary-rgb), 0.1) 0%,
        rgba(var(--bs-primary-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.25) !important;
    padding: 1rem 1.25rem;
}
.qc-dash-alert-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--qc-radius-md, 0.625rem);
    background: rgba(var(--bs-primary-rgb), 0.15);
    color: var(--bs-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.qc-dash-alert-upgrade-success {
    background: linear-gradient(135deg,
        rgba(var(--bs-success-rgb), 0.12) 0%,
        rgba(var(--bs-success-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--bs-success-rgb), 0.28) !important;
}
.qc-dash-alert-upgrade-success .qc-dash-alert-icon {
    background: rgba(var(--bs-success-rgb), 0.18);
    color: var(--bs-success);
}

/* ── 统计卡片 ── */
.qc-stat-card {
    position: relative;
    background: var(--qc-surface);
    /* 加深边框，让卡片轮廓清晰 */
    border: 1.5px solid var(--qc-border-color, rgba(15, 23, 42, 0.12));
    border-radius: var(--qc-radius-md, 0.625rem);
    padding: 0.6rem 0.875rem;
    transition: box-shadow var(--qc-transition-normal, 0.2s ease),
        transform var(--qc-transition-normal, 0.2s ease),
        border-color var(--qc-transition-normal, 0.2s ease);
    overflow: hidden;
    /* 终态即默认值（opacity:1 / transform:none），
       这样在 prefers-reduced-motion 下禁用动画时卡片依然可见 */
    animation: qcStatIn 0.3s ease;
}
.qc-stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--bs-primary), rgba(var(--bs-primary-rgb), 0.35));
    border-radius: var(--qc-radius-md, 0.625rem) var(--qc-radius-md, 0.625rem) 0 0;
    opacity: 0;
    transition: opacity var(--qc-transition-normal, 0.2s ease);
}
.qc-stat-card:hover {
    box-shadow: 0 4px 16px rgba(var(--bs-primary-rgb), 0.18);
    transform: translateY(-2px);
    border-color: rgba(var(--bs-primary-rgb), 0.4);
}
.qc-stat-card:hover::before { opacity: 1; }
.qc-stat-card-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}
.qc-stat-icon {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--qc-radius-sm, 0.35rem);
    /* 图标背景加深，与白色背景形成对比 */
    background: rgba(var(--bs-primary-rgb), 0.15);
    color: var(--bs-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--qc-font-size-2xs, 0.6875rem);
    flex-shrink: 0;
}
.qc-stat-num {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
    /* 数字用主色，视觉重量强，一眼抓到 */
    color: var(--bs-primary);
    letter-spacing: -0.02em;
    margin-top: 0.35rem;
}
.qc-stat-label {
    font-size: var(--qc-font-size-2xs, 0.6875rem);
    /* 标签用正文色而非次要色，提升可读性 */
    color: var(--bs-body-color);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.75;
}
/* 入场动画 */
@keyframes qcStatIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.qc-stat-col:nth-child(1)  .qc-stat-card { animation-delay: 0.03s; }
.qc-stat-col:nth-child(2)  .qc-stat-card { animation-delay: 0.06s; }
.qc-stat-col:nth-child(3)  .qc-stat-card { animation-delay: 0.09s; }
.qc-stat-col:nth-child(4)  .qc-stat-card { animation-delay: 0.12s; }
.qc-stat-col:nth-child(5)  .qc-stat-card { animation-delay: 0.15s; }
.qc-stat-col:nth-child(6)  .qc-stat-card { animation-delay: 0.18s; }
.qc-stat-col:nth-child(7)  .qc-stat-card { animation-delay: 0.21s; }
.qc-stat-col:nth-child(8)  .qc-stat-card { animation-delay: 0.24s; }
.qc-stat-col:nth-child(9)  .qc-stat-card { animation-delay: 0.27s; }
.qc-stat-col:nth-child(10) .qc-stat-card { animation-delay: 0.30s; }

/* ── 通用面板 ── */
.qc-panel {
    background: var(--qc-surface);
    /* 加深面板边框 */
    border: 1.5px solid var(--qc-border-color, rgba(15, 23, 42, 0.12));
    border-radius: var(--qc-radius-lg, 0.875rem);
    overflow: hidden;
}
.qc-panel-header {
    padding: 0.75rem 1.25rem;
    font-size: var(--qc-font-size-sm, 0.8125rem);
    font-weight: 700;
    color: var(--bs-body-color);
    /* header 背景加深，与 body 形成明显分层 */
    border-bottom: 1px solid var(--qc-border-color, rgba(15, 23, 42, 0.12));
    background: var(--qc-surface-soft, rgba(15, 23, 42, 0.04));
    display: flex;
    align-items: center;
}
.qc-panel-body {
    padding: 1rem 1.25rem;
}
.qc-panel-body-todo {
    min-height: 7rem;
}

/* ── 待办徽章 ── */
.qc-todo-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.875rem;
    border-radius: var(--qc-radius-pill);
    font-size: var(--qc-font-size-sm, 0.8125rem);
    font-weight: 600;
    text-decoration: none;
    transition: opacity var(--qc-transition-fast, 0.15s ease),
        transform var(--qc-transition-fast, 0.15s ease),
        box-shadow var(--qc-transition-fast, 0.15s ease);
    border: 1.5px solid transparent;
}
.qc-todo-badge:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}
/* 加深 warning/danger 颜色，提升对比度 */
.qc-todo-warning {
    background: rgba(255, 193, 7, 0.18);
    color: #6d4c00;
    border-color: rgba(255, 193, 7, 0.5);
}
.qc-todo-danger {
    background: rgba(220, 53, 69, 0.14);
    color: #6b0f1a;
    border-color: rgba(220, 53, 69, 0.4);
}
.qc-todo-count {
    background: rgba(0,0,0,0.12);
    border-radius: var(--qc-radius-pill);
    padding: 0.1rem 0.45rem;
    font-size: var(--qc-font-size-xs, 0.75rem);
    font-weight: 700;
}

/* ── 趋势行 ── */
.qc-trend-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.875rem;
    /* 加深行背景，与面板白色背景形成对比 */
    background: var(--qc-surface-soft, rgba(15, 23, 42, 0.04));
    border: 1px solid var(--qc-border-color, rgba(15, 23, 42, 0.12));
    border-radius: var(--qc-radius-md, 0.625rem);
}
.qc-trend-label {
    font-size: var(--qc-font-size-sm, 0.8125rem);
    /* 标签用正文色，不用次要色 */
    color: var(--bs-body-color);
    font-weight: 500;
    opacity: 0.8;
}
.qc-trend-value {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--bs-primary);
}
.qc-trend-delta {
    font-size: var(--qc-font-size-xs, 0.75rem);
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: var(--qc-radius-pill);
}
/* 加深环比颜色背景 */
.qc-trend-delta.text-success { background: rgba(25,135,84,0.15); color: #0d6832 !important; }
.qc-trend-delta.text-danger  { background: rgba(220,53,69,0.15);  color: #8b1a24 !important; }
.qc-trend-delta.text-muted   { background: var(--qc-surface-soft, rgba(15, 23, 42, 0.04)); }
.qc-trend-sub {
    font-size: var(--qc-font-size-2xs, 0.6875rem);
    color: var(--bs-body-color);
    opacity: 0.55;
    white-space: nowrap;
}

/* ── 分区标题 ── */
.qc-section-title {
    font-size: var(--qc-font-size-base, 0.875rem);
    font-weight: 700;
    color: var(--bs-body-color);
    display: flex;
    align-items: center;
}

/* ── 审计日志表格 ── */
.qc-audit-table {
    font-size: var(--qc-font-size-sm, 0.8125rem);
    margin: 0;
}
.qc-audit-table thead th {
    font-size: var(--qc-font-size-xs, 0.75rem);
    font-weight: 700;
    color: var(--bs-body-color);
    /* 表头背景加深，与行形成明显分层 */
    background: var(--qc-head-bg);
    border-bottom: 1px solid var(--qc-head-border);
    padding: 0.625rem 1rem;
    white-space: nowrap;
}
.qc-audit-table tbody td {
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--qc-border-color, rgba(15, 23, 42, 0.12));
    vertical-align: middle;
    color: var(--bs-body-color);
}
.qc-audit-table tbody tr:last-child td {
    border-bottom: none;
}
.qc-audit-table tbody tr:hover td {
    background: var(--qc-row-hover);
}
/* 时间和 IP 用次要色，动作和用户名用正文色，形成层次 */
.qc-audit-table .col-time,
.qc-audit-table .col-ip {
    color: var(--bs-secondary-color);
}
.qc-audit-user {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    color: var(--bs-body-color);
}
.qc-audit-user::before {
    content: '';
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--bs-primary);
    opacity: 0.7;
    flex-shrink: 0;
}

/* ── 运维监控 / 系统健康：扫描结果表格 ──
   列宽沿用「作用域语义类」约定（见 .admin-article-table .col-*）。
   原为 <th style="width:…"> 内联写法，按去内联化外移到此处，**数值保持不变**。 */
.qc-ops-scan-table .col-name {
    width: 28%;
}
.qc-ops-scan-table .col-status {
    width: 12%;
}
.qc-ops-trace-table .col-name {
    width: 26%;
}
.qc-ops-trace-table .col-status {
    width: 10%;
}
.qc-ops-trace-table .col-incident {
    width: 18%;
}

/* =====================================================================
   可访问性：减弱动效
   尊重系统「减少动态效果」偏好（WCAG 2.3.3 动画交互 / 2.2.2 暂停停止隐藏）
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    .qc-stat-card,
    .qc-todo-badge,
    .qc-panel,
    .admin-sidebar-nav .nav-link,
    .admin-sidebar-group-header,
    .admin-content .btn,
    .admin-top-actions .btn {
        animation: none !important;
        transition: none !important;
    }
    .qc-todo-badge:hover,
    .qc-stat-card:hover {
        transform: none !important;
    }
    html {
        scroll-behavior: auto !important;
    }
}

/* =====================================================================
   暗色模式补充
   Bootstrap 5.3 的 data-bs-theme="dark" 已处理绝大部分语义色，
   此处仅修正自定义渐变等少数无法自动适配的元素。
   ===================================================================== */
[data-bs-theme="dark"] .admin-topnav {
    background-image: linear-gradient(135deg,
        rgba(var(--bs-primary-rgb), 0.55),
        rgba(var(--bs-primary-rgb), 0.35));
}
[data-bs-theme="dark"] .qc-trend-delta.text-success {
    background: rgba(25, 135, 84, 0.22);
    color: #6ee7a8 !important;
}
[data-bs-theme="dark"] .qc-trend-delta.text-danger {
    background: rgba(220, 53, 69, 0.22);
    color: #f5a3ab !important;
}
[data-bs-theme="dark"] .qc-todo-warning {
    background: rgba(255, 193, 7, 0.20);
    color: #ffd966;
    border-color: rgba(255, 193, 7, 0.45);
}
[data-bs-theme="dark"] .qc-todo-danger {
    background: rgba(220, 53, 69, 0.20);
    color: #f5a3ab;
    border-color: rgba(220, 53, 69, 0.45);
}

/* =====================================================================
   状态组件：空状态 / 骨架屏
   ---------------------------------------------------------------------
   2026-09-10 新增。此前后台有 31 处「暂无…」文案各自手写，
   视觉与结构不统一；此处收敛为可复用组件，覆盖表格 / 卡片 / 搜索三类场景。
   ===================================================================== */

:root {
    --qc-skeleton-shine: rgba(255, 255, 255, 0.55);
}
[data-bs-theme="dark"] {
    --qc-skeleton-shine: rgba(255, 255, 255, 0.08);
}

/* ── 空状态 ── */
.qc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--qc-space-2, 0.5rem);
    padding: var(--qc-space-8, 2rem) var(--qc-space-4, 1rem);
    text-align: center;
    color: var(--bs-secondary-color);
}
.qc-empty-icon {
    font-size: 2rem;
    line-height: 1;
    opacity: 0.45;
}
.qc-empty-title {
    font-size: var(--qc-font-size-base, 0.875rem);
    font-weight: 500;
    color: var(--bs-body-color);
}
.qc-empty-desc {
    font-size: var(--qc-font-size-sm, 0.8125rem);
    max-width: 32rem;
}
.qc-empty-actions {
    margin-top: var(--qc-space-2, 0.5rem);
    display: flex;
    flex-wrap: wrap;
    gap: var(--qc-space-2, 0.5rem);
    justify-content: center;
}
/* 表格单元格内的紧凑空状态 */
.qc-empty-inline {
    padding: var(--qc-space-6, 1.5rem) var(--qc-space-4, 1rem);
}
/* 兼容既有写法 */
.qc-empty-state {
    text-align: center;
    padding: 1rem 0;
}

/* ── 骨架屏 ── */
.qc-skeleton {
    position: relative;
    overflow: hidden;
    background: var(--qc-surface-soft, rgba(15, 23, 42, 0.04));
    border-radius: var(--qc-radius-sm, 0.35rem);
}
.qc-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, var(--qc-skeleton-shine), transparent);
    animation: qcSkeleton 1.4s ease-in-out infinite;
}
@keyframes qcSkeleton {
    to { transform: translateX(100%); }
}
.qc-skeleton-text {
    height: 0.75rem;
    margin-bottom: var(--qc-space-2, 0.5rem);
}
.qc-skeleton-text:last-child {
    width: 60%;
}
.qc-skeleton-block {
    height: 5rem;
}
.qc-skeleton-row {
    height: 1.75rem;
    margin-bottom: var(--qc-space-2, 0.5rem);
}
/* 表格加载中的整行占位 */
table.qc-skeleton-table td {
    padding: var(--qc-space-3, 0.75rem) var(--qc-space-4, 1rem);
}

@media (prefers-reduced-motion: reduce) {
    .qc-skeleton::after {
        animation: none;
        opacity: 0.35;
        transform: none;
    }
}

/* =====================================================================
   表格空状态统一增强
   ---------------------------------------------------------------------
   后台有 11 处表格空提示行，class 组合一致（colspan + text-center + text-muted）。
   这里用纯 CSS 统一留白与图标，无需逐个改造控制器里的 HTML 字符串拼接。
   注意：图标 bi-inbox 通过 content 引用，扫描不到源码，
        已在 scripts/subset-admin-icons.py 的 EXTRA_ICONS 中登记，
        重新子集化字体时会被保留。
   ===================================================================== */
/* =====================================================================
   细节打磨（2026-09-22）
   ---------------------------------------------------------------------
   低风险「增强层」：仅微调焦点 / 悬停 / 圆角 / 阴影 / 表格与表单精致度，
   不改变既有布局与结构；颜色全部沿用主题令牌，四套后台主题自动适配。
   ===================================================================== */

:root {
    --qc-shadow-lg: 0 18px 40px rgba(15, 23, 42, 0.14), 0 4px 12px rgba(15, 23, 42, 0.08);
    --qc-focus-ring: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.22);
}

[data-bs-theme="dark"] {
    --qc-shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.40);
}

/* 1. 键盘焦点环（可达性 + 一致性） */
.admin-body a:focus-visible,
.admin-body button:focus-visible,
.admin-body .btn:focus-visible,
.admin-body input:focus-visible,
.admin-body select:focus-visible,
.admin-body textarea:focus-visible,
.admin-body [tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--qc-focus-ring);
}

/* 2. 文本选中色 */
.admin-body ::selection {
    background: rgba(var(--bs-primary-rgb), 0.22);
}

/* 3. 滚动条统一（含表格横向滚动区与移动端菜单） */
.admin-body,
.admin-content .table-responsive,
.admin-offcanvas .offcanvas-body {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--bs-primary-rgb), 0.30) transparent;
}
.admin-body::-webkit-scrollbar,
.admin-content .table-responsive::-webkit-scrollbar,
.admin-offcanvas .offcanvas-body::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.admin-body::-webkit-scrollbar-thumb,
.admin-content .table-responsive::-webkit-scrollbar-thumb,
.admin-offcanvas .offcanvas-body::-webkit-scrollbar-thumb {
    background: rgba(var(--bs-primary-rgb), 0.28);
    border-radius: var(--qc-radius-pill);
}
.admin-body::-webkit-scrollbar-thumb:hover,
.admin-content .table-responsive::-webkit-scrollbar-thumb:hover,
.admin-offcanvas .offcanvas-body::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--bs-primary-rgb), 0.45);
}

/* 4. 内容卡片：悬停轻微加深阴影（排除页内主卡片，避免与其大阴影 / 入场动画冲突） */
.admin-content .card:not(.admin-page-card) {
    transition: box-shadow var(--qc-transition-normal, 0.2s ease);
}
.admin-content .card:not(.admin-page-card):hover {
    box-shadow: var(--qc-shadow-md) !important;
}

/* 5. 表格精致化：表头更清晰、单元格垂直居中、行内 code/kbd 更规整 */
.admin-content .table thead th {
    font-weight: 600;
    letter-spacing: 0.01em;
    vertical-align: middle;
}
.admin-content .table tbody td {
    vertical-align: middle;
}
.admin-content .table code,
.admin-content .table kbd {
    padding: 0.1rem 0.35rem;
    border-radius: 0.35rem;
    background: rgba(var(--bs-primary-rgb), 0.08);
    color: inherit;
}

/* 6. 分页：圆润 + 悬停反馈 */
.admin-content .pagination .page-link {
    border-radius: 0.5rem;
    margin: 0 2px;
    transition: background-color var(--qc-transition-fast, 0.15s ease), transform var(--qc-transition-fast, 0.15s ease);
}
.admin-content .pagination .page-link:hover {
    transform: translateY(-1px);
}

/* 7. 下拉菜单 / 弹窗：统一圆角与浮层阴影 */
.admin-content .dropdown-menu {
    border-radius: var(--qc-radius-md, 0.625rem);
    box-shadow: var(--qc-shadow-lg);
    padding: 0.35rem;
}
.admin-content .dropdown-item {
    /* 与菜单容器 --qc-radius-md 保持同一套刻度（原 0.45rem 为孤立项） */
    border-radius: var(--qc-radius-sm, 0.35rem);
    transition: background-color var(--qc-transition-fast, 0.15s ease);
}
.admin-content .modal-content {
    border-radius: var(--qc-radius-lg, 0.875rem);
    box-shadow: var(--qc-shadow-lg);
}

/* 8. 表单标签 / 行内标签页 / 列表组细节 */
.admin-content .form-label {
    font-weight: 600;
    color: var(--bs-body-color);
}
.admin-content .nav-tabs {
    border-bottom-color: rgba(var(--bs-primary-rgb), 0.16);
}
.admin-content .nav-tabs .nav-link {
    border-radius: var(--qc-radius-sm, 0.35rem) var(--qc-radius-sm, 0.35rem) 0 0;
    transition: color var(--qc-transition-fast, 0.15s ease), background-color var(--qc-transition-fast, 0.15s ease);
}
.admin-content .nav-tabs .nav-link.active {
    font-weight: 600;
}
.admin-content .list-group-item {
    transition: background-color var(--qc-transition-fast, 0.15s ease);
}
.admin-content .alert {
    border-radius: var(--qc-radius-md, 0.625rem);
}

/* 9. 按钮按下反馈（补充既有 hover 浮起） */
.admin-content .btn:active {
    transform: translateY(0) scale(0.99);
}

/* 10. 尊重「减少动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
    .admin-content .card:not(.admin-page-card),
    .admin-content .pagination .page-link,
    .admin-content .dropdown-item,
    .admin-content .nav-tabs .nav-link,
    .admin-content .list-group-item {
        transition: none !important;
    }
    .admin-content .card:not(.admin-page-card):hover,
    .admin-content .pagination .page-link:hover {
        transform: none !important;
    }
}

/* 11. 主按钮颜色跟随后台主题（覆盖 Bootstrap 默认蓝）。
       后台内页由 `.admin-content .btn-primary` 渐变覆盖，但 404 / 错误页等
       独立页面未包裹在 .admin-main 内，会退回 Bootstrap 默认蓝，故在此统一。 */
[data-admin-theme] .btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
[data-admin-theme] .btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
    [data-admin-theme] .btn-primary {
        --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 88%, #000);
        --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 80%, #000);
        --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 78%, #000);
        --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 72%, #000);
    }
    [data-admin-theme] .btn-outline-primary {
        --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 82%, #000);
    }
}

.table tbody td[colspan].text-center.text-muted {
    padding: 2.5rem 1rem !important;
    vertical-align: middle;
}
.table tbody td[colspan].text-center.text-muted::before {
    content: "\f42d";                 /* bi-inbox */
    font-family: bootstrap-icons, sans-serif;
    display: block;
    font-size: 1.75rem;
    line-height: 1;
    opacity: 0.3;
    margin-bottom: 0.625rem;
}

/* CSP style-src-attr 迁出用工具类（替代高频 style=""） */
.qc-cursor-pointer { cursor: pointer; }
.qc-mw-120 { max-width: 120px; }
.qc-mw-220 { max-width: 220px; }
.qc-mw-400 { max-width: 400px; }
.qc-mw-520 { max-width: 520px; }
.qc-mw-560 { max-width: 560px; }
.qc-mw-640 { max-width: 640px; }
.qc-object-cover { object-fit: cover; }
.qc-fill { width: 100%; height: 100%; }

/* =====================================================================
   细粒度统一打磨（2026-10-02）
   ---------------------------------------------------------------------
   收敛「同类控件在不同页面尺寸/圆角不一致」的存量问题：
     · 按钮圆角：Bootstrap 默认 0.375rem 与页头 .admin-page-header-actions 的
       --qc-radius-sm(0.35rem) 两套并存；
     · 输入框 / 下拉 / 输入组前缀：未接入令牌体系，随 Bootstrap 默认值漂移；
     · 徽章字号：Bootstrap 为 0.75em，随父级字号浮动（表格里 ~9.75px，
       .admin-backup-noise-badge 又写死 0.65rem），同一页面内大小不一；
     · 分页圆角 0.5rem 与表格 / 按钮的 0.35rem 不搭；
     · 卡片内嵌表格的横向滚动区未纳入统一滚动条。
   统一到 --qc-radius-* / --qc-font-size-* 令牌；颜色全部走语义变量，
   三套主题（blue/emerald/slate）与明暗模式自动跟随。

   注意：Bootstrap 的 .input-group / .btn-group 圆角修正选择器含多个 :not()，
   特异性远高于此处的 (0,2,0)，故组内首尾元素的直角拼接不受影响。
   ===================================================================== */

/* 1. 控件圆角统一到 --qc-radius-sm。
   Bootstrap 5.3 的 .btn / .form-control 各自走 --bs-btn-border-radius、
   --bs-border-radius（默认 0.375rem），与后台页头按钮的 0.35rem 不同源；
   这里同时写变量与属性：属性覆盖本元素，变量覆盖组内首尾项等高特异性规则。 */
.admin-content .btn,
.admin-content .form-control,
.admin-content .form-select,
.admin-content .input-group-text,
.admin-content .pagination .page-link {
    border-radius: var(--qc-radius-sm, 0.35rem);
}
.admin-content .btn {
    --bs-btn-border-radius: var(--qc-radius-sm, 0.35rem);
}

/* 分页首尾项由 Bootstrap 的 --bs-pagination-border-radius 单独接管，
   只改 .page-link 会导致首尾仍是 0.375rem、中间 0.35rem（视觉断裂），
   故一并覆盖变量，整条分页保持同一圆角。 */
.admin-content .pagination {
    --bs-pagination-border-radius: var(--qc-radius-sm, 0.35rem);
}

/* 2. 徽章：固定字号与圆角，不再随父级 em 浮动 */
.admin-content .badge {
    font-size: var(--qc-font-size-2xs, 0.6875rem);
    border-radius: var(--qc-radius-xs, 0.25rem);
}

/* 3. 卡片 / 面板内的横向滚动容器纳入统一滚动条 */
.admin-content .card .table-responsive,
.admin-content .qc-panel .table-responsive {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--bs-primary-rgb), 0.30) transparent;
}
.admin-content .card .table-responsive::-webkit-scrollbar,
.admin-content .qc-panel .table-responsive::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.admin-content .card .table-responsive::-webkit-scrollbar-thumb,
.admin-content .qc-panel .table-responsive::-webkit-scrollbar-thumb {
    background: rgba(var(--bs-primary-rgb), 0.28);
    border-radius: var(--qc-radius-pill);
}
.admin-content .card .table-responsive::-webkit-scrollbar-thumb:hover,
.admin-content .qc-panel .table-responsive::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--bs-primary-rgb), 0.45);
}

/* 4. 表格分页区与卡片底部留白统一（此前各页靠 py-* 工具类自定，疏密不一） */
.admin-content .card-footer {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    background: transparent;
    border-top: 1px solid var(--qc-border-color, rgba(15, 23, 42, 0.12));
}

/* 5. 空状态：补齐与 .qc-empty 一致的图标尺寸节奏（表格单元格内更紧凑） */
.table tbody td[colspan] .qc-empty {
    padding: var(--qc-space-4, 1rem) var(--qc-space-3, 0.75rem);
}

/* 6. 减弱动效偏好下，统一关闭本轮新增的位移反馈 */
@media (prefers-reduced-motion: reduce) {
    .admin-content .btn:active,
    .admin-content .pagination .page-link:hover,
    .admin-top-actions .btn:hover {
        transform: none !important;
    }
}

/* =====================================================================
   可复用组件类（2026-10-02 去内联化 · 第二轮）
   ---------------------------------------------------------------------
   收敛「同一用途在不同控制器里各写一份内联 style」的存量问题。
   改动前的实测证据：
     · 封面预览图 3 处：76px / 92px 两种最大高度，4px / 6px 两种圆角，
       其中一处还多写了 object-fit，三者都硬编码 #dee2e6 + #fff（暗色白底）；
     · 源码编辑器 textarea 2 处：13px/1.4 与 14px/1.6 两套排版；
     · 模板预览 iframe 2 处：58vh 与 50vh；
     · 编辑器页签容器 2 处：62vh 与 56vh；
     · 日志 / 代码片段滚动区 3 处：280px / 320px / 360px 三种高度。
   统一为下列语义类，数值取中间值并接入设计令牌。
   ===================================================================== */

/* 缩略图 / 封面预览（原 3 处各写一份内联 style） */
.qc-thumb-preview {
    max-height: 5.5rem;
    max-width: 100%;
    padding: 2px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--qc-radius-sm, 0.35rem);
    background: var(--bs-body-bg);
    object-fit: contain;
}

/* 源码编辑器 textarea（原 2 处排版不一致） */
.qc-code-editor {
    min-height: 56vh;
    font-size: var(--qc-font-size-sm, 0.8125rem);
    line-height: 1.5;
}

/* 编辑器页签内容容器（原 62vh / 56vh 两套） */
.qc-editor-tabs-content {
    min-height: 60vh;
}

/* 模板 / 页面预览 iframe（原 58vh / 50vh 两套） */
.qc-preview-frame {
    width: 100%;
    height: 56vh;
    min-height: 56vh;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--qc-radius-md, 0.625rem);
    background: var(--bs-body-bg);
}

/* 纵向滚动区：构建日志 / 代码片段（原 280 / 320 / 360px 三种高度） */
.qc-scroll-y {
    max-height: 20rem;
    overflow: auto;
    overscroll-behavior: contain;
}
.qc-pre-wrap {
    white-space: pre-wrap;
}

/* 表单卡片最大宽度：把 420 / 240 / 200px 三个孤立项并入既有刻度
   （420→400、240→220、200→220），减少宽度档位数量。 */
.qc-mw-200 { max-width: 220px; }
.qc-mw-240 { max-width: 220px; }
.qc-mw-420 { max-width: 400px; }

/* =====================================================================
   后台 UI 全面焕新（2026-10-03）
   ---------------------------------------------------------------------
   对标：Ant Design Components（筛选/表格密度）。
   追加式增强；不改布局结构与业务 HTML。详见
   docs/superpowers/specs/2026-10-03-admin-ui-beautify-design.md
   品牌绿纸感主题已清除（同日）。
   ===================================================================== */

/* ---- Phase 2：列表 / 筛选 / 工具条密度（Ant Design 式收敛） ---- */
.admin-article-toolbar-wrap,
.admin-settings-toolbar,
.admin-media-picker-toolbar,
.admin-backup-page .admin-backup-toolbar,
.theme-tpl-mgmt .tpl-toolbar {
    background: var(--qc-surface, #fff);
    border: 1px solid var(--qc-border-color, rgba(15, 23, 42, 0.12));
    box-shadow: var(--qc-shadow-sm);
}

.admin-article-toolbar-wrap {
    padding: var(--qc-space-3, 0.75rem) var(--qc-space-4, 1rem);
    background: var(--qc-surface-soft, rgba(15, 23, 42, 0.04));
}

.admin-content .admin-page-card > .card-header.admin-page-card-header {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

.admin-content .admin-page-card > .card-body {
    padding: var(--qc-space-4, 1rem);
}

.admin-content .table thead th {
    font-size: var(--qc-font-size-xs, 0.75rem);
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.admin-content .table > :not(caption) > * > * {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.admin-content .table-sm > :not(caption) > * > * {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.admin-content .card-footer .pagination,
.admin-content .admin-page-card .pagination {
    margin-bottom: 0;
    gap: 0.2rem;
}

.admin-page-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--qc-space-2, 0.5rem);
}

/* 筛选行：常见 row + g-* 表单条在卡片顶更像「工具条」 */
.admin-content .admin-page-card .card-body > form.row:first-child,
.admin-content .admin-page-card .card-body > .row.g-2:first-child,
.admin-content .admin-page-card .card-body > .row.g-3:first-child {
    margin-bottom: var(--qc-space-3, 0.75rem);
    padding-bottom: var(--qc-space-3, 0.75rem);
    border-bottom: 1px solid var(--qc-border-color, rgba(15, 23, 42, 0.10));
}

/* ---- Phase 3：空状态 / Alert / 多标签指示 ---- */
.qc-empty-icon {
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--qc-radius-pill);
    background: rgba(var(--bs-primary-rgb), 0.10);
    color: var(--bs-primary);
    font-size: 1.35rem;
    opacity: 1;
}

.qc-empty-title {
    font-size: var(--qc-font-size-md, 1rem);
    font-weight: 600;
}

.qc-empty-desc {
    color: var(--bs-secondary-color);
}

.admin-content .alert {
    border-left-width: 3px;
    border-left-color: var(--bs-primary);
    box-shadow: var(--qc-shadow-sm);
}

.admin-content .alert-danger {
    border-left-color: var(--bs-danger);
}

.admin-content .alert-warning {
    border-left-color: var(--bs-warning);
}

.admin-content .alert-success {
    border-left-color: var(--bs-success);
}

.admin-content .alert-info {
    border-left-color: var(--bs-info);
}

.admin-tabs-bar {
    background: var(--qc-surface-muted, var(--bs-tertiary-bg, #f8f9fa));
}

.admin-tab {
    position: relative;
}

.admin-tab.is-active {
    color: var(--bs-body-color);
}

.admin-tab.is-active::before {
    content: "";
    position: absolute;
    left: 0.4rem;
    right: 0.4rem;
    top: 0;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: var(--bs-primary);
}

.admin-tab.is-active .admin-tab-dot {
    background: var(--bs-primary);
}

.table tbody td[colspan].text-muted,
.table tbody td[colspan] .text-muted {
    padding-top: 1.75rem !important;
    padding-bottom: 1.75rem !important;
}

@media (prefers-reduced-motion: reduce) {
    .admin-page-card {
        animation: none;
    }

    .admin-login-page .alert {
        animation: none;
    }
}

/* =====================================================================
   细粒度打磨（2026-10-03 · polish）
   ---------------------------------------------------------------------
   对标 Ant Design：表单控件、浮层、操作列、分组标题的「最后 1px」。
   仍为追加式；顶栏/侧栏浮层在 .admin-content 外，需单独覆盖。
   ===================================================================== */

/* ---- 顶栏：色板激活环、品牌字阶、下拉浮层 ---- */
.admin-theme-switch-btn.is-active {
    transform: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
    border-radius: 50%;
}

.admin-theme-switch-btn.is-active .admin-theme-switch-swatch {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.admin-brand-title {
    font-weight: 600;
    letter-spacing: 0.01em;
}

.admin-topnav {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.admin-body > .navbar .dropdown-menu,
.admin-topnav .dropdown-menu,
.admin-body .dropdown-menu {
    border: 1px solid var(--qc-border-color, rgba(15, 23, 42, 0.12));
    border-radius: var(--qc-radius-md, 0.625rem);
    box-shadow: var(--qc-shadow-lg, 0 18px 40px rgba(15, 23, 42, 0.14));
    padding: 0.35rem;
    font-size: var(--qc-font-size-sm, 0.8125rem);
}

.admin-body .dropdown-item {
    border-radius: var(--qc-radius-sm, 0.35rem);
    padding: 0.4rem 0.7rem;
}

.admin-body .dropdown-item:active,
.admin-body .dropdown-item.active {
    background-color: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-primary);
}

.admin-body .dropdown-divider {
    margin: 0.35rem 0;
    border-top-color: var(--qc-border-color, rgba(15, 23, 42, 0.12));
}

/* ---- 侧栏：分组标题与菜单项节奏 ---- */
.admin-sidebar-group-header,
.admin-sidebar-group-title {
    font-size: var(--qc-font-size-2xs, 0.6875rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.admin-sidebar-nav .nav-link {
    line-height: 1.25;
}

.admin-sidebar-nav .nav-link > i {
    font-size: 1rem;
    width: 1.15rem;
    text-align: center;
    opacity: 0.85;
}

.admin-sidebar-nav .nav-link.active > i {
    opacity: 1;
}

.admin-sidebar.border-end {
    border-color: var(--qc-border-color, rgba(15, 23, 42, 0.10)) !important;
}

/* ---- 多标签：关闭钮与滚动钮更克制 ---- */
.admin-tab-close {
    border-radius: var(--qc-radius-xs, 0.25rem);
    opacity: 0.55;
    transition: opacity var(--qc-transition-fast, 0.15s ease),
        background-color var(--qc-transition-fast, 0.15s ease);
}

.admin-tab:hover .admin-tab-close,
.admin-tab.is-active .admin-tab-close {
    opacity: 0.85;
}

.admin-tab-close:hover {
    opacity: 1;
    background: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-primary);
}

.admin-tabs-scroll-btn {
    border-radius: var(--qc-radius-sm, 0.35rem);
}

/* ---- 表单：勾选/开关/占位符/禁用态 ---- */
.admin-content .form-label {
    font-size: var(--qc-font-size-sm, 0.8125rem);
    margin-bottom: 0.3rem;
}

.admin-content .form-text,
.admin-content .form-control::placeholder,
.admin-content .form-select::placeholder {
    color: var(--bs-secondary-color);
    opacity: 0.85;
}

.admin-content .form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.admin-content .form-check-input:focus {
    border-color: rgba(var(--bs-primary-rgb), 0.55);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.18);
}

.admin-content .form-switch .form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.admin-content .form-control:disabled,
.admin-content .form-select:disabled,
.admin-content .form-control[readonly] {
    background-color: var(--qc-surface-soft, rgba(15, 23, 42, 0.04));
    opacity: 0.92;
}

.admin-content .input-group-text {
    font-size: var(--qc-font-size-sm, 0.8125rem);
}

/* ---- 按钮：outline / ghost 更干净 ---- */
.admin-content .btn-outline-primary,
.admin-content .btn-outline-secondary,
.admin-content .btn-outline-danger,
.admin-content .btn-outline-success {
    box-shadow: none;
}

.admin-content .btn-outline-primary:hover {
    box-shadow: 0 2px 8px rgba(var(--bs-primary-rgb), 0.18);
}

.admin-content .btn-light {
    border-color: var(--qc-border-color, rgba(15, 23, 42, 0.12));
}

.admin-content .btn-group > .btn {
    box-shadow: none;
}

/* ---- 表格：斑马纹软化、操作列、粘性表头（仅横向滚动容器内） ---- */
.admin-content .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: var(--qc-surface-muted, rgba(15, 23, 42, 0.02));
}

.admin-content .table .btn-link {
    text-decoration: none;
    font-weight: 500;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.admin-content .table .btn-link:hover {
    text-decoration: underline;
}

.admin-content .table-responsive > .table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--qc-head-bg, rgba(var(--bs-primary-rgb), 0.06));
    box-shadow: inset 0 -1px 0 var(--qc-head-border, rgba(var(--bs-primary-rgb), 0.2));
}

.admin-content .table tbody tr:last-child > * {
    border-bottom-color: transparent;
}

/* ---- 弹窗 / 页头标题 ---- */
.admin-content .modal-header {
    border-bottom-color: var(--qc-border-color, rgba(15, 23, 42, 0.12));
    padding: 0.85rem 1rem;
}

.admin-content .modal-title {
    font-size: var(--qc-font-size-md, 1rem);
    font-weight: 600;
}

.admin-content .modal-footer {
    border-top-color: var(--qc-border-color, rgba(15, 23, 42, 0.12));
    gap: 0.5rem;
}

.admin-page-card-header .card-title,
.admin-page-card-header h1,
.admin-page-card-header .h4,
.admin-page-card-header .h5,
.admin-page-card-header .h6 {
    margin-bottom: 0;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.admin-content .breadcrumb {
    margin-bottom: 0.75rem;
    font-size: var(--qc-font-size-xs, 0.75rem);
}

.admin-content .breadcrumb-item + .breadcrumb-item::before {
    opacity: 0.45;
}

.admin-content hr {
    border-color: var(--qc-border-color, rgba(15, 23, 42, 0.10));
    opacity: 1;
}

/* ---- 徽章 / 进度 / 小控件 ---- */
.admin-content .badge {
    padding: 0.28em 0.5em;
    vertical-align: middle;
}

.admin-content .progress {
    height: 0.45rem;
    border-radius: var(--qc-radius-pill);
    background: var(--qc-surface-soft, rgba(15, 23, 42, 0.04));
}

.admin-content .progress-bar {
    background-color: var(--bs-primary);
}

/* ---- 控制台 KPI 卡：悬停边界更清晰 ---- */
.qc-dash-stat,
.qc-stat-card,
.admin-content .qc-dash-kpi {
    transition: border-color var(--qc-transition-fast, 0.15s ease),
        box-shadow var(--qc-transition-fast, 0.15s ease);
}

/* ---- 暗色：细粒度补齐 ---- */
[data-bs-theme="dark"] .admin-body .dropdown-menu {
    background: var(--qc-surface, #1a1d21);
    border-color: var(--qc-border-color);
}

[data-bs-theme="dark"] .admin-theme-switch-btn.is-active {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55);
}

[data-bs-theme="dark"] .admin-content .table-responsive > .table thead th {
    background: var(--qc-head-bg);
}

@media (prefers-reduced-motion: reduce) {
    .admin-tab-close,
    .admin-theme-switch-btn,
    .qc-dash-stat,
    .qc-stat-card,
    .admin-content .qc-dash-kpi {
        transition: none !important;
    }

    .admin-theme-switch-btn:hover {
        transform: none;
    }
}

/* =====================================================================
   细粒度漏项补齐（2026-10-03 · gap-fill）
   ---------------------------------------------------------------------
   对照实际页面用法盘点后补上：关闭钮、分页激活、列表组、确认弹窗、
   文件框、加载指示、告警内 code、alert-light 语义边。
   ===================================================================== */

/* ---- 关闭钮（alert / modal / offcanvas，顶栏壳也用） ---- */
.admin-body .btn-close,
.admin-content .btn-close {
    opacity: 0.55;
    transition: opacity var(--qc-transition-fast, 0.15s ease),
        transform var(--qc-transition-fast, 0.15s ease);
}

.admin-body .btn-close:hover,
.admin-content .btn-close:hover {
    opacity: 0.9;
}

.admin-body .btn-close:focus-visible,
.admin-content .btn-close:focus-visible {
    opacity: 1;
    box-shadow: var(--qc-focus-ring, 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.22));
}

.admin-content .alert-dismissible {
    padding-right: 2.75rem;
}

.admin-content .alert-dismissible .btn-close {
    padding: 0.85rem;
}

/* alert-light：运维说明条，左边用中性色而非主色 */
.admin-content .alert-light {
    border-left-color: var(--qc-border-strong, rgba(15, 23, 42, 0.18));
    background: var(--qc-surface-soft, rgba(15, 23, 42, 0.04));
}

.admin-content .alert code,
.admin-content .alert-light code {
    padding: 0.1rem 0.35rem;
    border-radius: var(--qc-radius-xs, 0.25rem);
    background: rgba(var(--bs-primary-rgb), 0.08);
    font-size: 0.92em;
}

/* ---- 分页激活态（此前仅有 hover） ---- */
.admin-content .pagination .page-item.active .page-link {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(var(--bs-primary-rgb), 0.28);
}

.admin-content .pagination .page-item.disabled .page-link {
    opacity: 0.55;
}

/* ---- 列表组（媒体文件夹、运维监控等） ---- */
.admin-content .list-group-item {
    border-color: var(--qc-border-color, rgba(15, 23, 42, 0.12));
}

.admin-content .list-group-item-action:hover {
    background: var(--qc-surface-hover, rgba(var(--bs-primary-rgb), 0.06));
    color: var(--bs-primary);
}

.admin-content .list-group-item-action.active,
.admin-content .list-group-item.active {
    background: var(--admin-accent-soft, rgba(var(--bs-primary-rgb), 0.12));
    border-color: rgba(var(--bs-primary-rgb), 0.28);
    color: var(--bs-primary);
    font-weight: 600;
    z-index: 1;
}

.admin-content .list-group-flush > .list-group-item {
    border-left: 0;
    border-right: 0;
}

/* ---- 全局确认弹窗 ---- */
#qcConfirmModal .modal-content {
    border-radius: var(--qc-radius-lg, 0.875rem);
    overflow: hidden;
}

#qcConfirmModal .modal-header {
    border-bottom-color: var(--qc-border-color, rgba(15, 23, 42, 0.12));
    padding: 0.9rem 1.1rem;
}

#qcConfirmModal .modal-body {
    padding: 1rem 1.1rem;
    font-size: var(--qc-font-size-sm, 0.8125rem);
    line-height: 1.55;
    color: var(--bs-body-color);
}

#qcConfirmModal .modal-footer {
    border-top-color: var(--qc-border-color, rgba(15, 23, 42, 0.12));
    gap: 0.5rem;
    padding: 0.75rem 1.1rem;
}

.qc-confirm-modal-icon-wrap {
    width: 2rem;
    height: 2rem;
    font-size: 1.05rem;
    background: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-primary);
}

#qcConfirmModal .qc-confirm-modal-icon-wrap:has(.text-warning) {
    background: rgba(var(--bs-warning-rgb, 255, 193, 7), 0.18);
}

#qcConfirmModal .qc-confirm-modal-icon-wrap:has(.text-danger) {
    background: rgba(var(--bs-danger-rgb, 220, 53, 69), 0.14);
}

/* ---- 文件框 / 多行文本 ---- */
.admin-content .form-control[type="file"] {
    padding: 0.35rem 0.6rem;
    font-size: var(--qc-font-size-sm, 0.8125rem);
    line-height: 1.4;
}

.admin-content .form-control[type="file"]::file-selector-button {
    margin-inline-end: 0.75rem;
    padding: 0.3rem 0.75rem;
    border: 0;
    border-inline-end: 1px solid var(--qc-border-color, rgba(15, 23, 42, 0.12));
    border-radius: 0;
    background: var(--qc-surface-soft, rgba(15, 23, 42, 0.04));
    color: var(--bs-body-color);
    font-size: var(--qc-font-size-sm, 0.8125rem);
    font-weight: 500;
    transition: background-color var(--qc-transition-fast, 0.15s ease),
        color var(--qc-transition-fast, 0.15s ease);
}

.admin-content .form-control[type="file"]:hover::file-selector-button {
    background: rgba(var(--bs-primary-rgb), 0.10);
    color: var(--bs-primary);
}

.admin-content textarea.form-control {
    min-height: 5.5rem;
    line-height: 1.55;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

.admin-content textarea.form-control-sm {
    min-height: 3.5rem;
}

/* ---- 加载指示（升级面板等） ---- */
.admin-content .spinner-border {
    color: var(--bs-primary);
    --bs-spinner-border-width: 0.15em;
}

.admin-content .spinner-border.text-secondary,
.admin-content .spinner-border.text-muted {
    color: var(--bs-secondary-color) !important;
}

/* ---- 按钮组在表格操作列更紧凑 ---- */
.admin-content .table .btn-group-sm > .btn {
    padding-left: 0.45rem;
    padding-right: 0.45rem;
}

.admin-content .table .dropdown-toggle-split {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}

/* ---- 顶栏缓存钮 / 用户菜单：与 light 钮对齐 ---- */
.admin-top-actions .btn .bi {
    line-height: 1;
}

.admin-top-actions .admin-top-cache-btn {
    width: 2rem;
    min-height: 1.5rem;
    padding: 0.15rem;
}

.admin-top-actions .admin-cache-brush-icon {
    width: 1.05em;
    height: 1.05em;
    display: block;
    flex-shrink: 0;
}

.admin-top-actions .dropdown-toggle::after {
    margin-left: 0.35em;
    vertical-align: 0.15em;
}

/* ---- 暗色补齐 ---- */
[data-bs-theme="dark"] .admin-content .alert-light {
    background: rgba(255, 255, 255, 0.05);
    border-left-color: var(--qc-border-strong);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .admin-content .form-control[type="file"]::file-selector-button {
    background: rgba(255, 255, 255, 0.06);
    border-inline-end-color: var(--qc-border-color);
}

[data-bs-theme="dark"] #qcConfirmModal .modal-content {
    background: var(--qc-surface, #1a1d21);
}

.qc-system-upgrade-embed .qc-up-panel { border: 1px solid var(--qc-border-color); border-radius: var(--qc-radius-md); padding: 1rem; background: var(--qc-surface); }
.qc-system-upgrade-embed .qc-up-lead { color: var(--qc-muted, #5c6774); margin-bottom: 0.75rem; }
.qc-system-upgrade-embed .qc-up-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.qc-system-upgrade-embed .qc-up-stats { display: flex; flex-wrap: wrap; gap: 0.5rem; color: var(--qc-muted, #5c6774); font-size: 0.8125rem; margin-bottom: 0.75rem; }
.qc-system-upgrade-embed .qc-up-err { color: #cf222e; margin: 0.5rem 0 0; }
.qc-system-upgrade-embed .qc-up-tag { display: inline-block; font-size: 12px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--qc-border-color); }
.qc-system-upgrade-embed .qc-up-tag.tag-r { background: #fff8c5; border-color: #d4a72c; }
.qc-system-upgrade-embed .qc-up-tag.tag-a { background: #dafbe1; border-color: #2da44e; }
.qc-system-upgrade-embed .qc-up-live { max-height: 16rem; overflow: auto; border: 1px solid var(--qc-border-color); border-radius: 6px; }
.qc-system-upgrade-embed .qc-up-live-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--qc-border-color); font-size: 13px; }
.qc-system-upgrade-embed .qc-up-live-row.is-now { background: rgba(var(--bs-primary-rgb), 0.08); }
.qc-system-upgrade-embed .qc-up-live-row.is-done { color: var(--qc-muted, #5c6774); }
.qc-system-upgrade-embed .qc-up-live-row code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qc-system-upgrade-embed .qc-up-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bs-primary); flex-shrink: 0; }
.qc-system-upgrade-embed .qc-up-mask { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.42); display: flex; align-items: center; justify-content: center; padding: 24px 16px; z-index: 1080; }
.qc-system-upgrade-embed .qc-up-mask[hidden] { display: none !important; }
.qc-system-upgrade-embed .qc-up-dlg { background: var(--qc-surface, #fff); border: 1px solid var(--qc-border-color); border-radius: 12px; max-width: 440px; width: 100%; overflow: hidden; }
.qc-system-upgrade-embed .qc-up-dlg-hero { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: #f0fdf4; border-bottom: 1px solid #bbf7d0; }
.qc-system-upgrade-embed .qc-up-dlg-mark { width: 28px; height: 28px; border-radius: 50%; background: #1a7f37; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.qc-system-upgrade-embed .qc-up-dlg-hero h3 { margin: 0; font-size: 15px; color: #14532d; }
.qc-system-upgrade-embed .qc-up-dlg-ver { font-size: 12px; color: #3f6b4e; }
.qc-system-upgrade-embed .qc-up-dlg-body { padding: 16px 20px 20px; }
.qc-system-upgrade-embed .qc-up-meta { display: grid; gap: 8px; margin-bottom: 14px; }
.qc-system-upgrade-embed .qc-up-meta div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 8px 10px; border: 1px solid var(--qc-border-color); border-radius: 8px; background: var(--qc-surface-muted, rgba(15,23,42,.02)); }
.qc-system-upgrade-embed .qc-up-notes { border: 1px solid var(--qc-border-color); border-radius: 8px; padding: 12px 14px; margin-bottom: 16px; }
.qc-system-upgrade-embed .qc-up-notes p { margin: 0 0 8px; font-weight: 500; font-size: 13px; }
.qc-system-upgrade-embed .qc-up-prog { height: 8px; background: var(--qc-border-color); border-radius: 99px; overflow: hidden; }
.qc-system-upgrade-embed .qc-up-prog > i { display: block; height: 100%; width: 12%; background: var(--bs-primary); }
.qc-system-upgrade-embed .qc-up-fail { border: 1px solid #ffc1c1; background: #ffebe9; border-radius: 6px; padding: 10px 12px; margin: 0 0 8px; }

@media (prefers-reduced-motion: reduce) {
    .admin-body .btn-close,
    .admin-content .btn-close,
    .admin-content .form-control[type="file"]::file-selector-button {
        transition: none !important;
    }
}