/* ==========================================================================
   iOS 26 Liquid Glass Theme Overlay
   作用层:覆盖 Metronic style.bundle / style.white 的视觉令牌
   设计语言:Apple iOS 26 / visionOS Liquid Glass
   ========================================================================== */

/* --------------------------------------------------------------------------
   SECTION 1 · 设计令牌 Design Tokens
   -------------------------------------------------------------------------- */
:root {
    /* — Apple System Colors (light) — */
    --ios-blue: #007aff;
    --ios-blue-dark: #0a84ff;
    --ios-indigo: #5856d6;
    --ios-purple: #af52de;
    --ios-pink: #ff2d55;
    --ios-red: #ff3b30;
    --ios-orange: #ff9500;
    --ios-yellow: #ffcc00;
    --ios-green: #34c759;
    --ios-mint: #00c7be;
    --ios-teal: #30b0c7;
    --ios-cyan: #32ade6;

    /* — 文字色 (label / secondary / tertiary) — */
    --ios-label: rgba(0, 0, 0, 0.92);
    --ios-label-secondary: rgba(60, 60, 67, 0.82);
    --ios-label-tertiary: rgba(60, 60, 67, 0.65);
    --ios-label-quaternary: rgba(60, 60, 67, 0.38);
    --ios-label-on-glass: rgba(28, 28, 30, 0.95);

    /* — System Fills — */
    --ios-fill-1: rgba(120, 120, 128, 0.16);
    --ios-fill-2: rgba(120, 120, 128, 0.12);
    --ios-fill-3: rgba(118, 118, 128, 0.08);
    --ios-fill-4: rgba(118, 118, 128, 0.04);
    --ios-separator: rgba(60, 60, 67, 0.16);
    --ios-separator-opaque: rgba(198, 198, 200, 0.85);

    /* — Liquid Glass Material — */
    --glass-thin-bg: rgba(255, 255, 255, 0.42);
    --glass-regular-bg: rgba(255, 255, 255, 0.62);
    --glass-thick-bg: rgba(255, 255, 255, 0.78);
    --glass-tinted-bg: rgba(255, 255, 255, 0.55);
    --glass-border: 1px solid rgba(255, 255, 255, 0.55);
    --glass-border-inner: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    --glass-blur: saturate(180%) blur(28px);
    --glass-blur-strong: saturate(190%) blur(40px);
    --glass-blur-light: saturate(160%) blur(18px);

    /* — 阴影 (分层投影) — */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04), 0 0 0 0.5px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 8px 24px rgba(31, 38, 135, 0.08), 0 2px 6px rgba(31, 38, 135, 0.04);
    --shadow-lg: 0 18px 48px rgba(31, 38, 135, 0.14), 0 4px 12px rgba(31, 38, 135, 0.06);
    --shadow-glass: 0 1px 0 rgba(255, 255, 255, 0.55) inset, 0 12px 36px rgba(31, 38, 135, 0.12), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-glass-lg: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 24px 60px rgba(31, 38, 135, 0.18), 0 4px 12px rgba(15, 23, 42, 0.08);

    /* — 圆角 (continuous corners / squircle 视觉) — */
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-xl: 28px;
    --radius-2xl: 36px;
    --radius-pill: 999px;

    /* — 字体 (SF Pro fallback chain) — */
    --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Helvetica Neue", "Microsoft YaHei", system-ui, sans-serif;

    /* — 缓动 — */
    --ease-spring: cubic-bezier(0.32, 0.72, 0.18, 1);
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);

    /* — 页面背景渐变 — */
    --page-bg: radial-gradient(120% 80% at 8% -8%, rgba(125, 168, 255, 0.55) 0%, transparent 55%),
               radial-gradient(110% 75% at 100% 0%, rgba(255, 154, 200, 0.40) 0%, transparent 55%),
               radial-gradient(95% 70% at 50% 110%, rgba(150, 215, 255, 0.42) 0%, transparent 55%),
               linear-gradient(180deg, #f5f7fb 0%, #eef1f7 100%);
}

/* --------------------------------------------------------------------------
   SECTION 2 · 全局基础 Base
   -------------------------------------------------------------------------- */
html, body {
    font-family: var(--font-system) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.01em;
    color: var(--ios-label);
}

body#kt_body {
    background: var(--page-bg) !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    min-height: 100vh;
}

/* 登录/注册页 - 替换 dark 背景为浅色玻璃感 */
.login.login-1,
.login-1 .bgi-size-cover[style*="background-image"] {
    background: var(--page-bg) !important;
    background-attachment: fixed !important;
}

a {
    color: var(--ios-blue);
    transition: color 0.2s var(--ease-out), opacity 0.2s var(--ease-out);
}
a:hover {
    color: var(--ios-blue-dark);
    text-decoration: none;
    opacity: 0.85;
}

/* 选中色 */
::selection {
    background: rgba(0, 122, 255, 0.22);
    color: inherit;
}

/* 滚动条 - iOS 化 */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(120, 120, 128, 0.32);
    border-radius: var(--radius-pill);
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(120, 120, 128, 0.55);
    background-clip: padding-box;
    border: 2px solid transparent;
}

/* ==========================================================================
   ⚠ 堆叠层级架构 STACKING ARCHITECTURE
   ==========================================================================
   层级体系(从下到上,数字 = z-index 在 body 根 SC 内的位置):

       -1   .card::before          —— 卡片玻璃伪元素(负 z-index,不形成陷阱)
        0   普通流内容              —— card / banner / subheader / col / row
       95   .subheader-fixed        —— Metronic(本项目未启用)
       98   .header                 —— Metronic 顶部固定头(继承)
     1000   header-menu-overlay    —— Metronic 移动 drawer 蒙版(继承)
     1001   header-menu-wrapper    —— Metronic 移动 drawer(继承)
     1040   .modal-backdrop         —— Bootstrap 模态遮罩(继承)
     1050   .modal                  —— Bootstrap 模态(继承)
     1060   .popover                —— Bootstrap 浮提(继承)
     1070   .tooltip                —— Bootstrap 工具提示(继承)
   100000   .dropdown-menu          —— iOS 26 dropdown(由 ios26.js portal 到 body)

   ★ Bootstrap 的 .dropdown-menu 用了 JS portal 方案:
     ios26.js 监听 shown.bs.dropdown,把菜单元素挪到 <body> 末尾,然后 position:fixed
     按 toggle.getBoundingClientRect() 定位。如此一来菜单始终位于 body 根 SC 中,
     z-index: 100000 总能压住任何祖先栈容器(transform / filter / overflow:hidden
     / contain / opacity ...)。
     hide.bs.dropdown 时 ios26.js 把菜单还回到原位,Bootstrap 状态不受影响。

   ★ 普通卡片仍遵循"不要在祖先上引入 SC 陷阱"的原则,以保证布局可预期:
     - z-index !== auto      (除非该元素本就在顶层)
     - transform              (除 :hover 瞬态可接受)
     - filter / backdrop-filter (要走 ::before 伪元素)
     - opacity < 1            (除动画瞬态)
     - isolation: isolate
     - contain: layout/paint/strict/content
     - will-change            (会预分配 SC)
   ========================================================================== */

/* --------------------------------------------------------------------------
   SECTION 3 · 顶栏 Top Bar (Header / Mobile Header / Logo)
   -------------------------------------------------------------------------- */
/* 桌面 fixed header */
.header,
#kt_header,
.header.header-fixed {
    background: rgba(255, 255, 255, 0.55) !important;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 6px 18px rgba(31, 38, 135, 0.06) !important;
    transition: background 0.3s var(--ease-out);
}
.header.header-fixed.header-fixed-on-scroll {
    background: rgba(255, 255, 255, 0.7) !important;
}

/* 移动顶栏 */
.header-mobile,
#kt_header_mobile {
    background: rgba(255, 255, 255, 0.7) !important;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--ios-separator) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Topbar 全局 SVG / 文字颜色:Metronic 默认 .svg-icon-white { fill: #fff } +
   .text-white 是给深色头底设计的,我们换成浅玻璃头底后白对白看不见。
   这条规则不进 @media,桌面 / 移动两端都生效。 */
.topbar .btn .svg-icon-white svg g [fill]:not([fill="none"]) {
    fill: var(--ios-blue) !important;
}
.topbar .btn .text-white,
.topbar .btn .opacity-70,
.topbar .btn .opacity-90,
.topbar .topbar-item .text-white {
    color: var(--ios-label) !important;
    opacity: 1 !important;
}
body.ios-dark .topbar .btn .svg-icon-white svg g [fill]:not([fill="none"]) {
    fill: rgba(255, 255, 255, 0.85) !important;
}
body.ios-dark .topbar .btn .text-white,
body.ios-dark .topbar .btn .opacity-70,
body.ios-dark .topbar .btn .opacity-90,
body.ios-dark .topbar .topbar-item .text-white {
    color: rgba(255, 255, 255, 0.94) !important;
}
/* 移动头里的 burger 图标 + svg 图标 - 浅头底必须用深色,否则白对白看不见
   只能选 svg > g 下的 [fill] 节点,绝不能命中 <g fill="none"> 本身 ——
   否则会把整张 SVG 涂满变成一个纯色矩形(透明 polygon 也跟着变色)。 */
.header-mobile .burger-icon span,
#kt_header_mobile .burger-icon span,
.header-mobile .burger-icon span::before,
#kt_header_mobile .burger-icon span::before,
.header-mobile .burger-icon span::after,
#kt_header_mobile .burger-icon span::after {
    background-color: var(--ios-label) !important;
}
.header-mobile .svg-icon svg g [fill]:not([fill="none"]),
#kt_header_mobile .svg-icon svg g [fill]:not([fill="none"]) {
    fill: var(--ios-label) !important;
}
/* 暗色模式回反白 */
body.ios-dark .header-mobile .burger-icon span,
body.ios-dark .header-mobile .burger-icon span::before,
body.ios-dark .header-mobile .burger-icon span::after {
    background-color: rgba(255, 255, 255, 0.85) !important;
}
body.ios-dark .header-mobile .svg-icon svg g [fill]:not([fill="none"]),
body.ios-dark #kt_header_mobile .svg-icon svg g [fill]:not([fill="none"]) {
    fill: rgba(255, 255, 255, 0.85) !important;
}

/* Logo / 标题 - iOS 渐变文字
   注意:必须用 background-image 而非 background 短写,否则 !important 短写会
        把 background-clip 重置为 border-box 而把渐变涂满整个 h2 矩形,
        看起来就是一块色块而不是文字。 */
.title-3d,
.logo-default,
.logo-sticky,
.header-mobile .title-3d {
    color: transparent !important;
    background-color: transparent !important;
    background-image: linear-gradient(135deg, var(--ios-blue) 0%, var(--ios-purple) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}
@media (max-width: 991.98px) {
    .header-mobile .title-3d { font-size: 1.25rem !important; }
}

/* --------------------------------------------------------------------------
   SECTION 4 · 桌面顶部导航 Top Nav Menu
   说明:菜单永远单行(nowrap)。挑战在于 Bootstrap .container 在 992-1199px
        视口下仅 960px,放 12 个菜单项 + logo + topbar(总宽 ~1500px)会被截掉。
        解决:
        1) 顶栏专用 fluid container,不受 960px 限制
        2) 左半区允许收缩,topbar 不会被挤出右边界
        3) 1399.98px 以下隐藏菜单图标 + 收紧 padding,纯文字保持单行
        ≥1400px 时图标和标准 padding 都恢复,视觉更宽松。
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    /* 顶栏单独走全宽,正文区域照常用 Bootstrap container */
    #kt_header > .container {
        max-width: none !important;
    }
    .header-menu .menu-nav,
    #kt_header_menu .menu-nav {
        flex-wrap: nowrap !important;
    }
    .header-menu .menu-nav > .menu-item > .menu-link {
        white-space: nowrap !important;
    }
    .header-menu .menu-nav > .menu-item > .menu-link .menu-text {
        white-space: nowrap !important;
    }
    /* 给左半区(logo + menu-wrapper)允许收缩,避免把 topbar 推出 container */
    #kt_header > .container > .d-flex.align-items-stretch:first-child {
        min-width: 0;
        flex-shrink: 1;
    }
    /* topbar 不可被压缩,文字保持单行(否则"你好, admin"会被竖向拆成两行) */
    #kt_header > .container > .topbar {
        flex-shrink: 0 !important;
        margin-left: auto;
    }
    #kt_header > .container > .topbar .text-white,
    #kt_header > .container > .topbar [class*="opacity-"] {
        white-space: nowrap !important;
    }
    /* 菜单与 topbar 之间留出呼吸空间,避免最后一个菜单项贴到"外观"按钮上 */
    #kt_header_menu_wrapper {
        margin-right: 0.5rem;
    }
}

/* 中等桌面宽度(992-1399px):菜单变成纯文字胶囊样式
   - 隐藏图标 + 收紧 padding + 缩小字号到 0.88rem,让 12 项保持单行
   - 给每项加圆角边框 + 半透明白底,纯文字也有视觉重量,不再像零碎文本
   - 注意:padding/margin/font-size 总和必须保证 menu-nav 不会越界覆盖 topbar */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .header-menu .menu-nav > .menu-item > .menu-link .menu-text i {
        display: none !important;
    }
    .header-menu .menu-nav > .menu-item {
        margin: 0 1px !important;
    }
    .header-menu .menu-nav > .menu-item > .menu-link {
        background: rgba(255, 255, 255, 0.55) !important;
        border: 1px solid rgba(0, 0, 0, 0.06) !important;
        border-radius: var(--radius-md) !important;
        padding: 0.3rem 0.55rem !important;
        font-size: 0.88rem !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 2px rgba(31, 38, 135, 0.04) !important;
    }
    .header-menu .menu-nav > .menu-item > .menu-link .menu-text {
        font-size: 0.88rem !important;
    }
    .header-menu .menu-nav > .menu-item:hover > .menu-link {
        background: rgba(255, 255, 255, 0.9) !important;
        border-color: rgba(0, 122, 255, 0.2) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(0, 122, 255, 0.10) !important;
    }
    .header-menu .menu-nav > .menu-item.menu-item-active > .menu-link,
    .header-menu .menu-nav > .menu-item.menu-item-here > .menu-link {
        background: var(--ios-blue) !important;
        border-color: var(--ios-blue) !important;
        box-shadow: 0 4px 12px rgba(0, 122, 255, 0.28) !important;
    }
    .header-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-text,
    .header-menu .menu-nav > .menu-item.menu-item-here > .menu-link .menu-text {
        color: #fff !important;
    }
}

.header-menu .menu-nav > .menu-item > .menu-link {
    border-radius: var(--radius-md) !important;
    transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out) !important;
}

.header-menu .menu-nav > .menu-item > .menu-link .menu-text,
.menu-text {
    color: var(--ios-label) !important;
    font-weight: 500 !important;
}

.header-menu .menu-nav > .menu-item > .menu-link .menu-text i {
    margin-right: 6px;
    opacity: 0.75;
}

/* hover / active / here */
.header-menu .menu-nav > .menu-item:hover > .menu-link,
.header-menu .menu-nav > .menu-item.menu-item-active > .menu-link,
.header-menu .menu-nav > .menu-item.menu-item-here > .menu-link {
    background: var(--ios-fill-1) !important;
}
.header-menu .menu-nav > .menu-item:hover > .menu-link .menu-text,
.header-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-text {
    color: var(--ios-blue) !important;
}

/* --------------------------------------------------------------------------
   SECTION 5 · 二级菜单 Submenu
   桌面:下拉浮层(实色玻璃面板,跟 dropdown-menu 同语言)
   移动:抽屉内 inline 折叠展开(不再叠玻璃,沿用抽屉容器的玻璃)
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .header-menu .menu-nav > .menu-item .menu-submenu {
        background: rgba(255, 255, 255, 0.96) !important;
        -webkit-backdrop-filter: saturate(160%) blur(18px);
        backdrop-filter: saturate(160%) blur(18px);
        border: 1px solid rgba(0, 0, 0, 0.06) !important;
        border-radius: var(--radius-lg) !important;
        box-shadow: 0 16px 40px rgba(31, 38, 135, 0.18), 0 4px 12px rgba(15, 23, 42, 0.10) !important;
        padding: 8px !important;
    }
}

.menu-submenu .menu-subnav .menu-item .menu-link {
    border-radius: var(--radius-sm) !important;
    transition: background 0.2s var(--ease-out) !important;
}
.menu-submenu .menu-subnav .menu-item .menu-link .menu-text {
    color: var(--ios-label) !important;
    font-weight: 500 !important;
}
.menu-submenu .menu-subnav .menu-item .menu-link:hover {
    background: var(--ios-fill-1) !important;
}
.menu-submenu .menu-subnav .menu-item .menu-link:hover .menu-text {
    color: var(--ios-blue) !important;
}

/* --------------------------------------------------------------------------
   SECTION 6 · 移动端抽屉 Mobile Drawer + 移动端 Topbar (≤991.98px)
   Metronic 设定:.header-menu-wrapper 是滑出 drawer (z-index 1001),
                .header-menu-wrapper-overlay 是页面蒙版 (z-index 1000)
                .topbar 在 .topbar-mobile-on 下展开
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    /* 滑出抽屉容器 - 拉高 z-index 确保在 subheader / 任何卡片之上 */
    .header-menu-wrapper {
        background: rgba(255, 255, 255, 0.96) !important;
        -webkit-backdrop-filter: var(--glass-blur);
        backdrop-filter: var(--glass-blur);
        box-shadow: var(--shadow-glass-lg) !important;
        z-index: 1001 !important;
    }

    /* 蒙版 */
    .header-menu-wrapper-overlay {
        background: rgba(15, 23, 42, 0.35) !important;
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        z-index: 1000 !important;
    }

    /* 抽屉内容容器透明,让 wrapper 玻璃透出 */
    .header-menu-mobile {
        background-color: transparent !important;
    }

    /* 移动 topbar:完全交给 Metronic 原生 margin-top/opacity 过渡,
       不要用 position: fixed 接管,否则会破坏 KTApp 的开关同步逻辑(burger
       和 topbar 是互斥的,接管位置会导致 burger 看似没响应)。
       这里只补颜色:浅头底下文字反白会看不见,统一切回 iOS 标签色。 */
    .topbar .btn .text-white,
    .topbar .btn .opacity-70,
    .topbar .btn .opacity-90 {
        color: var(--ios-label) !important;
        opacity: 1 !important;
    }
    .topbar .btn .svg-icon-white svg g [fill]:not([fill="none"]) {
        fill: var(--ios-blue) !important;
    }
    body.ios-dark .topbar .btn .text-white,
    body.ios-dark .topbar .btn .opacity-70,
    body.ios-dark .topbar .btn .opacity-90 {
        color: rgba(255, 255, 255, 0.94) !important;
    }
    body.ios-dark .topbar .btn .svg-icon-white svg g [fill]:not([fill="none"]) {
        fill: rgba(255, 255, 255, 0.85) !important;
    }
    /* topbar 展开时给个玻璃底,Metronic 默认是透明的,在彩色背景上看不清 */
    .topbar-mobile-on .topbar,
    body.topbar-mobile-on .topbar {
        background: rgba(255, 255, 255, 0.92) !important;
        -webkit-backdrop-filter: var(--glass-blur);
        backdrop-filter: var(--glass-blur);
        box-shadow: var(--shadow-sm) !important;
        border-bottom: 1px solid var(--ios-separator);
    }
    body.ios-dark.topbar-mobile-on .topbar,
    body.ios-dark .topbar-mobile-on .topbar {
        background: rgba(28, 28, 32, 0.92) !important;
        border-bottom-color: rgba(255, 255, 255, 0.08) !important;
    }

    /* 移动头部按钮:确保始终在最上层、可点击,不被任何 backdrop-filter 卡片遮挡
       (giatun.dark.css 在暗色下已有相同修复,这里给浅色也补上) */
    .header-fixed .header,
    #kt_header {
        z-index: 1060 !important;
    }
    .header-mobile,
    #kt_header_mobile,
    .header-mobile .btn,
    #kt_header_mobile .btn,
    #kt_header_mobile_toggle,
    #kt_header_mobile_topbar_toggle {
        position: relative;
        z-index: 1061 !important;
        pointer-events: auto !important;
    }
    /* 内容区不要盖住 header */
    .content,
    #kt_content,
    .d-xl-none .card {
        position: relative;
        z-index: 1;
    }
    /* 头部按钮可点击保险 */
    .header-mobile *,
    #kt_header_mobile * {
        pointer-events: auto !important;
    }

    /* 抽屉内一级菜单条目 */
    .header-menu-mobile .menu-nav > .menu-item > .menu-link {
        border-radius: var(--radius-md) !important;
        margin: 2px 8px !important;
    }
    .header-menu-mobile .menu-nav > .menu-item > .menu-link .menu-text,
    .header-menu-mobile .menu-nav > .menu-item > .menu-heading .menu-text {
        color: var(--ios-label) !important;
    }
    .header-menu-mobile .menu-nav > .menu-item > .menu-link:hover,
    .header-menu-mobile .menu-nav > .menu-item.menu-item-active > .menu-link,
    .header-menu-mobile .menu-nav > .menu-item.menu-item-here > .menu-link,
    .header-menu-mobile .menu-nav > .menu-item.menu-item-open > .menu-link {
        background: var(--ios-fill-1) !important;
    }

    /* 抽屉内的二级菜单(accordion 展开) */
    .header-menu-mobile .menu-nav > .menu-item .menu-submenu .menu-item > .menu-link {
        border-radius: var(--radius-sm) !important;
        margin: 1px 6px !important;
    }

    /* 箭头颜色 */
    .header-menu-mobile .menu-arrow,
    .header-menu-mobile .menu-toggle .menu-arrow {
        color: var(--ios-label-tertiary) !important;
    }

    /* ============================================================
       移动端自建面板 (ios26.js 创建的 .ios26-panel)
       完全绕开 Metronic 的 KTApp / 抽屉机制,接管 burger + 头像按钮的
       展开逻辑,保证不会被任何祖先栈陷阱卡住。
       ============================================================ */
    .ios26-overlay {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.42);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        z-index: 2147482000;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.28s var(--ease-out);
    }
    .ios26-overlay.ios26-show {
        opacity: 1;
        pointer-events: auto;
    }
    .ios26-panel {
        position: fixed;
        top: 0;
        bottom: 0;
        width: 290px;
        max-width: 86vw;
        z-index: 2147482500;
        background: rgba(255, 255, 255, 0.97);
        -webkit-backdrop-filter: saturate(180%) blur(28px);
        backdrop-filter: saturate(180%) blur(28px);
        box-shadow: 0 12px 48px rgba(15, 23, 42, 0.20);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        transition: transform 0.32s var(--ease-spring);
        will-change: transform;
        display: flex;
        flex-direction: column;
    }
    .ios26-panel-left {
        left: 0;
        border-right: 1px solid var(--ios-separator);
        transform: translateX(-105%);
    }
    .ios26-panel-right {
        right: 0;
        border-left: 1px solid var(--ios-separator);
        transform: translateX(105%);
    }
    .ios26-panel.ios26-show {
        transform: translateX(0);
    }
    body.ios-dark .ios26-panel {
        background: rgba(28, 28, 32, 0.97);
        border-color: rgba(255, 255, 255, 0.10);
        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
    }
    /* 面板头 */
    .ios26-panel-header {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 18px 12px;
        background: inherit;
        border-bottom: 1px solid var(--ios-separator);
    }
    .ios26-panel-title {
        font-size: 1.05rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        color: var(--ios-label);
    }
    .ios26-panel-close {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 0;
        background: var(--ios-fill-1);
        color: var(--ios-label);
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s var(--ease-out);
    }
    .ios26-panel-close:hover {
        background: var(--ios-fill-2);
    }
    .ios26-panel-body {
        flex: 1;
        padding: 12px;
    }

    /* 面板内菜单 */
    .ios26-menu-nav {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .ios26-menu-nav .menu-item {
        list-style: none;
        margin: 2px 0;
        padding: 0;
        display: block !important;
        flex-direction: initial !important;
    }
    .ios26-menu-nav .menu-link,
    .ios26-menu-nav .menu-heading {
        display: flex !important;
        align-items: center;
        padding: 10px 14px !important;
        margin: 0 !important;
        border-radius: var(--radius-md) !important;
        color: var(--ios-label) !important;
        text-decoration: none;
        transition: background 0.18s var(--ease-out), color 0.18s var(--ease-out);
        font-weight: 500;
        gap: 10px;
    }
    .ios26-menu-nav .menu-link:hover,
    .ios26-menu-nav .menu-heading:hover {
        background: var(--ios-fill-1) !important;
    }
    .ios26-menu-nav .menu-text {
        color: var(--ios-label) !important;
        font-weight: 500 !important;
        white-space: normal !important;
    }
    .ios26-menu-nav .menu-text i {
        margin-right: 8px;
        color: var(--ios-blue);
        opacity: 0.8;
    }
    .ios26-menu-nav .menu-arrow {
        margin-left: auto;
        color: var(--ios-label-tertiary);
        transition: transform 0.2s var(--ease-out);
    }
    .ios26-menu-nav .ios26-menu-open > .menu-link .menu-arrow {
        transform: rotate(90deg);
    }
    .ios26-menu-nav .ios26-submenu {
        position: static !important;
        display: block !important;
        float: none !important;
        width: auto !important;
        min-width: 0 !important;
        transform: none !important;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s var(--ease-out);
        background: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    .ios26-menu-nav .ios26-menu-open > .ios26-submenu {
        max-height: 800px;
    }
    .ios26-menu-nav .ios26-submenu .menu-subnav {
        list-style: none;
        margin: 4px 0 4px 12px;
        padding: 0;
        border-left: 2px solid var(--ios-separator);
    }
    .ios26-menu-nav .ios26-submenu .menu-item {
        margin: 1px 0 1px 8px;
    }
    .ios26-menu-nav .ios26-submenu .menu-link {
        padding: 8px 12px !important;
        font-size: 0.92rem;
    }
    .ios26-menu-nav .menu-icon svg {
        width: 18px;
        height: 18px;
    }
    .ios26-menu-nav .menu-icon svg g [fill]:not([fill="none"]) {
        fill: var(--ios-blue) !important;
    }

    /* 用户面板 */
    .ios26-user-body {
        padding: 0 12px 16px !important;
    }
    .ios26-user-body .navi {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .ios26-user-body .navi-item {
        list-style: none;
    }
    .ios26-user-body .navi-link {
        display: flex;
        align-items: center;
        padding: 12px 14px;
        border-radius: var(--radius-md);
        color: var(--ios-label) !important;
        text-decoration: none;
        font-weight: 500;
    }
    .ios26-user-body .navi-link:hover {
        background: var(--ios-fill-1);
        color: var(--ios-blue) !important;
    }
    .ios26-user-body .navi-text {
        color: inherit !important;
    }
    .ios26-user-body .navi-icon,
    .ios26-user-body .svg-icon {
        margin-right: 10px;
    }
    .ios26-user-body .navi-icon svg,
    .ios26-user-body .svg-icon svg {
        width: 22px;
        height: 22px;
    }
    .ios26-user-body .navi-icon svg g [fill]:not([fill="none"]),
    .ios26-user-body .svg-icon svg g [fill]:not([fill="none"]) {
        fill: var(--ios-blue) !important;
    }
    .ios26-user-body .navi-separator {
        height: 1px;
        background: var(--ios-separator);
        margin: 8px 6px;
        border: 0;
    }
    .ios26-user-body .navi-footer {
        padding: 12px 6px 0 !important;
    }
    .ios26-user-body .navi-footer .btn {
        width: 100%;
        padding: 10px 14px !important;
        border-radius: var(--radius-md) !important;
    }
    /* 头部用户信息块(头像+名字) */
    .ios26-user-body .d-flex.align-items-center.p-8 {
        padding: 14px !important;
        margin: 0 0 8px;
        background: var(--ios-fill-1);
        border-radius: var(--radius-lg);
    }
    .ios26-user-body .symbol {
        flex-shrink: 0;
    }
    .ios26-user-body .symbol img {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        object-fit: cover;
    }
    .ios26-user-body .text-primary {
        color: var(--ios-label) !important;
    }
    /* 主题切换分组 */
    .ios26-user-body .ios26-theme-section {
        margin-bottom: 16px;
        padding-top: 8px;
    }
    .ios26-user-body .ios26-section-title {
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--ios-label-secondary);
        padding: 0 14px 6px;
    }
    .ios26-user-body .ios26-theme-section ul.navi {
        background: var(--ios-fill-1);
        border-radius: var(--radius-md);
        padding: 4px;
    }

    /* 暗色 · 面板内文字反白 */
    body.ios-dark .ios26-panel-title,
    body.ios-dark .ios26-menu-nav .menu-link,
    body.ios-dark .ios26-menu-nav .menu-text,
    body.ios-dark .ios26-user-body .navi-link,
    body.ios-dark .ios26-user-body .text-primary,
    body.ios-dark .ios26-user-body .text-dark,
    body.ios-dark .ios26-user-body .text-white {
        color: rgba(255, 255, 255, 0.94) !important;
    }
    body.ios-dark .ios26-panel-close {
        background: rgba(255, 255, 255, 0.10);
        color: rgba(255, 255, 255, 0.85);
    }
    body.ios-dark .ios26-panel-close:hover {
        background: rgba(255, 255, 255, 0.18);
    }
    body.ios-dark .ios26-menu-nav .menu-link:hover,
    body.ios-dark .ios26-user-body .navi-link:hover {
        background: rgba(255, 255, 255, 0.10) !important;
    }
    body.ios-dark .ios26-user-body .d-flex.align-items-center.p-8 {
        background: rgba(255, 255, 255, 0.08);
    }
    body.ios-dark .ios26-user-body .ios26-theme-section ul.navi {
        background: rgba(255, 255, 255, 0.08);
    }
    body.ios-dark .ios26-menu-nav .menu-icon svg g [fill]:not([fill="none"]),
    body.ios-dark .ios26-user-body .navi-icon svg g [fill]:not([fill="none"]),
    body.ios-dark .ios26-user-body .svg-icon svg g [fill]:not([fill="none"]) {
        fill: #6cb1ff !important;
    }

    /* 锁住背景滚动 */
    body.ios26-panel-open {
        overflow: hidden;
    }
}

/* 桌面下隐藏所有自建面板,避免 resize 残留 */
@media (min-width: 992px) {
    .ios26-panel,
    .ios26-overlay {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
   SECTION 7 · 副标题 Subheader
   -------------------------------------------------------------------------- */
.subheader,
.subheader.subheader-transparent,
#kt_subheader {
    background: transparent !important;
    box-shadow: none !important;
}
.subheader .text-white,
.subheader h1,
.subheader h2,
.subheader h3,
.subheader h4 {
    color: var(--ios-label) !important;
    text-shadow: none !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   SECTION 8 · 卡片 Card (液态玻璃容器)
   架构原则:
     1. .card 自身 position: relative 但 z-index: auto —— 不创建堆叠上下文
     2. 玻璃材质走 ::before 伪元素,z-index: -1 落到卡片内容下方
     3. 内嵌套卡片用实色填充,不再叠玻璃
     4. 显式背景类(bg-radial-gradient/bg-diagonal)关掉伪元素,让本色显现
     5. 内部 dropdown 的 z-index 直达 body 顶级 SC,完全不被卡片层级束缚
   -------------------------------------------------------------------------- */
.card {
    position: relative;
    background: transparent !important;
    border: var(--glass-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-glass) !important;
    transition: box-shadow 0.35s var(--ease-out);
}

/* 默认玻璃伪元素 */
.card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--glass-regular-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-radius: inherit;
    pointer-events: none;
}

.card:hover {
    box-shadow: var(--shadow-glass-lg) !important;
}

/* 嵌套卡片 - 实色填充 */
.card .card {
    background: var(--ios-fill-3) !important;
    box-shadow: none !important;
    border: 1px solid var(--ios-separator) !important;
}
.card .card::before { display: none !important; }

/* 显式背景类的卡片关闭伪元素 */
.card[class*="bg-radial-gradient"]::before,
.card[class*="bg-diagonal"]::before {
    display: none !important;
}

/* 卡片各部位 */
.card-header,
.card .card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--ios-separator) !important;
    padding: 1.1rem 1.5rem !important;
}
/* 尊重 Bootstrap 的 .border-0 工具类（如商店卡片用空 header 做留白时） */
.card-header.border-0,
.card .card-header.border-0 {
    border-bottom: 0 !important;
}

.card-title,
.card .card-title,
.card-header .card-title,
.card-title h3,
.card-title .card-label {
    color: var(--ios-label) !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em;
}

.card-body { color: var(--ios-label) !important; }

.card-footer {
    background: transparent !important;
    border-top: 1px solid var(--ios-separator) !important;
}

/* 通用阴影工具映射 */
.shadow,
.shadow-sm,
.shadow-lg,
.shadow-light,
.shadow-dark,
.metron .shadow-light,
.metron .shadow-dark {
    box-shadow: var(--shadow-glass) !important;
}

/* --------------------------------------------------------------------------
   SECTION 9 · 按钮 Button
   -------------------------------------------------------------------------- */
.btn {
    border-radius: var(--radius-md) !important;
    font-weight: 600 !important;
    letter-spacing: -0.005em;
    transition: transform 0.2s var(--ease-spring), box-shadow 0.25s var(--ease-out), background-color 0.2s var(--ease-out), color 0.2s var(--ease-out) !important;
    border-width: 0 !important;
    /* 不要加 will-change: transform —— 会让每个按钮创建独立堆叠上下文,subheader 上的彩色 .btn banner 因此能压住远端卡片内的 dropdown */
}

.btn:hover:not(:disabled):not(.disabled) {
    transform: translateY(-1px);
}
.btn:active:not(:disabled):not(.disabled),
.btn.active {
    transform: translateY(0) scale(0.98);
}

.btn-lg {
    border-radius: var(--radius-lg) !important;
    padding: 0.85rem 1.6rem !important;
}

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

.btn-pill,
.btn.rounded-pill {
    border-radius: var(--radius-pill) !important;
}

/* Primary - iOS 蓝玻璃按钮 */
.btn.btn-primary {
    background: linear-gradient(180deg, #4a9cff 0%, var(--ios-blue) 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 6px 16px rgba(0, 122, 255, 0.30), 0 1px 2px rgba(0, 122, 255, 0.18) !important;
}
.btn.btn-primary:hover:not(:disabled):not(.disabled) {
    background: linear-gradient(180deg, #5fa9ff 0%, #0a84ff 100%) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 10px 24px rgba(0, 122, 255, 0.36), 0 2px 4px rgba(0, 122, 255, 0.2) !important;
    color: #fff !important;
}

/* Secondary - 玻璃次按钮 (排除带 inline background 的实例,以保留业务自定义色) */
.btn.btn-secondary:not([style*="background"]),
.btn.btn-light:not([style*="background"]),
.btn.btn-light-primary:not([style*="background"]),
.btn.btn-clean:not([style*="background"]) {
    background: var(--glass-thick-bg) !important;
    -webkit-backdrop-filter: var(--glass-blur-light);
    backdrop-filter: var(--glass-blur-light);
    color: var(--ios-blue) !important;
    box-shadow: var(--shadow-xs), inset 0 0 0 1px rgba(0, 122, 255, 0.12) !important;
}
.btn.btn-secondary:not([style*="background"]):hover,
.btn.btn-light:not([style*="background"]):hover,
.btn.btn-light-primary:not([style*="background"]):hover,
.btn.btn-clean:not([style*="background"]):hover {
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(0, 122, 255, 0.22) !important;
}

/* Success / Info / Warning / Danger - 渐变玻璃 */
.btn.btn-success {
    background: linear-gradient(180deg, #4dd97f 0%, var(--ios-green) 100%) !important;
    color: #fff !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 6px 16px rgba(52, 199, 89, 0.32), 0 1px 2px rgba(52, 199, 89, 0.18) !important;
}
.btn.btn-success:hover {
    box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 10px 24px rgba(52, 199, 89, 0.4) !important;
    color: #fff !important;
}

.btn.btn-info {
    background: linear-gradient(180deg, #59c6ff 0%, var(--ios-cyan) 100%) !important;
    color: #fff !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 6px 16px rgba(50, 173, 230, 0.30), 0 1px 2px rgba(50, 173, 230, 0.16) !important;
}
.btn.btn-info:hover { color: #fff !important; box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 10px 24px rgba(50, 173, 230, 0.4) !important; }

.btn.btn-warning {
    background: linear-gradient(180deg, #ffb846 0%, var(--ios-orange) 100%) !important;
    color: #fff !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 6px 16px rgba(255, 149, 0, 0.32), 0 1px 2px rgba(255, 149, 0, 0.18) !important;
}
.btn.btn-warning:hover { color: #fff !important; box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 10px 24px rgba(255, 149, 0, 0.4) !important; }

.btn.btn-danger {
    background: linear-gradient(180deg, #ff6055 0%, var(--ios-red) 100%) !important;
    color: #fff !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 6px 16px rgba(255, 59, 48, 0.32), 0 1px 2px rgba(255, 59, 48, 0.18) !important;
}
.btn.btn-danger:hover { color: #fff !important; box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 10px 24px rgba(255, 59, 48, 0.4) !important; }

/* Outline 系列 -> 玻璃描边 */
.btn[class*="btn-outline-"] {
    background: rgba(255, 255, 255, 0.30) !important;
    -webkit-backdrop-filter: var(--glass-blur-light);
    backdrop-filter: var(--glass-blur-light);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 2px 6px rgba(31, 38, 135, 0.06) !important;
}
.btn.btn-outline-primary { color: var(--ios-blue) !important; box-shadow: inset 0 0 0 1px rgba(0, 122, 255, 0.55), 0 2px 6px rgba(0, 122, 255, 0.10) !important; }
.btn.btn-outline-primary:hover { background: var(--ios-blue) !important; color: #fff !important; }
.btn.btn-outline-white {
    color: var(--ios-label) !important;
    background: rgba(255, 255, 255, 0.55) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.78), 0 2px 6px rgba(31, 38, 135, 0.08) !important;
}
.btn.btn-outline-white:hover { background: rgba(255, 255, 255, 0.85) !important; color: var(--ios-blue) !important; }

/* btn-transparent / btn-text */
.btn.btn-text-primary, .btn.btn-hover-primary:hover {
    color: var(--ios-blue) !important;
}

/* btn-transparent-white (subheader 上的签到等) */
.btn.btn-transparent-white:not([style*="background"]) {
    background: rgba(255, 255, 255, 0.55) !important;
    -webkit-backdrop-filter: var(--glass-blur-light);
    backdrop-filter: var(--glass-blur-light);
    color: var(--ios-blue) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 4px 12px rgba(31, 38, 135, 0.08) !important;
}
.btn.btn-transparent-white:not([style*="background"]):hover {
    background: rgba(255, 255, 255, 0.85) !important;
    color: var(--ios-blue) !important;
}

/* 支付按钮调色 */
.btn-alipay, .btn.btn-alipay { background: linear-gradient(180deg, #4a93ff 0%, #1677ff 100%) !important; color: #fff !important; border: none !important; box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 6px 16px rgba(22, 119, 255, 0.32) !important; }
.btn-alipay:hover, .btn.btn-alipay:hover { color: #fff !important; box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 10px 24px rgba(22, 119, 255, 0.4) !important; }

/* btn-icon */
.btn.btn-icon {
    border-radius: var(--radius-md) !important;
    width: 44px;
    height: 44px;
}

/* btn-white (排除 inline background 实例,保留业务彩色 banner 等) */
.btn.btn-white:not([style*="background"]) {
    background: rgba(255, 255, 255, 0.85) !important;
    -webkit-backdrop-filter: var(--glass-blur-light);
    backdrop-filter: var(--glass-blur-light);
    color: var(--ios-blue) !important;
    box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(255, 255, 255, 0.7) !important;
}
.btn.btn-white:not([style*="background"]):hover { background: #ffffff !important; color: var(--ios-blue-dark) !important; }

/* 当 .btn 上有 inline background 时:保留业务色,但仍统一圆角 + 阴影 */
.btn[style*="background-color"] {
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

/* btn-gray (dark 主题 subheader) */
.btn.btn-gray:not([style*="background"]) {
    background: var(--ios-fill-1) !important;
    color: var(--ios-label) !important;
    box-shadow: none !important;
}
.btn.btn-gray:not([style*="background"]):hover { background: var(--ios-fill-2) !important; }

/* dropdown-toggle 箭头颜色继承按钮文字 */
.dropdown-toggle::after {
    border-top-color: currentColor !important;
    margin-left: 0.4em;
    vertical-align: 0.18em;
    opacity: 0.85;
}

/* btn-group 内的拼接按钮:保留圆角衔接 */
.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn-group:not(:last-child) > .btn { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.btn-group > .btn:not(:first-child),
.btn-group > .btn-group:not(:first-child) > .btn { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.btn-group > .btn-pill:first-child:not(:last-child) { border-top-left-radius: var(--radius-pill) !important; border-bottom-left-radius: var(--radius-pill) !important; }
.btn-group > .btn-pill:last-child:not(:first-child) { border-top-right-radius: var(--radius-pill) !important; border-bottom-right-radius: var(--radius-pill) !important; }

/* --------------------------------------------------------------------------
   SECTION 9.5 · Bootstrap Dropdown 弹层
   架构:.dropdown-menu 在 shown.bs.dropdown 时由 ios26.js 挂到 <body> 末尾,
        position: fixed 直接根据 toggle.getBoundingClientRect() 计算坐标。
        因此可彻底绕开任何祖先 stacking context (transform/filter/contain/
        overflow:hidden) 的束缚 —— 始终浮在 header / 卡片 / 图表之上。
        Popper 由 ios26.js 显式销毁,这里再用 transform: none !important 兜底,
        防止任何残余 inline transform 把菜单挪走。
   -------------------------------------------------------------------------- */
.dropdown-menu,
.dropdown-menu.show {
    background-color: #ffffff !important;
    background-image: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 16px 40px rgba(31, 38, 135, 0.18), 0 4px 12px rgba(15, 23, 42, 0.10), 0 0 0 0.5px rgba(0, 0, 0, 0.06) !important;
    padding: 6px !important;
    color: var(--ios-label) !important;
    margin: 0 !important;
}

/* transform/z-index 兜底只在 portal 后(body 直接子节点)生效。
   bootstrap-select 等自管定位的菜单留在原父容器内,此时不能把 transform 抹平,
   否则 Popper 计算的 translate3d 失效,菜单会贴在容器原点而非 toggle 下方。 */
body > .dropdown-menu.show {
    z-index: 100000 !important;
    transform: none !important;
}

/* bootstrap-select 的内层 <ul class="dropdown-menu inner"> 也带 .dropdown-menu,
   会继承上面的视觉规则,从而把 bootstrap-select 自身要求的"无 padding/border/阴影"
   覆盖掉。这里恢复其原始外观。 */
.bootstrap-select .dropdown-menu.inner {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* 暗色:实色深背景 (菜单 portal 到 body 后仍是 body 的后代,选择器照常生效) */
body.ios-dark .dropdown-menu,
body.ios-dark .dropdown-menu.show {
    background-color: #2c2c2e !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: rgba(255, 255, 255, 0.94) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 8px rgba(0, 0, 0, 0.24) !important;
    overflow: hidden;
}

.dropdown-menu .dropdown-header {
    color: var(--ios-label-secondary) !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.55rem 0.85rem 0.3rem !important;
    background: transparent !important;
}
.dropdown-menu .dropdown-header i {
    margin-right: 0.4em;
    color: var(--ios-blue) !important;
    opacity: 0.85;
}

.dropdown-menu .dropdown-item {
    border-radius: var(--radius-sm) !important;
    color: var(--ios-label) !important;
    padding: 0.55rem 0.85rem !important;
    font-size: 0.92rem;
    font-weight: 500;
    background: transparent !important;
    border: 0 !important;
    transition: background 0.18s var(--ease-out), color 0.18s var(--ease-out) !important;
    white-space: nowrap;
    width: calc(100% - 0px);
    text-align: left;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background: var(--ios-fill-1) !important;
    color: var(--ios-blue) !important;
}
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
    background: var(--ios-blue) !important;
    color: #ffffff !important;
}

.dropdown-menu .dropdown-divider {
    border-top: 1px solid var(--ios-separator) !important;
    margin: 4px 6px !important;
    opacity: 1;
}

/* dropdown 内的 navi 列表 (顶栏外观/用户菜单使用 .navi 而非 dropdown-item) */
.dropdown-menu .navi-item .navi-link {
    border-radius: var(--radius-sm) !important;
    padding: 0.65rem 0.85rem !important;
    color: var(--ios-label) !important;
    transition: background 0.18s var(--ease-out), color 0.18s var(--ease-out) !important;
    display: flex;
    align-items: center;
}
.dropdown-menu .navi-item .navi-link:hover,
.dropdown-menu .navi-item .navi-link:focus {
    background: var(--ios-fill-1) !important;
    color: var(--ios-blue) !important;
}
.dropdown-menu .navi-text {
    color: inherit !important;
    font-weight: 500;
}
.dropdown-menu .navi-icon {
    margin-right: 0.6rem;
}
.dropdown-menu .navi-separator {
    border-top: 1px solid var(--ios-separator);
    margin: 4px 0;
}
.dropdown-menu .navi-footer {
    padding: 0.5rem 0.85rem 0.85rem !important;
}
/* 用户菜单顶部信息块 */
.dropdown-menu > .d-flex.align-items-center.p-8 {
    padding: 1rem 0.85rem !important;
}

/* 禁用 (保持可读) */
.btn:disabled, .btn.disabled {
    opacity: 0.6 !important;
    box-shadow: none !important;
    cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   SECTION 10 · 表单 Form
   -------------------------------------------------------------------------- */
.form-control,
input.form-control,
select.form-control,
textarea.form-control {
    background: var(--glass-thick-bg) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: var(--radius-md) !important;
    color: var(--ios-label) !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), background 0.2s var(--ease-out) !important;
    padding: 0.7rem 1rem !important;
    font-size: 0.95rem;
}

.form-control:focus {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(0, 122, 255, 0.5) !important;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.18), inset 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    outline: none !important;
}

.form-control::placeholder {
    color: var(--ios-label-tertiary) !important;
    opacity: 1 !important;
}

/* 登录页 dark input 覆盖 */
.form-control.bg-dark-o-90,
.form-control.placeholder-white {
    background: rgba(255, 255, 255, 0.55) !important;
    -webkit-backdrop-filter: var(--glass-blur-light);
    backdrop-filter: var(--glass-blur-light);
    color: var(--ios-label) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6) !important;
    border: none !important;
}
.form-control.bg-dark-o-90::placeholder,
.form-control.placeholder-white::placeholder {
    color: var(--ios-label-tertiary) !important;
}
.form-control.bg-dark-o-90:focus,
.form-control.placeholder-white:focus {
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.18), inset 0 0 0 1px rgba(0, 122, 255, 0.4) !important;
}

/* form label */
.form-group label, .col-form-label, label.form-label {
    color: var(--ios-label-secondary) !important;
    font-weight: 500 !important;
    letter-spacing: -0.005em;
}

/* checkbox / radio iOS 风格 */
.checkbox > input:checked ~ span,
.radio > input:checked ~ span {
    background: var(--ios-blue) !important;
    border-color: var(--ios-blue) !important;
}

.checkbox > span, .radio > span {
    border-radius: 6px !important;
    transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}

/* 输入组合 */
.input-group-text {
    background: var(--ios-fill-2) !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    border-radius: var(--radius-md) !important;
    color: var(--ios-label-secondary) !important;
}

/* --------------------------------------------------------------------------
   SECTION 11 · 模态框 Modal
   -------------------------------------------------------------------------- */
.modal-backdrop, .modal-backdrop.show {
    background: rgba(15, 23, 42, 0.35) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 1 !important;
}

.modal-content {
    background: var(--glass-thick-bg) !important;
    -webkit-backdrop-filter: var(--glass-blur-strong);
    backdrop-filter: var(--glass-blur-strong);
    border: var(--glass-border) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-glass-lg) !important;
    overflow: hidden;
}

.modal-header {
    border-bottom: 1px solid var(--ios-separator) !important;
    padding: 1.25rem 1.5rem !important;
}
.modal-header .modal-title {
    color: var(--ios-label) !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em;
}
.modal-header .close {
    color: var(--ios-label-tertiary) !important;
    text-shadow: none !important;
    opacity: 1 !important;
    transition: color 0.2s var(--ease-out);
}
.modal-header .close:hover { color: var(--ios-label) !important; }

.modal-footer {
    border-top: 1px solid var(--ios-separator) !important;
    padding: 1rem 1.5rem !important;
}

/* SweetAlert2 / Swal 兼容 */
.swal2-popup {
    background: var(--glass-thick-bg) !important;
    -webkit-backdrop-filter: var(--glass-blur-strong);
    backdrop-filter: var(--glass-blur-strong);
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-glass-lg) !important;
    overflow: hidden;
}

.swal2-popup .swal2-icon.swal2-success [class^=swal2-success-circular-line],
.swal2-popup .swal2-icon.swal2-success .swal2-success-fix {
    display: none !important;
    background: transparent !important;
}

body.ios-dark .swal2-popup {
    background: rgba(64, 64, 72, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: var(--ios-label) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 18px 42px rgba(0, 0, 0, 0.44) !important;
}

/* --------------------------------------------------------------------------
   SECTION 12 · 表格 Table / Datatable
   -------------------------------------------------------------------------- */
.table {
    color: var(--ios-label) !important;
}
.table thead th {
    background: transparent !important;
    border-bottom: 1px solid var(--ios-separator) !important;
    border-top: 0 !important;
    color: var(--ios-label-secondary) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: -0.005em;
}
.table tbody tr {
    transition: background 0.2s var(--ease-out);
}
.table tbody tr:hover {
    background: var(--ios-fill-3) !important;
}
.table td, .table th {
    border-top: 1px solid var(--ios-separator) !important;
    padding: 0.85rem 1rem !important;
}

/* Datatable 容器 */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--ios-separator) !important;
    background: var(--glass-thin-bg) !important;
    backdrop-filter: var(--glass-blur-light);
    -webkit-backdrop-filter: var(--glass-blur-light);
    transition: all 0.2s var(--ease-out);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--ios-blue) !important;
    color: #fff !important;
    border-color: var(--ios-blue) !important;
}

/* --------------------------------------------------------------------------
   SECTION 13 · 标签页 Nav-tabs / 徽章 Badge / 进度条 / Alert
   -------------------------------------------------------------------------- */
.nav.nav-tabs {
    border: 0 !important;
    background: var(--ios-fill-2);
    border-radius: var(--radius-md);
    padding: 4px;
    display: inline-flex;
}
.nav.nav-tabs .nav-link {
    border: 0 !important;
    border-radius: calc(var(--radius-md) - 4px) !important;
    color: var(--ios-label-secondary) !important;
    padding: 0.5rem 1rem !important;
    font-weight: 600 !important;
    transition: all 0.25s var(--ease-spring) !important;
}
.nav.nav-tabs .nav-link.active {
    background: #fff !important;
    color: var(--ios-label) !important;
    box-shadow: var(--shadow-xs) !important;
}

/* Badge */
.badge {
    border-radius: var(--radius-pill) !important;
    font-weight: 600 !important;
    padding: 0.35em 0.7em !important;
    letter-spacing: -0.005em;
}
.badge-primary { background: rgba(0, 122, 255, 0.16) !important; color: var(--ios-blue) !important; }
.badge-success { background: rgba(52, 199, 89, 0.16) !important; color: #1f8e3d !important; }
.badge-warning { background: rgba(255, 149, 0, 0.18) !important; color: #b56500 !important; }
.badge-danger { background: rgba(255, 59, 48, 0.16) !important; color: #c0271d !important; }
.badge-info { background: rgba(50, 173, 230, 0.16) !important; color: #1c7da8 !important; }
.badge-light { background: var(--ios-fill-1) !important; color: var(--ios-label-secondary) !important; }

/* Progress */
.progress {
    background: var(--ios-fill-1) !important;
    border-radius: var(--radius-pill) !important;
    overflow: hidden;
    height: 8px !important;
}
.progress-bar {
    background: linear-gradient(90deg, var(--ios-blue) 0%, var(--ios-indigo) 100%) !important;
    border-radius: var(--radius-pill) !important;
}
.progress-bar.bg-success { background: linear-gradient(90deg, var(--ios-mint) 0%, var(--ios-green) 100%) !important; }
.progress-bar.bg-warning { background: linear-gradient(90deg, var(--ios-yellow) 0%, var(--ios-orange) 100%) !important; }
.progress-bar.bg-danger { background: linear-gradient(90deg, var(--ios-pink) 0%, var(--ios-red) 100%) !important; }

/* Alert */
.alert {
    border: 0 !important;
    border-radius: var(--radius-md) !important;
    -webkit-backdrop-filter: var(--glass-blur-light);
    backdrop-filter: var(--glass-blur-light);
}
.alert-primary { background: rgba(0, 122, 255, 0.12) !important; color: var(--ios-blue) !important; }
.alert-success { background: rgba(52, 199, 89, 0.14) !important; color: #1f8e3d !important; }
.alert-warning { background: rgba(255, 149, 0, 0.14) !important; color: #b56500 !important; }
.alert-danger { background: rgba(255, 59, 48, 0.14) !important; color: #c0271d !important; }

/* --------------------------------------------------------------------------
   SECTION 14 · 登录 / 注册 Auth 页
   -------------------------------------------------------------------------- */
.login.login-1 .login-form {
    background: var(--glass-thick-bg) !important;
    -webkit-backdrop-filter: var(--glass-blur-strong);
    backdrop-filter: var(--glass-blur-strong);
    border-radius: var(--radius-2xl) !important;
    border: var(--glass-border) !important;
    box-shadow: var(--shadow-glass-lg) !important;
    color: var(--ios-label) !important;
    max-width: 480px;
}

.login.login-1 .login-form .text-white,
.login.login-1 .login-signin h3,
.login.login-1 .login-signin .text-white,
.login.login-1 .login-form a.text-white {
    color: var(--ios-label) !important;
    text-shadow: none !important;
}
.login.login-1 .login-form a.text-white:hover {
    color: var(--ios-blue) !important;
}
.login.login-1 .login-form .opacity-70 { opacity: 1 !important; color: var(--ios-label-secondary) !important; }
.login.login-1 .login-form .opacity-90 { opacity: 1 !important; }

.login.login-1 .login-signin h3 {
    font-weight: 700 !important;
    letter-spacing: -0.025em;
    font-size: 1.75rem !important;
}

/* checkbox 在白底登录卡片里的颜色 */
.login.login-1 .login-form .checkbox.checkbox-white {
    color: var(--ios-label-secondary) !important;
}
.login.login-1 .login-form .checkbox.checkbox-outline > span {
    border-color: var(--ios-label-tertiary) !important;
    background: transparent !important;
}
.login.login-1 .login-form .checkbox.checkbox-outline > input:checked ~ span {
    background: var(--ios-blue) !important;
    border-color: var(--ios-blue) !important;
}

/* logo 圆框 */
.login.login-1 img.rounded-circle {
    box-shadow: var(--shadow-glass-lg) !important;
    background: rgba(255, 255, 255, 0.85) !important;
    -webkit-backdrop-filter: var(--glass-blur-light);
    backdrop-filter: var(--glass-blur-light);
}

/* --------------------------------------------------------------------------
   SECTION 15 · 文字与工具类覆盖 Utilities
   -------------------------------------------------------------------------- */
.text-white, .text-light {
    /* 仅在非按钮上下文降级到 label 色,按钮内保持白色 */
}
/* subheader 与 header 区域里的 text-white 改为 label */
#kt_header .text-white,
#kt_subheader .text-white,
.subheader .text-white {
    color: var(--ios-label) !important;
    text-shadow: none !important;
}

.text-muted { color: var(--ios-label-tertiary) !important; }
.text-dark { color: var(--ios-label) !important; }
.text-dark-50 { color: var(--ios-label-secondary) !important; }
.text-dark-75 { color: var(--ios-label) !important; }
.text-dark-65 { color: var(--ios-label-secondary) !important; }
.text-primary { color: var(--ios-blue) !important; }
.text-success { color: var(--ios-green) !important; }
.text-warning { color: var(--ios-orange) !important; }
.text-danger { color: var(--ios-red) !important; }
.text-info { color: var(--ios-cyan) !important; }

.bg-white { background: var(--glass-thick-bg) !important; }
.bg-light { background: var(--ios-fill-3) !important; }

/* card-bottom-* 由 giatun 提供的小色条改为 iOS 调色 */
.card-bottom-brand { border-bottom: 3px solid rgba(0, 122, 255, 0.32) !important; }
.card-bottom-primary { border-bottom: 3px solid rgba(88, 86, 214, 0.32) !important; }
.card-bottom-success { border-bottom: 3px solid rgba(52, 199, 89, 0.32) !important; }
.card-bottom-info { border-bottom: 3px solid rgba(50, 173, 230, 0.32) !important; }
.card-bottom-warning { border-bottom: 3px solid rgba(255, 149, 0, 0.32) !important; }
.card-bottom-danger { border-bottom: 3px solid rgba(255, 59, 48, 0.32) !important; }

/* bg-diagonal (仪表盘底色) -> 替换为柔和渐变玻璃 */
.bg-diagonal {
    background: var(--ios-fill-3) !important;
    background-image: none !important;
}
.bg-diagonal.bg-diagonal-light-primary { background: linear-gradient(135deg, rgba(0, 122, 255, 0.10) 0%, rgba(88, 86, 214, 0.06) 100%) !important; }
.bg-diagonal.bg-diagonal-light-success { background: linear-gradient(135deg, rgba(52, 199, 89, 0.12) 0%, rgba(0, 199, 190, 0.06) 100%) !important; }
.bg-diagonal.bg-diagonal-light-warning { background: linear-gradient(135deg, rgba(255, 149, 0, 0.12) 0%, rgba(255, 204, 0, 0.06) 100%) !important; }
.bg-diagonal.bg-diagonal-light-danger { background: linear-gradient(135deg, rgba(255, 59, 48, 0.12) 0%, rgba(255, 45, 85, 0.06) 100%) !important; }
.bg-diagonal.bg-diagonal-light-info { background: linear-gradient(135deg, rgba(50, 173, 230, 0.12) 0%, rgba(0, 199, 190, 0.06) 100%) !important; }

/* bg-radial-gradient-primary - 商店卡片头使用,默认蓝紫渐变 */
.bg-radial-gradient-primary {
    background: radial-gradient(120% 110% at 80% 0%, rgba(0, 122, 255, 0.92) 0%, rgba(88, 86, 214, 0.85) 50%, rgba(175, 82, 222, 0.75) 100%) !important;
}

/* 商店:四个套餐卡片用不同彩色玻璃以提升识别度
   规则按 row 内尾部 4 个 col 计数,popup/activity 卡占位时也能正确命中后 4 个套餐 */
.row > [class*="col-xs-6"]:nth-last-child(4) .card.bg-radial-gradient-primary {
    /* 标准 - 蓝/靛 */
    background: radial-gradient(125% 115% at 80% 0%, #4a9cff 0%, #007aff 55%, #5856d6 100%) !important;
}
.row > [class*="col-xs-6"]:nth-last-child(3) .card.bg-radial-gradient-primary {
    /* 高级 - 紫/粉 */
    background: radial-gradient(125% 115% at 80% 0%, #d28cff 0%, #af52de 55%, #ff2d55 100%) !important;
}
.row > [class*="col-xs-6"]:nth-last-child(2) .card.bg-radial-gradient-primary {
    /* 轻量 - 薄荷/青 */
    background: radial-gradient(125% 115% at 80% 0%, #5ee0d4 0%, #00c7be 55%, #30b0c7 100%) !important;
}
.row > [class*="col-xs-6"]:nth-last-child(1) .card.bg-radial-gradient-primary {
    /* 团队 - 橙/红 */
    background: radial-gradient(125% 115% at 80% 0%, #ffc66c 0%, #ff9500 55%, #ff3b30 100%) !important;
}

/* 套餐卡阴影按主色微染色,增强浮起感 */
.row > [class*="col-xs-6"]:nth-last-child(4) .card.bg-radial-gradient-primary { box-shadow: 0 18px 48px rgba(0, 122, 255, 0.28), 0 4px 12px rgba(88, 86, 214, 0.18) !important; }
.row > [class*="col-xs-6"]:nth-last-child(3) .card.bg-radial-gradient-primary { box-shadow: 0 18px 48px rgba(175, 82, 222, 0.28), 0 4px 12px rgba(255, 45, 85, 0.18) !important; }
.row > [class*="col-xs-6"]:nth-last-child(2) .card.bg-radial-gradient-primary { box-shadow: 0 18px 48px rgba(0, 199, 190, 0.28), 0 4px 12px rgba(48, 176, 199, 0.18) !important; }
.row > [class*="col-xs-6"]:nth-last-child(1) .card.bg-radial-gradient-primary { box-shadow: 0 18px 48px rgba(255, 149, 0, 0.32), 0 4px 12px rgba(255, 59, 48, 0.18) !important; }

/* 卡内大字标题 (display-N / h1-h4) 上的 text-white,改为 iOS 彩色渐变文字以确保浅色玻璃下可读 */
.card h1.text-white, .card h2.text-white, .card h3.text-white, .card h4.text-white,
.card .display-1.text-white, .card .display-2.text-white, .card .display-3.text-white, .card .display-4.text-white {
    color: transparent !important;
    background: linear-gradient(135deg, var(--ios-blue) 0%, var(--ios-indigo) 50%, var(--ios-purple) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em;
}
/* 但若是放在彩色 head 上(bg-radial-gradient-primary 之类),还原成纯白 */
.card .bg-radial-gradient-primary h1.text-white,
.card .bg-radial-gradient-primary h2.text-white,
.card .bg-radial-gradient-primary h3.text-white,
.card .bg-radial-gradient-primary h4.text-white,
.card .bg-radial-gradient-primary .display-1.text-white,
.card .bg-radial-gradient-primary .display-2.text-white,
.card .bg-radial-gradient-primary .display-3.text-white,
.card .bg-radial-gradient-primary .display-4.text-white,
/* 商店卡:整张卡用 bg-radial-gradient-primary 作 card-head 的情况(class 与 card 平级) */
.card.bg-radial-gradient-primary h1.text-white,
.card.bg-radial-gradient-primary h2.text-white,
.card.bg-radial-gradient-primary h3.text-white,
.card.bg-radial-gradient-primary h4.text-white,
.card.bg-radial-gradient-primary .display-1.text-white,
.card.bg-radial-gradient-primary .display-2.text-white,
.card.bg-radial-gradient-primary .display-3.text-white,
.card.bg-radial-gradient-primary .display-4.text-white {
    color: #ffffff !important;
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.25) !important;
}

/* svg-icon 颜色调到 iOS */
.svg-icon.svg-icon-primary svg g [fill] { fill: var(--ios-blue) !important; }
.svg-icon.svg-icon-success svg g [fill] { fill: var(--ios-green) !important; }
.svg-icon.svg-icon-warning svg g [fill] { fill: var(--ios-orange) !important; }
.svg-icon.svg-icon-danger svg g [fill] { fill: var(--ios-red) !important; }
.svg-icon.svg-icon-info svg g [fill] { fill: var(--ios-cyan) !important; }
.svg-icon.svg-icon-white svg g [fill] { fill: rgba(255, 255, 255, 0.95) !important; }

/* label utility (small chips) */
.label.label-primary, .label.label-light-primary { background: rgba(0, 122, 255, 0.16) !important; color: var(--ios-blue) !important; }
.label.label-success, .label.label-light-success { background: rgba(52, 199, 89, 0.16) !important; color: #1f8e3d !important; }
.label.label-warning, .label.label-light-warning { background: rgba(255, 149, 0, 0.18) !important; color: #b56500 !important; }
.label.label-danger, .label.label-light-danger { background: rgba(255, 59, 48, 0.16) !important; color: #c0271d !important; }
.label.label-info, .label.label-light-info { background: rgba(50, 173, 230, 0.16) !important; color: #1c7da8 !important; }
.label { border-radius: var(--radius-pill) !important; font-weight: 600 !important; }

/* 通用圆角强化 */
.rounded { border-radius: var(--radius-sm) !important; }
.rounded-lg { border-radius: var(--radius-md) !important; }
.rounded-xl { border-radius: var(--radius-lg) !important; }

/* --------------------------------------------------------------------------
   SECTION 16 · Footer / Aside / Quick Panel
   -------------------------------------------------------------------------- */
.footer {
    background: rgba(255, 255, 255, 0.55) !important;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-top: 1px solid rgba(255, 255, 255, 0.5) !important;
    color: var(--ios-label-secondary) !important;
}

.aside, .aside-menu {
    background: var(--glass-thick-bg) !important;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-right: 1px solid var(--ios-separator) !important;
}

.offcanvas, .quick-panel, .demo-panel {
    background: var(--glass-thick-bg) !important;
    -webkit-backdrop-filter: var(--glass-blur-strong);
    backdrop-filter: var(--glass-blur-strong);
    box-shadow: var(--shadow-glass-lg) !important;
}

/* --------------------------------------------------------------------------
   SECTION 17 · 入场动效 Animations
   纯 opacity,避免 transform 形成新堆叠上下文影响下拉菜单层级
   -------------------------------------------------------------------------- */
@keyframes ios-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
.card.card-custom {
    animation: ios-fade-in 0.4s var(--ease-out) both;
}

/* --------------------------------------------------------------------------
   SECTION 18 · 暗黑模式 Dark Mode
   触发:body.ios-dark(由 head.tpl 在 theme_style==='dark' 时挂载)
   -------------------------------------------------------------------------- */
body.ios-dark {
    /* 玻璃材质换成"亮于背景"的层级,保证卡片可见度 */
    --glass-thin-bg: rgba(60, 60, 67, 0.40);
    --glass-regular-bg: rgba(72, 72, 80, 0.58);
    --glass-thick-bg: rgba(86, 86, 94, 0.72);
    --glass-tinted-bg: rgba(72, 72, 80, 0.55);
    --glass-border: 1px solid rgba(255, 255, 255, 0.10);
    --glass-border-inner: inset 0 1px 0 rgba(255, 255, 255, 0.08);

    /* 文字 */
    --ios-label: rgba(255, 255, 255, 0.94);
    --ios-label-secondary: rgba(235, 235, 245, 0.72);
    --ios-label-tertiary: rgba(235, 235, 245, 0.50);
    --ios-label-quaternary: rgba(235, 235, 245, 0.30);
    --ios-label-on-glass: rgba(255, 255, 255, 0.94);

    /* 填充 / 分隔 */
    --ios-fill-1: rgba(120, 120, 128, 0.32);
    --ios-fill-2: rgba(120, 120, 128, 0.24);
    --ios-fill-3: rgba(118, 118, 128, 0.16);
    --ios-fill-4: rgba(118, 118, 128, 0.08);
    --ios-separator: rgba(84, 84, 88, 0.55);
    --ios-separator-opaque: rgba(56, 56, 58, 0.85);

    /* 阴影 (深色场景下浅些,以聚焦发光感) */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.32);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.36);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.40);
    --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.50);
    --shadow-glass: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 36px rgba(0, 0, 0, 0.42);
    --shadow-glass-lg: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 24px 60px rgba(0, 0, 0, 0.55);

    /* 暗色页面渐变 */
    --page-bg: radial-gradient(120% 80% at 8% -8%, rgba(60, 100, 200, 0.32) 0%, transparent 55%),
               radial-gradient(110% 75% at 100% 0%, rgba(180, 60, 140, 0.22) 0%, transparent 55%),
               radial-gradient(95% 70% at 50% 110%, rgba(40, 140, 180, 0.22) 0%, transparent 55%),
               linear-gradient(180deg, #0e1018 0%, #07080d 100%);
}

/* 暗色:登录卡片 logo 圆框换深色 */
body.ios-dark .login.login-1 img.rounded-circle {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* ============================================================
   暗色:Section 3-8 集中重写
   保持与浅色模式相同的层级架构,仅替换颜色 token
   ============================================================ */

/* 暗色 · Section 3 · 顶栏 */
body.ios-dark .header,
body.ios-dark #kt_header,
body.ios-dark .header.header-fixed {
    background: rgba(20, 20, 26, 0.55) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 18px rgba(0, 0, 0, 0.4) !important;
}
body.ios-dark .header-mobile,
body.ios-dark #kt_header_mobile {
    background: rgba(20, 20, 26, 0.7) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
@media (min-width: 992px) {
    body.ios-dark.header-fixed[data-header-scroll="on"] #kt_header.header-fixed {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        z-index: 110 !important;
        -webkit-animation: header-minimize-animation .5s ease 1 !important;
        animation: header-minimize-animation .5s ease 1 !important;
    }
    body.ios-dark.header-fixed[data-header-scroll="on"] #kt_content {
        padding-top: 80px !important;
    }
}

/* 暗色 · Logo 渐变 (同样要避开 background 短写陷阱) */
body.ios-dark .title-3d,
body.ios-dark .logo-default,
body.ios-dark .logo-sticky,
body.ios-dark .header-mobile .title-3d {
    background-color: transparent !important;
    background-image: linear-gradient(135deg, #6cb1ff 0%, #d28cff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* 暗色 · Section 4 · 桌面菜单 hover/active 文字反白 */
body.ios-dark .header-menu .menu-nav > .menu-item:hover > .menu-link .menu-text,
body.ios-dark .header-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-text {
    color: #fff !important;
}

/* 暗色 · Section 5 · 桌面二级菜单 popup */
@media (min-width: 992px) {
    body.ios-dark .header-menu .menu-nav > .menu-item .menu-submenu {
        background: #28282e !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        border: 1px solid rgba(255, 255, 255, 0.10) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 8px rgba(0, 0, 0, 0.24) !important;
        overflow: hidden;
    }
}
body.ios-dark .menu-submenu .menu-subnav .menu-item .menu-link .menu-text {
    color: var(--ios-label) !important;
}
body.ios-dark .menu-submenu .menu-subnav .menu-item .menu-link:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    box-shadow: none !important;
}

#kt_header_menu .menu-nav > .menu-item > .menu-link:hover,
#kt_header_menu .menu-nav > .menu-item.menu-item-open > .menu-link,
#kt_header_menu .menu-nav > .menu-item.menu-item-hover > .menu-link,
#kt_header_menu .menu-nav > .menu-item.menu-item-active > .menu-link,
#kt_header_menu .menu-nav > .menu-item.menu-item-here > .menu-link,
.menu-submenu .menu-subnav .menu-item .menu-link:hover,
.menu-submenu .menu-subnav .menu-item.menu-item-active > .menu-link,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .navi-item .navi-link:hover,
.dropdown-menu .navi-item .navi-link:focus {
    opacity: 1 !important;
}

/* 暗色 · Section 6 · 移动抽屉 */
@media (max-width: 991.98px) {
    body.ios-dark .header-menu-wrapper {
        background: rgba(28, 28, 32, 0.92) !important;
        box-shadow: var(--shadow-glass-lg) !important;
    }
    body.ios-dark .header-menu-wrapper-overlay {
        background: rgba(0, 0, 0, 0.5) !important;
    }
    body.ios-dark .header-menu-mobile .menu-nav > .menu-item > .menu-link:hover,
    body.ios-dark .header-menu-mobile .menu-nav > .menu-item.menu-item-active > .menu-link,
    body.ios-dark .header-menu-mobile .menu-nav > .menu-item.menu-item-here > .menu-link,
    body.ios-dark .header-menu-mobile .menu-nav > .menu-item.menu-item-open > .menu-link {
        background: rgba(255, 255, 255, 0.10) !important;
    }
}

/* 暗色 · Section 7 · subheader 内 text-white 反白 */
body.ios-dark #kt_header .text-white,
body.ios-dark #kt_subheader .text-white,
body.ios-dark .subheader .text-white,
body.ios-dark .subheader h1,
body.ios-dark .subheader h2,
body.ios-dark .subheader h3,
body.ios-dark .subheader h4 {
    color: var(--ios-label) !important;
}

/* 暗色:badge / label 文字反色,保证对比度 */
body.ios-dark .badge-primary,
body.ios-dark .label.label-primary, body.ios-dark .label.label-light-primary { color: #6cb1ff !important; background: rgba(0, 122, 255, 0.22) !important; }
body.ios-dark .badge-success,
body.ios-dark .label.label-success, body.ios-dark .label.label-light-success { color: #6ce28b !important; background: rgba(52, 199, 89, 0.22) !important; }
body.ios-dark .badge-warning,
body.ios-dark .label.label-warning, body.ios-dark .label.label-light-warning { color: #ffc66c !important; background: rgba(255, 149, 0, 0.24) !important; }
body.ios-dark .badge-danger,
body.ios-dark .label.label-danger, body.ios-dark .label.label-light-danger { color: #ff8a82 !important; background: rgba(255, 59, 48, 0.22) !important; }
body.ios-dark .badge-info,
body.ios-dark .label.label-info, body.ios-dark .label.label-light-info { color: #6dd0f7 !important; background: rgba(50, 173, 230, 0.22) !important; }
body.ios-dark .badge-light { color: var(--ios-label-secondary) !important; background: var(--ios-fill-2) !important; }

/* 暗色:alert 反色 */
body.ios-dark .alert-primary { color: #8cc1ff !important; background: rgba(0, 122, 255, 0.18) !important; }
body.ios-dark .alert-success { color: #7ee29a !important; background: rgba(52, 199, 89, 0.18) !important; }
body.ios-dark .alert-warning { color: #ffcd80 !important; background: rgba(255, 149, 0, 0.20) !important; }
body.ios-dark .alert-danger { color: #ff9b95 !important; background: rgba(255, 59, 48, 0.18) !important; }

/* 暗色:form-control 玻璃底 + 清晰边框 */
body.ios-dark .form-control,
body.ios-dark input.form-control,
body.ios-dark select.form-control,
body.ios-dark textarea.form-control {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: var(--ios-label) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
body.ios-dark .form-control:focus {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(10, 132, 255, 0.65) !important;
    box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
body.ios-dark #nodes-filter-modal select.form-control option {
    background: #3f4048 !important;
    color: #f4f6fb !important;
}
body.ios-dark #nodes-filter-modal select.form-control option:checked,
body.ios-dark #nodes-filter-modal select.form-control option:hover {
    background: #1f6fd6 !important;
    color: #ffffff !important;
}

/* 暗色:input-group-text */
body.ios-dark .input-group-text {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: var(--ios-label-secondary) !important;
}

/* 暗色:table 行 hover */
body.ios-dark .table tbody tr:hover { background: rgba(255, 255, 255, 0.06) !important; }

/* 暗色:nav-tabs 切换胶囊 */
body.ios-dark .nav.nav-tabs { background: var(--ios-fill-2); }
body.ios-dark .nav.nav-tabs .nav-link.active { background: rgba(255, 255, 255, 0.14) !important; color: #fff !important; }

/* 暗色:datatable 分页 */
body.ios-dark .dataTables_wrapper .dataTables_paginate .paginate_button {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--ios-label-secondary) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}
body.ios-dark .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.ios-dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--ios-blue-dark) !important; color: #fff !important; border-color: var(--ios-blue-dark) !important;
}

/* 暗色:登录页文字反白 */
body.ios-dark .login.login-1 .login-form .text-white,
body.ios-dark .login.login-1 .login-signin h3,
body.ios-dark .login.login-1 .login-signin .text-white,
body.ios-dark .login.login-1 .login-form a.text-white {
    color: var(--ios-label) !important;
}
body.ios-dark .login.login-1 .login-form .opacity-70 { color: var(--ios-label-secondary) !important; }

/* 暗色:模态遮罩更深 */
body.ios-dark .modal-backdrop,
body.ios-dark .modal-backdrop.show {
    background: rgba(0, 0, 0, 0.55) !important;
}

/* 暗色:dropdown 内 hover */
body.ios-dark .dropdown-menu .dropdown-item:hover,
body.ios-dark .dropdown-menu .dropdown-item:focus,
body.ios-dark .dropdown-menu .navi-item .navi-link:hover,
body.ios-dark .dropdown-menu .navi-item .navi-link:focus {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #fff !important;
}

/* 暗色:navi 列表正常态文字 */
body.ios-dark .dropdown-menu .navi-item .navi-link,
body.ios-dark .dropdown-menu .navi-text {
    color: rgba(255, 255, 255, 0.94) !important;
}
body.ios-dark .dropdown-menu .navi-separator {
    border-top-color: rgba(255, 255, 255, 0.10);
}

/* 暗色:btn-light / btn-secondary 玻璃灰底 */
body.ios-dark .btn.btn-secondary,
body.ios-dark .btn.btn-light,
body.ios-dark .btn.btn-light-primary,
body.ios-dark .btn.btn-clean {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #6cb1ff !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10) !important;
}
body.ios-dark .btn.btn-secondary:hover,
body.ios-dark .btn.btn-light:hover,
body.ios-dark .btn.btn-light-primary:hover,
body.ios-dark .btn.btn-clean:hover {
    background: rgba(255, 255, 255, 0.16) !important;
    color: #8cc1ff !important;
}

body.ios-dark .btn.btn-white {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18) !important;
}
body.ios-dark .btn.btn-white:hover { background: rgba(255, 255, 255, 0.22) !important; }

body.ios-dark .btn.btn-transparent-white {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16) !important;
}
body.ios-dark .btn.btn-transparent-white:hover { background: rgba(255, 255, 255, 0.18) !important; color: #fff !important; }

/* 暗色:outline-white */
body.ios-dark .btn.btn-outline-white {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--ios-label) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.30), 0 2px 6px rgba(0,0,0,0.30) !important;
}
body.ios-dark .btn.btn-outline-white:hover { background: rgba(255, 255, 255, 0.16) !important; color: #fff !important; }

/* 暗色:checkbox 描边 */
body.ios-dark .login.login-1 .login-form .checkbox.checkbox-outline > span,
body.ios-dark .checkbox > span, body.ios-dark .radio > span {
    border-color: rgba(255, 255, 255, 0.35) !important;
    background: transparent !important;
}

/* 暗色:footer */
body.ios-dark .footer {
    background: rgba(20, 20, 26, 0.55) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: var(--ios-label-secondary) !important;
}

/* ============================================================
   暗色 · Section 8 · 卡片着色与可见度
   背景:夜间页面是近黑色,默认玻璃 ::before (rgba(72,72,80,0.58))
        在大色块上看起来扁平。这里:
        1) 给所有卡片加更明显的 1px 浅色描边
        2) 给 5 张仪表盘卡片(.bg-card-dark)按位置染色 + 阴影光晕
        3) 给 .bg-diagonal-light-* 加暗色版本(更亮的透明度)
        4) 给 .bg-diagonal-light-info(返利卡)单独定义
   ============================================================ */

/* 1) 通用卡片 - 更明显的描边 + 玻璃 ::before 加深 */
body.ios-dark .card {
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
}
body.ios-dark .card::before {
    background: rgba(60, 60, 67, 0.55);
}
body.ios-dark .card:hover {
    box-shadow: var(--shadow-glass) !important;
}

/* 2) 仪表盘 4 张 bg-card-dark - 按位置区分主色 */
body.ios-dark .card.bg-card-dark {
    background-color: transparent !important;
    background-image: none !important;
    position: relative;
}
/* 第 1 张 - 主蓝 */
body.ios-dark .row > [class*="col-xl"]:nth-child(1) .card.bg-card-dark {
    background-image: linear-gradient(135deg, rgba(10, 132, 255, 0.20) 0%, rgba(88, 86, 214, 0.10) 100%) !important;
    border-color: rgba(108, 177, 255, 0.28) !important;
    box-shadow: var(--shadow-glass) !important;
}
/* 第 2 张 - 成功绿 */
body.ios-dark .row > [class*="col-xl"]:nth-child(2) .card.bg-card-dark {
    background-image: linear-gradient(135deg, rgba(52, 199, 89, 0.20) 0%, rgba(0, 199, 190, 0.10) 100%) !important;
    border-color: rgba(108, 226, 139, 0.28) !important;
    box-shadow: var(--shadow-glass) !important;
}
/* 第 3 张 - 警告橙 */
body.ios-dark .row > [class*="col-xl"]:nth-child(3) .card.bg-card-dark {
    background-image: linear-gradient(135deg, rgba(255, 149, 0, 0.22) 0%, rgba(255, 204, 0, 0.10) 100%) !important;
    border-color: rgba(255, 198, 108, 0.28) !important;
    box-shadow: var(--shadow-glass) !important;
}
/* 第 4 张 - 危险红 */
body.ios-dark .row > [class*="col-xl"]:nth-child(4) .card.bg-card-dark {
    background-image: linear-gradient(135deg, rgba(255, 59, 48, 0.20) 0%, rgba(255, 45, 85, 0.10) 100%) !important;
    border-color: rgba(255, 138, 130, 0.28) !important;
    box-shadow: var(--shadow-glass) !important;
}

/* bg-card-dark 上面再叠玻璃 ::before 会发灰,关掉 */
body.ios-dark .card.bg-card-dark::before {
    display: none !important;
}

/* 3) bg-diagonal-light-* 暗色更亮版本 (5 张仪表卡的最后一张及其它卡片) */
body.ios-dark .bg-diagonal.bg-diagonal-light-primary {
    background: linear-gradient(135deg, rgba(108, 177, 255, 0.20) 0%, rgba(125, 122, 230, 0.12) 100%) !important;
}
body.ios-dark .bg-diagonal.bg-diagonal-light-success {
    background: linear-gradient(135deg, rgba(108, 226, 139, 0.22) 0%, rgba(94, 224, 212, 0.12) 100%) !important;
}
body.ios-dark .bg-diagonal.bg-diagonal-light-warning {
    background: linear-gradient(135deg, rgba(255, 198, 108, 0.22) 0%, rgba(255, 220, 100, 0.12) 100%) !important;
}
body.ios-dark .bg-diagonal.bg-diagonal-light-danger {
    background: linear-gradient(135deg, rgba(255, 138, 130, 0.20) 0%, rgba(255, 122, 158, 0.12) 100%) !important;
}
body.ios-dark .bg-diagonal.bg-diagonal-light-info {
    background: linear-gradient(135deg, rgba(109, 208, 247, 0.22) 0%, rgba(94, 224, 212, 0.12) 100%) !important;
}
body.ios-dark .bg-diagonal {
    background: rgba(255, 255, 255, 0.05) !important;
}
/* bg-diagonal 自己有底色,关掉外层玻璃 ::before */
body.ios-dark .card[class*="bg-diagonal"]::before {
    display: none !important;
}

/* --------------------------------------------------------------------------
   SECTION 19 · 兼容兜底 Compatibility Fallbacks
   -------------------------------------------------------------------------- */
[style*="bg-01-450.jpg"] {
    background-image: none !important;
}

/* --------------------------------------------------------------------------
   SECTION 20 · 顶部菜单居中 + 美化
   Logo 留在最左、Topbar 钉在最右,菜单绝对定位到 header 中线,
   再为菜单项加上玻璃胶囊样式 + 渐变激活态,与 iOS26 设计语言保持一致。
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    /* header 容器变成定位上下文 */
    #kt_header > .container {
        position: relative;
    }
    /* 菜单整体绝对居中,不再受 left 容器宽度影响 */
    #kt_header_menu_wrapper.header-menu-wrapper-left {
        position: absolute !important;
        left: 50% !important;
        top: 0 !important;
        bottom: 0 !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        display: flex !important;
        align-items: stretch !important;
        z-index: 2;
        max-width: calc(100% - 420px); /* 给左侧 logo 和右侧 topbar 留位 */
    }
    #kt_header_menu_wrapper.header-menu-wrapper-left #kt_header_menu {
        display: flex !important;
        align-items: stretch !important;
    }
    #kt_header_menu_wrapper.header-menu-wrapper-left .menu-nav {
        justify-content: center !important;
        align-items: stretch !important;
        flex-wrap: nowrap !important;
        margin: 0 auto !important;
    }
    /* 让左侧 logo 容器保持自然宽度,topbar 保持右贴 */
    #kt_header > .container > .d-flex.align-items-stretch:first-child {
        flex: 0 0 auto !important;
    }
    #kt_header > .container > .topbar {
        position: relative;
        z-index: 3;
    }

    /* 菜单美化:玻璃胶囊 + 柔和阴影 + 平滑过渡 */
    .header-menu .menu-nav > .menu-item {
        margin: 0 3px !important;
    }
    .header-menu .menu-nav > .menu-item > .menu-link {
        padding: 0.45rem 0.85rem !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.45) !important;
        border: 1px solid rgba(255, 255, 255, 0.55) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.7),
            0 1px 2px rgba(31, 38, 135, 0.06) !important;
        -webkit-backdrop-filter: saturate(160%) blur(10px);
        backdrop-filter: saturate(160%) blur(10px);
        transition:
            background 0.25s var(--ease-out),
            color 0.25s var(--ease-out),
            box-shadow 0.25s var(--ease-out),
            transform 0.2s var(--ease-out) !important;
    }
    .header-menu .menu-nav > .menu-item > .menu-link:hover {
        background: rgba(255, 255, 255, 0.92) !important;
        border-color: rgba(0, 122, 255, 0.25) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.85),
            0 4px 14px rgba(0, 122, 255, 0.18) !important;
        transform: translateY(-1px);
    }
    .header-menu .menu-nav > .menu-item.menu-item-active > .menu-link,
    .header-menu .menu-nav > .menu-item.menu-item-here > .menu-link {
        background: linear-gradient(135deg, var(--ios-blue) 0%, #5856d6 100%) !important;
        border-color: rgba(0, 122, 255, 0.55) !important;
        box-shadow: 0 6px 18px rgba(0, 122, 255, 0.35) !important;
        transform: translateY(-1px);
    }
    .header-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-text,
    .header-menu .menu-nav > .menu-item.menu-item-here > .menu-link .menu-text {
        color: #fff !important;
    }
}

/* 992-1399 区间已有的"图标隐藏 + 收紧"规则继续生效,这里同步胶囊外观 */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .header-menu .menu-nav > .menu-item > .menu-link {
        padding: 0.32rem 0.65rem !important;
        border-radius: 999px !important;
    }
    #kt_header_menu_wrapper.header-menu-wrapper-left {
        max-width: calc(100% - 360px);
    }
}

/* 深色主题下的胶囊配色 */
body.ios-dark #kt_header_menu_wrapper.header-menu-wrapper-left .header-menu .menu-nav > .menu-item > .menu-link {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 1px 2px rgba(0, 0, 0, 0.25) !important;
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    backdrop-filter: saturate(160%) blur(10px);
    transition:
        background 0.25s var(--ease-out),
        border-color 0.25s var(--ease-out),
        box-shadow 0.25s var(--ease-out),
        transform 0.2s var(--ease-out) !important;
}
body.ios-dark #kt_header_menu_wrapper.header-menu-wrapper-left .header-menu .menu-nav > .menu-item:hover > .menu-link,
body.ios-dark #kt_header_menu_wrapper.header-menu-wrapper-left .header-menu .menu-nav > .menu-item > .menu-link:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(94, 158, 255, 0.55) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 5px 16px rgba(94, 158, 255, 0.22),
        0 2px 8px rgba(0, 0, 0, 0.28) !important;
    transform: translateY(-1px) !important;
}
body.ios-dark #kt_header_menu_wrapper.header-menu-wrapper-left .header-menu .menu-nav > .menu-item.menu-item-active > .menu-link,
body.ios-dark #kt_header_menu_wrapper.header-menu-wrapper-left .header-menu .menu-nav > .menu-item.menu-item-here > .menu-link,
body.ios-dark #kt_header_menu_wrapper.header-menu-wrapper-left .header-menu .menu-nav > .menu-item.menu-item-open > .menu-link,
body.ios-dark #kt_header_menu_wrapper.header-menu-wrapper-left .header-menu .menu-nav > .menu-item.menu-item-hover > .menu-link {
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.95) 0%, rgba(88, 86, 214, 0.95) 100%) !important;
    border-color: rgba(108, 177, 255, 0.62) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 6px 18px rgba(94, 158, 255, 0.26),
        0 2px 8px rgba(0, 0, 0, 0.30) !important;
    transform: translateY(-1px) !important;
}
body.ios-dark #kt_header_menu_wrapper.header-menu-wrapper-left .header-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-text,
body.ios-dark #kt_header_menu_wrapper.header-menu-wrapper-left .header-menu .menu-nav > .menu-item.menu-item-here > .menu-link .menu-text,
body.ios-dark #kt_header_menu_wrapper.header-menu-wrapper-left .header-menu .menu-nav > .menu-item.menu-item-open > .menu-link .menu-text,
body.ios-dark #kt_header_menu_wrapper.header-menu-wrapper-left .header-menu .menu-nav > .menu-item.menu-item-hover > .menu-link .menu-text {
    color: #fff !important;
}

/* end ios26.css */