/* =========================================================================
   TG File Monitor · UI Theme（合并主题层）
   -------------------------------------------------------------------------
   2026-10-29 二期重构：由 ui-polish / ui-cards / ui-immersive / ui-aurora /
   ui-delight 五层按原加载顺序机械合并而成，规则顺序与优先级完全不变，
   渲染结果与合并前等价。
   加载顺序： bootstrap → compact-help → moviepilot-theme → ui-tokens
              → ui-theme（本层）→ ui-readability（末端补丁层，不动）
   ========================================================================= */


/* =========================================================================
   原 ui-polish.css
   ========================================================================= */

/* =========================================================================
   TG File Monitor · UI Polish
   组件质感层 —— 在 ui-tokens 之上统一全站视觉细节
   -------------------------------------------------------------------------
   本层只做「视觉增强」，不改变任何布局尺寸与定位逻辑，
   因此对既有模板 100% 向后兼容、零结构风险。
   ========================================================================= */

:root {
    --ui-radius-card: 0.875rem;
    --ui-radius-card-inner: 0.625rem;
    --ui-focus-ring: 0 0 0 3px var(--ui-primary-ring);
}

/* =========================================================================
   1 · 全局基础
   ========================================================================= */
html,
body {
    background: var(--ui-bg) !important;
    color: var(--ui-ink);
    font-family: var(--ui-font-sans) !important;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-image:
        radial-gradient(ellipse 70% 46% at 50% -12%, var(--ui-bg-tint) 0%, transparent 68%),
        radial-gradient(ellipse 44% 34% at 100% 4%, rgba(42, 168, 224, 0.05) 0%, transparent 70%) !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

::selection {
    background: rgba(139, 92, 246, 0.2);
    color: inherit;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(122, 119, 135, 0.26);
    border: 2.5px solid transparent;
    border-radius: var(--ui-radius-pill);
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 92, 246, 0.42);
    background-clip: content-box;
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(122, 119, 135, 0.3) transparent;
}

/* 统一可见焦点环 —— 键盘可访问性 */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--ui-focus-ring) !important;
}

.form-control:focus-visible,
.form-select:focus-visible {
    border-color: var(--ui-primary) !important;
}

/* 动效偏好 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================================
   2 · 排版
   ========================================================================= */
h1, h2, h3, h4, h5, h6 {
    color: var(--ui-ink) !important;
    letter-spacing: var(--ui-tracking-tight) !important;
    font-weight: 700;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.4rem; font-weight: 750; }
h3 { font-size: 1.15rem; }
h4 { font-size: 1.03rem; }
h5 { font-size: 0.94rem; }
h6 { font-size: 0.86rem; }

p, li { line-height: var(--ui-leading-normal); }

small, .small, .form-text {
    font-size: var(--ui-text-xs) !important;
    line-height: 1.55;
}

a {
    color: var(--ui-primary);
    text-underline-offset: 2px;
}

a:hover {
    color: var(--ui-primary-strong);
}

code, kbd, samp {
    font-family: var(--ui-font-mono);
    font-size: 0.86em;
}

:not(pre) > code {
    background: var(--ui-primary-softer) !important;
    border: 1px solid var(--ui-primary-line) !important;
    border-radius: var(--ui-radius-xs) !important;
    color: var(--ui-primary-deep) !important;
    padding: 0.1em 0.38em !important;
}

pre {
    background: var(--ui-surface-sunken) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-card-inner) !important;
    color: var(--ui-ink) !important;
    font-family: var(--ui-font-mono);
    font-size: 0.8rem;
    line-height: 1.6;
    padding: 1rem 1.15rem !important;
    tab-size: 4;
}

/* 数值对齐 —— 让统计数字呼吸更整齐 */
.module-metric-value,
.file-metric-value,
.file-config-metric-value,
.emby-stat-value,
.extension-stat-value,
.settings-metric-value,
.service-primary,
.hero-metric-value,
.ss-side-value,
.queue-breakdown strong {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em !important;
}

/* =========================================================================
   3 · 侧边栏
   ========================================================================= */
.sidebar {
    background: var(--ui-surface) !important;
    border-right: 1px solid var(--ui-border) !important;
    box-shadow: none !important;
}

.sidebar-brand-title {
    letter-spacing: -0.01em !important;
}

/* 品牌图标统一为渐变徽标（原先各页面风格不一） */
.sidebar-brand-main > i {
    display: grid !important;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    flex: 0 0 2.3rem;
    border-radius: var(--ui-radius-md);
    color: #fff !important;
    background: var(--ui-primary-gradient);
    box-shadow: 0 8px 18px -8px rgba(139, 92, 246, 0.7);
    font-size: 1rem !important;
    transition: transform var(--ui-dur) var(--ui-ease), box-shadow var(--ui-dur) var(--ui-ease) !important;
}

.sidebar-brand:hover .sidebar-brand-main > i {
    transform: rotate(-6deg) scale(1.04);
    box-shadow: 0 10px 22px -8px rgba(139, 92, 246, 0.85);
}

html.home-page-shell .sidebar-brand-main > i {
    display: grid !important;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: var(--ui-radius-md) !important;
    color: #fff !important;
    background: var(--ui-primary-gradient) !important;
    box-shadow: 0 8px 18px -8px rgba(139, 92, 246, 0.7) !important;
    font-size: 1rem !important;
}

.sidebar-version-badge {
    border-radius: var(--ui-radius-xs) !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
}

.sidebar-section-label {
    display: flex !important;
    align-items: center;
    gap: 0.6rem;
    color: var(--ui-muted) !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
}

.sidebar .nav-link {
    position: relative;
    border-radius: 0 var(--ui-radius-pill) var(--ui-radius-pill) 0 !important;
    color: var(--ui-ink-soft) !important;
    font-weight: 550 !important;
    transition: background var(--ui-dur-fast) var(--ui-ease),
                color var(--ui-dur-fast) var(--ui-ease),
                padding-left var(--ui-dur) var(--ui-ease) !important;
}

.sidebar .nav-link i {
    transition: transform var(--ui-dur) var(--ui-ease), color var(--ui-dur-fast) var(--ui-ease) !important;
}

.sidebar .nav-link:hover {
    background: var(--ui-primary-softer) !important;
    color: var(--ui-ink) !important;
}

.sidebar .nav-link:hover i {
    transform: scale(1.08);
}

.sidebar .nav-link.active {
    background: var(--ui-primary-gradient) !important;
    color: #fff !important;
    box-shadow: var(--ui-shadow-primary) !important;
}

.sidebar .nav-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 1.35rem;
    border-radius: 0 var(--ui-radius-pill) var(--ui-radius-pill) 0;
    background: var(--ui-primary);
    opacity: 0;
}

.sidebar .nav-link.active i,
.sidebar .nav-link.active:hover i {
    color: #fff !important;
    transform: none;
}

.sidebar-footer {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
}

.theme-toggle-btn {
    border-radius: var(--ui-radius-sm) !important;
    transition: background var(--ui-dur-fast) var(--ui-ease),
                border-color var(--ui-dur-fast) var(--ui-ease),
                color var(--ui-dur-fast) var(--ui-ease),
                transform var(--ui-dur-fast) var(--ui-ease) !important;
}

.theme-toggle-btn:hover {
    transform: rotate(-12deg) scale(1.05);
}

/* =========================================================================
   4 · 卡片
   ========================================================================= */
.card,
.main-content .card {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-card) !important;
    box-shadow: var(--ui-shadow-sm) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: hidden;
    transition: border-color var(--ui-dur) var(--ui-ease),
                box-shadow var(--ui-dur) var(--ui-ease),
                transform var(--ui-dur) var(--ui-ease) !important;
}

.card:hover,
.main-content .card:hover {
    border-color: var(--ui-border-strong) !important;
    box-shadow: var(--ui-shadow-md) !important;
}

.card-header,
.main-content .card-header {
    background: var(--ui-surface) !important;
    border-bottom: 1px solid var(--ui-border) !important;
    padding: 0.85rem 1.25rem !important;
    font-weight: 600;
}

.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6 {
    margin-bottom: 0;
}

.card-body {
    padding: 1.25rem !important;
}

.card-footer {
    background: var(--ui-surface-soft) !important;
    border-top: 1px solid var(--ui-border) !important;
    padding: 0.85rem 1.25rem !important;
}

/* 内嵌小卡片统一圆角 */
.module-metric,
.file-metric-card,
.file-config-metric,
.extension-stat,
.file-global-info-row,
.file-global-subcard,
.extension-muted-box,
.log-hub-card,
.tool-subcard,
.ss-form-shell,
.ss-hint-card,
.plugin-card,
.hero-node,
.settings-metric-card,
.settings-topbar {
    background: var(--ui-surface-soft) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-card-inner) !important;
    box-shadow: none !important;
    transition: border-color var(--ui-dur) var(--ui-ease),
                background var(--ui-dur) var(--ui-ease),
                transform var(--ui-dur) var(--ui-ease) !important;
}

.plugin-card:hover,
.log-hub-card:hover,
.tool-subcard:hover,
.hero-node:hover {
    border-color: var(--ui-primary-line) !important;
    transform: translateY(-2px);
}

/* 顶部通栏卡片（hero / topbar 类） */
.file-topbar,
.file-config-topbar,
.extension-top,
.proxy-hero,
.drama-hero,
.drama-status-card,
.drama-quick-nav-card,
.drama-note-card,
.source-panel,
.extension-hub,
.extension-panel,
.extension-form-card,
.file-global-card,
.file-global-subcard,
.proxy-card,
.settings-topbar {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-card) !important;
    box-shadow: var(--ui-shadow-sm) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* 可点击的业务卡片：hover 时主色描边 + 抬升 */
.module-card,
.overview-card,
.portal-card,
.status-card {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-card) !important;
    box-shadow: var(--ui-shadow-sm) !important;
    transition: border-color var(--ui-dur) var(--ui-ease),
                box-shadow var(--ui-dur) var(--ui-ease),
                transform var(--ui-dur) var(--ui-ease) !important;
}

.module-card:hover,
.overview-card:hover,
.portal-card:hover,
.status-card:hover {
    border-color: var(--module-accent, var(--ui-primary)) !important;
    box-shadow: var(--ui-shadow-md) !important;
    transform: translateY(-2px);
}

/* =========================================================================
   5 · 按钮
   ========================================================================= */
.btn {
    border-radius: var(--ui-radius-sm) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    transition: background var(--ui-dur-fast) var(--ui-ease),
                border-color var(--ui-dur-fast) var(--ui-ease),
                color var(--ui-dur-fast) var(--ui-ease),
                box-shadow var(--ui-dur-fast) var(--ui-ease),
                transform var(--ui-dur-fast) var(--ui-ease) !important;
}

.btn:active {
    transform: translateY(1px) scale(0.985) !important;
}

.btn-sm {
    border-radius: var(--ui-radius-xs) !important;
}

.btn-lg {
    border-radius: var(--ui-radius-md) !important;
}

.btn:disabled,
.btn.disabled {
    opacity: 0.5 !important;
    box-shadow: none !important;
    transform: none !important;
}

.btn-primary,
.modal .btn-primary {
    background: var(--ui-primary) !important;
    border-color: var(--ui-primary) !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(26, 22, 48, 0.06), 0 4px 12px -4px rgba(139, 92, 246, 0.4) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.modal .btn-primary:hover,
.modal .btn-primary:focus {
    background: var(--ui-primary-strong) !important;
    border-color: var(--ui-primary-strong) !important;
    box-shadow: 0 2px 4px rgba(26, 22, 48, 0.08), 0 8px 20px -6px rgba(139, 92, 246, 0.55) !important;
    transform: translateY(-1px);
}

.btn-outline-primary,
.modal .btn-outline-primary {
    background: transparent !important;
    border-color: var(--ui-primary-line) !important;
    color: var(--ui-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: var(--ui-primary-soft) !important;
    border-color: var(--ui-primary) !important;
    color: var(--ui-primary-strong) !important;
    transform: translateY(-1px);
}

.btn-outline-secondary,
.btn-outline-light {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border-strong) !important;
    color: var(--ui-ink-soft) !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-light:hover,
.btn-outline-light:focus {
    background: var(--ui-surface-soft) !important;
    border-color: var(--ui-border-strong) !important;
    color: var(--ui-ink) !important;
    transform: translateY(-1px);
}

.btn-light {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-ink) !important;
}

.btn-light:hover,
.btn-light:focus {
    background: var(--ui-surface-soft) !important;
    border-color: var(--ui-border-strong) !important;
    color: var(--ui-ink) !important;
    transform: translateY(-1px);
}

.btn-success {
    background: var(--ui-success-ink) !important;
    border-color: var(--ui-success-ink) !important;
    color: #fff !important;
}

.btn-danger {
    background: var(--ui-error-ink) !important;
    border-color: var(--ui-error-ink) !important;
    color: #fff !important;
}

.btn-link {
    color: var(--ui-primary) !important;
    font-weight: 600;
    text-decoration: none;
}

.btn-link:hover {
    color: var(--ui-primary-strong) !important;
    text-decoration: underline;
}

.btn-chip,
.log-toolbar-chip,
.settings-chip,
.settings-summary-pill,
.emby-chip,
.ss-chip,
.log-hub-chip,
.tool-chip,
.file-config-chip,
.file-chip,
.proxy-chip,
.drama-hero-chip,
.plugin-status,
.status-result-badge {
    border-radius: var(--ui-radius-pill) !important;
    font-weight: 600 !important;
}

/* =========================================================================
   6 · 表单
   ========================================================================= */
.form-control,
.form-select,
textarea.form-control,
.input-group-text {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border-strong) !important;
    border-radius: var(--ui-radius-sm) !important;
    color: var(--ui-ink) !important;
    transition: border-color var(--ui-dur-fast) var(--ui-ease),
                box-shadow var(--ui-dur-fast) var(--ui-ease),
                background var(--ui-dur-fast) var(--ui-ease) !important;
}

.form-control:hover:not(:focus),
.form-select:hover:not(:focus),
textarea.form-control:hover:not(:focus) {
    border-color: var(--ui-neutral-line) !important;
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
    background: var(--ui-surface) !important;
    border-color: var(--ui-primary) !important;
    box-shadow: var(--ui-focus-ring) !important;
}

.form-control::placeholder,
textarea.form-control::placeholder {
    color: var(--ui-placeholder) !important;
}

.form-label {
    color: var(--ui-ink) !important;
    font-size: var(--ui-text-sm);
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.form-check-label {
    font-weight: 500;
}

.form-check-input {
    border-color: var(--ui-border-strong) !important;
    transition: background-color var(--ui-dur-fast) var(--ui-ease),
                border-color var(--ui-dur-fast) var(--ui-ease) !important;
}

.form-check-input:checked {
    background-color: var(--ui-primary) !important;
    border-color: var(--ui-primary) !important;
}

.form-check-input[type="checkbox"]:checked {
    box-shadow: 0 1px 3px rgba(139, 92, 246, 0.35) !important;
}

.form-switch .form-check-input {
    width: 2.5em;
    height: 1.35em;
    border-radius: var(--ui-radius-pill) !important;
    background-color: var(--ui-surface-sunken) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%237a7787'/%3e%3c/svg%3e") !important;
}

.form-switch .form-check-input:checked {
    background-color: var(--ui-primary) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}

.input-group > .form-control {
    border-left: 1px solid var(--ui-border-strong) !important;
}

.input-group-text {
    background: var(--ui-surface-soft) !important;
    color: var(--ui-muted) !important;
}

/* =========================================================================
   7 · 徽章 / 标签
   ========================================================================= */
.badge {
    border-radius: var(--ui-radius-pill) !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    padding: 0.32em 0.62em !important;
    font-size: 0.73rem !important;
}

.badge.bg-primary {
    background: var(--ui-primary) !important;
    color: #fff !important;
}

.badge.bg-success {
    background: var(--ui-success) !important;
    color: #fff !important;
}

.badge.bg-danger {
    background: var(--ui-error) !important;
    color: #fff !important;
}

.badge.bg-warning {
    background: var(--ui-warning) !important;
    color: #fff !important;
}

.badge.bg-info {
    background: var(--ui-info) !important;
    color: #fff !important;
}

.badge.bg-secondary,
.badge.bg-light,
.badge.text-bg-light {
    background: var(--ui-neutral-soft) !important;
    border: 1px solid var(--ui-neutral-line) !important;
    color: var(--ui-neutral-ink) !important;
}

.bg-primary { background: var(--ui-primary) !important; }
.bg-success { background: var(--ui-success) !important; }
.bg-info { background: var(--ui-info) !important; }
.bg-warning { background: var(--ui-warning) !important; }
.bg-danger { background: var(--ui-error) !important; }
.bg-secondary { background: var(--ui-neutral-soft) !important; color: var(--ui-neutral-ink) !important; }

/* 语义文字色 —— 修掉原先过亮导致的对比度不足 */
.text-primary { color: var(--ui-primary) !important; }
.text-success { color: var(--ui-success-ink) !important; }
.text-danger { color: var(--ui-error-ink) !important; }
.text-warning { color: var(--ui-warning-ink) !important; }
.text-info { color: var(--ui-info-ink) !important; }
.text-muted, .text-secondary, .form-text, small { color: var(--ui-muted) !important; }
.text-dark, .text-body, .text-body-emphasis { color: var(--ui-ink) !important; }

/* 状态 chip 统一配色 */
.settings-chip.is-on,
.file-config-chip.is-on,
.file-chip.is-on,
.proxy-chip.is-on,
.plugin-status.is-on,
.emby-chip.is-on,
.ss-chip.is-on,
.log-hub-chip.is-on,
.tool-chip.is-on,
.channel-item-chip.is-positive,
.status-result-badge.is-success {
    background: var(--ui-success-soft) !important;
    border-color: var(--ui-success-line) !important;
    color: var(--ui-success-ink) !important;
}

.ss-chip.is-warn,
.file-task-tag,
.status-result-badge.is-warning {
    background: var(--ui-warning-soft) !important;
    border-color: var(--ui-warning-line) !important;
    color: var(--ui-warning-ink) !important;
}

.status-result-badge.is-error {
    background: var(--ui-error-soft) !important;
    border-color: var(--ui-error-line) !important;
    color: var(--ui-error-ink) !important;
}

.status-result-badge.is-muted,
.status-result-badge,
.settings-chip.is-off,
.file-chip.is-off,
.proxy-chip.is-off,
.drama-status-pill.disabled,
.channel-item-chip {
    background: var(--ui-neutral-soft) !important;
    border-color: var(--ui-neutral-line) !important;
    color: var(--ui-neutral-ink) !important;
}

/* =========================================================================
   8 · 表格
   ========================================================================= */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ui-ink);
    color: var(--ui-ink) !important;
    font-size: var(--ui-text-base);
    margin-bottom: 0;
}

.table > thead th,
.table th {
    background: var(--ui-surface-soft) !important;
    border-bottom: 1px solid var(--ui-border) !important;
    color: var(--ui-muted) !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase;
    padding: 0.7rem 0.85rem !important;
    white-space: nowrap;
}

.table > tbody td {
    border-bottom: 1px solid var(--ui-border-hairline) !important;
    padding: 0.68rem 0.85rem !important;
    vertical-align: middle;
}

.table > tbody tr {
    transition: background var(--ui-dur-fast) var(--ui-ease);
}

.table > tbody tr:hover > * {
    background: var(--ui-primary-softer) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background: var(--ui-surface-soft) !important;
    color: var(--ui-ink) !important;
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--ui-border-hairline) !important;
    color: var(--ui-ink) !important;
}

.table-responsive {
    border-radius: var(--ui-radius-card-inner);
}

/* =========================================================================
   9 · 导航 / 标签页
   ========================================================================= */
.nav-tabs,
.nav-pills {
    border-color: var(--ui-border) !important;
    gap: 0.25rem;
}

.nav-tabs .nav-link,
.nav-pills .nav-link {
    border-radius: var(--ui-radius-sm) !important;
    color: var(--ui-muted) !important;
    font-weight: 600 !important;
    transition: background var(--ui-dur-fast) var(--ui-ease),
                color var(--ui-dur-fast) var(--ui-ease) !important;
}

.nav-tabs .nav-link:hover,
.nav-pills .nav-link:hover {
    background: var(--ui-surface-soft) !important;
    color: var(--ui-ink) !important;
}

.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
    background: var(--ui-primary-soft) !important;
    border-color: var(--ui-primary-line) !important;
    color: var(--ui-primary-strong) !important;
}

.file-nav-link,
.drama-quick-nav-link,
.source-tabs .nav-link,
.extension-filter,
.emby-page .nav-pills .nav-link {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-card-inner) !important;
    color: var(--ui-muted) !important;
    box-shadow: none !important;
    transition: background var(--ui-dur-fast) var(--ui-ease),
                border-color var(--ui-dur-fast) var(--ui-ease),
                color var(--ui-dur-fast) var(--ui-ease),
                transform var(--ui-dur-fast) var(--ui-ease) !important;
}

.file-nav-link:hover,
.drama-quick-nav-link:hover,
.source-tabs .nav-link:hover,
.extension-filter:hover,
.emby-page .nav-pills .nav-link:hover {
    border-color: var(--ui-primary-line) !important;
    color: var(--ui-ink) !important;
    transform: translateY(-1px);
}

.file-nav-link.active,
.drama-quick-nav-link.active,
.source-tabs .nav-link.active,
.extension-filter.active,
.emby-page .nav-pills .nav-link.active {
    background: var(--ui-primary-soft) !important;
    border-color: var(--ui-primary-line) !important;
    color: var(--ui-primary-strong) !important;
}

/* 折叠面板 */
.accordion-item {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-card-inner) !important;
    margin-bottom: 0.5rem;
    overflow: hidden;
}

.accordion-button {
    background: var(--ui-surface) !important;
    color: var(--ui-ink) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
    background: var(--ui-primary-softer) !important;
    color: var(--ui-primary-strong) !important;
}

.accordion-button:focus {
    box-shadow: var(--ui-focus-ring) !important;
}

/* 列表组 */
.list-group-item {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-ink) !important;
}

.list-group-item:hover {
    background: var(--ui-surface-soft) !important;
}

/* =========================================================================
   10 · 模态框 / 弹出层
   ========================================================================= */
.modal-content {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-lg) !important;
    box-shadow: var(--ui-shadow-xl) !important;
    color: var(--ui-ink) !important;
    overflow: hidden;
}

.modal-header {
    background: var(--ui-surface) !important;
    border-bottom: 1px solid var(--ui-border) !important;
    padding: 1rem 1.25rem !important;
}

.modal-title {
    font-weight: 700 !important;
    letter-spacing: var(--ui-tracking-tight);
}

.modal-body {
    padding: 1.25rem !important;
}

.modal-footer {
    background: var(--ui-surface-soft) !important;
    border-top: 1px solid var(--ui-border) !important;
    padding: 0.85rem 1.25rem !important;
}

.modal-backdrop.show {
    opacity: 0.42;
    backdrop-filter: blur(3px);
}

.popover,
.tooltip-inner,
.dropdown-menu {
    border-radius: var(--ui-radius-card-inner) !important;
    border-color: var(--ui-border) !important;
    box-shadow: var(--ui-shadow-lg) !important;
    font-size: var(--ui-text-sm);
}

.dropdown-menu {
    background: var(--ui-surface) !important;
    padding: 0.35rem !important;
}

.dropdown-item {
    border-radius: var(--ui-radius-xs) !important;
    color: var(--ui-ink-soft) !important;
    font-weight: 500;
    padding: 0.45rem 0.65rem !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--ui-primary-softer) !important;
    color: var(--ui-primary-strong) !important;
}

.compact-help-popover,
.compact-help-popover .popover-header,
.compact-help-popover .popover-body {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-ink) !important;
}

.compact-help-trigger {
    border-radius: var(--ui-radius-pill) !important;
    border-color: var(--ui-primary-line) !important;
    background: var(--ui-primary-softer) !important;
    color: var(--ui-primary) !important;
}

.compact-help-trigger:hover,
.compact-help-trigger:focus {
    background: var(--ui-primary) !important;
    border-color: var(--ui-primary) !important;
    color: #fff !important;
}

/* =========================================================================
   11 · 提示条
   ========================================================================= */
.alert {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-left: 3px solid var(--ui-neutral) !important;
    border-radius: var(--ui-radius-card-inner) !important;
    box-shadow: var(--ui-shadow-sm) !important;
    color: var(--ui-ink) !important;
    padding: 0.85rem 1rem !important;
    backdrop-filter: none !important;
}

.alert-success { border-left-color: var(--ui-success) !important; }
.alert-warning { border-left-color: var(--ui-warning) !important; }
.alert-danger  { border-left-color: var(--ui-error) !important; }
.alert-info    { border-left-color: var(--ui-info) !important; }

.version-update-banner {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-warning-line) !important;
    border-left: 3px solid var(--ui-warning) !important;
    border-radius: var(--ui-radius-card-inner) !important;
    box-shadow: var(--ui-shadow-sm) !important;
    color: var(--ui-ink) !important;
}

.version-update-icon {
    background: var(--ui-warning-soft) !important;
    color: var(--ui-warning-ink) !important;
    border-radius: var(--ui-radius-sm) !important;
}

.version-update-copy strong { color: var(--ui-ink) !important; }
.version-update-copy span { color: var(--ui-muted) !important; opacity: 1 !important; }

.version-update-link {
    color: var(--ui-warning-ink) !important;
    border-color: var(--ui-warning-line) !important;
    background: transparent !important;
}

.version-update-link:hover {
    background: var(--ui-warning) !important;
    color: #fff !important;
    border-color: var(--ui-warning) !important;
}

/* =========================================================================
   12 · 首页工作台
   ========================================================================= */
/* 把首页自有的 --home-* 局部色板对齐到全局令牌（深色模式自动跟随） */
html.home-page-shell,
html.home-page-shell .home-dashboard,
:root[data-theme="dark"].home-page-shell,
:root[data-theme="dark"].home-page-shell .home-dashboard,
:root[data-theme="dark"] .home-dashboard {
    --home-purple: var(--ui-primary) !important;
    --home-purple-strong: var(--ui-primary-strong) !important;
    --home-purple-soft: var(--ui-primary-soft) !important;
    --home-bg: var(--ui-bg) !important;
    --home-surface: var(--ui-surface) !important;
    --home-surface-solid: var(--ui-surface) !important;
    --home-surface-soft: var(--ui-surface-soft) !important;
    --home-border: var(--ui-border) !important;
    --home-border-strong: var(--ui-primary-line) !important;
    --home-ink: var(--ui-ink) !important;
    --home-muted: var(--ui-muted) !important;
    --home-success: var(--ui-success-ink) !important;
    --home-success-soft: var(--ui-success-soft) !important;
    --home-warning: var(--ui-warning-ink) !important;
    --home-warning-soft: var(--ui-warning-soft) !important;
    --home-danger: var(--ui-error-ink) !important;
    --home-danger-soft: var(--ui-error-soft) !important;
    --home-shadow: var(--ui-shadow-sm) !important;
    --home-shadow-hover: var(--ui-shadow-md) !important;
}

html.home-page-shell .sidebar .nav-link {
    color: var(--ui-ink-soft) !important;
    font-weight: 550 !important;
}

html.home-page-shell .sidebar .nav-link i {
    color: var(--ui-muted) !important;
    background: transparent !important;
}

html.home-page-shell .sidebar .nav-link:hover {
    color: var(--ui-ink) !important;
    background: var(--ui-primary-softer) !important;
}

html.home-page-shell .sidebar .nav-link:hover i {
    color: var(--ui-primary) !important;
}

html.home-page-shell .sidebar .nav-link.active {
    color: #fff !important;
    background: var(--ui-primary-gradient) !important;
    border-color: transparent !important;
    box-shadow: var(--ui-shadow-primary) !important;
}

html.home-page-shell .sidebar .nav-link.active i,
html.home-page-shell .sidebar .nav-link.active:hover i {
    color: #fff !important;
    background: transparent !important;
}

html.home-page-shell .home-heading h1 {
    font-weight: 750 !important;
    letter-spacing: -0.03em !important;
    color: var(--ui-ink) !important;
}

html.home-page-shell .home-heading p,
html.home-page-shell .service-caption,
html.home-page-shell .home-hero-description {
    color: var(--ui-muted) !important;
}

html.home-page-shell .sidebar-section-label {
    color: var(--ui-muted) !important;
    font-size: 0.68rem !important;
}

/* 首页工具条 / 卡片 */
html.home-page-shell .home-chip,
html.home-page-shell .home-icon-button {
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-sm) !important;
    background: var(--ui-surface) !important;
    color: var(--ui-muted) !important;
    box-shadow: var(--ui-shadow-xs) !important;
    transition: color var(--ui-dur-fast) var(--ui-ease),
                border-color var(--ui-dur-fast) var(--ui-ease),
                box-shadow var(--ui-dur-fast) var(--ui-ease) !important;
}

html.home-page-shell .home-chip:hover,
html.home-page-shell .home-icon-button:hover,
html.home-page-shell button.home-chip:focus-visible,
html.home-page-shell .home-icon-button:focus-visible {
    color: var(--ui-primary) !important;
    border-color: var(--ui-primary-line) !important;
    box-shadow: var(--ui-shadow-sm) !important;
}

html.home-page-shell .home-hero {
    border-radius: var(--ui-radius-xl) !important;
    box-shadow: 0 22px 54px -18px rgba(46, 34, 82, 0.42) !important;
}

html.home-page-shell .hero-primary-action {
    background: var(--ui-primary) !important;
    border-radius: var(--ui-radius-sm) !important;
    box-shadow: 0 10px 24px -10px rgba(139, 92, 246, 0.7) !important;
}

html.home-page-shell .hero-primary-action:hover,
html.home-page-shell .hero-primary-action:focus {
    background: var(--ui-primary-strong) !important;
}

html.home-page-shell .hero-metric {
    border-radius: var(--ui-radius-md) !important;
}

html.home-page-shell .home-hero-visual,
html.home-page-shell .hero-node {
    border-radius: var(--ui-radius-card) !important;
}

html.home-page-shell .service-card,
html.home-page-shell .panel-card,
html.home-page-shell .quick-card,
html.home-page-shell .activity-card {
    border-radius: var(--ui-radius-card) !important;
    transition: border-color var(--ui-dur) var(--ui-ease),
                box-shadow var(--ui-dur) var(--ui-ease),
                transform var(--ui-dur) var(--ui-ease) !important;
}

html.home-page-shell .service-card:hover,
html.home-page-shell .panel-card:hover,
html.home-page-shell .quick-card:hover {
    border-color: var(--ui-primary-line) !important;
    box-shadow: var(--ui-shadow-md) !important;
    transform: translateY(-2px);
}

/* 首页业务卡语义色对齐全局色阶（深色模式自动跟随） */
html.home-page-shell .service-card.file {
    --service-accent: var(--ui-info-ink) !important;
    --service-soft: var(--ui-info-soft) !important;
}

html.home-page-shell .service-card.bot {
    --service-accent: var(--ui-success-ink) !important;
    --service-soft: var(--ui-success-soft) !important;
}

html.home-page-shell .service-card.drama {
    --service-accent: var(--ui-warning-ink) !important;
    --service-soft: var(--ui-warning-soft) !important;
}

html.home-page-shell .service-state {
    border-radius: var(--ui-radius-pill) !important;
    font-weight: 650 !important;
}

html.home-page-shell .service-state:not(.is-warning):not(.is-danger) {
    background: var(--ui-success-soft) !important;
    color: var(--ui-success-ink) !important;
}

html.home-page-shell .service-state.is-warning {
    background: var(--ui-warning-soft) !important;
    color: var(--ui-warning-ink) !important;
}

html.home-page-shell .service-state.is-danger {
    background: var(--ui-error-soft) !important;
    color: var(--ui-error-ink) !important;
}

html.home-page-shell .service-icon {
    border-radius: var(--ui-radius-md) !important;
}

html.home-page-shell .home-panel {
    border-radius: var(--ui-radius-card) !important;
}

html.home-page-shell .panel-link:hover {
    color: var(--ui-primary) !important;
}

html.home-page-shell .service-action:hover,
html.home-page-shell .service-actions button:hover {
    color: var(--ui-primary-strong) !important;
}

/* =========================================================================
   13 · 终端 / 日志
   ========================================================================= */
.log-console,
.log-page .log-console,
.relay-log-summary,
#selfServiceResultDetail,
.ss-record-list pre {
    background: var(--ui-surface-sunken) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-card-inner) !important;
    color: var(--ui-ink) !important;
    font-family: var(--ui-font-mono);
    box-shadow: inset 0 1px 2px rgba(26, 22, 48, 0.04) !important;
}

.log-inline-toolbar {
    background: var(--ui-surface-soft) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-card-inner) !important;
    padding: 0.55rem 0.7rem !important;
}

.log-toolbar-chip {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    color: var(--ui-muted) !important;
}

.log-toolbar-chip strong {
    color: var(--ui-ink) !important;
}

.log-inline-toolbar .form-check-label {
    color: var(--ui-ink-soft) !important;
}

.relay-log-item,
.relay-log-raw-line,
.relay-log-client-chip,
.relay-log-field,
.relay-log-unlock-chip,
.relay-log-summary-chip {
    border-radius: var(--ui-radius-xs) !important;
    border-color: var(--ui-border) !important;
}

/* =========================================================================
   14 · 登录 / 公共页
   ========================================================================= */
.auth-shell,
.public-shell {
    --auth-accent: var(--ui-primary);
    --accent-color: var(--ui-primary);
}

.auth-note-card {
    background: var(--ui-primary-softer) !important;
    border: 1px solid var(--ui-primary-line) !important;
    border-radius: var(--ui-radius-card-inner) !important;
}

.auth-chip {
    background: var(--ui-neutral-soft) !important;
    border: 1px solid var(--ui-neutral-line) !important;
    color: var(--ui-ink-soft) !important;
}

.auth-card,
.public-card,
.public-shell .card,
.auth-shell .card {
    border-radius: var(--ui-radius-lg) !important;
    box-shadow: var(--ui-shadow-lg) !important;
}

/* =========================================================================
   15 · 空状态 / 加载
   ========================================================================= */
.transfer-log-empty,
.relay-log-empty,
.log-empty,
.empty-state,
.text-center.text-muted.py-4,
.text-center.text-muted.py-5 {
    color: var(--ui-muted) !important;
}

.empty-state,
.empty-state-icon {
    border-radius: var(--ui-radius-card-inner) !important;
}

/* 全局加载反馈 */
.spinner-border,
.spinner-grow {
    color: var(--ui-primary);
}

@keyframes ui-skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

.skeleton,
.skeleton-line {
    background: var(--ui-surface-sunken) !important;
    border-radius: var(--ui-radius-xs) !important;
    animation: ui-skeleton-pulse 1.4s var(--ui-ease) infinite;
}

/* =========================================================================
   16 · 图标容器
   ========================================================================= */
.plugin-icon,
.emby-metric-stat-icon,
.home-control-icon,
.status-icon,
.module-icon,
.service-icon {
    border-radius: var(--ui-radius-sm) !important;
}

.module-icon,
.status-icon {
    transition: transform var(--ui-dur) var(--ui-ease) !important;
}

.module-card:hover .module-icon,
.overview-card:hover .module-icon {
    transform: scale(1.06);
}

/* =========================================================================
   17 · 移动端顶栏
   ========================================================================= */
.mobile-header {
    background: var(--mp-header-bg) !important;
    border-bottom: 1px solid var(--ui-border) !important;
    box-shadow: var(--ui-shadow-sm) !important;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
}

.mobile-header .btn-dark {
    background: var(--ui-surface-soft) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-sm) !important;
    color: var(--ui-ink) !important;
}

/* =========================================================================
   18 · 深色模式细节
   ========================================================================= */
:root[data-theme="dark"] .form-switch .form-check-input {
    background-color: var(--ui-surface-sunken) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%239c99ab'/%3e%3c/svg%3e") !important;
}

:root[data-theme="dark"] .form-switch .form-check-input:checked {
    background-color: var(--ui-primary) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}

:root[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(180%);
    opacity: 0.68;
}

:root[data-theme="dark"] .table > thead th {
    background: var(--ui-surface-soft) !important;
    color: var(--ui-muted) !important;
}

:root[data-theme="dark"] .log-console,
:root[data-theme="dark"] .log-page .log-console,
:root[data-theme="dark"] .relay-log-summary,
:root[data-theme="dark"] #selfServiceResultDetail,
:root[data-theme="dark"] .ss-record-list pre,
:root[data-theme="dark"] pre {
    background: var(--ui-surface-sunken) !important;
    color: var(--ui-ink) !important;
    border-color: var(--ui-border) !important;
}

:root[data-theme="dark"] .modal-content {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
}

:root[data-theme="dark"] .modal-header,
:root[data-theme="dark"] .modal-body,
:root[data-theme="dark"] .modal-footer,
:root[data-theme="dark"] .modal .bg-light,
:root[data-theme="dark"] .modal .accordion-button,
:root[data-theme="dark"] .modal .accordion-item,
:root[data-theme="dark"] .modal .list-group-item {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-ink) !important;
}

:root[data-theme="dark"] .modal-footer {
    background: var(--ui-surface-soft) !important;
}

:root[data-theme="dark"] .mobile-header {
    background: var(--mp-header-bg) !important;
    border-bottom-color: var(--ui-border) !important;
}

:root[data-theme="dark"] .sidebar-overlay.active {
    background: rgba(6, 6, 12, 0.6);
}

:root[data-theme="dark"] .alert {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
}

:root[data-theme="dark"] .version-update-banner {
    background: var(--ui-surface) !important;
}

/* =========================================================================
   19 · 响应式微调
   ========================================================================= */
@media (max-width: 991.98px) {
    .sidebar {
        box-shadow: var(--ui-shadow-lg) !important;
    }

    .card,
    .main-content .card {
        border-radius: var(--ui-radius-card-inner) !important;
    }

    .card-body {
        padding: 1rem !important;
    }

    .modal-content {
        border-radius: var(--ui-radius-md) !important;
    }
}

@media (max-width: 575.98px) {
    h2 { font-size: 1.2rem; }

    .card-header {
        padding: 0.75rem 1rem !important;
    }
}

/* =========================================================================
   原 ui-cards.css
   ========================================================================= */

/* =========================================================================
   TG File Monitor · UI Cards
   卡片层级重构层 —— 在 ui-tokens / ui-polish 之上建立清晰可辨的卡片层次体系
   -------------------------------------------------------------------------
   引入顺序： bootstrap → compact-help → moviepilot-theme → ui-tokens
              → ui-polish → ui-cards（本层，最后加载，优先级最高）
   -------------------------------------------------------------------------
   层级模型：
     L1 外层卡片  .card                 白色表面 · 大圆角 · 扩散投影 · 发丝描边
     L2 卡片头部  .card-header          浅色分区底 · 左侧强调条 · 底部分隔线
     L3 内嵌卡片  subcards / metric     下沉淡色底 · 内阴影 · 无外投影
     L4 交互卡片  hover                 抬升 · 主色描边 · 增强投影
   设计原则：只做「视觉层次增强」，不改变布局尺寸与定位逻辑，零结构风险。
   ========================================================================= */

:root {
    --ui-card-radius: 1rem;
    --ui-card-radius-inner: 0.75rem;

    /* 扩散投影：比 ui-shadow 更「浮」，用于拉开卡片与页面的层次 */
    --ui-card-shadow: 0 1px 2px rgba(26, 22, 48, 0.05),
        0 12px 30px -18px rgba(26, 22, 48, 0.18);
    --ui-card-shadow-hover: 0 2px 6px rgba(26, 22, 48, 0.07),
        0 22px 46px -22px rgba(26, 22, 48, 0.28);

    /* 卡片头部分区底色 */
    --ui-card-header-bg: linear-gradient(180deg, #fbfbfe 0%, #f5f6fa 100%);
    --ui-card-accent: var(--ui-primary);
}

:root[data-theme="dark"] {
    --ui-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.34),
        0 14px 34px -18px rgba(0, 0, 0, 0.62);
    --ui-card-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.44),
        0 26px 52px -22px rgba(0, 0, 0, 0.72);
    --ui-card-header-bg: linear-gradient(180deg, #1e212b 0%, #181b23 100%);
}

/* =========================================================================
   1 · 外层卡片 L1 —— 白色表面 + 大圆角 + 扩散投影
   ========================================================================= */
.card,
.main-content .card {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-card-radius) !important;
    box-shadow: var(--ui-card-shadow) !important;
    overflow: hidden;
}

/* 顶部高光：让卡片有「实体感」而非纯平面（深色模式下自动变淡） */
.card::after,
.main-content .card::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.7) 50%,
            transparent 100%);
    pointer-events: none;
}

:root[data-theme="dark"] .card::after {
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.08) 50%,
            transparent 100%);
}

/* 卡片作为定位上下文（配合 ::after 高光与头部强调条） */
.card {
    position: relative;
}

/* =========================================================================
   2 · 卡片头部 L2 —— 与正文拉开层次（本次重构的核心）
   ========================================================================= */

/* 2.1 无底色的普通头部：浅色分区底 + 底部分隔线 + 加重排版 */
.card .card-header:not(.bg-primary):not(.bg-success):not(.bg-dark):not(.bg-info):not(.bg-warning):not(.bg-danger):not(.bg-secondary):not(.text-white) {
    background: var(--ui-card-header-bg) !important;
    border-bottom: 1px solid var(--ui-border) !important;
    color: var(--ui-ink) !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
}

/* 2.2 所有头部统一：预留强调条空间 */
.card .card-header {
    position: relative;
    padding-left: 1.5rem !important;
    border-bottom: 1px solid var(--ui-border) !important;
}

/* 2.3 左侧强调条 —— 一眼区分「头部 / 正文」 */
.card .card-header::before {
    content: "";
    position: absolute;
    left: 0.72rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 1.05rem;
    max-height: 60%;
    border-radius: 99px;
    background: var(--ui-card-accent);
    opacity: 0.9;
}

/* 2.4 强调条随语义色变化 */
.card .card-header.bg-primary::before,
.card .card-header.bg-info::before {
    background: var(--ui-primary);
}

.card .card-header.bg-success::before {
    background: var(--ui-success);
}

.card .card-header.bg-warning::before {
    background: var(--ui-warning);
}

.card .card-header.bg-danger::before {
    background: var(--ui-error);
}

.card .card-header.bg-dark::before,
.card .card-header.bg-secondary::before {
    background: var(--ui-neutral);
}

/* 2.5 头部标题排版加重，建立「标题 > 正文」的阅读层级 */
.card .card-header h1,
.card .card-header h2,
.card .card-header h3,
.card .card-header h4,
.card .card-header h5,
.card .card-header h6 {
    margin-bottom: 0;
    font-weight: 700 !important;
    letter-spacing: -0.012em;
}

.card .card-header h5,
.card .card-header h6 {
    font-size: 0.95rem;
}

/* =========================================================================
   3 · 交互卡片 L4 —— 抬升 + 主色描边 + 增强投影
   ========================================================================= */
.card:hover,
.main-content .card:hover {
    border-color: var(--ui-border-strong) !important;
    box-shadow: var(--ui-card-shadow-hover) !important;
}

/* 可点击的内嵌卡片：明显的抬升反馈 */
.log-hub-card,
.plugin-card,
.tool-subcard,
.hero-node,
.settings-metric-card {
    transition: transform var(--ui-dur) var(--ui-ease),
        border-color var(--ui-dur) var(--ui-ease),
        box-shadow var(--ui-dur) var(--ui-ease),
        background var(--ui-dur) var(--ui-ease) !important;
}

.log-hub-card:hover,
.plugin-card:hover,
.tool-subcard:hover {
    transform: translateY(-3px);
    border-color: var(--ui-primary-line) !important;
    box-shadow: var(--ui-card-shadow-hover) !important;
}

/* =========================================================================
   4 · 指标卡 L2.5 ——「浮起英雄层」：纯白表面 + 描边 + 扩散投影 + hover 抬升
   ========================================================================= */
.module-metric,
.file-metric-card,
.file-config-metric,
.extension-stat,
.settings-metric-card {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-card-radius-inner) !important;
    box-shadow: var(--ui-card-shadow) !important;
    transition: transform var(--ui-dur) var(--ui-ease),
                border-color var(--ui-dur) var(--ui-ease),
                box-shadow var(--ui-dur) var(--ui-ease) !important;
}

.module-metric:hover,
.file-metric-card:hover,
.extension-stat:hover,
.settings-metric-card:hover {
    transform: translateY(-2px);
    border-color: var(--ui-primary-line) !important;
    box-shadow: var(--ui-card-shadow-hover) !important;
}

/* =========================================================================
   4b · 沉底元素 L3 —— 下沉淡色底 + 内阴影，与浮起层形成「凹 / 凸」对比
   ========================================================================= */
.file-global-info-row,
.file-global-subcard,
.extension-muted-box,
.tool-subcard,
.ss-form-shell,
.ss-hint-card,
.settings-topbar {
    background: var(--ui-surface-sunken) !important;
    border: 1px solid var(--ui-border-hairline) !important;
    border-radius: var(--ui-card-radius-inner) !important;
    box-shadow: inset 0 1px 2px rgba(26, 22, 48, 0.035) !important;
}

:root[data-theme="dark"] .file-global-info-row,
:root[data-theme="dark"] .file-global-subcard,
:root[data-theme="dark"] .extension-muted-box,
:root[data-theme="dark"] .tool-subcard,
:root[data-theme="dark"] .ss-form-shell,
:root[data-theme="dark"] .ss-hint-card,
:root[data-theme="dark"] .settings-topbar {
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* =========================================================================
   5 · 分区标题 —— 左侧强调条建立「章节」层级
   ========================================================================= */
.file-section-label,
.section-label,
.card-section-label {
    position: relative;
    padding-left: 0.72rem;
}

.file-section-label::before,
.section-label::before,
.card-section-label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.12em;
    bottom: 0.12em;
    width: 3px;
    border-radius: 99px;
    background: var(--ui-primary);
}

.file-section-header h4 {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.015em;
}

/* =========================================================================
   6 · 指标数字 —— 等宽数字对齐 + 放大，强化「重点数据」层级
   ========================================================================= */
.file-metric-value,
.extension-stat-value,
.settings-metric-value,
.module-metric-value,
.hero-metric-value,
.emby-metric-stat .card-body h3,
.emby-metric-stat .card-body h4 {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/* =========================================================================
   7 · 首页工作台轻量适配（首页自成体系，仅做层次对齐）
   ========================================================================= */
html.home-page-shell .home-panel {
    border-radius: var(--ui-card-radius) !important;
    box-shadow: var(--ui-card-shadow) !important;
}

html.home-page-shell .home-panel:hover {
    box-shadow: var(--ui-card-shadow-hover) !important;
}

/* 首页分区小标题（如「快捷入口」「运行队列」）左侧强调条 */
html.home-page-shell .panel-head h2,
html.home-page-shell .panel-head h3 {
    font-weight: 750 !important;
    letter-spacing: -0.02em;
}

/* =========================================================================
   8 · 移动端：缩小圆角，避免小屏卡片显得笨重
   ========================================================================= */
@media (max-width: 640px) {
    :root {
        --ui-card-radius: 0.85rem;
    }
}

/* =========================================================================
   原 ui-immersive.css
   ========================================================================= */

/* =========================================================================
   TG File Monitor · UI Immersive Shell
   深色沉浸式外壳层 —— 侧边栏 / 顶栏改为深色壳体，内容区保持浅色
   -------------------------------------------------------------------------
   引入顺序： bootstrap → compact-help → moviepilot-theme → ui-tokens
              → ui-polish → ui-cards → ui-immersive（本层，最后加载）
   -------------------------------------------------------------------------
   设计意图：
     · 深色「壳体」（侧边栏 / 移动端顶栏）与浅色「内容区」形成强明暗对比，
       这是整套 UI 高级感与沉浸感的主要来源。
     · 壳体统一使用近黑紫灰 + 紫色光晕，与主色 #8b5cf6 呼应。
     · 深色模式下壳体比内容区略亮一档，仍能清晰分离。
   注意：本层只改颜色 / 阴影 / 边框，不动任何尺寸与定位，零布局风险。
   ========================================================================= */

:root {
    /* 浅色主题：浅色玻璃壳体（2026-10-11 用户定案：浅色模式全浅） */
    --shell-bg: linear-gradient(178deg, #fdfcff 0%, #f6f4fb 60%, #f0eef8 100%);
    --shell-bg-flat: #f8f6fc;
    --shell-ink: #262040;
    --shell-ink-soft: #57526e;
    --shell-muted: #8d87a2;
    --shell-line: rgba(40, 32, 70, 0.08);
    --shell-line-strong: rgba(40, 32, 70, 0.18);
    --shell-hover: rgba(96, 74, 170, 0.08);
    --shell-hover-ink: #262040;
    --shell-glow: rgba(139, 92, 246, 0.35);
    --shell-chip: rgba(139, 92, 246, 0.09);
    --shell-scroll: rgba(40, 32, 70, 0.16);
    --shell-scroll-strong: rgba(40, 32, 70, 0.28);
    --shell-shadow: 18px 0 46px -32px rgba(50, 40, 90, 0.4);
    --shell-header-shadow: 0 10px 30px -22px rgba(50, 40, 90, 0.45);

    /* 浅色壳体内的图标用饱和色（保证对比度） */
    --shell-icon-primary: #7c5cf0;
    --shell-icon-info: #0e9fd8;
    --shell-icon-success: #18a065;
    --shell-icon-warning: #d98a1f;
    --shell-icon-secondary: #7d8291;

    --shell-header-bg: rgba(251, 250, 254, 0.92);
    --shell-btn-contrast-bg: rgba(35, 28, 60, 0.9);
    --shell-btn-contrast-ink: #ffffff;
    --shell-grid-opacity: 0.2;
    --shell-glow-opacity: 0.35;
}

/* 深色主题：近黑紫灰壳体（原「深色沉浸式」方案） */
:root[data-theme="dark"] {
    --shell-bg: linear-gradient(178deg, #201c2e 0%, #1a1725 52%, #151220 100%);
    --shell-bg-flat: #1a1725;
    --shell-ink: #efecf8;
    --shell-ink-soft: #b8b1c9;
    --shell-muted: #837c96;
    --shell-line: rgba(255, 255, 255, 0.09);
    --shell-line-strong: rgba(255, 255, 255, 0.16);
    --shell-hover: rgba(255, 255, 255, 0.07);
    --shell-hover-ink: #ffffff;
    --shell-glow: rgba(139, 92, 246, 0.55);
    --shell-chip: rgba(255, 255, 255, 0.08);
    --shell-scroll: rgba(255, 255, 255, 0.16);
    --shell-scroll-strong: rgba(255, 255, 255, 0.26);
    --shell-shadow: 22px 0 60px -34px rgba(10, 6, 30, 0.75);
    --shell-header-shadow: 0 10px 30px -20px rgba(10, 6, 30, 0.8);

    --shell-icon-primary: #b49bff;
    --shell-icon-info: #63c8f2;
    --shell-icon-success: #5fd894;
    --shell-icon-warning: #f2c060;
    --shell-icon-secondary: #a8aebb;

    --shell-header-bg: rgba(23, 20, 31, 0.94);
    --shell-btn-contrast-bg: rgba(255, 255, 255, 0.92);
    --shell-btn-contrast-ink: #17141f;
    --shell-grid-opacity: 0.35;
    --shell-glow-opacity: 1;
}

/* =========================================================================
   1 · 深色侧边栏壳体
   ========================================================================= */
.sidebar {
    background: var(--shell-bg) !important;
    border-right: 1px solid var(--shell-line) !important;
    box-shadow: var(--shell-shadow) !important;
    color: var(--shell-ink) !important;
}

/* 装饰光晕与网格纹理：强度随主题走 */
.sidebar::after {
    background: radial-gradient(circle, rgba(139, 92, 246, 0.28), transparent 70%) !important;
    opacity: var(--shell-glow-opacity) !important;
    filter: blur(16px) !important;
}

.sidebar::before {
    opacity: var(--shell-grid-opacity) !important;
}

/* =========================================================================
   2 · 品牌区
   ========================================================================= */
.sidebar-brand,
.sidebar-brand:hover,
.sidebar-brand-home,
.sidebar-brand-home:hover,
.sidebar-brand-home:focus {
    color: var(--shell-ink) !important;
}

.sidebar-brand-title {
    color: var(--shell-ink) !important;
    font-weight: 800 !important;
}

/* 版本徽标：跟随主题的玻璃底 */
.sidebar-version-badge {
    background: var(--shell-chip) !important;
    color: var(--shell-ink-soft) !important;
    border: 1px solid var(--shell-line-strong) !important;
}

/* =========================================================================
   3 · 分区标签：深色下加一条渐隐分隔线
   ========================================================================= */
.sidebar-section-label,
html.home-page-shell .sidebar-section-label {
    color: var(--shell-muted) !important;
}

.sidebar-section-label::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    margin-left: 0.15rem;
    background: linear-gradient(90deg, var(--shell-line-strong), transparent);
}

/* =========================================================================
   4 · 导航项
   ========================================================================= */
.sidebar .nav-link,
html.home-page-shell .sidebar .nav-link {
    color: var(--shell-ink-soft) !important;
    font-weight: 550 !important;
}

.sidebar .nav-link:hover,
html.home-page-shell .sidebar .nav-link:hover {
    background: var(--shell-hover) !important;
    color: var(--shell-hover-ink) !important;
}

.sidebar .nav-link.active,
html.home-page-shell .sidebar .nav-link.active {
    background: var(--ui-primary-gradient) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 12px 28px -12px var(--shell-glow) !important;
}

.sidebar .nav-link.active::before {
    opacity: 1 !important;
    background: #fff !important;
    box-shadow: 0 0 12px 1px rgba(255, 255, 255, 0.6);
}

/* 4.1 图标亮度提升（需压过 home-page-shell 的灰色覆盖规则） */
html:root .sidebar .nav-link i.nav-icon--primary {
    color: var(--shell-icon-primary) !important;
}

html:root .sidebar .nav-link i.nav-icon--info {
    color: var(--shell-icon-info) !important;
}

html:root .sidebar .nav-link i.nav-icon--success {
    color: var(--shell-icon-success) !important;
}

html:root .sidebar .nav-link i.nav-icon--warning {
    color: var(--shell-icon-warning) !important;
}

html:root .sidebar .nav-link i.nav-icon--secondary {
    color: var(--shell-icon-secondary) !important;
}

/* 4.2 悬停 / 激活时图标统一为白色 */
html:root .sidebar .nav-link:hover i,
html:root .sidebar .nav-link.active i,
html:root .sidebar .nav-link.active:hover i {
    color: #fff !important;
    background: transparent !important;
}

/* 4.3 侧栏滚动条（随主题） */
.sidebar .nav::-webkit-scrollbar-thumb {
    background: var(--shell-scroll) !important;
}

.sidebar .nav::-webkit-scrollbar-thumb:hover {
    background: var(--shell-scroll-strong) !important;
}

/* =========================================================================
   5 · 侧边栏底部操作区
   ========================================================================= */
.sidebar-footer {
    background: transparent !important;
    border-top: 1px solid var(--shell-line) !important;
}

.sidebar-footer .btn-outline-light {
    border-color: var(--shell-line-strong) !important;
    color: var(--shell-ink) !important;
}

.sidebar-footer .btn-outline-light:hover,
.sidebar-footer .btn-outline-light:focus {
    background: var(--shell-hover) !important;
    border-color: var(--shell-line-strong) !important;
    color: var(--shell-ink) !important;
}

.sidebar-footer .theme-toggle-btn,
.sidebar .theme-toggle-btn {
    color: var(--shell-ink-soft) !important;
    border-color: var(--shell-line-strong) !important;
}

.sidebar-footer .theme-toggle-btn:hover,
.sidebar .theme-toggle-btn:hover {
    background: var(--shell-hover) !important;
    color: var(--shell-hover-ink) !important;
}

/* =========================================================================
   6 · 移动端顶栏（深色）
   ========================================================================= */
.mobile-header {
    background: var(--shell-header-bg) !important;
    border-bottom: 1px solid var(--shell-line) !important;
    box-shadow: var(--shell-header-shadow) !important;
    color: var(--shell-ink) !important;
}

.mobile-header .text-primary {
    color: var(--shell-icon-primary) !important;
}

.mobile-header .fw-bold {
    color: var(--shell-ink) !important;
}

.mobile-header .btn-dark {
    background: var(--shell-btn-contrast-bg) !important;
    border: 1px solid transparent !important;
    color: var(--shell-btn-contrast-ink) !important;
}

.mobile-header .theme-toggle-btn {
    color: var(--shell-ink-soft) !important;
    border-color: var(--shell-line-strong) !important;
}

.mobile-header .theme-toggle-btn:hover {
    background: var(--shell-hover) !important;
    color: var(--shell-hover-ink) !important;
}

:root[data-theme="dark"] .mobile-header {
    background: var(--shell-header-bg) !important;
    border-bottom-color: var(--shell-line) !important;
}

/* =========================================================================
   7 · 内容区微调：与深色壳体衔接更干净
   ========================================================================= */
.main-content {
    background: var(--ui-bg) !important;
}

/* =========================================================================
   8 · 首页 home-page-shell 侧栏夺回（仅深色模式）
   index.html 内联样式以 (0,2,1)+!important 强制浅色侧栏底、浅色图标片、
   深色标题字。深色模式下这里以 (0,4,x) 夺回为深色壳体；浅色模式下首页
   回落自带的浅色玻璃侧栏（2026-10-11 用户定案：浅色模式全浅），正好一致。
   注意：.home-page-shell 类挂在 html 元素本身，必须写同元素复合选择器
   html:root.home-page-shell[...]，写成后代选择器永远匹配不上。
   ========================================================================= */
html:root.home-page-shell[data-theme="dark"] .sidebar {
    background: var(--shell-bg) !important;
    border-right: 1px solid var(--shell-line) !important;
    box-shadow: var(--shell-shadow) !important;
    color: var(--shell-ink) !important;
}

/* 导航图标底片：浅灰片 → 深色玻璃片 */
html:root.home-page-shell[data-theme="dark"] .sidebar .nav-link i {
    background: var(--shell-chip) !important;
    color: var(--shell-ink-soft) !important;
}

/* 品牌标题：深底配浅字 */
html:root.home-page-shell[data-theme="dark"] .sidebar-brand-title {
    color: var(--shell-ink) !important;
}

/* 版本徽标：深色玻璃 */
html:root.home-page-shell[data-theme="dark"] .sidebar-version-badge {
    background: var(--shell-chip) !important;
    color: var(--shell-ink-soft) !important;
    border: 1px solid var(--shell-line-strong) !important;
}

/* 分区标签渐隐分隔线：浅灰线 → 壳体线 */
html:root.home-page-shell[data-theme="dark"] .sidebar-section-label {
    color: var(--shell-muted) !important;
}

html:root.home-page-shell[data-theme="dark"] .sidebar-section-label::after {
    background: linear-gradient(90deg, var(--shell-line-strong), transparent) !important;
}

/* 底部操作区：白底 → 透明 + 壳体分隔线 */
html:root.home-page-shell[data-theme="dark"] .sidebar-footer {
    background: transparent !important;
    border-color: var(--shell-line) !important;
}

/* 激活项：紫胶囊上必须白字（压过首页内联的紫字规则） */
html:root.home-page-shell .sidebar .nav-link.active {
    color: #fff !important;
}

html:root.home-page-shell .sidebar .nav-link.active i {
    color: #fff !important;
    background: transparent !important;
}

/* =========================================================================
   9 · 首页英雄横幅浅色化（仅浅色模式）
   .home-hero 原为深紫渐变+白字（index.html 内联，2026-10-11 用户定案：
   浅色模式下横幅也改浅）。深色模式保持原深紫横幅不动。
   ========================================================================= */
:root:not([data-theme="dark"]) .home-hero {
    color: #262040 !important;
    background: linear-gradient(112deg, #f6f3fe 0%, #ede8fc 57%, #e4dcfa 100%) !important;
    box-shadow: 0 22px 50px rgba(88, 66, 160, 0.14) !important;
}

:root:not([data-theme="dark"]) .home-hero::before {
    border-color: rgba(124, 92, 240, 0.16) !important;
    box-shadow: 0 0 0 3rem rgba(124, 92, 240, 0.045), 0 0 0 6rem rgba(124, 92, 240, 0.03) !important;
}

:root:not([data-theme="dark"]) .home-eyebrow {
    color: #7c5cf0 !important;
}

:root:not([data-theme="dark"]) .home-hero h2 {
    color: #262040 !important;
}

:root:not([data-theme="dark"]) .home-hero-description {
    color: rgba(38, 32, 64, 0.68) !important;
}

:root:not([data-theme="dark"]) .hero-metric {
    border-color: rgba(90, 60, 180, 0.16) !important;
    background: rgba(255, 255, 255, 0.62) !important;
}

:root:not([data-theme="dark"]) .hero-metric-label {
    color: #6f688c !important;
}

:root:not([data-theme="dark"]) .hero-metric-value {
    color: #262040 !important;
}

:root:not([data-theme="dark"]) .hero-metric-note {
    color: #18a065 !important;
}

:root:not([data-theme="dark"]) .hero-metric-note.is-warning {
    color: #c07a14 !important;
}

:root:not([data-theme="dark"]) .hero-trend-head {
    color: #6f688c !important;
}

:root:not([data-theme="dark"]) .hero-trend polyline {
    stroke: #8b5cf6 !important;
}

:root:not([data-theme="dark"]) .trend-empty-label {
    color: #9a93b0 !important;
}

:root:not([data-theme="dark"]) .home-ops-controls {
    border-top-color: rgba(90, 60, 180, 0.14) !important;
}

:root:not([data-theme="dark"]) .home-control-form,
:root:not([data-theme="dark"]) .home-control-item {
    border-color: rgba(90, 60, 180, 0.18) !important;
    background: rgba(255, 255, 255, 0.55) !important;
    color: #453e68 !important;
}

:root:not([data-theme="dark"]) .home-control-form label,
:root:not([data-theme="dark"]) .home-control-form span,
:root:not([data-theme="dark"]) .home-control-item,
:root:not([data-theme="dark"]) .home-control-item i {
    color: #453e68 !important;
}

:root:not([data-theme="dark"]) .home-control-form .form-select {
    border-color: rgba(124, 92, 240, 0.35) !important;
    background-color: #fff !important;
    color: #342b58 !important;
}

/* =========================================================================
   原 ui-aurora.css
   ========================================================================= */

/* =========================================================================
   ui-aurora.css · 极光玻璃拟态层 —— 视觉惊艳终极层
   位于 ui-immersive.css 之后加载，全站优先级最高。
   核心：流动极光渐变背景 + 毛玻璃卡片 + 渐变数字/标题/按钮。
   依赖 ui-tokens.css 的 --ui-* 令牌与 ui-immersive.css 的深色壳体。
   ========================================================================= */

/* --------------------------------------------------------------------------
   0 · 动画
   -------------------------------------------------------------------------- */
@keyframes aurora-drift {
    0%   { transform: translate3d(-3%, -2%, 0) scale(1); }
    50%  { transform: translate3d(3%, 2%, 0) scale(1.08); }
    100% { transform: translate3d(-1%, 4%, 0) scale(1.03); }
}
@keyframes aurora-rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}
@keyframes aurora-glow-pulse {
    0%, 100% { box-shadow: 0 0 16px rgba(139, 92, 246, .38); }
    50%      { box-shadow: 0 0 30px rgba(139, 92, 246, .70); }
}

/* --------------------------------------------------------------------------
   1 · 极光背景（浅色）—— 四色极光斑缓慢漂移，铺满全站
   注意：moviepilot-theme 曾 display:none 隐藏 body::before，这里强制恢复；
   底色放在 html 上，body 透明，否则 body 自身背景会盖住负 z-index 的极光。
   -------------------------------------------------------------------------- */
html {
    background: #eaecf6 !important;
}
body {
    background: transparent !important;
}
body::before {
    display: block !important;
    content: "";
    position: fixed;
    inset: -8%;
    z-index: -1;
    pointer-events: none;
    opacity: 1 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    background:
        radial-gradient(38% 44% at 26% 0%,   rgba(139, 92, 246, .40), transparent 68%),
        radial-gradient(42% 48% at 72% 0%,   rgba(56, 189, 248, .32),  transparent 68%),
        radial-gradient(36% 42% at 100% 52%, rgba(236, 72, 153, .22),  transparent 70%),
        radial-gradient(34% 40% at 24% 100%, rgba(52, 211, 153, .20),  transparent 70%),
        radial-gradient(30% 34% at 56% 38%,  rgba(99, 102, 241, .12),  transparent 72%);
    filter: blur(30px);
    animation: aurora-drift 34s ease-in-out infinite alternate;
    will-change: transform;
}
/* 内容区让出底色，让极光透出来 */
.main-content,
.home-dashboard,
.container-fluid {
    background: transparent !important;
}

/* 首页内联样式带 html.home-page-shell 前缀、优先级更高，这里同前缀反制 */
html.home-page-shell body,
html.home-page-shell .main-content,
html.home-page-shell .home-dashboard {
    background: transparent !important;
}
html.home-page-shell body::before {
    display: block !important;
    content: "";
    position: fixed;
    inset: -8%;
    z-index: -1;
    pointer-events: none;
    opacity: 1 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    background:
        radial-gradient(38% 44% at 26% 0%,   rgba(139, 92, 246, .40), transparent 68%),
        radial-gradient(42% 48% at 72% 0%,   rgba(56, 189, 248, .32),  transparent 68%),
        radial-gradient(36% 42% at 100% 52%, rgba(236, 72, 153, .22),  transparent 70%),
        radial-gradient(34% 40% at 24% 100%, rgba(52, 211, 153, .20),  transparent 70%),
        radial-gradient(30% 34% at 56% 38%,  rgba(99, 102, 241, .12),  transparent 72%);
    filter: blur(30px);
    animation: aurora-drift 34s ease-in-out infinite alternate;
    will-change: transform;
}
html.home-page-shell[data-theme="dark"] body::before {
    background:
        radial-gradient(38% 44% at 26% 2%,   rgba(139, 92, 246, .36), transparent 66%),
        radial-gradient(42% 48% at 74% 0%,   rgba(34, 211, 238, .22),  transparent 66%),
        radial-gradient(36% 42% at 100% 56%, rgba(217, 70, 239, .18),  transparent 70%),
        radial-gradient(34% 40% at 20% 98%,  rgba(59, 130, 246, .16),  transparent 70%);
}

/* --------------------------------------------------------------------------
   1b · 极光背景（深色）—— 深空底 + 高饱和极光
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] {
    background: #14161f !important;
}
:root[data-theme="dark"] body::before {
    background:
        radial-gradient(38% 44% at 26% 2%,   rgba(139, 92, 246, .36), transparent 66%),
        radial-gradient(42% 48% at 74% 0%,   rgba(34, 211, 238, .22),  transparent 66%),
        radial-gradient(36% 42% at 100% 56%, rgba(217, 70, 239, .18),  transparent 70%),
        radial-gradient(34% 40% at 20% 98%,  rgba(59, 130, 246, .16),  transparent 70%);
}

/* --------------------------------------------------------------------------
   2 · 毛玻璃卡片（L2 主卡片）
   -------------------------------------------------------------------------- */
.card {
    background: rgba(255, 255, 255, .50) !important;
    -webkit-backdrop-filter: blur(24px) saturate(170%);
    backdrop-filter: blur(24px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, .62) !important;
    border-radius: 1.05rem !important;
    box-shadow:
        0 10px 42px -14px rgba(93, 63, 190, .18),
        0 2px 10px -5px rgba(93, 63, 190, .10),
        inset 0 1px 0 rgba(255, 255, 255, .85) !important;
    transition: transform .35s cubic-bezier(.22, .68, .32, 1),
                box-shadow .35s cubic-bezier(.22, .68, .32, 1),
                border-color .35s ease !important;
    animation: aurora-rise .5s cubic-bezier(.22, .68, .32, 1) both;
}
.card:nth-child(2n)   { animation-delay: .05s; }
.card:nth-child(3n)   { animation-delay: .10s; }
.card:nth-child(5n)   { animation-delay: .16s; }

.card:hover {
    transform: translateY(-3px);
    border-color: rgba(139, 92, 246, .35) !important;
    box-shadow:
        0 20px 58px -18px rgba(93, 63, 190, .32),
        0 4px 14px -6px rgba(93, 63, 190, .14),
        inset 0 1px 0 rgba(255, 255, 255, .95) !important;
}

:root[data-theme="dark"] .card {
    background: rgba(21, 23, 37, .60) !important;
    border-color: rgba(139, 92, 246, .17) !important;
    box-shadow:
        0 12px 46px -14px rgba(0, 0, 0, .60),
        0 2px 10px -5px rgba(0, 0, 0, .40),
        inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}
:root[data-theme="dark"] .card:hover {
    border-color: rgba(139, 92, 246, .45) !important;
    box-shadow:
        0 22px 62px -18px rgba(0, 0, 0, .74),
        0 0 26px -8px rgba(139, 92, 246, .28),
        inset 0 1px 0 rgba(255, 255, 255, .10) !important;
}

/* --------------------------------------------------------------------------
   3 · 卡片头部 —— 半透明渐变 + 底部发丝线
   -------------------------------------------------------------------------- */
.card .card-header {
    background: linear-gradient(180deg,
        rgba(255, 255, 255, .58),
        rgba(255, 255, 255, .16)) !important;
    border-bottom: 1px solid rgba(139, 92, 246, .12) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
:root[data-theme="dark"] .card .card-header {
    background: linear-gradient(180deg,
        rgba(255, 255, 255, .05),
        rgba(255, 255, 255, .015)) !important;
    border-bottom-color: rgba(139, 92, 246, .18) !important;
}

/* --------------------------------------------------------------------------
   4 · 配置页分区（settings-section）与折叠面板（accordion）
   -------------------------------------------------------------------------- */
.settings-section {
    background: rgba(255, 255, 255, .50) !important;
    -webkit-backdrop-filter: blur(24px) saturate(170%);
    backdrop-filter: blur(24px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, .62) !important;
    border-radius: 1.05rem !important;
    box-shadow: 0 10px 42px -14px rgba(93, 63, 190, .18) !important;
    animation: aurora-rise .5s cubic-bezier(.22, .68, .32, 1) both;
}
:root[data-theme="dark"] .settings-section {
    background: rgba(21, 23, 37, .60) !important;
    border-color: rgba(139, 92, 246, .17) !important;
    box-shadow: 0 12px 46px -14px rgba(0, 0, 0, .60) !important;
}

.accordion-item {
    background: rgba(255, 255, 255, .55) !important;
    border: 1px solid rgba(139, 92, 246, .10) !important;
    border-radius: .85rem !important;
    overflow: hidden;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
.accordion-button {
    background: linear-gradient(180deg,
        rgba(255, 255, 255, .55),
        rgba(255, 255, 255, .18)) !important;
    font-weight: 600 !important;
    transition: background .25s ease, box-shadow .25s ease !important;
}
.accordion-button:not(.collapsed) {
    background: linear-gradient(135deg,
        rgba(139, 92, 246, .16),
        rgba(56, 189, 248, .10)) !important;
    color: #6d3ee0 !important;
    box-shadow: inset 0 -1px 0 rgba(139, 92, 246, .18);
}
.accordion-button:focus { box-shadow: 0 0 0 4px rgba(139, 92, 246, .15) !important; }
:root[data-theme="dark"] .accordion-item {
    background: rgba(18, 20, 33, .55) !important;
    border-color: rgba(139, 92, 246, .14) !important;
}
:root[data-theme="dark"] .accordion-button {
    background: linear-gradient(180deg,
        rgba(255, 255, 255, .05),
        rgba(255, 255, 255, .015)) !important;
}
:root[data-theme="dark"] .accordion-button:not(.collapsed) {
    background: linear-gradient(135deg,
        rgba(139, 92, 246, .24),
        rgba(34, 211, 238, .12)) !important;
    color: #c4b5fd !important;
}

/* --------------------------------------------------------------------------
   5 · 指标数字 —— 渐变流光文字（视觉锚点）
   -------------------------------------------------------------------------- */
.file-config-metric-value,
.extension-stat-value,
.settings-metric-value,
.module-metric-value,
.metric-value,
.stat-value {
    background: linear-gradient(120deg,
        #7c3aed 0%, #6366f1 45%, #0ea5e9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800 !important;
    letter-spacing: -.02em;
}
:root[data-theme="dark"] .file-config-metric-value,
:root[data-theme="dark"] .extension-stat-value,
:root[data-theme="dark"] .settings-metric-value,
:root[data-theme="dark"] .module-metric-value,
:root[data-theme="dark"] .metric-value,
:root[data-theme="dark"] .stat-value {
    background: linear-gradient(120deg,
        #a78bfa 0%, #818cf8 45%, #22d3ee 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* 指标卡浮起强化 */
.file-config-metric,
.extension-stat,
.module-metric,
.settings-metric-card {
    background: rgba(255, 255, 255, .64) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, .85) !important;
    box-shadow: 0 10px 34px -12px rgba(93, 63, 190, .22) !important;
    transition: transform .3s cubic-bezier(.22, .68, .32, 1),
                box-shadow .3s ease !important;
}
.file-config-metric:hover,
.extension-stat:hover,
.module-metric:hover,
.settings-metric-card:hover {
    transform: translateY(-3px) scale(1.015);
    box-shadow: 0 18px 48px -14px rgba(93, 63, 190, .34) !important;
}
:root[data-theme="dark"] .file-config-metric,
:root[data-theme="dark"] .extension-stat,
:root[data-theme="dark"] .module-metric,
:root[data-theme="dark"] .settings-metric-card {
    background: rgba(26, 28, 46, .72) !important;
    border-color: rgba(139, 92, 246, .22) !important;
}

/* --------------------------------------------------------------------------
   6 · 按钮 —— 渐变 + 辉光
   -------------------------------------------------------------------------- */
.btn {
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease !important;
    border-radius: .65rem !important;
}
.btn-primary {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d5df6 48%, #4f8ef7 100%) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 8px 20px -7px rgba(124, 92, 246, .60),
                inset 0 1px 0 rgba(255, 255, 255, .28) !important;
}
.btn-primary:hover, .btn-primary:focus {
    filter: brightness(1.10) saturate(1.1);
    transform: translateY(-1px);
    box-shadow: 0 12px 28px -8px rgba(124, 92, 246, .75),
                inset 0 1px 0 rgba(255, 255, 255, .32) !important;
}
.btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border: none !important;
    box-shadow: 0 6px 18px -7px rgba(16, 185, 129, .55) !important;
}
.btn-danger {
    background: linear-gradient(135deg, #f43f5e 0%, #dc2626 100%) !important;
    border: none !important;
    box-shadow: 0 6px 18px -7px rgba(244, 63, 94, .55) !important;
}
.btn-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    border: none !important;
    color: #fff !important;
}
.btn-outline-primary {
    background: rgba(255, 255, 255, .55) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(139, 92, 246, .45) !important;
    color: #6d3ee0 !important;
}
.btn-outline-primary:hover {
    background: linear-gradient(135deg, #8b5cf6, #6d5df6) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px -7px rgba(124, 92, 246, .55) !important;
}
:root[data-theme="dark"] .btn-outline-primary {
    background: rgba(139, 92, 246, .10) !important;
    color: #c4b5fd !important;
}

/* --------------------------------------------------------------------------
   7 · 表单 —— 玻璃输入框 + 紫色聚焦辉光
   -------------------------------------------------------------------------- */
.form-control, .form-select {
    background: rgba(255, 255, 255, .74) !important;
    border: 1px solid rgba(139, 92, 246, .16) !important;
    border-radius: .65rem !important;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
}
.form-control:focus, .form-select:focus {
    background: #fff !important;
    border-color: rgba(139, 92, 246, .60) !important;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, .15) !important;
}
.form-check-input { border: 1px solid rgba(139, 92, 246, .30); }
.form-check-input:checked {
    background-color: #8b5cf6;
    box-shadow: 0 0 10px rgba(139, 92, 246, .45);
}
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select {
    background: rgba(16, 18, 31, .68) !important;
    border-color: rgba(139, 92, 246, .22) !important;
}
:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .form-select:focus {
    background: #171a2c !important;
}
input, select, textarea { accent-color: #8b5cf6; }

/* --------------------------------------------------------------------------
   8 · 表格 —— 玻璃化 + 紫调表头 + 悬浮行高亮
   -------------------------------------------------------------------------- */
.table {
    --bs-table-bg: transparent;
    background: transparent !important;
    border-collapse: separate;
    border-spacing: 0;
}
.table > :not(caption) > * > * {
    background-color: transparent !important;
    border-color: rgba(139, 92, 246, .10);
}
.table > thead > tr > th {
    background: linear-gradient(180deg,
        rgba(139, 92, 246, .14),
        rgba(139, 92, 246, .06)) !important;
    color: #5b3bb8 !important;
    font-weight: 700 !important;
    letter-spacing: .04em;
    border-bottom: 2px solid rgba(139, 92, 246, .22) !important;
}
.table > tbody > tr {
    transition: background .2s ease;
}
.table > tbody > tr:hover > * {
    background: rgba(139, 92, 246, .07) !important;
}
:root[data-theme="dark"] .table > thead > tr > th {
    background: linear-gradient(180deg,
        rgba(139, 92, 246, .22),
        rgba(139, 92, 246, .10)) !important;
    color: #c4b5fd !important;
    border-bottom-color: rgba(139, 92, 246, .35) !important;
}
:root[data-theme="dark"] .table > tbody > tr:hover > * {
    background: rgba(139, 92, 246, .12) !important;
}

/* --------------------------------------------------------------------------
   9 · 徽章 / 标签 / 进度条 —— 渐变微光
   -------------------------------------------------------------------------- */
.badge { border-radius: .55rem !important; }
.badge.bg-success,
.span.badge.text-bg-success {
    background: linear-gradient(135deg, #10b981, #059669) !important;
}
.badge.bg-danger {
    background: linear-gradient(135deg, #f43f5e, #dc2626) !important;
}
.badge.bg-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: #fff !important;
}
.badge.bg-primary {
    background: linear-gradient(135deg, #8b5cf6, #6d5df6) !important;
}
.badge.bg-info {
    background: linear-gradient(135deg, #06b6d4, #0284c7) !important;
}
.progress { background: rgba(139, 92, 246, .12) !important; border-radius: 1rem !important; }
.progress-bar {
    background: linear-gradient(90deg, #8b5cf6, #6366f1, #22d3ee) !important;
}

/* --------------------------------------------------------------------------
   10 · 选项卡 —— 激活项渐变胶囊
   -------------------------------------------------------------------------- */
.nav-tabs { border-bottom: 2px solid rgba(139, 92, 246, .18) !important; }
.nav-tabs .nav-link {
    border: none !important;
    color: #6b7280 !important;
    border-radius: .6rem .6rem 0 0 !important;
    transition: background .25s ease, color .25s ease !important;
}
.nav-tabs .nav-link:hover { background: rgba(139, 92, 246, .08) !important; }
.nav-tabs .nav-link.active {
    background: linear-gradient(135deg, #8b5cf6, #6d5df6) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px -6px rgba(124, 92, 246, .55) !important;
}
.nav-pills .nav-link.active {
    background: linear-gradient(135deg, #8b5cf6, #6d5df6) !important;
    box-shadow: 0 6px 16px -6px rgba(124, 92, 246, .55) !important;
}
:root[data-theme="dark"] .nav-tabs .nav-link { color: #9ca3af !important; }

/* --------------------------------------------------------------------------
   11 · 模态框 / 下拉菜单 —— 玻璃浮层
   -------------------------------------------------------------------------- */
.modal-content {
    background: rgba(255, 255, 255, .82) !important;
    -webkit-backdrop-filter: blur(26px) saturate(160%);
    backdrop-filter: blur(26px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .70) !important;
    border-radius: 1.1rem !important;
    box-shadow: 0 30px 90px -20px rgba(60, 40, 140, .40) !important;
}
.dropdown-menu {
    background: rgba(255, 255, 255, .86) !important;
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .70) !important;
    border-radius: .85rem !important;
    box-shadow: 0 18px 50px -14px rgba(60, 40, 140, .30) !important;
}
.dropdown-item:hover { background: rgba(139, 92, 246, .12) !important; }
:root[data-theme="dark"] .modal-content {
    background: rgba(22, 24, 39, .82) !important;
    border-color: rgba(139, 92, 246, .20) !important;
}
:root[data-theme="dark"] .dropdown-menu {
    background: rgba(22, 24, 39, .88) !important;
    border-color: rgba(139, 92, 246, .18) !important;
}
:root[data-theme="dark"] .dropdown-item:hover {
    background: rgba(139, 92, 246, .22) !important;
}

/* --------------------------------------------------------------------------
   12 · 日志终端 —— 浅色：亮紫纸面终端；深色：深空玻璃 + 霓虹边
   （字色必须与背景同主题切换，否则浅色模式下会出现深字配深底）
   -------------------------------------------------------------------------- */
.log-viewer-card {
    border: 1px solid rgba(139, 92, 246, .22) !important;
}
.log-viewer-card pre,
.log-viewer-card .log-output,
.log-viewer-card .card-body pre,
pre.log-output {
    background: rgba(250, 249, 255, .92) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(139, 92, 246, .22) !important;
    border-radius: .9rem !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .60),
                0 0 24px -10px rgba(139, 92, 246, .25) !important;
    color: var(--ui-ink) !important;
}
:root[data-theme="dark"] .log-viewer-card pre,
:root[data-theme="dark"] .log-viewer-card .log-output,
:root[data-theme="dark"] .log-viewer-card .card-body pre,
:root[data-theme="dark"] pre.log-output {
    background: rgba(11, 13, 23, .92) !important;
    border-color: rgba(139, 92, 246, .25) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04),
                0 0 24px -10px rgba(139, 92, 246, .35) !important;
    color: #e9e8f0 !important;
}

/* --------------------------------------------------------------------------
   13 · 首页工作台 —— 玻璃卡 + 渐变大标题
   -------------------------------------------------------------------------- */
html.home-page-shell .home-dashboard { background: transparent !important; }
html.home-page-shell .home-heading h1 {
    background: linear-gradient(120deg, #4c1d95 0%, #7c3aed 45%, #2563eb 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
html.home-page-shell[data-theme="dark"] .home-heading h1 {
    background: linear-gradient(120deg, #c4b5fd 0%, #a78bfa 40%, #67e8f9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
html.home-page-shell .service-card,
html.home-page-shell .panel-card,
html.home-page-shell .quick-card,
html.home-page-shell .activity-card {
    background: rgba(255, 255, 255, .50) !important;
    -webkit-backdrop-filter: blur(24px) saturate(170%);
    backdrop-filter: blur(24px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, .62) !important;
    box-shadow: 0 10px 42px -14px rgba(93, 63, 190, .18) !important;
}
html.home-page-shell .service-card:hover,
html.home-page-shell .quick-card:hover {
    border-color: rgba(139, 92, 246, .38) !important;
    box-shadow: 0 20px 58px -18px rgba(93, 63, 190, .34) !important;
}
html.home-page-shell[data-theme="dark"] .service-card,
html.home-page-shell[data-theme="dark"] .panel-card,
html.home-page-shell[data-theme="dark"] .quick-card,
html.home-page-shell[data-theme="dark"] .activity-card {
    background: rgba(21, 23, 37, .60) !important;
    border-color: rgba(139, 92, 246, .17) !important;
    box-shadow: 0 12px 46px -14px rgba(0, 0, 0, .60) !important;
}
html.home-page-shell[data-theme="dark"] .service-card:hover,
html.home-page-shell[data-theme="dark"] .quick-card:hover {
    border-color: rgba(139, 92, 246, .45) !important;
    box-shadow: 0 22px 62px -18px rgba(0, 0, 0, .74),
                0 0 26px -8px rgba(139, 92, 246, .28) !important;
}
html.home-page-shell .home-hero-visual {
    box-shadow: 0 0 40px -10px rgba(139, 92, 246, .35) !important;
}

/* --------------------------------------------------------------------------
   14 · 侧边栏 —— 品牌图标辉光脉冲 + 激活项强化
   -------------------------------------------------------------------------- */
.sidebar .sidebar-brand i {
    animation: aurora-glow-pulse 3.6s ease-in-out infinite;
}
.sidebar .nav-link.active {
    box-shadow: 0 6px 24px -6px rgba(139, 92, 246, .68),
                inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

/* --------------------------------------------------------------------------
   15 · 滚动条 / 选区 / 焦点 —— 全局细节
   -------------------------------------------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #8b5cf6, #6366f1);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-clip: border-box; }
::selection { background: rgba(139, 92, 246, .28); }
:focus-visible {
    outline: 2px solid rgba(139, 92, 246, .65);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   16 · 移动端顶栏玻璃化
   -------------------------------------------------------------------------- */
.mobile-header {
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
}

/* --------------------------------------------------------------------------
   18 · 侧边栏品牌行修正 —— 248px 宽度下图标+标题+徽标不再溢出错位
   -------------------------------------------------------------------------- */
.sidebar .sidebar-brand {
    gap: .5rem !important;
}
.sidebar .sidebar-brand-home {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
}
.sidebar .sidebar-brand-main {
    min-width: 0 !important;
    max-width: 100% !important;
}
.sidebar .sidebar-brand-main > i {
    width: 2.05rem !important;
    height: 2.05rem !important;
    font-size: 1.05rem !important;
    flex-shrink: 0 !important;
}
.sidebar .sidebar-brand-title {
    font-size: .9rem !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.sidebar .sidebar-version-badge {
    white-space: nowrap !important;
    font-size: .54rem !important;
    padding: .2rem .38rem !important;
    margin-left: auto !important;
}

/* --------------------------------------------------------------------------
   17 · 动效偏好：减弱时关闭一切动画
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body::before,
    .card,
    .settings-section,
    .sidebar .sidebar-brand i,
    .sidebar .sidebar-brand .sidebar-brand-main {
        animation: none !important;
    }
    .card,
    .btn,
    .file-config-metric,
    .extension-stat,
    .module-metric,
    .settings-metric-card {
        transition: none !important;
    }
}

/* =========================================================================
   原 ui-delight.css
   ========================================================================= */

/* =========================================================================
   TG File Monitor · UI Delight（微交互 / 深色打磨 / 侧栏层次 / 数字字体）
   -------------------------------------------------------------------------
   引入顺序： ... → ui-readability → ui-delight（本层，最后加载）

   只加「体验增强」，不改布局尺寸与 DOM 结构：
   1) 卡片/按钮微交互（hover 浮起 + 紫光晕，reduced-motion 自动关闭）
   2) 深色模式卡片描边与发光增强
   3) 侧栏分组标题与激活项层次
   4) 数字场景统一 tabular-nums（等宽数字，跳动不抖）
   ========================================================================= */

/* =========================================================================
   1 · 卡片微交互
   ========================================================================= */
.card {
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.card:hover {
    transform: translateY(-2px);
    border-color: var(--ui-primary-line, rgba(139, 92, 246, 0.22));
    box-shadow:
        0 14px 34px rgba(26, 18, 64, 0.10),
        0 0 0 1px rgba(139, 92, 246, 0.06),
        0 0 28px -8px rgba(139, 92, 246, 0.22);
}

/* 日志查看器、控制台 Hero 等特殊大卡不参与浮起 */
.log-viewer-card:hover,
.home-hero:hover {
    transform: none;
}

/* =========================================================================
   2 · 按钮与控件微交互
   ========================================================================= */
.btn {
    transition: transform 0.16s ease, box-shadow 0.18s ease,
                background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.btn:not(:disabled):not(.disabled):hover {
    transform: translateY(-1px);
}

.btn:not(:disabled):not(.disabled):active {
    transform: translateY(0) scale(0.98);
}

/* 导航链接过渡更顺滑 */
.sidebar .nav-link {
    transition: transform 0.18s ease, background-color 0.18s ease,
                border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

/* 表单控件聚焦过渡 */
.form-control,
.form-select {
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

/* =========================================================================
   3 · 深色模式打磨：卡片描边发光、阴影加深
   ========================================================================= */
:root[data-theme="dark"] .card {
    border-color: rgba(139, 92, 246, 0.16);
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.45),
        0 0 24px -12px rgba(139, 92, 246, 0.35);
}

:root[data-theme="dark"] .card:hover {
    border-color: rgba(139, 92, 246, 0.34);
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.55),
        0 0 32px -8px rgba(139, 92, 246, 0.45);
}

:root[data-theme="dark"] .btn-primary {
    box-shadow: 0 4px 18px rgba(124, 58, 237, 0.45);
}

:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select {
    border-color: rgba(139, 92, 246, 0.20);
}

:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .form-select:focus {
    border-color: rgba(167, 139, 250, 0.55);
    box-shadow: 0 0 0 0.16rem rgba(139, 92, 246, 0.28);
}

/* =========================================================================
   4 · 侧栏层次：分组标题克制、激活项左侧紫色指示条
   ========================================================================= */
.sidebar-section-label {
    margin: 0.35rem 0 0.3rem 0.35rem;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ui-ink-soft, #57545f);
    opacity: 0.72;
}

.sidebar .nav-link {
    position: relative;
}

.sidebar .nav-link.active::before {
    content: "";
    position: absolute;
    left: 0.12rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 1.35rem;
    border-radius: 3px;
    background: linear-gradient(180deg, #a78bfa, #7c3aed);
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.55);
}

:root[data-theme="dark"] .sidebar-section-label {
    color: rgba(233, 230, 245, 0.55);
}

/* =========================================================================
   5 · 数字字体：等宽数字，统计/日志/表格数字不跳动
   ========================================================================= */
.hero-metric-value,
.home-chip strong,
.log-toolbar-chip strong,
.badge,
.table td,
.table th,
.home-version-hint {
    font-variant-numeric: tabular-nums;
}

/* =========================================================================
   6 · 浅色降眩光（light-only）
   -------------------------------------------------------------------------
   问题：浅色下大量纯白 / 近白表面（卡片 rgba(255,255,255,.5) + 24px 毛玻璃
   + 白色描边 + 白色内高光）叠加在浅紫底上，整屏偏白刺眼、层级发虚。
   做法：把「纯白」换成带紫灰的柔和表面，弱化白色描边与内高光，
   并整体压一档底色亮度，保持淡紫调性。深色模式完全不受影响。
   ========================================================================= */

/* 6.1 令牌：纯白 → 紫灰（整体压一档亮度，卡片不再"发光"） */
html:not([data-theme="dark"]) {
    --ui-bg: #dedde8;
    --ui-surface: #ecebf5;
    --ui-surface-raised: #eeedf7;
    --ui-surface-soft: #e7e6f0;
    --ui-surface-sunken: #e0dfe9;
    --ui-border: rgba(26, 22, 48, 0.12);
    --ui-border-strong: rgba(26, 22, 48, 0.20);

    /* 侧栏 / 顶栏外壳：不再从近白起手 */
    --shell-bg: linear-gradient(178deg, #f3f2fa 0%, #eceae6 60%, #e7e5f1 100%);
    --shell-bg-flat: #eeedf6;
    --shell-header-bg: rgba(244, 243, 250, 0.94);
    --shell-line: rgba(40, 32, 70, 0.10);
    --shell-line-strong: rgba(40, 32, 70, 0.18);

    background: #dedde8 !important;
}

/* 6.2 主卡片 / 配置分区：明确的纸面感 + 收紧阴影 */
html:not([data-theme="dark"]) .card,
html:not([data-theme="dark"]) .settings-section {
    background: #ecebf5 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(26, 22, 48, 0.12) !important;
    box-shadow:
        0 1px 2px rgba(30, 24, 60, 0.09),
        0 8px 18px -12px rgba(50, 38, 105, 0.38) !important;
}

/* 6.2b hover：边界变紫，不再是白光晕 */
html:not([data-theme="dark"]) .card:hover {
    border-color: rgba(139, 92, 246, 0.38) !important;
    box-shadow:
        0 1px 2px rgba(30, 24, 60, 0.10),
        0 10px 22px -14px rgba(50, 38, 105, 0.45),
        0 0 16px -10px rgba(139, 92, 246, 0.45) !important;
}

/* 6.2c Emby 页自有白色面板 */
html:not([data-theme="dark"]) .emby-panel {
    background: #ecebf5 !important;
    border-color: rgba(26, 22, 48, 0.12) !important;
}

html:not([data-theme="dark"]) .emby-panel.is-blue,
html:not([data-theme="dark"]) .emby-panel.is-green,
html:not([data-theme="dark"]) .emby-panel.is-orange {
    background: #ecebf5 !important;
}

html:not([data-theme="dark"]) .emby-field-group {
    background: #f3f2fa !important;
    border-color: rgba(26, 22, 48, 0.11) !important;
}

html:not([data-theme="dark"]) .emby-hero {
    background:
        radial-gradient(circle at 90% 12%, rgba(139, 92, 246, 0.16), transparent 34%),
        radial-gradient(circle at 12% 18%, rgba(99, 102, 241, 0.12), transparent 30%),
        linear-gradient(135deg, #efedf8 0%, #e9e7f3 100%) !important;
    border-color: rgba(26, 22, 48, 0.12) !important;
}

/* 6.3 卡片头部：白色渐变 → 极浅紫渐变 */html:not([data-theme="dark"]) .card .card-header {
    background: linear-gradient(180deg,
        rgba(139, 92, 246, 0.07),
        rgba(139, 92, 246, 0.015)) !important;
}

/* 6.4 折叠面板 / 列表项 / 表单控件 */
html:not([data-theme="dark"]) .accordion-item,
html:not([data-theme="dark"]) .list-group-item {
    background: #e9e8f3 !important;
}

html:not([data-theme="dark"]) .accordion-button {
    background: linear-gradient(180deg,
        rgba(139, 92, 246, 0.10),
        rgba(139, 92, 246, 0.03)) !important;
}

/* 6.5 浮层：模态 / 下拉 / 弹层 */
html:not([data-theme="dark"]) .modal-content,
html:not([data-theme="dark"]) .dropdown-menu,
html:not([data-theme="dark"]) .offcanvas,
html:not([data-theme="dark"]) .popover {
    background: #f4f3fb !important;
    border: 1px solid rgba(26, 22, 48, 0.14) !important;
    box-shadow: 0 18px 40px -22px rgba(40, 30, 90, 0.5) !important;
}

html:not([data-theme="dark"]) .modal .accordion-item,
html:not([data-theme="dark"]) .modal .list-group-item {
    background: #ecebf5 !important;
}

/* 6.6 白色按钮 / 芯片 / 白底工具类 */
html:not([data-theme="dark"]) .btn-light {
    background: #e9e8f3 !important;
}

html:not([data-theme="dark"]) .btn-light:hover,
html:not([data-theme="dark"]) .btn-light:focus {
    background: rgba(139, 92, 246, 0.12) !important;
}

html:not([data-theme="dark"]) .log-toolbar-chip,
html:not([data-theme="dark"]) .btn-outline-light,
html:not([data-theme="dark"]) .btn-outline-secondary {
    background: #f0eff8 !important;
}

html:not([data-theme="dark"]) .bg-white {
    background: #eae9f4 !important;
}

/* 6.7 表格条纹 / 控制台 / 首页指标卡 */
html:not([data-theme="dark"]) .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: #e4e3ee !important;
}

html:not([data-theme="dark"]) .log-viewer-card pre,
html:not([data-theme="dark"]) .log-viewer-card .log-output,
html:not([data-theme="dark"]) .log-viewer-card .card-body pre,
html:not([data-theme="dark"]) pre.log-output {
    background: #e7e6f0 !important;
    border-color: rgba(26, 22, 48, 0.12) !important;
}

html:not([data-theme="dark"]) .hero-metric {
    background: #ecebf5 !important;
}

html:not([data-theme="dark"]) .home-control-form .form-select {
    background-color: #f4f3fb !important;
}

/* 6.8 装饰元素：右下角白色星形 → 淡紫 */
html:not([data-theme="dark"]) body::after {
    background: rgba(167, 139, 250, 0.55) !important;
}

/* =========================================================================
   6.9 清晰度强化（light-only）：边界更实、去掉雾感
   -------------------------------------------------------------------------
   玻璃拟态的多层白高光 + 大半径模糊是"发白又发虚"的主因：
   这里去掉卡片顶部白色高光条，把分隔线/输入框边界做实，文字再压深一档。
   ========================================================================= */

/* 卡片顶部 1px 白色高光条 → 透明（去掉雾感） */
html:not([data-theme="dark"]) .card::after,
html:not([data-theme="dark"]) .main-content .card::after {
    opacity: 0 !important;
}

/* 卡片头与内容的分隔线：白色 → 中性实线 */
html:not([data-theme="dark"]) .card .card-header,
html:not([data-theme="dark"]) .card-header {
    background: linear-gradient(180deg,
        rgba(139, 92, 246, 0.07),
        rgba(139, 92, 246, 0.02)) !important;
    border-bottom: 1px solid rgba(26, 22, 48, 0.09) !important;
    box-shadow: none !important;
}

/* 输入框：更实的边界，聚焦才发紫光 */
html:not([data-theme="dark"]) .form-control,
html:not([data-theme="dark"]) .form-select,
html:not([data-theme="dark"]) .input-group-text,
html:not([data-theme="dark"]) textarea.form-control {
    background: #f4f3fb !important;
    border: 1px solid rgba(26, 22, 48, 0.15) !important;
}

/* 表格：行分隔线明确，表头底边加实 */
html:not([data-theme="dark"]) .table > :not(caption) > * > * {
    border-bottom-color: rgba(26, 22, 48, 0.09) !important;
}

html:not([data-theme="dark"]) .table > thead > tr > th {
    background: rgba(139, 92, 246, 0.06) !important;
    border-bottom: 1px solid rgba(26, 22, 48, 0.12) !important;
}

/* 分隔线 / 折叠条目 / 列表项边界 */
html:not([data-theme="dark"]) hr {
    border-color: rgba(26, 22, 48, 0.10) !important;
}

html:not([data-theme="dark"]) .list-group-item,
html:not([data-theme="dark"]) .accordion-item {
    border-color: rgba(26, 22, 48, 0.10) !important;
}

/* 文字再压深一档：标题、正文、次要文字层次更清楚 */
html:not([data-theme="dark"]) {
    --ui-ink: #23212b;
    --ui-ink-soft: #4c4a55;
    --ui-muted: #6b6878;
}

html:not([data-theme="dark"]) h1,
html:not([data-theme="dark"]) h2,
html:not([data-theme="dark"]) h3,
html:not([data-theme="dark"]) h4 {
    color: #23212b;
}

html:not([data-theme="dark"]) .card-body,
html:not([data-theme="dark"]) .main-content {
    color: #2f2d38;
}

/* =========================================================================
   6.10 背景更干净 + 控件边界更明确（light-only）
   -------------------------------------------------------------------------
   极光斑在浅色下过饱和 + 30px 模糊，卡片之外的留白区会糊出大片彩色雾团，
   显得脏且削弱边界感。这里收淡极光、加实按钮/表格/标签的边界。
   ========================================================================= */

/* 极光：降饱和降强度，仅保留顶部一层淡紫呼吸感 */
html:not([data-theme="dark"]) body::before {
    background:
        radial-gradient(36% 42% at 24% 0%,   rgba(139, 92, 246, 0.20), transparent 68%),
        radial-gradient(38% 44% at 76% 0%,   rgba(99, 102, 241, 0.14), transparent 70%),
        radial-gradient(30% 34% at 100% 44%, rgba(167, 139, 250, 0.10), transparent 74%),
        radial-gradient(28% 32% at 18% 100%, rgba(129, 140, 248, 0.08), transparent 74%) !important;
    filter: blur(48px) !important;
    opacity: 0.72 !important;
}

/* 次要按钮：白底 + 实边界，解决"看不清按钮在哪" */
html:not([data-theme="dark"]) .btn-light,
html:not([data-theme="dark"]) .btn-outline-light,
html:not([data-theme="dark"]) .btn-outline-secondary,
html:not([data-theme="dark"]) .log-toolbar-chip {
    background: #f4f3fb !important;
    border: 1px solid rgba(26, 22, 48, 0.16) !important;
    color: #3a3844 !important;
}

html:not([data-theme="dark"]) .btn-light:hover,
html:not([data-theme="dark"]) .btn-outline-light:hover,
html:not([data-theme="dark"]) .btn-outline-secondary:hover {
    background: rgba(139, 92, 246, 0.10) !important;
    border-color: rgba(139, 92, 246, 0.32) !important;
    color: var(--ui-primary-deep, #5b21b6) !important;
}

/* 表格：表头有底色、行线清楚、条纹更轻 */
html:not([data-theme="dark"]) .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(139, 92, 246, 0.025) !important;
}

html:not([data-theme="dark"]) .table > :not(caption) > * > * {
    border-bottom-color: rgba(26, 22, 48, 0.11) !important;
}

/* 表单标签与提示文字：层次分明 */
html:not([data-theme="dark"]) .form-label,
html:not([data-theme="dark"]) .form-check-label {
    color: #3a3844 !important;
}

html:not([data-theme="dark"]) .form-text,
html:not([data-theme="dark"]) .text-muted,
html:not([data-theme="dark"]) small.text-muted {
    color: #5d5a68 !important;
}

/* =========================================================================
   7 · 动效偏好：全部关闭
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    .card,
    .btn,
    .sidebar .nav-link,
    .form-control,
    .form-select {
        transition: none !important;
    }

    .card:hover,
    .btn:not(:disabled):not(.disabled):hover {
        transform: none;
    }
}