/* ========== Modern Apple/Google Style Design System ========== */
        :root {
            /* Primary Colors - Vibrant & Modern */
            --primary: #0071E3;
            --primary-hover: #0077ED;
            --primary-light: #5AC8FA;
            --primary-gradient: linear-gradient(135deg, #0071E3 0%, #5AC8FA 100%);
            
            /* Semantic Colors */
            --success: #34C759;
            --success-hover: #30D158;
            --success-gradient: linear-gradient(135deg, #34C759 0%, #30D158 100%);
            --warning: #FF9500;
            --warning-hover: #FF9F0A;
            --warning-gradient: linear-gradient(135deg, #FF9500 0%, #FFCC00 100%);
            --danger: #FF3B30;
            --danger-hover: #FF453A;
            --danger-gradient: linear-gradient(135deg, #FF3B30 0%, #FF6B6B 100%);
            --info: #5AC8FA;
            --info-hover: #64D2FF;
            --info-gradient: linear-gradient(135deg, #5AC8FA 0%, #0071E3 100%);
            
            /* Neutral Colors */
            --gray-50: #FAFAFA;
            --gray-100: #F5F5F7;
            --gray-200: #E8E8ED;
            --gray-300: #D2D2D7;
            --gray-400: #AEAEB2;
            --gray-500: #8E8E93;
            --gray-600: #6E6E73;
            --gray-700: #48484A;
            --gray-800: #3A3A3C;
            --gray-900: #1D1D1F;
            --gray: #86868B;
            --gray-light: #F5F5F7;
            --gray-dark: #1D1D1F;
            
            /* Typography - 字体层级系统 */
            --font-xs: 0.75rem;     /* 辅助文字、标签、badge */
            --font-sm: 0.85rem;     /* 次要文字、表格内容 */
            --font-base: 0.95rem;   /* 正文 */
            --font-lg: 1.1rem;      /* 小标题 */
            --font-xl: 1.35rem;     /* 大标题 */
            --font-2xl: 1.75rem;    /* 数字展示 */
            --font-weight-normal: 400;
            --font-weight-medium: 500;
            --font-weight-semibold: 600;
            --font-weight-bold: 700;
            
            /* Text Colors - 语义化文字颜色 */
            --text-primary: var(--gray-900);
            --text-main: var(--gray-900);  /* 主要文字颜色（兼容诊断脚本） */
            --text-secondary: var(--gray-600);
            --text-muted: var(--gray-500);
            --text-placeholder: var(--gray-400);
            --text-inverse: #FFFFFF;
            
            /* Background Colors - 通透背景系统 */
            --bg-main: #F2F4F8;
            --bg-card: rgba(255, 255, 255, 0.72);
            --bg-card-solid: #FFFFFF;
            --bg-card-hover: rgba(255, 255, 255, 0.85);
            --bg-sidebar: linear-gradient(180deg, #1D1D1F 0%, #000000 100%);
            --bg-hover: rgba(0,113,227,0.06);
            --bg-glass: rgba(255, 255, 255, 0.55);
            --bg-glass-strong: rgba(255, 255, 255, 0.85);
            --bg-overlay: rgba(0, 0, 0, 0.4);
            --bg-modal: rgba(255, 255, 255, 0.88);
            
            /* Blur - 模糊层级 */
            --blur-sm: blur(8px);
            --blur-md: blur(16px);
            --blur-lg: blur(24px);
            --blur-xl: blur(40px);
            
            /* Shadows - 柔和阴影 */
            --shadow-xs: 0 1px 3px rgba(0,0,0,0.03);
            --shadow-sm: 0 2px 12px rgba(0,0,0,0.04);
            --shadow-md: 0 4px 20px rgba(0,0,0,0.06);
            --shadow-lg: 0 8px 40px rgba(0,0,0,0.08);
            --shadow-xl: 0 16px 60px rgba(0,0,0,0.10);
            --shadow-glow: 0 0 24px rgba(0,113,227,0.12);
            --shadow-card: 0 1px 3px rgba(0,0,0,0.02), 0 4px 12px rgba(0,0,0,0.04);
            --shadow-glass: 0 8px 32px rgba(0,0,0,0.06), inset 0 0 0 1px rgba(255,255,255,0.3);
            
            /* Border Radius */
            --radius-xs: 4px;
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 16px;
            --radius-xl: 24px;
            --radius-full: 9999px;
            
            /* Transitions */
            --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
            --transition-normal: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            --transition-slow: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            --transition-bounce: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            
            /* Spacing System */
            --space-1: 4px;
            --space-2: 8px;
            --space-3: 12px;
            --space-4: 16px;
            --space-5: 20px;
            --space-6: 24px;
            --space-8: 32px;
            --space-10: 40px;
            --space-12: 48px;
            
            /* Border Colors */
            --border-light: rgba(0,0,0,0.04);
            --border-normal: rgba(0,0,0,0.08);
            --border-focus: var(--primary);
            --border-glass: rgba(255,255,255,0.4);
        }
        
        * { box-sizing: border-box; }
        
        body {
            background: var(--bg-main);
            font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Microsoft YaHei", sans-serif;
            color: var(--gray-dark);
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
        }
        
        /* ========== Page Load Animation ========== */
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes slideInLeft {
            from { opacity: 0; transform: translateX(-20px); }
            to { opacity: 1; transform: translateX(0); }
        }
        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }
        @keyframes shimmer {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }
        
        .animate-fade-in { animation: fadeIn 0.4s ease-out; }
        .animate-fade-in-up { animation: fadeInUp 0.5s ease-out; }
        .animate-slide-in { animation: slideInLeft 0.4s ease-out; }
        
        /* ========== 侧边栏 - Modern Apple/Google风格 ========== */
        .sidebar {
            position: fixed;
            top: 0;
            left: 0;
            height: 100vh;
            width: 260px;
            background: var(--bg-sidebar);
            padding: 0;
            z-index: 1000;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            transition: var(--transition-normal);
        }
        .sidebar .logo {
            color: #fff;
            font-size: var(--font-xl);
            font-weight: 700;
            text-align: center;
            padding: 28px 20px 24px;
            letter-spacing: -0.5px;
            border-bottom: 1px solid rgba(255,255,255,0.06);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
        }
        .sidebar .logo i {
            font-size: var(--font-2xl);
            background: linear-gradient(135deg, var(--primary-light), var(--primary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            filter: drop-shadow(0 2px 4px rgba(0,113,227,0.3));
        }
        .sidebar .nav-container {
            flex: 1;
            padding: 16px 12px;
            overflow-y: auto;
        }
        .sidebar .nav-container::-webkit-scrollbar {
            width: 4px;
        }
        .sidebar .nav-container::-webkit-scrollbar-track {
            background: transparent;
        }
        .sidebar .nav-container::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,0.1);
            border-radius: 2px;
        }
        .sidebar .nav-section-title {
            color: var(--border-glass);
            font-size: var(--font-xs);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            padding: 20px 14px 8px;
            margin-top: 8px;
            border-bottom: none;
            margin-bottom: 4px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .sidebar .nav-section-title i {
            font-size: var(--font-sm);
            opacity: 0.6;
        }
        .sidebar .nav-section-title:first-child {
            margin-top: 0;
            padding-top: 8px;
        }
        .sidebar .nav-item {
            padding: 11px 14px;
            color: rgba(255,255,255,0.65);
            cursor: pointer;
            transition: var(--transition-normal);
            border-radius: var(--radius-sm);
            margin-bottom: 2px;
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: var(--font-sm);
            margin-left: 4px;
            margin-right: 4px;
            position: relative;
            overflow: hidden;
        }
        .sidebar .nav-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%) scaleY(0);
            width: 3px;
            height: 60%;
            background: var(--primary);
            border-radius: 0 2px 2px 0;
            transition: var(--transition-normal);
        }
        .sidebar .nav-item:hover {
            background: rgba(255,255,255,0.06);
            color: rgba(255,255,255,0.95);
            transform: translateX(2px);
        }
        .sidebar .nav-item.active {
            background: rgba(0,113,227,0.2);
            color: #fff;
            font-weight: 600;
        }
        .sidebar .nav-item.active::before {
            transform: translateY(-50%) scaleY(1);
        }
        .sidebar .nav-item i {
            font-size: var(--font-lg);
            width: 24px;
            text-align: center;
            opacity: 0.7;
            transition: var(--transition-normal);
        }
        .sidebar .nav-item:hover i {
            opacity: 1;
            transform: scale(1.1);
        }
        .sidebar .nav-item.active i {
            opacity: 1;
            color: var(--primary-light);
        }
        
        /* 主内容区 - 通透层次背景 */
        .main-content {
            margin-left: 260px;
            padding: var(--space-6) var(--space-8);
            min-height: 100vh;
            animation: fadeIn 0.4s ease-out;
            background: 
                radial-gradient(ellipse at 20% 0%, rgba(90, 200, 250, 0.08) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 100%, var(--bg-hover) 0%, transparent 50%),
                linear-gradient(180deg, #F8FAFC 0%, #EEF2F7 50%, #F1F5F9 100%);
        }
        
        /* 页面标题区 - 玻璃态通透效果 */
        .page-header {
            background: var(--bg-glass-strong);
            backdrop-filter: var(--blur-md);
            -webkit-backdrop-filter: var(--blur-md);
            padding: var(--space-6) var(--space-6);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-glass);
            margin-bottom: var(--space-6);
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: var(--space-4);
            animation: fadeInUp 0.5s ease-out;
            border: 1px solid var(--border-glass);
        }
        .page-header h4 {
            margin: 0;
            color: var(--text-primary);
            font-size: var(--font-xl);
            font-weight: var(--font-weight-bold);
            letter-spacing: -0.5px;
            display: flex;
            align-items: center;
            gap: var(--space-3);
        }
        .page-header h4 i {
            font-size: var(--font-xl);
            color: var(--primary);
        }
        .user-type-badge {
            display: inline-flex;
            align-items: center;
            padding: var(--space-1) var(--space-3);
            border-radius: var(--radius-full);
            font-size: var(--font-xs);
            font-weight: var(--font-weight-bold);
            letter-spacing: 0.5px;
        }
        .user-type-badge.rental {
            background: linear-gradient(135deg, #FF9500, #FF6B00);
            color: white;
        }
        .user-type-badge.coldstorage {
            background: linear-gradient(135deg, #0071E3, #5AC8FA);
            color: white;
        }
        .user-type-badge i {
            margin-right: 4px;
        }
        .page-header .header-actions {
            display: flex;
            gap: var(--space-2);
            flex-wrap: wrap;
        }
        
        /* 卡片组件 - 玻璃态通透效果 */
        .card {
            border: none;
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-glass);
            margin-bottom: var(--space-5);
            background: var(--bg-glass-strong);
            backdrop-filter: var(--blur-md);
            -webkit-backdrop-filter: var(--blur-md);
            overflow: hidden;
            transition: var(--transition-normal);
            border: 1px solid var(--border-glass);
            animation: fadeInUp 0.5s ease-out;
        }
        .card:hover {
            box-shadow: var(--shadow-lg);
            transform: translateY(-2px);
            background: var(--bg-card-hover);
        }
        .card-header {
            background: var(--bg-glass);
            border-bottom: 1px solid var(--border-light);
            font-weight: var(--font-weight-semibold);
            padding: var(--space-4) var(--space-6);
            font-size: var(--font-base);
            color: var(--text-primary);
        }
        .card-body {
            padding: var(--space-5) var(--space-6);
        }

        /* 表格样式 - 统一通透风格 */
        .table {
            margin-bottom: 0;
            font-size: var(--font-sm);
        }
        .table thead th {
            border-bottom: 2px solid var(--border-light);
            background: rgba(248,250,252,0.6);
            backdrop-filter: var(--blur-sm);
            -webkit-backdrop-filter: var(--blur-sm);
            font-weight: var(--font-weight-semibold);
            color: var(--text-secondary);
            font-size: var(--font-xs);
            text-transform: uppercase;
            letter-spacing: 0.3px;
            padding: var(--space-3) var(--space-4);
        }
        .table td, .table th {
            padding: var(--space-3) var(--space-4);
            vertical-align: middle;
            border-color: var(--border-light);
        }
        .table tbody tr {
            transition: var(--transition-fast);
        }
        .table tbody tr:hover {
            background: rgba(0,113,227,0.04);
        }
        .table tbody tr:hover td {
            color: var(--text-primary);
        }
        /* 多库位客户行悬停联动高亮 */
        .table tbody tr.cs-row-hover {
            background: rgba(0,113,227,0.04);
        }
        .table tbody tr.cs-row-hover td {
            color: var(--text-primary);
        }
        /* 冷库客户表格 - 合并单元格悬停样式修复 */
        #csCustomerTable tbody tr:hover,
        #csCustomerTable tbody tr.cs-row-hover {
            background: rgba(0,113,227,0.04);
        }
        #csCustomerTable tbody tr:hover td,
        #csCustomerTable tbody tr.cs-row-hover td {
            color: var(--text-primary);
        }
        #csCustomerTable td[rowspan] {
            vertical-align: middle;
            white-space: nowrap;
        }

        /* 按钮 - 统一风格 */
        .btn {
            border-radius: var(--radius-sm);
            padding: var(--space-2) var(--space-4);
            font-weight: var(--font-weight-semibold);
            font-size: var(--font-sm);
            border: none;
            transition: var(--transition-normal);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-2);
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .btn::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255,255,255,0.2);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.4s, height 0.4s;
        }
        .btn:active::after {
            width: 200px;
            height: 200px;
        }
        .btn-primary {
            background: var(--primary);
            color: #fff;
        }
        .btn-primary:hover {
            background: var(--primary-hover);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,113,227,0.3);
        }
        .btn-primary:active {
            transform: translateY(0);
        }
        .btn-success { 
            background: var(--success-gradient); 
            color: #fff; 
            border: none;
        }
        .btn-success:hover { 
            transform: translateY(-2px); 
            box-shadow: 0 4px 12px rgba(52,199,89,0.3);
        }
        .btn-danger { 
            background: var(--danger-gradient); 
            color: #fff; 
        }
        .btn-danger:hover { 
            transform: translateY(-2px); 
            box-shadow: 0 4px 12px rgba(255,59,48,0.3);
        }
        .btn-warning { 
            background: var(--warning-gradient); 
            color: #fff; 
        }
        .btn-warning:hover { 
            transform: translateY(-2px); 
            box-shadow: 0 4px 12px rgba(255,149,0,0.3);
        }
        .btn-info {
            background: var(--info-gradient);
            color: #fff;
        }
        .btn-info:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(90,200,250,0.3);
        }
        .btn-outline-primary {
            background: transparent;
            border: 1.5px solid var(--primary);
            color: var(--primary);
        }
        .btn-outline-primary:hover {
            background: rgba(0,113,227,0.12);
            transform: translateY(-1px);
            border-color: var(--primary-hover);
            box-shadow: 0 2px 8px rgba(0,113,227,0.15);
        }
        .btn-outline-warning {
            background: transparent;
            border: 1.5px solid var(--warning);
            color: var(--warning);
        }
        .btn-outline-warning:hover {
            background: rgba(255,149,0,0.12);
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(255,149,0,0.15);
        }
        .btn-outline-danger {
            background: transparent;
            border: 1.5px solid var(--danger);
            color: var(--danger);
        }
        .btn-outline-danger:hover {
            background: rgba(255,59,48,0.12);
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(255,59,48,0.15);
        }
        .btn-outline-info {
            background: transparent;
            border: 1.5px solid var(--info);
            color: var(--info);
        }
        .btn-outline-info:hover {
            background: rgba(90,200,250,0.12);
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(90,200,250,0.15);
        }
        .btn-outline-success {
            background: transparent;
            border: 1.5px solid var(--success);
            color: var(--success);
        }
        .btn-outline-success:hover {
            background: rgba(52,199,89,0.12);
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(52,199,89,0.15);
        }
        .btn-outline-secondary {
            background: transparent;
            border: 1.5px solid var(--gray-400);
            color: var(--gray-600);
        }
        .btn-outline-secondary:hover {
            background: rgba(100,116,139,0.12);
            transform: translateY(-1px);
            color: #475569;
            border-color: #64748b;
        }
        .btn-sm {
            padding: var(--space-1) var(--space-3);
            font-size: var(--font-xs);
            border-radius: var(--radius-xs);
        }
        /* 搜索框小尺寸 - 与按钮组协调 */
        .form-control-sm {
            padding: var(--space-1) var(--space-3);
            font-size: var(--font-xs);
            border-radius: var(--radius-xs);
            height: 32px;
            border: 1.5px solid var(--border-normal);
            background: rgba(255,255,255,0.9);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            transition: var(--transition-normal);
        }
        .form-control-sm:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(0,113,227,0.1);
            outline: none;
        }
        .form-control-sm:hover {
            border-color: rgba(0,0,0,0.16);
        }
        .btn i {
            font-size: var(--font-base);
            transition: var(--transition-normal);
        }
        .btn:hover i {
            transform: scale(1.1);
        }
        .btn-light {
            background: var(--gray-100);
            color: var(--gray-700);
            border: 1px solid var(--gray-200);
        }
        .btn-light:hover {
            background: rgba(100,116,139,0.1);
            color: #475569;
            border-color: #94a3b8;
            transform: translateY(-1px);
        }

        /* ========== 现代化登录页面样式 ========== */
        .login-container {
            display: flex;
            min-height: 100vh;
            position: relative;
            overflow: hidden;
        }
        
        /* 动态渐变背景 */
        .login-bg {
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
            z-index: 0;
        }
        
        .login-bg::before {
            content: '';
            position: absolute;
            inset: 0;
            background: 
                radial-gradient(ellipse at 20% 80%, rgba(0, 113, 227, 0.15) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 20%, rgba(90, 200, 250, 0.1) 0%, transparent 50%),
                radial-gradient(ellipse at 50% 50%, rgba(100, 100, 180, 0.08) 0%, transparent 60%);
            animation: bgPulse 8s ease-in-out infinite;
        }
        
        @keyframes bgPulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }
        
        /* 浮动几何装饰 */
        .login-shapes {
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            overflow: hidden;
        }
        
        .shape {
            position: absolute;
            border-radius: 50%;
            background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02));
            backdrop-filter: blur(2px);
        }
        
        .shape-1 {
            width: 400px;
            height: 400px;
            top: -100px;
            left: -100px;
            animation: float1 20s ease-in-out infinite;
        }
        
        .shape-2 {
            width: 300px;
            height: 300px;
            bottom: -50px;
            right: 10%;
            animation: float2 15s ease-in-out infinite;
        }
        
        .shape-3 {
            width: 200px;
            height: 200px;
            top: 40%;
            right: -50px;
            animation: float3 18s ease-in-out infinite;
        }
        
        @keyframes float1 {
            0%, 100% { transform: translate(0, 0) rotate(0deg); }
            33% { transform: translate(30px, 30px) rotate(120deg); }
            66% { transform: translate(-20px, 20px) rotate(240deg); }
        }
        
        @keyframes float2 {
            0%, 100% { transform: translate(0, 0) rotate(0deg); }
            50% { transform: translate(-40px, -30px) rotate(180deg); }
        }
        
        @keyframes float3 {
            0%, 100% { transform: translate(0, 0) scale(1); }
            50% { transform: translate(-30px, 20px) scale(1.1); }
        }
        
        /* 左侧品牌区域 */
        .login-brand {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 60px;
            position: relative;
            z-index: 2;
        }
        
        .brand-content {
            text-align: center;
            color: white;
            max-width: 480px;
        }
        
        .brand-logo {
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, var(--primary), var(--primary-light));
            border-radius: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 32px;
            box-shadow: 
                0 20px 60px rgba(0, 113, 227, 0.4),
                0 0 0 1px rgba(255,255,255,0.1) inset;
            animation: logoFloat 4s ease-in-out infinite;
        }
        
        @keyframes logoFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        
        .brand-logo i {
            font-size: 3rem;
            color: white;
        }
        
        .brand-title {
            font-size: 2.8rem;
            font-weight: 700;
            margin-bottom: 16px;
            background: linear-gradient(135deg, #ffffff 0%, #a8d4ff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            letter-spacing: -0.5px;
        }
        
        .brand-subtitle {
            font-size: var(--font-lg);
            color: rgba(255,255,255,0.7);
            margin-bottom: 40px;
            line-height: 1.6;
        }
        
        .brand-features {
            display: flex;
            gap: 32px;
            justify-content: center;
        }
        
        .feature-item {
            display: flex;
            align-items: center;
            gap: 10px;
            color: rgba(255,255,255,0.8);
            font-size: var(--font-base);
        }
        
        .feature-item i {
            font-size: var(--font-xl);
            color: var(--primary-light);
        }
        
        /* 右侧登录表单区域 */
        .login-form-section {
            width: 480px;
            min-width: 480px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px;
            position: relative;
            z-index: 2;
        }
        
        .login-form-section::before {
            content: '';
            position: absolute;
            left: 0;
            top: 10%;
            bottom: 10%;
            width: 1px;
            background: linear-gradient(180deg, transparent, rgba(255,255,255,0.1), transparent);
        }
        
        .login-box {
            width: 100%;
            max-width: 380px;
            background: rgba(255,255,255,0.03);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 24px;
            padding: 48px 40px;
            border: 1px solid rgba(255,255,255,0.08);
            box-shadow: 
                0 32px 64px rgba(0,0,0,0.3),
                inset 0 0 0 1px rgba(255,255,255,0.05);
        }
        
        .login-header {
            text-align: center;
            margin-bottom: 36px;
        }
        
        .login-header h3 {
            color: white;
            font-size: var(--font-2xl);
            font-weight: 600;
            margin-bottom: 8px;
        }
        
        .login-header p {
            color: var(--bg-glass);
            font-size: var(--font-base);
        }
        
        /* 现代表单输入框 */
        .login-box .form-group {
            position: relative;
            margin-bottom: 24px;
        }
        
        .login-box .form-label {
            display: block;
            color: rgba(255,255,255,0.6);
            font-size: var(--font-sm);
            font-weight: 500;
            margin-bottom: 8px;
            transition: all 0.3s ease;
        }
        
        .login-box .input-group {
            position: relative;
            display: block;
        }
        
        .login-box .input-group-text {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            width: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: none;
            color: var(--border-glass);
            z-index: 2;
            transition: all 0.3s ease;
            padding: 0;
        }
        
        .login-box .form-control {
            width: 100%;
            padding: 16px 16px 16px 52px;
            background: rgba(255,255,255,0.05);
            border: 1.5px solid rgba(255,255,255,0.1);
            border-radius: 14px;
            color: white;
            font-size: var(--font-base);
            transition: all 0.3s ease;
        }
        
        .login-box .form-control::placeholder {
            color: rgba(255,255,255,0.3);
        }
        
        .login-box .form-control:focus {
            outline: none;
            background: rgba(255,255,255,0.08);
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15);
        }
        
        .login-box .form-control:focus ~ .input-group-text {
            color: var(--primary-light);
        }
        
        /* 记住我复选框 */
        .login-box .form-check {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 24px;
        }
        
        .login-box .form-check-input {
            width: 18px;
            height: 18px;
            background: rgba(255,255,255,0.05);
            border: 1.5px solid rgba(255,255,255,0.2);
            border-radius: 5px;
            cursor: pointer;
        }
        
        .login-box .form-check-input:checked {
            background: var(--primary);
            border-color: var(--primary);
        }
        
        .login-box .form-check-label {
            color: rgba(255,255,255,0.6);
            font-size: var(--font-base);
            cursor: pointer;
        }
        
        /* 登录按钮 */
        .login-box .btn-login {
            width: 100%;
            padding: 16px;
            background: linear-gradient(135deg, var(--primary) 0%, #005bb5 100%);
            border: none;
            border-radius: 14px;
            color: white;
            font-size: var(--font-base);
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .login-box .btn-login::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .login-box .btn-login:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0, 113, 227, 0.4);
        }
        
        .login-box .btn-login:hover::before {
            opacity: 1;
        }
        
        .login-box .btn-login i {
            margin-right: 8px;
        }
        
        /* 快速登录按钮 */
        .login-box .btn-quick {
            width: 100%;
            padding: 14px;
            margin-top: 12px;
            background: transparent;
            border: 1.5px solid rgba(255,255,255,0.15);
            border-radius: 14px;
            color: rgba(255,255,255,0.8);
            font-size: var(--font-base);
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .login-box .btn-quick:hover {
            background: rgba(255,255,255,0.05);
            border-color: rgba(255,255,255,0.25);
        }
        
        .login-box .btn-quick i {
            margin-right: 8px;
        }
        
        .login-footer {
            text-align: center;
            margin-top: 28px;
            padding-top: 24px;
            border-top: 1px solid rgba(255,255,255,0.08);
        }
        
        .login-footer small {
            color: var(--border-glass);
            display: block;
            margin-bottom: 8px;
        }
        
        .login-footer .btn-link {
            color: var(--primary-light);
            text-decoration: none;
            font-size: var(--font-sm);
            padding: 4px 12px;
            border-radius: 6px;
            transition: all 0.3s ease;
        }
        
        .login-footer .btn-link:hover {
            background: rgba(90, 200, 250, 0.1);
        }
        
        /* ========== 现代化用户类型选择页面样式 ========== */
        .user-type-container {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            position: relative;
            overflow: hidden;
        }
        
        /* 动态背景 */
        .user-type-bg {
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #16213e 100%);
            z-index: 0;
        }
        
        .user-type-bg::before {
            content: '';
            position: absolute;
            inset: 0;
            background: 
                radial-gradient(ellipse at 30% 0%, rgba(90, 200, 250, 0.08) 0%, transparent 50%),
                radial-gradient(ellipse at 70% 100%, rgba(255, 149, 0, 0.06) 0%, transparent 50%),
                radial-gradient(ellipse at 50% 50%, rgba(102, 126, 234, 0.05) 0%, transparent 60%);
        }
        
        /* 网格装饰 */
        .user-type-grid {
            position: absolute;
            inset: 0;
            z-index: 1;
            background-image: 
                linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
            background-size: 60px 60px;
            pointer-events: none;
        }
        
        /* 头部区域 */
        .user-type-header-section {
            position: relative;
            z-index: 2;
            padding: 60px 40px 40px;
            text-align: center;
        }
        
        .user-type-header-section .header-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 24px;
            background: linear-gradient(135deg, var(--primary), var(--primary-light));
            border-radius: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 16px 48px rgba(0,113,227,0.3);
            animation: iconPulse 3s ease-in-out infinite;
        }
        
        @keyframes iconPulse {
            0%, 100% { transform: scale(1); box-shadow: 0 16px 48px rgba(0,113,227,0.3); }
            50% { transform: scale(1.05); box-shadow: 0 20px 60px rgba(0, 113, 227, 0.4); }
        }
        
        .user-type-header-section .header-icon i {
            font-size: 2.2rem;
            color: white;
        }
        
        .user-type-header-section h1 {
            font-size: 2.2rem;
            font-weight: 700;
            color: white;
            margin-bottom: 12px;
            letter-spacing: -0.5px;
        }
        
        .user-type-header-section p {
            color: var(--bg-glass);
            font-size: var(--font-base);
        }
        
        /* 卡片区域 */
        .user-type-cards-section {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px 40px 60px;
            position: relative;
            z-index: 2;
        }
        
        .user-type-cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 28px;
            max-width: 1100px;
            width: 100%;
        }
        
        /* 3D卡片样式 */
        .user-type-card {
            position: relative;
            background: rgba(255,255,255,0.03);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 28px;
            padding: 40px 32px;
            text-align: center;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border: 1px solid rgba(255,255,255,0.06);
            overflow: hidden;
            transform-style: preserve-3d;
            perspective: 1000px;
        }
        
        .user-type-card::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 28px;
            padding: 1px;
            background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent 50%);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
        }
        
        /* 卡片光晕效果 */
        .user-type-card::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, var(--card-glow) 0%, transparent 60%);
            opacity: 0;
            transition: opacity 0.4s ease;
            pointer-events: none;
        }
        
        .user-type-card:hover::after {
            opacity: 0.15;
        }
        
        .user-type-card:hover {
            transform: translateY(-12px) rotateX(5deg);
            border-color: rgba(255,255,255,0.15);
            box-shadow: 
                0 32px 64px var(--bg-overlay),
                0 0 0 1px rgba(255,255,255,0.1) inset;
        }
        
        /* 卡片图标 */
        .user-type-card .card-icon {
            width: 90px;
            height: 90px;
            margin: 0 auto 24px;
            border-radius: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            transition: all 0.4s ease;
        }
        
        .user-type-card .card-icon::before {
            content: '';
            position: absolute;
            inset: -4px;
            border-radius: 28px;
            background: inherit;
            filter: blur(20px);
            opacity: 0.4;
            z-index: -1;
        }
        
        .user-type-card .card-icon i {
            font-size: 2.8rem;
            color: white;
        }
        
        /* 冷库卡片 */
        .user-type-card.cold-storage {
            --card-glow: rgba(90, 200, 250, 0.5);
        }
        
        .user-type-card.cold-storage .card-icon {
            background: linear-gradient(135deg, #5AC8FA 0%, #0071E3 100%);
        }
        
        .user-type-card.cold-storage:hover .card-icon {
            transform: scale(1.1) rotate(-5deg);
        }
        
        /* 租赁卡片 */
        .user-type-card.rental {
            --card-glow: rgba(52, 199, 89, 0.5);
        }
        
        .user-type-card.rental .card-icon {
            background: linear-gradient(135deg, #34C759 0%, #30D158 100%);
        }
        
        .user-type-card.rental:hover .card-icon {
            transform: scale(1.1) rotate(5deg);
        }
        
        /* 对账卡片 */
        .user-type-card.reconciliation {
            --card-glow: rgba(102, 126, 234, 0.5);
        }
        
        .user-type-card.reconciliation .card-icon {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .user-type-card.reconciliation:hover .card-icon {
            transform: scale(1.1) rotate(-3deg);
        }
        
        /* 卡片内容 */
        .user-type-card h4 {
            color: white;
            font-size: var(--font-xl);
            font-weight: 600;
            margin-bottom: 12px;
        }
        
        .user-type-card p {
            color: var(--bg-glass);
            font-size: var(--font-base);
            line-height: 1.6;
            margin-bottom: 20px;
        }
        
        /* 卡片标签 */
        .user-type-card .card-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: center;
        }
        
        .user-type-card .card-tag {
            padding: 6px 14px;
            background: rgba(255,255,255,0.06);
            border-radius: 20px;
            font-size: var(--font-sm);
            color: rgba(255,255,255,0.6);
            transition: all 0.3s ease;
        }
        
        .user-type-card:hover .card-tag {
            background: rgba(255,255,255,0.1);
            color: rgba(255,255,255,0.8);
        }
        
        /* 底部区域 */
        .user-type-footer {
            position: relative;
            z-index: 2;
            padding: 24px 40px;
            text-align: center;
            border-top: 1px solid rgba(255,255,255,0.06);
        }
        
        .user-type-footer .btn-logout {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 24px;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 12px;
            color: rgba(255,255,255,0.6);
            font-size: var(--font-base);
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .user-type-footer .btn-logout:hover {
            background: rgba(255,255,255,0.08);
            color: rgba(255,255,255,0.9);
            border-color: rgba(255,255,255,0.2);
        }
        
        .user-type-footer .btn-logout i {
            font-size: var(--font-base);
        }
        /* 用户信息区 */
        .user-info {
            position: fixed;
            top: 20px;
            right: 28px;
            z-index: 1001;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .user-info .user-name {
            color: var(--gray);
            font-size: var(--font-sm);
            font-weight: 500;
        }
        .user-info .dropdown-menu {
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-lg);
            border: none;
            padding: 8px;
            min-width: 180px;
        }
        .user-info .dropdown-item {
            border-radius: 6px;
            padding: 10px 14px;
            font-size: var(--font-sm);
            transition: var(--transition);
        }
        .user-info .dropdown-item:hover {
            background: var(--gray-light);
        }
        .user-info .btn {
            padding: 6px 14px;
            font-size: var(--font-sm);
            border-radius: 20px;
            background: var(--gray-light);
            color: var(--gray-dark);
            border: none;
        }
        .user-info .btn:hover {
            background: #E8E8ED;
        }
        
        /* 表单控件 - Modern Apple/Google风格 */
        .input-group-text {
            background: var(--gray-50);
            border: 1.5px solid var(--border-normal);
            border-radius: var(--radius-sm) 0 0 var(--radius-sm);
            font-size: var(--font-sm);
            color: var(--gray-500);
        }
        .form-control, .form-select {
            border-radius: var(--radius-sm);
            border: 1.5px solid var(--border-normal);
            padding: 11px 16px;
            font-size: var(--font-base);
            transition: var(--transition-normal);
            background: rgba(255,255,255,0.9);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
        .form-control:focus, .form-select:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(0,113,227,0.12);
            outline: none;
        }
        .form-control:hover, .form-select:hover {
            border-color: rgba(0,0,0,0.2);
        }
        .form-label {
            font-weight: 600;
            color: var(--gray-700);
            margin-bottom: 8px;
            font-size: var(--font-sm);
        }
        
        /* 统计卡片 - Modern Gradient Style */
        .summary-card {
            background: linear-gradient(135deg, var(--primary) 0%, #5856D6 100%);
            color: #fff;
            border-radius: var(--radius-lg);
            padding: 24px 28px;
            margin-bottom: 20px;
            box-shadow: var(--shadow-md);
            transition: var(--transition-normal);
            position: relative;
            overflow: hidden;
        }
        .summary-card::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
            transition: var(--transition-slow);
        }
        .summary-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-lg);
        }
        .summary-card:hover::before {
            top: -30%;
            right: -30%;
        }
        .summary-card h6 { 
            opacity: 0.85; 
            font-size: var(--font-xs); 
            font-weight: var(--font-weight-semibold); 
            text-transform: uppercase; 
            letter-spacing: 0.8px; 
            margin-bottom: var(--space-2);
        }
        .summary-card h2 { 
            margin: 0; 
            font-weight: 800; 
            font-size: var(--font-2xl); 
            letter-spacing: -1px; 
        }
        .summary-card i { 
            font-size: var(--font-2xl); 
            opacity: 0.8;
            transition: var(--transition-normal);
        }
        .summary-card:hover i {
            transform: scale(1.1);
            opacity: 1;
        }
        .summary-card.secondary { 
            background: linear-gradient(135deg, #636366 0%, #48484A 100%); 
        }
        .summary-card.success { 
            background: linear-gradient(135deg, #34C759 0%, #30D158 100%); 
        }
        .summary-card.warning { 
            background: linear-gradient(135deg, #FF9500 0%, #FFCC00 100%); 
            color: #fff; 
        }
        .summary-card.danger { 
            background: linear-gradient(135deg, #FF3B30 0%, #FF6B6B 100%); 
        }
        .summary-card.info { 
            background: linear-gradient(135deg, #5AC8FA 0%, #64D2FF 100%); 
        }
        
        /* 模态框 - 玻璃态通透效果 */
        .modal-content {
            border-radius: var(--radius-xl);
            border: none;
            box-shadow: var(--shadow-xl);
            overflow: hidden;
            animation: fadeInUp 0.3s ease-out;
            background: rgba(255,255,255,0.92);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
        }
        .modal-header {
            background: var(--bg-card);
            color: var(--gray-dark);
            padding: 22px 28px;
            border-bottom: 1px solid rgba(0,0,0,0.05);
        }
        .modal-header h5 {
            font-weight: 700;
            font-size: var(--font-lg);
            letter-spacing: -0.3px;
        }
        .modal-header .btn-close {
            opacity: 0.4;
            transition: var(--transition-normal);
            width: 12px;
            height: 12px;
        }
        .modal-header .btn-close:hover {
            opacity: 1;
            transform: rotate(90deg);
        }
        .modal-body {
            padding: 28px;
        }
        .modal-footer {
            padding: 18px 28px;
            background: var(--gray-50);
            border-top: 1px solid var(--border-light);
        }
        
        /* Toast提示 - Modern Apple/Google风格 */
        .toast-container { 
            position: fixed; 
            top: 24px; 
            right: 24px; 
            z-index: 9999; 
        }
        .toast {
            background: rgba(29,29,31,0.95);
            color: #fff;
            border-radius: var(--radius-md);
            padding: 16px 24px;
            box-shadow: var(--shadow-lg);
            border: none;
            font-size: var(--font-base);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            animation: slideInLeft 0.3s ease-out;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .toast.success { 
            background: rgba(52,199,89,0.95); 
        }
        .toast.warning { 
            background: rgba(255,149,0,0.95); 
        }
        .toast.danger { 
            background: rgba(255,59,48,0.95); 
        }
        .toast.info { 
            background: rgba(90,200,250,0.95); 
        }
        .toast i {
            font-size: var(--font-lg);
        }
        
        /* 抄表表格核心样式 - Apple风格 */
        .meter-table { 
            font-size: var(--font-sm); 
            width: auto;
            min-width: 100%;
            border-collapse: separate;
            border-spacing: 0;
        }
        .meter-table th { 
            position: sticky; 
            top: 0; 
            z-index: 10;
            background: var(--gray-light) !important;
        }
        .meter-table .meter-header { 
            writing-mode: vertical-lr; 
            transform: rotate(180deg); 
            height: 80px; 
            min-width: 30px;
            font-weight: 500;
            letter-spacing: 0.3px;
        }
        .meter-table .customer-row { 
            background: var(--gray-light) !important; 
            font-weight: 600;
        }
        
        /* 通用数字输入框 - Apple风格 */
        .meter-table input[type="number"] { 
            width: 100%; 
            padding: 6px 8px; 
            text-align: right; 
            border: 1.5px solid var(--border-normal); 
            border-radius: 6px;
            font-size: var(--font-sm);
            box-sizing: border-box;
            background: #fff;
            transition: var(--transition);
            /* 隐藏/控制数字调节箭头，防止超出格子 */
            -moz-appearance: textfield;
            appearance: textfield;
        }
        .meter-table input[type="number"]::-webkit-outer-spin-button,
        .meter-table input[type="number"]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            appearance: none;
            margin: 0;
        }
        .meter-table input[type="number"]:focus { 
            border-color: var(--primary); 
            outline: none; 
            box-shadow: 0 0 0 3px rgba(0,113,227,0.1); 
        }
        .meter-table .elec-cell { background: rgba(255,149,0,0.06); }
        .meter-table .water-cell { background: rgba(90,200,250,0.08); }
        
        /* 电表输入框样式 - 分时段 */
        .meter-table .peak-reading, .meter-table .flat-reading, .meter-table .valley-reading {
            width: 85px !important;
            height: 34px !important;
            font-size: var(--font-sm) !important;
            padding: 4px 8px !important;
            text-align: right;
        }
        /* 普通电表输入框 */
        .meter-table .current-reading {
            width: 95px !important;
            height: 34px !important;
            font-size: var(--font-sm) !important;
            padding: 4px 8px !important;
            text-align: right;
        }
        /* 调整值输入框样式 */
        .meter-table .elec-adjust-input, .meter-table .water-adjust-input {
            width: 60px !important;
            height: 34px !important;
            font-size: var(--font-sm) !important;
            padding: 4px 6px !important;
            text-align: center;
            box-sizing: border-box;
        }
        /* 有调整值的特殊样式 */
        .meter-table .elec-adjust-input.has-adjust, .meter-table .water-adjust-input.has-adjust {
            background: rgba(255,149,0,0.12) !important;
            border-color: var(--warning) !important;
            font-weight: 600;
        }
        /* 金额显示格 */
        .meter-table .amount-cell {
            min-width: 78px;
            font-size: var(--font-sm);
            padding: 6px 8px !important;
            text-align: right;
            vertical-align: middle;
            font-weight: 600;
        }
        /* 表头样式优化 */
        .meter-table thead th {
            font-size: var(--font-xs);
            font-weight: 600;
            padding: 8px 6px;
            vertical-align: middle;
            white-space: nowrap;
            color: var(--gray);
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }
        /* 客户名称列优化 */
        .meter-table td:first-child, .meter-table th:first-child {
            min-width: 68px;
            max-width: 82px;
            white-space: nowrap;
            font-size: var(--font-sm);
        }
        .meter-table .amount-cell { font-weight: bold; background: var(--gray-light); }
        .meter-table .subtotal { background: rgba(52,199,89,0.08); font-weight: bold; }
        
        /* 电表列组 - 确保每块电表5列固定宽度 */
        .meter-table th.meter-group, .meter-table td.meter-group {
            width: 90px;
            text-align: center;
            vertical-align: middle;
        }
        .meter-table td.adjust-group {
            width: 65px;
            text-align: center;
            vertical-align: middle;
        }
        .meter-table td.amount-group {
            width: 82px;
            text-align: right;
            vertical-align: middle;
        }
        
        /* 输入单元格统一padding */
        .meter-table td.input-cell {
            padding: 4px !important;
            vertical-align: middle;
            overflow: hidden !important;  /* 防止输入框溢出 */
        }
        .meter-table td.adjust-group {
            overflow: hidden !important;
            padding: 4px !important;
            vertical-align: middle;
        }
        
        /* 水费小计列 - 紧凑卡片式设计 */
        .meter-table td.water-subtotal-cell {
            background: #e8f4fc !important;
            padding: 0 !important;
            vertical-align: middle !important;
            min-width: 72px;
            max-width: 90px;
            width: 80px;
        }
        .meter-table td.water-subtotal-cell {
            display: flex !important;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1px;
        }
        .water-subtotal-label {
            display: block;
            font-size: 0.65rem;
            color: #7fb3d5;
            font-weight: 600;
            letter-spacing: 1px;
            text-transform: uppercase;
            line-height: 1;
        }
        .water-subtotal-amount {
            display: block;
            font-size: var(--font-sm);
            color: #1a5276;
            font-weight: 700;
            line-height: 1.2;
            white-space: nowrap;
        }

        /* 表格容器 - 支持水平滚动 */
        .meter-table-wrapper {
            overflow-x: auto;
            overflow-y: visible;
            max-width: 100%;
            -webkit-overflow-scrolling: touch;
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-sm);
            background: #fff;
        }
        .meter-table-wrapper::-webkit-scrollbar {
            height: 6px;
        }
        .meter-table-wrapper::-webkit-scrollbar-track {
            background: var(--gray-light);
            border-radius: 3px;
        }
        .meter-table-wrapper::-webkit-scrollbar-thumb {
            background: rgba(0,0,0,0.15);
            border-radius: 3px;
        }
        
        /* Tab样式 - Modern Apple/Google风格 */
        .nav-tabs {
            border-bottom: 2px solid var(--gray-200);
            gap: 4px;
        }
        .nav-tabs .nav-link { 
            color: var(--gray-500); 
            border: none; 
            padding: 12px 20px;
            font-weight: 600;
            font-size: var(--font-sm);
            border-radius: var(--radius-sm) var(--radius-sm) 0 0;
            transition: var(--transition-normal);
            position: relative;
        }
        .nav-tabs .nav-link::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 2px;
            background: transparent;
            transition: var(--transition-normal);
            border-radius: 1px;
        }
        .nav-tabs .nav-link:hover {
            color: var(--primary);
            background: rgba(0,113,227,0.04);
        }
        .nav-tabs .nav-link.active { 
            color: var(--primary); 
            background: transparent;
            border-bottom: none;
        }
        .nav-tabs .nav-link.active::after {
            background: var(--primary);
        }

        /* 客户管理标签页 - Modern Pill风格 */
        .customer-tabs-modern {
            display: flex;
            gap: 8px;
            padding: 8px;
            background: var(--gray-100);
            border-radius: var(--radius-md);
            width: fit-content;
        }
        .customer-tabs-modern .customer-tab {
            border: none;
            background: transparent;
            color: var(--gray-600);
            padding: 10px 22px;
            border-radius: var(--radius-sm);
            font-size: var(--font-sm);
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition-normal);
            display: flex;
            align-items: center;
            gap: 8px;
            white-space: nowrap;
        }
        .customer-tabs-modern .customer-tab:hover {
            color: var(--gray-800);
            background: var(--bg-glass);
            transform: translateY(-1px);
        }
        .customer-tabs-modern .customer-tab.active {
            color: var(--primary);
            background: #fff;
            box-shadow: var(--shadow-sm);
            font-weight: 700;
        }
        .customer-tabs-modern .customer-tab i {
            font-size: var(--font-base);
            transition: var(--transition-normal);
        }
        .customer-tabs-modern .customer-tab:hover i {
            transform: scale(1.1);
        }

        /* 客户表格操作按钮组 - Modern Style */
        .btn-group-sm .btn {
            padding: 5px 9px;
            font-size: var(--font-xs);
            border-radius: 6px !important;
            border: 1.5px solid rgba(0,0,0,0.12);
            transition: var(--transition-normal);
        }
        .btn-group-sm .btn:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-sm);
        }
        .btn-group-sm .btn i {
            font-size: var(--font-sm);
            transition: var(--transition-normal);
        }
        .btn-group-sm .btn:hover i {
            transform: scale(1.15);
        }
        .btn-group-sm .btn-outline-primary { 
            color: var(--primary); 
            border-color: rgba(0,113,227,0.25); 
        }
        .btn-group-sm .btn-outline-primary:hover { 
            background: rgba(0,113,227,0.12); 
            color: var(--primary);
            border-color: var(--primary);
            box-shadow: 0 2px 6px rgba(0,113,227,0.15);
        }
        .btn-group-sm .btn-outline-warning { 
            color: var(--warning); 
            border-color: rgba(255,149,0,0.25); 
        }
        .btn-group-sm .btn-outline-warning:hover { 
            background: rgba(255,149,0,0.12); 
            color: var(--warning);
            border-color: var(--warning);
            box-shadow: 0 2px 6px rgba(255,149,0,0.15);
        }
        .btn-group-sm .btn-outline-secondary { 
            color: var(--gray-600); 
            border-color: rgba(100,116,139,0.25); 
        }
        .btn-group-sm .btn-outline-secondary:hover { 
            background: rgba(100,116,139,0.12);
            color: #475569;
            border-color: #64748b;
            box-shadow: 0 2px 6px rgba(100,116,139,0.15);
        }
        .btn-group-sm .btn-outline-info { 
            color: var(--info); 
            border-color: rgba(90,200,250,0.25); 
        }
        .btn-group-sm .btn-outline-info:hover { 
            background: rgba(90,200,250,0.12); 
            color: var(--info);
            border-color: var(--info);
            box-shadow: 0 2px 6px rgba(90,200,250,0.15);
        }
        .btn-group-sm .btn-outline-success { 
            color: var(--success); 
            border-color: rgba(52,199,89,0.25); 
        }
        .btn-group-sm .btn-outline-success:hover { 
            background: rgba(52,199,89,0.12); 
            color: var(--success);
            border-color: var(--success);
            box-shadow: 0 2px 6px rgba(52,199,89,0.15);
        }
        .btn-group-sm .btn-outline-danger { 
            color: var(--danger); 
            border-color: rgba(255,59,48,0.25); 
        }
        .btn-group-sm .btn-outline-danger:hover { 
            background: rgba(255,59,48,0.12); 
            color: var(--danger);
            border-color: var(--danger);
            box-shadow: 0 2px 6px rgba(255,59,48,0.15);
        }

        /* 客户表格样式优化 */
        #customerTable th {
            font-size: var(--font-sm);
            font-weight: 600;
            color: var(--gray);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border-bottom: 2px solid rgba(0,0,0,0.06);
            padding: 10px 8px;
        }
        #customerTable td {
            font-size: 0.875rem;
            padding: 10px 8px;
            vertical-align: middle;
        }
        #customerTable tbody tr:hover {
            background: rgba(0,113,227,0.03);
        }
        
        /* 工作流步骤导航 - Modern Apple/Google风格 */
        .workflow-steps {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 28px;
            background: var(--bg-card);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-sm);
        }
        .step {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
        }
        .step-number {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: var(--gray-100);
            color: var(--gray-500);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: var(--font-lg);
            transition: var(--transition-normal);
            border: 2px solid transparent;
        }
        .step.active .step-number {
            background: var(--primary-gradient);
            color: #fff;
            box-shadow: 0 4px 16px rgba(0,113,227,0.35);
            transform: scale(1.1);
        }
        .step.completed .step-number {
            background: var(--success-gradient);
            color: #fff;
            box-shadow: 0 4px 16px rgba(52,199,89,0.35);
        }
        .step-label {
            font-size: var(--font-sm);
            color: var(--gray-500);
            font-weight: 600;
        }
        .step.active .step-label {
            color: var(--primary);
            font-weight: 700;
        }
        .step.completed .step-label {
            color: var(--success);
        }
        .step-line {
            width: 70px;
            height: 3px;
            background: var(--gray-200);
            margin: 0 16px;
            margin-bottom: 34px;
            border-radius: 2px;
            transition: var(--transition-normal);
        }
        .step-line.completed {
            background: var(--success-gradient);
        }
        
        /* 响应式设计 - 平板 */
        @media (max-width: 1024px) {
            .sidebar { width: 220px; }
            .main-content { margin-left: 220px; padding: 24px; }
            .meter-table { font-size: var(--font-sm); }
        }
        
        /* 响应式设计 - 手机 */
        @media (max-width: 768px) {
            .sidebar { 
                width: 100%; 
                height: auto; 
                position: relative;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                padding: 12px;
            }
            .sidebar .logo { 
                padding: 6px 12px 16px; 
                font-size: var(--font-lg);
                width: 100%;
                border-bottom: 1px solid rgba(255,255,255,0.08);
                margin-bottom: 8px;
            }
            .sidebar .nav-container {
                display: flex;
                flex-wrap: wrap;
                gap: 4px;
                padding: 0;
                width: 100%;
            }
            .sidebar .nav-section-title {
                display: none;
            }
            .sidebar .nav-item { 
                padding: 8px 14px; 
                font-size: var(--font-sm);
                flex: 0 0 auto;
            }
            .main-content { margin-left: 0; padding: 16px; }
            
            /* 表格区域 */
            .meter-table-wrapper {
                overflow-x: auto !important;
                overflow-y: visible;
                max-width: 100vw;
                width: 100%;
                margin-bottom: 16px;
                border-radius: var(--radius-md);
            }
            .meter-table {
                width: auto !important;
                min-width: 600px !important;
                font-size: var(--font-sm);
                table-layout: auto !important;
            }
            
            /* 输入框 */
            .meter-table input[type="number"] { 
                width: 100% !important;
                height: 32px !important;
                font-size: var(--font-sm) !important;
                flex-shrink: 0;
                box-sizing: border-box !important;
            }
            .meter-table .peak-reading, .meter-table .flat-reading, .meter-table .valley-reading {
                width: 82px !important;
            }
            .meter-table .current-reading {
                width: 92px !important;
            }
            .meter-table .elec-adjust-input, .meter-table .water-adjust-input {
                width: 100% !important;
                box-sizing: border-box !important;
                max-width: 70px;
            }
            
            /* 客户列 */
            .meter-table td:first-child, .meter-table th:first-child {
                min-width: 62px !important;
                max-width: 72px !important;
                font-size: var(--font-sm);
                white-space: nowrap;
            }
            
            /* 表头 */
            .meter-table thead th {
                font-size: var(--font-xs);
                padding: 6px 4px;
                white-space: nowrap;
            }
            
            /* 页面头部 */
            .page-header { 
                padding: 16px 18px;
                border-radius: var(--radius-md);
            }
            .page-header h4 { font-size: var(--font-lg); }
            .page-header .d-flex { flex-wrap: wrap; gap: 8px; }
            .page-header .btn { 
                font-size: var(--font-xs); 
                padding: 6px 12px;
                border-radius: 6px;
            }
            
            /* 用户信息区 */
            .user-info { 
                top: 12px; 
                right: 12px;
                gap: 8px;
            }
            .user-info .user-name {
                font-size: var(--font-sm);
            }
            .user-info .btn { 
                font-size: var(--font-xs); 
                padding: 5px 10px;
                border-radius: 16px;
            }
            
            /* 登录页面响应式 */
            .login-container {
                flex-direction: column;
            }
            .login-brand {
                padding: 40px 24px 20px;
                min-height: auto;
            }
            .brand-title {
                font-size: var(--font-2xl);
            }
            .brand-subtitle {
                font-size: var(--font-base);
                margin-bottom: 20px;
            }
            .brand-features {
                gap: 20px;
            }
            .feature-item {
                font-size: var(--font-sm);
            }
            .login-form-section {
                width: 100%;
                min-width: auto;
                padding: 24px;
            }
            .login-form-section::before {
                display: none;
            }
            .login-box {
                padding: 32px 28px;
            }
            
            /* 用户类型选择页面响应式 */
            .user-type-header-section {
                padding: 40px 24px 24px;
            }
            .user-type-header-section h1 {
                font-size: var(--font-2xl);
            }
            .user-type-cards-section {
                padding: 16px 24px 40px;
            }
            .user-type-cards {
                grid-template-columns: 1fr;
                gap: 20px;
                max-width: 400px;
            }
            .user-type-card {
                padding: 28px 24px;
            }
            .user-type-card .card-icon {
                width: 70px;
                height: 70px;
            }
            .user-type-card .card-icon i {
                font-size: 2.2rem;
            }
            .user-type-card h4 {
                font-size: var(--font-lg);
            }
        }
        
        /* 响应式设计 - 小手机 */
        @media (max-width: 480px) {
            .sidebar .logo { font-size: var(--font-base); padding: 6px; }
            .sidebar .nav-item { padding: 6px 10px; font-size: var(--font-sm); }
            .main-content { padding: var(--space-3); }
            .page-header { padding: var(--space-3) var(--space-3); }
            .page-header h4 { font-size: var(--font-lg); }
            .page-header .btn { font-size: var(--font-xs); padding: var(--space-1) var(--space-2); }
            
            .meter-table {
                min-width: 520px !important;
            }
            
            .meter-table input[type="number"] { 
                width: 72px !important;
                height: 30px !important;
                font-size: var(--font-xs) !important;
                padding: var(--space-1) 6px !important;
            }
            
            .summary-card h2 { font-size: var(--font-xl); }
            .btn { font-size: var(--font-xs); }
            .table { font-size: var(--font-xs); }
            
            /* 登录页面小屏适配 */
            .login-brand {
                padding: 30px 20px 16px;
            }
            .brand-logo {
                width: 72px;
                height: 72px;
                border-radius: 20px;
                margin-bottom: 20px;
            }
            .brand-logo i {
                font-size: 2.2rem;
            }
            .brand-title {
                font-size: var(--font-2xl);
            }
            .brand-subtitle {
                font-size: var(--font-sm);
                margin-bottom: 16px;
            }
            .brand-features {
                gap: 14px;
                flex-wrap: wrap;
                justify-content: center;
            }
            .feature-item {
                font-size: var(--font-xs);
            }
            .login-form-section {
                padding: 16px 20px;
            }
            .login-box {
                padding: 28px 20px;
                border-radius: 20px;
            }
            .login-header h3 {
                font-size: var(--font-xl);
            }
            .login-box .form-control {
                padding: 14px 14px 14px 46px;
                font-size: var(--font-base);
            }
            .login-box .btn-login,
            .login-box .btn-quick {
                padding: 14px;
                font-size: var(--font-base);
            }
            
            /* 用户类型选择小屏适配 */
            .user-type-header-section {
                padding: 30px 20px 20px;
            }
            .user-type-header-section .header-icon {
                width: 64px;
                height: 64px;
                border-radius: 18px;
            }
            .user-type-header-section .header-icon i {
                font-size: var(--font-2xl);
            }
            .user-type-header-section h1 {
                font-size: var(--font-xl);
            }
            .user-type-cards-section {
                padding: 12px 20px 30px;
            }
            .user-type-card {
                padding: 24px 20px;
                border-radius: 22px;
            }
            .user-type-card .card-icon {
                width: 60px;
                height: 60px;
                border-radius: 18px;
            }
            .user-type-card .card-icon i {
                font-size: var(--font-2xl);
            }
            .user-type-card .card-tags {
                gap: 6px;
            }
            .user-type-card .card-tag {
                padding: 4px 10px;
                font-size: var(--font-xs);
            }
        }
        
        /* 手机端通用适配增强 - 整合768px和576px断点 */
        @media (max-width: 768px) {
            /* 表格横向滚动 */
            .table-responsive { 
                overflow-x: auto; 
                -webkit-overflow-scrolling: touch; 
            }
            
            /* 卡片全宽 */
            .card { margin-bottom: var(--space-3); }
            .card-body { padding: var(--space-3); }
            .card-header { padding: var(--space-3) var(--space-3); font-size: var(--font-sm); }
            
            /* 用户类型徽章适配 */
            .user-type-badge {
                font-size: 0.65rem;
                padding: 3px 8px;
            }
            .page-header h4 {
                flex-wrap: wrap;
                font-size: var(--font-lg);
            }
            
            /* 统计卡片适配 */
            .summary-card {
                padding: var(--space-3);
            }
            .summary-card h2 {
                font-size: var(--font-xl);
            }
            .summary-card h6 {
                font-size: var(--font-xs);
            }
            
            /* 按钮触摸友好 */
            .btn {
                min-height: 44px;
                padding: var(--space-2) var(--space-4);
            }
            .btn-sm {
                min-height: 36px;
                padding: var(--space-2) var(--space-3);
            }
            
            /* 输入框触摸友好 */
            input, select, textarea {
                min-height: 44px;
                font-size: 16px !important; /* 防止iOS自动缩放 */
            }
            
            /* 操作按钮区域适配 */
            .page-header .d-flex {
                flex-wrap: wrap;
                gap: var(--space-2);
            }
            .page-header .btn {
                font-size: var(--font-xs);
                padding: var(--space-2) var(--space-3);
            }
            
            /* 表格优化 */
            .table {
                font-size: var(--font-xs);
            }
            .table th, .table td {
                padding: var(--space-2) var(--space-1);
                white-space: nowrap;
            }
            
            /* Modal适配 */
            .modal-dialog {
                margin: 10px;
            }
            .modal-body {
                max-height: 70vh;
                overflow-y: auto;
                padding: var(--space-3);
            }
            .modal-header, .modal-footer { padding: var(--space-2) var(--space-3); }
            
            /* 汇总栏适配 */
            .pay-summary-bar .psb-item {
                padding: var(--space-3) var(--space-3);
            }
            .psb-item .psb-val {
                font-size: var(--font-lg);
            }
            .psb-item .psb-label {
                font-size: var(--font-xs);
            }
            
            /* 表单适配 */
            .form-control, .form-select { font-size: 16px; padding: var(--space-2) var(--space-3); }
            .form-label { font-size: var(--font-sm); margin-bottom: var(--space-1); }
        }
        
        /* 打印样式 */
        @media print {
            .sidebar, .user-info, .page-header button { display: none !important; }
            .main-content { margin-left: 0 !important; padding: 0 !important; }
            .meter-table { font-size: 9pt; }
            .card { box-shadow: none; border: 1px solid #ddd; }
        }
        
        /* 费用管理页面样式 - Apple风格 */
        .fee-card {
            background: var(--bg-card);
            border-radius: var(--radius-lg);
            padding: 24px;
            margin-bottom: 20px;
            box-shadow: var(--shadow-sm);
        }
        .fee-summary-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 14px;
            margin-bottom: 20px;
        }
        .fee-summary-item {
            background: linear-gradient(135deg, var(--primary) 0%, #5856D6 100%);
            color: #fff;
            border-radius: var(--radius-md);
            padding: 20px;
            text-align: center;
            box-shadow: var(--shadow-md);
        }
        .fee-summary-item.green { background: linear-gradient(135deg, #34C759 0%, #30D158 100%); }
        .fee-summary-item.orange { background: linear-gradient(135deg, #FF9500 0%, #FF9F0A 100%); }
        .fee-summary-item.red { background: linear-gradient(135deg, #FF3B30 0%, #FF453A 100%); }
        .fee-summary-item h6 { opacity: 0.9; margin-bottom: 6px; font-size: var(--font-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.3px; }
        .fee-summary-item h3 { margin: 0; font-weight: 700; font-size: var(--font-xl); letter-spacing: -0.5px; }
        .fee-table { font-size: var(--font-sm); }
        .fee-table th { 
            background: var(--gray-light); 
            font-weight: 600;
            text-transform: uppercase;
            font-size: var(--font-xs);
            letter-spacing: 0.3px;
            color: var(--gray);
        }
        .fee-table .text-danger { color: var(--danger) !important; font-weight: 600; }
        .fee-table .text-success { color: var(--success) !important; font-weight: 600; }
        .fee-table .owed-badge {
            background: var(--danger);
            color: #fff;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: var(--font-xs);
            font-weight: 500;
        }
        .fee-table .paid-badge {
            background: var(--success);
            color: #fff;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: var(--font-xs);
            font-weight: 500;
        }
        .fee-modal-input {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 12px;
        }
        .fee-modal-input label { margin: 0; white-space: nowrap; font-weight: 500; color: var(--gray-dark); }
        .fee-history-item {
            background: var(--gray-light);
            border-radius: var(--radius-md);
            padding: 14px 18px;
            margin-bottom: 12px;
        }
        .fee-history-item .month { font-weight: 600; color: var(--gray-dark); margin-bottom: 8px; }
        .fee-history-item .details { display: flex; gap: 20px; flex-wrap: wrap; font-size: var(--font-sm); }
        .fee-history-item .amount { color: var(--gray); }
        .fee-history-item .amount span { font-weight: 600; color: var(--gray-dark); }

        /* ========== 费用计算页缴费区域 - Apple风格 ========== */
        #billing-payment-section {
            margin-top: 28px;
        }
        .billing-payment-header {
            background: linear-gradient(135deg, var(--gray-dark) 0%, #3A3A3C 100%);
            color: #fff;
            border-radius: var(--radius-lg) var(--radius-lg) 0 0;
            padding: 16px 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .billing-payment-header h5 { margin: 0; font-size: var(--font-base); font-weight: 600; }
        .billing-payment-body {
            background: var(--bg-card);
            border-radius: 0 0 var(--radius-lg) var(--radius-lg);
            box-shadow: var(--shadow-md);
            padding: 0;
            overflow: hidden;
        }
        
        /* 汇总卡片 */
        .pay-summary-bar {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 0;
            border-bottom: 1px solid rgba(0,0,0,0.05);
        }
        @media (max-width: 1200px) {
            .pay-summary-bar {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        @media (max-width: 768px) {
            .pay-summary-bar {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        @media (max-width: 576px) {
            .pay-summary-bar {
                grid-template-columns: 1fr;
            }
            .pay-summary-bar .psb-item {
                border-right: none;
                border-bottom: 1px solid rgba(0,0,0,0.05);
            }
            .pay-summary-bar .psb-item:last-child {
                border-bottom: none;
            }
        }
        .pay-summary-bar .psb-item {
            padding: 16px 20px;
            text-align: center;
            border-right: 1px solid rgba(0,0,0,0.05);
        }
        .pay-summary-bar .psb-item:last-child { border-right: none; }
        .psb-item .psb-label { font-size: var(--font-xs); color: var(--gray); margin-bottom: 6px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.3px; }
        .psb-item .psb-val { font-size: var(--font-lg); font-weight: 700; }
        .psb-item.should .psb-val { color: var(--primary); }
        .psb-item.paid .psb-val { color: var(--success); }
        .psb-item.expense .psb-val { color: var(--danger); }
        .psb-item.net .psb-val { color: #5856D6; }
        .psb-item.owed-month .psb-val { color: var(--warning); }
        .psb-item.owed-total .psb-val { color: var(--danger); }

        /* 支出列表样式 */
        .expense-list { max-height: 180px; overflow-y: auto; }
        .expense-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 14px;
            border-bottom: 1px solid var(--border-light);
            font-size: var(--font-sm);
        }
        .expense-item:last-child { border-bottom: none; }
        .expense-item .expense-info { flex: 1; }
        .expense-item .expense-amount { color: var(--danger); font-weight: 600; margin-right: 14px; }
        .expense-item .expense-note { color: var(--gray); font-size: var(--font-sm); }
        .expense-item .expense-date { color: var(--gray); font-size: var(--font-xs); margin-right: 10px; }
        .expense-panel { border: 1px solid rgba(0,0,0,0.05); }

        /* 每户缴费卡片 - Apple风格 */
        .pay-customer-list {
            padding: 0;
        }
        .pay-cust-card {
            border-bottom: 1px solid rgba(0,0,0,0.05);
            padding: 16px 20px;
            transition: var(--transition);
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .pay-cust-card:last-child { border-bottom: none; }
        .pay-cust-card:hover { background: rgba(0,0,0,0.02); }

        /* 卡片内容区 */
        .pay-cust-content {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
        }

        @media (max-width: 1200px) {
            .pay-cust-content {
                flex-direction: column;
                gap: 10px;
            }
            .pay-cust-top {
                flex-wrap: wrap;
                width: 100%;
            }
            .pay-action-row {
                width: 100%;
                justify-content: flex-end;
            }
            .pay-input-row {
                flex-wrap: wrap;
            }
        }
        @media (max-width: 768px) {
            .pay-cust-card {
                padding: 12px 14px;
            }
            .pay-cust-name {
                min-width: 62px;
                max-width: 82px;
                font-size: var(--font-sm);
            }
            .pay-cust-stat {
                font-size: var(--font-xs);
                padding: 3px 8px;
            }
            .pay-detail-list {
                max-width: 100%;
                width: 100%;
            }
        }

        .pay-cust-top {
            display: flex;
            align-items: center;
            gap: 8px;
            flex: 1;
            min-width: 0;
            flex-wrap: wrap;
        }
        .pay-cust-name {
            font-weight: 700;
            font-size: var(--font-base);
            min-width: 72px;
            max-width: 102px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: var(--gray-dark);
        }
        .pay-cust-stat {
            font-size: var(--font-xs);
            background: var(--gray-light);
            border-radius: 20px;
            padding: 4px 10px;
            white-space: nowrap;
            font-weight: 500;
            color: var(--gray-dark);
        }
        .pay-cust-stat.should { background: rgba(0,113,227,0.1); color: var(--primary); }
        .pay-cust-stat.carry { background: rgba(255,149,0,0.1); color: var(--warning); }
        .pay-cust-stat.total-need { background: rgba(255,59,48,0.1); color: var(--danger); font-weight: 700; }
        .pay-cust-stat.paid-ok { background: rgba(52,199,89,0.1); color: var(--success); font-weight: 700; }
        .pay-cust-stat.owed { background: rgba(255,59,48,0.08); color: var(--danger); }

        /* 已缴明细列表 */
        .pay-detail-list {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            max-width: 300px;
        }
        .pay-detail-chip {
            background: rgba(52,199,89,0.1);
            border: 1px solid rgba(52,199,89,0.2);
            border-radius: 20px;
            padding: 4px 10px;
            font-size: var(--font-xs);
            display: inline-flex;
            align-items: center;
            gap: 6px;
            white-space: nowrap;
            flex-shrink: 0;
        }
        .pay-detail-chip .chip-date { color: var(--gray); }
        .pay-detail-chip .chip-amt { font-weight: 700; color: var(--success); }
        .pay-detail-chip .chip-amt.expense-amt { color: var(--danger); }
        .pay-detail-chip .chip-note { color: var(--gray); }
        .pay-detail-chip .chip-del-btn { 
            cursor: pointer; 
            color: var(--danger); 
            font-size: var(--font-base); 
            line-height: 1; 
            padding: 2px 6px; 
            margin: -2px 0 -2px auto; 
            border: none; 
            background: transparent; 
            border-radius: 50%; 
            display: inline-flex; 
            align-items: center; 
            justify-content: center; 
            min-width: 22px; 
            min-height: 22px; 
            user-select: none; 
            -webkit-user-select: none; 
            position: relative; 
            z-index: 10; 
            font-weight: 600;
            opacity: 0.7;
            transition: var(--transition);
        }
        .pay-detail-chip .chip-del-btn:hover { 
            opacity: 1; 
            background: rgba(255,59,48,0.1);
        }
        .pay-detail-chip.expense-chip { background: rgba(255,59,48,0.08); border-color: rgba(255,59,48,0.15); }

        /* 输入区域行 */
        .pay-input-row {
            display: flex;
            align-items: center;
            gap: 8px;
            width: 100%;
            padding: 10px 0;
            border-top: 1px dashed var(--border-normal);
            margin-top: 8px;
        }
        .pay-input-row .pay-input-amt {
            width: 100px !important;
        }
        .pay-input-row .pay-input-date {
            width: 130px !important;
        }
        .pay-input-row .pay-input-note {
            width: 130px !important;
        }
        .pay-input-row input {
            height: 32px;
            font-size: var(--font-sm);
            border: 1.5px solid rgba(0,0,0,0.1);
            border-radius: 6px;
            padding: 0 10px;
            transition: var(--transition);
        }
        .pay-input-row input:focus {
            border-color: var(--primary);
            outline: none;
            box-shadow: 0 0 0 3px rgba(0,113,227,0.1);
        }
        .pay-input-row .btn {
            font-size: var(--font-xs);
            padding: 6px 12px;
            border-radius: 6px;
            white-space: nowrap;
        }

        /* 操作按钮行 */
        .pay-action-row {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }
        .pay-action-row .btn {
            font-size: var(--font-xs);
            padding: 6px 12px;
            white-space: nowrap;
            flex-shrink: 0;
            border-radius: 6px;
        }
        .pay-action-row .btn i {
            font-size: var(--font-sm);
        }

        .pay-settled-check {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: var(--font-xs);
            cursor: pointer;
            padding: 6px 12px;
            border-radius: 20px;
            border: 1.5px solid rgba(0,0,0,0.1);
            background: #fff;
            transition: var(--transition);
            white-space: nowrap;
            flex-shrink: 0;
            color: var(--gray-dark);
            font-weight: 500;
        }
        .pay-settled-check:hover { border-color: var(--success); }
        .pay-settled-check input[type="checkbox"] { margin: 0; cursor: pointer; width: 15px; height: 15px; accent-color: var(--success); }
        .pay-settled-check.is-settled {
            background: rgba(52,199,89,0.1);
            border-color: var(--success);
            color: var(--success);
            font-weight: 600;
        }

        /* 旧版兼容 */
        .pay-add-row {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }

        /* 导出区 */
        .bill-export-bar {
            background: var(--gray-light);
            border-top: 1px solid rgba(0,0,0,0.05);
            padding: 14px 20px;
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap;
        }

        /* 账单卡片打印预览 - Apple风格 */
        .bill-card-preview {
            background: #fff;
            border-radius: var(--radius-lg);
            padding: 24px 28px;
            box-shadow: var(--shadow-lg);
            max-width: 520px;
            font-size: var(--font-base);
        }
        .bill-card-preview .bc-header {
            text-align: center;
            border-bottom: 2px solid var(--primary);
            padding-bottom: 14px;
            margin-bottom: 14px;
        }
        .bill-card-preview .bc-title { font-size: var(--font-xl); font-weight: 700; color: var(--gray-dark); letter-spacing: -0.3px; }
        .bill-card-preview .bc-sub { color: var(--gray); font-size: var(--font-sm); }
        .bill-card-preview .bc-row {
            display: flex;
            justify-content: space-between;
            padding: 6px 0;
            border-bottom: 1px dashed rgba(0,0,0,0.06);
        }
        .bill-card-preview .bc-row:last-child { border-bottom: none; }
        .bill-card-preview .bc-row .bc-key { color: var(--gray); }
        .bill-card-preview .bc-row .bc-val { font-weight: 600; color: var(--gray-dark); }
        .bill-card-preview .bc-row .bc-val.red { color: var(--danger); }
        .bill-card-preview .bc-row .bc-val.green { color: var(--success); }
        .bill-card-preview .bc-section { margin: 12px 0 6px; font-weight: 700; color: var(--primary); font-size: var(--font-sm); text-transform: uppercase; letter-spacing: 0.3px; }
        .bill-card-preview .bc-footer {
            margin-top: 16px;
            text-align: center;
            font-size: var(--font-xs);
            color: var(--gray);
            border-top: 1px dashed rgba(0,0,0,0.06);
            padding-top: 12px;
        }
        
        /* 客户详情样式 */
        .detail-item {
            margin-bottom: 8px;
        }
        .detail-item label {
            display: block;
            font-size: var(--font-xs);
            color: #6c757d;
            margin-bottom: 2px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .detail-item .detail-value {
            font-size: var(--font-base);
            color: #212529;
        }