/* ErisPulse Dashboard – overrides (auto-split from dash.css, aligned with js/) */

/* ── 栅格自适应：auto-fit 替代固定列数（≥1024px 生效；下方窄屏断点继续兜底）。
     grid-2=双卡布局 360 起、grid-3=实体卡列表 300 起、grid-4=统计卡 210 起；
     动态条目少的场景空轨道自动收拢，不再留空列 ── */
.grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
}

.grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}

/* 响应式优化 */
@media (min-width: 1024px) {
    .sidebar.collapsed + .content {
        
    }
}

/* 平板 768-1023px：侧栏走抽屉模式（见下方 ≤1023px 块），此处仅保留栅格密度调整 */
@media (min-width: 768px) and (max-width: 1023px) {
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1023px) {
    .sidebar-collapse-btn {
        display: none;
    }

    .btn-hamburger {
        display: flex;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 280px;
        z-index: 1000;
        
        transform: translateX(-100%);
        transition: transform 0.3s;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
    }

    .sidebar.collapsed {
        width: 280px;
    }

    .sidebar.collapsed .nav-group-title,
    .sidebar.collapsed .nav-item > span:not(.nav-ico),
    .sidebar.collapsed .nav-badge,
    .sidebar.collapsed .fw-ver,
    .sidebar.collapsed .restart-btn span,
    .sidebar.collapsed .sidebar-settings-btn span {
        display: revert;
    }

    .sidebar.collapsed .nav-item {
        justify-content: revert;
        padding: 8px 12px 8px 24px; /* 与 PC 展开态同款左距，图标纵向对齐 */
    }

    .sidebar.collapsed .sidebar-footer {
        justify-content: revert;
    }

    .sidebar.collapsed .nav-group-title,
    .sidebar.collapsed .nav-item > span:not(.nav-ico),
    .sidebar.collapsed .nav-badge,
    .sidebar.collapsed .fw-ver {
        opacity: 1;
        width: auto;
        max-height: none;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    /* modules.css 以 ID 选择器给合并页设了同属性 clamp，类选择器无法竞争，须 !important */
    .content .page {
        padding: 16px !important;
    }

    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    .circular-progress {
        width: 56px;
        height: 56px;
        flex-shrink: 0;
    }

    .circular-progress-text {
        font-size: 12px;
    }

    .stat-card {
        padding: 12px 14px;
    }

    .route-item > div {
        flex-wrap: wrap !important;
    }

    .route-item .method-badge {
        margin-bottom: 4px;
    }

    .route-item button.btn-xs {
        padding: 8px 14px;
        font-size: 13px;
        border-radius: 6px;
    }

    .kv-key {
        width: 140px;
    }

    .modal-box {
        width: 95%;
        padding: 20px;
    }

    .login-card {
        padding: 30px 24px;
    }
}

@media (max-width: 767px) {
    .grid-2 {
        grid-template-columns: 1fr;
    }

    .filter-bar {
        gap: 6px;
    }

    .filter-bar input[type="text"] {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }

    .route-group-card .card-header {
        flex-wrap: wrap;
        gap: 4px;
    }

    .route-group-card .card-header .chip {
        font-size: 10px;
        padding: 2px 6px;
    }
}

@media (max-width: 480px) {
    .sidebar-collapse-btn {
        display: none;
    }

    .header h1 {
        font-size: 14px;
    }

    .page {
        padding: 12px;
    }

    .sidebar {
        width: 260px;
    }

    .sidebar.collapsed {
        width: 260px;
    }

    .login-card {
        padding: 24px 20px;
    }

    .login-card h2 {
        font-size: 18px;
    }

    .msg-stats-grid {
        grid-template-columns: 1fr;
    }

    .hourly-trend {
        height: 60px;
        gap: 2px;
        padding-bottom: 16px;
    }

    .filter-spacer {
        display: none;
    }

    .filter-bar .btn-sm .btn-label {
        display: none;
    }
}

/* ─── 毛玻璃 ─── */
.sidebar,
.header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.header {
    border-bottom: 1px solid color-mix(in srgb, var(--bd) 50%, transparent);
}

/* ─── 内容区 ─── */
.content {

}

.page {
    padding: clamp(16px, 3vw, 32px) clamp(14px, 3.4vw, 36px);
    scroll-behavior: smooth;
}

/* ─── 卡片 ─── */
.card,
.stat-card {
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, var(--bd) 40%, transparent);
    background: var(--bg-t);
    transition:
        transform 0.15s var(--ease-smooth),
        border-color 0.15s var(--ease-smooth),
        box-shadow 0.15s var(--ease-smooth);
}

/* 普通卡片 hover：只加深边框（可点卡片由 .is-link/.is-clickable 上浮） */
.card:hover,
.stat-card:hover {
    transform: none;
    border-color: var(--bd-h);
    box-shadow: none;
}

/* ─── 按钮 ─── */
.btn-primary {
    background: var(--accent-fill);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--fg-on-accent, white);
    transition: background-color 0.15s var(--ease-smooth), color 0.15s var(--ease-smooth), border-color 0.15s var(--ease-smooth), transform 0.15s var(--ease-smooth), box-shadow 0.15s var(--ease-smooth);
}

.btn-primary:hover {
    background: var(--accent-fill-h);
    transform: translateY(-1px);
    box-shadow: var(--shadow-hover);
}

.btn-primary:active {
    transform: translateY(0) scale(0.97);
}

/* 按钮圆角不在此覆写：components.css 按尺寸档位定义
   （.btn=md / .btn-sm=sm / .btn-xs=xs），后文件覆盖会抹平档位 */
input, textarea, select { border-radius: var(--radius-md); }

/* 焦点柔光环：accent 描边由各控件自身 focus 提供，这里统一 3.5px accent-soft 环 */
:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3.5px var(--accent-soft);
}

/* ─── 全局过渡 ─── */
a, button, input, select, textarea, [tabindex]:not([tabindex="-1"]) {
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.list-row, .ev-item, .bot-card, .store-card, .kv-row,
.module-card, .cmd-row, .route-item, .lifecycle-item,
.fm-file-row, .pkg-row, .log-entry {
    transition: background 0.15s ease;
}

@keyframes fadeSlideUp {
    from { opacity: 0;  }
    to   { opacity: 1;  }
}
@keyframes fadeSlideLeft {
    from { opacity: 0;  }
    to   { opacity: 1;  }
}
@keyframes fadeSlideRight {
    from { opacity: 0;  }
    to   { opacity: 1;  }
}

@keyframes bubbleIn {
    0%   { opacity: 0; transform: scale(0.96) translateY(6px); }
    55%  { opacity: 1; transform: scale(1.01) translateY(-1px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes bubbleInRight {
    0%   { opacity: 0; transform: scale(0.96) translateX(8px); }
    55%  { opacity: 1; transform: scale(1.01) translateX(-1px); }
    100% { opacity: 1; transform: scale(1) translateX(0); }
}
@keyframes bubbleInLeft {
    0%   { opacity: 0; transform: scale(0.96) translateX(-8px); }
    55%  { opacity: 1; transform: scale(1.01) translateX(1px); }
    100% { opacity: 1; transform: scale(1) translateX(0); }
}

.page.active { animation: fadeSlideUp 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

.anim-enter .stat-card,
.anim-enter .card {
    opacity: 0;
    animation: fadeSlideLeft 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.anim-enter .stat-card:nth-child(even),
.anim-enter .card:nth-child(even) {
    animation-name: fadeSlideRight;
}
.anim-enter .stat-card:nth-child(1), .anim-enter .card:nth-child(1) { animation-delay: 0.04s; }
.anim-enter .stat-card:nth-child(2), .anim-enter .card:nth-child(2) { animation-delay: 0.1s; }
.anim-enter .stat-card:nth-child(3), .anim-enter .card:nth-child(3) { animation-delay: 0.18s; }
.anim-enter .stat-card:nth-child(4), .anim-enter .card:nth-child(4) { animation-delay: 0.26s; }

.anim-enter .list-row,
.anim-enter .ev-item {
    opacity: 0;
    animation: fadeSlideLeft 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.anim-enter .list-row:nth-child(1), .anim-enter .ev-item:nth-child(1) { animation-delay: 0.02s; }
.anim-enter .list-row:nth-child(2), .anim-enter .ev-item:nth-child(2) { animation-delay: 0.05s; }
.anim-enter .list-row:nth-child(3), .anim-enter .ev-item:nth-child(3) { animation-delay: 0.09s; }
.anim-enter .list-row:nth-child(4), .anim-enter .ev-item:nth-child(4) { animation-delay: 0.14s; }
.anim-enter .list-row:nth-child(5), .anim-enter .ev-item:nth-child(5) { animation-delay: 0.2s; }
.anim-enter .list-row:nth-child(6), .anim-enter .ev-item:nth-child(6) { animation-delay: 0.27s; }

[data-anim="playful"] .page.active { animation: bubbleIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }

[data-anim="playful"] .anim-enter .stat-card,
[data-anim="playful"] .anim-enter .card {
    opacity: 0;
    animation: bubbleIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
[data-anim="playful"] .anim-enter .stat-card:nth-child(even),
[data-anim="playful"] .anim-enter .card:nth-child(even) {
    animation-name: bubbleInRight;
}
[data-anim="playful"] .anim-enter .stat-card:nth-child(1),
[data-anim="playful"] .anim-enter .card:nth-child(1) { animation-delay: 0.04s; }
[data-anim="playful"] .anim-enter .stat-card:nth-child(2),
[data-anim="playful"] .anim-enter .card:nth-child(2) { animation-delay: 0.1s; }
[data-anim="playful"] .anim-enter .stat-card:nth-child(3),
[data-anim="playful"] .anim-enter .card:nth-child(3) { animation-delay: 0.18s; }
[data-anim="playful"] .anim-enter .stat-card:nth-child(4),
[data-anim="playful"] .anim-enter .card:nth-child(4) { animation-delay: 0.26s; }

[data-anim="playful"] .anim-enter .list-row,
[data-anim="playful"] .anim-enter .ev-item {
    opacity: 0;
    animation: bubbleInLeft 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
[data-anim="playful"] .anim-enter .list-row:nth-child(1),
[data-anim="playful"] .anim-enter .ev-item:nth-child(1) { animation-delay: 0.02s; }
[data-anim="playful"] .anim-enter .list-row:nth-child(2),
[data-anim="playful"] .anim-enter .ev-item:nth-child(2) { animation-delay: 0.05s; }
[data-anim="playful"] .anim-enter .list-row:nth-child(3),
[data-anim="playful"] .anim-enter .ev-item:nth-child(3) { animation-delay: 0.09s; }
[data-anim="playful"] .anim-enter .list-row:nth-child(4),
[data-anim="playful"] .anim-enter .ev-item:nth-child(4) { animation-delay: 0.14s; }
[data-anim="playful"] .anim-enter .list-row:nth-child(5),
[data-anim="playful"] .anim-enter .ev-item:nth-child(5) { animation-delay: 0.2s; }
[data-anim="playful"] .anim-enter .list-row:nth-child(6),
[data-anim="playful"] .anim-enter .ev-item:nth-child(6) { animation-delay: 0.27s; }

.nav-item.active::before {
    background: var(--accent);
    box-shadow: none;
}

input:hover:not(:disabled),
textarea:hover:not(:disabled),
select:hover:not(:disabled) {
    border-color: var(--bd-h);
}

.card-header { letter-spacing: 0.01em; }

/* 滚动条样式由 base.css 全局镂空胶囊统一提供（本文件末尾另有全局隐藏规则），
   此处旧的 6px 滚动条规则与之冲突，已移除 */


/* 启动画面消失动画 */
.splash-bg {
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    animation: splashPulse 3s ease-in-out infinite;
}

/* 退场不做任何全屏闪光（此前的 splashFlashBurst 就是"闪一下"的来源），
   只保留一次轻快的上浮淡出，时长需与 main.js 的节点移除延时一致 */
.splash.hide {
    animation: splashBubblePop 0.45s cubic-bezier(0.5, 0, 0.4, 1) forwards;
}

.splash.hide .splash-content {
    animation: logoFlashZoom 0.4s cubic-bezier(0.5, 0, 0.4, 1) forwards;
}

@keyframes splashBubblePop {
    0% {
        opacity: 1;

        visibility: visible;
    }
    100% {
        opacity: 0;
        transform: scale(1.04) translateY(-10px);
        visibility: hidden;
        pointer-events: none;
    }
}

@keyframes logoFlashZoom {
    0% {
        opacity: 1;
    }
    100% {
        transform: scale(1.08) translateY(-6px);
        opacity: 0;
    }
}

/* App 首次揭示：不再做自身 0→1 淡入。
   开屏浮层/登录浮层淡出时应用保持完全不透明，
   单层淡出即可完成揭示，避免双层半透明叠加时的全局闪烁。 */
.app.authed {
    opacity: 1;
}

/* 页面切换 */
.page.active {
    animation: sceneReveal 0.42s cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes sceneReveal {
    0% {
        opacity: 0;
        transform: translateY(14px) scale(0.99);
        filter: none;
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: none;
    }
}

[data-anim="playful"] .page.active {
    animation: sceneRevealBouncy 0.46s cubic-bezier(0.34, 1.2, 0.64, 1);
}

@keyframes sceneRevealBouncy {
    0% {
        opacity: 0;
        transform: translateY(16px) scale(0.97);
        filter: none;
    }
    55% {
        opacity: 1;
        transform: translateY(-2px) scale(1.005);
        filter: none;
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: none;
    }
}

.anim-enter .stat-card,
.anim-enter .card {
    animation: cardSceneIn 0.45s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.anim-enter .stat-card:nth-child(even),
.anim-enter .card:nth-child(even) {
    animation-name: cardSceneInRight;
}

@keyframes cardSceneIn {
    0%   { opacity: 0; transform: translateX(-14px) scale(0.98); filter: none; }
    100% { opacity: 1; transform: translateX(0) scale(1); filter: none; }
}

@keyframes cardSceneInRight {
    0%   { opacity: 0; transform: translateX(14px) scale(0.98); filter: none; }
    100% { opacity: 1; transform: translateX(0) scale(1); filter: none; }
}

[data-anim="playful"] .anim-enter .stat-card,
[data-anim="playful"] .anim-enter .card {
    animation: cardBubbleScene 0.45s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}

[data-anim="playful"] .anim-enter .stat-card:nth-child(even),
[data-anim="playful"] .anim-enter .card:nth-child(even) {
    animation-name: cardBubbleSceneRight;
}

@keyframes cardBubbleScene {
    0%   { opacity: 0; transform: scale(0.92) translateY(8px); filter: none; }
    55%  { opacity: 1; transform: scale(1.012) translateY(-1px); filter: none; }
    100% { opacity: 1; transform: scale(1) translateY(0); filter: none; }
}

@keyframes cardBubbleSceneRight {
    0%   { opacity: 0; transform: scale(0.92) translateX(10px); filter: none; }
    55%  { opacity: 1; transform: scale(1.012) translateX(-1px); filter: none; }
    100% { opacity: 1; transform: scale(1) translateX(0); filter: none; }
}

/* 列表项入场 */
.anim-enter .list-row,
.anim-enter .ev-item {
    animation: listSceneIn 0.35s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes listSceneIn {
    0%   { opacity: 0;  filter: none; }
    100% { opacity: 1;  filter: none; }
}

[data-anim="playful"] .anim-enter .list-row,
[data-anim="playful"] .anim-enter .ev-item {
    animation: listBubbleScene 0.35s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}

@keyframes listBubbleScene {
    0%   { opacity: 0; transform: scale(0.94) translateX(-8px); filter: none; }
    55%  { opacity: 1; transform: scale(1.008) translateX(1px); filter: none; }
    100% { opacity: 1; transform: scale(1) translateX(0); filter: none; }
}

/* 组件打磨 */

.card,
.stat-card {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}

.card:hover,
.stat-card:hover {
    transform: none;
    border-color: var(--bd-h);
    box-shadow: none;
}

.card-header {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* 第二处竖条同样禁用 */

.stat-card {
    border-radius: var(--radius-lg);
    padding: clamp(14px, 1.6vw, 20px) clamp(16px, 2.2vw, 22px);
}

.stat-card-icon {
    
}

.stat-card:hover .stat-card-icon {
    
    
}

.btn {
    transition: background-color 0.15s var(--ease-smooth), color 0.15s var(--ease-smooth), border-color 0.15s var(--ease-smooth);
}

.btn-primary {
    box-shadow: none;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-hover);
}

.btn-primary:active {
    transform: translateY(0) scale(0.97);
}

.btn-secondary:hover { color: var(--accent); }

.btn:active {
    transform: scale(0.97);
}

.btn-icon {
    border-radius: var(--radius-md);
    transition: background-color 0.15s var(--ease-smooth), color 0.15s var(--ease-smooth), border-color 0.15s var(--ease-smooth);
}

.btn-icon:hover {
    transform: none;
}

.btn-icon:hover svg {
    color: var(--accent);
}

.btn-icon:active {
    transform: none;
}

.nav-item {
    border-radius: var(--radius-sm);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.nav-item:hover {
    background: var(--accent-soft);
    transform: none;
}

.nav-item.active {
    background: var(--accent-soft);
}

.nav-item.active::before {
    border-radius: var(--radius-xs);
    box-shadow: none;
}

.chip {
    border-radius: 999px;
    transition: background-color 0.15s var(--ease-smooth), color 0.15s var(--ease-smooth), border-color 0.15s var(--ease-smooth);
}

input,
textarea,
select,
.ep-input,
.ep-search,
.ep-select,
.form-input,
.form-select,
.settings-input {
    border-radius: var(--radius-md);
    transition: background-color 0.15s var(--ease-smooth), color 0.15s var(--ease-smooth), border-color 0.15s var(--ease-smooth), box-shadow 0.15s var(--ease-smooth);
}

/* 输入焦点统一：accent 描边 + 3.5px accent-soft 柔光环 */
input:focus,
textarea:focus,
select:focus,
.ep-input:focus,
.ep-search:focus,
.ep-select:focus,
.form-input:focus,
.form-select:focus,
.settings-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3.5px var(--accent-soft);
}

/* 滚动条 thumb 圆角由 base.css 镂空胶囊统一（999px + 透明描边），此处不再覆写 */

.modal-box {
    border-radius: var(--radius-xl);
}

/* toast 圆角回到组件档位（login.css 的紧凑化规则会全局压到 md，这里兜底） */
.toast {
    border-radius: var(--radius-lg);
}

.progress-bar-wrap {
    border-radius: var(--radius-2xl);
}

.progress-bar-fill {
    border-radius: var(--radius-2xl);
    background: var(--accent-fill);
}

.circular-progress-fill {
    filter: none;
}

.adapter-chip {
    border-radius: var(--radius-sm);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.adapter-chip:hover {
    transform: none;
}

.quick-action {
    border-radius: var(--radius-lg);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.quick-action:hover {
    transform: none;
}

.home-pin {
    border-radius: var(--radius-lg);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.conn-badge {
    border-radius: var(--radius-md);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.switch-slider {
    border-radius: var(--radius-2xl);
}

.theme-card,
.style-card {
    border-radius: var(--radius-lg);
}

.settings-panel {
    border-radius: 0;
}

.type-btn {
    border-radius: var(--radius-md);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.view-btn {
    border-radius: var(--radius-sm);
}
body {
    background-image: none;
    background-attachment: fixed;
}

.sidebar {
    background: var(--bg-s);
    border-right: 1px solid var(--bd);
}

/* 顶栏：纯净实色 */
.header {
    background: var(--bg-s);
}

/* 卡片纯净实色 */
.card,
.stat-card {
    position: relative;
    background: var(--bg-t);
}

.page-title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.03em;
}

/* 顶栏标题 */
.header h1 {
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* 内容区呼吸感 */
.page {
    padding: clamp(16px, 3vw, 32px) clamp(14px, 3.4vw, 36px);
}

/* 卡片网格间距 */
.grid-2,
.grid-3,
.grid-4 {
    gap: 20px;
}

/* 导航活跃项：accent-soft 柔和底（token 化，跟随运行时 accent / OLED 18% 档） */
.nav-item.active {
    background: var(--accent-soft);
}

/* 侧边栏分组分隔线弱化 */
.nav-group + .nav-group::before {
    background: color-mix(in srgb, var(--bd) 50%, transparent);
}

/* 侧边栏底部分隔线弱化 */
.sidebar-footer {
    border-top: 1px solid color-mix(in srgb, var(--bd) 40%, transparent);
}
.ct-reset { flex-shrink: 0; width: 26px; height: 26px; font-size: 14px; line-height: 1; }

body,
input, textarea, select, button,
.nav-item, .btn, .chip, .stat-label, .stat-bar-label, .stat-bar-value,
.settings-item-desc, .page-desc, .ev-item, .list-row,
.modal-box, .popover, .conn-panel, .login-card,
.hourly-label, .bot-name, .bot-meta, .fw-ver,
.sidebar-footer, .header, .ws-badge, .conn-badge,
.nav-badge, .ev-badge, .nav-group-title {
    font-family: var(--font-body), -apple-system, BlinkMacSystemFont, "Segoe UI",
        "PingFang SC", "Microsoft YaHei", sans-serif;
}

.page-title,
.card-header,
.modal-title,
.settings-item-label,
.stat-val,
.login-card h2,
.about-feature-title,
.cluster-node-name,
.bot-card .bot-name,
.conn-panel-title,
.popover-title {
    font-family: var(--font-display), "Georgia", serif;
    font-weight: 500;
    letter-spacing: -0.02em;
}

.page-title {
    font-size: 32px;
    line-height: 1.2;
    font-weight: 500;
}

.stat-val {
    font-size: 36px;
    font-weight: 600;
}


/* ========== 移动端自适应 ========== */

@media (max-width: 720px) {
    .scope-nav {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }

    .scope-nav::-webkit-scrollbar {
        display: none;
    }

    .scope-nav-item {
        flex-shrink: 0;
        padding: 7px 11px;
    }

    .card-header .header-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .scope-tree-main {
        min-width: 0;
    }

    .scope-tree-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .scope-editor-grid {
        grid-template-columns: 1fr;
    }

    .modal-box {
        padding: 16px;
    }

    .perm-stats,
    .perm-stats.four-col {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .stat-card {
        padding: 14px;
    }
}

@media (max-width: 400px) {
    .perm-stats,
    .perm-stats.four-col {
        grid-template-columns: 1fr;
    }
}

/* ========== 全局沉浸感 ========== */

@keyframes pageIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.page.active {
    animation: pageIn 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.card {
    transition: border-color 0.15s var(--ease-smooth), box-shadow 0.15s var(--ease-smooth);
}

/* 普通卡片 hover 只加深边框，保持扁平（无投影） */
.card:hover {
    border-color: var(--bd-h, var(--bd));
    box-shadow: none;
}

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

    .page.active .page-title,
    .page.active .page-desc {
        animation: none;
    }
}

/* ========== 深色主题微调 ========== */

/* 扁平契约：主按钮不做内高光/外发光（层级靠色彩与边框表达） */
[data-theme="dark"] .btn-primary {
    box-shadow: none;
}

/* 暗色下卡片头图标：扁平 accent-soft 底（渐变已归零） */
[data-theme="dark"] .card-header > svg {
    background: var(--accent-soft);
    border-radius: var(--radius-sm);
    padding: 3px;
}

/* ========== 卡片图标：右下角设计位 ========== */

.card-header > svg {
    order: 9;
    margin-left: auto;
}

.stat-card {
    position: relative;
    align-items: flex-start;
    text-align: left;
}

.stat-card-icon {
    position: absolute;
    right: 14px;
    bottom: 12px;
    width: 38px !important;
    height: 38px !important;
    margin: 0;
}

/* ========== 修复：卡片头双 auto-margin 平分空间导致按钮居中 ========== */
/* svg 的 margin-left:auto 独自负责右推；有 svg 时 actions 交出 auto margin */

.card-header:has(> svg) .header-actions {
    margin-left: 0;
}

/* ========== 修复：按钮 hover 时图标被劫持为品牌色（蓝底蓝标） ========== */

.btn:hover svg,
.btn-icon:hover svg {
    color: inherit;
}

/* ========== 移动端：性能降级 + 模块管理布局 ========== */

@media (max-width: 720px) {
    /* 毛玻璃在移动端开销大：全部替换为近实底 */
    .sidebar,
    .topo-float,
    .adapter-selector-bar,
    .fm-toolbar-header,
    .fm-action-bar {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: color-mix(in srgb, var(--bg-s) 97%, transparent) !important;
    }

    /* 入场动画在低端机掉帧：关闭 */
    .page.active,
    .page.active .page-title,
    .page.active .page-desc {
        animation: none !important;
    }

    /* 模块管理：统计卡 2 列 */
    .grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
    }

    .grid-4 .stat-card {
        padding: 12px 14px;
    }

    /* 模块卡片：信息行在上、操作行在下 */
    .module-card-main {
        flex-wrap: wrap;
        gap: 8px;
        padding: 11px 12px;
    }

    .module-card-side {
        width: 100%;
        padding-top: 8px;
        border-top: 1px solid var(--bd);
    }

    .module-primary-btn {
        flex: 1;
        min-height: 36px;
        justify-content: center;
    }

    .module-more-btn {
        flex: 0 0 36px;
        min-height: 36px;
    }

    .module-card-id {
        gap: 8px;
    }

    .module-detail {
        padding: 10px 12px 12px;
    }

    /* 事件流：窄屏收紧 */
    .ev-item {
        padding: 9px 12px;
        gap: 10px;
    }
    .ev-side {
        gap: 6px;
    }
}

@media (max-width: 480px) {
    .ev-plat {
        display: none;
    }
}

/* ========== 侧边栏头部（移动端抽屉，联动仪表盘标题） ========== */

.sidebar-header {
    display: none;
}

.sidebar-header-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--tx-p);
    letter-spacing: 0.02em;
}

/* 断点与移动/平板抽屉（1023px）对齐；高度与 header 对齐 */
@media (max-width: 1023px) {
    .sidebar-header {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        min-height: 46px;
        padding: 6px 20px;
        border-bottom: 1px solid color-mix(in srgb, var(--bd) 50%, transparent);
    }
}


/* ========== 2.0 视觉升级：微交互与质感 ========== */
/* 仅使用 transform/opacity，遵循 prefers-reduced-motion */

/* 卡片悬浮抬升：只给可点的实体卡（store/bot/module）；
   统计卡默认不抬升，可下钻的挂 .is-link（dashboard.css 定义同款上浮） */
.stat-card,
.store-card,
.bot-card,
.module-card {
    transition:
        transform 0.15s var(--ease-smooth),
        box-shadow 0.15s var(--ease-smooth),
        border-color 0.15s var(--ease-smooth);
}
.store-card:hover,
.bot-card:hover,
.module-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-hover);
    border-color: var(--bd-h);
}

/* 按钮微交互 */
.btn {
    transition:
        transform 0.12s var(--ease-smooth),
        box-shadow 0.15s var(--ease-smooth),
        background-color 0.15s var(--ease-smooth),
        border-color 0.15s var(--ease-smooth),
        opacity 0.15s var(--ease-smooth);
}
.btn:active {
    transform: scale(0.97);
}
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3.5px var(--accent-soft);
}

/* 侧边栏激活项左侧光条增强 */
.nav-item {
    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        transform 0.15s ease;
}
.nav-item:active {
    transform: scale(0.985);
}

/* 统计数字：更重的字重 + 表格数字对齐 */
.stat-val {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* 状态徽章 / chip / 下拉触发器过渡（含 box-shadow 供焦点环渐显） */
.chip,
.ep-combobox-trigger,
.ep-multiselect-trigger {
    transition:
        background-color 0.15s var(--ease-smooth),
        border-color 0.15s var(--ease-smooth),
        color 0.15s var(--ease-smooth),
        box-shadow 0.15s var(--ease-smooth);
}

/* 折叠指示器统一过渡（路由分组等） */
.route-group-chevron {
    transition: transform 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
    .stat-card,
    .store-card,
    .bot-card,
    .module-card,
    .btn,
    .nav-item,
    .route-group-chevron {
        transition: none;
    }
    .stat-card:hover,
    .store-card:hover,
    .bot-card:hover {
        transform: none;
    }
    .btn:active {
        transform: none;
    }
}

/* ── 移动端抽屉：必须完全不透明（浮在页面内容之上），并加强投影 ── */
/* 投影只允许在抽屉展开（.open）时存在：关闭态盒体已 translateX(-100%) 移出屏幕，
   阴影却仍会以 z-index:1000 渲染回视口约 50px，形成左侧黑色渐变遮罩 */
@media (max-width: 720px) {
    .sidebar {
        background: var(--bg-s) !important;
        box-shadow: none;
        transition: transform 0.3s, box-shadow 0.3s;
    }

    .sidebar.open {
        box-shadow: 10px 0 40px rgba(0, 0, 0, 0.5);
    }
}


/* ════════════════ 动画风格：smooth（流畅）════════════════ */
@keyframes smoothUp {
    0%   { opacity: 0; transform: translateY(16px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes smoothLeft {
    0%   { opacity: 0; transform: translateX(-14px); }
    100% { opacity: 1; transform: translateX(0); }
}

[data-anim="smooth"] .page.active { animation: smoothUp 0.55s cubic-bezier(0.22, 0.61, 0.36, 1); }

[data-anim="smooth"] .anim-enter .stat-card,
[data-anim="smooth"] .anim-enter .card {
    opacity: 0;
    animation: smoothUp 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
[data-anim="smooth"] .anim-enter .stat-card:nth-child(even),
[data-anim="smooth"] .anim-enter .card:nth-child(even) {
    animation-name: smoothLeft;
}
[data-anim="smooth"] .anim-enter .list-row,
[data-anim="smooth"] .anim-enter .ev-item {
    opacity: 0;
    animation: smoothUp 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

/* ════════════════ 动画风格：zoom（缩放）════════════════ */
@keyframes zoomInSoft {
    0%   { opacity: 0; transform: scale(0.94); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes zoomInRow {
    0%   { opacity: 0; transform: scale(0.97) translateY(4px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

[data-anim="zoom"] .page.active { animation: zoomInSoft 0.3s ease-out; }

[data-anim="zoom"] .anim-enter .stat-card,
[data-anim="zoom"] .anim-enter .card {
    opacity: 0;
    animation: zoomInSoft 0.32s ease-out forwards;
}
[data-anim="zoom"] .anim-enter .list-row,
[data-anim="zoom"] .anim-enter .ev-item {
    opacity: 0;
    animation: zoomInRow 0.28s ease-out forwards;
}

/* ════════════════ 动画风格：off（关闭）════════════════ */
[data-anim="off"] .page.active,
[data-anim="off"] .anim-enter .stat-card,
[data-anim="off"] .anim-enter .card,
[data-anim="off"] .anim-enter .list-row,
[data-anim="off"] .anim-enter .ev-item,
[data-anim="off"] .anim-enter .about-feature {
    animation: none !important;
    opacity: 1 !important;
    transition: none !important;
}

/* ════════════════ 组件库次世代：Tabs / 浮层统一 ════════════════ */

/* Tabs 激活语言全站唯一：accent-soft 柔和底 + accent 文字（与 nav-item/下拉选项同源）。
   覆盖各页面 css 里的局部实现（view-btn 原白底 / scope-nav-item 原手写 mix） */
.view-btn.active,
.scope-nav-item.active {
    background: var(--accent-soft);
    color: var(--accent);
    box-shadow: none;
}

.view-btn.active {
    font-weight: 600;
}

/* 浮层（popover / 挂 body 下拉）：--shadow-hover 悬浮影 + 签名弹入 scale(.96)+8px */
.popover {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-hover);
}

.popover.show {
    animation: popoverFadeIn 0.18s var(--ease-soft-spring);
}

@keyframes popoverFadeIn {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .popover.show {
        animation: none;
    }
}

/* ════════════════ 全局滚动条隐藏（保留滚动能力） ════════════════ */
/* 滚动条不显示但容器仍可滚动（滚轮/触摸/键盘）；代码编辑器保留
   细滚动条供定位。Firefox 走 scrollbar-width，Chromium 走 webkit。 */
* {
    scrollbar-width: none;
}
*::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* 白名单：代码编辑器（config 页 TOML / 文件编辑器）保留细滚动条 */
.CodeMirror-vscrollbar,
.CodeMirror-hscrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--bd) transparent;
}
.CodeMirror-vscrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    display: block;
}
.CodeMirror-hscrollbar::-webkit-scrollbar {
    height: 8px;
    width: 8px;
    display: block;
}
.CodeMirror-vscrollbar::-webkit-scrollbar-thumb,
.CodeMirror-hscrollbar::-webkit-scrollbar-thumb {
    background: var(--bd);
    border-radius: 4px;
}

/* ══════════ 移动端 UX 体检修复（≤768） ══════════ */
/* 注意：本文件中部有一条无 scoped 的 .page padding clamp() 规则，
   会压掉前面的媒体查询留白，故在文件末尾重新声明以生效 */

@media (max-width: 1023px) {
    /* 提高特异性：部分内核对后置 @media 规则与前置裸规则的同特异性排序不稳定 */
    .content .page {
        /* 抽屉/平板档：四边 16px */
        padding: 16px;
    }
}

@media (max-width: 768px) {
    /* 列表正文 13 → 14px，行高放宽 */
    .list-row,
    .ev-item,
    .cmd-row,
    .pkg-row,
    .audit-row,
    .bot-card,
    .fm-file-row,
    .route-item {
        font-size: 14px;
        line-height: 1.5;
    }

    /* 页签/分段按钮：全站统一触控目标 44px（view-btn/pkg-tab/settings 段） */
    .view-btn,
    .pkg-tab {
        min-height: 44px;
    }

    /* 工具条内小按钮兜底 */
    .filter-bar .btn-sm {
        min-height: 40px;
        min-width: 40px;
    }

    /* 芯片类元信息保底 12px 可读 */
    .chip {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    /* 手机档：四边 16px，不贴边 */
    .content .page {
        padding: 16px !important;
    }

    .header h1 {
        max-width: 46vw;
    }
}

/* ≤480：图标化后的 .btn-sm 保证 40px 最小可点宽度 */
@media (max-width: 480px) {
    .btn-sm {
        min-width: 40px;
    }
}

/* ══════════ 移动端（≤768）：模态近全屏（放 overrides 末尾以覆盖旧的 95% 宽规则） ══════════ */
@media (max-width: 768px) {
    .modal-overlay {
        padding: 8px;
    }

    .modal-box {
        width: 100%;
        max-width: 560px;
        max-height: calc(100dvh - 16px);
        padding: 16px;
    }

    /* 表单单列 + 输入 44px/16px（防 iOS 聚焦自动放大） */
    .modal-form-grid {
        grid-template-columns: 1fr;
    }

    .modal-box input,
    .modal-box select,
    .modal-box textarea {
        font-size: 16px;
    }

    .modal-box input:not([type="checkbox"]):not([type="radio"]) {
        min-height: 44px;
    }
}

/* 模块卡更多按钮：覆盖上方 ≤720 块的 36px 旧值（文件后部声明胜出） */
@media (max-width: 768px) {
    .module-more-btn,
    .module-more {
        flex: 0 0 40px;
        min-height: 40px;
        min-width: 40px;
    }
}

/* iOS 刘海/底部手势条：滚动内容与模态底部留出 safe-area */
@media (max-width: 1023px) {
    .page {
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 768px) {
    .modal-overlay {
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    }
}