/* ============================================================================
   AdminPro 前端主题 v3  ——  深色 + 绯红（Dark / Crimson）
   ----------------------------------------------------------------------------
   在 v2 布局（横向顶部导航）基础上，整体换成深色科技风配色。
   Naive UI 全部由 --n-* CSS 变量驱动，这里逐个覆盖为暗色值。

   只改样式，不动 DOM、不动 JS。
   切换：改 index.html 里 <link> 的 href
     theme-v4.css  深色绯红（当前）
     theme-v3.css  深色荧光绿
     theme-v2.css  浅色横向导航
     删除该行      完全还原原版
   ============================================================================ */

:root {
    /* ---- 底色（近黑，带一点冷绿调）---- */
    --ap-bg:        #0a0809;
    --ap-bg-2:      #0d0b0c;
    --ap-surface:   #131011;
    --ap-surface-2: #1a1618;
    --ap-surface-3: #221d1f;
    --ap-line:      #241e20;
    --ap-line-2:    #2e2628;

    /* ---- 文字 ---- */
    --ap-text:      #e6eef4;
    --ap-text-2:    #93a3b1;
    --ap-text-3:    #5c6b78;

    /* ---- 主色：荧光绿 ---- */
    --ap-primary:        #e11d48;
    --ap-primary-hover:  #f43f5e;
    --ap-primary-press:  #be123c;
    --ap-primary-soft:   rgba(225, 29, 72, .12);
    --ap-primary-glow:   rgba(225, 29, 72, .35);
    --ap-ring:           0 0 0 3px rgba(225, 29, 72, .18);

    /* ---- 语义色 ---- */
    --ap-danger:  #f43f5e;
    --ap-warn:    #f59e0b;
    --ap-info:    #38bdf8;

    --ap-r: 10px;
    --ap-r-sm: 8px;
    --ap-sider-w: 220px;
    --ap-nav-h: 58px;
    --ap-bar-h: 46px;
    --ap-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 10px rgba(0, 0, 0, .3);
    --ap-shadow-lg: 0 14px 40px rgba(0, 0, 0, .6);
}

/* ============================ 全局 ============================ */
html, body, #app, .n-config-provider {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
}
html, body {
    background: var(--ap-bg) !important;
    color: var(--ap-text) !important;
}
::selection { background: rgba(225, 29, 72, .3); color: #fff; }

*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: #2e2628; border-radius: 9px;
    border: 2px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: #3d3234; background-clip: content-box; }

/* ==========================================================================
   一、主轴反转：侧栏 → 顶部横向导航（同 v2）
   ========================================================================== */
.layout > .n-layout-scroll-container {
    flex-direction: row !important;
    overflow: hidden !important;
}

/* ==========================================================================
   二、顶部导航条（深色）
   ========================================================================== */
.layout-sider,
.n-layout-sider {
    width: var(--ap-sider-w) !important;
    min-width: var(--ap-sider-w) !important;
    max-width: var(--ap-sider-w) !important;
    flex: 0 0 var(--ap-sider-w) !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;

    background: #0c0909 !important;
    --n-color: transparent !important;
    --n-border-color: transparent !important;
    border-right: 1px solid var(--ap-line) !important;
    border-bottom: none !important;
    box-shadow: 1px 0 0 rgba(225, 29, 72, .06) !important;
    position: relative !important;
    z-index: 30 !important;
    overflow: visible !important;
    flex-direction: column !important;
}
.layout-sider .n-scrollbar { height: 100% !important; width: var(--ap-sider-w) !important; }
.layout-sider .n-scrollbar-container { overflow: visible !important; height: auto !important; }
.layout-sider .n-scrollbar-rail { display: none !important; }
.layout-sider .n-scrollbar-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    height: auto !important;
    width: 100% !important;
}
.layout-sider .n-layout-toggle-bar,
.n-layout-toggle-bar { display: none !important; }

/* 品牌区 */
.layout-sider .logo {
    width: 100% !important;
    min-width: 0 !important;
    height: 66px !important;
    padding: 0 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border: none !important;
    border-right: none !important;
    border-bottom: 1px solid var(--ap-line) !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
}
.layout-sider .logo img {
    height: 28px !important;
    width: auto !important;
    max-width: 120px !important;
    border-radius: 6px !important;
    object-fit: contain !important;
}

/* 菜单：横向胶囊 */
.n-menu.n-menu--vertical {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    height: auto !important;
    padding: 12px 10px !important;
    gap: 3px !important;
    flex: 1 1 auto !important;
    overflow: visible !important;

    --n-item-height: 38px !important;
    --n-border-radius: 999px !important;
    --n-item-text-color: var(--ap-text-2) !important;
    --n-item-text-color-hover: var(--ap-text) !important;
    --n-item-text-color-active: #ffffff !important;
    --n-item-text-color-active-hover: #ffffff !important;
    --n-item-icon-color: var(--ap-text-3) !important;
    --n-item-icon-color-hover: var(--ap-text-2) !important;
    --n-item-icon-color-active: #ffffff !important;
    --n-item-icon-color-active-hover: #ffffff !important;
    --n-item-color-hover: rgba(255, 255, 255, .06) !important;
    --n-item-color-active: var(--ap-primary) !important;
    --n-item-color-active-hover: var(--ap-primary-hover) !important;
    --n-font-size: 13.5px !important;
}
.n-menu--vertical .n-menu-item { width: 100% !important; margin: 0 !important; flex: 0 0 auto !important; }
.n-menu--vertical .n-menu-item-content {
    padding: 0 14px !important;
    height: 42px !important;
    border-radius: var(--ap-r-sm) !important;
    transition: all .18s ease !important;
}
.n-menu--vertical .n-menu-item-content--selected {
    box-shadow: 0 0 0 1px rgba(225, 29, 72, .5), 0 0 18px rgba(225, 29, 72, .35) !important;
    font-weight: 600 !important;
}
.n-menu--vertical .n-menu-item-content-header { font-weight: inherit !important; }

/* ==========================================================================
   三、主区
   ========================================================================== */
.n-layout.n-layout--static-positioned,
.layout > .n-layout-scroll-container > .n-layout {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    margin-left: 0 !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
}
.n-layout.n-layout--static-positioned > .n-layout-scroll-container {
    width: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* ==========================================================================
   四、页面标题条
   ========================================================================== */
.n-layout-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: var(--ap-bar-h) !important;
    min-height: 0 !important;
    max-height: var(--ap-bar-h) !important;
    padding: 0 !important;
    background: rgba(10, 15, 19, .92) !important;
    --n-color: rgba(10, 15, 19, .92) !important;
    --n-border-color: transparent !important;
    --n-text-color: var(--ap-text) !important;
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--ap-line) !important;
    box-shadow: none !important;
    z-index: 20 !important;
}
.layout-header {
    height: var(--ap-bar-h) !important;
    min-height: 0 !important;
    max-height: var(--ap-bar-h) !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    line-height: normal !important;
}
.layout-header-left,
.layout-header-right {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}
.layout-header-left .layout-header-trigger { display: none !important; }

/* 面包屑 → 页面标题 */
.layout-header-left .n-breadcrumb { margin-left: 0 !important; }
.n-breadcrumb { font-size: 15px !important; }
.n-breadcrumb-item, .n-breadcrumb-item__link { color: var(--ap-text-3) !important; font-size: 13px !important; }
.n-breadcrumb-item:last-child,
.n-breadcrumb-item:last-child .n-breadcrumb-item__link,
.n-breadcrumb-item:last-child .n-breadcrumb-item__link span {
    color: var(--ap-text) !important;
    font-weight: 650 !important;
    font-size: 15px !important;
}
.n-breadcrumb-item__separator { color: var(--ap-text-3) !important; margin: 0 8px !important; }

/* 隐藏红色状态条 + 音乐播放器 */
.inline-player { display: none !important; }
.layout-header-right > div > span:first-child { display: none !important; }
.layout-header-right [style*="red"] { display: none !important; }

/* 头像 */
.layout-header .avatar { display: flex !important; align-items: center !important; gap: 8px !important; }
.layout-header .n-avatar {
    background: var(--ap-primary-soft) !important;
    color: var(--ap-primary) !important;
    font-weight: 600 !important;
    box-shadow: 0 0 0 1px rgba(225, 29, 72, .3) !important;
}
.layout-header .n-divider { display: none !important; }
.layout-header .n-icon { color: var(--ap-text-2) !important; }
.layout-header .n-icon:hover { color: var(--ap-primary) !important; }

/* ==========================================================================
   五、内容区
   ========================================================================== */
.n-layout-content.layout-content,
.layout-content, .layout-default-background, .n-layout {
    background: var(--ap-bg) !important;
    left: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
}
.layout-content-main {
    padding: calc(var(--ap-bar-h) + 16px) 22px 40px !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 多标签条 */
.tabs-view {
    background: transparent !important;
    border-bottom: none !important;
    height: auto !important;
    padding: 0 0 12px 0 !important;
    margin: 0 !important;
    margin-left: 0 !important;
    left: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.tabs-view .tabs-close { display: none !important; }
/* 标签胶囊 */
.tabs-view [class*="tabs-card"] > * {
    border-radius: 999px !important;
}
.tabs-view .tabs-card-scroll > * > * {
    background: var(--ap-surface) !important;
    border: 1px solid var(--ap-line) !important;
    border-radius: 999px !important;
    color: var(--ap-text-2) !important;
    font-size: 12.5px !important;
    padding: 3px 14px !important;
    margin-right: 6px !important;
    transition: all .16s ease !important;
}
.tabs-view .tabs-card-scroll > * > *:hover {
    border-color: var(--ap-primary) !important;
    color: var(--ap-primary) !important;
}

/* 页面主体 */
.main-view, .main-view-fix {
    padding-top: 0 !important;
    margin-top: 52px !important;
}

/* ==========================================================================
   六、筛选表单
   ========================================================================== */
.index-root .n-form > .n-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto !important;
    column-gap: 14px !important;
    row-gap: 0 !important;
    align-items: center !important;
}
.index-root .n-form .n-form-item { margin-bottom: 0 !important; }
.index-root .n-form .n-form-item-feedback-wrapper { display: none !important; }
.index-root .n-form .n-form-item-blank { min-height: 0 !important; }
.index-root .n-form .n-form-item-label { font-size: 13px !important; color: var(--ap-text-2) !important; }
.index-root .n-form .n-space {
    flex-wrap: nowrap !important;
    margin-left: 0 !important;
    align-items: center !important;
    justify-content: flex-end !important;
    column-gap: 8px !important;
}
.index-root .n-form .n-space > * { flex: 0 0 auto !important; }

/* ==========================================================================
   七、卡片
   ========================================================================== */
.n-card {
    --n-border-radius: var(--ap-r) !important;
    --n-color: var(--ap-surface) !important;
    --n-color-modal: var(--ap-surface) !important;
    --n-color-popover: var(--ap-surface) !important;
    --n-color-embedded: var(--ap-bg-2) !important;
    --n-color-embedded-modal: var(--ap-bg-2) !important;
    --n-color-embedded-popover: var(--ap-bg-2) !important;
    --n-color-target: var(--ap-primary) !important;
    --n-text-color: var(--ap-text-2) !important;
    --n-title-text-color: var(--ap-text) !important;
    --n-title-font-weight: 650 !important;
    --n-border-color: var(--ap-line) !important;
    --n-box-shadow: var(--ap-shadow) !important;
    --n-action-color: var(--ap-bg-2) !important;
    background: var(--ap-surface) !important;
    border: 1px solid var(--ap-line) !important;
    box-shadow: var(--ap-shadow) !important;
}
.n-card__content { padding: 18px 20px !important; }
.n-card.mt-3 { margin-top: 16px !important; }

/* ==========================================================================
   八、表格（深色）
   ========================================================================== */
.n-data-table {
    --n-border-radius: var(--ap-r) !important;
    --n-border-color: var(--ap-line) !important;
    --n-border-color-modal: var(--ap-line) !important;
    --n-border-color-popover: var(--ap-line) !important;

    --n-th-color: #100c0d !important;
    --n-th-color-hover: #131b22 !important;
    --n-th-color-modal: #100c0d !important;
    --n-th-color-hover-modal: #131b22 !important;
    --n-th-color-popover: #100c0d !important;
    --n-th-color-hover-popover: #131b22 !important;

    --n-td-color: var(--ap-surface) !important;
    --n-td-color-hover: #1a1416 !important;
    --n-td-color-modal: var(--ap-surface) !important;
    --n-td-color-hover-modal: #1a1416 !important;
    --n-td-color-popover: var(--ap-surface) !important;
    --n-td-color-hover-popover: #1a1416 !important;
    --n-td-color-striped: #100c0d !important;
    --n-td-color-striped-modal: #100c0d !important;
    --n-td-color-striped-popover: #100c0d !important;

    --n-th-text-color: var(--ap-text-2) !important;
    --n-td-text-color: var(--ap-text-2) !important;
    --n-th-font-weight: 700 !important;
    --n-th-icon-color: var(--ap-text-3) !important;
    --n-th-icon-color-active: var(--ap-primary) !important;
    --n-th-button-color-hover: rgba(225, 29, 72, .12) !important;
    --n-th-padding: 10px 8px !important;
    --n-td-padding: 12px 8px !important;
    --n-loading-color: var(--ap-primary) !important;
    --n-empty-padding: 48px 0 !important;
    --n-box-shadow-before: inset -12px 0 8px -12px rgba(0, 0, 0, .8) !important;
    --n-box-shadow-after: inset 12px 0 8px -12px rgba(0, 0, 0, .8) !important;
    --n-font-size: 13px !important;
    font-size: 13px !important;
    background: transparent !important;
}
.n-data-table-th {
    font-size: 11.5px !important;
    letter-spacing: .4px !important;
    white-space: nowrap !important;
    border-color: var(--ap-line) !important;
}
.n-data-table-td {
    white-space: nowrap !important;
    border-bottom: 1px solid var(--ap-line) !important;
    border-color: var(--ap-line) !important;
}
.n-data-table-tr:hover .n-data-table-td { background: #1a1416 !important; }
.n-data-table-base-table-header { background: #100c0d !important; }
.n-data-table-th--fixed-right { background: #100c0d !important; }
.n-data-table-td--fixed-right { background: var(--ap-surface) !important; }
.n-data-table-tr:hover .n-data-table-td--fixed-right { background: #1a1416 !important; }

/* 列宽：一屏放得下，避免 sticky 操作列盖住无障碍/安装日期 */
.n-data-table-table { min-width: 1258px !important; table-layout: fixed !important; }
.n-data-table-table colgroup col:nth-child(1)  { width: 168px !important; min-width: 168px !important; }
.n-data-table-table colgroup col:nth-child(n+2):nth-child(-n+10) { width: 74px !important; min-width: 74px !important; }
.n-data-table-table colgroup col:nth-child(11) { width: 94px !important; min-width: 94px !important; }
.n-data-table-table colgroup col:nth-child(12) { width: 330px !important; min-width: 330px !important; }
.n-data-table-base-table { overflow-x: auto !important; }
.n-data-table-wrapper { overflow-x: visible !important; }
.table-toolbar { padding-bottom: 14px !important; }
.table-toolbar .n-icon { color: var(--ap-text-3) !important; }
.table-toolbar .n-icon:hover { color: var(--ap-primary) !important; }

/* ==========================================================================
   九、按钮
   ========================================================================== */
.n-button { --n-border-radius: var(--ap-r-sm) !important; --n-font-size: 13px !important; font-weight: 500 !important; }
.n-button--primary-type {
    --n-color: var(--ap-primary) !important;
    --n-color-hover: var(--ap-primary-hover) !important;
    --n-color-pressed: var(--ap-primary-press) !important;
    --n-color-focus: var(--ap-primary-hover) !important;
    --n-text-color: #ffffff !important;
    --n-text-color-hover: #ffffff !important;
    --n-text-color-pressed: #ffffff !important;
    --n-text-color-focus: #ffffff !important;
    --n-border: 1px solid var(--ap-primary) !important;
    --n-border-hover: 1px solid var(--ap-primary-hover) !important;
    --n-border-pressed: 1px solid var(--ap-primary-press) !important;
    --n-border-focus: 1px solid var(--ap-primary-hover) !important;
    box-shadow: 0 0 14px rgba(225, 29, 72, .28) !important;
}
.n-button--default-type {
    --n-color: var(--ap-surface-2) !important;
    --n-color-hover: var(--ap-surface-3) !important;
    --n-color-pressed: var(--ap-surface-3) !important;
    --n-color-focus: var(--ap-surface-3) !important;
    --n-border: 1px solid var(--ap-line-2) !important;
    --n-border-hover: 1px solid rgba(225, 29, 72, .5) !important;
    --n-border-focus: 1px solid rgba(225, 29, 72, .5) !important;
    --n-text-color: var(--ap-text-2) !important;
    --n-text-color-hover: var(--ap-primary) !important;
    --n-text-color-focus: var(--ap-primary) !important;
}
.n-button--error-type {
    --n-color: transparent !important;
    --n-color-hover: rgba(244, 63, 94, .14) !important;
    --n-text-color: var(--ap-danger) !important;
    --n-text-color-hover: var(--ap-danger) !important;
    --n-border: 1px solid rgba(244, 63, 94, .45) !important;
    --n-border-hover: 1px solid var(--ap-danger) !important;
}
/* 单选按钮组 */
.n-radio-button {
    --n-color: var(--ap-surface-2) !important;
    --n-color-checked: var(--ap-primary) !important;
    --n-color-checked-hover: var(--ap-primary-hover) !important;
    --n-text-color: var(--ap-text-2) !important;
    --n-text-color-checked: #ffffff !important;
    --n-border: 1px solid var(--ap-line-2) !important;
    --n-border-checked: 1px solid var(--ap-primary) !important;
    --n-border-hover: 1px solid rgba(225, 29, 72, .5) !important;
}

/* ==========================================================================
   十、输入 / 下拉 / 分页 / 开关
   ========================================================================== */
.n-input {
    --n-color: #100c0d !important;
    --n-color-focus: #100c0d !important;
    --n-border-radius: var(--ap-r-sm) !important;
    --n-height: 36px !important;
    --n-font-size: 13px !important;
    --n-border: 1px solid var(--ap-line-2) !important;
    --n-border-hover: 1px solid rgba(225, 29, 72, .5) !important;
    --n-border-focus: 1px solid var(--ap-primary) !important;
    --n-box-shadow-focus: var(--ap-ring) !important;
    --n-caret-color: var(--ap-primary) !important;
    --n-text-color: var(--ap-text) !important;
    --n-placeholder-color: var(--ap-text-3) !important;
    --n-icon-color: var(--ap-text-3) !important;
    --n-clear-color: var(--ap-text-3) !important;
    --n-clear-color-hover: var(--ap-text-2) !important;
}
.n-base-selection {
    --n-color: #100c0d !important;
    --n-color-active: #100c0d !important;
    --n-border-radius: var(--ap-r-sm) !important;
    --n-height: 36px !important;
    --n-font-size: 13px !important;
    --n-border: 1px solid var(--ap-line-2) !important;
    --n-border-hover: 1px solid rgba(225, 29, 72, .5) !important;
    --n-border-active: 1px solid var(--ap-primary) !important;
    --n-border-focus: 1px solid var(--ap-primary) !important;
    --n-box-shadow-active: var(--ap-ring) !important;
    --n-box-shadow-focus: var(--ap-ring) !important;
    --n-caret-color: var(--ap-primary) !important;
    --n-text-color: var(--ap-text) !important;
    --n-placeholder-color: var(--ap-text-3) !important;
    --n-arrow-color: var(--ap-text-3) !important;
}
/* 下拉面板 */
.n-base-select-menu,
.n-popselect-menu,
.n-dropdown-menu,
.n-popover {
    --n-color: var(--ap-surface-2) !important;
    --n-text-color: var(--ap-text) !important;
    --n-border-color: var(--ap-line-2) !important;
    --n-option-text-color: var(--ap-text-2) !important;
    --n-option-text-color-active: var(--ap-primary) !important;
    --n-option-text-color-pending: var(--ap-primary) !important;
    --n-option-color-pending: var(--ap-primary-soft) !important;
    --n-option-color-active-pending: var(--ap-primary-soft) !important;
    --n-border-radius: var(--ap-r-sm) !important;
}
.n-base-select-menu { box-shadow: var(--ap-shadow-lg) !important; }

.n-pagination {
    --n-item-border-radius: var(--ap-r-sm) !important;
    --n-item-text-color: var(--ap-text-2) !important;
    --n-item-text-color-hover: var(--ap-primary) !important;
    --n-item-text-color-active: var(--ap-primary) !important;
    --n-item-text-color-pressed: var(--ap-primary) !important;
    --n-item-text-color-disabled: var(--ap-text-3) !important;
    --n-item-border-active: 1px solid var(--ap-primary) !important;
    --n-item-border: 1px solid var(--ap-line-2) !important;
    --n-item-border-hover: 1px solid rgba(225, 29, 72, .5) !important;
    --n-item-color-hover: var(--ap-primary-soft) !important;
    --n-item-font-size: 13px !important;
    --n-item-size: 30px !important;
    --n-jumper-text-color: var(--ap-text-2) !important;
    --n-button-border: 1px solid var(--ap-line-2) !important;
    --n-button-icon-color: var(--ap-text-2) !important;
}
.n-switch {
    --n-rail-color: #2e2628 !important;
    --n-rail-color-active: var(--ap-primary) !important;
    --n-rail-border-radius: 999px !important;
    --n-button-border-radius: 999px !important;
    --n-button-color: #100c0d !important;
    --n-box-shadow-focus: var(--ap-ring) !important;
    --n-loading-color: var(--ap-primary) !important;
}
.n-checkbox {
    --n-color: transparent !important;
    --n-color-checked: var(--ap-primary) !important;
    --n-border: 1px solid var(--ap-line-2) !important;
    --n-border-checked: 1px solid var(--ap-primary) !important;
    --n-text-color: var(--ap-text-2) !important;
    --n-check-mark-color: #ffffff !important;
}

/* ==========================================================================
   十一、空状态 / 弹窗 / 其它
   ========================================================================== */
.n-empty {
    --n-text-color: var(--ap-text-3) !important;
    --n-icon-color: #2e2628 !important;
    --n-font-size: 13px !important;
}
.n-dialog, .n-modal {
    --n-color: var(--ap-surface) !important;
    --n-text-color: var(--ap-text-2) !important;
    --n-title-text-color: var(--ap-text) !important;
    --n-border-radius: 14px !important;
    --n-border: 1px solid var(--ap-line-2) !important;
    box-shadow: var(--ap-shadow-lg) !important;
}
.n-tooltip {
    --n-color: #221d1f !important;
    --n-text-color: var(--ap-text) !important;
    --n-border-radius: var(--ap-r-sm) !important;
}
.n-message, .n-notification {
    --n-color: var(--ap-surface-2) !important;
    --n-text-color: var(--ap-text) !important;
    --n-border-radius: var(--ap-r) !important;
    --n-border-color: var(--ap-line-2) !important;
    box-shadow: var(--ap-shadow-lg) !important;
}
.n-divider {
    --n-color: var(--ap-line) !important;
    border-color: var(--ap-line) !important;
}
.n-form-item-label { color: var(--ap-text-2) !important; }
.n-icon { color: inherit; }
.n-spin .n-base-loading { --n-color: var(--ap-primary) !important; }
.n-progress .n-progress-graph-line-fill { background: var(--ap-primary) !important; }

/* ==========================================================================
   十二、响应式
   ========================================================================== */
@media (max-width: 1100px) {
    :root { --ap-sider-w: 176px; }
    .layout-sider .logo { padding: 0 12px !important; }
    .layout-sider .logo img { height: 24px !important; }
    .n-menu--vertical .n-menu-item-content { padding: 0 11px !important; }
    .layout-content-main { padding: calc(var(--ap-bar-h) + 12px) 14px 32px !important; }
    .n-data-table-table { min-width: 1120px !important; }
    .n-data-table-table colgroup col:nth-child(1) { width: 150px !important; min-width: 150px !important; }
    .n-data-table-table colgroup col:nth-child(n+2):nth-child(-n+10) { width: 68px !important; min-width: 68px !important; }
    .n-data-table-table colgroup col:nth-child(11) { width: 86px !important; min-width: 86px !important; }
    .n-data-table-table colgroup col:nth-child(12) { width: 296px !important; min-width: 296px !important; }
}

/* ==========================================================================
   十三、应用列表页左栏导航项（自定义 thing-cell，原版是浅底蓝字）
   --------------------------------------------------------------------------
   来源：assets/system-CcaPTZdy.css
     .thing-cell-on[data-v-9a915ab9]{background:#f0faff;color:#2d8cf0}
     .thing-cell[data-v-9a915ab9]:hover{background:#f3f3f3}
   在深色主题下这两条会露出浅底，必须覆盖（用 !important 压过 scoped 属性选择器）。
   ========================================================================== */
.n-thing {
    --n-color: transparent !important;
    --n-color-modal: transparent !important;
    --n-color-popover: transparent !important;
    --n-text-color: var(--ap-text-2) !important;
    --n-title-text-color: var(--ap-text) !important;
    --n-title-font-weight: 600 !important;
    --n-description-text-color: var(--ap-text-3) !important;
    --n-avatar-color: var(--ap-surface-2) !important;
}
.thing-cell {
    background: transparent !important;
    color: var(--ap-text-2) !important;
    border-radius: var(--ap-r-sm) !important;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease !important;
}
.thing-cell:hover { background: rgba(255, 255, 255, .05) !important; }
.thing-cell-on,
.thing-cell-on:hover {
    background: var(--ap-primary-soft) !important;
    color: var(--ap-primary) !important;
    box-shadow: inset 0 0 0 1px rgba(225, 29, 72, .38) !important;
}
.thing-cell .n-thing-header__title,
.thing-cell .n-thing-main .n-thing-header .n-thing-header__title {
    color: var(--ap-text-2) !important;
}
.thing-cell-on .n-thing-header__title,
.thing-cell-on .n-thing-main .n-thing-header .n-thing-header__title {
    color: var(--ap-primary) !important;
}
.thing-cell .n-thing-main__description { color: var(--ap-text-3) !important; }
.thing-cell-on .n-thing-main__description { color: var(--ap-primary) !important; opacity: .85; }

/* 应用卡片（图标 + 包名 + 安装时间 + 下载/删除）*/
.n-card.proCard { background: var(--ap-surface) !important; }
.proCard .n-thing { --n-text-color: var(--ap-text-2) !important; }
/* 表格操作列按钮：缩一点，保证一屏内放得下 5 个 */
.n-data-table .n-button {
    --n-height: 26px !important;
    --n-font-size: 11.5px !important;
    --n-padding: 0 9px !important;
    --n-border-radius: 6px !important;
}
/* ==========================================================================
   十四、v6 追加修复
   ========================================================================== */

/* ---------- 1) 菜单选中项那个「怪边框」----------
   根因：Naive 的选中底色画在 .n-menu-item-content::before 上，
        它带 border-radius: 999px 且左右 inset 8px（药丸形），
        而内容盒是 8px 圆角，再叠加我加的 1px 描边环
        → 两个形状错位，看起来就是一圈怪边框。
   修法：把 --n-border-radius 和 ::before 的圆角/内缩统一成 8px 直角矩形。 */
.n-menu.n-menu--vertical {
    --n-border-radius: var(--ap-r-sm) !important;
}
.n-menu--vertical .n-menu-item-content::before {
    top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
    border-radius: var(--ap-r-sm) !important;
}
.n-menu--vertical .n-menu-item-content--selected {
    box-shadow: 0 4px 14px rgba(225, 29, 72, .30) !important;
}
.n-menu--vertical .n-menu-item-content:hover::before {
    background: rgba(255, 255, 255, .05) !important;
}

/* ---------- 2) 把「更新时间 + 音乐播放器」搬回左侧栏底部 ----------
   这两块在 DOM 上属于顶栏右侧（.layout-header-right 的第一个 div），
   CSS 没法真的搬 DOM，所以用 position: fixed 定位到侧栏底部。 */
.layout-header-right > div:has(.inline-player) {
    position: fixed !important;
    left: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    right: auto !important;
    width: var(--ap-sider-w) !important;
    box-sizing: border-box !important;
    padding: 12px 12px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: normal !important;
    background: #0a0708 !important;
    border-top: 1px solid var(--ap-line) !important;
    border-right: 1px solid var(--ap-line) !important;
    z-index: 40 !important;
    overflow: hidden !important;
}
/* 更新时间那行 */
.layout-header-right > div:has(.inline-player) > span:first-child {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 10.5px !important;
    line-height: 1.5 !important;
    color: var(--ap-text-3) !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    height: auto !important;
    white-space: normal !important;
    word-break: break-all !important;
}
/* 播放器本体：竖排 */
.inline-player {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: var(--ap-surface) !important;
    border: 1px solid var(--ap-line) !important;
    border-radius: 10px !important;
    padding: 9px 10px !important;
    height: auto !important;
    transition: border-color .18s ease, box-shadow .18s ease !important;
}
.inline-player:hover {
    border-color: rgba(225, 29, 72, .45) !important;
    box-shadow: 0 0 14px rgba(225, 29, 72, .18) !important;
}
.inline-player > span:first-child {
    width: 100% !important;
    font-size: 11px !important;
    color: var(--ap-text-2) !important;
    letter-spacing: .3px !important;
}
.inline-player .n-slider { flex: 1 1 100% !important; width: 100% !important; margin: 0 !important; }
.inline-player .n-slider .n-slider-rail { background: #2e2628 !important; }
.inline-player .n-slider .n-slider-rail__fill { background: var(--ap-primary) !important; }
.inline-player .n-slider .n-slider-handle { background: var(--ap-primary) !important; box-shadow: 0 0 8px rgba(225,29,72,.5) !important; }
.inline-player .n-button {
    --n-color: transparent !important;
    --n-color-hover: var(--ap-primary-soft) !important;
    --n-color-pressed: var(--ap-primary-soft) !important;
    --n-text-color: var(--ap-text-2) !important;
    --n-text-color-hover: var(--ap-primary) !important;
    --n-text-color-pressed: var(--ap-primary) !important;
    --n-border: 1px solid var(--ap-line-2) !important;
    --n-border-hover: 1px solid rgba(225, 29, 72, .5) !important;
    --n-border-pressed: 1px solid rgba(225, 29, 72, .5) !important;
    --n-border-radius: 7px !important;
    --n-height: 26px !important;
    --n-width: 30px !important;
}
/* 音量百分比 */
.inline-player > div:last-of-type {
    font-size: 10.5px !important;
    color: var(--ap-text-3) !important;
    margin-left: auto !important;
}
/* 侧栏给播放器让出底部空间 */
.layout-sider .n-scrollbar-content { padding-bottom: 168px !important; }

/* ---------- 3) 应用生成 表单：窄竖条 → 多列网格 ----------
   原状：.n-form 311px 宽 × 1768px 高，输入框只有 200px，右侧大片空白。 */
.n-form:has(> .n-form-item) {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)) !important;
    column-gap: 18px !important;
    row-gap: 2px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: none !important;
}
.n-form:has(> .n-form-item) > .n-form-item {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    margin-bottom: 12px !important;
}
.n-form:has(> .n-form-item) .n-form-item-blank { min-width: 0 !important; width: 100% !important; }
.n-form:has(> .n-form-item) .n-input,
.n-form:has(> .n-form-item) .n-base-selection,
.n-form:has(> .n-form-item) .n-input-number { width: 100% !important; }
/* 最后一行的提交按钮占满整行 */
.n-form:has(> .n-form-item) > *:last-child {
    grid-column: 1 / -1 !important;
    margin-top: 8px !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--ap-line) !important;
}
/* 表单所在卡片撑满 */
.layout-content-main .n-card { width: 100% !important; }

/* ---------- 4) 应用下载：卡片更宽 + 交互效果 ---------- */
.proCard .n-grid:has(.n-card--hoverable) {
    grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)) !important;
    gap: 14px !important;
}
.proCard .n-card--hoverable {
    border-radius: 12px !important;
    border: 1px solid var(--ap-line) !important;
    background: var(--ap-surface) !important;
    transition: transform .2s cubic-bezier(.2,.9,.3,1.1), box-shadow .2s ease, border-color .2s ease !important;
    overflow: hidden !important;
    position: relative !important;
}
.proCard .n-card--hoverable::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 12px !important;
    pointer-events: none !important;
    background: radial-gradient(120% 80% at 50% 0%, rgba(225, 29, 72, .12), transparent 60%) !important;
    opacity: 0 !important;
    transition: opacity .2s ease !important;
}
.proCard .n-card--hoverable:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(225, 29, 72, .55) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .5), 0 0 0 1px rgba(225, 29, 72, .35), 0 0 22px rgba(225, 29, 72, .22) !important;
}
.proCard .n-card--hoverable:hover::after { opacity: 1 !important; }
.proCard .n-card--hoverable .n-card__content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 18px 16px 16px !important;
    text-align: center !important;
}
/* 应用图标 */
.proCard .n-card--hoverable img {
    width: 60px !important;
    height: 60px !important;
    border-radius: 14px !important;
    object-fit: cover !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06) !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
}
.proCard .n-card--hoverable:hover img {
    transform: scale(1.06) !important;
    box-shadow: 0 8px 22px rgba(225, 29, 72, .3), 0 0 0 1px rgba(225, 29, 72, .4) !important;
}
.proCard .n-card--hoverable .n-button { min-width: 88px !important; }
/* ---------- 5) 修播放器错位 ----------
   .n-layout-header 上的 backdrop-filter 会为 position:fixed 后代
   创建包含块，导致搬到侧栏底部的播放器变成「header 的底部」。
   去掉它（header 底色本来就接近不透明，视觉无损）。 */
.n-layout-header { backdrop-filter: none !important; }
.layout-header { backdrop-filter: none !important; }
/* ---------- 6) 应用生成表单：让它所在网格单元跨满整行 ----------
   父链：.n-grid[3列] > div[311px] > form.n-form
   表单只占第 1 格，所以之前怎么设网格都只有一列。
   把承载表单的那个网格单元拉成整行，表单才有空间铺开。 */
/* ★ 注意：:has() 不能嵌套 —— 写成 :has(> .n-form:has(> .n-form-item))
   属于非法选择器，会让【整条选择器列表】被丢弃（包括合法的那个）。
   这里只保留单层 :has()。 */
.n-grid > div:has(> .n-form) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
}
/* 表单所在卡片也撑满（避免右侧留大片空白）*/
.n-grid > div:has(> .n-card.proCard) { min-width: 0 !important; }
/* 输入框铺满各自单元 */
.n-form:has(> .n-form-item) .n-input,
.n-form:has(> .n-form-item) .n-base-selection,
.n-form:has(> .n-form-item) .n-input-number,
.n-form:has(> .n-form-item) .n-date-picker {
    width: 100% !important;
    min-width: 0 !important;
}
/* 表单项里的横向 space 也不要挤压 */
.n-form:has(> .n-form-item) .n-form-item-blank > .n-space { width: 100% !important; flex-wrap: wrap !important; }
/* ---------- 7) 播放器被侧栏盖住（层叠上下文）----------
   播放器虽然写了 position:fixed; z-index:40，
   但它嵌在 .n-layout-header（z-index:20）的层叠上下文里，
   而侧栏 .layout-sider 是 z-index:30 —— 侧栏整体压在播放器上面。
   把顶栏的 z-index 提到侧栏之上即可（两者横向不重叠，安全）。 */
.n-layout-header { z-index: 50 !important; }
/* 播放器面板提亮一点，跟侧栏底色区分开 */
.layout-header-right > div:has(.inline-player) { background: #100d0e !important; }
.inline-player { background: #1a1618 !important; border-color: #2e2628 !important; }

/* ---------- 8) 表单标签不要竖排 ----------
   之前我给 .n-form-item 写死了 grid-template-columns: minmax(0,1fr)，
   导致标签列被压到极窄，「权限结束」竖成 4 行。改成不干预列定义，
   只让标签不换行。 */
.n-form:has(> .n-form-item) > .n-form-item {
    grid-template-columns: unset !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
}
.n-form:has(> .n-form-item) .n-form-item-label {
    white-space: nowrap !important;
    min-width: 64px !important;
    font-size: 13px !important;
    color: var(--ap-text-2) !important;
}
.n-form:has(> .n-form-item) .n-form-item-blank { min-width: 0 !important; }
/* ---------- 9) 播放器细节：滑块手柄缩小、排版收紧 ---------- */
.inline-player .n-slider {
    --n-handle-size: 12px !important;
    --n-rail-height: 4px !important;
    --n-rail-color: #2e2628 !important;
    --n-rail-color-active: var(--ap-primary) !important;
    --n-fill-color: var(--ap-primary) !important;
    --n-handle-color: var(--ap-primary) !important;
    height: 18px !important;
}
.inline-player .n-slider .n-slider-handle-wrapper,
.inline-player .n-slider .n-slider-handle {
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
}
.inline-player .n-slider .n-slider-rail {
    height: 4px !important;
    border-radius: 999px !important;
}
.inline-player .n-slider .n-slider-rail__fill {
    height: 4px !important;
    border-radius: 999px !important;
}
.inline-player > div:last-of-type {
    font-size: 10px !important;
    color: var(--ap-text-3) !important;
    letter-spacing: .2px !important;
}
/* 三个控制按钮更紧凑 */
.inline-player .n-button { --n-width: 28px !important; --n-height: 24px !important; --n-font-size: 11px !important; }
/* ==========================================================================
   十五、登录页重构：左右分栏（自适应电脑/手机）
   --------------------------------------------------------------------------
   原状：居中一列 —— 顶部 360x360 大 logo，下面 25px 名称，再下面表单。
   新状：桌面端左右分栏（左品牌视觉 / 右登录表单）；
         ≤900px 收成单列（顶部紧凑品牌头 + 下方表单）。
   实现要点：.view-account-container 用 display:contents 让它的两个子元素
            （.view-account-top / .view-account-form）直接参与外层 grid。
   ========================================================================== */
.view-account {
    display: grid !important;
    grid-template-columns: 1.08fr 0.92fr !important;
    min-height: 100vh !important;
    width: 100% !important;
    background: var(--ap-bg) !important;
    overflow: hidden !important;
}
.view-account-header { display: none !important; }
.view-account-container { display: contents !important; }

/* ---------- 左：品牌视觉区 ---------- */
.view-account-top {
    grid-column: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 26px !important;
    padding: 56px 48px !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
    position: relative !important;
    overflow: hidden !important;
    border-right: 1px solid var(--ap-line) !important;
    background:
        radial-gradient(120% 90% at 12% 8%, rgba(225, 29, 72, .26), transparent 55%),
        radial-gradient(110% 80% at 92% 92%, rgba(225, 29, 72, .15), transparent 60%),
        linear-gradient(160deg, #150a0d 0%, #0a0708 55%, #0e0a0c 100%) !important;
}
/* 网格纹理 + 光晕 */
.view-account-top::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background-image:
        linear-gradient(rgba(255, 255, 255, .030) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .030) 1px, transparent 1px) !important;
    background-size: 46px 46px !important;
    pointer-events: none !important;
}
.view-account-top::after {
    content: '' !important;
    position: absolute !important;
    width: 420px !important; height: 420px !important;
    left: 50% !important; top: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(225, 29, 72, .18), transparent 62%) !important;
    filter: blur(20px) !important;
    pointer-events: none !important;
}
.view-account-top-logo {
    width: 128px !important;
    height: 128px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 1 !important;
    animation: apFloat 5.5s ease-in-out infinite !important;
}
@keyframes apFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}
.view-account-top-logo img {
    width: 128px !important;
    height: 128px !important;
    border-radius: 30px !important;
    object-fit: cover !important;
    box-shadow: 0 20px 56px rgba(225, 29, 72, .32), 0 0 0 1px rgba(255, 255, 255, .08) !important;
}
.view-account-top-desc {
    position: relative !important;
    z-index: 1 !important;
    margin: 0 !important;
    font-size: 34px !important;
    font-weight: 700 !important;
    letter-spacing: 3px !important;
    color: #ffffff !important;
    text-align: center !important;
    text-shadow: 0 4px 26px rgba(225, 29, 72, .40) !important;
}

/* ---------- 右：登录表单区 ---------- */
.view-account-form {
    grid-column: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 48px !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    background: var(--ap-bg) !important;
}
/* 登录表单不要套用「应用生成」那套多列网格 */
.view-account .n-form,
.view-account .n-form:has(> .n-form-item) {
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: 372px !important;
    margin: 0 auto !important;
    column-gap: 0 !important;
}
.view-account .n-form > *:last-child {
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}
.view-account .n-form-item { margin-bottom: 6px !important; }
.view-account .n-form-item-feedback-wrapper { min-height: 18px !important; }
.view-account .n-input {
    --n-height: 44px !important;
    --n-border-radius: 10px !important;
    --n-font-size: 14px !important;
}
.view-account .n-button--primary-type {
    --n-height: 46px !important;
    --n-border-radius: 10px !important;
    --n-font-size: 15px !important;
    letter-spacing: 2px !important;
}
.view-account .n-checkbox { --n-font-size: 13px !important; }
.view-account .n-form-item-feedback-wrapper { font-size: 12.5px !important; }

/* ---------- 手机端：单列 ---------- */
@media (max-width: 900px) {
    .view-account {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto 1fr !important;
        min-height: 100vh !important;
        overflow: visible !important;
    }
    .view-account-top {
        grid-column: 1 !important;
        grid-row: 1 !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 14px !important;
        padding: 34px 22px 26px !important;
        border-right: none !important;
        border-bottom: 1px solid var(--ap-line) !important;
    }
    .view-account-top::after { width: 240px !important; height: 240px !important; }
    .view-account-top-logo {
        width: 60px !important; height: 60px !important;
        animation: none !important;
    }
    .view-account-top-logo img {
        width: 60px !important; height: 60px !important; border-radius: 16px !important;
        box-shadow: 0 10px 26px rgba(225, 29, 72, .30) !important;
    }
    .view-account-top-desc {
        font-size: 21px !important;
        letter-spacing: 1.5px !important;
        text-align: left !important;
    }
    .view-account-form {
        grid-column: 1 !important;
        grid-row: 2 !important;
        justify-content: flex-start !important;
        padding: 30px 20px 56px !important;
    }
    .view-account .n-form,
    .view-account .n-form:has(> .n-form-item) { max-width: 100% !important; }
}
@media (max-width: 380px) {
    .view-account-top-desc { font-size: 18px !important; }
    .view-account-top-logo, .view-account-top-logo img { width: 52px !important; height: 52px !important; }
}
/* ==========================================================================
   十六、头像回退（配合 brand-fix.js）
   --------------------------------------------------------------------------
   用户没上传头像时，前端 404 后会回退显示 /assets/logo-*.png（品牌 logo），
   看起来就像"头像被换成 logo 了"。brand-fix.js 检测到加载失败会给
   .n-avatar 加 .ap-avatar-fallback，这里定义成中性的人形图标。
   ========================================================================== */
/* 前端没做"用户无头像"的兜底，直接把品牌 logo 当默认头像用了。
   这里用属性选择器认出这种情况，换成中性人形图标。
   用户一旦上传了自己的头像（src 变成 /user/storage/...），本规则自动失效。 */
.layout-header .avatar .n-avatar:has(img[src*="logo-"]) {
    background: rgba(225, 29, 72, .13) !important;
    color: var(--ap-primary) !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 0 0 1px rgba(225, 29, 72, .32) !important;
}
.layout-header .avatar .n-avatar:has(img[src*="logo-"]) img {
    display: none !important;
}
.layout-header .avatar .n-avatar:has(img[src*="logo-"])::after {
    content: '\f007' !important;
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    color: var(--ap-primary) !important;
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}