/* V1.0.0: home.css */

.revenue-card {
            background: var(--td-bg-white);
            border-radius: var(--td-radius-xl);
            overflow: hidden;
            margin-bottom: 14px;
            box-shadow: var(--td-shadow-lg);
            position: relative;
            width: 100%;
            opacity: 1;
        }

        .revenue-header {
            /* 渐进式加载:先用渐变占位,后加载高质量图片 */
            background: linear-gradient(135deg, rgba(0, 82, 217, 0.15) 0%, rgba(64, 128, 255, 0.2) 50%, rgba(0, 168, 112, 0.1) 100%),
                        url('../images/background.webp');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            transition: background 0.3s ease;
            padding: 12px; /* 调整内边距 */
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: flex-start; /* 改为flex-start以更好地控制垂直对齐 */
            min-height: 120px; /* 调整最小高度为更合适的值,约为参数块的1.5倍 */
        }

        .revenue-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(0, 82, 217, 0.2) 0%, rgba(64, 128, 255, 0.2) 100%);
            mix-blend-mode: overlay;
        }

        .revenue-content {
            position: absolute;
            top: 12px;
            left: 12px;
            right: 12px;
            bottom: 12px;
            z-index: 2;
        }

        /* V1.0.0: 左翻页按钮 - 与金额居中对齐 */
        .revenue-nav-left {
            position: absolute;
            left: 0;
            top: calc(50% + 3px);
            transform: translateY(-50%);
            z-index: 3;
        }

        /* V1.0.0: 右翻页按钮 - 与金额居中对齐 */
        .revenue-nav-right {
            position: absolute;
            right: 0;
            top: calc(50% + 3px);
            transform: translateY(-50%);
            z-index: 3;
        }

        /* V1.0.0: 营业额标题 - 左移4px */
        .revenue-label {
            position: absolute;
            left: 20px;
            top: 0;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.95);
            font-weight: 500;
            letter-spacing: 0.5px;
        }

        /* V1.0.0: 金额 - 向上移动20px,右移6px */
        /* V1.0.0: 金额 - 高度居中 */
        .revenue-value {
            position: absolute;
            left: 30px;
            top: calc(50% + 2px);  /* V1.0.0: 向下2px */
            transform: translateY(-50%);
            font-family: var(--font-display);
            font-size: 36px;
            font-weight: 700;
            color: #fff;
            letter-spacing: -1px;
            text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
            opacity: 1;
        }

        /* V1.0.0: 右侧按钮 - 左移6px */
        .revenue-tabs {
            position: absolute;
            right: 6px;
            top: 0;
            display: flex;
            gap: 4px;
        }

        /* V1.0.0: 日期 - 再左移4px */
        .revenue-period {
            position: absolute;
            right: 10px;
            bottom: 0;
            font-size: 10px;
            color: rgba(255, 255, 255, 0.9);
            font-weight: 400;
            letter-spacing: 0.3px;
        }

        /* V1.0.0: 付款状态图标 - 五角星PNG */
        .revenue-paid-icon {
            position: absolute;
            right: 32px;
            top: calc(50% + 3px);
            transform: translateY(-50%) rotate(-30deg);
            z-index: 4;
            display: none;
            cursor: pointer;
            width: 52px;
            height: 50px;
        }

        /* 五角星PNG图片 */
        .revenue-paid-star {
            width: 100%;
            height: 100%;
            object-fit: contain;
            pointer-events: none;  /* V10.12fix: 让点击传递到父元素 */
        }

        /* V1.0.0: 已付状态 - 黄色变浅绿色(更浅更柔和) */
        .revenue-paid-icon.paid .revenue-paid-star {
            filter: sepia(100%) hue-rotate(70deg) saturate(100%) brightness(1.3);
        }

        /* V1.0.0: 未付状态 - 黄色变浅红色(增加红色素) */
        .revenue-paid-icon.unpaid .revenue-paid-star {
            filter: sepia(100%) hue-rotate(-30deg) saturate(180%) brightness(1.1);
        }

        /* V1.0.0: 已付文字 - 深绿色 */
        .revenue-paid-icon.paid .revenue-paid-icon-text {
            color: #2E7D32;
            text-shadow: 0 1px 2px rgba(255,255,255,0.3);
        }

        /* V1.0.0: 未付文字 - 深红色 */
        .revenue-paid-icon.unpaid .revenue-paid-icon-text {
            color: #C62828;
            text-shadow: 0 1px 2px rgba(255,255,255,0.3);
        }

        /* 五角星内部文字 - 跟随旋转30度,向下移2px */
        .revenue-paid-icon-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) translate(0px, 2px);
            font-size: 11px;
            font-weight: 700;
            white-space: nowrap;
            color: #fff;
            text-shadow: 0 1px 2px rgba(0,0,0,0.3);
            pointer-events: none;  /* V10.12fix: 让点击传递到父元素 */
        }

        .revenue-nav-btn {
            width: 26px;
            height: 26px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px; /* 增大图标字号 */
            line-height: normal; /* V1.0.0: 确保箭头在圆心 */
            color: #fff;
            cursor: pointer;
            transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.25);
        }

        /* V1.0.0: 左箭头向上1.5px,向左1px */
        .revenue-nav-left .revenue-nav-arrow {
            display: block;
            transform: translate(-1px, -1.5px);
        }

        /* V1.0.0: 右箭头向上1.5px,向右1px */
        .revenue-nav-right .revenue-nav-arrow {
            display: block;
            transform: translate(1px, -1.5px);
        }

        .revenue-nav-btn:active {
            background: rgba(255, 255, 255, 0.35);
            transform: scale(0.88);
            box-shadow: 0 0 12px rgba(255, 255, 255, 0.25);
        }

        /* V1.0.0: 禁用状态 */
        .revenue-nav-btn.disabled {
            opacity: 0.3;
            cursor: not-allowed;
            pointer-events: none;
        }

        .revenue-tabs {
            display: flex;
            gap: 4px;
            margin-bottom: 4px;
        }

        .revenue-tab {
            padding: 4px 10px; /* V1.0.0: 缩小内边距 */
            background: rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            font-size: 10px; /* V1.0.0: 缩小字体 */
            color: rgba(255, 255, 255, 0.95);
            cursor: pointer;
            transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
            font-weight: 500;
            border: 1px solid rgba(255, 255, 255, 0.2);
            white-space: nowrap;
        }

        .revenue-tab:active {
            background: rgba(255, 255, 255, 0.3);
            color: #fff;
        }

        .revenue-tab.active {
            background: #fff;
            color: var(--td-primary);
            font-weight: 600;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
        }

        .revenue-body {
            background: var(--td-bg-white);
            padding: 8px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 6px;
        }

        .revenue-stat {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px;
            border-radius: var(--td-radius-sm);
            transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
            position: relative;
            border: 1px dashed var(--td-border);  /* 统一虚线边框 */
            background: var(--td-bg-page);
        }

        .revenue-stat:active {
            transform: translateY(-1px);
            box-shadow: var(--td-shadow-xs);
            border-color: var(--td-primary-light);
        }

        /* 移除多余的虚线分隔线(已统一为虚线边框) */

        .revenue-stat-label {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 11px;
            color: var(--td-text-secondary);
            font-weight: 500;
            position: relative;
            flex: 1;
        }

        .revenue-stat-icon {
            width: 16px;
            height: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            font-size: 8px;
            color: #fff;
        }

        .revenue-stat.coin .revenue-stat-icon { background: linear-gradient(135deg, #3b82f6, #60a5fa); }
        .revenue-stat.online .revenue-stat-icon { background: linear-gradient(135deg, #10b981, #34d399); }
        .revenue-stat.card .revenue-stat-icon { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
        .revenue-stat.ratio .revenue-stat-icon { background: linear-gradient(135deg, #ef4444, #f87171); }

        /* V1.0.0: 调整金额图标 */
        .revenue-stat.adjust .revenue-stat-icon { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }

        /* V1.0.0: 转账金额图标 */
        .revenue-stat.transfer .revenue-stat-icon { background: linear-gradient(135deg, #06b6d4, #22d3ee); }

        .revenue-stat.transfer.unpaid .revenue-stat-value {
            color: #e53935;
            font-weight: 700;
        }

        /* V1.0.0: 结算浮窗 - V4.14统一适配 */
        .settlement-modal {
            display: none;
            position: absolute;
            top: -5px;
            left: -5px;
            width: 375px;
            height: 780px;
            background: rgba(0, 0, 0, 0.6);
            z-index: 1000;
            justify-content: center;
            align-items: center;
            padding-top: 40px;  /* V1.0.0: 向下移动40px */
        }

        .settlement-modal.active {
            display: flex;
        }

        /* V1.0.0: 统一浮窗尺寸 */
        .settlement-iframe-container {
            width: 88%;
            max-width: 340px;
            height: 70vh;  /* V1.0.0: 明确高度约束 */
            border-radius: 16px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            background: #f5f5f5;  /* V1.0.0: 与H5背景一致 */
            position: relative;
            overflow: hidden;
        }

        /* V1.0.0: 内层wrapper允许滑动+隐藏滚动条 */
        .settlement-iframe-wrapper {
            width: 100%;
            height: 100%;  /* 明确高度 */
            overflow-y: auto;  /* 启用滚动 */
            -webkit-overflow-scrolling: touch;  /* iOS惯性滚动 */
        }
        .settlement-iframe-wrapper::-webkit-scrollbar {
            display: none;
        }
        .settlement-iframe-wrapper {
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        @keyframes modalSlideIn {
            from { opacity: 0; transform: translateY(-20px) scale(0.95); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }

        /* V1.0.0: 关闭按钮 - 容器右上角 */
        .settlement-close-btn {
            position: absolute;
            top: 8px;
            right: 8px;
            background: rgba(255,255,255,0.9);
            border-radius: 20px;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
            z-index: 10;
            font-size: 18px;
            color: #666;
            transition: all 0.2s ease;
        }
        .settlement-close-btn:active {
            background: #fff;
            color: #333;
        }

        /* V1.0.0: iframe高度增大 */
        .settlement-iframe {
            width: 100%;
            height: 100%;
            border: none;
            border-radius: 16px;
            /* V1.0.0: 强制隐藏滚动条 */
            overflow: hidden;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        .settlement-iframe::-webkit-scrollbar {
            display: none;
            width: 0;
            height: 0;
        }
        /* V1.0.0: 通用隐藏滚动条 */
        ::-webkit-scrollbar { display: none; width: 0; height: 0; }
        * { scrollbar-width: none; -ms-overflow-style: none; }

        /* V1.0.0: 月度结算参数栏 - 默认隐藏 */
        .revenue-stat.adjust,
        .revenue-stat.transfer {
            display: none;
        }

        .revenue-stat-value {
            font-family: 'SF Pro Display', -apple-system, 'Helvetica Neue', sans-serif;
            font-size: 13px;
            font-weight: 400;
            font-variant-numeric: tabular-nums;
            color: var(--td-text-primary);
            position: relative;
            margin-left: 6px;
        }

        /* ========== 快捷入口卡片 ========== */
        .shortcut-card {
            background: var(--td-bg-white);
            border-radius: var(--td-radius-xl);
            padding: 18px;
            margin-bottom: 14px;
            box-shadow: var(--td-shadow);
            /* V1.0.0: 去掉动画,快速显示 */
        }

        .shortcut-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }

        .shortcut-title {
            font-family: var(--font-display);
            font-size: 17px;
            font-weight: 700;
            color: var(--td-text-primary);
            letter-spacing: 0.2px;
        }

        /* V1.0.0: 自定义按钮 - 低调设计 */
        .shortcut-customize {
            font-size: 11px;
            color: #475569;
            cursor: pointer;
            padding: 4px 10px;
            border-radius: 20px;
            background: #f1f5f9;
            font-weight: 500;
            transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
            border: 1px solid #e2e8f0;
        }

        .shortcut-customize:active {
            background: #e2e8f0;
            transform: scale(0.95);
        }

        /* V1.0.0: 卡片式按钮 - 优化高度/颜色/图标 ========== */
        .shortcut-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
        }

        .shortcut-item {
            position: relative;
            height: 68px;  /* V1.0.0: 72px → 68px(减少4px) */
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            overflow: hidden;
            padding: 8px 12px;  /* V1.0.0: padding调整 */
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .shortcut-item:active {
            transform: scale(0.95);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        /* V1.0.0: 文字区域 */
        .shortcut-text {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }

        .shortcut-title-text {
            font-size: 13px;
            font-weight: 600;
            color: #fff;
            line-height: 1.3;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }

        .shortcut-status {
            font-size: 11px;
            color: rgba(255, 255, 255, 0.85);
            margin-top: 2px;
            font-weight: 500;
        }

        /* V1.0.0: 图标在右下角 - 白色圆形背景 + 简约图标 */
        .shortcut-icon {
            position: absolute;
            right: 8px;
            bottom: 8px;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            background: rgba(255, 255, 255, 0.35);
            border-radius: 6px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        /* V1.0.0: 紫色卡片专属图标 - 淡紫色背景 */
        .shortcut-icon.purple-icon {
            background: rgba(200, 190, 235, 0.45);
            color: #6b7280;
        }

        /* V1.0.0: 褪色渐变边框效果 - 上部加深,下部近乎透明,文字黑色 */
        /* 彩虹蓝 - 上淡下透明 */
        .shortcut-item.blue {
            background: linear-gradient(180deg, rgba(180, 210, 255, 0.70) 0%, rgba(180, 210, 255, 0.40) 60%, rgba(180, 210, 255, 0.10) 90%);
            box-shadow: inset 0 0 0 1.5px rgba(100, 140, 200, 0.30), 0 1px 3px rgba(100, 140, 200, 0.12);
        }
        .shortcut-item.blue .shortcut-title-text { color: #1e293b; }
        .shortcut-item.blue .shortcut-status { color: rgba(30, 41, 59, 0.85); }
        /* 彩虹天蓝 */
        .shortcut-item.skyblue {
            background: linear-gradient(180deg, rgba(190, 230, 255, 0.70) 0%, rgba(190, 230, 255, 0.40) 60%, rgba(190, 230, 255, 0.10) 90%);
            box-shadow: inset 0 0 0 1.5px rgba(110, 160, 210, 0.30), 0 1px 3px rgba(110, 160, 210, 0.12);
        }
        .shortcut-item.skyblue .shortcut-title-text { color: #1e293b; }
        .shortcut-item.skyblue .shortcut-status { color: rgba(30, 41, 59, 0.85); }
        /* 彩虹青 */
        .shortcut-item.teal {
            background: linear-gradient(180deg, rgba(200, 240, 240, 0.70) 0%, rgba(200, 240, 240, 0.40) 60%, rgba(200, 240, 240, 0.10) 90%);
            box-shadow: inset 0 0 0 1.5px rgba(120, 180, 180, 0.30), 0 1px 3px rgba(120, 180, 180, 0.12);
        }
        .shortcut-item.teal .shortcut-title-text { color: #1e293b; }
        .shortcut-item.teal .shortcut-status { color: rgba(30, 41, 59, 0.85); }
        /* 彩虹绿 */
        .shortcut-item.green {
            background: linear-gradient(180deg, rgba(200, 250, 220, 0.70) 0%, rgba(200, 250, 220, 0.40) 60%, rgba(200, 250, 220, 0.10) 90%);
            box-shadow: inset 0 0 0 1.5px rgba(120, 190, 150, 0.30), 0 1px 3px rgba(120, 190, 150, 0.12);
        }
        .shortcut-item.green .shortcut-title-text { color: #1e293b; }
        .shortcut-item.green .shortcut-status { color: rgba(30, 41, 59, 0.85); }
        /* 彩虹黄绿 */
        .shortcut-item.lime {
            background: linear-gradient(180deg, rgba(230, 255, 200, 0.70) 0%, rgba(230, 255, 200, 0.40) 60%, rgba(230, 255, 200, 0.10) 90%);
            box-shadow: inset 0 0 0 1.5px rgba(170, 200, 130, 0.30), 0 1px 3px rgba(170, 200, 130, 0.12);
        }
        .shortcut-item.lime .shortcut-title-text { color: #1e293b; }
        .shortcut-item.lime .shortcut-status { color: rgba(30, 41, 59, 0.85); }
        /* 彩虹黄 */
        .shortcut-item.amber {
            background: linear-gradient(180deg, rgba(255, 245, 200, 0.70) 0%, rgba(255, 245, 200, 0.40) 60%, rgba(255, 245, 200, 0.10) 90%);
            box-shadow: inset 0 0 0 1.5px rgba(200, 180, 120, 0.30), 0 1px 3px rgba(200, 180, 120, 0.12);
        }
        .shortcut-item.amber .shortcut-title-text { color: #1e293b; }
        .shortcut-item.amber .shortcut-status { color: rgba(30, 41, 59, 0.85); }
        /* 彩虹橙 */
        .shortcut-item.orange {
            background: linear-gradient(180deg, rgba(255, 220, 190, 0.70) 0%, rgba(255, 220, 190, 0.40) 60%, rgba(255, 220, 190, 0.10) 90%);
            box-shadow: inset 0 0 0 1.5px rgba(200, 150, 100, 0.30), 0 1px 3px rgba(200, 150, 100, 0.12);
        }
        .shortcut-item.orange .shortcut-title-text { color: #1e293b; }
        .shortcut-item.orange .shortcut-status { color: rgba(30, 41, 59, 0.85); }
        /* 彩虹珊瑚 */
        .shortcut-item.coral {
            background: linear-gradient(180deg, rgba(255, 230, 210, 0.70) 0%, rgba(255, 230, 210, 0.40) 60%, rgba(255, 230, 210, 0.10) 90%);
            box-shadow: inset 0 0 0 1.5px rgba(210, 170, 140, 0.30), 0 1px 3px rgba(210, 170, 140, 0.12);
        }
        .shortcut-item.coral .shortcut-title-text { color: #1e293b; }
        .shortcut-item.coral .shortcut-status { color: rgba(30, 41, 59, 0.85); }
        /* 彩虹红 */
        .shortcut-item.red {
            background: linear-gradient(180deg, rgba(255, 220, 220, 0.70) 0%, rgba(255, 220, 220, 0.40) 60%, rgba(255, 220, 220, 0.10) 90%);
            box-shadow: inset 0 0 0 1.5px rgba(200, 150, 150, 0.30), 0 1px 3px rgba(200, 150, 150, 0.12);
        }
        .shortcut-item.red .shortcut-title-text { color: #1e293b; }
        .shortcut-item.red .shortcut-status { color: rgba(30, 41, 59, 0.85); }
        /* 彩虹紫 */
        .shortcut-item.purple {
            background: linear-gradient(180deg, rgba(240, 230, 255, 0.70) 0%, rgba(240, 230, 255, 0.40) 60%, rgba(240, 230, 255, 0.10) 90%);
            box-shadow: inset 0 0 0 1.5px rgba(180, 160, 210, 0.30), 0 1px 3px rgba(180, 160, 210, 0.12);
        }
        .shortcut-item.purple .shortcut-title-text { color: #1e293b; }
        .shortcut-item.purple .shortcut-status { color: rgba(30, 41, 59, 0.85); }
        /* V1.0.0: 系统设置 - 比账号管理更紫色 */
        .shortcut-item.slate {
            background: linear-gradient(180deg, rgba(220, 200, 255, 0.70) 0%, rgba(220, 200, 255, 0.40) 60%, rgba(220, 200, 255, 0.10) 90%);
            box-shadow: inset 0 0 0 1.5px rgba(160, 140, 200, 0.30), 0 1px 3px rgba(160, 140, 200, 0.12);
        }
        .shortcut-item.slate .shortcut-title-text { color: #1e293b; }
        .shortcut-item.slate .shortcut-status { color: rgba(30, 41, 59, 0.85); }

        /* V1.0.0: 晃动 ±1.5° / 0.3s */
        @keyframes shortcutShake {
            0%, 100% { transform: rotate(0deg); }
            25% { transform: rotate(-1.5deg); }
            75% { transform: rotate(1.5deg); }
        }

        .shortcut-item.editing {
            animation: shortcutShake 0.3s ease-in-out infinite;
        }

        /* V1.0.0: 触摸拖动样式 */
        .shortcut-item.touch-dragging {
            opacity: 0.7;
            transform: scale(1.05);
            box-shadow: 0 8px 20px rgba(0,0,0,0.3);
            z-index: 100;
        }

        /* V1.0.0: 删除图标 - V4.07调整到卡片内部 */
        .delete-badge {
            position: absolute;
            top: 2px;
            right: 2px;
            width: 18px;
            height: 18px;
            background: #fff;
            border: 2px solid #ef4444;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
        }

        /* V1.0.0: 减号用CSS画横线,确保居中 */
        .delete-badge::after {
            content: '';
            width: 8px;
            height: 2px;
            background: #ef4444;
            border-radius: 1px;
        }

        /* V1.0.0: 添加入口 - 虚框加号 */
        .add-shortcut-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 16px 6px;
            border-radius: var(--td-radius);
            cursor: pointer;
            position: relative;
        }

        .add-shortcut-icon {
            width: 58px;
            height: 36px;
            border: 2px dashed #cbd5e1;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: #94a3b8;
            margin-bottom: 6px;
            background: transparent;
        }

        /* V1.0.0: 编辑模式增强 ========== */
        /* V1.0.0: 删除重复动画,使用前面已定义的shortcutShake */

        .shortcut-item.editing {
            cursor: grab;
            position: relative;
        }

        .shortcut-item.editing:active {
            cursor: grabbing;
        }

        .shortcut-item.dragging {
            opacity: 0.5;
            transform: scale(1.05);
        }

        .shortcut-item.drag-over {
            border: 2px solid #3b82f6;
        }

        /* 删除图标 - V4.08减号居中 */
        .delete-badge {
            position: absolute;
            top: 2px;
            right: 2px;
            width: 18px;
            height: 18px;
            background: #fff;
            border: 2px solid #ef4444;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .delete-badge::after {
            content: '';
            width: 8px;
            height: 2px;
            background: #ef4444;
            border-radius: 1px;
        }

        /* 确认按钮样式 */
        .shortcut-customize.confirm-mode {
            background: #3b82f6;
            color: #fff;
            font-weight: 500;
        }

        /* V1.0.0: 自定义浮窗样式 - V4.12缩小 */
        .customize-modal {
            position: absolute;  /* V1.0.0: absolute定位，在phone-frame内 */
            top: 0;
            left: 0;
            width: 100%;  /* V1.0.0: 使用100% */
            height: 100%;  /* V1.0.0: 使用100% */
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            display: none;
            align-items: center;
            justify-content: center;
        }

        .customize-modal.show {
            display: flex !important;  /* V1.0.0: 使用!important覆盖common.css */
        }

        .customize-panel {
            width: 340px;  /* V1.0.0: 固定宽度 */
            max-width: 340px;
            max-height: 480px;  /* V1.0.0: 和店铺选择器一样高 */
            background: #fff;
            border-radius: 16px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        /* V1.0.0: 题头高度与选项一致 */
        .customize-header {
            padding: 8px 10px;
            background: #f8fafc;
            border-bottom: 1px solid #e2e8f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .customize-title {
            font-size: 13px;
            font-weight: 500;
            color: #1e293b;
        }

        .customize-close {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #e2e8f0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: #64748b;
            cursor: pointer;
        }

        .customize-body {
            padding: 16px;  /* V1.0.0: 左右边距16px */
            overflow-y: auto;
            flex: 1;
        }

        .customize-list {
            padding: 16px;  /* V1.0.0: 左右边距16px */
            overflow-y: auto;
            flex: 1;
        }

        /* V1.0.0: 缩小栏目项 */
        .customize-item {
            display: flex;
            align-items: center;
            padding: 8px;
            background: #f8fafc;
            border-radius: 8px;
            margin-bottom: 4px;
            cursor: grab;
            position: relative;
            transition: all 0.2s;
        }

        .customize-item:active {
            cursor: grabbing;
            background: #f1f5f9;
        }

        .customize-item.dragging {
            opacity: 0.5;
            transform: scale(1.02);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }

        .customize-item.selected {
            background: #eff6ff;
            border: 1px solid #3b82f6;
        }

        .customize-drag-handle {
            width: 24px;
            color: #94a3b8;
            font-size: 16px;
            display: flex;
            flex-direction: column;
            align-items: center;
            line-height: 4px;
            padding-right: 8px;
        }

        .customize-item-info {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .customize-item-icon {
            font-size: 18px;
        }

        .customize-item-text {
            font-size: 13px;
            color: #1e293b;
        }

        .customize-toggle {
            width: 44px;
            height: 24px;
            border-radius: 12px;
            background: #e2e8f0;
            position: relative;
            cursor: pointer;
            transition: background 0.2s;
        }

        .customize-toggle.on {
            background: #3b82f6;
        }

        .customize-toggle-dot {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #fff;
            position: absolute;
            top: 2px;
            left: 2px;
            transition: left 0.2s;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
        }

        .customize-toggle.on .customize-toggle-dot {
            left: 22px;
        }

        /* V1.0.0: 确认部分高度 = 题头 × 1.6 */
        .customize-footer {
            padding: 10px 16px;  /* V1.0.0: 高度减少，左右16px */
            background: #f8fafc;
            border-top: 1px solid #e2e8f0;
            display: flex;
            justify-content: center;  /* V1.0.0: 居中 */
        }

        .customize-confirm-btn {
            width: 240px;  /* V1.0.0: 长度再减少50px */
            padding: 8px;  /* V1.0.0: 高度减少5px */
            background: #3b82f6;
            color: #fff;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            text-align: center;

        }

        .customize-confirm-btn:active {
            background: #2563eb;
        }

        /* V1.0.0: Toast 提示样式 ========== */
        .toast {
            position: absolute;  /* V1.0.0: 改为absolute,在phone-frame内 */
            bottom: 68px;  /* V1.0.0: tab栏(58px)外向上10px */
            left: 50%;
            transform: translateX(-50%);
            padding: 8px 16px;
            background: linear-gradient(180deg, rgba(180, 220, 255, 0.5), rgba(100, 180, 255, 0.7));  /* V1.0.0: 加深蓝色 */
            color: #fff;
            border-radius: 6px;
            font-size: 13px;
            z-index: 2000;
            opacity: 0;
            transition: opacity 0.15s;
            box-shadow: 0 2px 8px rgba(0, 82, 217, 0.15);
        }

        .toast.show {
            opacity: 1;
        }

        /* 添加入口 - 虚框加号 */
        .add-shortcut-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 16px 6px;
            border-radius: var(--td-radius);
            border: 2px dashed #cbd5e1;
            background: transparent;
            cursor: pointer;
        }

        .add-shortcut-icon {
            width: 58px;
            height: 36px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: #94a3b8;
            margin-bottom: 6px;
        }

        .add-shortcut-name {
            font-size: 11px;
            color: #94a3b8;
            font-weight: 500;
        }

        /* ========== 告警卡片 ========== */
        .alert-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin-bottom: 14px;
        }

        .alert-card {
            background: var(--td-bg-white);
            border-radius: var(--td-radius-lg);
            padding: 14px;
            box-shadow: var(--td-shadow);
            display: flex;
            align-items: flex-start; /* V1.0.0: 内容从顶部开始排列 */
            gap: 10px;
            transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
            position: relative;
            overflow: hidden;
            height: 90px; /* V1.0.0: 固定高度 */
        }

        .alert-card::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
        }

        .alert-card.danger::before {
            background: var(--td-danger-gradient);
            box-shadow: 0 0 12px rgba(213, 73, 66, 0.3);
        }

        .alert-card.warning::before {
            background: var(--td-warning-gradient);
            box-shadow: 0 0 12px rgba(237, 123, 47, 0.3);
        }

        .alert-card:active {
            transform: scale(0.92);
            box-shadow: var(--td-shadow);
        }

        .alert-icon {
            font-size: 26px;
            filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15));
            animation: alertPulse 2s ease-in-out infinite;
            margin-top: 6px;
        }

        @keyframes alertPulse {
            0%, 100% { transform: translateX(6px) scale(1); }
            50% { transform: translateX(6px) scale(1.1); }
        }

        .alert-info {
            flex: 1;
        }

        /* V1.0.0: 标题与快捷入口标题大小一致 */
        .alert-title {
            font-size: 13px;
            color: var(--td-text-secondary);
            margin-bottom: 4px;
            font-weight: 600;
            letter-spacing: 0.3px;
            margin-left: 15px;
        }

        /* V1.0.0: 数字下移4px,右移15px */
        .alert-count {
            font-family: var(--font-display);
            font-size: 24px;
            font-weight: 700;
            letter-spacing: -0.5px;
            line-height: 1;
            margin-top: 4px;
            margin-left: 15px;
        }

        .alert-count.danger { color: var(--td-danger); }
        .alert-count.warning { color: var(--td-warning); }

        /* V1.0.0: 描述文字字体调整 */
        .alert-desc {
            position: absolute;
            bottom: 14px;
            left: 0;
            right: 0;
            font-size: 12px;
            color: var(--td-text-placeholder);
            line-height: 1;
            font-weight: 500;
            text-align: center;
        }

        /* V1.0.0: 首页离线告警卡片 - 文字数字黑色，图标保持原色 */
        /* V1.0.23fix: 添加 emoji 字体回退链，确保 emoji 正常渲染 */
        /* V1.0.24fix: 移除 Space Grotesk（拉丁字体不支持emoji），只用系统emoji字体 */
        .alert-level-warning,
        .alert-level-danger,
        .alert-level-critical {
            color: #1e293b;  /* 文字和数字改为黑色 */
            font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', -apple-system, sans-serif;
        }

        /* ========== V5.31: 两行日期筛选组件 ========== */
        /* V1.0.0: sticky定位,固定在导航栏下方 */
/* ========== V1.0.19: 首页跑马灯样式 ========== */
.alert-banner { padding: 5px 12px; background: rgba(239, 68, 68, 0.15); backdrop-filter: blur(4px); display: flex; align-items: center; cursor: pointer; overflow: hidden; border-bottom: 1px solid rgba(239, 68, 68, 0.2); }
.alert-banner:hover { background: rgba(239, 68, 68, 0.25); }
.alert-banner-text { font-size: 11px; color: #ef4444; font-weight: 500; display: flex; align-items: center; overflow: hidden; width: 100%; }
.alert-banner-scroll { display: flex; width: max-content; animation: marqueeScrollRight linear infinite; --start-pos: 100vw; --end-pos: -100%; }
.alert-banner-item { white-space: nowrap; margin-right: 48px; }
.alert-banner-item:last-child { margin-right: 0; }
@keyframes marqueeScrollRight { 0% { transform: translateX(var(--start-pos)); } 100% { transform: translateX(var(--end-pos)); } }