/* V1.0.0: core.css - 基础样式合并 */

/* V1.0.0: base.css */

/* ========== TDesign Pro 基础样式 ========== */
        :root {
            /* 70-20-10 配色规则 */
            --td-primary: #0052d9;
            --td-primary-light: #e0edff;
            --td-primary-dark: #003cab;
            --td-primary-gradient: linear-gradient(135deg, #0052d9 0%, #4080ff 50%, #6b9fff 100%);
            --td-primary-glow: 0 0 30px rgba(0, 82, 217, 0.3);

            /* 辅助色 */
            --td-success: #00a870;
            --td-success-light: #e3f8ef;
            --td-success-gradient: linear-gradient(135deg, #00a870 0%, #00c884 100%);
            --td-warning: #ed7b2f;
            --td-warning-light: #fef3e8;
            --td-warning-gradient: linear-gradient(135deg, #ed7b2f 0%, #ff9f43 100%);
            --td-danger: #d54942;
            --td-danger-light: #ffece6;
            --td-danger-gradient: linear-gradient(135deg, #d54942 0%, #ff6b6b 100%);

            /* 中性色 - 高对比 */
            --td-text-primary: #0f172a;
            --td-text-secondary: #475569;
            --td-text-placeholder: #94a3b8;
            --td-bg-page: #f8fafc;
            --td-bg-white: #ffffff;
            --td-border: #e2e8f0;
            --td-border-strong: #cbd5e1;

            /* 圆角 */
            --td-radius-xs: 4px;
            --td-radius-sm: 8px;
            --td-radius: 12px;
            --td-radius-lg: 16px;
            --td-radius-xl: 24px;

            /* 阴影 - 5级层次 */
            --td-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
            --td-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06);
            --td-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            --td-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
            --td-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
            --td-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);

            /* 字体 - 非通用字体 */
            --font-display: 'Space Grotesk', -apple-system, sans-serif;
            --font-body: 'Plus Jakarta Sans', -apple-system, sans-serif;
            --font-mono: 'SF Pro Rounded', 'PingFang SC', -apple-system, sans-serif;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
/* V1.0.0: layout.css */

body {
            font-family: var(--font-body);
            background: linear-gradient(135deg, #e8ecf1 0%, #d1d5db 50%, #c4c9d1 100%);
            padding: 40px 20px;
            min-height: 100vh;
            position: relative;
        }

        /* 背景纹理 - 渐变网格 + 噪点 */
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            background:
                radial-gradient(ellipse at 20% 20%, rgba(0, 82, 217, 0.08) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 80%, rgba(64, 128, 255, 0.06) 0%, transparent 50%),
                radial-gradient(ellipse at 50% 50%, rgba(0, 168, 112, 0.04) 0%, transparent 50%);
            pointer-events: none;
            z-index: 0;
        }

        body::after {
            content: '';
            position: fixed;
            inset: 0;
            background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
            opacity: 0.4;
            pointer-events: none;
            z-index: 0;
        }

        .container {
            display: flex;
            gap: 50px;
            justify-content: center;
            flex-wrap: wrap;
            position: relative;
            z-index: 1;
        }

        /* ========== 手机框架 - 增强版 ========== */
        .phone-frame {
            width: 375px;
            height: 780px;
            background: var(--td-bg-page);
            border-radius: 44px;
            box-shadow:
                0 24px 80px rgba(0, 0, 0, 0.25),
                0 0 0 1px rgba(0, 0, 0, 0.1),
                inset 0 0 0 1px rgba(255, 255, 255, 0.1);
            overflow: hidden;
            position: relative;
            border: 5px solid #1a1a1a;
            /* V1.0.0: 添加过渡动画 */
            transition: opacity 0.25s ease-out;
        }

        .phone-frame:nth-child(2) { animation-delay: 0.15s; }
        .phone-frame:nth-child(3) { animation-delay: 0.3s; }

        @keyframes phoneReveal {
            from {
                opacity: 0;
                transform: translateY(40px) scale(0.92) rotateX(8deg);
                filter: blur(4px);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1) rotateX(0);
                filter: blur(0);
            }
        }

        .phone-notch {
            height: 50px;
            background: #000;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            z-index: 10;
        }

        .phone-notch::after {
            content: '';
            width: 140px;
            height: 30px;
            background: #111;
            border-radius: 15px;
            box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.05);
        }

        /* ========== V1.0.37新增：手机浏览器全屏显示 ========== */
        @media screen and (max-width: 768px) {
            /* 外层容器：全屏 */
            body {
                padding: 0;
            }
            
            .container {
                display: block;
                width: 100%;
                height: 100vh;
                padding: 0;
                margin: 0;
            }
            
            /* 手机框架：全屏 */
            .phone-frame {
                width: 100%;
                height: 100vh;
                border-radius: 0;
                box-shadow: none;
                border: none;
                overflow: hidden;
            }
            
            /* 刘海：隐藏 */
            .phone-notch {
                display: none;
            }
            
            /* 屏幕内容：全屏 */
            .phone-screen {
                height: 100vh;
                padding-top: 0;
            }
        }

        .phone-screen {
            position: relative;
            display: flex;
            flex-direction: column;
            height: calc(100% - 50px);
            overflow: hidden;
            background: var(--td-bg-page);
        }

        .phone-screen::-webkit-scrollbar {
            width: 0;
        }

        /* ========== V7.38: 下拉刷新指示器 ========== */
        .pull-refresh-indicator {
            position: absolute;
            top: -50px;
            left: 0;
            right: 0;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            transition: transform 0.2s ease;
            z-index: 10;
            pointer-events: none;
        }

        .pull-refresh-indicator .refresh-spinner {
            width: 24px;
            height: 24px;
            border: 2px solid #ddd;
            border-top-color: #07c160;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

        .pull-refresh-indicator .refresh-text {
            font-size: 12px;
            color: #999;
            margin-top: 4px;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .pull-refresh-indicator.pulling {
            transform: translateY(50px);
        }

        .pull-refresh-indicator.refreshing {
            transform: translateY(50px);
        }

        /* ========== 导航栏 - 毛玻璃效果 ========== */
        .navbar {
            background: #f8fafc;
            padding: 4px 8px; /* Even smaller padding */
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 5;
            min-height: 36px; /* Explicitly set a small minimum height */
        }

        /* V1.0.0: 导航栏子容器继承flex布局 */
        #navbar-home,
        #navbar-stat,
        #navbar-shop {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }

        .navbar::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        }

        .navbar-title {
            font-family: var(--font-display);
            font-size: 17px; /* Smaller font size */
            font-weight: 600; /* Slightly lighter weight */
            color: #0f172a; /* Black text */
            letter-spacing: 0.3px;
            margin: 0; /* Remove any extra margins */
            padding: 0; /* Remove any extra padding */
        }

        .navbar-right {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .navbar-avatar {
            width: 32px;
            height: 32px;
            background: #e6f4ff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 14px;
            font-weight: 600;
            /* V1.0.0: 移除backdrop-filter，防止点击时闪一下 */
            border: 1.5px solid #b3d9ff;
        }

        .navbar-avatar:active {
            /* V1.0.0: 移除scale效果 */
        }

        .navbar-left {
            display: flex;
            align-items: center;
            gap: 12px;
            /* V1.0.0: 取消transition，防止visibility变化延迟 */
            transition: none;
        }

        .nav-button {
            background: none;
            border: none;
            width: auto;
            height: auto;
            padding: 2px 4px;
            margin: 0 2px;
            border-radius: 2px;
            color: #0f172a;
            font-size: 28px;
            cursor: pointer;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            /* V1.0.11: 使用系统字体渲染箭头，恢复V1.0.0视觉效果 */
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            /* V1.0.0: 去掉动画，防止返回键短暂显示 */
            transition: none;
        }

        .nav-button:active {
            background: rgba(0, 0, 0, 0.1);
        }

        /* V1.0.0: 三个独立点样式 - 保持与原来一致 */
        .nav-dots {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 3px;
            padding: 2px 4px;
            cursor: pointer;
        }

        .nav-dots span {
            width: 3px;
            height: 3px;
            background: #0f172a;
            border-radius: 50%;
        }

        .nav-dots:active {
            background: rgba(0, 0, 0, 0.1);
        }

        .navbar-center {
            flex: 1;
            text-align: center;
        }

        .navbar-right {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        /* ========== 内容区 ========== */
        .content {
            flex: 1;
            position: relative;  /* V1.0.0: 支持子元素absolute定位 */
            overflow-y: auto;  /* 默认滚动，account页面通过JS控制 */
            padding: 0 6px; /* 只保留左右padding */
            scroll-behavior: smooth;
        }

        /* ========== 营业额卡片 ========== */
/* V1.0.0: components.css - 通用组件（日期选择器、下拉菜单等）*/

.tab-bar {
            height: 58px;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(16px);
            display: flex;
            justify-content: space-around;
            align-items: center;
            position: relative;
            z-index: 10;
            box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
            border-top: 1px solid rgba(226, 232, 240, 0.8);
        }

        .tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            cursor: pointer;
            padding: 8px 16px;
            border-radius: 12px;
            transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
            position: relative;
        }

        .tab-item:active {
            background: var(--td-bg-page);
        }

        .tab-icon {
            font-size: 25px;
            transition: all 0.3s ease;
            filter: grayscale(100%);
            opacity: 0.5;
        }

        .tab-item.active .tab-icon {
            filter: grayscale(0%);
            opacity: 1;
            transform: scale(1.1);
        }

        .tab-label {
            font-size: 10px;
            color: var(--td-text-placeholder);
            transition: color 0.3s ease;
        }

        .tab-item.active .tab-label {
            color: var(--td-primary);
            font-weight: 600;
            transition: color 0.3s ease;
        }

        .tab-item.active .tab-label {
            color: var(--td-primary);
            font-weight: 700;
        }

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

        /* ========== 漂浮按钮 - V5.15 浮标下移20px ========== */
        .fab {
            position: absolute;
            bottom: 108px;  /* 下移20px: 原128px - 20px = 108px */
            right: 0;
            width: 28px;
            height: 60px;
            background: #2ECC71;  /* Emerald 翡翠绿 - 更绿更亮 */
            border-radius: 10px 0 0 10px;
            z-index: 200;  /* V1.0.39: 确保在列表固定栏之上 */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding-top: 0;
            padding-bottom: 20px;
            font-size: 11px;
            color: #fff;
            cursor: pointer;
            box-shadow: -2px 4px 12px rgba(46, 204, 113, 0.4);
            font-weight: 500;
            writing-mode: vertical-rl;
            text-orientation: upright;
            letter-spacing: 2px;
            line-height: 1;
        }

        /* 底部白色圆圈 */
        .fab::after {
            content: "";
            position: absolute;
            bottom: 8px;
            left: 50%;
            transform: translateX(-50%);
            width: 14px;
            height: 14px;
            background: #fff;
            border-radius: 50%;
        }

        /* ========== V5.16: 白色圆圈图标修复 ========== */
        /* V1.0.0: 数学括号 ⟩⟨,位置与白色圆圈对齐 */
        .fab::before {
            content: "❯❮";
            position: absolute;
            bottom: 8px;  /* 与白色圆圈底部对齐 */
            left: 50%;
            transform: translateX(-50%) translateY(0) rotate(90deg);
            font-size: 10px;
            color: #2ECC71;
            font-weight: bold;
            z-index: 7;
            line-height: 14px;
            text-align: center;
            width: 14px;
            height: 14px;
            writing-mode: horizontal-tb;
            letter-spacing: 0;
        }

        /* V1.0.0: 详情状态 ⟨⟩ */
        .fab.detail::before {
            content: "❮❯";
            position: absolute;
            bottom: 8px;
            left: 50%;
            transform: translateX(-50%) translateY(0) rotate(90deg);
            font-size: 10px;
            color: #2ECC71;
            font-weight: bold;
            z-index: 7;
            line-height: 14px;
            text-align: center;
            width: 14px;
            height: 14px;
            writing-mode: horizontal-tb;
            letter-spacing: 0;
        }

        .fab:active {
            transform: scale(0.9);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        }

        /* 字母导航样式 */
        .letter-nav {
            position: absolute;
            right: 4px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            opacity: 0.7; /* 半透明 */
        }
        .letter-nav span {
            font-size: 10px;
            color: #666;
            padding: 2px 0;
        }

        /* V1.0.0: 四区域布局CSS */
        .table-wrapper-v850 {
            position: relative;
            width: 100%;
            height: 430px;  /* V1.0.0: 固定高度 */
            background: #fff;
        }
        .fixed-header-row {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 35px;
            display: flex;
            z-index: 100;
            background: #f5f5f5;
        }
        .fixed-top-left {
            width: 100px;
            height: 35px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: #999;
            font-weight: 500;
            background: #f5f5f5;
            border-bottom: 1px solid #e5e5e5;
            border-right: 1px solid #e5e5e5;
            box-sizing: border-box;
        }
        .scrollable-header {
            flex: 1;
            overflow: hidden;
            height: 35px;
        }
        .header-cells {
            display: flex;
            height: 35px;
            min-width: 740px;
        }
        /* V1.0.130: 固定统计行 */
        .fixed-summary-row {
            position: absolute;
            top: 35px;
            left: 0;
            right: 0;
            height: 35px;
            display: flex;
            z-index: 99;
            background: #fafafa;
            border-bottom: 2px solid #e5e5e5;
        }
        .fixed-summary-left {
            width: 100px;
            height: 35px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: #333;
            font-weight: 600;
            background: #fafafa;
            border-right: 1px solid #e5e5e5;
            box-sizing: border-box;
        }
        .scrollable-summary {
            flex: 1;
            overflow: hidden;
            height: 35px;
        }
        .summary-cells {
            display: flex;
            height: 35px;
            min-width: 740px;
        }
        .summary-cells .cell-v850 {
            font-weight: 600;
            color: #333;
            background: #fafafa;
        }
        .scrollable-body {
            position: absolute;
            top: 75px;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
        }
        .fixed-left-col {
            width: 100px;
            flex-shrink: 0;
            overflow: hidden;
            background: #fff;
            border-right: 1px solid #e5e5e5;
        }
        .left-col-cells {
            width: 100%;
        }
        .scrollable-content {
            flex: 1;
            overflow: auto;
        }
        .content-grid {
            min-width: 740px;
        }
        .cell-v850 {
            text-align: center !important;
            width: 60px;
            height: 35px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: #666;
            border-bottom: 1px solid #e5e5e5;
            box-sizing: border-box;
        }
        .header-cells .cell-v850 {
            text-align: center !important;
            color: #333 !important;
            color: #999;
            font-weight: 500;
        }
        .cell-v850.clickable-v850 {
            color: #333 !important;
            cursor: pointer;
            position: relative;
            color: #52c41a;
        }
        .cell-v850.clickable-v850:hover {
            background: rgba(87,107,149,0.1);
        }
        .cell-left-v850 { display: block; line-height: 35px; padding-right: 2px;
            width: 100px;
            height: 35px;
            padding-left: 12px;
            font-size: 13px;
            color: #333;
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            border-bottom: 1px solid #e5e5e5;
            cursor: pointer;
            position: relative;
            background: #fff;
            box-sizing: border-box;
        }
        .cell-left-v850::before {
            content: '▸';
            position: absolute;
            left: 3px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 10px;
            color: #52c41a;
            opacity: 0.6;
            left: 3px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 10px;
            color: #52c41a;
            opacity: 0.5;
        }
        .cell.revenue-cell {
            text-align: right !important;
            color: #333 !important;
        }
        .cell-v850.revenue-cell {
            text-align: right !important;
            justify-content: flex-end !important;
            padding-right: 8px !important;
        }
        .cell-v850.revenue-cell::before {
            content: '▸';
            position: absolute;
            left: 3px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 10px;
            color: #52c41a;
            opacity: 0.5;
        }
        .data-row-v850 {
            display: flex;
            height: 35px;
        }
        /* V1.0.0: 选中店铺行高亮 - 淡渐变粉色（稍加深） */
        .data-row-v877-selected {
            background: linear-gradient(135deg, rgba(255,182,193,0.12) 0%, rgba(255,192,203,0.18) 100%);
        }
        .data-row-v877-selected .cell-v850 {
            background: transparent;
        }
        .cell-left-v877-selected {
            background: linear-gradient(135deg, rgba(255,182,193,0.12) 0%, rgba(255,192,203,0.18) 100%) !important;
        }
        .transfer-done-v850 { color: #52c41a; }
        .transfer-pending-v850 { color: #f5222d; }
        .sort-icon-v850 { margin-left: 2px; font-size: 11px; }
        .conditional-col-v850 { display: flex !important; justify-content: center !important; align-items: center !important; }
        /* V1.0.0: 排序高亮样式 */
        .cell-v850.sorted-v850 {
            background: linear-gradient(180deg, #e0edff 0%, rgba(255,255,255,0.1) 100%) !important;
            color: #333 !important;
            font-weight: 400 !important;
            border-radius: 6px;
            box-shadow: 0 0 0 1px #e0edff, 0 1px 2px rgba(0,0,0,0.05);
            margin: 3px 0 !important;
            height: calc(100% - 6px) !important;
        }
        .sort-icon-v850 {
            margin-left: 3px;
            font-size: 12px;
            color: #333;
        }


        /* ========== V6.24: 店铺选择浮窗 ========== */

        .shop-select-all-wrapper {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .shop-select-all-checkbox {
            width: 18px;
            height: 18px;
            border: 2px solid #d9d9d9;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }

        .shop-select-all-checkbox.checked {
            background: #5b9eff;
            border-color: #5b9eff;
        }

        .shop-select-all-checkbox.checked::after {
            content: '✓';
            color: #fff;
            font-size: 12px;
        }

        .shop-select-all-text {
            font-size: 13px;
            color: #666;
        }

        .shop-confirm-btn {
            padding: 8px 24px;
            background: linear-gradient(180deg, #7cb8ff 0%, #5a9fff 100%);
            border-radius: 6px;
            font-size: 14px;
            color: #fff;
            font-weight: 500;
            cursor: pointer;
        }

        /* 字母导航样式 */
        .letter-nav {
            position: absolute;
            right: 4px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            opacity: 0.7; /* 半透明 */
        }
        .letter-nav span {
            font-size: 10px;
            color: #666;
            padding: 2px 0;
        }

/* 浮窗样式 - customize-modal完整定义在home.css中 */
.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 */
        }