/* ==========================================================================
   Apple/iOS 风格统一设计系统
   适用于 ThinkPHP8 首页 UI 系统
   版本: 1.0.0
   依赖: Font Awesome (图标)
   ========================================================================== */

/* ==========================================================================
   1. CSS 变量（设计令牌 Design Tokens）
   ========================================================================== */
:root {
    /* --- 主色调 --- */
    --color-primary: #007AFF;           /* iOS Blue */
    --color-primary-dark: #0056CC;
    --color-primary-light: #4DA2FF;
    --color-primary-bg: rgba(0, 122, 255, 0.1);

    /* --- 语义色 --- */
    --color-success: #34C759;
    --color-warning: #FF9500;
    --color-danger: #FF3B30;
    --color-info: #5AC8FA;

    /* --- 背景色 --- */
    --color-bg: #fafbfc;               /* 参考站背景色 */
    --color-bg-secondary: #f1f5f9;
    --color-bg-tertiary: #E5E5EA;
    --color-card-bg: rgba(255, 255, 255, 0.7);
    --color-card-bg-solid: #FFFFFF;
    --color-overlay: rgba(0, 0, 0, 0.4);

    /* --- 文字色 --- */
    --color-text-primary: #1C1C1E;
    --color-text-secondary: #8E8E93;
    --color-text-tertiary: #C7C7CC;
    --color-text-on-primary: #FFFFFF;
    --color-text-link: #007AFF;

    /* --- 分割线 --- */
    --color-separator: #E5E5EA;
    --color-separator-opaque: #C6C6C8;

    /* --- 圆角 --- */
    --radius-card: 20px;
    --radius-button: 14px;
    --radius-input: 14px;
    --radius-sm: 8px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* --- 阴影 --- */
    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.12);
    --shadow-card: 0 20px 40px -10px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.02);
    --shadow-card-hover: 0 24px 48px -10px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.03);
    --shadow-primary: 0 4px 12px rgba(0, 122, 255, 0.3);

    /* --- 间距 --- */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;

    /* --- 过渡 --- */
    --transition-fast: 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    --transition-base: 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    --transition-slow: 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    --transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* --- 毛玻璃 --- */
    --blur-bg: rgba(255, 255, 255, 0.72);
    --blur-bg-strong: rgba(248, 248, 248, 0.82);
    --blur-filter: blur(40px) saturate(180%);
    --blur-filter-light: blur(20px) saturate(150%);

    /* --- 布局 --- */
    --sidebar-width: 240px;
    --topbar-height: 60px;
    --bottomnav-height: 70px;
    --mobile-max-width: 100%;

    /* --- 字体 --- */
    --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "PingFang SC", sans-serif;
    --font-mono: "SF Mono", "Fira Code", "Consolas", monospace;
    --font-size-xs: 11px;
    --font-size-sm: 13px;
    --font-size-base: 15px;
    --font-size-lg: 17px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 32px;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-base: 1.5;
    --line-height-tight: 1.25;

    /* --- 动画缓动 --- */
    --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* --- z-index 层级（统一规范，避免弹窗与导航竞争）--- */
    --z-sidebar: 1000;       /* 桌面端左侧导航栏 */
    --z-topbar: 1100;        /* 移动端顶部导航栏 */
    --z-bottomnav: 1200;     /* 移动端底部导航栏（之前9999过高导致与弹窗冲突）*/
    --z-overlay: 5000;       /* 半透明遮罩层 */
    --z-modal: 9000;         /* 自定义弹窗（recharge-modal等）*/
    --z-layer: 19891000;     /* Layer.js 弹窗基准值（确保高于一切导航+侧边栏+遮罩） */
    --z-toast: 20000000;     /* Toast/msg 提示最高级 */
}


/* ==========================================================================
   2. 基础重置 (Base Reset)
   ========================================================================== */

/* 盒模型统一 */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 去除默认 margin/padding */
* {
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text-primary);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

/* H5 端底部留白，避免被底部导航栏遮挡 */
body {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* 链接样式 */
a {
    color: var(--color-text-link);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-dark);
    text-decoration: none;
}

a:active {
    opacity: 0.7;
}

/* 图片 */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 标题 */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
}

h1 { font-size: var(--font-size-2xl); }
h2 { font-size: var(--font-size-xl); }
h3 { font-size: var(--font-size-lg); }
h4 { font-size: var(--font-size-base); }
h5 { font-size: var(--font-size-sm); }
h6 { font-size: var(--font-size-xs); }

/* 段落 */
p {
    margin: 0 0 var(--spacing-sm);
}

/* 列表 */
ul, ol {
    list-style: none;
}

/* 滚动条美化 (Webkit) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* Firefox 滚动条 */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

/* 选中文字颜色 */
::selection {
    background: rgba(0, 122, 255, 0.2);
    color: var(--color-text-primary);
}

/* 焦点可见性 */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}


/* ==========================================================================
   3. 布局系统 (Layout)
   ========================================================================== */

/* --- 外层容器 --- */
.mobile-view-container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background-color: var(--color-bg);
}

/*
 * H5 端：模拟手机界面，最大宽度 414px 居中
 * 两侧添加阴影模拟设备边框
 */
@media (max-width: 768px) {
    .mobile-view-container {
        max-width: var(--mobile-max-width);
        margin: 0 auto;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
        background-color: var(--color-bg);
        position: relative;
    }
}

/* --- 侧边栏 (Web 端显示) --- */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: var(--blur-bg-strong);
    backdrop-filter: var(--blur-filter);
    -webkit-backdrop-filter: var(--blur-filter);
    border-right: 1px solid var(--color-separator);
    z-index: var(--z-sidebar);
    overflow-y: auto;
    overflow-x: hidden;
    transition: transform var(--transition-base);
    box-shadow: 1px 0 12px rgba(0, 0, 0, 0.04);
}

/* 侧边栏头部 - 系统名称区域 */
.sidebar-header {
    padding: var(--spacing-lg) var(--spacing-md);
    border-bottom: 0.5px solid var(--color-separator);
    text-align: center;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.sidebar-logo-img {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.sidebar-site-name {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    letter-spacing: -0.02em;
    transition: color var(--transition-fast);
    display: inline-block;
}

.sidebar-site-name:hover {
    color: var(--color-primary);
}

/* 侧边栏菜单列表 */
.sidebar-menu {
    padding: var(--spacing-md) 0;
    margin: 0;
    list-style: none;
}

/* 侧边栏菜单项 */
.sidebar-menu-item {
    margin: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-button);
    position: relative;
    overflow: hidden;
    transition: transform var(--transition-base);
}

.sidebar-menu-item a {
    display: flex;
    align-items: center;
    padding: 12px var(--spacing-md);
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-base);
    position: relative;
    z-index: 1;
    border-radius: var(--radius-button);
}

.sidebar-menu-item a i {
    margin-right: 12px;
    width: 24px;
    text-align: center;
    font-size: 17px;
    color: var(--color-text-secondary);
    transition: all var(--transition-base);
}

/* 菜单项 hover 状态 */
.sidebar-menu-item:hover {
    transform: translateX(4px);
}

.sidebar-menu-item:hover a {
    background: var(--color-primary-bg);
    color: var(--color-primary);
}

.sidebar-menu-item:hover a i {
    color: var(--color-primary);
    transform: scale(1.05);
}

/* 菜单项 active 状态 */
.sidebar-menu-item.active a {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-text-on-primary);
    font-weight: var(--font-weight-semibold);
    box-shadow: var(--shadow-primary);
}

.sidebar-menu-item.active a i {
    color: var(--color-text-on-primary);
    transform: scale(1.1);
}

.sidebar-menu-item.active a::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background-color: var(--color-text-on-primary);
    border-radius: var(--radius-full);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

/* --- 顶部导航栏 (H5 端显示) --- */
.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--topbar-height);
    background: var(--blur-bg);
    backdrop-filter: var(--blur-filter);
    -webkit-backdrop-filter: var(--blur-filter);
    border-bottom: 0.5px solid var(--color-separator);
    z-index: var(--z-topbar);
    display: none;
    align-items: center;
    padding: 0 var(--spacing-md);
    transition: all var(--transition-base);
}

.top-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* Logo 区域 */
.top-bar .logo,
.top-bar .logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.top-bar .logo img {
    height: 36px;
    width: auto;
    border-radius: var(--radius-sm);
}

.top-bar .logo span {
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    font-size: var(--font-size-lg);
    margin-left: var(--spacing-sm);
}

/* 页面标题 */
.top-bar .title {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
    text-align: center;
    flex: 1;
}

/* 返回按钮 */
.top-bar .back-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}

.top-bar .back-btn:hover {
    background: var(--color-primary-bg);
}

.top-bar .back-btn:active {
    transform: scale(0.95);
}

.top-bar .back-btn i {
    font-size: 14px;
}

.top-bar-spacer {
    min-width: 36px;
}

/* --- 主内容区域 --- */
.main-content {
    margin-left: var(--sidebar-width);
    padding: var(--spacing-lg);
    min-height: calc(100vh - var(--topbar-height));
    transition: margin var(--transition-base), padding var(--transition-base);
    background-color: var(--color-bg);
}


/* ==========================================================================
   4. 底部导航栏 (圆角悬浮 + 丝滑指示器)
   ========================================================================== */

/* 外部容器：留出底部间距，使导航栏悬浮 */
.bottom-nav-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-bottomnav);
    padding: 0 12px calc(8px + env(safe-area-inset-bottom, 0));
    pointer-events: none;
}

.bottom-nav {
    display: none;
    position: relative;
    height: 56px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 28px;
    box-shadow: 0 8px 32px -6px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.06);
    justify-content: space-around;
    align-items: center;
    padding: 0 4px;
    pointer-events: auto;
    overflow: hidden;
}

/* 丝滑指示器（液态玻璃效果，在导航项之间滑动） */
.bottom-nav .nav-indicator {
    position: absolute;
    top: 50%;
    left: 0;
    height: 40px;
    width: 0;
    /* 液态玻璃：多层半透明 + 毛玻璃 + 高光 + 渐变点缀 */
    background:
        /* 顶部高光（液态玻璃顶部反光）*/
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.7) 0%,
            rgba(255, 255, 255, 0.15) 48%,
            rgba(255, 255, 255, 0.02) 52%,
            rgba(255, 255, 255, 0.12) 100%),
        /* 主体玻璃半透明底色（带一点点蓝）*/
        linear-gradient(135deg,
            rgba(0, 122, 255, 0.14),
            rgba(80, 170, 255, 0.10));
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow:
        /* 外发光/悬浮阴影 */
        0 8px 22px -6px rgba(0, 122, 255, 0.28),
        0 3px 10px rgba(0, 0, 0, 0.06),
        /* 内部细高光（模拟玻璃边缘折射）*/
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    transform: translateY(-50%) translateX(0);
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                width 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.3s ease;
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}

/* 导航项 */
.bottom-nav .nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    position: relative;
    z-index: 1;
    padding: 8px 0;
    transition: color 0.35s ease;
    -webkit-tap-highlight-color: transparent;
}

.bottom-nav .nav-item i {
    font-size: 18px;
    margin-bottom: 2px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.35s ease;
}

.bottom-nav .nav-item span {
    transition: color 0.35s ease;
    font-size: 10px;
}

/* 导航项 hover */
.bottom-nav .nav-item:hover {
    color: var(--color-primary);
}

/* 导航项 active 状态 - 丝滑切换颜色（无跳动），配合液态玻璃半透明浅色背景使用深蓝色 */
.bottom-nav .nav-item.active {
    color: #0056cc;
    font-weight: var(--font-weight-semibold);
}

.bottom-nav .nav-item.active i {
    color: #0056cc;
}

.bottom-nav .nav-item.active span {
    color: #0056cc;
}

/* 点击反馈（无跳动，仅缩放） */
.bottom-nav .nav-item:active {
    transform: scale(0.93);
    transition: transform 0.1s ease;
}

/* 移除旧的弹簧动画 */


/* ==========================================================================
   5. 卡片系统 (Card System)
   ========================================================================== */

/* --- 基础卡片 --- */
.card {
    background: var(--color-card-bg);
    backdrop-filter: var(--blur-filter);
    -webkit-backdrop-filter: var(--blur-filter);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-card);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    overflow: hidden;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
}

/* --- 模块区块 --- */
.module-section {
    background: var(--color-card-bg);
    backdrop-filter: var(--blur-filter);
    -webkit-backdrop-filter: var(--blur-filter);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-card);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition-base);
}

.module-section:hover {
    box-shadow: var(--shadow-card-hover);
}

/* --- 模块头部 --- */
.module-header {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

/* 折叠式模块头部 */
.module-header.collapsible-header {
    justify-content: space-between;
    margin-bottom: var(--spacing-sm);
    cursor: pointer;
    transition: color var(--transition-fast);
}

.module-header.collapsible-header:hover {
    color: var(--color-primary);
}

.collapse-icon {
    margin-left: auto;
    transition: transform var(--transition-base);
    color: var(--color-text-secondary);
}

/* 模块头部图标容器 */
.module-header-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 14px;
    background: var(--color-bg-tertiary);
    color: var(--color-warning);
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
    transition: transform var(--transition-base);
}

.module-header:hover .module-header-icon {
    transform: scale(1.1);
}

/* 彩虹图标 */
.module-header-icon.rainbow-icon {
    background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
    color: #FFFFFF;
}

/* 模块标题 */
.module-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin: 0;
    color: var(--color-text-primary);
}

/* --- 统计卡片网格 --- */
.stat-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

/* 统计卡片 */
.stat-card {
    border-radius: var(--radius-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 140px;
    box-shadow: var(--shadow-card);
    transition: all var(--transition-base);
    position: relative;
    background: var(--color-card-bg);
    backdrop-filter: var(--blur-filter);
    -webkit-backdrop-filter: var(--blur-filter);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--card-accent, var(--color-primary));
}

/* 卡片头部 */
.stat-card-header {
    padding: var(--spacing-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 卡片颜色主题 */
.stat-card.blue-card {
    background: linear-gradient(135deg, #f0f8ff 0%, #e6f2ff 100%);
    --card-accent: var(--color-primary);
    --card-accent-light: #3498ff;
}

.stat-card.red-card {
    background: linear-gradient(135deg, #fff0f0 0%, #ffe6e6 100%);
    --card-accent: var(--color-danger);
    --card-accent-light: #ff6b6b;
}

.stat-card.yellow-card {
    background: linear-gradient(135deg, #fffbf0 0%, #fff3e0 100%);
    --card-accent: var(--color-warning);
    --card-accent-light: #ffdd33;
}

.stat-card.green-card {
    background: linear-gradient(135deg, #f0fff4 0%, #e6ffed 100%);
    --card-accent: var(--color-success);
    --card-accent-light: #4cd964;
}

/* 统计卡片图标 */
.stat-card-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-button);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.95);
    color: var(--card-accent, var(--color-primary));
    font-size: 18px;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all var(--transition-base);
}

.stat-card:hover .stat-card-icon {
    transform: scale(1.05);
    background-color: var(--card-accent, var(--color-primary));
    color: #FFFFFF;
}

/* 卡片更多按钮 */
.stat-card-more {
    color: rgba(0, 0, 0, 0.3);
    font-size: 16px;
    cursor: pointer;
    transition: all var(--transition-fast);
    padding: 6px;
    border-radius: var(--radius-sm);
}

.stat-card-more:hover {
    color: var(--card-accent, var(--color-primary));
    background-color: rgba(0, 0, 0, 0.05);
}

/* 卡片内容区 */
.stat-card-content {
    padding: 0 var(--spacing-md) var(--spacing-md);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 统计卡片标题 */
.stat-card-title {
    font-size: var(--font-size-sm);
    color: rgba(0, 0, 0, 0.5);
    margin-bottom: var(--spacing-sm);
    font-weight: var(--font-weight-medium);
    transition: color var(--transition-base);
}

.stat-card:hover .stat-card-title {
    color: var(--card-accent, var(--color-primary));
}

/* 统计卡片数值 */
.stat-card-value {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: #000000;
    line-height: 1.2;
    transition: all var(--transition-base);
    font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif;
}

.stat-card:hover .stat-card-value {
    transform: translateY(-2px);
    color: var(--card-accent, var(--color-primary));
}

/* 卡片底部链接 */
.stat-card-footer {
    padding: 12px var(--spacing-md);
    text-align: right;
    background-color: rgba(255, 255, 255, 0.2);
}

.stat-card-link {
    color: rgba(0, 0, 0, 0.7);
    font-size: var(--font-size-sm);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.stat-card-link:hover {
    color: #000000;
}


/* ==========================================================================
   6. 按钮系统 (Button System)
   ========================================================================== */

/* --- 基础按钮 --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 10px var(--spacing-lg);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    border: none;
    border-radius: var(--radius-button);
    cursor: pointer;
    transition: all var(--transition-base);
    text-align: center;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    text-decoration: none;
    letter-spacing: -0.01em;
}

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

.btn i {
    font-size: 1em;
}

/* --- 主按钮 (iOS Blue 渐变) --- */
.btn-primary {
    background: linear-gradient(180deg, #007aff 0%, #0061cc 100%);
    color: var(--color-text-on-primary);
    box-shadow: var(--shadow-primary);
}

.btn-primary:hover {
    box-shadow: 0 6px 20px rgba(0, 122, 255, 0.4);
    color: var(--color-text-on-primary);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: scale(0.96);
}

/* --- 次按钮 (浅灰背景) --- */
.btn-secondary {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

.btn-secondary:hover {
    background: var(--color-separator);
    color: var(--color-text-primary);
    transform: translateY(-1px);
}

/* --- 危险按钮 --- */
.btn-danger {
    background: var(--color-danger);
    color: var(--color-text-on-primary);
    box-shadow: 0 4px 12px rgba(255, 59, 48, 0.3);
}

.btn-danger:hover {
    background: #d70015;
    color: var(--color-text-on-primary);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(255, 59, 48, 0.35);
}

/* --- 成功按钮 --- */
.btn-success {
    background: var(--color-success);
    color: var(--color-text-on-primary);
    box-shadow: 0 4px 12px rgba(52, 199, 89, 0.3);
}

.btn-success:hover {
    background: #28a745;
    color: var(--color-text-on-primary);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(52, 199, 89, 0.35);
}

/* --- 警告按钮 --- */
.btn-warning {
    background: var(--color-warning);
    color: var(--color-text-on-primary);
    box-shadow: 0 4px 12px rgba(255, 149, 0, 0.3);
}

.btn-warning:hover {
    background: #e68600;
    color: var(--color-text-on-primary);
    transform: translateY(-1px);
}

/* --- 按钮大小 --- */
.btn-sm {
    padding: 6px 12px;
    font-size: var(--font-size-sm);
    border-radius: var(--radius-sm);
}

.btn-lg {
    padding: 14px var(--spacing-xl);
    font-size: var(--font-size-lg);
    border-radius: var(--radius-card);
}

/* --- 按钮禁用状态 --- */
.btn:disabled,
.btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none;
}

.btn:disabled:hover,
.btn.disabled:hover {
    transform: none;
}

/* --- 操作按钮 (首页快捷操作) --- */
.action-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0;
}

.action-button {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    border: none;
    border-radius: var(--radius-button);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: var(--shadow-md);
    color: #FFFFFF;
    -webkit-tap-highlight-color: transparent;
}

.action-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.action-button:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.action-button i {
    font-size: 18px;
}

/* 操作按钮颜色变体 */
.recharge-button {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

.recharge-button:hover {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
}

.price-button {
    background: linear-gradient(135deg, #FF9500 0%, #ff6b00 100%);
}

.price-button:hover {
    background: linear-gradient(135deg, #ff6b00 0%, #FF9500 100%);
}

.repo-button {
    background: linear-gradient(135deg, #9c27b0 0%, #673ab7 100%);
}

.repo-button:hover {
    background: linear-gradient(135deg, #673ab7 0%, #9c27b0 100%);
}

.unlock-button {
    background: linear-gradient(135deg, #e91e63 0%, #c2185b 100%);
}

.unlock-button:hover {
    background: linear-gradient(135deg, #c2185b 0%, #e91e63 100%);
}

/* 设置按钮 (表单内小型按钮) */
.setting-button {
    flex: 1;
    padding: 10px var(--spacing-md);
    background-color: var(--color-primary);
    color: #FFFFFF;
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-base);
    text-align: center;
    white-space: nowrap;
}

.setting-button:hover {
    background-color: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-primary);
}

.setting-button:active {
    transform: translateY(0);
}


/* ==========================================================================
   7. 表单元素 (Form Elements)
   ========================================================================== */

/* --- 输入框 --- */
.input-field {
    width: 100%;
    height: 48px;
    border: 1px solid transparent;
    background: #f1f5f9;
    border-radius: var(--radius-input);
    padding: 0 var(--spacing-md);
    font-family: var(--font-family);
    font-size: 16px;
    color: #1d1d1f;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.input-field:focus {
    outline: none;
    border-color: var(--color-primary);
    background: #f1f5f9;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12);
}

.input-field::placeholder {
    color: var(--color-text-tertiary);
}

.input-field:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 通用表单输入 (与 .form-input 兼容) */
.form-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-input);
    font-size: var(--font-size-sm);
    font-family: var(--font-family);
    color: #1d1d1f;
    background: #f1f5f9;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    box-sizing: border-box;
}

.form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: #f1f5f9;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12);
}

.form-input::placeholder {
    color: var(--color-text-tertiary);
}

.form-input[readonly] {
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}

/* --- 文本域 --- */
textarea.input-field,
textarea.form-input {
    height: auto;
    min-height: 100px;
    padding: var(--spacing-md);
    line-height: var(--line-height-base);
    resize: vertical;
}

/* --- 下拉框 --- */
select.input-field,
select.form-input {
    height: 48px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238E8E93' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
    cursor: pointer;
}

/* --- 表单组 --- */
.form-group {
    margin-bottom: var(--spacing-md);
}

/* --- 表单标签 --- */
.form-label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

/* --- 复选框 --- */
.checkbox-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.checkbox-input {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.checkbox-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    cursor: pointer;
    user-select: none;
}

/* --- 按钮组 --- */
.button-group {
    display: flex;
    gap: var(--spacing-sm);
    width: 100%;
}

/* --- 设置项 --- */
.setting-item {
    margin-bottom: var(--spacing-sm);
    padding: var(--spacing-md);
    background-color: #FFFFFF;
    border: 1px solid var(--color-separator);
    border-radius: var(--radius-button);
    transition: all var(--transition-base);
}

.setting-item:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.1);
    transform: translateY(-1px);
}

.setting-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.setting-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.setting-label {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
}

.setting-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.4;
}

.setting-inputs {
    width: 100%;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}


/* ==========================================================================
   8. 表格 (Table)
   ========================================================================== */

.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--color-card-bg);
    backdrop-filter: var(--blur-filter);
    -webkit-backdrop-filter: var(--blur-filter);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.table thead th {
    padding: 12px var(--spacing-md);
    text-align: left;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-separator);
    white-space: nowrap;
}

.table tbody td {
    padding: 12px var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-separator);
}

.table tbody tr:last-child td {
    border-bottom: none;
}

.table tbody tr {
    transition: background var(--transition-fast);
}

.table tbody tr:hover {
    background: var(--color-bg-secondary);
}

.table tbody tr:active {
    background: var(--color-bg-tertiary);
}

/* 表格响应式 - 横向滚动 */
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-card);
}


/* ==========================================================================
   9. 工具类 (Utility Classes)
   ========================================================================== */

/* --- 文字对齐 --- */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* --- 文字大小 --- */
.text-sm { font-size: var(--font-size-sm); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }

/* --- 文字颜色 --- */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-blue { color: var(--color-primary); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-danger { color: var(--color-danger); }

/* --- 文字粗细 --- */
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* --- 间距 (margin-top) --- */
.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }
.mt-4 { margin-top: var(--spacing-lg); }

/* --- 间距 (margin-bottom) --- */
.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-lg); }

/* --- 间距 (padding) --- */
.p-1 { padding: var(--spacing-xs); }
.p-2 { padding: var(--spacing-sm); }
.p-3 { padding: var(--spacing-md); }
.p-4 { padding: var(--spacing-lg); }

/* --- 显示 --- */
.hidden { display: none !important; }
.block { display: block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }

/* --- Flex 工具 --- */
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-1 { flex: 1; }
.flex-wrap { flex-wrap: wrap; }
.gap-1 { gap: var(--spacing-xs); }
.gap-2 { gap: var(--spacing-sm); }
.gap-3 { gap: var(--spacing-md); }
.gap-4 { gap: var(--spacing-lg); }

/* --- 圆角 --- */
.rounded { border-radius: var(--radius-sm); }
.rounded-lg { border-radius: var(--radius-card); }
.rounded-full { border-radius: var(--radius-full); }

/* --- 宽度 --- */
.w-full { width: 100%; }
.w-auto { width: auto; }

/* --- 阴影 --- */
.shadow { box-shadow: var(--shadow-card); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-none { box-shadow: none; }

/* --- 溢出 --- */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }


/* ==========================================================================
   10. 响应式设计 (Responsive)
   ========================================================================== */

/*
 * 断点说明:
 *   移动端 (H5): max-width: 768px
 *   平板:        769px - 1024px
 *   桌面端:      min-width: 1025px
 */

/* === Web 端 (>= 769px) === */
@media (min-width: 769px) {
    /* 显示侧边栏 */
    .sidebar {
        display: block;
    }

    /* 隐藏顶部导航栏 */
    .top-bar {
        display: none;
    }

    /* 隐藏底部导航栏 */
    .bottom-nav {
        display: none;
    }

    /* 主内容区域留出侧边栏宽度 + 顶部留白（避免内容紧贴顶部）*/
    .main-content {
        margin-left: var(--sidebar-width);
        margin-top: 0;
        /* 桌面端：只加左右 padding + 适量顶部/底部 padding，内边距交给 page-container 控制 */
        padding: 28px 24px 24px;
        min-height: 100vh;
    }

    /* 关键修复：当 page-container/dashboard-container 是 main-content 的直接子元素时，
       移除重复的 padding（避免双层padding挤压内容），
       保持 max-width 居中即可 */
    .main-content > .page-container,
    .main-content > .dashboard-container,
    .main-content > .ios-device-list,
    .main-content > .finance-dashboard,
    .main-content > .appstore-light,
    .main-content > .agent-dashboard,
    .main-content > .ios-settings {
        max-width: 100%;
        margin: 0;
        padding: 0 0 32px;
    }

    /* 设置项横向布局 */
    .setting-content {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .setting-header {
        flex: 1;
        min-width: 200px;
    }

    .setting-inputs {
        flex: 2;
        max-width: 600px;
    }

    .input-group {
        flex-direction: row;
        align-items: center;
    }

    .form-input {
        flex: 1;
        min-width: 200px;
    }

    .button-group {
        width: auto;
    }

    .setting-button {
        flex: none;
    }
}

/* === H5 端 (<= 768px) === */
@media (max-width: 768px) {
    /* 隐藏侧边栏 */
    .sidebar {
        transform: translateX(-100%);
        display: none;
    }

    /* 显示顶部导航栏 */
    .top-bar {
        display: flex;
    }

    /* 显示底部导航栏（圆角悬浮版） */
    .bottom-nav {
        display: flex;
    }

    /* 主内容区域 - 无侧边栏偏移，顶部留出导航栏高度，底部含悬浮导航栏高度 */
    .main-content {
        margin-left: 0;
        margin-top: var(--topbar-height);
        padding: 16px 14px calc(24px + 56px + env(safe-area-inset-bottom, 0));
        min-height: calc(100vh - var(--topbar-height));
    }

    /* 移动端：同样清除嵌套容器的重复 padding，避免挤压内容 */
    .main-content > .page-container,
    .main-content > .dashboard-container,
    .main-content > .ios-device-list,
    .main-content > .finance-dashboard,
    .main-content > .appstore-light,
    .main-content > .agent-dashboard,
    .main-content > .ios-settings {
        max-width: 100%;
        margin: 0;
        padding: 0 0 32px;
    }

    /* 侧边栏头部缩小 */
    .sidebar-header {
        padding: var(--spacing-md) var(--spacing-sm);
    }

    .sidebar-site-name {
        font-size: var(--font-size-base);
    }

    /* 统计卡片调整 */
    .stat-cards {
        gap: var(--spacing-sm);
    }

    .stat-card {
        min-height: 130px;
    }

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

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

    .stat-card-icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .stat-card-title {
        font-size: var(--font-size-xs);
    }

    .stat-card-value {
        font-size: 28px;
    }

    /* 操作按钮调整 */
    .action-buttons {
        margin: var(--spacing-md) 0;
        gap: 12px;
    }

    .action-button {
        padding: 14px var(--spacing-md);
        font-size: var(--font-size-sm);
    }

    /* 设置项纵向布局 */
    .setting-item {
        padding: 12px;
    }

    .setting-label {
        font-size: var(--font-size-sm);
    }

    .setting-desc {
        font-size: var(--font-size-xs);
    }

    .form-input {
        font-size: var(--font-size-xs);
        padding: 8px 12px;
    }

    .setting-button {
        padding: 8px 14px;
        font-size: var(--font-size-xs);
    }
}

/* === 平板端 (769px - 1024px) === */
@media (min-width: 769px) and (max-width: 1024px) {
    .stat-cards {
        grid-template-columns: repeat(2, 1fr);
    }

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

/* === 小屏手机 (<= 480px) === */
@media (max-width: 480px) {
    .stat-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .stat-card {
        min-height: 110px;
        border-radius: var(--radius-button);
    }

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

    .stat-card-content {
        padding: 0 12px 12px;
    }

    .stat-card-icon {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .stat-card-value {
        font-size: 24px;
    }

    .action-buttons {
        gap: 10px;
    }

    .action-button {
        padding: 12px var(--spacing-md);
        font-size: var(--font-size-xs);
        border-radius: var(--radius-input);
    }

    .setting-content {
        gap: var(--spacing-sm);
    }

    .input-group {
        gap: var(--spacing-sm);
    }

    .form-input {
        font-size: var(--font-size-xs);
        padding: 8px 10px;
    }

    .setting-button {
        padding: 6px 12px;
        font-size: var(--font-size-xs);
    }

    /* 手机端按钮：图标+文字同行排列，保持可读性 */
    .action-bar .btn-text {
        font-size: 11px !important;
    }
    .action-bar .chev {
        font-size: 9px !important;
    }
    .action-bar .action-btn,
    .action-bar .more-menu-btn {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        padding: 10px 6px !important;
        font-size: 12px !important;
        gap: 3px !important;
    }
    .more-menu-dropdown {
        min-width: 180px !important;
        right: 0 !important;
    }
}

/* === 超小屏 (<= 360px) === */
@media (max-width: 360px) {
    .stat-cards {
        grid-template-columns: 1fr;
    }

    .function-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   11. 动画 (Animations)
   ========================================================================== */

/* 淡入 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 上滑 */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 缩放 */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 卡片 hover 微浮效果 */
@keyframes cardHover {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-4px);
    }
}

/* 动画工具类 */
.animate-fadeIn {
    animation: fadeIn var(--transition-base) forwards;
}

.animate-slideUp {
    animation: slideUp var(--transition-base) forwards;
}

.animate-scaleIn {
    animation: scaleIn var(--transition-base) forwards;
}

/* 依次淡入动画 (用于列表/卡片) */
.animate-fadeIn:nth-child(1) { animation-delay: 0.05s; }
.animate-fadeIn:nth-child(2) { animation-delay: 0.10s; }
.animate-fadeIn:nth-child(3) { animation-delay: 0.15s; }
.animate-fadeIn:nth-child(4) { animation-delay: 0.20s; }
.animate-fadeIn:nth-child(5) { animation-delay: 0.25s; }
.animate-fadeIn:nth-child(6) { animation-delay: 0.30s; }

.animate-slideUp:nth-child(1) { animation-delay: 0.05s; }
.animate-slideUp:nth-child(2) { animation-delay: 0.10s; }
.animate-slideUp:nth-child(3) { animation-delay: 0.15s; }
.animate-slideUp:nth-child(4) { animation-delay: 0.20s; }
.animate-slideUp:nth-child(5) { animation-delay: 0.25s; }
.animate-slideUp:nth-child(6) { animation-delay: 0.30s; }

/* 旋转 (加载用) */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 挥手动画 */
@keyframes wave {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(14deg); }
    20% { transform: rotate(-8deg); }
    30% { transform: rotate(14deg); }
    40% { transform: rotate(-4deg); }
    50% { transform: rotate(10deg); }
    60% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

.wave-emoji {
    display: inline-block;
    animation: wave 1.5s infinite;
    transform-origin: 70% 70%;
}

/* 脉冲动画 */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}


/* ==========================================================================
   12. 其他组件 (Other Components)
   ========================================================================== */

/* --- 徽章 (Badge) --- */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    background-color: var(--color-danger);
    color: #FFFFFF;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-full);
    position: absolute;
    top: -5px;
    right: -5px;
    line-height: 1;
}

.badge.badge-primary { background-color: var(--color-primary); }
.badge.badge-success { background-color: var(--color-success); }
.badge.badge-warning { background-color: var(--color-warning); }
.badge.badge-info { background-color: var(--color-info); }

/* --- 提示框 (Alert) --- */
.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border-radius: var(--radius-button);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    border-left: 4px solid;
    transition: opacity var(--transition-fast);
}

.alert i {
    font-size: 18px;
    margin-top: 2px;
    flex-shrink: 0;
}

.alert-success {
    background: rgba(52, 199, 89, 0.1);
    border-left-color: var(--color-success);
    color: #1a7d36;
}

.alert-success i { color: var(--color-success); }

.alert-warning {
    background: rgba(255, 149, 0, 0.1);
    border-left-color: var(--color-warning);
    color: #8a5a00;
}

.alert-warning i { color: var(--color-warning); }

.alert-danger {
    background: rgba(255, 59, 48, 0.1);
    border-left-color: var(--color-danger);
    color: #b3001b;
}

.alert-danger i { color: var(--color-danger); }

.alert-info {
    background: rgba(0, 122, 255, 0.1);
    border-left-color: var(--color-primary);
    color: #004cb3;
}

.alert-info i { color: var(--color-primary); }

/* --- 加载动画 (Loading) --- */
.loading {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 2.5px solid var(--color-bg-tertiary);
    border-top-color: var(--color-primary);
    border-radius: var(--radius-full);
    animation: spin 0.8s linear infinite;
}

.loading-sm {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

.loading-lg {
    width: 36px;
    height: 36px;
    border-width: 3px;
}

/* 加载遮罩 */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-overlay);
    flex-direction: column;
    gap: var(--spacing-md);
}

.loading-overlay .loading {
    width: 40px;
    height: 40px;
    border-width: 3.5px;
}

.loading-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* --- 标签 (Tag) --- */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-sm);
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    line-height: 1.5;
    white-space: nowrap;
}

.tag-blue { background: rgba(0, 122, 255, 0.12); color: var(--color-primary); }
.tag-green { background: rgba(52, 199, 89, 0.12); color: var(--color-success); }
.tag-orange { background: rgba(255, 149, 0, 0.12); color: var(--color-warning); }
.tag-red { background: rgba(255, 59, 48, 0.12); color: var(--color-danger); }

/* --- 分割线 (Divider) --- */
.divider {
    position: relative;
    text-align: center;
    margin: var(--spacing-lg) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.divider::before,
.divider::after {
    content: "";
    position: absolute;
    top: 50%;
    width: calc(50% - 24px);
    height: 1px;
    background: var(--color-separator);
}

.divider::before { left: 0; }
.divider::after { right: 0; }

/* 纯线条分割线 */
.divider-line {
    height: 0.5px;
    background: var(--color-separator);
    border: none;
    margin: var(--spacing-md) 0;
}

/* --- 空状态 (Empty State) --- */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl) var(--spacing-lg);
    text-align: center;
}

.empty-state-icon {
    font-size: 56px;
    color: var(--color-text-tertiary);
    margin-bottom: var(--spacing-md);
    opacity: 0.6;
}

.empty-state-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.empty-state-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-lg);
    max-width: 300px;
    line-height: 1.5;
}


/* ==========================================================================
   附加：首页专属组件样式
   ========================================================================== */

/* --- 欢迎区域 --- */
.welcome-section {
    margin-bottom: var(--spacing-lg);
    display: flex;
    align-items: center;
}

.welcome-user {
    padding-left: 4px;
}

.welcome-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    margin: 0;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
}

.wave-emoji {
    margin-left: var(--spacing-sm);
    font-size: 22px;
}

.welcome-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: 4px;
}

/* --- 功能网格 --- */
.function-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.function-item {
    background: var(--color-card-bg);
    backdrop-filter: var(--blur-filter);
    -webkit-backdrop-filter: var(--blur-filter);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-card);
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    box-shadow: var(--shadow-sm);
}

.function-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.function-item-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-button);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--spacing-md);
    font-size: 20px;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
    flex-shrink: 0;
}

.function-item:hover .function-item-icon {
    transform: scale(1.05);
}

.function-item-info h4 {
    margin: 0 0 4px 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.function-item-info p {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

/* 功能图标颜色变体 */
.function-item-icon.wallet-icon {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #FFFFFF;
}

.function-item-icon.device-mgmt-icon {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: #FFFFFF;
}

.function-item-icon.app-icon {
    background: linear-gradient(135deg, #fad0c4 0%, #ffd1ff 100%);
    color: #FFFFFF;
}

.function-item-icon.card-icon {
    background: linear-gradient(135deg, #c471f5 0%, #fa71cd 100%);
    color: #FFFFFF;
}

.function-item-icon.agent-icon {
    background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
    color: #FFFFFF;
}

.function-item-icon.tiepack-icon {
    background: linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%);
    color: #FFFFFF;
}

.function-item-icon.database-icon {
    background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
    color: #FFFFFF;
}

.function-item-icon.tutorial-icon {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #FFFFFF;
}

.function-item-icon.build-icon {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    color: #FFFFFF;
}

.function-item-icon.logout-icon {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
    color: #FFFFFF;
}

.function-item-icon.source-icon {
    background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);
    color: #FFFFFF;
}

/* --- 设置内容折叠区 --- */
.settings-content {
    transition: all var(--transition-base);
    overflow: hidden;
}


/* ==========================================================================
   附加：深色模式预留 (Dark Mode - 预留扩展)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    /* 深色模式样式预留 - 当前默认使用浅色模式 */
    /* 如需启用深色模式，取消下方注释并调整变量值 */

    /*
    :root {
        --color-bg: #000000;
        --color-bg-secondary: #1C1C1E;
        --color-bg-tertiary: #2C2C2E;
        --color-card-bg: #1C1C1E;
        --color-text-primary: #FFFFFF;
        --color-text-secondary: #8E8E93;
        --color-text-tertiary: #48484A;
        --color-separator: #38383A;
        --blur-bg: rgba(28, 28, 30, 0.72);
        --blur-bg-strong: rgba(28, 28, 30, 0.82);
    }
    */
}


/* ==========================================================================
   附加：打印样式
   ========================================================================== */
@media print {
    .sidebar,
    .top-bar,
    .bottom-nav,
    .action-buttons {
        display: none !important;
    }

    .main-content {
        margin-left: 0;
        padding: 0;
    }

    .card,
    .module-section {
        box-shadow: none;
        border: 1px solid #ccc;
    }
}


/* ==========================================================================
   13. 用户页面专属组件 (User Page Components)
   ========================================================================== */

/* --- 仪表盘容器 --- */
.dashboard-container {
    padding: var(--spacing-md);
    max-width: 800px;
    margin: 0 auto;
}

@media (min-width: 769px) {
    .dashboard-container {
        padding: var(--spacing-lg);
        max-width: 900px;
    }
}

/* --- 证书对接密钥 --- */
.token-container {
    margin-top: var(--spacing-md);
}

.token-hint {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
}

.token-hint i {
    margin-right: var(--spacing-sm);
    color: var(--color-primary);
}

.token-display {
    margin-bottom: var(--spacing-md);
}

.token-input {
    width: 100%;
    padding: var(--spacing-md);
    font-family: var(--font-mono);
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-separator);
    border-radius: var(--radius-input);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    outline: none;
    transition: all var(--transition-fast);
    box-sizing: border-box;
}

.token-input:focus {
    border-color: var(--color-primary);
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12);
}

.token-btn-row {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.token-copy-btn,
.token-change-btn {
    flex: 1;
    padding: 12px var(--spacing-lg);
    border: none;
    border-radius: var(--radius-button);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    -webkit-tap-highlight-color: transparent;
}

.token-copy-btn {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    box-shadow: var(--shadow-primary);
}

.token-copy-btn:hover {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 122, 255, 0.35);
}

.token-copy-btn:active {
    transform: scale(0.96);
}

.token-change-btn {
    background: var(--color-warning);
    color: var(--color-text-on-primary);
    box-shadow: 0 4px 12px rgba(255, 149, 0, 0.3);
}

.token-change-btn:hover {
    background: #e68600;
    transform: translateY(-1px);
}

.token-change-btn:active {
    transform: scale(0.96);
}

.token-change-btn i {
    transition: transform var(--transition-base);
}

.token-change-btn:hover i {
    transform: rotate(180deg);
}

/* --- 微信订阅通知 --- */
.module-header-icon.wx-icon {
    background: linear-gradient(135deg, #07c160, #06ad56);
    color: #FFFFFF;
}

.wx-hint {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
}

.wx-hint i {
    margin-right: var(--spacing-sm);
    color: #07c160;
}

.wx-qrcode-container {
    text-align: center;
    padding: var(--spacing-md);
}

.wx-qrcode-img {
    width: 200px;
    height: 200px;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-separator);
    margin: 0 auto;
}

.wx-qrcode-tip {
    margin-top: var(--spacing-sm);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.wx-status-text {
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    margin-top: var(--spacing-sm);
}

.wx-bound-info {
    display: flex;
    align-items: center;
    padding: var(--spacing-md);
    background: rgba(52, 199, 89, 0.08);
    border-radius: var(--radius-card);
    border: 1px solid rgba(52, 199, 89, 0.2);
}

.wx-bound-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: #07c160;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-right: var(--spacing-md);
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(7, 193, 96, 0.3);
}

.wx-bound-text h4 {
    margin: 0 0 4px 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: #1a7d36;
}

.wx-bound-text p {
    margin: 0;
    font-size: var(--font-size-xs);
    color: #2d8c4e;
}

.wx-bound-desc {
    margin-top: 2px !important;
}

.wx-unbind-btn {
    width: 100%;
    margin-top: var(--spacing-md);
    padding: 12px;
    border: 1px solid var(--color-danger);
    background: transparent;
    color: var(--color-danger);
    border-radius: var(--radius-button);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    -webkit-tap-highlight-color: transparent;
}

.wx-unbind-btn:hover {
    background: var(--color-danger);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(255, 59, 48, 0.25);
}

.wx-unbind-btn:active {
    transform: scale(0.98);
}

.wx-error-icon {
    text-align: center;
    margin-bottom: var(--spacing-sm);
}

.wx-error-icon i {
    font-size: 32px;
    color: var(--color-text-tertiary);
}

.wx-error-text {
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    line-height: 1.5;
}

/* --- 账户操作功能图标 --- */
.function-item-icon.profile-icon {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: #FFFFFF;
}

.function-item-icon.account-icon {
    background: linear-gradient(135deg, var(--color-danger), #d70015);
    color: #FFFFFF;
}

/* --- 响应式：用户页面 --- */
@media (max-width: 768px) {
    .dashboard-container {
        padding: var(--spacing-md);
    }

    .module-section {
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-md);
    }

    .function-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }

    .function-item {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .function-item-icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
        margin-right: var(--spacing-sm);
    }

    .token-btn-row {
        flex-direction: column;
    }

    .token-copy-btn,
    .token-change-btn {
        width: 100%;
    }

    .wx-qrcode-img {
        width: 180px;
        height: 180px;
    }
}


/* ==========================================================================
   14. 用户资料页面样式 (User Profile Page - iOS Settings 风格)
   ========================================================================== */

/* --- iOS 设置页面容器 --- */
.ios-settings {
    background-color: var(--color-bg);
    padding-bottom: 20px;
}

/* --- 设置分组（圆角卡片） --- */
.settings-group {
    background: var(--color-card-bg);
    backdrop-filter: var(--blur-filter);
    -webkit-backdrop-filter: var(--blur-filter);
    border: 1px solid rgba(255, 255, 255, 0.6);
    margin: 20px 4px 0;
    border-radius: var(--radius-card);
    overflow: hidden;
}

.settings-group:first-child {
    margin-top: 0;
}

/* --- 设置项 --- */
.settings-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    text-decoration: none;
    color: var(--color-text-primary);
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--transition-fast);
}

.settings-item:last-child {
    border-bottom: none;
}

.settings-item:active {
    background-color: var(--color-bg);
}

/* 个人资料项 */
.profile-item {
    padding: 16px;
}

/* --- 头像 --- */
.item-avatar {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-on-primary);
    font-size: 24px;
    margin-right: 12px;
    flex-shrink: 0;
    overflow: hidden;
}

.item-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-full);
}

/* --- 小图标（彩色方块） --- */
.item-icon {
    width: 29px;
    height: 29px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-on-primary);
    font-size: 15px;
    margin-right: 12px;
    flex-shrink: 0;
    background: var(--card-color, var(--color-primary));
}

/* --- 图标颜色变体 --- */
.user-icon     { --card-color: var(--color-primary); }
.email-icon    { --card-color: var(--color-success); }
.phone-icon    { --card-color: var(--color-warning); }
.security-icon { --card-color: #5856D6; }
.twofa-icon    { --card-color: var(--color-danger); }
.wallet-icon   { --card-color: var(--color-success); }
.device-icon   { --card-color: var(--color-primary); }
.logout-icon   { --card-color: var(--color-danger); }
.api-icon      { --card-color: #5856D6; }

/* --- 内容区 --- */
.item-content {
    flex: 1;
}

.item-title {
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-normal);
}

.item-subtitle {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-top: 2px;
    font-family: var(--font-mono);
    word-break: break-all;
    line-height: 1.2;
    max-width: 250px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* --- 箭头 --- */
.item-chevron {
    color: var(--color-text-tertiary);
    font-size: 14px;
}

/* --- 退出登录项 --- */
.logout-item {
    color: var(--color-danger);
}

.logout-item .item-title {
    color: var(--color-danger);
}

/* --- Token 显示 --- */
.token-display {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#user-token {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--color-text-secondary);
    word-break: break-all;
}

.token-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 4px;
}

.copy-token-btn,
.change-token-btn {
    color: var(--color-text-on-primary);
    border: none;
    border-radius: var(--radius-input);
    padding: 8px 16px;
    font-size: var(--font-size-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all var(--transition-fast);
    flex-shrink: 0;
    min-width: 72px;
    height: 32px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.2px;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    overflow: hidden;
}

.copy-token-btn::before,
.change-token-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.copy-token-btn:hover::before,
.change-token-btn:hover::before {
    opacity: 1;
}

.copy-token-btn {
    background: var(--color-primary);
}

.copy-token-btn:active {
    transform: scale(0.96);
    background: var(--color-primary-dark);
}

.change-token-btn {
    background: var(--color-danger);
}

.change-token-btn:active {
    transform: scale(0.96);
    background: #d70015;
}

.copy-token-btn i,
.change-token-btn i {
    font-size: 12px;
}

.copy-token-btn span,
.change-token-btn span {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

/* --- 响应式：小屏底部留白 --- */
@media (max-width: 480px) {
    .ios-settings {
        padding-bottom: 40px;
    }
}

/* --- 密码修改弹窗 --- */
.password-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
}

.password-modal-content {
    background: var(--color-card-bg);
    backdrop-filter: var(--blur-filter);
    -webkit-backdrop-filter: var(--blur-filter);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-xl);
    width: 90%;
    max-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-card);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px 0 20px;
    border-bottom: 1px solid var(--color-separator);
    margin-bottom: 20px;
}

.modal-header h3 {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.modal-close {
    font-size: 24px;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 5px;
    border-radius: var(--radius-full);
    transition: background-color var(--transition-fast);
}

.modal-close:hover {
    background-color: var(--color-bg-secondary);
}

.password-form {
    padding: 0 20px 20px 20px;
}

/* --- 表单组（密码弹窗内） --- */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.form-group input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--color-separator);
    border-radius: var(--radius-input);
    font-size: var(--font-size-lg);
    transition: border-color var(--transition-fast);
    box-sizing: border-box;
}

.form-group input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

/* --- 表单按钮区 --- */
.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 30px;
}

.btn-cancel,
.btn-submit {
    flex: 1;
    padding: 12px 20px;
    border: none;
    border-radius: var(--radius-input);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-cancel {
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
}

.btn-cancel:hover {
    background: var(--color-bg-tertiary);
}

.btn-submit {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
}

.btn-submit:hover {
    background: var(--color-primary-dark);
}

.btn-submit:disabled {
    background: var(--color-text-tertiary);
    cursor: not-allowed;
}

/* --- 社交登录管理 --- */
.social-login-section {
    border-top: 1px solid var(--color-separator);
    background: var(--color-bg-secondary);
}

.social-login-container {
    padding: 16px;
}

.social-account-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    margin-bottom: 8px;
    background: var(--color-card-bg);
    backdrop-filter: var(--blur-filter);
    -webkit-backdrop-filter: var(--blur-filter);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-button);
    transition: all var(--transition-fast);
}

.social-account-item:last-child {
    margin-bottom: 0;
}

.social-account-item:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.1);
}

.social-info {
    display: flex;
    align-items: center;
    flex: 1;
}

.social-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-button);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-on-primary);
    font-size: 18px;
    margin-right: 12px;
    flex-shrink: 0;
}

/* 社交平台品牌色 */
.wx-icon   { background: #07C160; }
.qq-icon   { background: #12B7F5; }
.sina-icon { background: #FF8200; }

.social-details {
    flex: 1;
}

.social-name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

.social-status {
    font-size: var(--font-size-sm);
}

.status-bound {
    color: var(--color-success);
    font-weight: var(--font-weight-medium);
}

.status-unbound {
    color: var(--color-text-secondary);
}

.social-actions {
    flex-shrink: 0;
}

.btn-bind,
.btn-unbind,
.btn-rebind {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
    min-width: 60px;
    margin-right: 8px;
}

.btn-bind,
.btn-unbind,
.btn-rebind:last-child {
    margin-right: 0;
}

.btn-bind {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
}

.btn-bind:hover {
    background: var(--color-primary-dark);
    transform: scale(1.02);
}

.btn-unbind {
    background: var(--color-danger);
    color: var(--color-text-on-primary);
}

.btn-unbind:hover {
    background: #d70015;
    transform: scale(1.02);
}

.btn-rebind {
    background: #5856D6;
    color: var(--color-text-on-primary);
}

.btn-rebind:hover {
    background: #4640a0;
    transform: scale(1.02);
}

.social-disabled {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.social-disabled i {
    margin-right: 8px;
    font-size: 16px;
}


/* ==========================================================================
   15. Layer.js & SweetAlert2 弹窗毛玻璃风格覆盖
   ========================================================================== */

/* ==========================================================================
   弹窗层级统一修复（解决弹窗与导航栏/顶部栏的层级竞争 & 位置溢出）
   ========================================================================== */

/* Layer.js 弹窗：强制 z-index 使用基准值，确保 100% 高于 top-bar(1100) / bottom-nav(1200) */
.layui-layer,
.layui-layer-page,
.layui-layer-dialog,
.layui-layer-iframe {
    z-index: var(--z-layer) !important;
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(40px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.02) !important;
    overflow: visible !important;
    position: fixed !important;
    max-height: calc(100vh - 32px) !important;
}

/* msg/tips/loading 不应用弹窗背景（保持轻量提示风格）*/
.layui-layer-loading,
.layui-layer-tips {
    z-index: var(--z-layer) !important;
}

/* Layer.js 遮罩：强制高于导航 */
.layui-layer-shade {
    z-index: calc(var(--z-layer) - 1) !important;
    background-color: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
}

.layui-layer-title {
    background: transparent !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
    color: #1d1d1f !important;
    font-weight: 600 !important;
    font-size: 17px !important;
    padding: 16px 60px 16px 20px !important;
    flex: 0 0 auto;
    position: relative !important;
}

/* 原生关闭按钮：充值弹窗风格（圆角方形、浅灰背景、右上角）*/
.layui-layer-setwin {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    left: auto !important;
    z-index: 100 !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    background: none !important;
    visibility: visible !important;
    inset: auto !important;
}

.layui-layer-setwin a,
.layui-layer-setwin .layui-layer-close,
.layui-layer-setwin .layui-layer-close1,
.layui-layer-setwin .layui-layer-close2 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    background: #f1f5f9 !important;
    background-image: none !important;
    background-position: 0 0 !important;
    background-size: 0 0 !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
    text-indent: 0 !important;
    font-size: 0 !important;
    line-height: 1 !important;
    color: #86868b !important;
    transition: all 0.15s ease !important;
    -webkit-tap-highlight-color: transparent !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif !important;
}

.layui-layer-setwin a:hover,
.layui-layer-setwin .layui-layer-close:hover {
    background: #e2e8f0 !important;
    color: #1d1d1f !important;
}

.layui-layer-setwin .layui-layer-close::after {
    content: "×";
    font-size: 18px !important;
    font-weight: 400 !important;
    color: inherit !important;
    line-height: 1 !important;
    display: block !important;
    text-indent: 0 !important;
    font-family: inherit !important;
}
.layui-layer-setwin .layui-layer-close::before {
    content: none !important;
    display: none !important;
}

@media (max-width: 768px) {
    /* 手机端关闭按钮：强制定位在弹窗右上角 */
    .layui-layer-setwin {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        left: auto !important;
        z-index: 100 !important;
        inset: auto !important;
    }
    .layui-layer-setwin a,
    .layui-layer-setwin .layui-layer-close,
    .layui-layer-setwin .layui-layer-close1,
    .layui-layer-setwin .layui-layer-close2 {
        width: 34px !important;
        height: 34px !important;
        font-size: 20px !important;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        margin: 0 !important;
    }
    .layui-layer-setwin .layui-layer-close::after {
        font-size: 20px !important;
    }
}

.layui-layer-content {
    padding: 20px !important;
    color: #1d1d1f !important;
    overflow-y: auto !important;
    flex: 1 1 auto;
}

.layui-layer-btn {
    padding: 0 20px 20px !important;
    text-align: right;
    flex: 0 0 auto;
}

.layui-layer-btn .layui-layer-btn0 {
    background: linear-gradient(180deg, #007aff 0%, #0061cc 100%) !important;
    border: none !important;
    border-radius: 14px !important;
    color: #fff !important;
    padding: 8px 20px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3) !important;
}

.layui-layer-btn .layui-layer-btn1 {
    background: #f1f5f9 !important;
    border: 1px solid transparent !important;
    border-radius: 14px !important;
    color: #1d1d1f !important;
    padding: 8px 20px !important;
    font-weight: 600 !important;
}

/* Layer.js 提示条 - Apple 风格（毛玻璃 + 字体优化）
   通过 JS 给 .layui-layer-msg 追加 apple-toast-* 类实现颜色区分，避免 :has() 兼容性 */
body .layui-layer-msg,
body .layui-layer-msg.layui-layer-hui,
body .apple-toast.layui-layer-msg,
body .apple-toast.layui-layer-hui {
    z-index: var(--z-toast) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(40px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
    padding: 14px 22px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1d1d1f !important;
    min-width: 80px !important;
    text-align: center !important;
}

/* 提示条入场动画：仅移动端启用 */
@keyframes layerMsgSlideIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(0.96); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* 统一替换 layer 原生的 icon 为 FontAwesome，保持 Apple 风格 */
body .layui-layer-msg .layui-layer-ico,
body .apple-toast.layui-layer-msg .layui-layer-ico {
    background: none !important;
    width: 18px !important;
    height: 18px !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
}
body .layui-layer-msg .layui-layer-ico::before,
body .apple-toast.layui-layer-msg .layui-layer-ico::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    display: inline-block;
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 16px;
}
body .layui-layer-msg .layui-layer-ico1::before,
body .apple-toast.layui-layer-msg .layui-layer-ico1::before { content: "\f00c"; }
body .layui-layer-msg .layui-layer-ico2::before,
body .apple-toast.layui-layer-msg .layui-layer-ico2::before { content: "\f00d"; }
body .layui-layer-msg .layui-layer-ico0::before,
body .apple-toast.layui-layer-msg .layui-layer-ico0::before { content: "\f12a"; }
body .layui-layer-msg .layui-layer-ico16::before,
body .apple-toast.layui-layer-msg .layui-layer-ico16::before { content: "\f110"; }
body .layui-layer-msg .layui-layer-ico16,
body .apple-toast.layui-layer-msg .layui-layer-ico16 {
    animation: layerMsgSpin 0.9s linear infinite !important;
}
@keyframes layerMsgSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Apple 风格：成功 - 浅绿色毛玻璃 */
body .apple-toast-success.layui-layer-msg,
body .apple-toast-success.layui-layer-hui {
    background: rgba(52, 199, 89, 0.95) !important;
    color: #fff !important;
    border-color: rgba(52, 199, 89, 0.6) !important;
    box-shadow: 0 12px 32px rgba(52, 199, 89, 0.32), 0 0 0 1px rgba(52, 199, 89, 0.1) !important;
}
body .apple-toast-success.layui-layer-msg .layui-layer-ico::before,
body .apple-toast-success.layui-layer-hui .layui-layer-ico::before { color: #fff; }

/* Apple 风格：错误 - 浅红色毛玻璃 */
body .apple-toast-error.layui-layer-msg,
body .apple-toast-error.layui-layer-hui {
    background: rgba(255, 59, 48, 0.95) !important;
    color: #fff !important;
    border-color: rgba(255, 59, 48, 0.6) !important;
    box-shadow: 0 12px 32px rgba(255, 59, 48, 0.32), 0 0 0 1px rgba(255, 59, 48, 0.1) !important;
}
body .apple-toast-error.layui-layer-msg .layui-layer-ico::before,
body .apple-toast-error.layui-layer-hui .layui-layer-ico::before { color: #fff; }

/* Apple 风格：警告 - 浅黄色毛玻璃 */
body .apple-toast-warning.layui-layer-msg,
body .apple-toast-warning.layui-layer-hui {
    background: rgba(255, 149, 0, 0.95) !important;
    color: #fff !important;
    border-color: rgba(255, 149, 0, 0.6) !important;
    box-shadow: 0 12px 32px rgba(255, 149, 0, 0.32), 0 0 0 1px rgba(255, 149, 0, 0.1) !important;
}
body .apple-toast-warning.layui-layer-msg .layui-layer-ico::before,
body .apple-toast-warning.layui-layer-hui .layui-layer-ico::before { color: #fff; }

/* Apple 风格：加载中 - 蓝色毛玻璃 */
body .apple-toast-loading.layui-layer-msg,
body .apple-toast-loading.layui-layer-hui {
    background: rgba(0, 122, 255, 0.95) !important;
    color: #fff !important;
    border-color: rgba(0, 122, 255, 0.6) !important;
    box-shadow: 0 12px 32px rgba(0, 122, 255, 0.32), 0 0 0 1px rgba(0, 122, 255, 0.1) !important;
}
body .apple-toast-loading.layui-layer-msg .layui-layer-ico::before,
body .apple-toast-loading.layui-layer-hui .layui-layer-ico::before { color: #fff; }

/* Layer.js 加载层 */
.layui-layer-loading {
    z-index: calc(var(--z-layer) + 1000) !important;
}

/* SweetAlert2 弹窗 */
.swal2-container {
    z-index: calc(var(--z-layer) + 2000) !important;
}
.swal2-popup {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(40px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.02) !important;
}
.swal2-backdrop-show {
    background: rgba(0, 0, 0, 0.3) !important;
    z-index: calc(var(--z-layer) + 1999) !important;
}

.swal2-title {
    color: #1d1d1f !important;
    font-weight: 700 !important;
}

.swal2-html-container {
    color: #86868b !important;
}

.swal2-confirm {
    background: linear-gradient(180deg, #007aff 0%, #0061cc 100%) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3) !important;
    font-weight: 600 !important;
}

.swal2-cancel {
    background: #f1f5f9 !important;
    border-radius: 14px !important;
    color: #1d1d1f !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   自定义弹窗层级统一（各页面 recharge-modal / search-modal / 任何自定义 modal 都适用）
   ========================================================================== */

/* 通用：任何自定义弹窗的遮罩层（点击外部关闭的半透明层）*/
.recharge-modal-mask,
.modal-mask,
.modal-overlay,
.search-modal-mask,
.custom-modal-mask {
    z-index: var(--z-overlay) !important;
}

/* 通用：任何自定义弹窗内容框（实际可见的卡片）*/
.recharge-modal,
.recharge-modal-content,
.modal-content,
.modal-container,
.search-modal,
.search-modal-content,
.custom-modal {
    z-index: var(--z-modal) !important;
}

/* ==========================================================================
   移动端弹窗位置安全修正（避免与 top-bar(60px) 和 bottom-nav(70px) 冲突）
   - 关键修复：以 top:50% + transform:translateY(-50%) 真正垂直居中
     替代原先的 margin-top（margin-top 会让 layer.js 的绝对定位偏移，导致弹窗
     在手机端被推到屏幕底部）。保留最大高度约束避免遮挡顶/底导航。
   ========================================================================== */
@media (max-width: 768px) {
    .layui-layer,
    .layui-layer-page,
    .layui-layer-dialog,
    .layui-layer-iframe {
        /* 真正垂直居中，覆盖 layer.js 计算的 top */
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        /* 上下各留安全距离，避免遮挡 top-bar / bottom-nav */
        max-height: calc(100vh - var(--topbar-height) - var(--bottomnav-height) - 24px) !important;
        margin: 0 !important;
    }

    /* 自定义弹窗移动端安全间距 */
    .recharge-modal,
    .modal-content,
    .custom-modal {
        margin-top: calc(var(--topbar-height) + 12px) !important;
        margin-bottom: calc(var(--bottomnav-height) + 12px) !important;
    }

    /* Toast/msg 水平居中 + 中上位置显示（类似 iOS 通知，避开底部导航与中心弹窗重叠）*/
    .layui-layer-msg,
    .layui-layer-msg.layui-layer-hui,
    body .layui-layer-msg,
    body .layui-layer-msg.layui-layer-hui,
    body .apple-toast.layui-layer-msg,
    body .apple-toast.layui-layer-hui,
    body .apple-toast-success.layui-layer-msg,
    body .apple-toast-success.layui-layer-hui,
    body .apple-toast-error.layui-layer-msg,
    body .apple-toast-error.layui-layer-hui,
    body .apple-toast-warning.layui-layer-msg,
    body .apple-toast-warning.layui-layer-hui,
    body .apple-toast-loading.layui-layer-msg,
    body .apple-toast-loading.layui-layer-hui {
        top: 20% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translateX(-50%) translateY(0) !important;
        -webkit-transform: translateX(-50%) translateY(0) !important;
        max-width: calc(100% - 32px) !important;
        margin: 0 !important;
        animation: layerMsgSlideIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    /* 确保 msg 的 icon 提示也保持中上 */
    .layui-layer-msg .layui-layer-content,
    body .apple-toast.layui-layer-msg .layui-layer-content {
        transform: none !important;
    }
}

/* ==========================================================================
   公告弹窗（PureAnnouncementModal）Apple 液态玻璃风格全量覆盖
   数据库 gonggao 中的弹窗样式为原生风格（红按钮、白背景、方卡片）
   这里用 !important 统一为 Apple 液态玻璃 + 胶囊按钮 + 毛玻璃遮罩
   ========================================================================== */

/* ---------- 遮罩 ---------- */
.pure-announcement-modal-overlay {
    height: 100vh !important;
    max-height: 100vh !important;
    z-index: 9999 !important;
    align-items: center !important;
    justify-content: center !important;
    overflow-y: auto !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    background: rgba(15, 23, 42, 0.45) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    animation: pureFadeIn 0.3s ease both !important;
}
@keyframes pureFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---------- 卡片主体（液态玻璃） ---------- */
.pure-announcement-modal-content {
    position: relative !important;
    width: 520px !important;
    max-width: 100% !important;
    max-height: calc(100vh - 48px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin: 0 auto !important;
    padding: 24px 22px !important;
    box-sizing: border-box !important;
    /* 液态玻璃核心：半透明白 + 背景模糊 + 细边 + 双层阴影 + inset 高光 */
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.92) 0%,
            rgba(250, 252, 255, 0.95) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.75) !important;
    border-radius: 28px !important;
    box-shadow:
        0 32px 64px -16px rgba(15, 23, 42, 0.22),
        0 0 0 1px rgba(15, 23, 42, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    animation: pureScaleIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}
@keyframes pureScaleIn {
    from { opacity: 0; transform: scale(0.94) translateY(8px); }
    to   { opacity: 1; transform: scale(1)   translateY(0); }
}
/* 卡片顶部柔和光晕（液态玻璃经典点缀） */
.pure-announcement-modal-content::before {
    content: "" !important;
    position: absolute !important;
    top: -40px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 260px !important;
    height: 120px !important;
    background: radial-gradient(circle, rgba(0, 122, 255, 0.22) 0%, rgba(0, 0, 0, 0) 70%) !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* ---------- 顶部区域：标题 + 每日开关 ---------- */
.pure-header-buttons {
    position: relative !important;
    display: flex !important;
    justify-content: flex-end !important;
    margin: -4px 0 6px !important;
}

/* 每日显示开关（胶囊样式，类似 iOS 开关） */
.pure-daily-toggle-switch {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 28px !important;
    padding: 0 12px !important;
    background: rgba(241, 245, 249, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 14px !important;
    cursor: pointer !important;
    color: #606266 !important;
    font-size: 12px !important;
    transition: all 0.2s ease !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
}
.pure-daily-toggle-switch:hover {
    background: rgba(0, 122, 255, 0.08) !important;
    color: #007aff !important;
}
.pure-toggle-indicator {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #c7cbd2 !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}
.pure-daily-toggle-switch:active { transform: scale(0.97); }

/* ---------- 标题 ---------- */
.pure-modal-header {
    text-align: center !important;
    margin: 8px 0 18px !important;
}
.pure-modal-title {
    margin: 0 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1d1d1f !important;
    letter-spacing: 0.2px !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif !important;
}

/* ---------- 公告列表 ---------- */
.pure-announcement-content {
    padding: 0 !important;
}
.pure-announcement-item {
    padding: 14px 16px !important;
    margin-bottom: 12px !important;
    background: rgba(255, 255, 255, 0.75) !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    border-radius: 18px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.pure-announcement-item:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 22px -10px rgba(15, 23, 42, 0.12) !important;
}
.pure-announcement-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 8px !important;
}
.pure-announcement-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.pure-announcement-title::before {
    content: "" !important;
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #007aff !important;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15) !important;
}
.pure-announcement-time {
    font-size: 12px !important;
    color: #94a3b8 !important;
    background: rgba(148, 163, 184, 0.1) !important;
    padding: 2px 10px !important;
    border-radius: 999px !important;
}
.pure-announcement-text {
    font-size: 13.5px !important;
    line-height: 1.7 !important;
    color: #475569 !important;
    word-break: break-word !important;
}

/* ---------- 查看更多按钮 ---------- */
.pure-toggle-announcements-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    padding: 10px 0 !important;
    margin-top: 8px !important;
    background: transparent !important;
    border: none !important;
    color: #007aff !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border-radius: 14px !important;
}
.pure-toggle-announcements-btn:hover {
    background: rgba(0, 122, 255, 0.07) !important;
}
.pure-toggle-announcements-btn svg {
    width: 14px !important;
    height: 14px !important;
    transition: transform 0.25s ease !important;
}

/* ---------- 关闭按钮（覆盖内联红色渐变 → Apple 蓝色胶囊） ---------- */
.pure-announcement-modal-content button[onclick*="PureAnnouncementModal.close"],
.pure-announcement-modal-content div[style*="margin: 1.5rem 0"] button {
    padding: 0 !important;
    width: 100% !important;
    height: 48px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, #007aff 0%, #0061cc 100%) !important;
    box-shadow: 0 6px 16px -4px rgba(0, 122, 255, 0.45) !important;
    transition: transform 0.15s ease, box-shadow 0.2s ease !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 20px 0 0 !important;
    /* 去掉 onmouseover/onmouseout 内联效果 */
    transform: none !important;
}
.pure-announcement-modal-content button[onclick*="PureAnnouncementModal.close"]:hover,
.pure-announcement-modal-content div[style*="margin: 1.5rem 0"] button:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 22px -6px rgba(0, 122, 255, 0.5) !important;
}
.pure-announcement-modal-content button[onclick*="PureAnnouncementModal.close"]:active,
.pure-announcement-modal-content div[style*="margin: 1.5rem 0"] button:active {
    transform: scale(0.98) translateY(0) !important;
    box-shadow: 0 3px 10px -2px rgba(0, 122, 255, 0.4) !important;
}
.pure-announcement-modal-content button[onclick*="PureAnnouncementModal.close"] svg,
.pure-announcement-modal-content div[style*="margin: 1.5rem 0"] button svg {
    width: 18px !important;
    height: 18px !important;
}

/* ---------- 导航按钮组（微信/QQ客服） ---------- */
.pure-navigation-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-top: 14px !important;
    padding: 0 !important;
}
.pure-nav-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 12px 0 !important;
    border-radius: 16px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    border: none !important;
}
.pure-nav-button svg {
    width: 15px !important;
    height: 15px !important;
}
/* 微信客服按钮（绿色系） */
.pure-nav-button.pure-suyun {
    background: linear-gradient(180deg, #34c759 0%, #28a745 100%) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px -6px rgba(52, 199, 89, 0.5) !important;
}
.pure-nav-button.pure-suyun:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 22px -6px rgba(52, 199, 89, 0.55) !important;
}
/* QQ 客服按钮（蓝色系） */
.pure-nav-button.pure-agent {
    background: linear-gradient(180deg, #12b7f5 0%, #0e9fd6 100%) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px -6px rgba(18, 183, 245, 0.5) !important;
}
.pure-nav-button.pure-agent:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 22px -6px rgba(18, 183, 245, 0.55) !important;
}

/* ---------- 移动端适配 ---------- */
@media (max-width: 768px) {
    .pure-announcement-modal-overlay {
        padding: 12px 10px !important;
    }
    .pure-announcement-modal-content {
        width: 100% !important;
        max-width: 440px !important;
        padding: 22px 18px !important;
        border-radius: 24px !important;
    }
    .pure-modal-title { font-size: 18px !important; }
    .pure-announcement-item { padding: 12px 14px !important; }
    .pure-announcement-text { font-size: 13px !important; line-height: 1.65 !important; }
    .pure-announcement-modal-content button[onclick*="PureAnnouncementModal.close"],
    .pure-announcement-modal-content div[style*="margin: 1.5rem 0"] button {
        height: 46px !important;
        font-size: 15px !important;
    }
}

/* ==========================================================================
   16. 参考站风格：版心栅格 + 核心布局组件（xin.ioskfz.cn 同款）
   ========================================================================== */

/* --- 16.1 页面版心 --- */
.page-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 16px 100px;
    box-sizing: border-box;
}
@media (min-width: 1024px) {
    .page-container {
        padding: 32px 24px 120px;
    }
}

/* 主容器同时兼容旧类名 */
.dashboard-container,
.ios-device-list,
.finance-dashboard,
.appstore-light,
.agent-dashboard,
.ios-settings {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 16px 100px;
    box-sizing: border-box;
}
@media (min-width: 1024px) {
    .dashboard-container,
    .ios-device-list,
    .finance-dashboard,
    .appstore-light,
    .agent-dashboard,
    .ios-settings {
        padding: 32px 24px 120px;
    }
}

/* --- 16.2 公告横幅 --- */
.notice-banner {
    position: relative;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    padding: 16px 20px;
    margin-bottom: 20px;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.02);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    /* 限制公告横幅最大高度，避免超长内容撑爆页面布局 */
    max-height: 180px;
    overflow: hidden;
}
.notice-banner-icon {
    flex-shrink: 0;
    width: 28px; height: 28px;
    background: linear-gradient(180deg, #007aff 0%, #0061cc 100%);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}
.notice-banner-body {
    flex: 1;
    min-width: 0;
}
.notice-banner-title {
    font-size: 14px;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.notice-banner-title .page-count {
    font-size: 12px;
    color: #86868b;
    font-weight: 500;
}
.notice-banner-content {
    font-size: 13px;
    color: #606266;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    /* 允许超长公告内容在横幅内滚动 */
    max-height: 140px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.notice-banner-close {
    flex-shrink: 0;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    color: #86868b;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s;
    background: transparent;
    border: none;
    font-size: 14px;
}
.notice-banner-close:hover {
    background: #f1f5f9;
    color: #1d1d1f;
}

/* --- 16.3 欢迎头（账号余额 + 统计）--- */
.welcome-header {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    padding: 28px 24px;
    margin-bottom: 20px;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.02);
}
.welcome-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}
.welcome-title {
    font-size: 24px;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.welcome-title .username {
    background: linear-gradient(180deg, #007aff 0%, #0061cc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.welcome-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.welcome-actions .wa-btn {
    padding: 8px 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s;
}
.wa-btn-primary {
    background: linear-gradient(180deg, #007aff 0%, #0061cc 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}
.wa-btn-primary:hover {
    box-shadow: 0 6px 18px rgba(0, 122, 255, 0.38);
    transform: translateY(-1px);
}
.wa-btn-ghost {
    background: #f1f5f9;
    color: #1d1d1f;
}
.wa-btn-ghost:hover {
    background: #e2e8f0;
}
.wa-btn-success {
    background: linear-gradient(180deg, #34C759 0%, #248A3D 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(52, 199, 89, 0.28);
}
.wa-btn-success:hover {
    box-shadow: 0 6px 18px rgba(52, 199, 89, 0.36);
    transform: translateY(-1px);
}
.wa-btn-danger {
    background: linear-gradient(180deg, #ff3b30 0%, #d70015 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(255, 59, 48, 0.28);
}
.wa-btn-danger:hover {
    box-shadow: 0 6px 18px rgba(255, 59, 48, 0.36);
    transform: translateY(-1px);
}
.wa-btn-warning {
    background: linear-gradient(180deg, #ff9500 0%, #c93400 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(255, 149, 0, 0.28);
}
.wa-btn-warning:hover {
    box-shadow: 0 6px 18px rgba(255, 149, 0, 0.36);
    transform: translateY(-1px);
}

/* 余额行 */
.balance-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 16px;
}
.balance-label {
    font-size: 14px;
    color: #86868b;
    font-weight: 500;
}
.balance-amount {
    font-size: 32px;
    font-weight: 800;
    color: #1d1d1f;
    letter-spacing: -0.03em;
    line-height: 1;
}
.balance-currency {
    font-size: 18px;
    color: #606266;
    font-weight: 700;
}
.today-consume {
    margin-left: auto;
    font-size: 13px;
    color: #86868b;
    display: flex;
    align-items: center;
    gap: 6px;
}
.today-consume .consume-value {
    color: #1d1d1f;
    font-weight: 700;
}

/* 统计小卡 */
.mini-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 16px;
}
.mini-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    padding: 8px 4px;
}
.mini-stat-value {
    font-size: 20px;
    font-weight: 800;
    color: #1d1d1f;
    line-height: 1;
}
.mini-stat-label {
    font-size: 12px;
    color: #86868b;
    font-weight: 500;
}

/* --- 16.4 周期 Tab (1D / 3D / 7D / 15D / 30D) --- */
.duration-tabs {
    display: flex;
    gap: 6px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    margin-bottom: 20px;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.02);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.duration-tab {
    flex: 1;
    min-width: 56px;
    padding: 10px 12px;
    border-radius: 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #606266;
    transition: all 0.15s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.duration-tab:hover {
    background: #f1f5f9;
    color: #1d1d1f;
}
.duration-tab.active {
    background: linear-gradient(180deg, #007aff 0%, #0061cc 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}
.duration-tab .hot-tag {
    display: inline-block;
    padding: 1px 5px;
    font-size: 10px;
    font-weight: 700;
    background: #ff6b45;
    color: #fff;
    border-radius: 4px;
    line-height: 1.2;
}

/* --- 16.5 两列卡片组：近7日设备 + 更多功能 --- */
.two-col-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
@media (min-width: 768px) {
    .two-col-grid {
        grid-template-columns: 2fr 1fr;
    }
}

.data-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    min-height: 240px;
}
.data-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.data-card-title {
    font-size: 16px;
    font-weight: 700;
    color: #1d1d1f;
    display: flex;
    align-items: center;
    gap: 8px;
}
.data-card-title .title-emoji {
    font-size: 18px;
}
.data-card-value {
    font-size: 44px;
    font-weight: 800;
    color: #1d1d1f;
    line-height: 1;
    letter-spacing: -0.04em;
    flex: 1;
    display: flex;
    align-items: flex-end;
    margin-bottom: 8px;
}
.data-card-value-unit {
    font-size: 16px;
    font-weight: 600;
    color: #86868b;
    margin-left: 6px;
    padding-bottom: 6px;
}
.data-card-foot {
    font-size: 13px;
    color: #86868b;
    line-height: 1.5;
}

.quick-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    min-height: 240px;
}
.quick-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.quick-card-label {
    font-size: 11px;
    color: #86868b;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.quick-card-title {
    font-size: 16px;
    font-weight: 700;
    color: #1d1d1f;
    line-height: 1.4;
    margin-bottom: 6px;
}
.quick-card-title .highlight {
    background: linear-gradient(180deg, #007aff 0%, #0061cc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}
.quick-card-sub {
    font-size: 13px;
    color: #86868b;
    line-height: 1.5;
    flex: 1;
    margin-bottom: 16px;
}
.quick-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    background: linear-gradient(180deg, #007aff 0%, #0061cc 100%);
    color: #fff;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
}
.quick-card-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 122, 255, 0.38);
    color: #fff;
}

/* --- 16.6 Quick Actions 常用功能（图标+文字网格）--- */
.section-block {
    margin-bottom: 20px;
}
.section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding: 0 2px;
}
.section-title {
    font-size: 18px;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.01em;
}
.section-label {
    font-size: 11px;
    color: #86868b;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.qa-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
@media (min-width: 640px) {
    .qa-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (min-width: 1024px) {
    .qa-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.qa-item {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    padding: 18px 14px;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.01);
    text-align: left;
    cursor: pointer;
}
.qa-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 48px -10px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.02);
}
.qa-icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    color: #fff;
    flex-shrink: 0;
}
.qa-icon.qa-blue { background: linear-gradient(180deg, #007aff, #0061cc); }
.qa-icon.qa-purple { background: linear-gradient(180deg, #7c5cff, #5b3ff5); }
.qa-icon.qa-green { background: linear-gradient(180deg, #26a57b, #148763); }
.qa-icon.qa-orange { background: linear-gradient(180deg, #ff9b6b, #ff6b45); }
.qa-icon.qa-pink { background: linear-gradient(180deg, #ff6482, #e24864); }
.qa-icon.qa-teal { background: linear-gradient(180deg, #14b8a6, #0d9488); }
.qa-icon.qa-yellow { background: linear-gradient(180deg, #f2a90c, #d98e00); }
.qa-icon.qa-red { background: linear-gradient(180deg, #e8463a, #c9382f); }
.qa-icon.qa-indigo { background: linear-gradient(180deg, #6366f1, #4f46e5); }

.qa-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.qa-name {
    font-size: 14px;
    font-weight: 700;
    color: #1d1d1f;
    line-height: 1.2;
}
.qa-desc {
    font-size: 12px;
    color: #86868b;
    font-weight: 500;
    line-height: 1.3;
}

/* --- 16.7 More Services 增值服务 --- */
.ms-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
@media (min-width: 768px) {
    .ms-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ms-item {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    padding: 20px;
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.01);
    cursor: pointer;
    position: relative;
}
.ms-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 48px -10px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.02);
}
.ms-hot {
    position: absolute;
    top: 14px; right: 14px;
    padding: 3px 8px;
    background: linear-gradient(180deg, #ff6b45, #e24864);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 6px;
    letter-spacing: 0.02em;
}
.ms-icon {
    width: 44px; height: 44px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    color: #fff;
    flex-shrink: 0;
}
.ms-icon.ms-purple { background: linear-gradient(180deg, #9570ff, #7c5cff); }
.ms-icon.ms-blue { background: linear-gradient(180deg, #5b92ff, #2f74ff); }
.ms-icon.ms-green { background: linear-gradient(180deg, #34d399, #10b981); }
.ms-icon.ms-amber { background: linear-gradient(180deg, #f2a90c, #d98e00); }
.ms-icon.ms-teal { background: linear-gradient(180deg, #2dd4bf, #14b8a6); }
.ms-icon.ms-rose { background: linear-gradient(180deg, #fb7185, #e24864); }

.ms-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ms-title {
    font-size: 15px;
    font-weight: 700;
    color: #1d1d1f;
    line-height: 1.3;
}
.ms-title-hot {
    display: inline-block;
    margin-left: 6px;
    color: #ff6b45;
    font-size: 12px;
}
.ms-desc {
    font-size: 13px;
    color: #86868b;
    line-height: 1.5;
}

/* --- 16.8 状态 Tab（设备列表用）--- */
.status-tabs {
    display: flex;
    gap: 6px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    margin-bottom: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.01);
}
.status-tab {
    flex-shrink: 0;
    padding: 8px 16px;
    border-radius: 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #606266;
    transition: all 0.15s;
    white-space: nowrap;
}
.status-tab:hover {
    background: #f1f5f9;
    color: #1d1d1f;
}
.status-tab.active {
    background: linear-gradient(180deg, #007aff 0%, #0061cc 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.25);
}
.status-tab .count {
    margin-left: 4px;
    font-size: 11px;
    opacity: 0.8;
}

/* --- 16.9 筛选搜索行 --- */
.filter-row {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    align-items: center;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.01);
}
.filter-row .search-input {
    flex: 1;
    min-width: 200px;
    height: 40px;
    padding: 0 14px;
    background: #f1f5f9;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 14px;
    color: #1d1d1f;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}
.filter-row .search-input:focus {
    border-color: #007aff;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12);
}
.filter-row .btn-sm {
    height: 40px;
    padding: 0 18px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s;
}
.filter-row .btn-sm.primary {
    background: linear-gradient(180deg, #007aff 0%, #0061cc 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.25);
}
.filter-row .btn-sm.primary:hover {
    box-shadow: 0 6px 18px rgba(0, 122, 255, 0.35);
    transform: translateY(-1px);
}
.filter-row .btn-sm.secondary {
    background: #f1f5f9;
    color: #1d1d1f;
}
.filter-row .btn-sm.secondary:hover {
    background: #e2e8f0;
}

/* --- 16.10 设备/应用卡片（列表项）--- */
.list-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    padding: 16px 18px;
    margin-bottom: 10px;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.01);
    transition: transform 0.15s, box-shadow 0.15s;
}
.list-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 24px 48px -10px rgba(0, 0, 0, 0.09), 0 0 0 1px rgba(0, 0, 0, 0.02);
}
.list-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}
.list-card-main {
    flex: 1;
    min-width: 0;
}
.list-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #1d1d1f;
    line-height: 1.3;
    margin-bottom: 4px;
    word-break: break-all;
}
.list-card-sub {
    font-size: 12px;
    color: #86868b;
    line-height: 1.5;
}
.list-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.badge {
    display: inline-block;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 6px;
    line-height: 1.3;
}
.badge-success { background: rgba(38, 165, 123, 0.12); color: #148763; }
.badge-warning { background: rgba(254, 169, 0, 0.14); color: #b57b00; }
.badge-danger  { background: rgba(232, 70, 58, 0.12); color: #c9382f; }
.badge-info    { background: rgba(0, 122, 255, 0.12); color: #0061cc; }
.badge-default { background: #f1f5f9; color: #606266; }
.badge-hot     { background: linear-gradient(180deg, #ff6b45, #e24864); color: #fff; }
/* 外部证书：中性灰色，与设备类型徽章区分 */
.badge-external { background: #f1f5f9 !important; background-color: #f1f5f9 !important; color: #606266 !important; }

/* 版本类型徽章：精致 pill 风格 + 左侧圆点指示器 */
.shtype-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    line-height: 1.3;
    padding: 4px 10px;
}
.shtype-badge::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    margin-right: 6px;
    background: currentColor;
    opacity: 0.7;
    flex-shrink: 0;
}
.shtype-0 { background: rgba(52, 199, 89, 0.1); color: #1f7a3d; }
.shtype-1 { background: rgba(0, 122, 255, 0.1); color: #0061cc; }
.shtype-2 { background: rgba(88, 86, 214, 0.1); color: #5b3ff5; }
.shtype-3 { background: rgba(255, 149, 0, 0.12); color: #b56500; }
.shtype-4 { background: rgba(142, 142, 147, 0.12); color: #55555a; }
.shtype-6 { background: rgba(255, 59, 48, 0.1); color: #c9382f; }

.list-card-meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 14px;
    padding: 10px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 10px;
}
.meta-item {
    font-size: 12px;
    color: #606266;
    display: flex;
    gap: 6px;
}
.meta-item .meta-label { color: #86868b; flex-shrink: 0; }
.meta-item .meta-value { color: #1d1d1f; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.list-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.list-card-actions .btn-inline {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s;
}
.btn-inline.primary {
    background: linear-gradient(180deg, #007aff 0%, #0061cc 100%);
    color: #fff;
    box-shadow: 0 3px 8px rgba(0, 122, 255, 0.28);
}
.btn-inline.primary:hover { box-shadow: 0 5px 14px rgba(0, 122, 255, 0.36); }
.btn-inline.secondary { background: #f1f5f9; color: #1d1d1f; }
.btn-inline.secondary:hover { background: #e2e8f0; }
.btn-inline.success { background: rgba(38, 165, 123, 0.12); color: #148763; }
.btn-inline.warning { background: rgba(254, 169, 0, 0.14); color: #b57b00; }
.btn-inline.danger  { background: rgba(232, 70, 58, 0.12); color: #c9382f; }

/* 进度条 */
.progress-row {
    margin-bottom: 10px;
}
.progress-label {
    font-size: 11px;
    color: #86868b;
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
}
.progress-bar {
    height: 6px;
    background: #f1f5f9;
    border-radius: 999px;
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.4s;
}
.progress-fill.success { background: linear-gradient(90deg, #26a57b, #10b981); }
.progress-fill.warning { background: linear-gradient(90deg, #f2a90c, #fea900); }
.progress-fill.danger  { background: linear-gradient(90deg, #e8463a, #ff6b45); }

/* --- 16.11 空状态 --- */
.empty-state {
    padding: 60px 20px;
    text-align: center;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.01);
}
.empty-state .empty-icon {
    font-size: 56px;
    margin-bottom: 14px;
    opacity: 0.6;
}
.empty-state .empty-title {
    font-size: 17px;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 6px;
}
.empty-state .empty-desc {
    font-size: 13px;
    color: #86868b;
    margin-bottom: 20px;
}
.empty-state .empty-action-btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    background: linear-gradient(180deg, #007aff 0%, #0061cc 100%);
    color: #fff;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}

/* --- 16.12 交易记录（钱包页）--- */
.tx-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 18px;
    margin-bottom: 8px;
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.01);
}
.tx-icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}
.tx-icon.income { background: rgba(38, 165, 123, 0.12); color: #148763; }
.tx-icon.expense { background: rgba(0, 122, 255, 0.12); color: #0061cc; }
.tx-body { flex: 1; min-width: 0; }
.tx-desc {
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tx-time {
    font-size: 11px;
    color: #86868b;
}
.tx-amount {
    flex-shrink: 0;
    font-size: 16px;
    font-weight: 800;
}
.tx-amount.positive { color: #148763; }
.tx-amount.negative { color: #1d1d1f; }


/* ==========================================================================
   17. 参考站风格公告组件（终端卡片 + macOS 玻璃弹窗）
   ========================================================================== */

/* --- 17.1 首页公告终端卡片 --- */
.notice-terminal-card {
    width: 100%;
    margin-bottom: 16px;
}
.notice-terminal-wrap {
    display: flex;
    flex-direction: column;
    position: relative;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgb(220, 223, 230);
    border-radius: 10px;
    overflow: hidden;
    z-index: 10;
}
.notice-terminal {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.notice-terminal-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    height: 40px;
    background: linear-gradient(135deg, rgba(211, 227, 246, 0.6) 0%, rgb(240, 242, 245) 100%);
    margin: 0;
}
.notice-terminal-title {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 8px;
    margin: 0;
    color: rgb(48, 49, 51);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
}
.notice-terminal-title svg {
    display: block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #007aff;
}
.notice-terminal-open {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgb(220, 223, 230);
    border-radius: 8px;
    color: rgb(96, 98, 102);
    font-size: 12px;
    line-height: 16px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.notice-terminal-open:hover {
    background: rgba(0, 122, 255, 0.08);
    border-color: rgba(0, 122, 255, 0.25);
    color: #007aff;
}
.notice-terminal-body {
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    background: linear-gradient(rgba(240, 247, 255, 0.8) 0%, rgb(255, 255, 255) 100%);
    overflow: hidden;
    color: rgb(48, 49, 51);
    line-height: 19px;
    white-space: nowrap;
}
.notice-terminal-pre {
    display: flex;
    align-items: center;
    flex-direction: row;
    padding: 0;
    margin: 0;
    font-size: 13px;
    line-height: 19px;
    overflow: hidden;
    white-space: nowrap;
    font-family: -webkit-system-flex, "SF Mono", "Fira Code", monospace;
}
.notice-terminal-prefix {
    display: inline-block;
    color: rgb(144, 147, 153);
    white-space: pre;
    flex-shrink: 0;
}
.notice-terminal-highlight {
    display: inline-block;
    color: rgb(68, 108, 229);
    font-weight: 500;
    white-space: pre;
    flex-shrink: 0;
}
.notice-terminal-cmd {
    display: flex;
    align-items: center;
    position: relative;
    white-space: pre;
    overflow: hidden;
}
.notice-terminal-typed {
    display: inline-block;
    color: rgb(48, 49, 51);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notice-terminal-caret {
    display: inline-block;
    width: 2px;
    height: 14px;
    margin-left: 2px;
    background: rgb(48, 49, 51);
    flex-shrink: 0;
    animation: nt-cursor-blink 0.5s steps(1) 0s infinite alternate;
}
@keyframes nt-cursor-blink {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

/* --- 17.2 macOS 玻璃风格公告弹窗 --- */
/*
 * #rawGonggao 仅隐藏原始 gonggao 中冗余的文档结构与 cert 内容，
 * 避免 820 行内联样式/嵌套 <html> 影响主页面布局与菜单点击。
 *
 * 公告弹窗 DOM（#layoutGlassMask / #layoutGlassWrap）会在页面加载时
 * 由 index.html 中的脚本移出 #rawGonggao，挂到 document.body，
 * 因此不受这里的 display:none 影响，仍可由 .lg-show 控制显示。
 */
#rawGonggao {
    display: none !important;
}

.layout-glass-mask {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.layout-glass-mask.lg-show {
    opacity: 1;
    visibility: visible;
}
.layout-glass-wrap {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.92);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.layout-glass-wrap.lg-show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}
.layout-glass-card {
    position: relative;
    width: 460px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 48px);
    background: linear-gradient(180deg,
                rgba(255, 255, 255, 0.92) 0%,
                rgba(250, 252, 255, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow:
        0 30px 60px -15px rgba(15, 23, 42, 0.18),
        0 0 0 1px rgba(15, 23, 42, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border-radius: 28px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}
.layout-glass-glow {
    position: absolute;
    width: 240px;
    height: 140px;
    z-index: 1;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(rgba(0, 122, 255, 0.2) 0%, rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
}
.layout-glass-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    flex-shrink: 0;
}
.layout-dot-group {
    display: flex;
    align-items: center;
    gap: 7px;
}
.ldot {
    display: block;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    transition: filter 0.15s;
}
.ldot-red    { background: rgb(255, 95, 87); cursor: pointer; }
.ldot-yellow { background: rgb(254, 188, 46); }
.ldot-green  { background: rgb(40, 200, 64); }
.ldot-red:hover { filter: brightness(0.92); }

.layout-glass-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 220px;
    color: rgb(26, 26, 26);
    font-size: 15px;
    font-weight: 600;
    line-height: 22px;
    white-space: nowrap;
}
.layout-glass-counter {
    display: block;
    padding: 3px 10px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 20px;
    color: rgba(0, 0, 0, 0.4);
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap;
}

/* ==========================================================================
   苹果风格确认弹窗（会员中心保存按钮弹窗专用）
   ========================================================================== */
.apple-confirm-skin.layui-layer-page,
.apple-confirm-skin.layui-layer,
.apple-confirm-skin {
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(40px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    box-shadow: 0 24px 60px -14px rgba(0, 0, 0, 0.25),
                0 12px 32px -8px rgba(0, 0, 0, 0.12),
                0 0 0 1px rgba(0, 0, 0, 0.03) !important;
    overflow: hidden !important;
    width: auto !important;
    min-width: 290px !important;
    max-width: calc(100vw - 32px) !important;
}

/* 标题：iOS 风格居中加粗 + 浅分隔 */
.apple-confirm-skin .layui-layer-title {
    text-align: center !important;
    padding: 18px 56px 14px !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    color: #1d1d1f !important;
    border-bottom: 0.5px solid rgba(60, 60, 67, 0.12) !important;
    background: transparent !important;
    height: auto !important;
    line-height: 1.4 !important;
}

/* 关闭按钮：更细腻的灰底圆角 */
.apple-confirm-skin .layui-layer-setwin {
    top: 14px !important;
    right: 14px !important;
}
.apple-confirm-skin .layui-layer-setwin a,
.apple-confirm-skin .layui-layer-setwin .layui-layer-close {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: rgba(120, 120, 128, 0.12) !important;
}
.apple-confirm-skin .layui-layer-setwin a:hover,
.apple-confirm-skin .layui-layer-setwin .layui-layer-close:hover {
    background: rgba(120, 120, 128, 0.20) !important;
}
.apple-confirm-skin .layui-layer-setwin .layui-layer-close::after {
    font-size: 16px !important;
    color: rgba(60, 60, 67, 0.6) !important;
}

/* 内容区：iOS 风格字体与居中（带 icon 与文字对齐） */
.apple-confirm-skin .layui-layer-content {
    padding: 18px 22px 10px !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: #3c3c43 !important;
    text-align: center !important;
}

/* layer icon 重新着色：info/question 图标蓝色调 */
.apple-confirm-skin .layui-layer-content .layui-layer-ico {
    background: none !important;
    width: 28px !important;
    height: 28px !important;
    margin-right: 10px !important;
    position: relative;
    vertical-align: middle;
    display: inline-block !important;
}
.apple-confirm-skin .layui-layer-content .layui-layer-ico3::before,
.apple-confirm-skin .layui-layer-content .layui-layer-ico::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(90, 200, 250, 0.9) 0%, rgba(0, 122, 255, 0.9) 55%, rgba(0, 88, 204, 0.95) 100%);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.35);
}
.apple-confirm-skin .layui-layer-content .layui-layer-ico::after {
    content: "?";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
}

/* 按钮区：iOS 风格双按钮横向并排，按钮等高圆角 + 分割线 */
.apple-confirm-skin .layui-layer-btn {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 18px 18px !important;
    border-top: 0.5px solid rgba(60, 60, 67, 0.08) !important;
    margin: 8px 0 0 !important;
    background: transparent !important;
}

.apple-confirm-skin .layui-layer-btn a {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 42px !important;
    line-height: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 14px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-align: center !important;
    border: none !important;
    transition: all 0.15s ease !important;
    letter-spacing: -0.005em !important;
}

/* 主按钮：iOS 蓝渐变 */
.apple-confirm-skin .layui-layer-btn .layui-layer-btn0 {
    background: linear-gradient(180deg, #0A84FF 0%, #007AFF 45%, #0066D6 100%) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(10, 132, 255, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
.apple-confirm-skin .layui-layer-btn .layui-layer-btn0:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 20px rgba(10, 132, 255, 0.42),
                inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
    filter: brightness(1.03);
}
.apple-confirm-skin .layui-layer-btn .layui-layer-btn0:active {
    transform: translateY(0) scale(0.985) !important;
    filter: brightness(0.97);
}

/* 次按钮：浅灰色毛玻璃 */
.apple-confirm-skin .layui-layer-btn .layui-layer-btn1 {
    background: rgba(120, 120, 128, 0.08) !important;
    color: #007AFF !important;
}
.apple-confirm-skin .layui-layer-btn .layui-layer-btn1:hover {
    background: rgba(120, 120, 128, 0.14) !important;
}
.apple-confirm-skin .layui-layer-btn .layui-layer-btn1:active {
    background: rgba(120, 120, 128, 0.20) !important;
    transform: scale(0.985);
}

/* 手机端：弹窗更紧凑、按钮圆角略小 */
@media (max-width: 768px) {
    .apple-confirm-skin.layui-layer-page,
    .apple-confirm-skin.layui-layer,
    .apple-confirm-skin {
        min-width: 0 !important;
        width: calc(100vw - 48px) !important;
        max-width: 380px !important;
        border-radius: 20px !important;
    }
    .apple-confirm-skin .layui-layer-title {
        padding: 16px 50px 12px !important;
        font-size: 16px !important;
    }
    .apple-confirm-skin .layui-layer-content {
        padding: 14px 18px 8px !important;
        font-size: 14px !important;
    }
    .apple-confirm-skin .layui-layer-btn {
        padding: 10px 14px 16px !important;
        gap: 8px !important;
    }
    .apple-confirm-skin .layui-layer-btn a {
        height: 40px !important;
        line-height: 40px !important;
        border-radius: 12px !important;
        font-size: 14px !important;
    }
}
.layout-glass-body {
    position: relative;
    z-index: 2;
    padding: 8px 20px 12px;
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.layout-glass-content {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.72;
    color: rgb(60, 60, 67);
    white-space: pre-wrap;
    word-break: break-word;
}
.layout-glass-body::-webkit-scrollbar { width: 5px; }
.layout-glass-body::-webkit-scrollbar-track { background: transparent; }
.layout-glass-body::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}
.layout-glass-progress {
    height: 2px;
    padding: 0 20px;
    flex-shrink: 0;
}
.layout-glass-progress-bar {
    display: block;
    height: 2px;
    background: linear-gradient(90deg, #007aff 0%, #5856d6 100%);
    border-radius: 2px;
    transition: width 0.3s ease;
}
.layout-glass-footer {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 16px 20px 20px;
    gap: 10px;
    flex-shrink: 0;
    background: linear-gradient(180deg,
                rgba(255, 255, 255, 0.4) 0%,
                rgba(255, 255, 255, 0.9) 100%);
}
.lglass-btn {
    flex: 1;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    border-radius: 12px;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.lglass-btn-secondary {
    background: rgba(0, 0, 0, 0.06);
    color: rgb(60, 60, 67);
}
.lglass-btn-secondary:hover { background: rgba(0, 0, 0, 0.1); }
.lglass-btn-primary {
    background: linear-gradient(135deg, #007aff 0%, #5856d6 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.25);
}
.lglass-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 122, 255, 0.35);
}

/* 移动端 */
@media (max-width: 640px) {
    .layout-glass-card {
        width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
        border-radius: 22px;
    }
    .layout-glass-header { padding: 14px 16px 10px; }
    .layout-glass-body { padding: 6px 16px 10px; }
    .layout-glass-footer { padding: 14px 16px 16px; }
    .layout-glass-title { font-size: 14px; }
    .notice-terminal-body { padding: 8px 10px; }
    .notice-terminal-pre { font-size: 12px; }
}

/* ==========================================================================
   18. 参考站统计卡片 + 全站隐藏备案 Footer + 隐藏周期 Tab
   ========================================================================== */

/* --- 18.1 参考站统计卡片（激活设备/今日销量/本月销量）--- */
/* 桌面端默认样式：水平布局（图标在左，文字在右）—— 完全复制参考站原始CSS */
.stats-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 0;
    margin: 0 0 20px;
    box-sizing: border-box;
    width: 100%;
}
.stats-card {
    background: rgb(255, 255, 255);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.02);
    box-sizing: border-box;
}
.stats-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}
.stat-icon-wrapper {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-right: 16px;
    flex-shrink: 0;
}
.stat-icon-wrapper svg {
    display: block;
    width: 24px;
    height: 24px;
}
.stat-details {
    flex: 1 1 0%;
    min-width: 0;
}
.stat-number {
    font-size: 26px;
    font-weight: 700;
    color: rgb(44, 62, 80);
    line-height: 1.1;
    font-family: "DIN Alternate", Roboto, "Helvetica Neue", sans-serif;
    margin-bottom: 4px;
    text-align: left;
}
.stat-label {
    font-size: 13px;
    color: rgb(149, 165, 166);
    font-weight: 500;
    text-align: left;
}
/* 三色渐变 */
.blue-gradient {
    background: linear-gradient(135deg, rgb(227, 242, 253), rgb(187, 222, 251));
    color: rgb(25, 118, 210);
}
.orange-gradient {
    background: linear-gradient(135deg, rgb(255, 243, 224), rgb(255, 224, 178));
    color: rgb(245, 124, 0);
}
.purple-gradient {
    background: linear-gradient(135deg, rgb(243, 229, 245), rgb(225, 190, 231));
    color: rgb(123, 31, 162);
}

/* 移动端（<=768px）：切换为垂直紧凑布局 */
@media (max-width: 768px) {
    .stats-container {
        gap: 8px;
        padding: 0 14px;
        margin: 0 0 20px;
    }
    .stats-card {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        border-radius: 12px;
        padding: 10px 6px;
        min-height: 98px;
        cursor: default;
    }
    .stats-card:hover {
        transform: none;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    }
    .stat-icon-wrapper {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        font-size: 18px;
        margin-right: 0;
        margin-bottom: 6px;
    }
    .stat-icon-wrapper svg {
        width: 18px;
        height: 18px;
    }
    .stat-details {
        width: 100%;
        flex: none;
    }
    .stat-number {
        width: 100%;
        font-size: 18px;
        line-height: 19.8px;
        margin-bottom: 2px;
        text-align: center;
        white-space: nowrap;
    }
    .stat-label {
        width: 100%;
        font-size: 10px;
        line-height: 12px;
        text-align: center;
        white-space: nowrap;
    }
}

/* --- 18.2 隐藏全站备案 Footer + 周期 Tab --- */
.footer,
.copyright,
.duration-tabs,
.page-footer {
    display: none !important;
}

/* ==========================================================================
   19. 首页移动端排版优化（<=768px）
   使首页在手机端显示更紧凑、不突兀
   ========================================================================== */
@media (max-width: 768px) {
    /* 首页主容器：减小左右内边距，移除底部多余留白 */
    .dashboard-container {
        padding: 0 10px 0 !important;
        max-width: 100% !important;
    }

    /* 公告终端卡片：紧凑显示 */
    .notice-terminal-card {
        margin-bottom: 10px !important;
    }
    .notice-terminal-head {
        height: 36px !important;
        padding: 0 10px !important;
    }
    .notice-terminal-title {
        font-size: 13px !important;
    }
    .notice-terminal-title svg {
        width: 15px !important;
        height: 15px !important;
    }
    .notice-terminal-open {
        padding: 4px 10px !important;
        font-size: 12px !important;
    }

    /* 欢迎头部：大幅减小内边距和字号 */
    .welcome-header {
        padding: 16px 14px !important;
        border-radius: 16px !important;
        margin-bottom: 12px !important;
    }
    .welcome-title-row {
        margin-bottom: 12px !important;
        gap: 8px !important;
    }
    .welcome-title {
        font-size: 18px !important;
    }
    .welcome-actions .wa-btn {
        padding: 6px 12px !important;
        font-size: 12px !important;
        border-radius: 10px !important;
    }

    /* 余额行：紧凑显示 */
    .balance-row {
        gap: 4px !important;
        margin-bottom: 0 !important;
        flex-wrap: wrap !important;
    }
    .balance-label {
        font-size: 12px !important;
    }
    .balance-currency {
        font-size: 15px !important;
    }
    .balance-amount {
        font-size: 24px !important;
    }
    .today-consume {
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 6px !important;
        font-size: 11px !important;
    }

    /* 统计卡片：移除额外左右内边距，减小卡片间距 */
    .stats-container {
        padding: 0 !important;
        gap: 6px !important;
        margin: 0 0 12px !important;
    }
    .stats-card {
        padding: 10px 4px !important;
        border-radius: 12px !important;
        min-height: 80px !important;
    }
    .stat-icon-wrapper {
        width: 32px !important;
        height: 32px !important;
        border-radius: 9px !important;
        margin-bottom: 4px !important;
    }
    .stat-icon-wrapper svg {
        width: 16px !important;
        height: 16px !important;
    }
    .stat-number {
        font-size: 16px !important;
        margin-bottom: 1px !important;
    }
    .stat-label {
        font-size: 9px !important;
    }

    /* 两列卡片：移除过高的min-height，减小字号 */
    .two-col-grid {
        gap: 10px !important;
        margin-bottom: 12px !important;
    }
    .data-card {
        padding: 16px 14px !important;
        border-radius: 16px !important;
        min-height: auto !important;
    }
    .data-card-head {
        margin-bottom: 10px !important;
    }
    .data-card-title {
        font-size: 14px !important;
    }
    .data-card-title .title-emoji {
        font-size: 15px !important;
    }
    .data-card-value {
        font-size: 28px !important;
        margin-bottom: 4px !important;
    }
    .data-card-value-unit {
        font-size: 13px !important;
        margin-left: 4px !important;
        padding-bottom: 3px !important;
    }
    .data-card-foot {
        font-size: 11px !important;
        line-height: 1.4 !important;
    }

    .quick-card {
        padding: 16px 14px !important;
        border-radius: 16px !important;
        min-height: auto !important;
    }
    .quick-card-head {
        margin-bottom: 10px !important;
    }
    .quick-card-label {
        font-size: 10px !important;
    }
    .quick-card-title {
        font-size: 14px !important;
        line-height: 1.3 !important;
        margin-bottom: 4px !important;
    }
    .quick-card-sub {
        font-size: 11px !important;
        line-height: 1.4 !important;
        margin-bottom: 10px !important;
    }
    .quick-card-btn {
        padding: 8px 14px !important;
        font-size: 12px !important;
        border-radius: 10px !important;
    }

    /* 区块标题：紧凑显示 */
    .section-block {
        margin-bottom: 12px !important;
    }
    .section-head {
        margin-bottom: 10px !important;
        padding: 0 2px !important;
    }
    .section-title {
        font-size: 15px !important;
    }
    .section-label {
        font-size: 10px !important;
    }

    /* 常用功能网格：紧凑显示 */
    .qa-grid {
        gap: 8px !important;
    }
    .qa-item {
        padding: 12px 10px !important;
        border-radius: 14px !important;
        gap: 8px !important;
    }
    .qa-icon {
        width: 32px !important;
        height: 32px !important;
        border-radius: 9px !important;
        font-size: 14px !important;
    }
    .qa-name {
        font-size: 12px !important;
    }
    .qa-desc {
        font-size: 10px !important;
    }

    /* 增值服务网格：紧凑显示 */
    .ms-grid {
        gap: 8px !important;
    }
    .ms-item {
        padding: 14px !important;
        border-radius: 14px !important;
        gap: 10px !important;
    }
    .ms-icon {
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
        font-size: 16px !important;
    }
    .ms-title {
        font-size: 13px !important;
    }
    .ms-desc {
        font-size: 11px !important;
        line-height: 1.4 !important;
    }
    .ms-hot {
        top: 10px !important;
        right: 10px !important;
        padding: 2px 6px !important;
        font-size: 9px !important;
    }
}

/* 超小屏（<=380px）进一步优化 */
@media (max-width: 380px) {
    .dashboard-container {
        padding: 0 6px 0 !important;
    }
    .welcome-header {
        padding: 14px 10px !important;
    }
    .stats-card {
        padding: 8px 2px !important;
    }
    .stat-number {
        font-size: 14px !important;
    }
    .stat-label {
        font-size: 8px !important;
    }
    .qa-item {
        padding: 10px 8px !important;
    }
    .qa-icon {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
    }
    .qa-name {
        font-size: 11px !important;
    }
    .qa-desc {
        font-size: 9px !important;
    }
}

/* 设备列表操作栏移动端适配 */
@media (max-width: 768px) {
    .action-bar {
        flex-wrap: nowrap !important;
        gap: 6px !important;
        padding: 10px !important;
    }
    .action-bar .action-btn,
    .action-bar .more-menu-btn {
        font-size: 13px !important;
        padding: 9px 12px !important;
        white-space: nowrap;
    }
    .action-bar .btn-text {
        display: inline;
    }
}

@media (max-width: 420px) {
    .action-bar {
        gap: 4px !important;
        padding: 8px !important;
    }
    .action-bar .action-btn,
    .action-bar .more-menu-btn {
        font-size: 12px !important;
        padding: 8px 10px !important;
    }
    .action-bar .btn-text {
        max-width: none;
    }
    .action-bar .action-btn.primary {
        padding: 8px 10px !important;
    }
}

/* ==========================================================================
   END OF FILE
   Apple/iOS Design System for ThinkPHP8
   ========================================================================== */