* { margin: 0; padding: 0; box-sizing: border-box; }

        /* ==================================================================
         * 设计令牌三层体系（2026-08-16 · 第四阶段 UI 重构 ?v=20260816ds）
         * ==================================================================
         * L1 primitive（--nl-* 原子层）：色阶 / 8pt 间距刻度 / 字号阶梯 /
         *    圆角 / 阴影 / 动效原子。仅作原料，业务规则不应直接大量引用。
         * L2 semantic（既有变量名 = 语义层）：--bg-primary / --text-primary /
         *    --accent … 名称与取值与历史版本完全兼容（全站 var() 引用零破坏），
         *    现改为引用 L1 原子。深色基准 = :root，浅色 = [data-theme="light"]
         *    洗白块，19 个 [data-style] 旧风格块继续用字面量覆盖语义变量。
         * L3 component（--nl-c-* 组件层）：高频组件（按钮/表格/弹窗/表单/
         *    卡片/标签页）的密度与形态统一出口，本次起逐步接管组件规则。
         * 约束：禁用 oklch 颜色函数（zrender 不解析，canvas 会静默降级）；
         *    间距统一 8pt 刻度（4 为半步）；
         * 被 JS getComputedStyle 消费的变量（--accent/--border/--text-secondary/
         * --bg-secondary）保持纯色值，不得换成 color-mix()。
         * ================================================================== */
        :root {
            /* ---- L1 色阶 · 暖炭表面（深色模式基底 / 浅色模式文字同源） ---- */
            --nl-char-1200: #171512;
            --nl-char-1100: #1F1C17;
            --nl-char-1000: #221E18;
            --nl-char-900:  #262119;
            --nl-char-800:  #2A251E;
            --nl-char-700:  #2E2820;
            --nl-char-600:  #3A332B;
            --nl-char-500:  #4A4238;

            /* ---- L1 色阶 · 奶油文字（深色模式文字） ---- */
            --nl-cream-100: #F2EDE3;
            --nl-cream-200: #C9BFA9;
            --nl-cream-300: #9C917C;

            /* ---- L1 色阶 · 暖纸表面（浅色模式基底） ---- */
            --nl-paper-0:   #FFFFFF;
            --nl-paper-50:  #FBF8F1;
            --nl-paper-100: #F7F5F0;
            --nl-paper-200: #F1EDE4;
            --nl-paper-300: #EAE4D6;
            --nl-paper-400: #E2DCCE;
            --nl-paper-500: #C9BFA8;

            /* ---- L1 色阶 · 褐色文字（浅色模式文字，同源同锥度） ---- */
            --nl-umber-100: #2B2620;
            --nl-umber-200: #544B3D;
            --nl-umber-300: #5A5245;
            --nl-umber-400: #746A5A; /* 2026-08-16：较旧值 #7A7060 加深，页底对比 4.47→4.88 */
            --nl-umber-500: #7A7060; /* 旧版 muted，保留作原料 */
            --nl-umber-600: #857B6A;

            /* ---- L1 色阶 · 鎏金主色 ---- */
            --nl-gold-300: #E3B877;
            --nl-gold-400: #D9A85C;
            --nl-gold-500: #B18238;
            --nl-gold-600: #B07D2F;
            --nl-gold-700: #916318;
            --nl-gold-800: #8A5F1E;
            --nl-gold-900: #7A5210;
            /* 鎏金透明度原子（描边/微光原料，纯 rgba 可被 canvas 解析） */
            --nl-gold-alpha-10: rgba(217, 168, 92, 0.10);
            --nl-gold-alpha-14: rgba(217, 168, 92, 0.14);
            --nl-gold-alpha-16: rgba(217, 168, 92, 0.16);
            --nl-gold-alpha-32: rgba(217, 168, 92, 0.32);
            --nl-gold-alpha-70: rgba(217, 168, 92, 0.70);

            /* ---- L1 功能色（深色基准原料） ---- */
            --nl-green-300: #7BE7A4;
            --nl-green-400: #4ADE80;
            --nl-green-500: #2FB866;
            --nl-amber-300: #F7D070;
            --nl-amber-400: #F5C242;
            --nl-red-300:   #FA9B9B;
            --nl-red-400:   #F87171;
            --nl-blue-200:  #A3CBF0;
            --nl-blue-300:  #7FB4E8;

            /* ---- L1 间距 · 8pt 刻度（4 = 半步，允许 4/12/20/28） ---- */
            --nl-space-1:  4px;
            --nl-space-2:  8px;
            --nl-space-3:  12px;
            --nl-space-4:  16px;
            --nl-space-5:  20px;
            --nl-space-6:  24px;
            --nl-space-7:  28px;
            --nl-space-8:  32px;
            --nl-space-10: 40px;
            --nl-space-12: 48px;

            /* ---- L1 字体阶梯原子 ---- */
            --nl-font-size-1: 10px;
            --nl-font-size-2: 11px;
            --nl-font-size-3: 13px;
            --nl-font-size-4: 15px;
            --nl-font-size-5: 18px;
            --nl-font-size-6: 22px;
            --nl-font-size-7: 28px;
            --nl-font-size-8: 36px;

            /* ---- L1 字族原子 ---- */
            --nl-font-sans: 'Inter', 'Microsoft YaHei', 'PingFang SC', system-ui, sans-serif;
            --nl-font-mono: 'JetBrains Mono', 'Consolas', 'Courier New', monospace;

            /* ---- L1 圆角原子 ---- */
            --nl-radius-xs:   4px;
            --nl-radius-sm:   8px;
            --nl-radius-md:  12px;
            --nl-radius-lg:  16px;
            --nl-radius-xl:  22px;
            --nl-radius-full: 999px;

            /* ---- L1 阴影原子（深色基准；浅色由 light 洗白块重映射语义层） ---- */
            --nl-shadow-1: 0 1px 3px rgba(18, 13, 6, 0.32);
            --nl-shadow-2: 0 5px 14px rgba(18, 13, 6, 0.28);
            --nl-shadow-3: 0 10px 26px rgba(18, 13, 6, 0.32);

            /* ---- L1 动效原子（微交互 120-180ms 区间） ---- */
            --nl-dur-fast: 120ms;
            --nl-dur-base: 160ms;
            --nl-dur-slow: 200ms;
            --nl-ease-productive: cubic-bezier(0.2, 0, 0, 1);
            --nl-ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
        }

        /* ---- L3 组件层令牌（引用语义层，深浅/19 风格自动协调） ---- */
        :root {
            /* 卡片 */
            --nl-c-card-padding:    var(--nl-space-5); /* 20 = 8×2+4半步，主卡片 */
            --nl-c-card-padding-lg: var(--nl-space-6); /* 24 */
            --nl-c-card-padding-sm: var(--nl-space-4); /* 16，统计卡/紧凑卡 */
            --nl-c-card-radius:     var(--radius-lg);
            --nl-c-card-shadow:        var(--shadow-sm);
            --nl-c-card-shadow-hover:  var(--shadow-md);

            /* 按钮 */
            --nl-c-btn-px: var(--nl-space-4);
            --nl-c-btn-py: var(--nl-space-2);
            --nl-c-btn-radius: var(--radius-sm);
            --nl-c-btn-font-size: var(--text-sm);
            --nl-c-btn-font-weight: 600;
            --nl-c-btn-transition:
                transform var(--nl-dur-base) var(--nl-ease-productive),
                filter var(--nl-dur-base) var(--nl-ease-productive),
                background-color var(--nl-dur-base) var(--nl-ease-productive),
                border-color var(--nl-dur-base) var(--nl-ease-productive),
                box-shadow var(--nl-dur-base) var(--nl-ease-productive),
                opacity var(--nl-dur-base) var(--nl-ease-productive);

            /* 表格（Carbon 式紧凑密度：4px 纵距 + 20px 行高 ≈ 28px 行） */
            --nl-c-table-cell-px: var(--nl-space-3);
            --nl-c-table-cell-py: var(--nl-space-1);
            --nl-c-table-lh: 20px;
            --nl-c-table-header-weight: 600;
            --nl-c-table-row-hover: color-mix(in srgb, var(--accent) 7%, transparent);
            --nl-c-table-zebra:     color-mix(in srgb, var(--accent) 4%, transparent);

            /* 弹窗 */
            --nl-c-modal-pad-x: var(--nl-space-6);
            --nl-c-modal-pad-y: var(--nl-space-4);
            --nl-c-modal-radius: var(--radius-xl);
            --nl-c-modal-shadow: var(--shadow-lg);

            /* 表单 */
            --nl-c-field-gap: var(--nl-space-4);
            --nl-c-input-px: var(--nl-space-3);
            --nl-c-input-py: var(--nl-space-2);
            --nl-c-input-radius: var(--radius-sm);
            --nl-c-input-focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);

            /* 焦点态（WCAG 2.2 焦点可见性：2px 实线 + 2px 偏移 + 金色光环） */
            --nl-focus-ring-color: var(--accent);
            --nl-focus-ring-width: 2px;
            --nl-focus-ring-offset: 2px;
            --nl-focus-halo: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
        }

        /* ===== CSS Variables ===== */
        /* 默认: 鎏金·晨光 (Gilded Dawn) — 暖炭深底 + 鎏金点缀（2026-08-13 新默认主题）
           结构沿用既有机制：:root 为深色基准（dark 模式 = 无 data-theme 属性），
           [data-theme="light"] 洗白块负责浅色呈现，theme.js 零改动。 */
        :root {
            /* Colors — 鎏金·晨光 深色基准（L2 语义层，引用 L1 原子，名称/取值不变） */
            --bg-primary: var(--nl-char-1200);
            --bg-secondary: var(--nl-char-1100);
            --bg-elevated: var(--nl-char-800);
            --surface: var(--nl-char-900);
            --border: var(--nl-gold-alpha-16);
            --border-strong: var(--nl-gold-alpha-32);
            --text-primary: var(--nl-cream-100);
            --text-secondary: var(--nl-cream-200);
            --text-muted: var(--nl-cream-300);
            --accent: var(--nl-gold-400);
            --accent-hover: var(--nl-gold-300);
            --success: var(--nl-green-400);
            --warning: var(--nl-amber-400);
            --danger: var(--nl-red-400);
            --info: var(--nl-blue-300);
            /* 扩展语义颜色（用于按钮分类）— 保留色相、统一低饱和暖调（无同值原子，保留字面量） */
            --purple: #8A5F92;
            --cyan: #337278;
            --indigo: #5E6899;
            --red: #A8453A;
            --orange: #A85A20;
            --teal: #3E7D6C;
            --pink: #A85F76;
            --slate: #6E675C;
            --emerald: #3F7049;

            /* 术语解释彩色标题（默认=深色主题用亮色） */
            --term-a: #E6B455;      /* ABC 价值分类 - 琥珀金 */
            --term-x: var(--nl-blue-300); /* XYZ 波动分类 - 暖蓝 */
            --term-cv: #5BC98F;     /* CV 变异系数 - 暖绿 */
            --term-combo: #C9A0E8;  /* 组合策略 - 暖紫 */

            /* 术语解释状态词（需补货/过剩/充足） */
            --state-danger: var(--nl-red-400); /* 需补货 - 红 */
            --state-warning: #E6B455;          /* 过剩 - 琥珀金 */
            --state-success: #5BC98F;          /* 充足 - 绿 */

            /* Semantic aliases */
            --primary: var(--nl-gold-400);
            --primary-dark: var(--nl-gold-500);
            --primary-light: var(--nl-gold-300);
            --success-dark: var(--nl-green-500);
            --success-light: var(--nl-green-300);
            --warning-light: var(--nl-amber-300);
            --danger-light: var(--nl-red-300);
            --info-light: var(--nl-blue-200);

            /* Background aliases */
            --bg-start: var(--nl-char-1200);
            --bg-end: var(--nl-char-1200);
            --card-bg: var(--nl-char-1000);
            --card-bg-hover: var(--nl-char-800);
            --input-bg: var(--nl-char-900);
            --input-bg-hover: var(--nl-char-700);
            --border-color: var(--nl-gold-alpha-16);
            --option-bg: var(--nl-char-1000);
            --option-color: var(--nl-cream-100);
            --option-bg-light: #f8fafc;
            --option-color-light: #1e293b;

            /* Typography — 语义层引用 L1 字号阶梯；--type-* 为四级正文体系别名 */
            --font-sans: var(--nl-font-sans);
            --font-mono: var(--nl-font-mono);
            --font-display: var(--nl-font-sans);
            --text-2xs: var(--nl-font-size-1);
            --text-xs: var(--nl-font-size-2);
            --text-sm: var(--nl-font-size-3);
            --text-base: var(--nl-font-size-4);
            --text-lg: var(--nl-font-size-5);
            --text-xl: var(--nl-font-size-6);
            --text-2xl: var(--nl-font-size-7);
            --text-3xl: var(--nl-font-size-8);
            /* 四级正文体系：页面标题 / 卡片标题 / 正文 / 辅助文字 */
            --type-display: var(--text-xl);   /* 22px 页面标题 */
            --type-heading: var(--text-lg);   /* 18px 卡片标题 */
            --type-body: var(--text-base);    /* 15px 正文 */
            --type-caption: var(--text-sm);   /* 13px 辅助说明 */
            --type-micro: var(--text-xs);     /* 11px 微标注 */
            /* 图标尺寸规范 */
            --icon-xs: 10px;
            --icon-sm: 12px;
            --icon-md: 16px;
            --icon-lg: 22px;
            --icon-xl: 32px;
            --icon-2xl: 48px;
            /* 奖牌色 */
            --medal-gold: #FFD700;
            --medal-gold-dark: #FFA000;
            --medal-silver: #C0C0C0;
            --medal-silver-dark: #9E9E9E;
            --medal-bronze: #CD7F32;
            --medal-bronze-dark: #A0522D;

            /* Spacing — 语义层引用 L1 8pt 刻度 */
            --space-1: var(--nl-space-1);
            --space-2: var(--nl-space-2);
            --space-3: var(--nl-space-3);
            --space-4: var(--nl-space-4);
            --space-5: var(--nl-space-5);
            --space-6: var(--nl-space-6);
            --space-8: var(--nl-space-8);
            --space-10: var(--nl-space-10);

            /* 底部备案条高度（用于视口高度容器让位） */
            --footer-height: 40px;

            /* Border Radius — 语义层引用 L1 圆角原子（卡片/按钮/输入框一致） */
            --radius-sm: var(--nl-radius-sm);
            --radius-md: var(--nl-radius-md);
            --radius-lg: var(--nl-radius-lg);
            --radius-xl: var(--nl-radius-xl);

            /* Shadows — 层级递进统一：sm<md<lg<strong（暖灰阴影，浅色由 light 块重映射） */
            --shadow-sm: var(--nl-shadow-1);
            --shadow-md: var(--nl-shadow-2);
            --shadow-lg: var(--nl-shadow-3);
            --shadow: var(--nl-shadow-2);
            --shadow-strong: var(--nl-shadow-3);

            /* Easing — 语义层引用 L1 动效原子 */
            --ease-out-quart: var(--nl-ease-out-quart);

            /* Style-specific: header accent line */
            --header-accent: var(--nl-gold-400);
            --header-accent-opacity: 0.7;

            /* 星空流光主题色 - 鎏金·晨光用暖金微光 */
            --star-color: var(--nl-gold-alpha-70);
            --aurora-color: var(--nl-gold-alpha-14);
            --aurora-color-2: rgba(178, 120, 62, 0.10);

            /* M007: 顶栏专用变量 — M003固定深色顶栏，不受light/dark模式影响
               鎏金·晨光：深炭顶栏 + 金色点缀，设计意图不变 */
            --header-bg: var(--nl-char-1000);
            --header-text: var(--nl-cream-100);
            --header-stat-bg: var(--nl-gold-alpha-10);
            --header-num: var(--nl-gold-400);
            --header-btn-bg: var(--nl-gold-alpha-10);
            --header-btn-text: var(--nl-cream-100);

            /* 强调色按钮上的文字色：默认白字（兼容 19 个风格块的深 accent）；
               默认风格的金色底由下方专属块改为深字，修复 2.16:1 对比度缺陷 */
            --on-accent: #FFFFFF;
        }

        /* ===== 导出进度条 ===== */
        .export-progress-overlay {
            position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.55);
            backdrop-filter: blur(4px);
            display: flex; align-items: center; justify-content: center;
            z-index: 100000;
        }
        .export-progress-box {
            background: var(--bg-primary, #171512);
            border: 1px solid var(--border-color, rgba(217,168,92,0.16));
            border-radius: var(--radius-lg, 14px);
            padding: 28px 36px;
            min-width: 360px; max-width: 480px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.4);
        }
        .export-progress-title {
            font-size: 16px; font-weight: 600;
            color: var(--text-primary, #F2EDE3);
            margin-bottom: 8px;
            display: flex; align-items: center; gap: 8px;
        }
        .export-progress-title i { color: var(--accent, #D9A85C); }
        .export-progress-filename {
            font-size: 13px; color: var(--text-secondary, rgba(242,237,227,0.65));
            margin-bottom: 16px; word-break: break-all;
        }
        .export-progress-bar {
            height: 8px; background: rgba(255,255,255,0.08);
            border-radius: 4px; overflow: hidden; margin-bottom: 10px;
        }
        .export-progress-fill {
            height: 100%; background: linear-gradient(90deg, var(--accent, #D9A85C), #E3B877);
            transition: width 0.2s ease;
        }
        .export-progress-text {
            font-size: 12px; color: var(--text-secondary, rgba(242,237,227,0.55));
            text-align: center;
        }

        /* ===== 风格二: 素白 (Clean White) - M007 精确颜色 ===== */
        [data-style="clean"] {
            --bg-primary: #f3f4f6;
            --bg-secondary: #ffffff;
            --bg-elevated: #ffffff;
            --surface: #e5e7eb;
            --border: #d1d5db;
            --border-strong: #9ca3af;
            --text-primary: #1f2937;
            --text-secondary: #4b5563;
            --text-muted: #6b7280;
            --accent: #A0673C;
            --accent-hover: #8b5630;
            --success: #059669;
            --warning: #d97706;
            --danger: #dc2626;
            --info: #6366f1;

            --primary: #A0673C;
            --primary-dark: #8b5630;
            --primary-light: #c28561;
            --success-dark: #047857;
            --success-light: #6ee7b7;
            --warning-light: #fcd34d;
            --danger-light: #fca5a5;
            --info-light: #a5b4fc;

            --bg-start: #f3f4f6;
            --bg-end: #f3f4f6;
            --card-bg: #ffffff;
            --card-bg-hover: #f9fafb;
            --input-bg: #ffffff;
            --input-bg-hover: #f3f4f6;
            --border-color: #d1d5db;
            --option-bg: #ffffff;
            --option-color: #1f2937;

            --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
            --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.08);
            --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.1);
            --shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
            --shadow-strong: 0 12px 28px rgba(0, 0, 0, 0.1);

            --header-accent: #A0673C;
            --header-accent-opacity: 0.8;

            --star-color: rgba(160, 103, 60, 0.5);
            --aurora-color: rgba(160, 103, 60, 0.1);
            --aurora-color-2: rgba(99, 102, 241, 0.06);

            /* M007: 顶栏专用变量 */
            --header-bg: #ffffff;
            --header-text: #1f2937;
            --header-stat-bg: #f3f4f6;
            --header-num: #A0673C;
            --header-btn-bg: #f3f4f6;
            --header-btn-text: #1f2937;
        }

        /* ===== 风格三: 暗夜霓虹 (Neon Night) - M007 精确颜色 ===== */
        [data-style="neon"] {
            --bg-primary: #09090b;
            --bg-secondary: #18181b;
            --bg-elevated: #27272a;
            --surface: #18181b;
            --border: #27272a;
            --border-strong: #3f3f46;
            --text-primary: #fafafa;
            --text-secondary: #a1a1aa;
            --text-muted: #71717a;
            --accent: #22d3ee;
            --accent-hover: #06b6d4;
            --success: #34d399;
            --warning: #fbbf24;
            --danger: #f43f5e;
            --info: #818cf8;

            --primary: #22d3ee;
            --primary-dark: #06b6d4;
            --primary-light: #67e8f9;
            --success-dark: #10b981;
            --success-light: #6ee7b7;
            --warning-light: #fcd34d;
            --danger-light: #fda4af;
            --info-light: #a5b4fc;

            --bg-start: #09090b;
            --bg-end: #09090b;
            --card-bg: #27272a;
            --card-bg-hover: #3f3f46;
            --input-bg: #27272a;
            --input-bg-hover: #3f3f46;
            --border-color: #3f3f46;
            --option-bg: #27272a;
            --option-color: #fafafa;

            --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
            --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
            --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
            --shadow-strong: 0 8px 24px rgba(0, 0, 0, 0.5);

            --header-accent: #22d3ee;
            --header-accent-opacity: 0.8;

            --star-color: rgba(34, 211, 238, 0.8);
            --aurora-color: rgba(34, 211, 238, 0.18);
            --aurora-color-2: rgba(168, 85, 247, 0.12);

            /* M007: 顶栏专用变量 */
            --header-bg: #18181b;
            --header-text: #fafafa;
            --header-stat-bg: rgba(34,211,238,0.12);
            --header-num: #22d3ee;
            --header-btn-bg: rgba(34,211,238,0.12);
            --header-btn-text: #fafafa;
        }

        /* ===== 风格六: 北欧极简 (Nordic Minimal) - M007 精确颜色 ===== */
        [data-style="nordic"] {
            --bg-primary: #ffffff;
            --bg-secondary: #fafafa;
            --bg-elevated: #ffffff;
            --surface: #f5f5f5;
            --border: #e5e5e5;
            --border-strong: #d4d4d4;
            --text-primary: #171717;
            --text-secondary: #737373;
            --text-muted: #a3a3a3;
            --accent: #171717;
            --accent-hover: #404040;
            --success: #059669;
            --warning: #d97706;
            --danger: #dc2626;
            --info: #6366f1;

            --primary: #b45309;
            --primary-dark: #92400e;
            --primary-light: #d97706;
            --success-dark: #047857;
            --success-light: #6ee7b7;
            --warning-light: #fcd34d;
            --danger-light: #fca5a5;
            --info-light: #a5b4fc;

            --bg-start: #ffffff;
            --bg-end: #ffffff;
            --card-bg: #ffffff;
            --card-bg-hover: #fafafa;
            --input-bg: #ffffff;
            --input-bg-hover: #f5f5f5;
            --border-color: #e5e5e5;
            --option-bg: #ffffff;
            --option-color: #171717;

            --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
            --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.04);
            --shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.06);
            --shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
            --shadow-strong: 0 6px 20px rgba(0, 0, 0, 0.06);

            --header-accent: #171717;
            --header-accent-opacity: 0.6;

            --star-color: rgba(23, 23, 23, 0.3);
            --aurora-color: rgba(23, 23, 23, 0.06);
            --aurora-color-2: rgba(180, 83, 9, 0.05);

            /* M007: 顶栏专用变量 */
            --header-bg: #fafafa;
            --header-text: #171717;
            --header-stat-bg: #f5f5f5;
            --header-num: #b45309;
            --header-btn-bg: #f5f5f5;
            --header-btn-text: #171717;
        }

        /* ===== 风格八: 曜石黑金 (Obsidian Black Gold) - M007 精确颜色 ===== */
        [data-style="obsidian"] {
            --bg-primary: #0a0a0a;
            --bg-secondary: #171717;
            --bg-elevated: #262626;
            --surface: #171717;
            --border: #262626;
            --border-strong: #404040;
            --text-primary: #f5f5f5;
            --text-secondary: #a3a3a3;
            --text-muted: #737373;
            --accent: #f5d060;
            --accent-hover: #fbbf24;
            --success: #34d399;
            --warning: #fbbf24;
            --danger: #f87171;
            --info: #60a5fa;

            --primary: #d4a017;
            --primary-dark: #a17c11;
            --primary-light: #e6b94a;
            --success-dark: #10b981;
            --success-light: #6ee7b7;
            --warning-light: #fcd34d;
            --danger-light: #fca5a5;
            --info-light: #93c5fd;

            --bg-start: #0a0a0a;
            --bg-end: #0a0a0a;
            --card-bg: #262626;
            --card-bg-hover: #404040;
            --input-bg: #262626;
            --input-bg-hover: #404040;
            --border-color: #404040;
            --option-bg: #262626;
            --option-color: #f5f5f5;

            --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.6);
            --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
            --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
            --shadow-strong: 0 8px 24px rgba(0, 0, 0, 0.6);

            --header-accent: #f5d060;
            --header-accent-opacity: 0.6;

            --star-color: rgba(245, 208, 96, 0.8);
            --aurora-color: rgba(212, 160, 23, 0.18);
            --aurora-color-2: rgba(202, 138, 4, 0.12);

            /* M007: 顶栏专用变量 */
            --header-bg: #0a0a0a;
            --header-text: #f5f5f5;
            --header-stat-bg: rgba(212,160,23,0.12);
            --header-num: #d4a017;
            --header-btn-bg: rgba(212,160,23,0.12);
            --header-btn-text: #f5f5f5;
        }

        /* ===== 风格九: 冰川蓝川 (Glacier Blue) - M007 精确颜色 ===== */
        [data-style="glacier"] {
            --bg-primary: #f0f9ff;
            --bg-secondary: #e0f2fe;
            --bg-elevated: #ffffff;
            --surface: #e0f2fe;
            --border: #bae6fd;
            --border-strong: #7dd3fc;
            --text-primary: #0c4a6e;
            --text-secondary: #64748b;
            --text-muted: #94a3b8;
            --accent: #0284c7;
            --accent-hover: #0369a1;
            --success: #059669;
            --warning: #d97706;
            --danger: #dc2626;
            --info: #6366f1;

            --primary: #7dd3fc;
            --primary-dark: #38bdf8;
            --primary-light: #bae6fd;
            --success-dark: #047857;
            --success-light: #6ee7b7;
            --warning-light: #fcd34d;
            --danger-light: #fca5a5;
            --info-light: #a5b4fc;

            --bg-start: #f0f9ff;
            --bg-end: #f0f9ff;
            --card-bg: #ffffff;
            --card-bg-hover: #f0f9ff;
            --input-bg: #ffffff;
            --input-bg-hover: #f0f9ff;
            --border-color: #bae6fd;
            --option-bg: #ffffff;
            --option-color: #0c4a6e;

            --shadow-sm: 0 1px 3px rgba(2, 132, 199, 0.12);
            --shadow-md: 0 4px 12px rgba(2, 132, 199, 0.1);
            --shadow-lg: 0 8px 24px rgba(2, 132, 199, 0.15);
            --shadow: 0 4px 12px rgba(2, 132, 199, 0.1);
            --shadow-strong: 0 8px 24px rgba(2, 132, 199, 0.15);

            --header-accent: #0284c7;
            --header-accent-opacity: 0.7;

            --star-color: rgba(125, 211, 252, 0.7);
            --aurora-color: rgba(2, 132, 199, 0.15);
            --aurora-color-2: rgba(14, 165, 233, 0.1);

            /* M007: 顶栏专用变量 */
            --header-bg: #0c4a6e;
            --header-text: #e0f2fe;
            --header-stat-bg: rgba(125,211,252,0.15);
            --header-num: #7dd3fc;
            --header-btn-bg: rgba(125,211,252,0.15);
            --header-btn-text: #e0f2fe;
        }

        /* ===== 鎏金流光 (Golden Flow) - 牛栏山尊贵大气主题 ===== */
        [data-style="liujin"] {
            /* 深色：墨黑渐变底 + 鎏金流光 */
            --bg-primary: #12141b;
            --bg-secondary: #171a23;
            --bg-elevated: #1e222d;
            --surface: #1c2029;
            --border: rgba(216, 180, 120, 0.16);
            --border-strong: rgba(216, 180, 120, 0.34);
            --text-primary: #f0e9db;
            --text-secondary: #c9bfa9;
            --text-muted: #9a8e78;
            --accent: #d4a960;
            --accent-hover: #e0b45f;
            --success: #34d399;
            --warning: #fbbf24;
            --danger: #f87171;
            --info: #818cf8;

            --primary: #d4a960;
            --primary-dark: #b8913f;
            --primary-light: #e0c081;
            --success-dark: #059669;
            --success-light: #6ee7b7;
            --warning-light: #fcd34d;
            --danger-light: #fca5a5;
            --info-light: #a5b4fc;

            --bg-start: #0d0e13;
            --bg-end: #1a1c25;
            --card-bg: #1c2029;
            --card-bg-hover: #222632;
            --input-bg: #1e222d;
            --input-bg-hover: #262b38;
            --border-color: rgba(216, 180, 120, 0.16);
            --option-bg: #1e222d;
            --option-color: #f0e9db;

            --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
            --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
            --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
            --shadow-strong: 0 8px 24px rgba(0, 0, 0, 0.5);

            --header-accent: #d4a960;
            --header-accent-opacity: 0.8;

            --star-color: rgba(216, 180, 120, 0.5);
            --aurora-color: rgba(212, 169, 96, 0.14);
            --aurora-color-2: rgba(95, 99, 201, 0.1);

            /* M007: 顶栏专用变量 */
            --header-bg: #171a23;
            --header-text: #f0e9db;
            --header-stat-bg: rgba(216,180,120,0.1);
            --header-num: #e0b45f;
            --header-btn-bg: rgba(216,180,120,0.1);
            --header-btn-text: #f0e9db;
        }

        /* 鎏金流光 · 浅色（跟随明暗切换）—— 背景更白/更暖，卡片按钮更圆润 */
        [data-theme="light"][data-style="liujin"] {
            --bg-primary: #fdfaf3;
            --bg-secondary: #fffdf7;
            --bg-elevated: #ffffff;
            --surface: #fffdf9;
            --border: rgba(180, 140, 80, 0.18);
            --border-strong: rgba(180, 140, 80, 0.34);
            --text-primary: #3a3327;
            --text-secondary: #5f5544;
            --text-muted: #8a7d66;
            --accent: #b07d2f;
            --accent-hover: #c9943f;
            --success: #15855a;
            --warning: #a86d0a;
            --danger: #c0392b;
            --info: #5f63c9;

            --primary: #b07d2f;
            --primary-dark: #8a5f1e;
            --primary-light: #c9943f;
            --success-dark: #0f6b46;
            --success-light: #6ee7b7;
            --warning-light: #f5c23c;
            --danger-light: #f5a9a0;
            --info-light: #a5b4fc;

            --bg-start: #fdfaf3;
            --bg-end: #faf3e4;
            --card-bg: #ffffff;
            --card-bg-hover: #fbf4e6;
            --input-bg: #ffffff;
            --input-bg-hover: #fdf7ec;
            --border-color: rgba(180, 140, 80, 0.18);
            --option-bg: #ffffff;
            --option-color: #3a3327;

            /* 圆角统一加大，卡片与按钮更圆润 */
            --radius-sm: 10px;
            --radius-md: 14px;
            --radius-lg: 18px;
            --radius-xl: 24px;

            --shadow-sm: 0 1px 3px rgba(120, 90, 40, 0.08);
            --shadow-md: 0 6px 18px rgba(120, 90, 40, 0.08);
            --shadow-lg: 0 12px 30px rgba(120, 90, 40, 0.1);
            --shadow: 0 6px 18px rgba(120, 90, 40, 0.08);
            --shadow-strong: 0 12px 30px rgba(120, 90, 40, 0.1);

            /* 术语解释彩色标题 - 浅色用深金色保证可读 */
            --term-a: #a86d0a;
            --term-x: #1d4ed8;
            --term-cv: #047857;
            --term-combo: #6d28d9;
            --state-danger: #b91c1c;
            --state-warning: #a86d0a;
            --state-success: #047857;

            --star-color: rgba(176, 125, 47, 0.4);
            --aurora-color: rgba(201, 148, 63, 0.1);
            --aurora-color-2: rgba(95, 99, 201, 0.06);

            --header-bg: #fdfaf3;
            --header-text: #3a3327;
            --header-stat-bg: rgba(176,125,47,0.1);
            --header-num: #8a5f1e;
            --header-btn-bg: rgba(176,125,47,0.1);
            --header-btn-text: #3a3327;
        }
        /* liujin 属于跟随明暗的主题，不强制深色 */

        /* ===== 风格十二: 深空蓝夜 (Deep Blue Night) - M007 精确颜色 ===== */
        [data-style="shenlan"] {
            --bg-primary: #0b1120;
            --bg-secondary: #0f172a;
            --bg-elevated: #1e293b;
            --surface: #0f172a;
            --border: #1e293b;
            --border-strong: #334155;
            --text-primary: #e2e8f0;
            --text-secondary: #94a3b8;
            --text-muted: #64748b;
            --accent: #38bdf8;
            --accent-hover: #0ea5e9;
            --success: #34d399;
            --warning: #fbbf24;
            --danger: #f87171;
            --info: #818cf8;

            --primary: #38bdf8;
            --primary-dark: #0ea5e9;
            --primary-light: #7dd3fc;
            --success-dark: #10b981;
            --success-light: #6ee7b7;
            --warning-light: #fcd34d;
            --danger-light: #fca5a5;
            --info-light: #a5b4fc;

            --bg-start: #0b1120;
            --bg-end: #0b1120;
            --card-bg: #1e293b;
            --card-bg-hover: #334155;
            --input-bg: #1e293b;
            --input-bg-hover: #334155;
            --border-color: #334155;
            --option-bg: #1e293b;
            --option-color: #e2e8f0;

            --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
            --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
            --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
            --shadow-strong: 0 8px 24px rgba(0, 0, 0, 0.5);

            --header-accent: #38bdf8;
            --header-accent-opacity: 0.8;

            --star-color: rgba(56, 189, 248, 0.8);
            --aurora-color: rgba(56, 189, 248, 0.18);
            --aurora-color-2: rgba(129, 140, 248, 0.12);

            /* M007: 顶栏专用变量 */
            --header-bg: #0f172a;
            --header-text: #e2e8f0;
            --header-stat-bg: rgba(56,189,248,0.12);
            --header-btn-bg: rgba(56,189,248,0.12);
            --header-btn-text: #e2e8f0;
        }

        /* ===== Light Theme Override (applies on top of any style) — 鎏金·晨光 浅色 ===== */
        [data-theme="light"] {
            --bg-primary: #F7F5F0;
            --bg-secondary: #FFFFFF;
            --bg-elevated: #FFFFFF;
            --surface: #F1EDE4;
            --border: #E2DCCE;
            --border-strong: #C9BFA8;
            --text-primary: #2B2620;
            --text-secondary: #5A5245;
            --text-muted: #857B6A;
            --bg-start: #F7F5F0;
            --bg-end: #F7F5F0;
            --card-bg: #FFFFFF;
            --card-bg-hover: #FBF8F1;
            --input-bg: #F1EDE4;
            --input-bg-hover: #EAE4D6;
            --border-color: #E2DCCE;
            --option-bg: #FFFFFF;
            --option-color: #2B2620;
            --shadow-sm: 0 1px 3px rgba(120, 100, 70, 0.10);
            --shadow-md: 0 4px 12px rgba(120, 100, 70, 0.08);
            --shadow-lg: 0 8px 24px rgba(120, 100, 70, 0.10);
            --shadow: 0 4px 12px rgba(120, 100, 70, 0.08);
            --shadow-strong: 0 8px 24px rgba(120, 100, 70, 0.10);
            /* 术语解释彩色标题 - 浅色主题用深色调，保证浅底可读 */
            --term-a: #9A4A06;
            --term-x: #2456A6;
            --term-cv: #166B45;
            --term-combo: #6B3FA0;
            /* 术语解释状态词 - 浅色主题用深色调 */
            --state-danger: #A62B22;
            --state-warning: #9A4A06;
            --state-success: #166B45;
            /* 星空流光主题色 - 浅色下用淡金，避免过暗 */
            --star-color: rgba(176, 125, 47, 0.45);
            --aurora-color: rgba(176, 125, 47, 0.10);
            --aurora-color-2: rgba(154, 74, 6, 0.06);
        }
        /* 鎏金·晨光 深色默认风格：金底(#D9A85C)配深字 #221E18 ≈7.7:1，
           仅作用于无 data-style 且非浅色的默认状态，不影响 19 个风格块 */
        html:not([data-theme="light"]):not([data-style]) {
            --on-accent: #221E18;
        }
        /* 鎏金·晨光 浅色语义色：仅作用于默认风格（无 data-style），
           避免覆盖 19 个可选风格各自的 accent/语义色体系 */
        html[data-theme="light"]:not([data-style]) {
            --accent: #916318;
            --accent-hover: #8A5F1E;
            --primary: #916318;
            --primary-dark: #8A5F1E;
            --primary-light: #B07D2F;
            --success: #1F7A4D;
            --success-dark: #166B45;
            --success-light: #2E8F60;
            --warning: #B45309;
            --warning-light: #C97A2E;
            --danger: #B42318;
            --danger-light: #C94B3C;
            --info: #3B66A8;
            --info-light: #4F7CB8;
            /* 按钮扩展色 - 低饱和暖调，白字对比度达标 */
            --purple: #6B4373;
            --cyan: #1E6770;
            --indigo: #46528A;
            --red: #9E3226;
            --orange: #A05217;
            --teal: #2C6656;
            --pink: #96405F;
            --slate: #565347;
            --emerald: #35703C;
            --header-accent: #B07D2F;
            --header-accent-opacity: 0.5;
            /* 浅色默认风格 accent 已加深至 #916318，改配白字 ≈5.25:1 */
            --on-accent: #FFFFFF;
        }
        /* Light + Clean: already clean by default, just ensure pure whites */
        [data-theme="light"][data-style="clean"] {
            /* 原现代色彩函数在旧内核 canvas 会静默降级，已改等价 hex */
            --bg-primary: #FAFAFA;
            --bg-end: #FAFAFA;
            --border-color: #E6E6EA;
        }

        /* ===== Light Theme Text Contrast Enhancements =====
           2026-08-16：--text-muted 由 #7A7060 加深至 #746A5A（--nl-umber-400），
           页底 #F7F5F0 对比度 4.47→4.88，白卡内 5.31，WCAG AA 达标 */
        [data-theme="light"] {
            --text-secondary: var(--nl-umber-200);
            --text-muted: var(--nl-umber-400);
        }

        /* ===== 深色风格主题：强制深色页面（覆盖上方 light 洗白，M007 预览为深色） ===== */
        [data-theme="light"][data-style="neon"] {
            --bg-primary: #09090b;
            --bg-secondary: #18181b;
            --bg-elevated: #27272a;
            --surface: #18181b;
            --border: #27272a;
            --border-strong: #3f3f46;
            --text-primary: #fafafa;
            --text-secondary: #a1a1aa;
            --text-muted: #71717a;
            --bg-start: #09090b;
            --bg-end: #09090b;
            --card-bg: #27272a;
            --card-bg-hover: #3f3f46;
            --input-bg: #27272a;
            --input-bg-hover: #3f3f46;
            --border-color: #3f3f46;
            --option-bg: #27272a;
            --option-color: #fafafa;
            --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
            --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
            --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
            --shadow-strong: 0 8px 24px rgba(0, 0, 0, 0.5);
            --star-color: rgba(34, 211, 238, 0.8);
            --aurora-color: rgba(34, 211, 238, 0.18);
            --aurora-color-2: rgba(168, 85, 247, 0.12);
        }
        [data-theme="light"][data-style="shenlan"] {
            --bg-primary: #0b1120;
            --bg-secondary: #0f172a;
            --bg-elevated: #1e293b;
            --surface: #0f172a;
            --border: #1e293b;
            --border-strong: #334155;
            --text-primary: #e2e8f0;
            --text-secondary: #94a3b8;
            --text-muted: #64748b;
            --bg-start: #0b1120;
            --bg-end: #0b1120;
            --card-bg: #1e293b;
            --card-bg-hover: #334155;
            --input-bg: #1e293b;
            --input-bg-hover: #334155;
            --border-color: #334155;
            --option-bg: #1e293b;
            --option-color: #e2e8f0;
            --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
            --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
            --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
            --shadow-strong: 0 8px 24px rgba(0, 0, 0, 0.5);
            --star-color: rgba(56, 189, 248, 0.8);
            --aurora-color: rgba(56, 189, 248, 0.18);
            --aurora-color-2: rgba(129, 140, 248, 0.12);
        }
        [data-theme="light"][data-style="obsidian"] {
            --bg-primary: #0a0a0a;
            --bg-secondary: #171717;
            --bg-elevated: #262626;
            --surface: #171717;
            --border: #262626;
            --border-strong: #404040;
            --text-primary: #f5f5f5;
            --text-secondary: #a3a3a3;
            --text-muted: #737373;
            --bg-start: #0a0a0a;
            --bg-end: #0a0a0a;
            --card-bg: #262626;
            --card-bg-hover: #404040;
            --input-bg: #262626;
            --input-bg-hover: #404040;
            --border-color: #404040;
            --option-bg: #262626;
            --option-color: #f5f5f5;
            --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.6);
            --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
            --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
            --shadow-strong: 0 8px 24px rgba(0, 0, 0, 0.6);
            --star-color: rgba(245, 208, 96, 0.8);
            --aurora-color: rgba(212, 160, 23, 0.18);
            --aurora-color-2: rgba(202, 138, 4, 0.12);
        }
        /* 深色风格主题：浏览器原生控件也按深色渲染 */
        [data-style="neon"], [data-style="shenlan"], [data-style="obsidian"] {
            color-scheme: dark;
            /* 术语解释彩色标题 - 恢复亮色，保证深底可读 */
            --term-a: #E5B04D;
            --term-x: #7C9CEC;
            --term-cv: #4FC98B;
            --term-combo: #C87FD6;
            /* 术语解释状态词 - 恢复亮色 */
            --state-danger: #E8543F;
            --state-warning: #E9B755;
            --state-success: #4FC98B;
        }

        /* ===== 北欧极简：强制浅色（覆盖 dark mode 默认行为） ===== */
        [data-style="nordic"] {
            color-scheme: light;
        }
        [data-style="nordic"] .theme-select option {
            background: #fff;
            color: #1f2937;
        }

        /* ===== Accessibility: Interaction Cues ===== */
        a, button, select, [role="button"], .clickable,
        .nav-item, .tab-btn, .card, .stat-card,
        [onclick]:not(body):not(html) {
            cursor: pointer;
        }

        /* ===== Global Transition =====
           微过渡统一：160ms / productive 曲线（120-180ms 区间） */
        a, button, .btn-sm, .nav-item, .tab-btn,
        input:not([type="checkbox"]):not([type="radio"]),
        select, textarea { transition: border-color var(--nl-dur-base) var(--nl-ease-productive), background var(--nl-dur-base) var(--nl-ease-productive), opacity var(--nl-dur-base) var(--nl-ease-productive); }

        /* ===== Functional Animations Only ===== */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes slideIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes slideInRight {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        @keyframes modalSlideIn {
            from { opacity: 0; transform: scale(0.95) translateY(20px); }
            to { opacity: 1; transform: scale(1) translateY(0); }
        }
        @keyframes toastSlideIn {
            0% { transform: translateY(40px) scale(0.9); opacity: 0; }
            60% { transform: translateY(-4px) scale(1.02); }
            100% { transform: translateY(0) scale(1); opacity: 1; }
        }
        @keyframes rippleEffect {
            to { transform: scale(4); opacity: 0; }
        }
        @keyframes cardEntrance {
            from { opacity: 0; transform: translateY(30px) scale(0.95); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }
        @keyframes statNumberPop {
            0% { transform: scale(1); }
            50% { transform: scale(1.15); }
            100% { transform: scale(1); }
        }
        @keyframes cardFadeIn {
            from { opacity: 0; transform: translateY(20px) scale(0.98); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }

        /* ===== Reduced Motion ===== */
        /* 安全修复 M-6：合并重复的 prefers-reduced-motion 块，统一使用 none !important */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation: none !important;
                transition: none !important;
            }
        }

        /* ===== Stat Pop ===== */
        .stat-pop {
            animation: statNumberPop 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
        }

        /* ===== Global Reset & Enhancements ===== */
        /* Font smoothing for crisp text rendering */
        /* 安全修复 H-7：添加 color-scheme 属性，让浏览器原生 UI（滚动条、select 等）适配主题 */
        html {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            color-scheme: dark;
        }
        [data-theme="light"] { color-scheme: light; }

        /* Global focus styles - visible keyboard navigation
           WCAG 2.2：金色光环 + 2px 实线 + 2px 偏移；
           移除旧 border-radius 覆写（键盘聚焦时不再跳变圆角） */
        :focus-visible {
            outline: var(--nl-focus-ring-width) solid var(--nl-focus-ring-color);
            outline-offset: var(--nl-focus-ring-offset);
            box-shadow: var(--nl-focus-halo);
        }

        /* Consistent transition timing - only on transform/opacity for performance */
        a, button, .btn-sm, .nav-item, .tab-btn, .card, .stat-card { transition: transform var(--nl-dur-base) var(--nl-ease-productive), opacity var(--nl-dur-base) var(--nl-ease-productive), box-shadow var(--nl-dur-base) var(--nl-ease-productive); }

        /* ===== Body ===== */
        body {
            font-family: var(--font-sans);
            /* 正文四级阶梯基底：1.5 行高 + 等宽数字（表格/统计列对齐） */
            line-height: 1.5;
            font-variant-numeric: tabular-nums;
            /* 用 background-color 长写：background 简写不可插值，
               主题切换时 var() 变化无法被 theme-transitioning 的
               background-color 过渡捕获，导致 body 底色停留旧色 */
            background-color: var(--bg-primary);
            min-height: 100vh;
            padding: var(--space-5);
            color: var(--text-primary);
            overflow-x: hidden;
        }

        /* ===== Watermark - static, no animation ===== */
        .watermark {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(-15deg);
            font-size: 120px;
            font-weight: 700;
            color: rgba(120, 120, 140, 0.06);
            pointer-events: none;
            z-index: -1;
            user-select: none;
        }
        [data-theme="light"] .watermark {
            color: rgba(90, 90, 105, 0.04);
        }

        /* ===== Header ===== */
        .header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 0;
            padding: 6px 14px;
            min-height: 86px;
            background: var(--header-bg, var(--bg-secondary));
            border-radius: 0;
            border: none;
            box-shadow: none;
            position: relative;
            color: var(--header-text, var(--text-primary));
            flex-wrap: nowrap;
            gap: 10px;
        }
        .header::after { display: none; }
        .header-title {
            display: flex;
            align-items: stretch;
            gap: 8px;
            height: 48px;
        }
        .header-title .logo-img {
            height: 100%;
            width: auto;
            object-fit: contain;
            object-position: center top;
            border-radius: 5px;
            transition: transform 0.15s ease-out;
            flex-shrink: 0;
            margin: 0;
            padding: 0;
            display: block;
        }
        .header-title .logo-img:hover {
            transform: scale(1.05);
        }
        .header-title-text {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            justify-content: flex-start;
            gap: 0;
            line-height: 1;
            flex: 1;
            min-width: 0;
            height: 100%;
        }
        /* 640.gif 动图样式：平铺铺满标题上方（顶部与LOGO头部对齐） */
        /* !important 用于覆盖下方 .header-gif 的 48x24 小图样式（min-width/max-width） */
        .header-title-text .header-gif {
            height: 30px !important;
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            object-fit: cover !important;
            object-position: center !important;
            border-radius: 3px !important;
            display: block !important;
            flex-shrink: 0;
            margin: 0 !important;
            padding: 0 !important;
        }
        .header-title h1 {
            font-size: 14px;
            font-weight: 800;
            color: var(--header-text, var(--text-primary));
            letter-spacing: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 35%, #ec4899 70%, #f59e0b 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin: 0;
            padding: 0;
            line-height: 1;
            display: flex;
            align-items: flex-end;
            flex: 1;
            min-height: 0;
            /* 用户手动调整的偏移值（X=25, Y=-3） */
            transform: translate(25px, -3px);
        }
        /* 左侧组合容器：标题 + 统计 */
.header-left-group {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-shrink: 0;
        }
        .header-left-group .header-title {
            flex-shrink: 0;
        }
        .header-left-group .header-title h1 {
            font-size: 14px;
        }
        .header-stats {
            display: flex;
            gap: 5px;
            flex-shrink: 0;
        }
        /* 顶部导航栏动图：48x24 小图（M003预览尺寸） */
        .header-gif {
            flex: 0 0 auto;
            width: 48px;
            height: 24px;
            min-width: 48px;
            max-width: 48px;
            object-fit: cover;
            object-position: center;
            border-radius: 5px;
            opacity: 0.95;
            transition: transform 0.2s ease-out, opacity 0.2s ease-out;
        }
        .header-gif:hover {
            transform: scale(1.03);
            opacity: 1;
        }
        .stat-item {
            text-align: center;
            padding: 5px 10px;
            background: var(--header-stat-bg, rgba(255,255,255,0.08));
            border-radius: 7px;
            border: none;
            transition: background 0.15s ease-out;
            min-width: 72px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .stat-item:hover {
            background: var(--header-stat-bg, rgba(255,255,255,0.08));
        }
        /* 顶栏统计卡片语义化颜色（跟随主题） */
        .stat-item--loading {
            background: color-mix(in srgb, var(--accent) 12%, transparent);
            border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
        }
        .stat-item--loading .stat-value,
        .stat-item--loading i {
            color: var(--accent);
        }
        .stat-item--completed {
            background: color-mix(in srgb, var(--success) 12%, transparent);
            border: 1px solid color-mix(in srgb, var(--success) 20%, transparent);
        }
        .stat-item--completed .stat-value,
        .stat-item--completed i {
            color: var(--success);
        }
        .stat-item--quantity {
            background: color-mix(in srgb, var(--warning) 12%, transparent);
            border: 1px solid color-mix(in srgb, var(--warning) 20%, transparent);
        }
        .stat-item--quantity .stat-value,
        .stat-item--quantity i {
            color: var(--warning);
        }
        .stat-item-inner {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .stat-item-inner i {
            font-size: var(--text-xs, 11px);
        }
        .stat-item .stat-value {
            font-size: var(--text-xl, 20px);
            font-weight: 800;
            line-height: 1;
        }
        .header-stats {
            gap: 8px;
        }
        .header-stats .stat-label {
            font-size: var(--text-xs, 11px);
            margin-top: 3px;
            letter-spacing: 0.3px;
        }
        .stat-value {
            font-size: 14px;
            font-weight: 800;
            color: var(--header-num, var(--accent));
            line-height: 1.2;
        }
        .stat-label {
            font-size: 8px;
            color: var(--header-text, var(--text-primary));
            opacity: 0.75;
            margin-top: 0;
            letter-spacing: 0;
            font-weight: 400;
            text-transform: none;
        }

        .header-right {
            display: flex;
            align-items: center;
            gap: 4px;
            flex: 0 0 auto;
            min-width: 0;
            flex-wrap: nowrap;
            margin-left: auto;
            justify-content: flex-end;
            padding-top: 4px;
            overflow-x: auto;
        }
        .header-right::-webkit-scrollbar { height: 3px; }
        .header-right::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
        .header-right::-webkit-scrollbar-track { background: transparent; }
        .header-right .export-btn {
            font-size: var(--text-2xs);
            padding: 3px 8px;
            border-radius: 5px;
            letter-spacing: 0;
            white-space: nowrap;
            border: none;
            background: var(--header-btn-bg, rgba(255,255,255,0.08));
            color: var(--header-btn-text, var(--text-primary));
            font-weight: 400;
        }
        .header-right .export-btn i {
            margin-right: 3px;
        }
        /* 导航栏分组 */
        .header-theme-group {
            display: flex;
            align-items: center;
            gap: var(--space-1);
            padding-right: var(--space-3);
            border-right: 1px solid var(--border);
        }
        .header-btn-group {
            display: flex;
            align-items: center;
            gap: 4px;
            padding-right: 0;
            border-right: none;
        }
        /* 历史查询复选框可见性保障 */
        .history-query-table input[type="checkbox"],
        .history-row-checkbox,
        #historySelectAll {
            visibility: visible !important;
            opacity: 1 !important;
            display: inline-block !important;
            width: 14px !important;
            height: 14px !important;
            cursor: pointer;
            margin: 0;
            z-index: 10;
            position: relative;
        }

        /* ===== [v3.3.3] 管理员模式：顶栏「管理」下拉菜单 + 紧凑布局 ===== */
        .header-dropdown {
            position: relative;
            display: inline-block;
            z-index: 10000; /* 提升层叠上下文，避免被 header-env-cards 遮挡 */
        }
        .header-btn-group {
            display: flex;
            align-items: center;
            gap: 4px;
            padding-right: 0;
            border-right: none;
            position: relative;
            z-index: 9999;
        }
        .admin-more-btn {
            background: linear-gradient(135deg, var(--info), var(--accent)) !important;
            color: #fff !important;
            font-weight: 600 !important;
            border: none !important;
            position: relative;
            padding-right: 10px !important;
        }
        .admin-more-btn:hover {
            filter: brightness(1.1);
            transform: translateY(-1px);
        }
        .admin-more-caret {
            font-size: 9px !important;
            margin-left: 2px !important;
            transition: transform 0.2s ease;
        }
        .header-dropdown.open .admin-more-caret {
            transform: rotate(180deg);
        }
        .admin-mode-dot {
            position: absolute;
            top: -2px;
            right: -2px;
            width: 8px;
            height: 8px;
            background: #ff5252;
            border-radius: 50%;
            border: 1.5px solid var(--bg-elevated, #fff);
            box-shadow: 0 0 0 2px color-mix(in srgb, #ff5252 25%, transparent);
            animation: adminDotPulse 1.6s ease-in-out infinite;
        }
        @keyframes adminDotPulse {
            0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, #ff5252 25%, transparent); }
            50%      { box-shadow: 0 0 0 4px color-mix(in srgb, #ff5252 0%, transparent); }
        }
        .admin-more-menu {
            position: fixed; /* 改为 fixed，避开所有 flex/z-index 上下文问题 */
            top: 0;
            left: 0;
            min-width: 220px;
            background: var(--bg-elevated, #fff);
            border: 1px solid var(--border);
            border-radius: var(--radius-md, 8px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.08);
            padding: 4px 0;
            display: none;
            z-index: 99999;
            animation: adminMenuFade 0.18s ease-out;
        }
        .header-dropdown.open .admin-more-menu {
            display: block;
        }
        @keyframes adminMenuFade {
            from { opacity: 0; transform: translateY(-4px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .admin-more-menu-title {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 12px 6px;
            font-size: 11px;
            font-weight: 700;
            color: var(--text-primary, #1e293b);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border-bottom: 1px solid var(--border);
            margin-bottom: 2px;
            background: color-mix(in srgb, var(--accent) 5%, transparent);
        }
        .admin-more-section {
            padding: 4px 0 2px;
        }
        .admin-more-section-title {
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 4px 14px 2px;
            font-size: 10px;
            font-weight: 700;
            color: var(--text-secondary, #64748b);
            text-transform: uppercase;
            letter-spacing: 0.6px;
        }
        .admin-more-section-title.admin-only {
            color: var(--danger, #DC2626);
        }
        .admin-more-section-title.admin-only i {
            color: var(--danger, #DC2626);
        }
        .admin-more-section-subtitle {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 4px 14px 2px;
            font-size: 10px;
            font-weight: 600;
            color: var(--text-secondary, #64748b);
            letter-spacing: 0.3px;
            opacity: 0.85;
        }
        .admin-more-sub-divider {
            height: 1px;
            background: var(--border);
            margin: 4px 14px;
            opacity: 0.5;
        }
        .admin-more-divider {
            height: 1px;
            background: var(--border);
            margin: 4px 8px;
        }
        .admin-more-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 12px;
            color: var(--text-primary);
            font-size: 12px;
            text-decoration: none;
            cursor: pointer;
            transition: background 0.15s ease;
            white-space: nowrap;
        }
        .admin-more-item:hover {
            background: color-mix(in srgb, var(--accent) 12%, transparent);
            color: var(--accent);
        }
        .admin-more-item i {
            width: 14px;
            text-align: center;
            font-size: 12px;
            opacity: 0.85;
        }
        .admin-more-item.admin-only {
            border-left: 2px solid var(--danger, #DC2626);
            padding-left: 10px;
        }

        /* 管理员模式指示胶囊（紧贴用户徽章左侧） */
        .admin-mode-chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 2px 8px;
            background: linear-gradient(135deg, var(--danger, #DC2626), var(--warning, #F59E0B));
            color: #fff;
            border-radius: 12px;
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 0.5px;
            box-shadow: 0 1px 3px color-mix(in srgb, var(--danger, #DC2626) 40%, transparent);
            white-space: nowrap;
            cursor: default;
            transition: all 0.2s ease;
        }
        .admin-mode-chip:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 6px color-mix(in srgb, var(--danger, #DC2626) 55%, transparent);
        }
        .admin-mode-chip i {
            font-size: 10px;
        }

        /* 管理员模式：顶栏紧凑布局 */
        body.admin-mode .header-right .export-btn {
            padding: 3px 7px !important;
            font-size: 11px !important;
        }
        body.admin-mode .header-right {
            gap: 3px;
        }
        body.admin-mode .header-btn-group {
            gap: 3px;
        }

        /* ===== 用户徽章（顶栏 - 简约大气风格 - 6级角色艺术字用户名 v3.8） ===== */
        /* 整体徽章：扁平圆角胶囊 + 角色色细边 + 轻量阴影，无夸张动画 */
        .user-badge {
            --badge-color: var(--accent);
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            color: var(--text-primary);
            padding: 3px 6px 3px 3px;
            background: var(--bg-elevated);
            border-radius: 16px;
            border: 1px solid color-mix(in srgb, var(--badge-color) 35%, var(--border) 65%);
            white-space: nowrap;
            font-weight: 500;
            position: relative;
            transition: all 0.2s ease;
            box-shadow: 0 1px 2px rgba(0,0,0,0.04);
            cursor: default;
        }
        .user-badge:hover {
            border-color: var(--badge-color);
            background: color-mix(in srgb, var(--badge-color) 6%, var(--bg-elevated) 94%);
        }

        /* 头像（左侧） */
        .user-badge-avatar {
            position: relative;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: color-mix(in srgb, var(--badge-color) 90%, #000 10%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 11px;
            flex-shrink: 0;
        }
        .user-badge-avatar i { color: #fff; }

        /* 信息区（用户名 + 角色） */
        .user-badge-info {
            display: flex;
            flex-direction: column;
            gap: 0;
            line-height: 1.15;
            min-width: 0;
        }
        .user-badge-name {
            font-size: 12px;
            font-weight: 700;
            color: var(--badge-color);
            cursor: pointer;
            white-space: nowrap;
            /* 引入艺术字：优先 web font，回退到系统楷体/行楷 */
            font-family: 'Ma Shan Zheng', 'ZCOOL XiaoWei', 'STKaiti', 'KaiTi', '楷体', 'STXingkai', '华文行楷', cursive, serif;
            letter-spacing: 1px;
        }
        .user-badge-name:hover { filter: brightness(1.15); }
        .user-badge-role {
            font-size: 9px;
            font-weight: 600;
            color: var(--text-muted);
            letter-spacing: 0.3px;
            white-space: nowrap;
            text-transform: uppercase;
            /* 角色标签基础字体：楷体风格 */
            font-family: 'STKaiti', 'KaiTi', '楷体', serif;
        }

        /* 退出按钮（始终可见，hover 变红） */
        .user-badge-logout {
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            border: 1px solid var(--border);
            background: transparent;
            color: var(--text-muted);
            text-decoration: none;
            font-size: 11px;
            flex-shrink: 0;
            transition: all 0.2s;
            margin-left: 2px;
            cursor: pointer;
        }
        .user-badge-logout:hover {
            background: color-mix(in srgb, var(--danger) 15%, transparent);
            border-color: var(--danger);
            color: var(--danger);
        }

        /* ===== 顶栏用户徽章 - 6 级角色艺术字用户名（v3.8 升级配色） ===== */
        .user-badge.role-厂长     { --badge-color: #D4A017; }  /* 金色 */
        .user-badge.role-副厂长   { --badge-color: #A855F7; }  /* 紫色 */
        .user-badge.role-部长     { --badge-color: #F59E0B; }  /* 琥珀色 */
        .user-badge.role-副部长   { --badge-color: #3B82F6; }  /* 蓝色 */
        .user-badge.role-班长     { --badge-color: #10B981; }  /* 翠绿色 */
        .user-badge.role-副班长   { --badge-color: #14B8A6; }  /* 青绿色 */
        .user-badge.role-库管员,
        .user-badge.role-库管     { --badge-color: #7C3AED; }  /* 深紫色 */
        .user-badge.role-管理员   { --badge-color: #DC2626; }  /* 红色 */

        /* ===== 6级角色艺术字用户名（v3.8 - 各角色独特风格） ===== */
        /* 默认艺术字基础样式（避免 web font 加载失败时空空） */
        .user-badge .user-badge-name {
            font-weight: 700;
            letter-spacing: 1.5px;
        }

        /* 厂长：毛笔楷体 + 金色 3D 渐变 + 字间距宽 + 大字号 */
        .user-badge.role-厂长 .user-badge-name {
            font-family: 'Ma Shan Zheng', 'STKaiti', 'KaiTi', '楷体', cursive;
            font-size: 16px;
            background: linear-gradient(180deg, #FFE082 0%, #D4A017 45%, #B8860B 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
            letter-spacing: 3px;
            font-weight: 400;
            filter: drop-shadow(0 1px 1px rgba(212,160,23,0.5));
        }

        /* 副厂长：站酷小薇体 + 紫色渐变 + 略微倾斜 */
        .user-badge.role-副厂长 .user-badge-name {
            font-family: 'ZCOOL XiaoWei', 'STKaiti', 'KaiTi', '楷体', serif;
            font-size: 15px;
            background: linear-gradient(135deg, #C084FC 0%, #A855F7 50%, #7C3AED 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
            letter-spacing: 2.5px;
            font-weight: 700;
            font-style: italic;
            filter: drop-shadow(0 1px 1px rgba(168,85,247,0.5));
        }

        /* 部长：行书体 + 琥珀色渐变 */
        .user-badge.role-部长 .user-badge-name {
            font-family: 'Long Cang', 'STKaiti', 'KaiTi', '楷体', cursive;
            font-size: 15px;
            background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 50%, #D97706 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
            letter-spacing: 2px;
            font-weight: 400;
            filter: drop-shadow(0 1px 1px rgba(245,158,11,0.5));
        }

        /* 副部长：站酷快乐体 + 蓝色渐变（现代感） */
        .user-badge.role-副部长 .user-badge-name {
            font-family: 'ZCOOL KuaiLe', 'STKaiti', 'KaiTi', '楷体', sans-serif;
            font-size: 14px;
            background: linear-gradient(135deg, #60A5FA 0%, #3B82F6 50%, #1D4ED8 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
            letter-spacing: 2px;
            font-weight: 700;
            filter: drop-shadow(0 1px 1px rgba(59,130,246,0.5));
        }

        /* 班长：草书体 + 翠绿色渐变 */
        .user-badge.role-班长 .user-badge-name {
            font-family: 'Liu Jian Mao Cao', 'STKaiti', 'KaiTi', '楷体', cursive;
            font-size: 15px;
            background: linear-gradient(135deg, #34D399 0%, #10B981 50%, #047857 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
            letter-spacing: 2px;
            font-weight: 400;
            filter: drop-shadow(0 1px 1px rgba(16,185,129,0.5));
        }

        /* 副班长：黄油体 + 青绿色渐变（圆润可爱） */
        .user-badge.role-副班长 .user-badge-name {
            font-family: 'ZCOOL QingKe HuangYou', 'STKaiti', 'KaiTi', '楷体', sans-serif;
            font-size: 14px;
            background: linear-gradient(135deg, #2DD4BF 0%, #14B8A6 50%, #0F766E 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
            letter-spacing: 2px;
            font-weight: 700;
            filter: drop-shadow(0 1px 1px rgba(20,184,166,0.5));
        }

        /* 管理员：站酷小薇体 + 红色渐变（庄重醒目，与管理员徽章色呼应） */
        .user-badge.role-管理员 .user-badge-name {
            font-family: 'ZCOOL XiaoWei', 'STKaiti', 'KaiTi', '楷体', serif;
            font-size: 15px;
            background: linear-gradient(135deg, #F87171 0%, #DC2626 55%, #991B1B 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
            letter-spacing: 2px;
            font-weight: 700;
            filter: drop-shadow(0 1px 1px rgba(220,38,38,0.45));
        }

        /* ===== 6级角色职称（v3.8 - 与名字风格搭配） ===== */
        /* 厂长职称：金色描边胶囊 + 楷体（与名字毛笔字呼应） */
        .user-badge.role-厂长 .user-badge-role {
            color: #D4A017;
            font-family: 'STKaiti', 'KaiTi', '楷体', serif;
            font-weight: 700;
            font-size: 9px;
            letter-spacing: 1.5px;
            padding: 0 4px;
            background: linear-gradient(180deg, rgba(255, 224, 130, 0.18) 0%, rgba(212, 160, 23, 0.10) 100%);
            border: 1px solid rgba(212, 160, 23, 0.45);
            border-radius: 6px;
            align-self: flex-start;
            margin-top: 1px;
        }

        /* 副厂长职称：紫色描边胶囊 + 小薇体 */
        .user-badge.role-副厂长 .user-badge-role {
            color: #A855F7;
            font-family: 'ZCOOL XiaoWei', 'STKaiti', 'KaiTi', '楷体', serif;
            font-weight: 600;
            font-size: 9px;
            letter-spacing: 1.2px;
            padding: 0 4px;
            background: linear-gradient(180deg, rgba(192, 132, 252, 0.15) 0%, rgba(168, 85, 247, 0.08) 100%);
            border: 1px solid rgba(168, 85, 247, 0.45);
            border-radius: 6px;
            align-self: flex-start;
            margin-top: 1px;
            font-style: italic;
        }

        /* 部长职称：琥珀色描边胶囊 + 行楷 */
        .user-badge.role-部长 .user-badge-role {
            color: #D97706;
            font-family: 'STKaiti', 'KaiTi', '楷体', serif;
            font-weight: 700;
            font-size: 9px;
            letter-spacing: 1.2px;
            padding: 0 4px;
            background: linear-gradient(180deg, rgba(251, 191, 36, 0.15) 0%, rgba(245, 158, 11, 0.08) 100%);
            border: 1px solid rgba(245, 158, 11, 0.45);
            border-radius: 6px;
            align-self: flex-start;
            margin-top: 1px;
        }

        /* 副部长职称：蓝色描边胶囊 + 快乐体 */
        .user-badge.role-副部长 .user-badge-role {
            color: #3B82F6;
            font-family: 'ZCOOL KuaiLe', 'STKaiti', 'KaiTi', '楷体', sans-serif;
            font-weight: 600;
            font-size: 9px;
            letter-spacing: 1.2px;
            padding: 0 4px;
            background: linear-gradient(180deg, rgba(96, 165, 250, 0.15) 0%, rgba(59, 130, 246, 0.08) 100%);
            border: 1px solid rgba(59, 130, 246, 0.45);
            border-radius: 6px;
            align-self: flex-start;
            margin-top: 1px;
        }

        /* 班长职称：翠绿描边胶囊 + 草书 */
        .user-badge.role-班长 .user-badge-role {
            color: #047857;
            font-family: 'STKaiti', 'KaiTi', '楷体', serif;
            font-weight: 700;
            font-size: 9px;
            letter-spacing: 1.2px;
            padding: 0 4px;
            background: linear-gradient(180deg, rgba(52, 211, 153, 0.15) 0%, rgba(16, 185, 129, 0.08) 100%);
            border: 1px solid rgba(16, 185, 129, 0.45);
            border-radius: 6px;
            align-self: flex-start;
            margin-top: 1px;
        }

        /* 副班长职称：青绿描边胶囊 + 黄油体 */
        .user-badge.role-副班长 .user-badge-role {
            color: #0F766E;
            font-family: 'ZCOOL QingKe HuangYou', 'STKaiti', 'KaiTi', '楷体', sans-serif;
            font-weight: 600;
            font-size: 9px;
            letter-spacing: 1.2px;
            padding: 0 4px;
            background: linear-gradient(180deg, rgba(45, 212, 191, 0.15) 0%, rgba(20, 184, 166, 0.08) 100%);
            border: 1px solid rgba(20, 184, 166, 0.45);
            border-radius: 6px;
            align-self: flex-start;
            margin-top: 1px;
        }

        /* 管理员职称：红色描边胶囊 + 楷体 */
        .user-badge.role-管理员 .user-badge-role {
            color: #DC2626;
            font-family: 'STKaiti', 'KaiTi', '楷体', serif;
            font-weight: 700;
            font-size: 9px;
            letter-spacing: 1.2px;
            padding: 0 4px;
            background: linear-gradient(180deg, rgba(248, 113, 113, 0.15) 0%, rgba(220, 38, 38, 0.08) 100%);
            border: 1px solid rgba(220, 38, 38, 0.45);
            border-radius: 6px;
            align-self: flex-start;
            margin-top: 1px;
        }

        /* ===== 浮动用户卡片（管理员右下角 - 简约大气风格） ===== */
        .floating-user-panel {
            --badge-color: var(--accent);
            position: fixed;
            right: 20px;
            bottom: 140px; /* 避开 niu2 助手（bottom: 56px, 64px 高，约占 56~120px） */
            z-index: 99999;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 10px 6px 6px;
            min-width: 200px;
            max-width: 260px;
            background: var(--bg-elevated);
            border: 1px solid color-mix(in srgb, var(--badge-color) 40%, var(--border) 60%);
            border-radius: 18px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.25);
            animation: floatingPanelIn 0.4s ease-out 1;
            cursor: default;
            transition: all 0.2s ease;
        }
        @keyframes floatingPanelIn {
            0%   { opacity: 0; transform: translateY(12px); }
            100% { opacity: 1; transform: translateY(0); }
        }
        .floating-user-panel:hover {
            box-shadow: 0 6px 20px rgba(0,0,0,0.35);
        }

        /* 顶部绶带（简约文字标签） */
        .medal-ribbon-text {
            position: absolute;
            top: -8px;
            left: 50%;
            transform: translateX(-50%);
            padding: 1px 10px;
            background: var(--badge-color);
            color: #fff;
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 0.5px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.15);
            white-space: nowrap;
            z-index: 2;
        }

        /* 头像 */
        .floating-user-avatar {
            position: relative;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: color-mix(in srgb, var(--badge-color) 90%, #000 10%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 16px;
            flex-shrink: 0;
        }
        .floating-user-avatar i { color: #fff; }
        /* 在线绿点 */
        .floating-user-online-dot {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #10B981;
            border: 2px solid var(--bg-elevated);
        }

        /* 用户信息 */
        .floating-user-info {
            flex: 1 1 auto;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 1px;
        }
        .floating-user-name {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-primary);
            cursor: pointer;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .floating-user-name:hover { color: var(--badge-color); }
        .floating-user-role {
            font-size: 11px;
            font-weight: 500;
            color: var(--badge-color);
            display: flex;
            align-items: center;
            gap: 3px;
            flex-wrap: wrap;
        }
        /* 角色星级（Font Awesome 星） */
        .role-stars {
            display: inline-flex;
            align-items: center;
            gap: 1px;
            font-size: 9px;
        }
        .role-star--on  { color: var(--badge-color); }
        .role-star--off { color: var(--text-muted); opacity: 0.45; }

        /* 操作按钮组 */
        .floating-user-actions {
            display: flex;
            align-items: center;
            gap: 4px;
            flex-shrink: 0;
        }
        .floating-user-btn {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            border: 1px solid var(--border);
            background: transparent;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 12px;
            transition: all 0.2s;
            padding: 0;
        }
        .floating-user-btn:hover {
            background: color-mix(in srgb, var(--accent) 15%, transparent);
            border-color: var(--accent);
            color: var(--accent);
        }
        .floating-user-logout:hover {
            background: color-mix(in srgb, var(--danger) 15%, transparent);
            border-color: var(--danger);
            color: var(--danger);
        }

        /* ===== 浮动用户卡片 - 7 级角色色（简约方案） ===== */
        .floating-user-panel.role-厂长     { --badge-color: #D4A017; }
        .floating-user-panel.role-副厂长   { --badge-color: #A855F7; }
        .floating-user-panel.role-部长     { --badge-color: var(--warning, #F59E0B); }
        .floating-user-panel.role-副部长   { --badge-color: var(--info, #3B82F6); }
        .floating-user-panel.role-班长     { --badge-color: var(--success, #10B981); }
        .floating-user-panel.role-副班长   { --badge-color: var(--teal, #14B8A6); }
        .floating-user-panel.role-库管员,
        .floating-user-panel.role-库管     { --badge-color: var(--purple, #7C3AED); }
        .floating-user-panel.role-admin,
        .floating-user-panel.role-管理员   { --badge-color: var(--danger, #DC2626); }

        /* 浮动用户卡片在移动端的折叠样式 */
        @media (max-width: 640px) {
            .floating-user-panel {
                bottom: 80px;
                right: 12px;
                min-width: 0;
                max-width: 0;
                padding: 0;
                border-radius: 50%;
                overflow: hidden;
                width: 40px;
                height: 40px;
                border-color: var(--badge-color);
            }
            .floating-user-panel .medal-ribbon-text,
            .floating-user-panel .floating-user-info,
            .floating-user-panel .floating-user-actions {
                display: none;
            }
            .floating-user-panel .floating-user-avatar {
                width: 40px;
                height: 40px;
                font-size: 16px;
            }
        }

        .theme-btn {
            width: 36px;
            height: 36px;
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            background: var(--surface);
            color: var(--text-primary);
            font-size: 16px;
            cursor: pointer;
            transition: background 0.15s ease-out, border-color 0.15s ease-out;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .theme-btn:hover {
            background: rgba(88, 101, 242, 0.15);
            border-color: var(--accent);
        }
        .theme-select {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            padding: var(--space-2) var(--space-4);
            color: var(--text-primary);
            font-size: var(--text-sm);
            cursor: pointer;
            transition: border-color 0.15s ease-out;
            height: 40px;
            line-height: 1.4;
        }
        .theme-select:hover {
            border-color: var(--accent);
        }
        .theme-select option {
            background: var(--option-bg);
            color: var(--option-color);
            padding: var(--space-2);
        }
        [data-theme="light"] .theme-select option {
            background: #ffffff;
            color: #2B2620;
        }

        /* ===== Main Layout ===== */
        .main-layout {
            display: flex;
            gap: var(--space-5);
            height: calc(100vh - 122px);
        }
        .left-panel {
            width: 360px;
            display: flex;
            flex-direction: column;
            gap: var(--space-5);
            overflow-y: auto;
            max-height: calc(100vh - 80px);
        }

        /* ===== C49 全屏覆盖式模态框 ===== */
        .fs-modal-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.55);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            z-index: 10005;
            align-items: center;
            justify-content: center;
            padding: 20px;
            animation: fsFadeIn .25s ease-out;
        }
        .fs-modal-overlay.show { display: flex; }
        /* 全屏模态框打开时隐藏底部备案栏（避免遮挡） */
        body.fs-modal-open #bottomFooter { display: none !important; }
        @keyframes fsFadeIn { from { opacity: 0; } to { opacity: 1; } }
        .fs-modal {
            background: var(--bg-secondary, var(--card-bg, #fff));
            border: 1px solid var(--border);
            border-radius: var(--radius-lg, 14px);
            box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
            width: 100%;
            max-width: 720px;
            max-height: 90vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            animation: fsScaleIn .3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        @keyframes fsScaleIn {
            from { transform: scale(0.9) translateY(20px); opacity: 0; }
            to { transform: scale(1) translateY(0); opacity: 1; }
        }
        .fs-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 18px 24px;
            background: var(--surface, #f3f4f6);
            border-bottom: 1px solid var(--border);
        }
        .fs-modal-header h2 {
            font-size: var(--text-lg, 18px);
            font-weight: 600;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 0;
        }
        .fs-modal-close {
            width: 36px;
            height: 36px;
            border: none;
            border-radius: var(--radius-sm, 6px);
            background: transparent;
            color: var(--text-muted);
            font-size: 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }
        .fs-modal-close:hover {
            background: var(--danger, #dc2626);
            color: #fff;
        }
        .fs-modal-body {
            padding: 24px;
            overflow-y: auto;
            flex: 1;
        }
        .fs-form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }
        @media (max-width: 640px) {
            .fs-form-grid { grid-template-columns: 1fr; }
            .fs-modal { max-width: 100%; max-height: 100vh; border-radius: 0; }
        }
        .fs-form-item { display: flex; flex-direction: column; gap: 6px; }
        .fs-form-item label {
            font-size: var(--text-sm, 13px);
            color: var(--text-secondary);
            font-weight: 500;
        }
        .fs-form-item input,
        .fs-form-item select {
            width: 100%;
            padding: 10px 14px;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm, 6px);
            background: var(--bg-primary);
            color: var(--text-primary);
            font-size: var(--text-sm, 13px);
            font-family: inherit;
            box-sizing: border-box;
            outline: none;
            transition: border-color 0.15s;
        }
        .fs-form-item input:focus,
        .fs-form-item select:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
        }
        .fs-form-actions {
            display: flex;
            gap: 12px;
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid var(--border);
        }
        .fs-form-actions .btn-start,
        .fs-form-actions .btn-clear {
            flex: 1;
            padding: 12px 20px;
            font-size: var(--text-base, 15px);
            font-weight: 600;
            border-radius: var(--radius-md, 10px);
            cursor: pointer;
            font-family: inherit;
            transition: transform 0.15s, opacity 0.15s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        .fs-form-actions .btn-start:hover,
        .fs-form-actions .btn-clear:hover {
            transform: translateY(-1px);
            opacity: 0.9;
        }
        .fs-modal-body .unit-list-section {
            margin-top: 20px;
            padding-top: 16px;
            border-top: 1px solid var(--border);
        }
        .fs-modal-body .unit-list-body {
            max-height: 240px;
            overflow-y: auto;
        }
        .fs-modal-body .variety-bar {
            min-height: 40px;
            padding: 8px;
            background: var(--bg-primary);
            border: 1px dashed var(--border);
            border-radius: var(--radius-sm, 6px);
        }

        /* ===== 来往单位管理 ===== */
        .unit-mgmt-form .form-item { margin-bottom: 8px; }
        .unit-mgmt-form .form-item label { display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 3px; }
        .unit-mgmt-form .form-item input,
        .unit-mgmt-form .form-item select {
            width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
            background: var(--bg-primary); color: var(--text-primary); font-size: 13px; box-sizing: border-box;
        }
        .unit-mgmt-form .form-item input:focus,
        .unit-mgmt-form .form-item select:focus { border-color: var(--accent); outline: none; }
        .unit-list-section { margin-top: 10px; border-top: 1px solid var(--border); }
        .unit-list-header {
            display: flex; justify-content: space-between; align-items: center; padding: 8px 0;
            cursor: pointer; font-size: 13px; color: var(--text-secondary); user-select: none;
        }
        .unit-list-header:hover { color: var(--text-primary); }
        .unit-list-header i:last-child { transition: transform 0.2s; }
        .unit-list-body { max-height: 200px; overflow-y: auto; }

        /* ===== 车辆呼叫Tab ===== */
        .calling-form { max-width: 500px; margin: 0 auto; padding: 20px; }
        .calling-form-inner .form-group { margin-bottom: var(--nl-c-field-gap); /* 8pt：15→16 */ }
        .calling-form-inner .form-group label { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 5px; }
        .calling-form-inner .form-group input,
        .calling-form-inner .form-group select {
            width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
            background: var(--bg-primary); color: var(--text-primary); font-size: 14px; box-sizing: border-box;
        }
        .calling-form-inner .form-group input:focus,
        .calling-form-inner .form-group select:focus { border-color: var(--accent); outline: none; }

        /* ===== M003 双行导航 - 完全一致 ===== */
        .m003-content {
            display: flex;
            flex-direction: column;
            min-width: 0;
        }
        .m003-content .tab-content {
            padding: var(--space-5) var(--space-6);
        }
        .m003-content .tabs {
            margin-bottom: 0;
        }
        /* M003 主航第一行：主题卡片底色 + 底部分隔线 */
        .m003-content .seg-main-row {
            background: var(--card-bg, #ffffff);
            border-bottom: 1px solid var(--border, #e5e7eb);
        }
        /* M003 主航按钮：11px + 主题次级文字 */
        .m003-content .seg-main-row .tab-btn {
            font-size: 11px;
            color: var(--text-secondary, #4b5563);
            font-weight: 500;
            padding: 5px 13px;
            border-radius: 7px;
        }
        .m003-content .seg-main-row .tab-btn.active {
            background: linear-gradient(135deg, var(--accent, #A0673C), var(--accent-hover, #D4A574));
            color: #fff;
            font-weight: 600;
            box-shadow: 0 2px 8px color-mix(in srgb, var(--accent, #A0673C) 30%, transparent);
        }
        /* M003 第二行：主题分隔底色 */
        .m003-content .seg-chip-row {
            background: var(--border, #e5e7eb);
        }
        .m003-content .seg-chip-row .tab-btn {
            font-size: 10px;
            color: var(--text-secondary, #4b5563);
            font-weight: 500;
            padding: 3px 9px;
            border-radius: 5px;
            background: transparent;
        }
        .m003-content .seg-chip-row .tab-btn.active {
            background: var(--card-bg, #ffffff);
            color: var(--accent, #A0673C);
            font-weight: 600;
        }

        /* ===== M002 左侧侧边栏布局 (data-nav="sidebar") ===== */
        .m002-sidebar { display: none; }
        [data-nav="sidebar"] .m002-sidebar {
            display: flex;
            flex-direction: column;
            width: 200px;
            flex-shrink: 0;
            background: var(--bg-elevated);
            padding: 4px 0;
            border-right: 1px solid var(--border);
            /* overflow-y: auto 让内容可滚动不超出屏幕；
               主题切换栏 sticky bottom 始终可见 */
            overflow-y: auto;
            overflow-x: hidden;
            height: 100%;
        }
        /* 侧边栏底部留白占位（日后添加更多功能，自动伸缩填满剩余空间） */
        .m002-sidebar-spacer {
            flex: 1 1 auto;
            min-height: 8px;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            padding: 4px 10px 8px;
        }
        .m002-sidebar-spacer-hint {
            font-size: var(--text-2xs);
            color: var(--text-muted);
            opacity: 0.3;
            text-align: center;
            line-height: 1.5;
            white-space: nowrap;
        }
        .m002-sidebar-spacer-hint i {
            font-size: 14px;
            display: block;
            margin-bottom: 2px;
        }
        /* 侧边栏底部主题切换工具栏（从顶栏下移，作为侧边栏 flex 流的最后一个子元素）
           不再用 fixed 定位，避免覆盖侧边栏底部菜单（如环境监控的库房1/库房2下拉项）
           flex-shrink:0 保证不被压缩；侧边栏 overflow:hidden 时由 main-layout 高度决定是否可见 */
        .m002-sidebar-theme-bar {
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 8px 14px;
            border-top: 1px solid var(--border);
            background: var(--bg-elevated);
            box-shadow: 0 -4px 12px rgba(0,0,0,0.15);
            flex-shrink: 0;
            margin-top: auto; /* 推到侧边栏最底部 */
        }
        .m002-theme-btn {
            width: 28px;
            height: 28px;
            border: 1px solid var(--border);
            border-radius: 5px;
            background: var(--surface);
            color: var(--text-primary);
            font-size: 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            flex-shrink: 0;
            padding: 0;
        }
        .m002-theme-btn:hover {
            background: color-mix(in srgb, var(--accent) 18%, transparent);
            border-color: var(--accent);
            transform: scale(1.05);
        }
        .m002-sidebar-theme-bar .m002-theme-select.theme-select {
            flex: 1 1 auto;
            min-width: 0;
            height: 28px;
            padding: 2px 6px;
            font-size: 11px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 5px;
            color: var(--text-primary);
            cursor: pointer;
            transition: all 0.2s;
        }
        .m002-sidebar-theme-bar .m002-theme-select.theme-select:hover {
            border-color: var(--accent);
            background: color-mix(in srgb, var(--accent) 8%, transparent);
        }
        /* 浅色（素白）主题下侧边栏底部主题栏的对比度增强
           修复：背景与边框在浅色主题下对比度不足，按钮几乎看不见
           注意：使用 CSS 变量而非硬编码颜色，确保与所选深色风格（深空蓝夜/曜石黑金/暗夜霓虹等）协调 */
        [data-theme="light"] .m002-sidebar-theme-bar {
            background: color-mix(in srgb, var(--bg-elevated) 90%, var(--text-primary) 10%);
            border-top: 1.5px solid var(--border-strong);
            box-shadow: 0 -2px 8px rgba(43, 38, 32, 0.08);
            position: sticky;
            bottom: 0;
            z-index: 5;
        }
        [data-theme="light"] .m002-theme-btn {
            background: var(--bg-elevated);
            border: 1.5px solid var(--border-strong);
            color: var(--text-primary);
            font-weight: 600;
        }
        [data-theme="light"] .m002-theme-btn:hover {
            background: color-mix(in srgb, var(--accent) 15%, var(--bg-elevated));
            border-color: var(--accent);
            color: var(--accent);
        }
        [data-theme="light"] .m002-sidebar-theme-bar .m002-theme-select.theme-select {
            background: var(--bg-elevated);
            border: 1.5px solid var(--border-strong);
            color: var(--text-primary);
            font-weight: 600;
        }
        [data-theme="light"] .m002-sidebar-theme-bar .m002-theme-select.theme-select:hover {
            border-color: var(--accent);
            background: color-mix(in srgb, var(--accent) 8%, var(--bg-elevated));
        }

        /* === 各种 UI 风格下侧边栏主题栏的对比度适配 ===
           一些暗色风格（深空蓝夜/曜石黑金/暗夜霓虹/深海探测等）的变量本身较深，
           但侧边栏主题栏的按钮和文字可能因颜色对比度不足而看不清。
           此处对每个 style 做精确适配，确保文字 + 边框 + 按钮在所有风格下都清晰可见 */
        /* 风格三: 暗夜霓虹 */
        [data-style="neon"] .m002-sidebar-theme-bar {
            background: #18181b;
            border-top: 1.5px solid #3f3f46;
        }
        [data-style="neon"] .m002-theme-btn {
            background: #27272a;
            border-color: #3f3f46;
            color: #e4e4e7;
        }
        [data-style="neon"] .m002-sidebar-theme-bar .m002-theme-select.theme-select {
            background: #27272a;
            border-color: #3f3f46;
            color: #e4e4e7;
        }
        /* 风格八: 曜石黑金 */
        [data-style="obsidian"] .m002-sidebar-theme-bar {
            background: #171717;
            border-top: 1.5px solid #404040;
        }
        [data-style="obsidian"] .m002-theme-btn {
            background: #262626;
            border-color: #404040;
            color: #f5f5f5;
        }
        [data-style="obsidian"] .m002-sidebar-theme-bar .m002-theme-select.theme-select {
            background: #262626;
            border-color: #404040;
            color: #f5f5f5;
        }
        /* 风格四: shenlan 深空蓝夜（已通过 [data-theme="light"][data-style="shenlan"] 设置为深色，
           但 data-theme="dark" 时不生效，此处补充暗色版本） */
        [data-style="shenlan"] .m002-sidebar-theme-bar {
            background: #1e293b;
            border-top: 1.5px solid #334155;
        }
        [data-style="shenlan"] .m002-theme-btn {
            background: #0f172a;
            border-color: #334155;
            color: #e2e8f0;
        }
        [data-style="shenlan"] .m002-sidebar-theme-bar .m002-theme-select.theme-select {
            background: #0f172a;
            border-color: #334155;
            color: #e2e8f0;
        }
        /* 风格二: clean 素白（加深一档背景，与纯白主区域区分） */
        [data-style="clean"] .m002-sidebar-theme-bar {
            background: #f1f5f9;
            border-top: 1.5px solid #cbd5e1;
        }
        [data-style="clean"] .m002-theme-btn {
            background: #ffffff;
            border-color: #cbd5e1;
            color: #1e293b;
            font-weight: 600;
        }
        [data-style="clean"] .m002-theme-btn:hover {
            background: #e0e7ef;
            border-color: #94a3b8;
        }
        [data-style="clean"] .m002-sidebar-theme-bar .m002-theme-select.theme-select {
            background: #ffffff;
            border-color: #cbd5e1;
            color: #1e293b;
            font-weight: 600;
        }
        /* 风格六: nordic 北欧极简（极浅灰白，强对比边） */
        [data-style="nordic"] .m002-sidebar-theme-bar {
            background: #fafafa;
            border-top: 1.5px solid #a3a3a3;
        }
        [data-style="nordic"] .m002-theme-btn {
            background: #ffffff;
            border-color: #a3a3a3;
            color: #171717;
            font-weight: 600;
        }
        [data-style="nordic"] .m002-theme-btn:hover {
            background: #171717;
            border-color: #171717;
            color: #ffffff;
        }
        [data-style="nordic"] .m002-sidebar-theme-bar .m002-theme-select.theme-select {
            background: #ffffff;
            border-color: #a3a3a3;
            color: #171717;
            font-weight: 600;
        }
        /* 风格九: glacier 冰川蓝川（冰蓝调） */
        [data-style="glacier"] .m002-sidebar-theme-bar {
            background: #e0f2fe;
            border-top: 1.5px solid #0284c7;
        }
        [data-style="glacier"] .m002-theme-btn {
            background: #ffffff;
            border-color: #0284c7;
            color: #0c4a6e;
            font-weight: 600;
        }
        [data-style="glacier"] .m002-theme-btn:hover {
            background: #0284c7;
            border-color: #0369a1;
            color: #ffffff;
        }
        [data-style="glacier"] .m002-sidebar-theme-bar .m002-theme-select.theme-select {
            background: #ffffff;
            border-color: #0284c7;
            color: #0c4a6e;
            font-weight: 600;
        }
        .m002-sidebar-group {
            margin-bottom: 0;
            flex-shrink: 0;
        }
        .m002-sidebar-group-title {
            font-size: var(--text-2xs);
            color: var(--text-muted);
            opacity: 0.7;
            padding: 8px 16px 3px;
            letter-spacing: 1px;
            font-weight: 700;
        }
        .m002-sidebar-item {
            padding: 5px 16px;
            font-size: var(--text-xs);
            color: var(--text-secondary);
            cursor: pointer;
            border-left: 3px solid transparent;
            transition: all 0.12s ease-out;
        }
        .m002-sidebar-item:hover {
            color: var(--text-primary);
            background: var(--surface);
        }
        .m002-sidebar-item.active {
            color: var(--accent);
            background: linear-gradient(90deg, var(--surface), transparent);
            border-left-color: var(--accent);
            font-weight: 600;
        }
        /* 带子菜单的导航项 */
        .m002-sidebar-has-sub {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .m002-side-wrap {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            flex: 1;
            min-width: 0;
        }
        .m002-sub-arrow {
            font-size: 10px;
            opacity: 0.5;
            transition: transform 0.2s ease-out;
            margin-left: 6px;
        }
        .m002-sidebar-has-sub.open .m002-sub-arrow {
            transform: rotate(180deg);
        }
        /* 子菜单容器 */
        .m002-sidebar-sub {
            background: var(--surface);
            border-left: none;
        }
        .m002-sidebar-sub-item {
            padding-left: 26px !important;
            font-size: var(--text-2xs) !important;
            opacity: 0.85;
        }
        .m002-sidebar-sub-item:hover {
            opacity: 1;
        }
        [data-nav="sidebar"] .tabs { display: none; }
        [data-nav="sidebar"] .m003-content {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
        }
        [data-nav="sidebar"] {
            gap: 0;
        }

        /* ===== Card ===== */
        .card {
            background: var(--bg-secondary);
            border-radius: var(--nl-c-card-radius);
            border: 1px solid var(--border);
            padding: var(--nl-c-card-padding); /* 8pt 密度：24→20 */
            box-shadow: var(--nl-c-card-shadow);
            transition: transform var(--nl-dur-base) var(--nl-ease-productive), box-shadow var(--nl-dur-base) var(--nl-ease-productive), border-color var(--nl-dur-base) var(--nl-ease-productive);
            animation: cardEntrance 0.5s ease-out backwards;
            will-change: transform, opacity;
        }
        .card:hover {
            transform: translateY(-2px);
            box-shadow: var(--nl-c-card-shadow-hover);
        }
        .card-title {
            font-size: var(--type-heading);
            font-weight: 600;
            letter-spacing: 0.01em;
            margin-bottom: var(--space-4);
            color: var(--text-primary);
            padding-bottom: var(--space-3);
            border-bottom: 1px solid var(--border);
        }

        /* ===== Plate Input ===== */
        .plate-input-wrapper {
            position: relative;
            width: 100%;
            margin-bottom: var(--space-1);
        }
        .input-plate {
            width: 100%;
            padding: 14px 20px;
            font-size: var(--text-2xl);
            font-weight: 800;
            text-align: center;
            letter-spacing: 4px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            color: var(--text-primary);
            outline: none;
            transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
            font-family: var(--font-mono);
            text-transform: uppercase;
        }
        .input-plate:hover {
            border-color: var(--border-strong);
        }
        .input-plate:focus {
            border-color: var(--accent);
            box-shadow: var(--nl-c-input-focus-ring); /* 原冷蓝 88,101,242 → accent 金色光环 */
        }
        .input-plate::placeholder {
            color: var(--text-muted);
            font-weight: 500;
            letter-spacing: 3px;
            font-size: var(--text-lg);
        }
        [data-theme="light"] .input-plate {
            background: var(--surface);
            border-color: var(--border);
        }
        [data-theme="light"] .input-plate:focus {
            box-shadow: var(--nl-c-input-focus-ring);
        }

        /* ===== Form Row ===== */
        .form-row {
            display: flex;
            gap: var(--space-3);
            margin-top: var(--space-4);
            margin-bottom: var(--space-3);
        }

        /* ===== Warehouse Buttons ===== */
        .btn-warehouse {
            flex: 1;
            padding: var(--space-4);
            font-size: var(--text-base);
            font-weight: 700;
            border: none;
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: transform var(--nl-dur-base) var(--nl-ease-productive), opacity var(--nl-dur-base) var(--nl-ease-productive);
            color: #fff;
        }
        .btn-warehouse.k1 {
            background: var(--success);
        }
        .btn-warehouse.k2 {
            background: var(--info);
        }
        .btn-warehouse:hover {
            transform: translateY(-1px);
            opacity: 0.9;
        }
        .btn-warehouse.selected {
            outline: 3px solid var(--accent);
            outline-offset: 2px;
            box-shadow: 0 0 12px rgba(88, 101, 242, 0.4);
        }
        /* 品种库存录入弹窗：库1/库2按钮固定大小与字体（用户手动调整值） */
        #stockEntryFsModal #entryWhBtn1,
        #stockEntryFsModal #entryWhBtn2 {
            flex: 0 0 101px !important;
            width: 101px !important;
            height: 30px !important;
            font-size: 13px !important;
            font-weight: 700 !important;
            padding: 4px 8px !important;
            line-height: 1 !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
        }

        /* ===== Unit Info Section ===== */
        .unit-info-section {
            margin-top: var(--space-4);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            overflow: hidden;
        }
        .unit-info-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--space-3) var(--space-4);
            background: var(--surface);
            cursor: pointer;
            transition: background 0.2s ease;
        }
        .unit-info-header:hover {
            background: var(--bg-elevated);
        }
        .unit-info-header span {
            font-size: var(--text-sm);
            font-weight: 600;
            color: var(--text-secondary);
        }
        .unit-info-header i:last-child {
            transition: transform 0.3s ease;
            color: var(--text-muted);
        }
        .unit-info-header.expanded i:last-child {
            transform: rotate(180deg);
        }
        .unit-info-form {
            padding: var(--space-4);
            display: none;
            background: var(--bg-secondary);
            border-top: 1px solid var(--border);
        }
        .unit-info-form.show {
            display: block;
        }
        .unit-info-form .form-item {
            margin-bottom: var(--space-3);
        }
        .unit-info-form .form-item:last-child {
            margin-bottom: 0;
        }
        .unit-info-form label {
            display: block;
            font-size: var(--text-xs);
            font-weight: 600;
            color: var(--text-secondary);
            margin-bottom: var(--space-1);
            letter-spacing: 0.5px;
        }
        .unit-info-form .required {
            color: var(--danger);
        }
        .unit-info-form input,
        .unit-info-form select,
        .unit-info-form textarea {
            width: 100%;
            padding: var(--space-2) var(--space-3);
            font-size: var(--text-sm);
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            color: var(--text-primary);
            outline: none;
            transition: border-color 0.15s ease;
        }
        .unit-info-form input:focus,
        .unit-info-form select:focus,
        .unit-info-form textarea:focus {
            border-color: var(--accent);
        }
        .unit-info-form textarea {
            resize: vertical;
            min-height: 60px;
        }
        .unit-info-form input.error,
        .unit-info-form select.error,
        .unit-info-form textarea.error {
            border-color: var(--danger);
        }

        /* ===== Vehicle Info ===== */
        .vehicle-info {
            text-align: center;
            margin-bottom: var(--space-4);
            padding: var(--space-4);
            background: rgba(88, 101, 242, 0.06);
            border-radius: var(--radius-sm);
        }
        .vehicle-info .plate {
            font-size: var(--text-2xl);
            font-weight: 700;
            color: var(--accent);
            letter-spacing: 3px;
            font-family: var(--font-mono);
        }
        .vehicle-info .warehouse {
            font-size: var(--text-base);
            color: var(--text-secondary);
            margin-top: var(--space-1);
        }
        .vehicle-info .exit-port {
            font-size: var(--text-sm);
            color: var(--success);
            margin-top: var(--space-1);
        }

        /* ===== Exit Select ===== */
        .exit-select {
            width: 100%;
            padding: var(--space-3);
            font-size: var(--text-sm);
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            color: var(--text-primary);
            outline: none;
            cursor: pointer;
            height: 40px;
            line-height: 1.4;
            overflow: visible;
        }
        .exit-select option {
            background: var(--option-bg);
            color: var(--option-color);
        }

        /* ===== Call Button ===== */
        .btn-call {
            flex: 1;
            padding: var(--space-3);
            font-size: var(--text-base);
            font-weight: 700;
            border: none;
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: transform 0.15s ease-out, opacity 0.15s ease-out;
            background: var(--warning);
            color: #fff;
        }
        .btn-call:hover {
            transform: translateY(-1px);
            opacity: 0.9;
        }

        /* ===== Team Grid ===== */
        .team-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: var(--space-2);
        }
        .team-section {
            margin-top: var(--space-5);
        }
        .btn-team {
            padding: var(--space-3) var(--space-2);
            font-size: var(--text-sm);
            font-weight: 600;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            background: var(--surface);
            color: var(--text-primary);
            cursor: pointer;
            transition: background 0.15s ease-out, border-color 0.15s ease-out;
        }
        .btn-team:hover {
            border-color: var(--accent);
            background: rgba(88, 101, 242, 0.1);
        }
        .btn-team.selected {
            background: var(--accent);
            border-color: var(--accent);
            color: var(--on-accent, #fff);
        }

        /* ===== Team Chip（多选小组标签） ===== */
        .team-selector {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: var(--space-2);
            margin-top: 4px;
        }
        .team-chip {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            padding: 8px 4px;
            font-size: var(--text-sm);
            font-weight: 600;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-sm);
            background: var(--surface);
            color: var(--text-primary);
            cursor: pointer;
            transition: all 0.15s ease-out;
            user-select: none;
        }
        .team-chip:hover {
            border-color: var(--accent);
            background: rgba(24, 62, 254, 0.08);
        }
        .team-chip.selected {
            background: var(--accent);
            border-color: var(--accent);
            color: var(--bg-primary);
            box-shadow: 0 2px 6px rgba(88, 101, 242, 0.4);
        }
        .team-chip.selected.is-primary::after {
            content: '主';
            margin-left: 4px;
            font-size: 10px;
            padding: 1px 5px;
            background: var(--bg-primary);
            color: var(--accent);
            border-radius: 8px;
        }
        .team-chip.disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        /* ===== Waiting Info ===== */
        .waiting-info {
            background: rgba(215, 116, 2, 0.08);
            border: 1px solid rgba(215, 116, 2, 0.2);
            border-radius: var(--radius-md);
            padding: var(--space-4);
            margin-bottom: var(--space-4);
        }
        .waiting-info .info-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: var(--space-2);
            font-size: var(--text-sm);
        }
        .waiting-info .info-row:last-child {
            margin-bottom: 0;
        }
        .waiting-info .info-label {
            color: var(--text-secondary);
        }
        .waiting-info .info-value {
            font-weight: 600;
            color: var(--text-primary);
        }

        /* ===== Waiting Card - D12 标签页风格 ===== */
        .waiting-card {
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 0;
            margin-bottom: var(--space-4);
            animation: slideIn 0.4s ease-out;
            box-shadow: var(--shadow-md);
            transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
            position: relative;
            overflow: hidden;
            will-change: transform, opacity;
        }
        .waiting-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, var(--accent), var(--warning));
            border-radius: 10px 10px 0 0;
        }
        .waiting-card:hover {
            border-color: var(--accent);
            transform: translateY(-1px);
            box-shadow: var(--shadow-lg);
        }
        .waiting-card .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0;
            padding: 10px 16px;
            background: var(--header-bg);
            border-bottom: 1px solid var(--border);
            border-radius: 9px 9px 0 0;
        }
        .waiting-card .plate-info {
            font-size: var(--text-xl);
            font-weight: 800;
            color: var(--header-num);
            letter-spacing: 1px;
            font-family: var(--font-mono);
            text-shadow: 0 1px 2px rgba(0,0,0,0.2);
        }
        .waiting-card .status-badge {
            background: var(--warning);
            color: #fff;
            padding: var(--space-1) var(--space-4);
            border-radius: 20px;
            font-size: var(--text-xs);
            font-weight: 700;
            letter-spacing: 1px;
        }
        .waiting-card .status-badge.waiting {
            background: var(--info);
        }
        .waiting-timer-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: var(--header-stat-bg);
            color: var(--header-num);
            padding: var(--space-1) var(--space-3);
            border-radius: 20px;
            font-size: var(--text-xs);
            font-weight: 700;
            font-family: var(--font-mono);
            white-space: nowrap;
            border: 1px solid rgba(255,255,255,0.1);
        }
        [data-theme="light"] .waiting-timer-badge {
            background: var(--header-stat-bg);
            color: var(--header-num);
        }
        .btn-expand-toggle {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: var(--accent);
            color: var(--on-accent, #fff);
            border: none;
            padding: var(--space-1) var(--space-4);
            border-radius: var(--radius-sm);
            font-size: var(--text-xs);
            font-weight: 600;
            cursor: pointer;
            transition: background 0.15s;
            white-space: nowrap;
        }
        .btn-expand-toggle:hover {
            background: var(--accent-hover);
        }
        .waiting-expand-section {
            border-top: 1px dashed var(--border);
            margin: var(--space-4) var(--space-4) 0;
            padding-top: var(--space-4);
        }
        .waiting-card .varieties-info {
            background: var(--surface);
            border-radius: var(--radius-md);
            padding: var(--space-4);
            margin: var(--space-4) var(--space-4) var(--space-5);
            border: 1px solid var(--border);
        }
        [data-theme="light"] .waiting-card .varieties-info {
            background: var(--surface);
            border: 1px solid var(--border);
        }
        .waiting-card .varieties-label {
            font-size: var(--text-xs);
            font-weight: 700;
            color: var(--warning);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: var(--space-2);
        }
        [data-theme="light"] .waiting-card .varieties-label {
            color: #92400e;
        }
        .waiting-card .varieties-list {
            font-size: var(--text-base);
            font-weight: 600;
            color: var(--text-primary);
            line-height: 1.6;
            margin-bottom: var(--space-3);
        }
        [data-theme="light"] .waiting-card .varieties-list {
            color: #78350f;
        }
        .waiting-card .quantity-info {
            display: flex;
            gap: var(--space-5);
            padding: var(--space-3) var(--space-4) 0;
            border-top: 1px dashed var(--border);
        }
        [data-theme="light"] .waiting-card .quantity-info {
            border-top: 1px dashed var(--border);
        }
        .waiting-unit-info {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-2) var(--space-4);
            font-size: var(--text-sm);
            color: var(--text-secondary);
            border-top: 1px solid var(--border);
            margin-top: var(--space-2);
        }
        .waiting-unit-info i {
            color: var(--accent);
            width: 16px;
            text-align: center;
        }
        .waiting-unit-info .unit-contact-small {
            color: var(--text-muted);
            font-size: var(--text-xs);
        }
        .waiting-card .qty-item {
            font-size: var(--text-base);
            color: var(--text-secondary);
        }
        [data-theme="light"] .waiting-card .qty-item {
            color: #92400e;
        }
        .waiting-card .qty-item strong {
            font-size: var(--text-xl);
            font-weight: 800;
            color: var(--warning);
        }
        [data-theme="light"] .waiting-card .qty-item strong {
            color: #78350f;
        }
        .waiting-card .form-section {
            margin-bottom: var(--space-5);
        }
        .waiting-card .form-row {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--space-4);
            margin-bottom: var(--space-4);
        }
        .waiting-card .form-item {
            background: var(--surface);
            padding: var(--space-3);
            border-radius: var(--radius-md);
            border: 1px solid var(--border);
        }
        .waiting-card .form-item label {
            display: block;
            font-size: var(--text-sm);
            font-weight: 700;
            color: var(--text-secondary);
            margin-bottom: var(--space-2);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .waiting-card .form-item label .required {
            color: var(--danger);
            margin-left: var(--space-1);
        }
        .waiting-card .form-item select,
        .waiting-card .form-item input {
            width: 100%;
            padding: var(--space-3);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            font-size: var(--text-base);
            font-weight: 500;
            background: var(--bg-elevated);
            color: var(--text-primary);
            height: 44px;
            line-height: 1.4;
            transition: border-color 0.15s ease-out;
        }
        .waiting-card .form-item select:focus,
        .waiting-card .form-item input:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.15);
            outline: none;
        }
        .waiting-card .custom-input {
            margin-top: var(--space-2);
        }
        .waiting-card .card-actions {
            display: flex;
            gap: var(--space-3);
            margin-top: var(--space-6);
            padding-top: var(--space-5);
            border-top: 1px solid var(--border);
        }
        .waiting-card .btn-start-loading {
            flex: 1;
            padding: var(--space-4) var(--space-6);
            background: var(--success);
            color: #fff;
            border: none;
            border-radius: var(--radius-md);
            font-size: var(--text-lg);
            font-weight: 700;
            cursor: pointer;
            transition: transform 0.15s ease-out, opacity 0.15s ease-out;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .waiting-card .btn-start-loading:hover {
            transform: translateY(-1px);
            opacity: 0.9;
        }
        .waiting-card .btn-cancel-waiting {
            padding: var(--space-4) var(--space-6);
            background: var(--danger);
            color: #fff;
            border: none;
            border-radius: var(--radius-md);
            font-size: var(--text-base);
            font-weight: 700;
            cursor: pointer;
            transition: opacity 0.15s ease-out;
        }
        .waiting-card .btn-cancel-waiting:hover {
            opacity: 0.9;
        }

        /* ===== Variety Section ===== */
        .variety-section {
            margin-top: var(--space-5);
        }
        .variety-label {
            font-size: var(--text-sm);
            color: var(--text-secondary);
            margin-bottom: var(--space-2);
        }
        .variety-bar {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-2);
            min-height: 36px;
        }
        .variety-chip {
            padding: var(--space-1) var(--space-3);
            font-size: var(--text-xs);
            border-radius: 20px;
            cursor: pointer;
            transition: background 0.15s ease-out;
        }
        .variety-chip.add {
            background: rgba(88, 101, 242, 0.15);
            color: var(--accent);
            border: 1px dashed var(--accent);
        }
        .variety-chip.add:hover {
            background: rgba(24, 62, 254, 0.25);
        }
        .variety-inputs-container {
            margin-top: var(--space-2);
            padding: var(--space-2);
            background: var(--bg-secondary);
            border-radius: var(--radius-sm);
        }
        .variety-input-row {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-2) 0;
            border-bottom: 1px solid var(--border);
        }
        .variety-input-row:last-child {
            border-bottom: none;
        }
        .variety-input-name {
            flex: 1;
            font-size: var(--text-sm);
            color: var(--text-primary);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .variety-input-item {
            display: flex;
            align-items: center;
            gap: var(--space-1);
        }
        .variety-input-item label {
            font-size: var(--text-xs);
            color: var(--text-secondary);
        }
        .variety-input-item .input-qty {
            width: 70px;
        }
        .variety-detail-summary {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: var(--space-1);
        }
        .variety-detail-summary .variety-input-name {
            font-size: var(--text-base);
            font-weight: 600;
            color: var(--text-primary);
        }
        .variety-detail-info {
            font-size: var(--text-xs);
            color: var(--text-secondary);
        }
        .variety-detail-info.tail-hasEntrust {
            color: var(--warning);
            font-weight: 600;
        }
        .variety-detail-quantities {
            display: flex;
            gap: var(--space-2);
            align-items: center;
        }
        .variety-qty-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
        }
        .variety-qty-item label {
            font-size: 10px;
            color: var(--text-secondary);
        }
        .variety-qty-item .input-qty-small {
            width: 50px;
            padding: var(--space-1);
            font-size: var(--text-xs);
            text-align: center;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            color: var(--text-primary);
        }
        .variety-edit-btn {
            padding: var(--space-1) var(--space-2);
            background: var(--accent);
            border: none;
            border-radius: var(--radius-sm);
            color: var(--on-accent, #fff);
            cursor: pointer;
            font-size: var(--text-xs);
        }
        .variety-edit-btn:hover {
            opacity: 0.9;
        }
        .required-row {
            background: rgba(24, 62, 254, 0.08);
            padding: var(--space-2);
            border-radius: var(--radius-sm);
            margin-bottom: var(--space-2);
        }
        .extra-fields {
            border-top: 1px dashed var(--border);
            padding-top: var(--space-2);
        }
        .entrust-fields {
            margin-top: var(--space-2);
        }
        .variety-entrust-row {
            display: flex;
            gap: var(--space-1);
            margin-left: var(--space-2);
        }
        .variety-item-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-1) 0;
            font-size: var(--text-xs);
        }
        .variety-item-row .qty-small {
            color: var(--text-secondary);
            font-size: 11px;
        }
        .entrust-tag {
            background: rgba(215, 116, 2, 0.15);
            color: #1B0F00;
            padding: 2px 6px;
            border-radius: var(--radius-sm);
            font-size: 10px;
        }
        .no-entrust-tag {
            background: rgba(51, 55, 68, 0.15);
            color: var(--text-muted);
            padding: 2px 6px;
            border-radius: var(--radius-sm);
            font-size: 10px;
        }
        .form-inline {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            margin-top: var(--space-5);
        }
        .variety-tag .remove {
            cursor: pointer;
            font-size: 14px;
            font-weight: bold;
            margin-left: var(--space-1);
        }
        .input-qty {
            width: 80px;
            padding: var(--space-2);
            font-size: var(--text-sm);
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            color: var(--text-primary);
            text-align: center;
            outline: none;
        }
        .loading-form-container {
            margin-top: var(--space-5);
            padding-top: var(--space-5);
            border-top: 1px solid var(--border);
        }
        .form-item {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        .form-item label {
            font-size: var(--text-sm);
            color: var(--text-secondary);
            margin-bottom: var(--space-2);
            font-weight: 500;
        }
        .form-item select,
        .form-item input {
            padding: var(--space-2) var(--space-3);
            font-size: var(--text-sm);
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            color: var(--text-primary);
            outline: none;
            transition: border-color 0.15s ease-out;
            height: 40px;
            line-height: 1.4;
        }
        .form-item select:focus,
        .form-item input:focus {
            border-color: var(--accent);
        }
        .form-item select {
            cursor: pointer;
        }
        .form-item select option {
            background: var(--option-bg);
            color: var(--option-color);
        }
        .form-actions {
            display: flex;
            gap: var(--space-2);
            margin-top: var(--space-5);
        }

        /* ===== Start / Clear Buttons ===== */
        .btn-start {
            flex: 1;
            padding: var(--space-3);
            font-size: var(--text-sm);
            font-weight: 600;
            border: none;
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: transform 0.15s ease-out, filter 0.15s ease-out;
            background: linear-gradient(135deg, var(--accent), var(--accent-hover));
            color: #fff;
        }
        .btn-start:hover {
            transform: translateY(-1px);
            filter: brightness(1.1);
        }
        .btn-clear {
            padding: var(--space-3) var(--space-5);
            font-size: var(--text-sm);
            font-weight: 600;
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: background 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out;
            background: var(--surface);
            color: var(--text-secondary);
        }
        .btn-clear:hover {
            background: rgba(241, 13, 15, 0.1);
            border-color: var(--danger);
            color: var(--danger);
        }

        /* ===== Tabs ===== */
        /* M003 默认导航：双行布局（L3） */
        .tabs {
            display: flex;
            flex-direction: column;
            gap: 0;
            margin-bottom: var(--space-4);
            padding-bottom: 0;
            border-bottom: none;
            position: relative;
            overflow: visible;
        }
        .tabs::after { display: none; }
        /* 主行：白色背景 + 底部边框（M003固定白色，不受主题影响） */
        .tabs > .seg-main-row {
            display: flex;
            gap: 3px;
            padding: 5px 10px;
            background: #ffffff;
            border-bottom: 1px solid #e5e7eb;
            overflow-x: auto;
            flex-shrink: 0;
        }
        .tabs > .seg-main-row .tab-btn {
            padding: 5px 13px;
            border-radius: 7px;
            font-size: 11px;
            font-weight: 500;
            white-space: nowrap;
            border: none;
            background: transparent;
            color: #4b5563;
            flex-shrink: 0;
            transition: all 0.15s var(--ease-out-quart);
        }
        .tabs > .seg-main-row .tab-btn:hover:not(.active) {
            background: #f3f4f6;
            color: #1f2937;
        }
        .tabs > .seg-main-row .tab-btn.active {
            background: linear-gradient(135deg, #A0673C, #D4A574);
            color: #fff;
            font-weight: 600;
            box-shadow: 0 2px 8px rgba(160,103,60,0.3);
        }
        /* 副行：灰色背景（M003固定灰色） */
        .tabs > .seg-chip-row {
            display: flex;
            gap: 2px;
            padding: 4px 10px;
            background: #e5e7eb;
            overflow-x: auto;
            flex-shrink: 0;
        }
        .tabs > .seg-chip-row .tab-btn {
            padding: 3px 9px;
            border-radius: 5px;
            font-size: 10px;
            font-weight: 500;
            white-space: nowrap;
            border: none;
            background: transparent;
            color: #4b5563;
            flex-shrink: 0;
            transition: all 0.15s var(--ease-out-quart);
        }
        .tabs > .seg-chip-row .tab-btn:hover:not(.active) {
            color: #1f2937;
        }
        .tabs > .seg-chip-row .tab-btn.active {
            background: #ffffff;
            color: #A0673C;
            font-weight: 600;
        }
        /* 副行始终隐藏图标（M003预览为纯文字） */
        .tabs > .seg-chip-row .tab-btn i { display: none; }
        .tab-btn {
            cursor: pointer;
            position: relative;
            overflow: hidden;
            white-space: nowrap;
            flex-shrink: 0;
        }
        .tab-btn.active {
            color: var(--accent);
        }
        .tab-content {
            display: none;
            overflow-x: visible;
            animation: fadeSlideIn 0.3s ease-out;
        }
        @keyframes fadeSlideIn {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .tab-content.active {
            display: block;
            overflow-x: hidden;
        }

        /* ===== 分段控制器导航布局 (M007: 双行 - 主7胶囊 + 副13chip) ===== */
        [data-nav="segmented"] .tabs {
            display: flex;
            flex-direction: column;
            gap: 0;
            margin-bottom: var(--space-4);
            padding-bottom: 0;
            border-bottom: none;
            position: relative;
            overflow: visible;
        }
        [data-nav="segmented"] .tabs::after {
            display: none;
        }

        /* 主行：7个主要Tab的大胶囊 */
        [data-nav="segmented"] .seg-main-row {
            display: flex;
            gap: 2px;
            padding: 3px;
            background: var(--surface);
            border-radius: 10px;
            border: none;
            overflow-x: auto;
        }
        [data-nav="segmented"] .seg-main-row .tab-btn {
            flex: 1;
            min-width: 62px;
            text-align: center;
            padding: 6px 7px;
            border-radius: 7px;
            font-size: 10px;
            font-weight: 600;
            white-space: nowrap;
            cursor: pointer;
            background: transparent;
            color: var(--text-secondary);
            border: none;
            transition: all 0.2s var(--ease-out-quart);
            position: relative;
        }
        [data-nav="segmented"] .seg-main-row .tab-btn:hover {
            background: var(--card-bg-hover);
            color: var(--text-primary);
        }
        [data-nav="segmented"] .seg-main-row .tab-btn.active {
            background: var(--card-bg);
            color: var(--accent);
            font-weight: 700;
            box-shadow: 0 2px 6px rgba(0,0,0,0.15);
        }

        /* 副行：13个chip标签 */
        [data-nav="segmented"] .seg-chip-row {
            display: flex;
            gap: 4px;
            margin-top: 5px;
            overflow-x: auto;
            padding: 1px 0;
        }
        [data-nav="segmented"] .seg-chip-row .tab-btn {
            padding: 3px 9px;
            border-radius: 10px;
            background: var(--card-bg);
            border: 1px solid var(--border);
            font-size: 9px;
            color: var(--text-muted);
            white-space: nowrap;
            cursor: pointer;
            flex-shrink: 0;
            transition: all 0.15s var(--ease-out-quart);
        }
        [data-nav="segmented"] .seg-chip-row .tab-btn:hover {
            background: var(--card-bg-hover);
            color: var(--text-primary);
            border-color: var(--accent);
        }
        [data-nav="segmented"] .seg-chip-row .tab-btn.active {
            background: var(--accent);
            color: var(--on-accent, #fff);
            border-color: var(--accent);
            font-weight: 600;
            box-shadow: 0 1px 4px rgba(24, 62, 254, 0.25);
        }

        /* 分段控制器滚动条美化 */
        [data-nav="segmented"] .seg-main-row::-webkit-scrollbar,
        [data-nav="segmented"] .seg-chip-row::-webkit-scrollbar {
            height: 3px;
        }
        [data-nav="segmented"] .seg-main-row::-webkit-scrollbar-track,
        [data-nav="segmented"] .seg-chip-row::-webkit-scrollbar-track {
            background: transparent;
            border-radius: 2px;
        }
        [data-nav="segmented"] .seg-main-row::-webkit-scrollbar-thumb,
        [data-nav="segmented"] .seg-chip-row::-webkit-scrollbar-thumb {
            background: var(--border-strong);
            border-radius: 2px;
        }

        /* ===== M007 风格统一应用：顶栏 / 统计卡 / 按钮 / 分段控制器 ===== */
        /* 顶栏背景与文字跟随主题（青瓷深绿、沙漠深棕、深色系深色顶栏） */
        .header {
            background: var(--header-bg, var(--bg-secondary));
            color: var(--header-text, var(--text-primary));
        }
        /* 顶栏标题：纯色（M007 预览无渐变），深色顶栏下保持可读 */
        .header .header-title h1 {
            background: none;
            -webkit-text-fill-color: var(--header-text, var(--text-primary));
            color: var(--header-text, var(--text-primary));
        }
        /* 统计卡：统一主题底色 + 无边框 + accent 数字（!important 覆盖内联彩色样式） */
        .header .header-stats .stat-item,
        .header .header-stats .stat-item:hover {
            background: var(--header-stat-bg, var(--surface)) !important;
            border: none !important;
            border-radius: 7px;
        }
        .header .header-stats .stat-item .stat-value {
            color: var(--header-num, var(--accent)) !important;
        }
        .header .header-stats .stat-item i {
            color: var(--header-num, var(--accent)) !important;
        }
        .header .header-stats .stat-item .stat-label {
            color: var(--header-text, var(--text-primary));
            opacity: 0.75;
        }
        /* 顶栏普通按钮：主题底色小按钮（带内联渐变的特殊按钮不受影响） */
        .header .export-btn {
            background: var(--header-btn-bg, var(--surface));
            color: var(--header-btn-text, var(--text-primary));
        }
        .header .export-btn:hover {
            transform: none;
            opacity: 0.85;
        }
        /* 顶栏主题切换控件与下拉：与顶栏融为一体 */
        .header .theme-btn,
        .header .theme-select {
            background: var(--header-btn-bg, rgba(255,255,255,0.08));
            color: var(--header-btn-text, var(--text-primary));
            border: none;
            border-radius: 5px;
            padding: 3px 8px;
            font-size: 10px;
            min-height: auto;
            height: auto;
        }
        .header .theme-btn {
            width: auto;
            height: auto;
        }
        /* M007 分段控制器：坐落在页面底色横带上（预览 L9 结构） */
        [data-nav="segmented"] .tabs {
            background: var(--bg-primary);
            padding: 7px 12px;
            border-radius: 10px;
        }
        /* M007 副行 chip 不显示图标（预览为纯文字标签） */
        [data-nav="segmented"] .seg-chip-row .tab-btn i {
            display: none;
        }

        /* ===== M012: 左侧侧边栏导航（随主题变化） ===== */
        .m012-sidebar .m012-sidebar-group {
            margin-bottom: 2px;
        }
        .m012-sidebar .m012-sidebar-group-title {
            color: var(--text-muted);
            opacity: 0.6;
            font-size: 8px;
            padding: 7px 13px 2px;
            letter-spacing: 1px;
            font-weight: 600;
        }
        .m012-sidebar .m012-sidebar-item {
            padding: 5px 13px;
            font-size: 11px;
            cursor: pointer;
            color: var(--text-secondary);
            border-left: 3px solid transparent;
            transition: all 0.15s ease;
        }
        .m012-sidebar .m012-sidebar-item:hover {
            color: var(--text-primary);
            background: var(--surface);
        }
        .m012-sidebar .m012-sidebar-item.active {
            color: var(--accent);
            background: linear-gradient(90deg, var(--surface), transparent);
            border-left: 3px solid var(--accent);
            font-weight: 600;
        }

        /* ===== Loading List ===== */
        .loading-list {
            max-height: calc(100vh - 280px);
            overflow-y: auto;
            padding-right: var(--space-1);
        }

        /* ===== Loading Card ===== */
/* ===== Loading Card - Theme-Aware Redesign ===== */
.loading-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    background: var(--card-bg);
    border-radius: 10px;
    margin-bottom: 12px;
    border: 1px solid var(--border);
    transition: all 0.25s ease-out;
    animation: cardSlideIn 0.35s var(--ease-out-quart);
    position: relative;
}

/* ===== 装车卡片移动端专用布局（手机扫码/查看场景） ===== */
.loading-card-mobile {
    border-radius: 8px;
    margin-bottom: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.loading-card-mobile .card-header {
    padding: 8px 10px !important;
    flex-wrap: wrap;
    gap: 6px;
}
.loading-card-mobile .loading-plate {
    font-size: 18px !important;
    font-weight: 700;
}
.loading-card-mobile .loading-badge {
    font-size: 11px !important;
    padding: 2px 6px !important;
}
.loading-card-mobile .timer-box {
    min-width: 88px !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
}
.loading-card-mobile .timer-box .time {
    font-size: 16px !important;
}
.loading-card-mobile .card-body {
    padding: 6px 10px !important;
    flex-direction: column !important;
    gap: 6px !important;
}
.loading-card-mobile .info-col,
.loading-card-mobile .stats-col {
    width: 100% !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 4px 10px !important;
}
.loading-card-mobile .info-item {
    flex: 1 1 auto !important;
    min-width: 90px;
    font-size: 12px !important;
}
.loading-card-mobile .info-label {
    font-size: 11px !important;
}
.loading-card-mobile .info-value {
    font-size: 12px !important;
}
.loading-card-mobile .stat-box {
    min-width: 56px !important;
    padding: 4px 8px !important;
}
.loading-card-mobile .stat-num {
    font-size: 18px !important;
}
.loading-card-mobile .stat-label {
    font-size: 11px !important;
}
.loading-card-mobile .card-body-variety,
.loading-card-mobile .variety-cell {
    width: 100% !important;
    font-size: 12px !important;
}
.loading-card-mobile .loading-card-footer {
    padding: 6px 10px 10px !important;
    flex-direction: column !important;
    gap: 6px !important;
}
.loading-card-mobile .loading-card-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
}
.loading-card-mobile .loading-card-actions .btn,
.loading-card-mobile .loading-card-actions button,
.loading-card-mobile .loading-card-actions .btn-sm {
    width: 100% !important;
    min-height: 40px !important;
    font-size: 13px !important;
    padding: 6px 8px !important;
    /* 增大触摸区域，便于手指点击 */
    touch-action: manipulation;
}
.loading-card-mobile .footer-tail {
    font-size: 11px !important;
    padding: 4px 6px !important;
}
.loading-card {
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.loading-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-lg);
    transform: translateY(-1px);
}

/* --- Accent bar at top --- */
.card-accent-bar {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--warning), var(--accent));
    opacity: 0.7;
    z-index: 2;
}

/* --- Card Header - D12 标签页风格：深色顶栏 --- */
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--header-bg);
    border-bottom: 1px solid var(--border);
    position: relative;
    z-index: 1;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.plate-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.loading-plate {
    font-size: 22px;
    font-weight: 800;
    color: var(--header-num);
    letter-spacing: 1.5px;
    font-family: var(--font-mono);
    line-height: 1.2;
    padding: 4px 12px;
    border-radius: var(--radius-md, 10px);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent);
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.loading-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.loading-badge {
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 700;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
}
.loading-badge.k1 { background: #16a34a; }
.loading-badge.k2 { background: #2563eb; }
.loading-badge.exit { background: #d97706; }

/* --- Light theme badge adjustments --- */
[data-theme="light"] .loading-badge.k1 { background: #15803d; }
[data-theme="light"] .loading-badge.k2 { background: #3B66A8; }
[data-theme="light"] .loading-badge.exit { background: #b45309; }

.header-right {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    flex-wrap: wrap;
    min-width: 0;
    justify-content: flex-end;
    gap: 6px;
    row-gap: 6px;
}
.timer-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 14px;
    background: var(--header-stat-bg);
    border-radius: var(--radius-md, 10px);
    border: 1px solid rgba(255,255,255,0.1);
}
[data-theme="light"] .timer-box {
    background: var(--header-stat-bg);
}
.timer-box .time {
    font-size: 20px;
    font-weight: 800;
    color: var(--header-num);
    font-family: var(--font-mono);
    letter-spacing: 1px;
    line-height: 1.2;
}
.timer-box .timer-label {
    font-size: 10px;
    color: var(--header-text);
    opacity: 0.7;
    letter-spacing: 0.5px;
    margin-top: 2px;
    font-weight: 600;
}
.timer-box.paused {
    border-color: var(--warning);
}
.timer-box.paused .time {
    color: var(--warning);
}
.timer-box.paused .timer-label {
    color: var(--warning);
}

/* --- Card Body - compact grid --- */
.card-body {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0;
    padding: 12px 18px;
    background: var(--bg-secondary);
    position: relative;
    z-index: 1;
}
.info-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.info-item {
    display: flex;
    align-items: center;
    gap: 6px;
}
.info-label {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}
.info-label i {
    font-size: 11px;
    color: var(--accent);
    width: 14px;
    text-align: center;
}
.info-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.variety-summary {
    cursor: pointer;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    transition: color 0.15s;
}
.variety-summary:hover {
    color: var(--accent-hover);
}

/* --- Stats block on right side --- */
.stats-col {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 16px;
    border-left: 1px solid var(--border);
    margin-left: 12px;
}
.stat-box {
    text-align: center;
    padding: 6px 14px 4px;
    border-radius: var(--radius-md, 10px);
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.06);
    min-width: 52px;
    position: relative;
    overflow: hidden;
}
.stat-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 40%, transparent));
    border-radius: var(--radius-md, 10px) var(--radius-md, 10px) 0 0;
}
[data-theme="light"] .stat-box {
    background: #F1EDE4;
    border-color: #E2DCCE;
}
.stat-num {
    font-size: 24px;
    font-weight: 800;
    color: var(--accent);
    font-family: var(--font-mono);
    line-height: 1.1;
}
.stat-label {
    font-size: var(--text-2xs);
    color: var(--text-muted);
    letter-spacing: 0.5px;
    margin-top: 2px;
    font-weight: 600;
}

/* --- Footer metadata row --- */
.card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 18px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 6px;
    position: relative;
    z-index: 1;
}
.footer-info {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.footer-tail {
    display: flex;
    align-items: center;
    gap: 6px;
}
.footer-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 600;
}
.footer-item i {
    color: var(--accent);
    font-size: 11px;
    width: 13px;
    text-align: center;
}

/* --- Card actions / buttons (shared with waiting.js) --- */
.loading-card-footer {
    flex-basis: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: var(--space-2) var(--space-4);
    background: var(--surface);
    border-top: 1px solid var(--border);
    gap: var(--space-2);
    box-sizing: border-box;
}
.loading-card-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

        /* ===== Loading Card Body ===== */
        .loading-card-body {
            display: flex;
            align-items: stretch;
            flex-wrap: nowrap;
            gap: var(--space-4);
            padding: var(--space-3) var(--space-4);
            flex: 1;
            min-width: 0;
        }
        .loading-left {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: var(--space-1);
            min-width: 95px;
            width: 95px;
            flex-shrink: 0;
            padding-right: var(--space-3);
            border-right: 1px solid var(--border);
        }
        .loading-meta-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: var(--space-3);
            padding: var(--space-2) var(--space-5);
            background: var(--surface);
            border-top: 1px solid var(--border);
        }
        .loading-meta-left {
            display: flex;
            flex-direction: column;
            gap: 2px;
            flex: 1;
            min-width: 0;
        }
        .loading-meta-right {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            flex-shrink: 0;
        }
        .loading-plate {
            font-size: var(--text-lg);
            font-weight: 800;
            color: var(--accent);
            letter-spacing: 0.5px;
            font-family: var(--font-mono);
            text-align: center;
            text-shadow: 0 1px 2px rgba(0,0,0,0.1);
            line-height: 1.2;
        }
        .loading-badges {
            display: flex;
            gap: var(--space-1);
            flex-wrap: wrap;
            justify-content: center;
        }
        .loading-badge {
            padding: var(--space-1) var(--space-2);
            font-size: 11px;
            font-weight: 600;
            border-radius: var(--radius-sm);
            color: #fff;
            letter-spacing: 0.5px;
        }
        .loading-badge.k1 {
            background: var(--success);
        }
        .loading-badge.k2 {
            background: var(--info);
        }
        .loading-badge.exit {
            background: var(--warning);
        }

        /* ===== Timer Box ===== */
        .timer-box {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-1);
            min-width: 0;
            width: 100%;
            flex-shrink: 0;
            padding: var(--space-1) var(--space-2);
            background: var(--surface);
            border-radius: var(--radius-sm);
            border: 1px solid var(--border);
        }
        .timer-box .time {
            font-size: var(--text-base);
            font-weight: 800;
            color: var(--text-primary);
            font-family: var(--font-mono);
            letter-spacing: 0.5px;
            position: relative;
            z-index: 1;
            line-height: 1;
        }
        .timer-box .label,
        .timer-box .timer-label {
            font-size: 10px;
            color: var(--text-muted);
            position: relative;
            z-index: 1;
            letter-spacing: 0.3px;
            line-height: 1;
        }

        /* ===== Timer Paused State ===== */
        .timer-box.paused {
            background: var(--surface);
            border-color: var(--warning);
        }
        .timer-box.paused .time {
            color: var(--text-muted);
        }
        .timer-box.paused .timer-label {
            color: var(--warning);
        }

        /* ===== Pause / Resume Button ===== */
        .btn-pause-resume {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 8px 16px;
            font-size: var(--text-sm);
            font-weight: 600;
            border: 1px solid var(--warning);
            border-radius: var(--radius-sm);
            background: rgba(215, 116, 2, 0.12);
            color: var(--warning);
            cursor: pointer;
            transition: all 0.3s ease;
            user-select: none;
            min-width: 70px;
        }
        .btn-pause-resume:hover {
            background: rgba(215, 116, 2, 0.25);
            border-color: var(--warning);
        }
        .btn-pause-resume.resume {
            border-color: var(--success);
            background: rgba(2, 127, 52, 0.12);
            color: var(--success);
        }
        .btn-pause-resume.resume:hover {
            background: rgba(2, 127, 52, 0.25);
            border-color: var(--success);
        }
        .btn-pause-resume:active {
            transform: scale(0.95);
        }

        /* ===== Loading Info ===== */
        .loading-info {
            font-size: var(--text-sm);
            color: var(--text-primary);
            line-height: 1.5;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 2px;
            justify-content: center;
        }
        .loading-info-main {
            flex: 1.2;
            padding: 0 var(--space-2);
        }
        .loading-info-doc {
            flex: 1;
            padding-left: var(--space-3);
            border-left: 1px solid var(--border);
            font-size: var(--text-xs);
        }
        .loading-info strong {
            color: var(--text-primary);
            font-weight: 700;
        }
        .loading-info-row,
        .info-line {
            display: flex;
            align-items: center;
            gap: var(--space-1);
            flex-wrap: wrap;
            overflow-wrap: break-word;
            min-width: 0;
            padding: 1px 0;
        }
        .loading-info-row i,
        .info-line i {
            width: 14px;
            text-align: center;
            color: var(--accent);
            font-size: var(--text-xs);
            flex-shrink: 0;
        }
        .info-sep {
            color: var(--text-muted);
            margin: 0 2px;
        }
        .info-unit {
            color: var(--text-muted);
            font-size: var(--text-xs);
            margin-left: 1px;
        }
        .info-operator {
            color: var(--text-secondary);
            font-size: var(--text-xs);
        }
        .loading-info-row.unit-info-row {
            color: var(--text-primary);
            font-size: var(--text-xs);
        }
        .loading-info-row.unit-info-row i {
            color: var(--accent);
            font-size: var(--text-xs);
        }
        .loading-info-row.unit-info-row strong {
            color: var(--text-primary);
            font-weight: 600;
        }
        .loading-info-row.doc-info-row {
            color: var(--text-primary);
            font-size: var(--text-xs);
        }
        .loading-info-row.doc-info-row i {
            color: var(--accent);
            font-size: var(--text-xs);
        }
        .loading-info-row.doc-info-row strong {
            color: var(--text-primary);
            font-weight: 600;
        }
        .loading-info-row .unit-contact {
            color: var(--text-muted);
            font-size: var(--text-xs);
            font-weight: 400;
        }

        /* ===== Tail Tag ===== */
        .tail-tag {
            display: inline-flex;
            align-items: center;
            gap: var(--space-1);
            padding: 2px 10px;
            border-radius: var(--radius-sm);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.3px;
        }
        .tail-tag.has-tail {
            background: rgba(215, 116, 2, 0.12);
            color: var(--warning);
            border: 1px solid rgba(215, 116, 2, 0.25);
        }
        .tail-tag.no-tail {
            background: rgba(88, 101, 242, 0.06);
            color: var(--text-muted);
            border: 1px solid rgba(88, 101, 242, 0.1);
        }

        /* ===== Variety Compact Display ===== */
        .variety-summary-row {
            cursor: pointer;
        }
        .variety-summary-row:hover {
            background: rgba(24, 62, 254, 0.04);
            border-radius: var(--radius-sm);
        }
        .variety-tail-hint {
            font-size: 11px;
            color: var(--warning);
            font-weight: 600;
        }
        .variety-compact-row {
            cursor: pointer;
            align-items: flex-start !important;
        }
        .variety-compact-row:hover {
            background: rgba(24, 62, 254, 0.04);
            border-radius: var(--radius-sm);
        }
        .variety-compact-list {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            flex: 1;
            min-width: 0;
        }
        .variety-chip {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            padding: 1px 8px;
            background: rgba(88, 101, 242, 0.06);
            border: 1px solid rgba(88, 101, 242, 0.12);
            border-radius: var(--radius-sm);
            font-size: 11px;
            color: var(--text-secondary);
            white-space: nowrap;
        }
        .variety-chip em {
            font-style: normal;
            font-weight: 700;
            color: var(--text-primary);
            font-size: 11px;
        }
        .variety-chip-tail {
            display: inline-block;
            font-size: 9px;
            font-weight: 700;
            color: var(--warning);
            background: rgba(215, 116, 2, 0.15);
            border-radius: 2px;
            padding: 0 3px;
            line-height: 1.4;
        }
        .variety-view-btn {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 1px 8px;
            margin-left: 4px;
            font-size: 11px;
            font-weight: 600;
            color: var(--primary);
            white-space: nowrap;
            opacity: 0.8;
        }
        .variety-compact-row:hover .variety-view-btn {
            opacity: 1;
        }
        .variety-single-detail {
            color: var(--text-muted);
            font-size: 12px;
        }
        .variety-wh-detail {
            font-size: 11px;
            color: var(--text-muted);
        }
        .variety-view-icon {
            margin-left: auto;
            font-size: 11px;
            color: var(--text-muted);
            opacity: 0.5;
        }
        .loading-info-row:hover .variety-view-icon {
            opacity: 1;
            color: var(--primary);
        }

        /* ===== Variety Detail Popup ===== */
        .variety-detail-popup {
            min-width: 520px;
        }
        .variety-popup-body {
            padding: var(--space-4) var(--space-5);
            overflow-x: auto;
            max-height: 60vh;
            overflow-y: auto;
        }
        .variety-popup-table {
            width: 100%;
            border-collapse: collapse;
            font-size: var(--text-sm);
        }
        .variety-popup-table thead th {
            background: rgba(88, 101, 242, 0.06);
            color: var(--text-secondary);
            font-weight: 600;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: var(--space-2) var(--space-3);
            border-bottom: 2px solid var(--border);
            text-align: left;
            white-space: nowrap;
        }
        .variety-popup-table tbody td {
            padding: var(--space-2) var(--space-3);
            border-bottom: 1px solid var(--border);
            color: var(--text-secondary);
            vertical-align: middle;
        }
        .variety-popup-table tbody tr:last-child {
            border-bottom: none;
        }
        .variety-popup-table .vd-idx {
            width: 30px;
            text-align: center;
            color: var(--text-muted);
            font-size: 11px;
        }
        .variety-popup-table .vd-name {
            font-weight: 600;
            color: var(--text-primary);
            min-width: 80px;
        }
        .variety-popup-table .vd-qty {
            font-weight: 700;
            color: var(--text-primary);
            text-align: right;
            width: 60px;
        }
        .variety-popup-table .vd-wh {
            font-size: 12px;
        }
        .variety-popup-table .vd-pallets {
            text-align: center;
            width: 50px;
        }
        .variety-popup-table .vd-subcode,
        .variety-popup-table .vd-batch {
            font-family: monospace;
            font-size: 12px;
        }
        .variety-popup-table .vd-tail {
            text-align: center;
            width: 60px;
        }
        .vd-wh-k1 {
            color: var(--primary);
            font-weight: 600;
            font-size: 11px;
        }
        .vd-wh-k2 {
            color: var(--success, #10b981);
            font-weight: 600;
            font-size: 11px;
        }
        .vd-tail-badge {
            display: inline-block;
            padding: 1px 8px;
            border-radius: var(--radius-sm);
            font-size: 11px;
            font-weight: 600;
        }
        .vd-tail-badge.has-tail {
            background: rgba(215, 116, 2, 0.12);
            color: var(--warning);
            border: 1px solid rgba(215, 116, 2, 0.25);
        }
        .vd-tail-badge.no-tail {
            background: rgba(24, 62, 254, 0.04);
            color: var(--text-muted);
            border: 1px solid rgba(24, 62, 254, 0.08);
        }
        .vd-empty {
            color: var(--text-muted);
            opacity: 0.5;
        }
        .vd-summary-row {
            background: rgba(24, 62, 254, 0.04);
        }
        .vd-summary-row td {
            padding-top: var(--space-3) !important;
            border-bottom: none !important;
            font-size: var(--text-sm);
            color: var(--text-secondary);
        }
        .variety-popup-table .vd-picking {
            text-align: center;
        }
        .variety-popup-table .vd-row-state-done {
            background: rgba(15, 126, 21, 0.06);
        }
        .variety-popup-table .vd-row-state-picking {
            background: rgba(3, 131, 238, 0.08);
        }
        .variety-popup-table .vd-row-state-pending {
            background: transparent;
        }

        /* ===== 拣货管理弹窗（Picking Modal） ===== */
        .picking-modal {
            max-width: 720px;
            width: 95vw;
            max-height: 88vh;
            display: flex;
            flex-direction: column;
        }
        .picking-body {
            padding: var(--space-4);
            overflow-y: auto;
            flex: 1 1 auto;
        }
        .picking-summary {
            background: rgba(24, 62, 254, 0.04);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            padding: var(--space-3) var(--space-4);
            margin-bottom: var(--space-3);
        }
        .picking-summary-row {
            display: flex;
            gap: var(--space-3);
            flex-wrap: wrap;
            margin-bottom: var(--space-2);
        }
        .picking-summary-item {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            border-radius: var(--radius-sm);
            background: var(--surface);
            font-size: var(--text-sm);
            color: var(--text-secondary);
        }
        .picking-summary-item .label {
            color: var(--text-muted);
        }
        .picking-summary-item .value {
            font-weight: 700;
            color: var(--text-primary);
            font-size: var(--text-base);
        }
        .picking-summary-item.state-pending .value { color: #94a3b8; }
        .picking-summary-item.state-picking .value { color: var(--info); }
        .picking-summary-item.state-done .value { color: var(--success); }
        .picking-tip,
        .picking-all-done-hint {
            font-size: var(--text-xs);
            color: var(--text-secondary);
            line-height: 1.6;
            padding-top: var(--space-1);
        }
        .picking-all-done-hint {
            color: var(--success);
            font-weight: 600;
        }
        .picking-all-done-hint i,
        .picking-tip i { margin-right: 4px; }
        .picking-list {
            display: flex;
            flex-direction: column;
            gap: var(--space-2);
        }
        .picking-item {
            border: 1.5px solid var(--border);
            border-radius: var(--radius-md);
            background: var(--bg-elevated);
            overflow: hidden;
            transition: all 0.2s ease;
        }
        .picking-item.state-pending {
            border-color: rgba(108, 108, 108, 0.18);
            background: var(--bg-elevated);
        }
        .picking-item.state-picking {
            border-color: var(--info);
            background: rgba(3, 131, 238, 0.08);
            box-shadow: 0 0 0 1px var(--info) inset, 0 2px 8px rgba(3, 131, 238, 0.18);
        }
        .picking-item.state-done {
            border-color: var(--success);
            background: rgba(15, 126, 21, 0.06);
        }
        .picking-item.state-done .picking-name {
            text-decoration: line-through;
            text-decoration-color: rgba(15, 126, 21, 0.6);
            text-decoration-thickness: 1.5px;
        }
        .picking-item-header {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-2) var(--space-3);
            border-bottom: 1px dashed var(--border);
        }
        .picking-idx {
            flex: 0 0 auto;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: var(--surface);
            color: var(--text-secondary);
            font-size: var(--text-xs);
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .picking-item.state-done .picking-idx {
            background: var(--success);
            color: #fff;
        }
        .picking-item.state-picking .picking-idx {
            background: var(--info);
            color: #fff;
        }
        .picking-name {
            flex: 1 1 auto;
            font-size: var(--text-base);
            font-weight: 600;
            color: var(--text-primary);
        }
        .picking-item-body {
            padding: var(--space-2) var(--space-3);
            display: flex;
            align-items: center;
            gap: var(--space-3);
            flex-wrap: wrap;
        }
        .picking-meta {
            flex: 1 1 auto;
            display: flex;
            flex-wrap: wrap;
            gap: 6px 10px;
            font-size: var(--text-xs);
            color: var(--text-secondary);
            min-width: 0;
        }
        .picking-meta .meta-item {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            white-space: nowrap;
        }
        .picking-actions {
            flex: 0 0 auto;
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }
        .picking-btn {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 10px;
            border-radius: var(--radius-sm);
            border: 1px solid var(--border);
            background: var(--surface);
            color: var(--text-primary);
            font-size: var(--text-xs);
            font-weight: 600;
            cursor: pointer;
            transition: all 0.18s ease;
        }
        .picking-btn:hover {
            transform: translateY(-1px);
            filter: brightness(1.05);
        }
        .picking-btn-start {
            background: var(--info);
            border-color: var(--info);
            color: #fff;
        }
        .picking-btn-start:hover {
            background: color-mix(in srgb, var(--info) 85%, white 15%);
            box-shadow: 0 2px 6px rgba(3, 131, 238, 0.35);
        }
        .picking-btn-done {
            background: var(--success);
            border-color: var(--success);
            color: #fff;
        }
        .picking-btn-done:hover {
            background: color-mix(in srgb, var(--success) 85%, white 15%);
            box-shadow: 0 2px 6px rgba(15, 126, 21, 0.35);
        }
        .picking-btn-reset,
        .picking-btn-redo {
            background: var(--bg-elevated);
            color: var(--text-secondary);
            padding: 4px 8px;
        }
        .picking-btn-reset:hover,
        .picking-btn-redo:hover {
            border-color: var(--accent);
            color: var(--accent);
        }

        /* 拣货弹窗 - 尾托信息填写区（每个有尾托品种独立显示） */
        .picking-tail-fields {
            margin-top: var(--space-2);
            padding-top: var(--space-2);
            border-top: 1px dashed var(--border);
        }
        .picking-tail-label {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: var(--text-xs);
            color: var(--text-secondary);
            margin-bottom: var(--space-1);
            font-weight: 600;
        }
        .picking-tail-inputs {
            display: flex;
            gap: var(--space-3);
            flex-wrap: wrap;
        }
        .picking-tail-input-group {
            flex: 1;
            min-width: 140px;
        }
        .picking-tail-input-group label {
            display: block;
            font-size: 10px;
            color: var(--text-muted);
            margin-bottom: 2px;
        }
        .picking-tail-input-group input {
            width: 100%;
            padding: 4px 8px;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            font-size: var(--text-xs);
            background: var(--surface);
            color: var(--text-primary);
            transition: all 0.18s ease;
            box-sizing: border-box;
        }
        .picking-tail-input-group input:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
            outline: none;
        }
        .picking-tail-input-group input::placeholder {
            color: var(--text-muted);
            opacity: 0.6;
        }

        /* 拣货弹窗 - 拣货人选择区 */
        .picking-picker-section {
            margin-top: var(--space-2);
            padding: var(--space-2) var(--space-3);
            background: color-mix(in srgb, var(--accent) 6%, transparent);
            border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
            border-radius: var(--radius-md);
        }
        .picking-picker-label {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: var(--text-xs);
            color: var(--text-secondary);
            font-weight: 600;
            margin-bottom: 6px;
        }
        .picking-picker-row {
            display: flex;
            gap: var(--space-2);
            align-items: center;
            flex-wrap: wrap;
        }
        .picking-picker-row select,
        .picking-picker-row input {
            flex: 1;
            min-width: 120px;
            padding: 4px 8px;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            font-size: var(--text-xs);
            background: var(--surface);
            color: var(--text-primary);
        }
        .picking-picker-row select:focus,
        .picking-picker-row input:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
            outline: none;
        }

        /* 拣货弹窗底部按钮区 */
        .picking-modal-btns {
            padding: var(--space-3);
            border-top: 1px solid var(--border);
            background: var(--surface);
            display: flex;
            gap: var(--space-2);
            justify-content: flex-end;
        }
        .picking-modal-btns .cancel {
            background: var(--bg-elevated);
            color: var(--text-secondary);
            border: 1px solid var(--border);
        }
        .picking-modal-btns .cancel:hover {
            border-color: var(--accent);
            color: var(--accent);
        }
        .picking-modal-btns .confirm {
            background: var(--success);
            color: #fff;
            border: 1px solid var(--success);
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .picking-modal-btns .confirm:hover {
            background: color-mix(in srgb, var(--success) 85%, white 15%);
            box-shadow: 0 2px 6px rgba(15, 126, 21, 0.35);
            transform: translateY(-1px);
        }

        /* 拣货状态徽章（在卡片/详情弹窗共用） */
        .picking-status-pill {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 1px 8px;
            border-radius: 10px;
            font-size: 11px;
            font-weight: 600;
            white-space: nowrap;
        }
        .picking-status-pill.state-pending {
            background: rgba(108, 108, 108, 0.1);
            color: #94a3b8;
            border: 1px solid rgba(108, 108, 108, 0.18);
        }
        .picking-status-pill.state-picking {
            background: rgba(3, 131, 238, 0.14);
            color: var(--info);
            border: 1px solid rgba(3, 131, 238, 0.32);
        }
        .picking-status-pill.state-done {
            background: rgba(15, 126, 21, 0.14);
            color: var(--success);
            border: 1px solid rgba(15, 126, 21, 0.32);
        }

        /* 卡片上的拣货进度条（多品种任务展示） */
        .picking-progress {
            margin: 0 var(--space-3) var(--space-2);
            padding: var(--space-2) var(--space-3);
            background: rgba(24, 62, 254, 0.04);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
        }
        .picking-progress-text {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            flex-wrap: wrap;
            font-size: var(--text-xs);
            color: var(--text-secondary);
            margin-bottom: 6px;
        }
        .picking-progress-text strong {
            color: var(--text-primary);
            font-size: var(--text-sm);
        }
        .picking-progress-text i {
            color: var(--info);
        }
        .picking-state-tag {
            display: inline-flex;
            align-items: center;
            padding: 1px 6px;
            border-radius: 8px;
            font-size: 10px;
            font-weight: 600;
        }
        .picking-state-tag.state-pending {
            background: rgba(108, 108, 108, 0.1);
            color: #94a3b8;
        }
        .picking-state-tag.state-picking {
            background: rgba(3, 131, 238, 0.14);
            color: var(--info);
        }
        .picking-progress-bar {
            height: 6px;
            background: rgba(108, 108, 108, 0.1);
            border-radius: 3px;
            overflow: hidden;
        }
        .picking-progress-bar.done {
            background: rgba(15, 126, 21, 0.2);
        }
        .picking-progress-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--info), var(--success));
            transition: width 0.4s ease;
        }
        .picking-progress-bar.done .picking-progress-fill {
            background: var(--success);
        }

        /* 卡片上的「拣货」按钮 */
        .btn-sm.btn-picking {
            background: rgba(3, 131, 238, 0.12);
            color: var(--info);
            border: 1px solid rgba(3, 131, 238, 0.32);
        }
        .btn-sm.btn-picking:hover {
            background: var(--info);
            color: #fff;
            border-color: var(--info);
        }

        /* ===== Damage Rate Bar ===== */
        .damage-rate-bar {
            flex-basis: 100%;
            width: 100%;
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-2) var(--space-4);
            background: rgba(241, 13, 15, 0.06);
            border: 1px solid rgba(241, 13, 15, 0.15);
            border-radius: var(--radius-sm);
            margin: 0;
            font-size: var(--text-xs);
            box-sizing: border-box;
            flex-wrap: wrap;
        }
        .damage-rate-bar i {
            color: var(--danger);
            font-size: 11px;
        }
        .damage-rate-bar .rate-value {
            font-weight: 700;
            color: var(--danger);
        }
        .damage-rate-bar .rate-detail {
            color: var(--text-muted);
            font-size: 11px;
        }
        .damage-rate-bar.no-damage {
            background: rgba(2, 127, 52, 0.06);
            border-color: rgba(2, 127, 52, 0.15);
        }
        .damage-rate-bar.no-damage i {
            color: var(--success);
        }
        .damage-rate-bar.no-damage .rate-value {
            color: var(--success);
        }

        /* ===== Loading Card Footer ===== */
        .loading-card-footer {
            flex-basis: 100%;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            padding: var(--space-2) var(--space-5);
            background: var(--surface);
            border-top: 1px solid var(--border);
            gap: var(--space-2);
            box-sizing: border-box;
        }
        /* ===== 装车卡片展开区 ===== */
        .loading-expand-section {
            flex-basis: 100%;
            width: 100%;
            border-top: 1px dashed var(--border);
            padding: var(--space-3) var(--space-5);
            box-sizing: border-box;
            animation: expandFadeIn 0.2s ease-out;
            background: var(--surface);
        }
        .loading-expand-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: var(--space-2);
            margin-bottom: var(--space-3);
        }
        .loading-expand-content .loading-info-row {
            font-size: var(--text-xs);
            color: var(--text-secondary);
        }
        .btn-loading-expand-toggle {
            flex-basis: 100%;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            background: transparent;
            color: var(--text-muted);
            border: none;
            border-top: 1px solid var(--border);
            padding: var(--space-2) var(--space-4);
            font-size: var(--text-xs);
            font-weight: 600;
            cursor: pointer;
            transition: background 0.15s, color 0.15s;
            box-sizing: border-box;
        }
        .btn-loading-expand-toggle:hover {
            background: var(--surface);
            color: var(--accent);
        }
        .btn-loading-expand-toggle.expanded {
            color: var(--accent);
            background: var(--surface);
        }
        @keyframes expandFadeIn {
            from { opacity: 0; transform: translateY(-4px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .loading-card-actions {
            display: flex;
            gap: var(--space-2);
            flex-wrap: wrap;
            align-items: center;
        }
        .btn-damage, .btn-view-damage, .btn-add-temp, .btn-edit-qty {
            padding: var(--space-1) var(--space-3);
            font-size: var(--text-xs);
            font-weight: 600;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: background 0.15s ease-out, color 0.15s ease-out, border-color 0.15s ease-out;
            background: transparent;
            color: var(--text-secondary);
        }
        .btn-damage:hover {
            background: rgba(215, 116, 2, 0.1);
            color: var(--warning);
            border-color: rgba(215, 116, 2, 0.3);
        }
        .btn-view-damage:hover {
            background: rgba(88, 101, 242, 0.1);
            color: var(--accent);
            border-color: rgba(88, 101, 242, 0.3);
        }
        .btn-add-temp:hover {
            background: rgba(2, 127, 52, 0.1);
            color: var(--success);
            border-color: rgba(2, 127, 52, 0.3);
        }
        .btn-edit-qty:hover {
            background: rgba(54, 57, 206, 0.1);
            color: var(--info);
            border-color: rgba(54, 57, 206, 0.3);
        }
        .btn-stop {
            padding: var(--space-2) var(--space-6);
            font-size: var(--text-sm);
            font-weight: 700;
            border: none;
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: transform 0.15s ease-out, opacity 0.15s ease-out;
            background: var(--danger);
            color: #fff;
            letter-spacing: 1px;
        }
        .btn-stop:hover {
            transform: translateY(-1px);
            opacity: 0.9;
        }

        /* 装车中订单的取消按钮：使用灰底描边，避免与"结束装车"的危险红色冲突 */
        .btn-cancel-loading {
            padding: var(--space-2) var(--space-4);
            font-size: var(--text-sm);
            font-weight: 600;
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: transform 0.15s ease-out, background 0.15s ease-out, color 0.15s ease-out;
            background: var(--bg-elevated);
            color: var(--text-secondary);
            white-space: nowrap;
        }
        .btn-cancel-loading:hover {
            transform: translateY(-1px);
            background: var(--danger);
            color: #fff;
            border-color: var(--danger);
        }
        .btn-cancel-loading:active {
            transform: translateY(0);
        }

        /* --- Icon-only cancel button (compact) --- */
        .btn-cancel-loading.icon-only {
            padding: var(--space-2);
            min-width: 36px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        /* --- Variety cell: prevent long text from breaking layout --- */
        .info-value.variety-cell {
            display: flex;
            align-items: center;
            min-width: 0;
        }
        .info-value.variety-cell .variety-summary {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 100%;
        }

        /* ===== Empty State ===== */
        .empty-state {
            text-align: center;
            padding: 100px var(--space-5);
            color: var(--text-muted);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 300px;
            animation: fadeIn 0.4s ease-out;
        }
        .empty-state i {
            font-size: var(--icon-2xl);
            opacity: 0.25;
            margin-bottom: var(--space-5);
            display: block;
            color: var(--text-secondary);
        }
        .empty-state .empty-title {
            font-size: var(--text-lg);
            font-weight: 600;
            color: var(--text-secondary);
            margin-bottom: var(--space-2);
            letter-spacing: 1px;
        }
        .empty-state .empty-desc {
            font-size: var(--text-sm);
            color: var(--text-muted);
            opacity: 0.8;
        }
        /* 紧凑型空状态（卡片内使用） */
        .empty-state-inline {
            text-align: center;
            padding: var(--space-5);
            color: var(--text-muted);
            font-size: var(--text-sm);
        }
        .empty-state-inline i {
            font-size: var(--text-xl);
            opacity: 0.4;
            display: block;
            margin-bottom: var(--space-2);
        }
        /* 错误状态 */
        .empty-state-error {
            text-align: center;
            padding: var(--space-5);
            color: var(--danger);
        }
        .empty-state-error i {
            font-size: var(--text-xl);
            display: block;
            margin-bottom: var(--space-2);
        }
        .empty-state-error .err-tip {
            font-size: var(--text-xs);
            color: var(--text-muted);
            margin-top: var(--space-1);
        }
        
        /* ===== Card Animations ===== */
        .loading-card.removing {
            animation: cardSlideOut 0.3s var(--ease-out-quart) forwards;
        }
        @keyframes cardSlideIn {
            from {
                opacity: 0;
                transform: translateY(20px) scale(0.98);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
        @keyframes cardSlideOut {
            from {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
            to {
                opacity: 0;
                transform: translateY(-20px) scale(0.95);
            }
        }

        /* ===== Filter Bar ===== */
        .filter-bar {
            display: flex;
            gap: var(--space-2);
            margin-bottom: var(--space-4);
            flex-wrap: wrap;
        }
        .filter-bar input, .filter-bar select {
            padding: var(--space-2) var(--space-3);
            font-size: var(--text-sm);
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            color: var(--text-primary);
            outline: none;
        }
        .filter-bar select option {
            background: var(--option-bg);
            color: var(--option-color);
        }

        /* ===== History Table ===== */
        .history-table {
            width: 100%;
            border-collapse: collapse;
            font-size: var(--text-sm);
            table-layout: auto;
        }
        .history-table th, .history-table td {
            padding: var(--nl-c-table-cell-py) var(--nl-c-table-cell-px); /* 8pt 密度：8→4 纵距，行高≈28px */
            line-height: var(--nl-c-table-lh);
            text-align: left;
            border-bottom: 1px solid var(--border);
            vertical-align: top;
            white-space: nowrap;
        }
        /* Zebra striping for better readability（暖金染色替代冷灰斑马纹） */
        .history-table tbody tr:nth-child(even) {
            background: var(--nl-c-table-zebra);
        }
        [data-theme="light"] .history-table tbody tr:nth-child(even) {
            background: rgba(43, 38, 32, 0.035);
        }
        /* Zebra for damage query table */
        .damage-query-table tbody tr:nth-child(even) {
            background: var(--nl-c-table-zebra);
        }
        [data-theme="light"] .damage-query-table tbody tr:nth-child(even) {
            background: rgba(43, 38, 32, 0.035);
        }
        .history-table th {
            font-weight: 600;
            color: var(--text-secondary);
            background: var(--bg-elevated);
            position: sticky;
            top: 0;
            z-index: 10;
            border-bottom: 1px solid var(--border-strong);
        }
        .history-table th:first-child {
            border-left: 3px solid var(--accent);
        }
        .history-table td {
            color: var(--text-primary);
        }
        .history-table tbody tr {
            transition: background-color var(--nl-dur-fast) var(--nl-ease-productive);
        }
        .history-table tbody tr:hover {
            background: var(--nl-c-table-row-hover); /* 原冷靓 rgba(88,101,242) → accent 暖金 */
        }
        .history-table tbody tr:hover td:first-child {
            border-left: 3px solid var(--accent);
        }
        .history-table tbody tr td:first-child {
            border-left: 3px solid transparent;
            transition: border-color 0.15s ease-out;
        }

        /* ===== 表格数字列对齐 ===== */
        .history-table td.numeric,
        .history-table th.numeric {
            text-align: center;
            white-space: nowrap;
            font-variant-numeric: tabular-nums;
            font-feature-settings: "tnum";
        }
        .history-table td.narrow {
            width: 1%;
            white-space: nowrap;
        }
        /* 时间列对齐 - 居中 + 等宽数字 */
        .history-table th.col-time,
        .history-table td.col-time {
            text-align: center;
            white-space: nowrap;
            font-variant-numeric: tabular-nums;
            font-feature-settings: "tnum";
        }

        /* ===== 今日记录表格专属样式（截图2样式） ===== */
        .today-record-table {
            font-size: var(--text-xs);
            border-collapse: collapse;
        }
        .today-record-table th,
        .today-record-table td {
            padding: 4px 8px; /* 8pt 密度：5→4 */
            line-height: 16px;
            text-align: left;
            border-bottom: 1px solid var(--border);
            vertical-align: middle;
            white-space: nowrap;
        }
        .today-record-table th {
            font-weight: 600;
            color: var(--text-secondary);
            background: var(--bg-elevated);
            position: sticky;
            top: 0;
            z-index: 10;
            border-bottom: 1px solid var(--border-strong);
        }
        /* 移除左侧棕色边框 */
        .today-record-table th:first-child,
        .today-record-table td:first-child {
            border-left: none;
        }
        .today-record-table tbody tr td:first-child {
            border-left: none;
        }
        .today-record-table tbody tr:hover td:first-child {
            border-left: none;
        }
        /* 无斑马纹 */
        .today-record-table tbody tr:nth-child(even) {
            background: transparent;
        }
        /* 更淡的悬停效果 */
        .today-record-table tbody tr:hover {
            background: color-mix(in srgb, var(--accent) 6%, transparent);
        }
        /* 数字列右对齐 */
        .today-record-table td.number-col,
        .today-record-table th.number-col {
            text-align: right;
            font-variant-numeric: tabular-nums;
            font-feature-settings: "tnum";
        }
        .today-record-table th.number-col {
            text-align: right;
        }
        /* 时间列等宽字体居中 */
        .today-record-table th.col-time,
        .today-record-table td.col-time {
            text-align: center;
            font-variant-numeric: tabular-nums;
            font-feature-settings: "tnum";
            font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
        }
        /* 详细信息药丸样式 */
        .today-record-table .cell-detail-link {
            font-size: 11px;
            padding: 2px 8px;
            border-radius: 12px;
            background: color-mix(in srgb, var(--info) 10%, transparent);
            color: var(--info);
            border: 1px solid color-mix(in srgb, var(--info) 25%, transparent);
        }
        .today-record-table .cell-detail-link:hover {
            background: color-mix(in srgb, var(--info) 15%, transparent);
            border-color: var(--info);
        }
        .today-record-table .cell-detail-link .cell-summary-text {
            font-size: 11px;
            color: var(--info);
        }

        /* ===== Form Input Focus Enhancement ===== */
        input:focus-visible,
        select:focus-visible,
        textarea:focus-visible {
            border-color: var(--accent);
            box-shadow: var(--nl-c-input-focus-ring); /* 25%→30% 提升 WCAG 2.2 焦点对比 */
            outline: none;
        }
        .cell-detail-link {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            color: var(--accent);
            cursor: pointer;
            font-size: var(--text-xs);
            padding: 2px 6px;
            border-radius: 4px;
            background: color-mix(in srgb, var(--accent) 8%, transparent);
            border: 1px solid transparent;
            transition: opacity 0.15s ease-out, background 0.15s ease-out;
            max-width: 140px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .cell-detail-link:hover {
            background: color-mix(in srgb, var(--accent) 15%, transparent);
            border-color: var(--accent);
        }
        .cell-detail-link .detail-icon {
            flex-shrink: 0;
            font-size: var(--text-2xs);
            opacity: 0.7;
        }
        .cell-summary-text {
            font-size: 12px;
            color: var(--text-primary);
            max-width: 120px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: inline-block;
            vertical-align: middle;
        }
        .cell-count-badge {
            display: inline-block;
            background: var(--accent);
            color: var(--on-accent, #fff);
            font-size: 10px;
            padding: 1px 5px;
            border-radius: 8px;
            margin-left: 3px;
            vertical-align: middle;
        }
        .record-field-detail-modal {
            max-width: 480px;
            max-height: 70vh;
        }
        .record-field-detail-content {
            padding: 15px;
            overflow-y: auto;
            max-height: calc(70vh - 120px);
        }
        .record-field-detail-content .detail-item {
            padding: 8px 0;
            border-bottom: 1px dashed var(--border);
            font-size: 13px;
            line-height: 1.5;
        }
        .record-field-detail-content .detail-item:last-child {
            border-bottom: none;
        }
        .record-field-detail-content .detail-item-label {
            font-weight: 600;
            color: var(--text-secondary);
            margin-bottom: 3px;
        }
        .record-field-detail-content .detail-item-value {
            color: var(--text-primary);
        }
        .record-field-detail-content .detail-section-header {
            padding: 6px 0 4px 0;
            font-size: 13px;
            font-weight: 600;
            color: var(--accent);
            border-bottom: 2px solid var(--accent);
            margin-bottom: 2px;
        }

        /* ===== History Table Container ===== */
        .history-table-container {
            max-height: calc(100vh - 320px);
            min-height: 280px;
            overflow-y: auto;
            position: relative;
            border-radius: var(--radius-md);
            border: 1px solid var(--border);
            background: var(--bg-secondary);
        }
        .history-table-container .empty-state {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--space-2);
            color: var(--text-secondary);
            width: 90%;
            max-width: 420px;
            text-align: center;
            word-break: break-word;
            padding: var(--space-4) var(--space-5);
            min-height: auto;
        }
        .history-table-container .empty-state i {
            font-size: 48px;
            opacity: 0.5;
        }

        /* ===== Comparison Table ===== */
        .comparison-table-container {
            overflow-x: auto;
        }
        .comparison-table {
            width: 100%;
            border-collapse: collapse;
            font-size: var(--text-sm);
        }
        .comparison-table thead {
            background: var(--bg-secondary, rgba(0, 0, 0, 0.15));
        }
        .comparison-table th {
            padding: var(--nl-c-table-cell-py) var(--space-4);
            line-height: var(--nl-c-table-lh);
            text-align: center;
            font-weight: var(--nl-c-table-header-weight);
            color: var(--text-primary);
            border-bottom: 1px solid var(--border-strong);
            white-space: nowrap;
        }
        .comparison-table th.warehouse1-header {
            color: var(--info);
        }
        .comparison-table th.warehouse2-header {
            color: var(--success);
        }
        .comparison-table td {
            padding: var(--nl-c-table-cell-py) var(--space-4);
            line-height: var(--nl-c-table-lh);
            border-bottom: 1px solid var(--border);
            color: var(--text-primary);
            text-align: center;
        }
        .comparison-table tbody tr:hover {
            background: var(--nl-c-table-row-hover); /* 原纯黑遮罩在浅色下不可见 → accent 随主题 */
        }
        .comparison-table .dimension-label {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            font-weight: 500;
            color: var(--text-secondary);
        }
        .comparison-table .dimension-label i {
            width: 20px;
            text-align: center;
            color: var(--accent);
        }
        .comparison-table .warehouse1-value {
            color: var(--info);
            font-weight: 600;
        }
        .comparison-table .warehouse2-value {
            color: var(--success);
            font-weight: 600;
        }
        .comparison-table .diff-value {
            font-weight: 600;
            padding: var(--space-1) var(--space-2);
            border-radius: var(--radius-sm);
            text-align: center;
        }
        .comparison-table th:has(+ .diff-value),
        .comparison-table thead th:last-child {
            text-align: center;
        }
        .comparison-table .diff-value.positive {
            background: rgba(2, 127, 52, 0.15);
            color: var(--success);
        }
        .comparison-table .diff-value.negative {
            background: rgba(241, 13, 15, 0.15);
            color: var(--danger);
        }
        .comparison-table .diff-value.neutral {
            color: var(--text-secondary);
        }
        .comparison-summary {
            margin-top: var(--space-4);
            padding: var(--space-3) var(--space-4);
            background: rgba(0, 0, 0, 0.1);
            border-radius: var(--radius-sm);
            border-left: 3px solid var(--accent);
        }
        .comparison-summary .summary-text {
            font-size: var(--text-sm);
            color: var(--text-secondary);
        }

        /* ===== Stats Grid ===== */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: var(--space-4);
            margin-bottom: var(--space-5);
        }

        /* ===== Stats Section Header ===== */
        .stats-section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: var(--space-4);
            padding-bottom: var(--space-3);
            border-bottom: 1px solid var(--border);
        }
        .stats-section-header h2 {
            font-size: var(--text-lg);
            font-weight: 600;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: var(--space-2);
            margin: 0;
        }
        .stats-section-header h2 i {
            color: var(--accent);
        }
        .stats-section-header .section-hint {
            font-size: var(--text-xs);
            color: var(--text-secondary);
            font-weight: 400;
        }

        /* ===== Stats Summary Row ===== */
        .stats-summary-row {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: var(--space-4);
            margin-bottom: var(--space-6);
        }
        .stats-summary-row .stat-card {
            transition: transform var(--nl-dur-base) var(--nl-ease-productive), box-shadow var(--nl-dur-base) var(--nl-ease-productive);
            display: flex;
            align-items: center;
            gap: var(--space-4);
            padding: var(--space-5);
        }
        .stats-summary-row .stat-card:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }
        .stat-card.highlight {
            background: rgba(88, 101, 242, 0.1);
            border: 1px solid rgba(24, 62, 254, 0.2);
        }
        /* [v3.3.6] 白班概览卡片 - 暖橙色调（与夜班紫色形成对比） */
        .stat-card.highlight-day {
            background: linear-gradient(135deg, rgba(245, 227, 168, 0.6), rgba(242, 207, 160, 0.4));
            border: 1px solid rgba(239, 70, 20, 0.3);
        }
        [data-theme="dark"] .stat-card.highlight-day {
            background: linear-gradient(135deg, rgba(25, 7, 0, 0.5), rgba(26, 3, 0, 0.3));
            border: 1px solid rgba(113, 22, 0, 0.4);
        }
        .stat-card.highlight-day .stat-card-icon {
            background: linear-gradient(135deg, #f59e0b, #ea580c);
        }
        .stat-card {
            background: var(--bg-secondary);
            border-radius: var(--radius-md);
            padding: var(--nl-c-card-padding-sm); /* 8pt 密度：20→16 */
            border: 1px solid var(--border);
            box-shadow: var(--nl-c-card-shadow);
            transition: transform var(--nl-dur-base) var(--nl-ease-productive), box-shadow var(--nl-dur-base) var(--nl-ease-productive), border-color var(--nl-dur-base) var(--nl-ease-productive);
        }
        .stat-card:hover {
            transform: translateY(-2px);
            box-shadow: var(--nl-c-card-shadow-hover);
        }
        .stat-card-icon {
            width: 50px;
            height: 50px;
            border-radius: var(--radius-md);
            background: var(--accent);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .stat-card-icon i {
            font-size: var(--icon-lg);
            color: #fff;
        }
        .stat-card-content {
            text-align: left;
        }
        .stat-card .value {
            font-size: 26px;
            font-weight: 700;
            color: var(--accent);
            line-height: 1.2;
            font-variant-numeric: tabular-nums;
            font-feature-settings: "tnum";
            letter-spacing: 0.3px;
        }
        .stat-card .label {
            font-size: var(--text-sm);
            color: var(--text-secondary);
            margin-top: var(--space-1);
            font-weight: 500;
        }

        /* ===== Stats Filter Bar ===== */
        .stats-filter-bar {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-3);
            margin-bottom: var(--space-6);
            padding: var(--space-4) var(--space-5);
            background: var(--bg-secondary);
            border-radius: var(--radius-md);
            border: 1px solid var(--border);
            align-items: center;
        }
        .stats-filter-bar select {
            padding: var(--space-2) var(--space-3);
            border-radius: var(--radius-sm);
            border: 1px solid var(--border);
            background: var(--surface);
            color: var(--text-primary);
            min-width: 110px;
            font-size: var(--text-sm);
        }
        .stats-filter-bar select:focus {
            outline: none;
            border-color: var(--accent);
        }
        /* [v3.5.4] 筛选条件 input 主题适配（车牌号等）—— 与 select 保持一致 */
        .stats-filter-bar input[type="text"] {
            padding: var(--space-2) var(--space-3);
            border-radius: var(--radius-sm);
            border: 1px solid var(--border);
            background: var(--surface);
            color: var(--text-primary);
            font-size: var(--text-sm);
            font-family: inherit;
            transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
            box-sizing: border-box;
        }
        .stats-filter-bar input[type="text"]:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: var(--nl-c-input-focus-ring);
        }
        .stats-filter-bar input[type="text"]::placeholder {
            color: var(--text-muted);
            opacity: 1; /* Firefox 默认 placeholder 透明，强制不透明 */
        }
        /* 兼容：车牌号输入框 id 选择器强制覆盖 */
        #searchPlate {
            background: var(--surface) !important;
            color: var(--text-primary) !important;
            border: 1px solid var(--border) !important;
        }
        #searchPlate::placeholder {
            color: var(--text-muted) !important;
            opacity: 1 !important;
        }

        /* ===== Date Range Filter ===== */
        .date-range-filter {
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }
        .date-range-filter label {
            font-size: var(--text-sm);
            color: var(--text-secondary);
            font-weight: 500;
        }
        .date-range-filter input {
            padding: var(--space-2);
            border-radius: var(--radius-sm);
            border: 1px solid var(--border);
            background: var(--surface);
            color: var(--text-primary);
            width: 135px;
            font-size: var(--text-sm);
        }
        .date-range-filter input:focus {
            outline: none;
            border-color: var(--accent);
        }
        .date-range-filter span {
            color: var(--text-secondary);
        }

        /* ===== Small Button ===== */
        .btn-sm {
            padding: var(--nl-c-btn-py) var(--nl-c-btn-px);
            border-radius: var(--nl-c-btn-radius);
            border: none;
            background: var(--accent);
            color: var(--on-accent, #fff);
            cursor: pointer;
            font-size: var(--nl-c-btn-font-size);
            font-weight: var(--nl-c-btn-font-weight);
            transition: var(--nl-c-btn-transition);
        }
        .btn-sm:hover {
            filter: brightness(1.1);
            transform: translateY(-1px);
        }
        .btn-sm:active {
            transform: translateY(0);
        }
        .btn-sm:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        .btn-export {
            background: var(--accent);
            color: var(--on-accent, #fff);
        }
        .btn-export:hover {
            filter: brightness(1.1);
            transform: translateY(-1px);
        }
        /* 今日快捷按钮 - 醒目绿色 */
        .btn-today {
            background: var(--success);
            color: #fff;
            font-weight: 600;
        }
        .btn-today:hover {
            filter: brightness(1.1);
            transform: translateY(-1px);
        }

        /* ===== Export Button ===== */
        .export-btn {
            padding: var(--space-2) var(--space-5);
            font-size: var(--text-sm);
            font-weight: 600;
            border: none;
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: var(--nl-c-btn-transition);
            background: var(--accent);
            color: var(--on-accent, #fff);
            white-space: nowrap;
        }
        .export-btn:hover {
            transform: translateY(-1px);
            filter: brightness(1.1);
        }
        /* 按钮语义颜色类（跟随主题变量） */
        .export-btn.btn-info { background: var(--info, #0ea5e9); color: #fff; }
        .export-btn.btn-success { background: var(--success, #22c55e); color: #fff; }
        .export-btn.btn-danger { background: var(--danger, #ef4444); color: #fff; }
        .export-btn.btn-warning { background: var(--warning, #f59e0b); color: #fff; }
        .export-btn.btn-purple { background: var(--purple, #8b5cf6); color: #fff; }
        .export-btn.btn-cyan { background: var(--cyan, #06b6d4); color: #fff; }
        .export-btn.btn-indigo { background: var(--indigo, #6366f1); color: #fff; }
        .export-btn.btn-red { background: var(--red, #dc2626); color: #fff; }
        .export-btn.btn-orange { background: var(--orange, #f97316); color: #fff; }
        .export-btn.btn-teal { background: var(--teal, #14b8a6); color: #fff; }
        .export-btn.btn-pink { background: var(--pink, #ec4899); color: #fff; }
        .export-btn.btn-slate { background: var(--slate, #64748b); color: #fff; }
        .export-btn.btn-emerald { background: var(--emerald, #10b981); color: #fff; }

        /* ===== Sync Indicator ===== */
        .sync-indicator {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 14px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 1px solid;
            margin-right: 8px;
        }
        .sync-indicator .sync-icon {
            font-size: 14px;
            transition: opacity 0.3s ease;
        }
        .sync-indicator.disconnected {
            background: rgba(49, 56, 67, 0.12);
            color: var(--text-muted);
            border-color: rgba(37, 43, 53, 0.15);
        }
        .sync-indicator.connected {
            background: var(--success);
            color: #fff;
            border-color: var(--success);
            box-shadow: 0 0 12px rgba(2, 127, 52, 0.15);
        }
        .sync-indicator.syncing {
            background: var(--accent);
            color: var(--on-accent, #fff);
            border-color: var(--accent);
            animation: syncPulse 1s ease-in-out infinite;
        }
        .sync-indicator.error {
            background: var(--danger);
            color: #fff;
            border-color: var(--danger);
        }
        .sync-indicator:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }
        @keyframes syncPulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.6; }
        }

        /* ===== Stats Warehouse Comparison ===== */
        .stats-warehouse-comparison {
            background: var(--bg-secondary);
            border-radius: var(--radius-lg);
            padding: var(--space-6);
            border: 1px solid var(--border);
            margin-bottom: var(--space-6);
        }
        .warehouse-comparison-text {
            background: var(--bg-secondary);
            border-radius: var(--radius-md);
            padding: var(--space-5);
            border: 1px solid var(--border);
        }
        .comparison-summary {
            margin-top: var(--space-4);
            padding: var(--space-3) var(--space-4);
            background: rgba(0, 0, 0, 0.1);
            border-radius: var(--radius-sm);
            border-left: 3px solid var(--accent);
        }
        .comparison-summary .summary-text {
            font-size: var(--text-sm);
            color: var(--text-secondary);
            line-height: 1.6;
        }
        .comparison-summary .summary-text strong {
            color: var(--text-primary);
        }
        .comparison-summary .summary-text .highlight-w1 {
            color: var(--info);
            font-weight: 600;
        }
        .comparison-summary .summary-text .highlight-w2 {
            color: var(--success);
            font-weight: 600;
        }

        /* ===== 图表容器 ===== */
        .chart-container {
            background: var(--bg-secondary);
            border-radius: var(--radius-md);
            border: 1px solid var(--border);
            padding: var(--space-4) var(--space-5);
            position: relative;
        }

        /* ===== 区块间距工具类 ===== */
        .section-gap {
            margin-top: var(--space-6);
        }

        /* ===== 夜班统计统一面板 ===== */
        .night-shift-panel {
            background: var(--bg-secondary);
            border-radius: var(--radius-lg);
            border: 1px solid var(--border);
            padding: var(--space-5);
            margin-bottom: var(--space-6);
            overflow: hidden;
        }
        .night-shift-panel > .chart-container {
            background: transparent;
            border: none;
            border-radius: 0;
            padding: 0 0 var(--space-4) 0;
            margin-bottom: var(--space-4);
            border-bottom: 1px solid var(--border);
        }
        .night-shift-panel > .history-table-container {
            border: none;
            border-radius: 0;
            background: transparent;
            max-height: 400px;
        }
        .night-shift-panel .pagination {
            margin-top: 0;
            padding-top: var(--space-3);
            border-top: 1px solid var(--border);
        }



        /* ===== 分页控件 ===== */
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: var(--space-1);
            margin-top: var(--space-4);
            padding-top: var(--space-4);
            border-top: 1px solid var(--border);
        }
        .pagination .page-btn {
            padding: var(--space-1) var(--space-3);
            font-size: var(--text-xs);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            background: var(--surface);
            color: var(--text-secondary);
            cursor: pointer;
            transition: background 0.15s ease-out;
        }
        .pagination .page-btn:hover { background: var(--bg-elevated); }
        .pagination .page-btn.active {
            background: var(--accent);
            color: var(--on-accent, #fff);
            border-color: var(--accent);
        }
        .pagination .page-btn.disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }
        .pagination .page-info {
            font-size: var(--text-xs);
            color: var(--text-secondary);
            margin-left: var(--space-3);
        }

        /* ===== Stats Personnel Section ===== */
        .stats-personnel-section {
            background: var(--bg-secondary);
            border-radius: var(--radius-lg);
            padding: var(--space-5);
            border: 1px solid var(--border);
            overflow: hidden;
            margin-top: var(--space-5);
        }
        .personnel-stats-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--space-4);
            padding-bottom: var(--space-3);
            border-bottom: 1px solid var(--border);
            flex-wrap: wrap;
            gap: var(--space-3);
        }
        .personnel-stats-summary {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: var(--space-3);
            flex: 1;
            min-width: 0;
        }
        .personnel-stats-summary .summary-item {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-2) var(--space-3);
            background: rgba(0, 0, 0, 0.1);
            border-radius: var(--radius-md);
            transition: background 0.15s ease-out;
            min-width: 0;
            overflow: hidden;
        }
        .personnel-stats-summary .summary-item:hover {
            background: rgba(0, 0, 0, 0.15);
        }
        .personnel-stats-summary .summary-icon {
            width: 36px;
            height: 36px;
            border-radius: var(--radius-sm);
            background: var(--accent);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .personnel-stats-summary .summary-icon i {
            font-size: 14px;
            color: #fff;
        }
        .personnel-stats-summary .summary-info {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
            overflow: hidden;
        }
        .personnel-stats-summary .summary-label {
            font-size: 11px;
            color: var(--text-secondary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .personnel-stats-summary .summary-value {
            font-size: var(--text-base);
            font-weight: 600;
            color: var(--accent);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .personnel-stats-actions {
            display: flex;
            gap: var(--space-2);
            flex-shrink: 0;
        }
        .personnel-stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: var(--space-3);
            margin-top: var(--space-4);
            width: 100%;
            box-sizing: border-box;
        }
        .personnel-stats-grid .empty-personnel-stats {
            grid-column: 1 / -1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: var(--space-10);
            color: var(--text-secondary);
            gap: var(--space-2);
        }
        .personnel-stats-grid .empty-personnel-stats i {
            font-size: 36px;
            opacity: 0.4;
        }
        .personnel-stat-card {
            position: relative;
            background: rgba(24, 62, 254, 0.08);
            border: 1px solid rgba(88, 101, 242, 0.15);
            border-radius: var(--radius-md);
            padding: var(--space-3);
            padding-top: calc(var(--space-3) + 4px);
            padding-right: calc(var(--space-3) + 4px);
            display: flex;
            align-items: center;
            gap: var(--space-2);
            transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out;
            min-width: 0;
        }
        .personnel-stat-card:hover {
            transform: translateY(-1px);
            box-shadow: var(--shadow-md);
            border-color: rgba(88, 101, 242, 0.3);
        }
        .personnel-stat-card .avatar {
            width: 42px;
            height: 42px;
            background: var(--accent);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--on-accent, #fff);
            font-weight: 600;
            font-size: var(--text-base);
            flex-shrink: 0;
        }
        .personnel-stat-card .info {
            flex: 1;
            min-width: 0;
            overflow: hidden;
        }
        .personnel-stat-card .details {
            display: flex;
            gap: var(--space-2);
            font-size: 12px;
            color: var(--text-primary);
            flex-wrap: wrap;
        }
        .personnel-stat-card .details span {
            display: flex;
            align-items: center;
            gap: 3px;
            white-space: nowrap;
        }
        .personnel-stat-card .details .qty {
            color: var(--accent);
            font-weight: 600;
        }
        .personnel-stat-card .details .pallets {
            color: var(--success);
            font-weight: 600;
        }
        .personnel-stat-card .details .task-count {
            color: var(--text-primary);
            font-weight: 600;
        }
        .personnel-stat-card .name-row {
            display: flex;
            align-items: center;
            gap: 4px;
            margin-bottom: var(--space-1);
        }
        .personnel-stat-card .rank-medal {
            font-size: 16px;
            line-height: 1;
            flex-shrink: 0;
        }
        .personnel-stat-card .rank-medal.gold { color: var(--medal-gold); }
        .personnel-stat-card .rank-medal.silver { color: var(--medal-silver); }
        .personnel-stat-card .rank-medal.bronze { color: var(--medal-bronze); }
        .personnel-stat-card .name {
            font-weight: 600;
            color: var(--text-primary);
            font-size: var(--text-sm);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
            min-width: 0;
        }
        .personnel-stat-card .rank-badge {
            position: absolute;
            top: -6px;
            right: -6px;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-weight: 700;
            font-size: 11px;
        }
        /* 奖牌色：金银铜为约定俗成语义，跨主题保持一致 */
        .personnel-stat-card .rank-badge.rank-1 { background: linear-gradient(135deg, var(--medal-gold), var(--medal-gold-dark)); box-shadow: 0 2px 6px rgba(255,215,0,0.4); }
        .personnel-stat-card .rank-badge.rank-2 { background: linear-gradient(135deg, var(--medal-silver), var(--medal-silver-dark)); box-shadow: 0 2px 6px rgba(192,192,192,0.4); }
        .personnel-stat-card .rank-badge.rank-3 { background: linear-gradient(135deg, var(--medal-bronze), var(--medal-bronze-dark)); box-shadow: 0 2px 6px rgba(205,127,50,0.4); }
        .personnel-stat-card .rank-badge.rank-other { background: var(--text-muted); font-size: 10px; }
        .personnel-stats-full {
            padding: var(--space-6);
        }
        .personnel-stats-filters {
            display: grid;
            grid-template-columns: auto auto 1fr auto;
            gap: var(--space-3);
            margin-bottom: var(--space-6);
            padding: var(--space-4) var(--space-5);
            background: rgba(0, 0, 0, 0.1);
            border-radius: var(--radius-md);
            align-items: center;
            border: 1px solid var(--border);
        }
        .personnel-stats-filters select {
            padding: var(--space-2) var(--space-3);
            border-radius: var(--radius-sm);
            border: 1px solid var(--border);
            background: var(--surface);
            color: var(--text-primary);
            min-width: 110px;
            font-size: var(--text-sm);
        }
        .personnel-stats-filters .date-range-filter {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-2) var(--space-3);
            background: var(--surface);
            border-radius: var(--radius-sm);
            border: 1px solid var(--border);
        }
        .personnel-stats-filters .date-range-filter label {
            color: var(--text-secondary);
            font-size: var(--text-sm);
            white-space: nowrap;
        }
        .personnel-stats-filters .date-range-filter input {
            padding: var(--space-1) var(--space-2);
            border-radius: var(--radius-sm);
            border: 1px solid var(--border);
            background: var(--bg-primary);
            color: var(--text-primary);
            font-size: var(--text-sm);
        }
        .personnel-stats-filters .date-range-filter span {
            color: var(--text-secondary);
            font-size: var(--text-sm);
        }
        .personnel-stats-filters .filter-buttons {
            display: flex;
            gap: var(--space-2);
            justify-content: flex-end;
        }
        /* 制单人统计筛选栏：仅含日期区间 + 快捷按钮，改为一行 flex 布局更美观 */
        .creator-stats-filters {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            gap: var(--space-3);
        }
        .creator-stats-filters .date-range-filter {
            flex: 1 1 auto;
            min-width: 280px;
        }

        /* ===== 制单人排行榜美化（与装货量统计同款卡片） ===== */
        .creator-stat-card {
            flex-direction: column;
            align-items: flex-start;
            gap: var(--space-2);
            padding-top: calc(var(--space-3) + 6px);
        }
        .creator-stat-card .creator-avatar {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, var(--accent), #8b5cf6);
            font-size: 16px;
        }
        .creator-stat-card .creator-details {
            width: 100%;
            justify-content: space-between;
            margin-top: 2px;
        }
        .creator-stat-card .creator-details .qty {
            color: var(--accent);
            font-weight: 700;
        }
        .creator-stat-card .creator-details .pallets {
            color: #8b5cf6;
            font-weight: 700;
        }
        .creator-stat-card .creator-bar {
            width: 100%;
            height: 7px;
            margin-top: 4px;
            background: rgba(0, 0, 0, 0.12);
            border-radius: 999px;
            overflow: hidden;
        }
        .creator-stat-card .creator-bar span {
            display: block;
            height: 100%;
            border-radius: 999px;
            background: linear-gradient(90deg, var(--accent), #8b5cf6);
            transition: width 0.5s ease-out;
        }
        .creator-stat-card .rank-badge.rank-1 { background: linear-gradient(135deg, var(--medal-gold), var(--medal-gold-dark)); }
        .creator-stat-card .rank-badge.rank-2 { background: linear-gradient(135deg, var(--medal-silver), var(--medal-silver-dark)); }
        .creator-stat-card .rank-badge.rank-3 { background: linear-gradient(135deg, var(--medal-bronze), var(--medal-bronze-dark)); }
        .creator-stats-range {
            font-size: 12px;
            font-weight: 500;
            color: var(--text-secondary);
            background: rgba(0, 0, 0, 0.1);
            padding: 2px 10px;
            border-radius: 999px;
            white-space: nowrap;
        }

        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            z-index: 10010;
            justify-content: center;
            align-items: center;
            animation: fadeIn 0.25s ease;
        }
        .modal-overlay.show {
            display: flex;
        }
        .modal {
            background: var(--bg-elevated);
            border-radius: var(--nl-c-modal-radius);
            border: 1px solid var(--border);
            box-shadow: var(--nl-c-modal-shadow);
            max-width: 90%;
            max-height: 90vh;
            overflow: hidden;
            animation: modalSlideIn 0.35s var(--ease-out-quart);
            will-change: transform, opacity;
            position: relative;
        }
        .modal-title {
            padding: var(--nl-c-modal-pad-y) var(--nl-c-modal-pad-x); /* 8pt 密度：20→16 */
            font-size: var(--type-heading);
            font-weight: 700;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .modal-title span {
            color: var(--text-primary);
        }
        .modal-close-btn {
            background: rgba(241, 13, 15, 0.1);
            color: var(--danger);
            border: 1px solid rgba(241, 13, 15, 0.2);
            width: 36px;
            height: 36px;
            border-radius: var(--radius-md);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            transition: background 0.15s ease-out, color 0.15s ease-out;
        }
        .modal-close-btn:hover {
            background: var(--danger);
            color: #fff;
        }
        .modal-btns {
            padding: var(--nl-c-modal-pad-y) var(--nl-c-modal-pad-x); /* 8pt 密度：20→16 */
            text-align: right;
            border-top: 1px solid var(--border);
        }
        .modal-btns button {
            padding: var(--space-3) var(--space-8);
            font-size: var(--text-base);
            font-weight: 700;
            border: none;
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: opacity 0.15s ease-out;
        }
        .modal-btns button:hover {
            opacity: 0.9;
        }
        .modal-btns .confirm {
            background: var(--accent);
            color: var(--on-accent, #fff);
        }
        .modal-btns .confirm:hover {
            background: var(--accent-hover);
        }
        /* ===== 弹窗按钮色彩系统（语义化） ===== */
        .modal-btns .cancel {
            background: var(--surface);
            color: var(--text-secondary);
            border: 1px solid var(--border);
        }
        .modal-btns .cancel:hover {
            background: var(--input-bg-hover);
            color: var(--text-primary);
        }
        .modal-btns .btn-success {
            background: var(--success);
            color: #fff;
        }
        .modal-btns .btn-success:hover {
            background: var(--success-dark, var(--success));
            opacity: 0.9;
        }
        .modal-btns .btn-danger {
            background: var(--danger);
            color: #fff;
        }
        .modal-btns .btn-danger:hover {
            background: var(--danger-light, var(--danger));
            opacity: 0.9;
        }

        /* ===== 语音播报开关样式 ===== */
        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 44px;
            height: 24px;
            cursor: pointer;
        }
        .toggle-switch input { display: none; }
        .toggle-switch .toggle-slider {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: var(--border);
            border-radius: 24px;
            transition: all 0.25s ease;
        }
        .toggle-switch .toggle-slider::before {
            content: '';
            position: absolute;
            width: 18px;
            height: 18px;
            left: 3px;
            bottom: 3px;
            background: #fff;
            border-radius: 50%;
            transition: all 0.25s ease;
        }
        .toggle-switch input:checked + .toggle-slider {
            background: var(--accent);
        }
        .toggle-switch input:checked + .toggle-slider::before {
            transform: translateX(20px);
        }
        .toggle-switch.toggle-sm {
            width: 36px;
            height: 20px;
        }
        .toggle-switch.toggle-sm .toggle-slider::before {
            width: 14px;
            height: 14px;
            left: 3px;
            bottom: 3px;
        }
        .toggle-switch.toggle-sm input:checked + .toggle-slider::before {
            transform: translateX(16px);
        }

        /* ===== 数据看板摘要卡片悬浮效果 ===== */
        .summary-card {
            transition: all 0.2s ease;
        }
        .summary-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        .modal-btns .btn-warning {
            background: var(--warning);
            color: var(--bg-primary);
        }
        .modal-btns .btn-warning:hover {
            opacity: 0.9;
        }
        .modal-btns .btn-secondary {
            background: var(--surface);
            color: var(--text-secondary);
            border: 1px solid var(--border);
        }
        .modal-btns .btn-secondary:hover {
            background: var(--input-bg-hover);
            color: var(--text-primary);
        }
        .modal-btns .btn-primary {
            background: var(--accent);
            color: var(--on-accent, #fff);
        }
        .modal-btns .btn-primary:hover {
            background: var(--accent-hover);
        }

        /* ===== 弹窗标题栏色彩区分（按类型） ===== */
        /* 默认标题栏：带左侧色条 */
        .modal-title {
            background: linear-gradient(90deg, rgba(24, 62, 254, 0.08) 0%, transparent 30%);
        }
        /* 危险操作类弹窗标题（数据管理、清空） */
        .modal-overlay[id="dataMgmtModal"] .modal-title,
        .modal-overlay[id="autoBackupModal"] .modal-title {
            background: linear-gradient(90deg, rgba(241, 13, 15, 0.12) 0%, transparent 30%);
        }
        /* 管理类弹窗标题（用户管理、用户中心、人员管理） */
        .modal-overlay[id="userMgmtModal"] .modal-title,
        .modal-overlay[id="userCenterModal"] .modal-title,
        .modal-overlay[id="personnelModal"] .modal-title {
            background: linear-gradient(90deg, rgba(88, 101, 242, 0.12) 0%, transparent 30%);
        }
        /* 监控类弹窗标题（AI哨兵） */
        .modal-overlay[id="sentinelModal"] .modal-title {
            background: linear-gradient(90deg, rgba(2, 127, 52, 0.12) 0%, transparent 30%);
        }
        /* 录入类弹窗标题（品种、夜班、换残、完成装车） */
        .modal-overlay[id="varietyModal"] .modal-title,
        .modal-overlay[id="varietyDetailModal"] .modal-title,
        .modal-overlay[id="nightShiftModal"] .modal-title,
        .modal-overlay[id="damageRecordModal"] .modal-title,
        .modal-overlay[id="endLoadingModal"] .modal-title,
        .modal-overlay[id="editQtyModal"] .modal-title,
        .modal-overlay[id="tempOperatorModal"] .modal-title,
        .modal-overlay[id="loadingVarietyModal"] .modal-title {
            background: linear-gradient(90deg, rgba(144, 78, 1, 0.1) 0%, transparent 30%);
        }
        /* 查询类弹窗标题（历史查询、换残查询、历史详情） */
        .modal-overlay[id="historyQueryModal"] .modal-title,
        .modal-overlay[id="damageListModal"] .modal-title,
        .modal-overlay[id="historyDetailModal"] .modal-title,
        .modal-overlay[id="recordFieldDetailModal"] .modal-title {
            background: linear-gradient(90deg, rgba(54, 57, 206, 0.1) 0%, transparent 30%);
        }

        /* ===== 弹窗信息提示框统一色彩 ===== */
        .modal-info-box {
            border-radius: var(--radius-md);
            padding: var(--space-3) var(--space-4);
            margin-bottom: var(--space-4);
            font-size: var(--text-sm);
        }
        .modal-info-box.danger {
            background: rgba(241, 13, 15, 0.08);
            border: 1px solid rgba(241, 13, 15, 0.25);
        }
        .modal-info-box.danger .modal-info-title {
            color: var(--danger);
            font-weight: 600;
        }
        .modal-info-box.warning {
            background: rgba(215, 116, 2, 0.1);
            border: 1px solid rgba(215, 116, 2, 0.3);
        }
        .modal-info-box.warning .modal-info-title {
            color: var(--warning);
            font-weight: 600;
        }
        .modal-info-box.success {
            background: rgba(2, 127, 52, 0.08);
            border: 1px solid rgba(2, 127, 52, 0.25);
        }
        .modal-info-box.success .modal-info-title {
            color: var(--success);
            font-weight: 600;
        }
        .modal-info-box.info {
            background: rgba(54, 57, 206, 0.08);
            border: 1px solid rgba(54, 57, 206, 0.25);
        }
        .modal-info-box.info .modal-info-title {
            color: var(--info);
            font-weight: 600;
        }
        .modal-info-box .modal-info-desc {
            color: var(--text-secondary);
            margin-top: var(--space-1);
        }

        /* ===== 弹窗输入框聚焦色彩增强 ===== */
        .modal input:focus,
        .modal select:focus,
        .modal textarea:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.15);
            outline: none;
        }
        .modal input[type="checkbox"]:focus,
        .modal input[type="radio"]:focus {
            box-shadow: none;
        }

        /* ===== 弹窗关闭按钮增强 ===== */
        .modal-close-btn {
            transition: background 0.2s ease-out, color 0.2s ease-out, transform 0.15s ease-out;
        }
        .modal-close-btn:hover {
            transform: scale(1.08);
        }

        /* ===== 弹窗按钮悬停增强 ===== */
        .modal-btns button {
            transition: opacity 0.15s ease-out, transform 0.1s ease-out, box-shadow 0.2s ease-out;
        }
        .modal-btns button:hover {
            transform: translateY(-1px);
            box-shadow: var(--shadow-sm);
        }
        .modal-btns button:active {
            transform: translateY(0);
        }

        /* ===== 弹窗 body 滚动条美化 ===== */
        .modal-body::-webkit-scrollbar,
        .modal *::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        .modal-body::-webkit-scrollbar-track,
        .modal *::-webkit-scrollbar-track {
            background: transparent;
        }
        .modal-body::-webkit-scrollbar-thumb,
        .modal *::-webkit-scrollbar-thumb {
            background: var(--border-strong);
            border-radius: 4px;
        }
        .modal-body::-webkit-scrollbar-thumb:hover,
        .modal *::-webkit-scrollbar-thumb:hover {
            background: var(--text-muted);
        }

        .modal-tabs {
            display: flex;
            gap: var(--space-2);
            padding: var(--space-4) var(--space-5);
            border-bottom: 1px solid var(--border);
        }
        .modal-tab-btn {
            padding: var(--space-2) var(--space-4);
            border: none;
            border-radius: var(--radius-sm);
            background: rgba(88, 101, 242, 0.1);
            color: var(--text-secondary);
            cursor: pointer;
            transition: background 0.15s ease-out, color 0.15s ease-out;
        }
        .modal-tab-btn:hover {
            background: rgba(24, 62, 254, 0.2);
            color: var(--text-primary);
        }
        .modal-tab-btn.active {
            background: var(--accent);
            color: var(--on-accent, #fff);
        }

        /* ===== Inventory Panel ===== */
        .inventory-panel {
            padding: var(--space-5);
        }
        .required-mark {
            color: var(--danger);
        }
        .inventory-item {
            background: rgba(88, 101, 242, 0.06);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            padding: var(--space-4);
            margin-bottom: var(--space-2);
        }
        .inventory-item-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: var(--space-2);
        }
        .inventory-item-title {
            font-weight: 600;
            color: var(--text-primary);
        }
        .inventory-item-time {
            font-size: var(--text-xs);
            color: var(--text-secondary);
        }
        .inventory-item-details {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: var(--space-2);
            font-size: var(--text-sm);
        }
        .inventory-item-detail {
            display: flex;
            flex-direction: column;
        }
        .inventory-item-detail-label {
            color: var(--text-secondary);
            font-size: 11px;
            margin-bottom: 3px;
        }
        .inventory-item-detail-value {
            color: var(--text-primary);
        }

        /* ===== Variety Modal ===== */
        .variety-modal {
            width: 520px;
            max-width: 90vw;
        }
        .variety-modal-content {
            padding: var(--space-5);
            max-height: 450px;
            overflow-y: auto;
        }
        .variety-modal-list {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-2);
            margin-bottom: var(--space-5);
        }
        .variety-btn {
            padding: var(--space-2) var(--space-4);
            font-size: var(--text-sm);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            background: var(--surface);
            color: var(--text-primary);
            cursor: pointer;
            transition: border-color 0.15s ease-out;
        }
        .variety-btn:hover {
            border-color: var(--accent);
        }
        .variety-btn.selected {
            background: var(--accent);
            border-color: var(--accent);
            color: var(--on-accent, #fff);
        }
        .variety-input {
            width: 100%;
            padding: var(--space-2);
            font-size: var(--text-sm);
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            color: var(--text-primary);
            outline: none;
            margin-bottom: var(--space-4);
        }

        /* ===== Variety Detail Modal ===== */
        .variety-detail-modal {
            width: 580px;
            max-width: 90vw;
        }
        .variety-detail-content {
            padding: var(--space-6);
            max-height: 550px;
            overflow-y: auto;
        }
        .variety-detail-header {
            padding: var(--space-4) var(--space-5);
            background: rgba(88, 101, 242, 0.12);
            border-radius: var(--radius-md);
            margin-bottom: var(--space-5);
            font-size: var(--text-base);
            font-weight: 700;
            color: var(--accent);
            text-align: center;
            border: 1px solid rgba(24, 62, 254, 0.2);
        }
        .variety-detail-content .form-group {
            margin-bottom: var(--space-4);
        }
        .variety-detail-content .form-group label {
            display: block;
            margin-bottom: var(--space-2);
            font-size: var(--text-sm);
            font-weight: 600;
            color: var(--text-primary);
        }
        .variety-detail-content input,
        .variety-detail-content select,
        .variety-detail-content textarea {
            width: 100%;
            padding: var(--space-3) var(--space-4);
            font-size: var(--text-sm);
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            color: var(--text-primary);
            outline: none;
            transition: border-color 0.15s ease-out;
        }
        .variety-detail-content input:focus,
        .variety-detail-content select:focus,
        .variety-detail-content textarea:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.15);
        }
        .variety-detail-content input[type="number"] {
            text-align: center;
        }
        .variety-detail-content .form-row {
            display: flex;
            gap: var(--space-4);
        }
        .variety-detail-content .form-row .form-group {
            flex: 1;
        }

        /* ===== Radio Group ===== */
        .radio-group {
            display: flex;
            gap: var(--space-5);
            padding: var(--space-2) 0;
        }
        .radio-label {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            cursor: pointer;
            font-size: var(--text-sm);
            color: var(--text-primary);
            padding: var(--space-2) var(--space-4);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            transition: border-color 0.15s ease-out, background 0.15s ease-out;
            flex: 1;
            justify-content: center;
        }
        .radio-label:hover {
            border-color: var(--accent);
            background: rgba(24, 62, 254, 0.05);
        }
        .radio-label input[type="radio"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
            accent-color: var(--accent);
        }
        .radio-label:has(input[type="radio"]:checked) {
            border-color: var(--accent);
            background: rgba(88, 101, 242, 0.1);
            font-weight: 600;
        }

        /* ===== Variety Item ===== */
        .variety-item {
            padding: var(--space-4);
            border-bottom: 1px solid var(--border);
            cursor: pointer;
            transition: background 0.15s ease-out;
            border-radius: var(--radius-md);
            margin-bottom: var(--space-2);
            background: rgba(24, 62, 254, 0.03);
        }
        .variety-item:hover {
            background: rgba(24, 62, 254, 0.08);
            border-color: var(--accent);
        }
        .variety-item:last-child {
            margin-bottom: 0;
        }

        /* ===== End Loading Modal ===== */
        .end-loading-modal {
            width: 520px;
            max-width: 95vw;
        }
        .end-loading-content {
            padding: var(--space-5);
            max-height: 70vh;
            overflow-y: auto;
        }
        /* 订单汇总卡片 - 顶部高亮区 */
        .end-loading-summary {
            background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent) 4%, transparent));
            border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
            border-radius: 12px;
            padding: var(--space-4);
            margin-bottom: var(--space-4);
            box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 8%, transparent);
        }
        .summary-row {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-3);
        }
        .summary-item {
            flex: 1;
            min-width: 100px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: var(--space-2) 0;
            background: color-mix(in srgb, var(--bg-elevated) 50%, transparent);
            border-radius: 8px;
        }
        .summary-item i {
            font-size: 18px;
            color: var(--accent);
            margin-bottom: 4px;
        }
        .summary-label {
            font-size: 11px;
            color: var(--text-secondary);
            margin-bottom: 2px;
        }
        .summary-value {
            font-size: 15px;
            font-weight: 700;
            color: var(--text-primary);
        }
        /* 分区标题 */
        .end-loading-section {
            margin-bottom: var(--space-4);
        }
        .section-title {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            font-weight: 700;
            color: var(--text-secondary);
            margin-bottom: 8px;
            padding-left: 4px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .section-title i {
            color: var(--accent);
        }
        /* 品种列表行 */
        .end-loading-variety-list,
        .end-loading-tail-list {
            background: var(--bg-elevated);
            border-radius: 8px;
            padding: 4px 0;
            border: 1px solid var(--border);
        }
        .end-variety-row {
            display: flex;
            align-items: center;
            padding: 8px 12px;
            border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
            transition: background 0.15s ease;
        }
        .end-variety-row:last-child {
            border-bottom: none;
        }
        .end-variety-row:hover {
            background: color-mix(in srgb, var(--accent) 5%, transparent);
        }
        .end-variety-idx {
            width: 22px;
            height: 22px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, var(--accent), var(--accent-hover));
            color: #fff;
            border-radius: 50%;
            font-size: 11px;
            font-weight: 700;
            margin-right: 10px;
            flex-shrink: 0;
        }
        .end-variety-name {
            flex: 1;
            font-size: 13px;
            font-weight: 500;
        }
        .end-variety-qty {
            font-size: 12px;
            color: var(--text-secondary);
            white-space: nowrap;
        }
        .end-variety-qty strong {
            color: var(--accent);
            font-weight: 700;
        }
        .tail-icon {
            color: #f59e0b;
            margin-left: 4px;
            font-size: 11px;
        }
        /* 尾托信息行 */
        .end-tail-row {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 12px;
            font-size: 12px;
            border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
        }
        .end-tail-row:last-child {
            border-bottom: none;
        }
        .end-tail-name {
            flex: 1;
            font-weight: 500;
        }
        .tail-pallet-no {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 2px 8px;
            background: color-mix(in srgb, var(--accent) 10%, transparent);
            border-radius: 4px;
            font-size: 11px;
            color: var(--accent);
        }
        .tail-pallet-missing {
            background: color-mix(in srgb, #ef4444 12%, transparent);
            color: #ef4444;
        }
        .tail-return-qty {
            display: inline-flex;
            align-items: center;
            gap: 2px;
            padding: 2px 8px;
            background: color-mix(in srgb, #f59e0b 12%, transparent);
            border-radius: 4px;
            font-size: 11px;
            color: #b45309;
        }
        .tail-return-zero {
            background: color-mix(in srgb, var(--text-muted) 12%, transparent);
            color: var(--text-muted);
        }
        /* 拣货人选择区 */
        .end-loading-picker {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .end-loading-picker select,
        .end-loading-picker input {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid var(--border);
            border-radius: 6px;
            background: var(--input-bg, var(--bg-elevated));
            color: var(--text-primary);
            font-size: 13px;
        }
        .end-loading-picker select:focus,
        .end-loading-picker input:focus {
            border-color: var(--accent);
            outline: none;
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
        }
        .required-mark {
            color: #ef4444;
            font-weight: 700;
        }
        /* 底部确认提示 */
        .end-loading-footer-hint {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 11px;
            color: var(--text-secondary);
            padding: 10px 12px;
            background: color-mix(in srgb, #f59e0b 8%, transparent);
            border-left: 3px solid #f59e0b;
            border-radius: 4px;
            margin-top: 8px;
        }
        .end-loading-footer-hint i {
            color: #f59e0b;
        }
        .end-loading-empty {
            text-align: center;
            padding: 20px;
            color: var(--text-muted);
            font-size: 12px;
        }

        /* ===== Temp Operator Modal ===== */
        .temp-operator-modal {
            width: 500px;
        }
        .temp-operator-content {
            padding: var(--space-5);
            max-height: 500px;
            overflow-y: auto;
        }
        .temp-operator-list {
            margin-bottom: var(--space-5);
            padding-bottom: var(--space-5);
            border-bottom: 1px solid var(--border);
        }
        .temp-operator-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--space-3) var(--space-4);
            background: rgba(24, 62, 254, 0.05);
            border-radius: var(--radius-sm);
            margin-bottom: var(--space-2);
            border: 1px solid rgba(88, 101, 242, 0.15);
        }
        .temp-operator-item:last-child {
            margin-bottom: 0;
        }
        .temp-operator-item .info {
            flex: 1;
        }
        .temp-operator-item .name {
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 3px;
        }
        .temp-operator-item .phone {
            font-size: var(--text-xs);
            color: var(--text-secondary);
        }
        .temp-operator-item .remark {
            font-size: 11px;
            color: var(--text-secondary);
            margin-top: 3px;
            font-style: italic;
        }
        .temp-operator-item .remove-btn {
            padding: var(--space-1) var(--space-2);
            font-size: var(--text-xs);
            background: rgba(241, 13, 15, 0.1);
            color: var(--danger);
            border: none;
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: background 0.15s ease-out;
        }
        .temp-operator-item .remove-btn:hover {
            background: rgba(241, 13, 15, 0.2);
        }
        .temp-operator-form {
            margin-top: var(--space-2);
        }
        .temp-operator-form .form-row {
            display: flex;
            gap: var(--space-4);
            margin-bottom: var(--space-4);
        }
        .temp-operator-form .form-item {
            flex: 1;
        }
        .temp-operator-form .form-item.full-width {
            flex: 1 1 100%;
        }
        .temp-operator-form .form-item label {
            display: block;
            font-size: var(--text-sm);
            color: var(--text-secondary);
            margin-bottom: var(--space-2);
        }
        .temp-operator-form .form-item .required {
            color: var(--danger);
        }
        .temp-operator-form .form-item input {
            width: 100%;
            padding: var(--space-2);
            font-size: var(--text-sm);
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            color: var(--text-primary);
            outline: none;
            transition: border-color 0.15s ease-out;
        }
        .temp-operator-form .form-item input:focus {
            border-color: var(--accent);
        }
        .temp-operator-form .form-item input::placeholder {
            color: var(--text-secondary);
        }
        .temp-operator-form-simple {
            margin-top: var(--space-4);
            padding-top: var(--space-4);
            border-top: 1px solid var(--border);
        }

        /* ===== Personnel Modal ===== */
        .personnel-modal {
            width: 500px;
            max-height: 80vh;
        }
        .personnel-content {
            max-height: calc(80vh - 120px);
            overflow-y: auto;
        }
        .personnel-tabs {
            display: flex;
            gap: var(--space-2);
            margin-bottom: var(--space-5);
            border-bottom: 1px solid var(--border);
        }
        .personnel-tab-btn {
            flex: 1;
            padding: var(--space-2);
            border: none;
            background: transparent;
            color: var(--text-secondary);
            font-size: var(--text-sm);
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: color 0.15s ease-out, border-color 0.15s ease-out;
        }
        .personnel-tab-btn.active {
            color: var(--accent);
            border-bottom-color: var(--accent);
            font-weight: 600;
        }
        .personnel-tab-panel {
            display: none;
        }
        .personnel-tab-panel.active {
            display: block;
        }
        .personnel-list {
            min-height: 100px;
            max-height: 200px;
            overflow-y: auto;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            padding: var(--space-2);
            margin-bottom: var(--space-4);
        }
        .personnel-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--space-2);
            margin-bottom: var(--space-1);
            background: var(--surface);
            border-radius: var(--radius-sm);
        }
        .personnel-item:last-child {
            margin-bottom: 0;
        }
        .personnel-item-info {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            flex: 1;
        }
        .personnel-item-name {
            font-size: var(--text-sm);
            font-weight: 500;
        }
        .personnel-item-empno {
            font-size: 11px;
            padding: 2px 6px;
            background: var(--accent);
            color: var(--on-accent, #fff);
            border-radius: var(--radius-sm);
        }
        .personnel-item-position {
            font-size: 11px;
            padding: 2px 6px;
            background: var(--success);
            color: #fff;
            border-radius: var(--radius-sm);
        }
        .personnel-item-remove {
            padding: var(--space-1) var(--space-2);
            background: var(--danger);
            color: #fff;
            border: none;
            border-radius: var(--radius-sm);
            cursor: pointer;
            font-size: var(--text-xs);
            transition: opacity 0.15s ease-out;
        }
        .personnel-item-remove:hover {
            opacity: 0.8;
        }
        .personnel-search-bar {
            margin-bottom: var(--space-2);
        }
        .personnel-search-bar input {
            width: 100%;
            padding: var(--space-2);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            background: var(--surface);
            color: var(--text-primary);
            font-size: var(--text-sm);
        }
        .personnel-input {
            flex: 1;
            padding: var(--space-2);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            background: var(--surface);
            color: var(--text-primary);
        }
        .personnel-select {
            padding: var(--space-2);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            background: var(--surface);
            color: var(--text-primary);
            min-width: 120px;
        }
        .personnel-add-form {
            display: flex;
            flex-direction: column;
            gap: var(--space-2);
        }
        .personnel-add-form .form-row {
            display: flex;
            gap: var(--space-2);
        }
        .personnel-add-form input {
            flex: 1;
            padding: var(--space-2);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            font-size: var(--text-sm);
            background: var(--surface);
            color: var(--text-primary);
        }
        .personnel-add-form input:focus {
            outline: none;
            border-color: var(--accent);
        }
        .personnel-feedback {
            margin-top: var(--space-4);
            padding: var(--space-4);
            background: rgba(24, 62, 254, 0.08);
            border-radius: var(--radius-md);
            border: 1px solid var(--accent);
            display: none;
        }
        .personnel-feedback.show {
            display: block;
            animation: slideIn 0.3s ease;
        }
        .personnel-feedback .success-header {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            color: var(--success);
            font-size: var(--text-sm);
            font-weight: 600;
            margin-bottom: var(--space-2);
        }
        .personnel-feedback .success-header i {
            font-size: 18px;
        }
        .personnel-feedback .detail-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--space-2);
        }
        .personnel-feedback .detail-item {
            display: flex;
            justify-content: space-between;
            padding: var(--space-1) var(--space-2);
            background: rgba(0, 0, 0, 0.1);
            border-radius: var(--radius-sm);
            font-size: var(--text-xs);
        }
        .personnel-feedback .detail-item .label {
            color: var(--text-secondary);
        }
        .personnel-feedback .detail-item .value {
            color: var(--text-primary);
            font-weight: 500;
        }
        .personnel-permissions-note {
            margin: var(--space-3) 0;
            padding: var(--space-3) var(--space-4);
            background: rgba(24, 62, 254, 0.08);
            border: 1px solid rgba(24, 62, 254, 0.2);
            border-radius: var(--radius-md);
            color: var(--info);
            font-size: var(--text-sm);
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }
        .personnel-permissions-note i {
            color: var(--accent);
        }

        /* ===== 人员管理弹窗：主题自适应美化 =====
           使用 var(--xxx) 主题变量，主题切换时自动同步深空/素白/其他风格 */

        /* 弹窗主容器：圆角 + 主题色阴影光晕 */
        .modal-overlay[id="personnelModal"] .modal.personnel-modal {
            width: 580px;
            max-height: 86vh;
            border-radius: 18px;
            position: relative;
            overflow: hidden;
            background: var(--card-bg);
            border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border-color));
            box-shadow:
                0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent),
                0 24px 60px color-mix(in srgb, var(--bg-primary) 60%, transparent),
                0 0 80px color-mix(in srgb, var(--accent) 14%, transparent);
            backdrop-filter: blur(20px);
        }
        /* 顶部流光描边（accent色光带） */
        .modal-overlay[id="personnelModal"] .modal.personnel-modal::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg,
                transparent 0%,
                color-mix(in srgb, var(--accent) 100%, transparent) 30%,
                color-mix(in srgb, var(--cyan) 100%, transparent) 50%,
                color-mix(in srgb, var(--accent) 100%, transparent) 70%,
                transparent 100%);
            pointer-events: none;
            z-index: 5;
        }
        /* 顶部辐射光晕 */
        .modal-overlay[id="personnelModal"] .modal.personnel-modal::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 90px;
            background: radial-gradient(ellipse at top,
                color-mix(in srgb, var(--accent) 18%, transparent) 0%,
                transparent 70%);
            pointer-events: none;
        }

        /* 弹窗标题：渐变背景 + 发光 */
        .modal-overlay[id="personnelModal"] .modal-title {
            position: relative;
            z-index: 2;
            padding: 18px 22px;
            font-size: 17px;
            font-weight: 600;
            letter-spacing: 0.5px;
            color: var(--text-primary);
            background: linear-gradient(90deg,
                color-mix(in srgb, var(--accent) 18%, transparent) 0%,
                color-mix(in srgb, var(--cyan) 10%, transparent) 50%,
                transparent 100%);
            border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border-color));
            text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 30%, transparent);
        }
        .modal-overlay[id="personnelModal"] .modal-title i {
            color: var(--accent);
            margin-left: 6px;
            text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 50%, transparent);
        }
        .modal-overlay[id="personnelModal"] .modal-close-btn {
            background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
            border: 1px solid var(--border-color);
            color: var(--text-secondary);
            border-radius: 8px;
            width: 30px;
            height: 30px;
            transition: all 0.2s;
        }
        .modal-overlay[id="personnelModal"] .modal-close-btn:hover {
            background: color-mix(in srgb, var(--danger) 25%, transparent);
            border-color: color-mix(in srgb, var(--danger) 60%, var(--border-color));
            color: var(--danger);
            transform: rotate(90deg);
        }

        /* 内容区 */
        .modal-overlay[id="personnelModal"] .personnel-content {
            position: relative;
            z-index: 1;
            max-height: calc(86vh - 140px);
            padding: 18px 22px;
        }

        /* Tab 栏：胶囊式按钮 */
        .modal-overlay[id="personnelModal"] .personnel-tabs {
            gap: 6px;
            margin-bottom: 18px;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 0;
        }
        .modal-overlay[id="personnelModal"] .personnel-tab-btn {
            padding: 10px 18px;
            color: var(--text-secondary);
            font-size: 13px;
            border-radius: 10px 10px 0 0;
            border-bottom: 2px solid transparent;
            margin-bottom: -1px;
            position: relative;
            transition: all 0.2s;
            font-weight: 500;
        }
        .modal-overlay[id="personnelModal"] .personnel-tab-btn:hover {
            color: var(--text-primary);
            background: color-mix(in srgb, var(--accent) 10%, transparent);
        }
        .modal-overlay[id="personnelModal"] .personnel-tab-btn.active {
            color: var(--text-primary);
            border-bottom-color: var(--accent);
            background: color-mix(in srgb, var(--accent) 15%, transparent);
            text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 50%, transparent);
            font-weight: 600;
        }

        /* 搜索框：圆角 + 焦点光晕 */
        .modal-overlay[id="personnelModal"] .personnel-search-bar input {
            width: 100%;
            background: var(--input-bg);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 10px 14px;
            color: var(--text-primary);
            font-size: 13px;
            transition: all 0.2s;
        }
        .modal-overlay[id="personnelModal"] .personnel-search-bar input::placeholder {
            color: var(--text-muted);
        }
        .modal-overlay[id="personnelModal"] .personnel-search-bar input:focus {
            outline: none;
            border-color: var(--accent);
            background: var(--input-bg-hover);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
        }

        /* 人员列表：玻璃容器 */
        .modal-overlay[id="personnelModal"] .personnel-list {
            background: color-mix(in srgb, var(--bg-secondary) 50%, transparent);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 8px;
            margin-bottom: 16px;
            min-height: 80px;
            max-height: 260px;
            overflow-y: auto;
        }

        /* 人员卡片：浮起交互 */
        .modal-overlay[id="personnelModal"] .personnel-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 12px;
            margin-bottom: 6px;
            background: var(--surface);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            transition: all 0.2s;
        }
        .modal-overlay[id="personnelModal"] .personnel-item:hover {
            background: var(--card-bg-hover);
            border-color: color-mix(in srgb, var(--accent) 45%, var(--border-color));
            transform: translateX(2px);
            box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 18%, transparent);
        }
        .modal-overlay[id="personnelModal"] .personnel-item:last-child {
            margin-bottom: 0;
        }
        .modal-overlay[id="personnelModal"] .personnel-item-info {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            flex: 1;
        }
        .modal-overlay[id="personnelModal"] .personnel-item-name {
            color: var(--text-primary);
            font-size: 14px;
            font-weight: 500;
        }
        .modal-overlay[id="personnelModal"] .personnel-item-empno {
            background: linear-gradient(135deg,
                var(--accent) 0%,
                var(--cyan) 100%);
            color: #fff;
            padding: 3px 9px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 500;
            box-shadow: 0 1px 4px color-mix(in srgb, var(--accent) 40%, transparent);
        }
        .modal-overlay[id="personnelModal"] .personnel-item-position {
            background: color-mix(in srgb, var(--bg-elevated) 60%, transparent);
            color: var(--text-secondary);
            border: 1px solid var(--border-color);
            padding: 3px 9px;
            border-radius: 6px;
            font-size: 11px;
        }
        .modal-overlay[id="personnelModal"] .personnel-item-remove {
            background: color-mix(in srgb, var(--danger) 18%, transparent);
            color: var(--danger);
            border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--border-color));
            padding: 5px 11px;
            border-radius: 6px;
            font-size: 11px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .modal-overlay[id="personnelModal"] .personnel-item-remove:hover {
            background: var(--danger);
            color: #fff;
            border-color: var(--danger);
            transform: scale(1.05);
        }

        /* 录入表单：玻璃面板 */
        .modal-overlay[id="personnelModal"] .personnel-add-form {
            display: flex;
            flex-direction: column;
            gap: 10px;
            background: color-mix(in srgb, var(--bg-secondary) 50%, transparent);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 14px;
        }
        .modal-overlay[id="personnelModal"] .personnel-add-form .form-row {
            display: flex;
            gap: var(--space-2);
        }
        .modal-overlay[id="personnelModal"] .personnel-input,
        .modal-overlay[id="personnelModal"] .personnel-select {
            flex: 1;
            padding: 9px 12px;
            background: var(--input-bg);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            color: var(--text-primary);
            font-size: 13px;
            transition: all 0.2s;
        }
        .modal-overlay[id="personnelModal"] .personnel-input:focus,
        .modal-overlay[id="personnelModal"] .personnel-select:focus {
            outline: none;
            border-color: var(--accent);
            background: var(--input-bg-hover);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
        }

        /* 权限提示 */
        .modal-overlay[id="personnelModal"] .personnel-permissions-note {
            margin: var(--space-3) 0;
            padding: 10px 14px;
            background: color-mix(in srgb, var(--info) 12%, transparent);
            border: 1px solid color-mix(in srgb, var(--info) 30%, var(--border-color));
            border-radius: 10px;
            color: var(--text-secondary);
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }
        .modal-overlay[id="personnelModal"] .personnel-permissions-note i {
            color: var(--accent);
        }

        /* 添加按钮：渐变 + 阴影 */
        .modal-overlay[id="personnelModal"] .btn-confirm-add {
            padding: 10px 24px;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0.5px;
            background: linear-gradient(135deg, var(--accent) 0%, var(--cyan) 100%);
            color: #fff;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s;
            align-self: flex-start;
            box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent);
        }
        .modal-overlay[id="personnelModal"] .btn-confirm-add:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 55%, transparent);
            filter: brightness(1.1);
        }

        /* 反馈框：成功色 */
        .modal-overlay[id="personnelModal"] .personnel-feedback {
            margin-top: var(--space-4);
            padding: 14px 16px;
            background: color-mix(in srgb, var(--success) 12%, transparent);
            border: 1px solid color-mix(in srgb, var(--success) 40%, var(--border-color));
            border-radius: 12px;
            display: none;
        }
        .modal-overlay[id="personnelModal"] .personnel-feedback.show {
            display: block;
            animation: personnelFeedbackIn 0.3s ease;
        }
        @keyframes personnelFeedbackIn {
            from { opacity: 0; transform: translateY(-8px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .modal-overlay[id="personnelModal"] .personnel-feedback .success-header {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            color: var(--success);
            font-size: 13px;
            font-weight: 600;
            margin-bottom: var(--space-2);
        }
        .modal-overlay[id="personnelModal"] .personnel-feedback .success-header i {
            font-size: 18px;
        }
        .modal-overlay[id="personnelModal"] .personnel-feedback .detail-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--space-2);
        }
        .modal-overlay[id="personnelModal"] .personnel-feedback .detail-item {
            display: flex;
            justify-content: space-between;
            padding: 5px 10px;
            background: color-mix(in srgb, var(--bg-elevated) 60%, transparent);
            border-radius: 6px;
            font-size: 12px;
        }
        .modal-overlay[id="personnelModal"] .personnel-feedback .detail-item .label {
            color: var(--text-muted);
        }
        .modal-overlay[id="personnelModal"] .personnel-feedback .detail-item .value {
            color: var(--text-primary);
            font-weight: 500;
        }

        /* 底部按钮区 */
        .modal-overlay[id="personnelModal"] .modal-btns {
            border-top: 1px solid var(--border-color);
            padding: 14px 22px;
            background: color-mix(in srgb, var(--bg-secondary) 60%, transparent);
        }
        .modal-overlay[id="personnelModal"] .modal-btns .cancel {
            background: color-mix(in srgb, var(--bg-elevated) 70%, transparent);
            border: 1px solid var(--border-color);
            color: var(--text-secondary);
            border-radius: 10px;
            padding: 8px 22px;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .modal-overlay[id="personnelModal"] .modal-btns .cancel:hover {
            background: color-mix(in srgb, var(--accent) 18%, transparent);
            border-color: color-mix(in srgb, var(--accent) 50%, var(--border-color));
            color: var(--text-primary);
        }

        /* 滚动条美化（主题色渐变） */
        .modal-overlay[id="personnelModal"] .personnel-list::-webkit-scrollbar,
        .modal-overlay[id="personnelModal"] .personnel-content::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        .modal-overlay[id="personnelModal"] .personnel-list::-webkit-scrollbar-track,
        .modal-overlay[id="personnelModal"] .personnel-content::-webkit-scrollbar-track {
            background: color-mix(in srgb, var(--bg-elevated) 40%, transparent);
            border-radius: 3px;
        }
        .modal-overlay[id="personnelModal"] .personnel-list::-webkit-scrollbar-thumb,
        .modal-overlay[id="personnelModal"] .personnel-content::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg,
                color-mix(in srgb, var(--accent) 70%, var(--cyan)) 0%,
                color-mix(in srgb, var(--cyan) 70%, var(--accent)) 100%);
            border-radius: 3px;
        }
        .modal-overlay[id="personnelModal"] .personnel-list::-webkit-scrollbar-thumb:hover,
        .modal-overlay[id="personnelModal"] .personnel-content::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg,
                var(--accent) 0%,
                var(--cyan) 100%);
        }

        /* ===== Form Row Inline ===== */
        .form-row-inline {
            display: flex;
            gap: var(--space-2);
            align-items: center;
        }
        .form-row-inline input {
            flex: 1;
            padding: var(--space-3) var(--space-4);
            font-size: var(--text-sm);
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            color: var(--text-primary);
            outline: none;
            transition: border-color 0.15s ease-out;
        }
        .form-row-inline input:focus {
            border-color: var(--accent);
        }
        .form-row-inline input::placeholder {
            color: var(--text-secondary);
        }
        .btn-confirm-add {
            padding: var(--space-3) var(--space-5);
            font-size: var(--text-sm);
            font-weight: 600;
            background: var(--success);
            color: #fff;
            border: none;
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: transform 0.15s ease-out, opacity 0.15s ease-out;
            white-space: nowrap;
        }
        .btn-confirm-add:hover {
            transform: translateY(-1px);
            opacity: 0.9;
        }

        /* ===== Form Group ===== */
        .form-group {
            margin-bottom: var(--space-4);
        }
        .form-group label {
            display: block;
            font-size: var(--text-sm);
            color: var(--text-secondary);
            margin-bottom: var(--space-2);
        }
        .form-group select, .form-group input {
            width: 100%;
            padding: var(--space-2);
            font-size: var(--text-sm);
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            color: var(--text-primary);
            outline: none;
        }
        .form-group select option {
            background: var(--option-bg);
            color: var(--option-color);
        }

        /* ===== Quantity Conversion ===== */
        .quantity-conversion .quantity-inputs {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            flex-wrap: wrap;
        }
        .quantity-conversion .qty-input-item {
            flex: 1;
            min-width: 80px;
            position: relative;
        }
        .quantity-conversion .qty-input-item input {
            padding-right: 30px;
        }
        .quantity-conversion .qty-label {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            font-size: var(--text-xs);
            color: var(--text-secondary);
        }
        .quantity-conversion .conversion-arrow {
            font-size: 18px;
            color: var(--accent);
            font-weight: bold;
        }
        .quantity-conversion .conversion-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: var(--space-2);
            font-size: var(--text-xs);
        }
        .quantity-conversion .conversion-note {
            color: var(--text-secondary);
        }

        /* ===== Damage Record Modal ===== */
        .damage-record-modal {
            width: 520px;
            display: flex;
            flex-direction: column;
        }
        .damage-record-modal .modal-title {
            flex-shrink: 0;
        }
        .damage-record-modal .modal-btns {
            flex-shrink: 0;
        }
        .damage-record-content {
            padding: var(--space-5);
            overflow-y: auto;
            flex: 1;
            min-height: 0;
        }
        .damage-rate-info {
            display: flex;
            gap: var(--space-4);
            margin-bottom: var(--space-4);
            padding: var(--space-4);
            background: rgba(0, 0, 0, 0.06);
            border-radius: var(--radius-md);
            border: 1px solid var(--border);
        }
        .damage-rate-item {
            flex: 1;
            text-align: center;
        }
        .damage-rate-label {
            display: block;
            font-size: var(--text-xs);
            color: var(--text-secondary);
            margin-bottom: var(--space-1);
        }
        .damage-rate-value {
            display: block;
            font-size: var(--text-2xl);
            font-weight: 700;
            color: var(--danger);
        }
        .damage-variety-qty-info {
            padding: var(--space-2) var(--space-3);
            margin-bottom: var(--space-3);
            background: rgba(24, 62, 254, 0.04);
            border: 1px solid rgba(88, 101, 242, 0.1);
            border-radius: var(--radius-sm);
            font-size: var(--text-sm);
            color: var(--text-secondary);
        }
        .damage-variety-qty-info strong {
            color: var(--text-primary);
        }
        .edit-qty-variety-info {
            padding: var(--space-3) var(--space-4);
            margin-bottom: var(--space-4);
            background: rgba(24, 62, 254, 0.04);
            border: 1px solid rgba(88, 101, 242, 0.1);
            border-left: 3px solid var(--accent);
            border-radius: var(--radius-sm);
            font-size: var(--text-sm);
            color: var(--text-secondary);
        }
        .edit-qty-variety-info .edit-qty-vname {
            font-weight: 700;
            color: var(--accent);
            display: block;
            margin-bottom: var(--space-1);
        }
        .edit-qty-variety-info .edit-qty-vdetail {
            font-size: var(--text-xs);
            line-height: 1.6;
        }
        .edit-qty-modal {
            display: flex;
            flex-direction: column;
        }
        .edit-qty-modal .modal-title {
            flex-shrink: 0;
        }
        .edit-qty-modal .modal-btns {
            flex-shrink: 0;
        }
        .edit-qty-modal .modal-body {
            overflow-y: auto;
            flex: 1;
            min-height: 0;
        }
        .damage-variety-list {
            display: flex;
            flex-direction: column;
            gap: 2px;
            width: 100%;
            margin-top: 2px;
            padding-left: 18px;
        }
        .damage-variety-item {
            font-size: var(--text-xs, 11px);
            line-height: 1.6;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: 4px;
            flex-wrap: wrap;
        }
        .damage-variety-name {
            font-weight: 600;
            color: var(--text-primary);
        }
        .damage-variety-spec {
            font-size: 10px;
            padding: 1px 4px;
            border-radius: 3px;
            background: rgba(88, 101, 242, 0.1);
            color: var(--text-secondary);
            margin: 0 2px;
        }
        .damage-variety-rate {
            font-weight: 700;
            color: #FE090C;
        }
        .damage-variety-detail {
            color: var(--text-muted, #94a3b8);
            font-size: 10px;
        }
        [data-theme="light"] .damage-record-content {
            background: #F7F5F0;
        }
        [data-theme="light"] .damage-record-content .form-group label {
            color: #2B2620;
            font-weight: 600;
        }
        [data-theme="light"] .damage-record-content input,
        [data-theme="light"] .damage-record-content select {
            background: #ffffff;
            border: 1px solid #D8D0BE;
            color: #2B2620;
        }
        [data-theme="light"] .damage-record-content input:focus,
        [data-theme="light"] .damage-record-content select:focus {
            border-color: #96691F;
            box-shadow: 0 0 0 3px rgba(150, 105, 31, 0.14);
        }
        [data-theme="light"] .damage-total {
            color: #B42318;
            border-top: 1px solid #E2DCCE;
            background: #FBF0EC;
        }

        /* ===== Qty Input Group ===== */
        .qty-input-group {
            display: flex;
            gap: var(--space-2);
        }
        .qty-input-group input {
            width: 80px;
            padding: var(--space-2);
            font-size: var(--text-sm);
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            color: var(--text-primary);
            text-align: center;
            outline: none;
            flex-shrink: 0;
        }
        .qty-input-group span {
            display: flex;
            align-items: center;
            font-size: var(--text-sm);
            color: var(--text-secondary);
            min-width: 40px;
            flex-shrink: 0;
        }
        .damage-total {
            font-size: var(--text-base);
            font-weight: 600;
            color: var(--danger);
            margin-top: var(--space-2);
            padding: var(--space-3);
            border-top: 1px solid var(--border);
            background: rgba(241, 13, 15, 0.05);
            border-radius: var(--radius-sm);
        }
        .damage-breakdown {
            font-size: var(--text-sm);
            color: var(--text-secondary);
            margin-top: var(--space-1);
        }
        .damage-qty-inputs {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-2);
        }
        .damage-qty-inputs .qty-input-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--space-1);
            padding: var(--space-2);
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
        }
        .damage-qty-inputs .qty-input-wrapper.highlight {
            background: rgba(241, 13, 15, 0.08);
            border-color: var(--danger);
        }
        .damage-qty-inputs input {
            width: 70px;
            padding: var(--space-2);
            font-size: var(--text-sm);
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            color: var(--text-primary);
            text-align: center;
            outline: none;
        }
        .damage-qty-inputs input:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.15);
        }
        .damage-qty-inputs .qty-input-wrapper.highlight input {
            border-color: var(--danger);
            background: rgba(241, 13, 15, 0.05);
            color: var(--danger);
            font-weight: 600;
        }
        .damage-qty-inputs span {
            font-size: var(--text-xs);
            color: var(--text-secondary);
        }
        .damage-qty-inputs .qty-input-wrapper.highlight span {
            color: var(--danger);
            font-weight: 600;
        }

        /* ===== History Query Modal ===== */
        .history-query-modal {
            width: 95%;
            max-height: 90vh;
        }
        .history-query-container {
            display: flex;
            flex-direction: column;
            height: calc(90vh - 100px);
        }
        .history-filter-section {
            padding: var(--space-5);
            border-bottom: 1px solid var(--border);
        }
        .filter-row {
            display: flex;
            gap: var(--space-4);
            flex-wrap: wrap;
            align-items: flex-end;
        }
        .filter-item {
            display: flex;
            flex-direction: column;
            gap: var(--space-1);
        }
        .filter-item label {
            font-size: var(--text-xs);
            color: var(--text-secondary);
        }
        .filter-item input, .filter-item select {
            padding: var(--space-2) var(--space-3);
            font-size: var(--text-sm);
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            color: var(--text-primary);
            outline: none;
            min-width: 120px;
        }
        .filter-item select option {
            background: var(--option-bg);
            color: var(--option-color);
        }
        .history-list-section {
            flex: 1;
            overflow-y: auto;
            padding: var(--space-5);
        }
        .history-query-table-wrapper {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        .history-query-table {
            width: 100%;
            min-width: 1280px;
            border-collapse: collapse;
            font-size: var(--text-xs);
            table-layout: fixed;
        }
        .history-query-table th, .history-query-table td {
            padding: var(--space-2);
            text-align: left;
            border-bottom: 1px solid var(--border);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .history-query-table th {
            font-weight: 600;
            color: var(--text-secondary);
            background: var(--bg-elevated);
        }
        .history-query-table th.sortable {
            cursor: pointer;
        }
        .history-query-table th.sortable:hover {
            background: rgba(24, 62, 254, 0.08);
        }
        .history-query-table tr:hover {
            background: rgba(24, 62, 254, 0.05);
        }
        .history-pagination {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: var(--space-4);
            padding-top: var(--space-4);
            border-top: 1px solid var(--border);
        }
        .pagination-info {
            font-size: var(--text-xs);
            color: var(--text-secondary);
        }
        .pagination-controls {
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }
        .page-indicator {
            font-size: var(--text-sm);
            color: var(--text-secondary);
        }
        .page-size-select {
            padding: var(--space-1) var(--space-2);
            font-size: var(--text-xs);
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            color: var(--text-primary);
            outline: none;
        }
        .page-size-select option {
            background: var(--option-bg);
            color: var(--option-color);
        }

        /* ===== History Detail Modal ===== */
        .history-detail-modal {
            width: 400px;
            display: flex;
            flex-direction: column;
        }
        .history-detail-content {
            padding: var(--space-5);
            overflow-y: auto;
            flex: 1;
            min-height: 0;
        }
        .detail-row {
            display: flex;
            padding: var(--space-2) 0;
            border-bottom: 1px dashed var(--border);
        }
        .detail-label {
            width: 100px;
            font-size: var(--text-sm);
            color: var(--text-secondary);
        }
        .detail-section-title {
            padding: var(--space-4) 0 var(--space-2) 0;
            font-size: var(--text-sm);
            font-weight: 600;
            color: var(--accent);
            border-bottom: 2px solid var(--accent);
            margin-bottom: var(--space-2);
        }
        .detail-value {
            flex: 1;
            font-size: var(--text-sm);
            color: var(--text-primary);
        }

        /* ===== Damage List Modal — Redesigned ===== */
        .damage-list-modal { width: 94%; max-height: 94vh; }
        .damage-list-container { display: flex; flex-direction: column; height: calc(94vh - 100px); overflow: hidden; }

        /* --- Toolbar: time dimension tabs + actions --- */
        .dmg-toolbar {
            display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
            padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--border); flex-shrink: 0;
            background: var(--bg-secondary);
        }
        [data-theme="light"] .dmg-toolbar { background: #F7F5F0; border-bottom-color: #E2DCCE; }
        .dmg-time-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; }
        .dmg-time-btn {
            display: inline-flex; align-items: center; gap: 5px;
            padding: 6px 14px; border-radius: 20px; border: 1.5px solid var(--border);
            background: transparent; color: var(--text-secondary); font-size: var(--text-sm); font-weight: 500;
            cursor: pointer; transition: all 0.2s ease; white-space: nowrap;
        }
        .dmg-time-btn:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
        .dmg-time-btn.active {
            background: var(--accent); color: var(--on-accent, #fff); border-color: var(--accent);
            box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent);
        }
        [data-theme="light"] .dmg-time-btn { border-color: #D8D0BE; color: #5A5245; }
        [data-theme="light"] .dmg-time-btn:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
        [data-theme="light"] .dmg-time-btn.active { background: #916318; color: #fff; border-color: #916318; }
        .dmg-toolbar-actions { display: flex; gap: var(--space-2); flex-shrink: 0; }

        /* --- Filter row --- */
        .dmg-filter-row {
            display: flex; align-items: center; gap: var(--space-3);
            padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--border); flex-shrink: 0;
        }
        [data-theme="light"] .dmg-filter-row { background: #fff; border-bottom-color: #E2DCCE; }
        .dmg-filter-group { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; flex: 1; }
        .dmg-filter-item { display: flex; align-items: center; gap: var(--space-1); }
        .dmg-filter-item input, .dmg-filter-item select {
            padding: 5px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border);
            background: var(--bg-primary); color: var(--text-primary); font-size: var(--text-sm);
            transition: border-color 0.15s;
        }
        .dmg-filter-item input { width: 120px; }
        .dmg-filter-item input:focus, .dmg-filter-item select:focus {
            outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
        }
        .dmg-filter-sep { color: var(--text-muted); font-size: var(--text-sm); }
        [data-theme="light"] .dmg-filter-item input,
        [data-theme="light"] .dmg-filter-item select { background: #fff; border-color: #D8D0BE; color: #2B2620; }
        .dmg-filter-reset {
            width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1px solid var(--border);
            background: transparent; color: var(--text-muted); cursor: pointer; display: flex;
            align-items: center; justify-content: center; transition: all 0.15s; flex-shrink: 0;
        }
        .dmg-filter-reset:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

        /* --- Stats section (keep existing) --- */
        .damage-stats-section {
            display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3);
            padding: var(--space-3) var(--space-5); background: var(--bg-secondary);
            border-bottom: 1px solid var(--border); flex-shrink: 0;
        }
        [data-theme="light"] .damage-stats-section { background: color-mix(in srgb, var(--accent) 5%, transparent); border-bottom-color: #E2DCCE; }
        .damage-stat-item {
            text-align: center; padding: var(--space-2) var(--space-2);
            background: rgba(0, 0, 0, 0.1); border-radius: var(--radius-md);
            border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        [data-theme="light"] .damage-stat-item { background: #fff; border-color: #E2DCCE; box-shadow: 0 1px 2px rgba(120, 100, 70, 0.06); }
        .damage-stat-item:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
        .damage-stat-item.highlight { border-color: color-mix(in srgb, var(--danger) 40%, transparent); background: color-mix(in srgb, var(--danger) 8%, transparent); }
        [data-theme="light"] .damage-stat-item.highlight { background: color-mix(in srgb, var(--danger) 6%, transparent); }
        .damage-stat-item.highlight .damage-stat-value { color: var(--danger); }
        .damage-stat-value { font-size: var(--text-lg); font-weight: 700; color: var(--accent); line-height: 1.2; }
        [data-theme="light"] .damage-stat-value { color: #96691F; }
        .damage-stat-label { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
        [data-theme="light"] .damage-stat-label { color: #6B6152; }

        /* --- Table section --- */
        .damage-list-section { flex: 1; overflow: hidden; padding: 0; display: flex; flex-direction: column; }
        .dmg-table-wrapper { flex: 1; overflow: auto; padding: 0 var(--space-5); }
        .damage-query-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
        .damage-query-table th, .damage-query-table td {
            padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap;
        }
        .damage-query-table th {
            font-weight: 600; font-size: var(--text-xs); color: var(--text-secondary);
            background: var(--bg-elevated); text-transform: uppercase; letter-spacing: 0.3px;
        }
        [data-theme="light"] .damage-query-table th { background: #96691F; color: #fff; }
        .damage-query-table td { background: transparent; color: var(--text-primary); }
        [data-theme="light"] .damage-query-table td { background: #fff; }

        /* Sortable column headers */
        .dmg-col-sortable { cursor: pointer; transition: color 0.15s; }
        .dmg-col-sortable:hover { color: var(--accent); }
        [data-theme="light"] .dmg-col-sortable:hover { color: #F3E3C3; }
        .dmg-sort-icon::after { content: ''; display: inline-block; width: 0; height: 0; margin-left: 4px; vertical-align: middle; }
        .dmg-col-sortable.asc .dmg-sort-icon::after { content: '▲'; font-size: 9px; color: var(--accent); }
        .dmg-col-sortable.desc .dmg-sort-icon::after { content: '▼'; font-size: 9px; color: var(--accent); }
        [data-theme="light"] .dmg-col-sortable.asc .dmg-sort-icon::after,
        [data-theme="light"] .dmg-col-sortable.desc .dmg-sort-icon::after { color: #F3E3C3; }

        /* Column styling */
        .dmg-col-no { width: 44px; text-align: center; color: var(--text-muted); }
        .damage-query-table .dmg-col-num { text-align: right; }
        .damage-query-table td:nth-child(1) { text-align: center; color: var(--text-muted); font-size: var(--text-xs); }
        .damage-query-table td:nth-child(5) { font-weight: 600; color: var(--accent); }
        [data-theme="light"] .damage-query-table td:nth-child(5) { color: #96691F; }
        .damage-query-table td:nth-child(11) { font-weight: 700; color: var(--primary); }
        .damage-query-table td:nth-child(12) { font-weight: 700; color: var(--danger); }
        [data-theme="light"] .damage-query-table td:nth-child(12) { color: #B42318; }

        /* Row hover + zebra */
        .damage-query-table tbody tr { transition: background 0.12s; }
        .damage-query-table tbody tr:nth-child(even) td { background: rgba(0, 0, 0, 0.04); }
        [data-theme="light"] .damage-query-table tbody tr:nth-child(even) td { background: #F7F5F0; }
        .damage-query-table tbody tr:hover td { background: color-mix(in srgb, var(--accent) 10%, transparent) !important; }
        [data-theme="light"] .damage-query-table tbody tr:hover td { background: color-mix(in srgb, var(--accent) 8%, transparent) !important; }

        /* --- Pagination --- */
        .dmg-pagination {
            display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
            padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border); flex-shrink: 0;
            background: var(--bg-secondary);
        }
        [data-theme="light"] .dmg-pagination { background: #F7F5F0; border-top-color: #E2DCCE; }
        .dmg-page-info { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-secondary); }
        [data-theme="light"] .dmg-page-info { color: #6B6152; }
        .dmg-page-size {
            padding: 3px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border);
            background: var(--bg-primary); color: var(--text-primary); font-size: var(--text-sm);
        }
        .dmg-page-nav { display: flex; align-items: center; gap: 4px; }
        .dmg-page-btn {
            min-width: 30px; height: 30px; padding: 0 8px; border-radius: var(--radius-sm);
            border: 1px solid var(--border); background: transparent; color: var(--text-secondary);
            font-size: var(--text-sm); cursor: pointer; display: inline-flex; align-items: center;
            justify-content: center; transition: all 0.15s;
        }
        .dmg-page-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
        .dmg-page-btn.active { background: var(--accent); color: var(--on-accent, #fff); border-color: var(--accent); }
        .dmg-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
        .dmg-page-ellipsis { padding: 0 4px; color: var(--text-muted); font-size: var(--text-sm); line-height: 30px; }
        [data-theme="light"] .dmg-page-btn { border-color: #D8D0BE; color: #5A5245; }
        [data-theme="light"] .dmg-page-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
        [data-theme="light"] .dmg-page-btn.active { background: #916318; color: #fff; border-color: #916318; }

        /* --- Responsive: Tablet --- */
        @media (max-width: 1024px) {
            .dmg-table-wrapper { overflow-x: auto; }
            .damage-query-table { min-width: 800px; }
        }
        /* --- Responsive: Mobile --- */
        @media (max-width: 768px) {
            .dmg-toolbar { flex-direction: column; align-items: stretch; }
            .dmg-time-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
            .dmg-time-btn { flex-shrink: 0; }
            .dmg-filter-row { flex-wrap: wrap; }
            .dmg-filter-group { flex-wrap: wrap; }
            .dmg-filter-item input { width: 100px; }
            .damage-stats-section { grid-template-columns: repeat(3, 1fr); }
        }
        @media (max-width: 480px) {
            .damage-list-modal { width: 100%; border-radius: 12px 12px 0 0; }
            .dmg-filter-item input { width: 80px; }
            .damage-stats-section { grid-template-columns: repeat(2, 1fr); }
            .dmg-pagination { flex-direction: column; align-items: stretch; text-align: center; }
            .dmg-page-nav { justify-content: center; }
        }

        /* ===== Toast（统一右下角显示） ===== */
        .toast {
            position: fixed;
            bottom: var(--space-5);
            right: var(--space-5);
            max-width: 360px;
            padding: var(--space-4) var(--space-6);
            border-radius: var(--radius-md);
            font-size: var(--text-sm);
            font-weight: 600;
            z-index: 100000;
            animation: toastSlideIn 0.4s ease-out;
            box-shadow: var(--shadow-lg);
            letter-spacing: 0.5px;
            word-wrap: break-word;
            overflow-wrap: break-word;
            text-align: left;
            white-space: normal;
        }
        .toast::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 3px;
            height: 100%;
            border-radius: var(--radius-md) 0 0 var(--radius-md);
            background: rgba(255, 255, 255, 0.3);
        }
        .toast.success {
            background: var(--success);
            color: #fff;
        }
        .toast.error {
            background: var(--danger);
            color: #fff;
        }
        .toast.info {
            background: var(--accent);
            color: var(--on-accent, #fff);
        }
        .toast.warning {
            background: var(--warning);
            color: #1a1a1a;
        }
        .toast.warning::before {
            background: rgba(0, 0, 0, 0.2);
        }

        /* ===== Scrollbar - Simple ===== */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-track {
            background: transparent;
        }
        ::-webkit-scrollbar-thumb {
            background: var(--border-strong);
            border-radius: 4px;
            transition: background 0.2s;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: var(--accent);
        }

        /* ===== Ripple Effect ===== */
        .ripple-container {
            position: relative;
            overflow: hidden;
        }
        .ripple-effect {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            transform: scale(0);
            animation: rippleEffect 0.6s ease-out;
            pointer-events: none;
        }

        /* ============================================================
           响应式适配 - 平板 (<=768px)
           ============================================================ */
        @media (max-width: 768px) {
            /* --- Body & 全局 --- */
            body { padding: var(--space-3); }
            .watermark { font-size: 80px; }

            /* --- 头部 --- */
            .header {
                flex-wrap: wrap;
                height: auto;
                padding: var(--space-3) var(--space-4);
                gap: var(--space-3);
            }
            .header-title h1 { font-size: var(--text-lg); }
            .header-left-group {
                flex-wrap: wrap;
                width: 100%;
                gap: var(--space-3);
            }
            .header-stats {
                order: 2;
                width: 100%;
                gap: var(--space-3);
                justify-content: center;
            }
            .header-gif {
                height: 50px;
                flex: 1 1 100%;
                max-width: 100%;
                order: 3;
                object-position: center;
            }
            .stat-item { padding: var(--space-1) var(--space-3); }
            .stat-value { font-size: var(--text-lg); }
            .header-right {
                overflow-x: auto;
                flex-wrap: nowrap;
                width: 100%;
                order: 2;
                gap: var(--space-2);
                -webkit-overflow-scrolling: touch;
                padding-bottom: var(--space-1);
            }
            .header-theme-group { border-right: none; padding-right: 0; }
            .header-btn-group { border-right: none; padding-right: 0; }
            .theme-btn { min-width: 44px; min-height: 44px; }
            .theme-select { min-height: 44px; font-size: 16px; }
            .export-btn {
                min-height: 44px;
                padding: 10px var(--space-4);
                font-size: 16px;
                white-space: nowrap;
                flex-shrink: 0;
            }

            /* --- 主布局 --- */
            .main-layout {
                flex-direction: column;
                height: auto;
                gap: var(--space-3);
            }
            .left-panel {
                width: 100%;
                max-height: none;
            }
            .loading-list {
                max-height: none;
                overflow: visible;
            }

            /* --- 卡片 & 表单 --- */
            .card {
                padding: var(--space-4);
            }
            .card:hover { transform: none; }
            .card-title {
                font-size: var(--text-base);
                margin-bottom: var(--space-3);
                padding-bottom: var(--space-2);
            }
            .btn-warehouse, .btn-call, .btn-start, .btn-clear { min-height: 44px; }
            .btn-sm { min-height: 44px; padding: var(--space-3) var(--space-4); }

            /* --- 触摸目标 (>=44px) --- */
            .tab-btn { min-height: 44px; padding: var(--space-3) var(--space-5); }
            .modal-close-btn { width: 44px; height: 44px; }
            .modal-btns button { min-height: 44px; }
            .btn-stop { min-height: 44px; }
            .variety-btn, .modal-tab-btn { min-height: 44px; }
            .btn-damage, .btn-view-damage, .btn-add-temp, .btn-edit-qty { min-height: 44px; }

            /* --- 输入框字体 (防止 iOS 自动缩放, >=16px) --- */
            .filter-bar input, .filter-bar select,
            .form-group select, .form-group input,
            .filter-item input, .filter-item select,
            .stats-filter-bar select,
            .date-range-filter input,
            .unit-info-form input, .unit-info-form select, .unit-info-form textarea,
            .exit-select,
            .variety-detail-content input, .variety-detail-content select, .variety-detail-content textarea,
            .temp-operator-form .form-item input,
            .personnel-stats-filters select,
            .personnel-stats-filters .date-range-filter input,
            .damage-filter-section input, .damage-filter-section select {
                font-size: 16px;
            }

            /* --- 网格布局 (减少列数) --- */
            .team-grid { grid-template-columns: repeat(3, 1fr); }
            .stats-grid { grid-template-columns: repeat(2, 1fr); }
            .stats-summary-row { grid-template-columns: repeat(2, 1fr); }
            .damage-stats-section { grid-template-columns: repeat(3, 1fr); }
            .personnel-stats-summary { grid-template-columns: repeat(2, 1fr); }

            /* --- 装车卡片 --- */
            .card-body {
                grid-template-columns: 1fr auto;
                padding: 10px 16px;
            }
            .loading-plate { font-size: 18px; }
            .timer-box .time { font-size: 18px; }
            .loading-card-footer {
                flex-wrap: wrap;
                justify-content: center;
                padding: var(--space-3) var(--space-4);
                border-top: 1px solid var(--border);
                width: 100%;
            }
            .loading-card-actions { width: 100%; justify-content: center; gap: var(--space-2); }
            .loading-plate { font-size: var(--text-lg); }
            .timer-box .time { font-size: var(--text-xl); }
            .btn-damage, .btn-view-damage, .btn-add-temp, .btn-edit-qty {
                padding: var(--space-2) var(--space-4);
                font-size: var(--text-sm);
            }

            /* --- 弹窗 --- */
            .modal { max-width: 95%; border-radius: var(--radius-lg); }
            .variety-modal, .variety-detail-modal, .end-loading-modal,
            .temp-operator-modal, .personnel-modal, .damage-record-modal, .variety-detail-popup {
                width: 95vw;
            }
            .modal-title { padding: var(--space-4); }
            .modal-btns { padding: var(--space-4); }

            /* --- 品种详情弹窗适配 --- */
            .variety-detail-popup { min-width: auto; width: 95vw; }
            .variety-popup-body { padding: var(--space-3); }
            .variety-popup-table { font-size: 12px; }
            .variety-popup-table thead th { padding: var(--space-2); font-size: 10px; }
            .variety-popup-table tbody td { padding: var(--space-2); }
            .variety-popup-table .vd-subcode,
            .variety-popup-table .vd-batch { display: none; }

            /* --- 表格 --- */
            .history-table-container {
                max-height: 60vh;
                -webkit-overflow-scrolling: touch;
            }
            .history-table th, .history-table td {
                padding: var(--space-3) var(--space-4);
            }
            .comparison-table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }

            /* --- 筛选栏 --- */
            .filter-bar input, .filter-bar select {
                flex: 1 1 45%;
                min-height: 44px;
            }
            .stats-filter-bar {
                gap: var(--space-2);
                padding: var(--space-3) var(--space-4);
            }
            .date-range-filter {
                flex-wrap: wrap;
                width: 100%;
            }
            .date-range-filter input { flex: 1; min-width: 120px; }

            /* --- 标签页滚动 --- */
            .tabs {
                overflow-x: auto;
                flex-wrap: nowrap;
                -webkit-overflow-scrolling: touch;
            }
            .tab-btn { white-space: nowrap; flex-shrink: 0; }

            /* --- Toast 提示（移动端底部占满宽度） --- */
            .toast { left: var(--space-3); right: var(--space-3); bottom: var(--space-3); max-width: none; }

            /* --- 空状态 --- */
            .empty-state { padding: 60px var(--space-4); }

            /* --- 品种输入行 --- */
            .variety-input-row { flex-wrap: wrap; }

            /* --- 人员统计筛选 --- */
            .personnel-stats-filters {
                grid-template-columns: 1fr 1fr;
            }
        }

        /* ============================================================
           响应式适配 - 小屏/窄窗 (<=640px)
           修复装车卡片在中等宽度下flex挤压问题
           ============================================================ */
        @media (max-width: 640px) {
            /* === 装车卡片优化 === */
            .card-body {
                grid-template-columns: 1fr;
                gap: 8px;
                padding: 10px 14px;
            }
            .stats-col {
                border-left: none;
                margin-left: 0;
                padding-left: 0;
                padding-top: 8px;
                border-top: 1px solid var(--border);
                justify-content: flex-start;
            }
            .card-header {
                padding: 10px 14px;
                flex-wrap: wrap;
                gap: 8px;
            }
            .header-left { min-width: 0; }
            .loading-plate { font-size: 18px; }
            .timer-box { min-width: 90px; padding: 5px 10px; }
            .timer-box .time { font-size: 18px; }
            .info-value { font-size: 12px; }

            /* 装车卡片按钮 - 最小点击区域 44x44px (Apple HIG 标准) */
            .loading-card-actions {
                width: 100%;
                gap: var(--space-2);
            }
            .loading-card-actions .btn-sm {
                width: 100%;
                min-height: 44px;
                padding: var(--space-3) var(--space-4);
                justify-content: center;
            }
            .loading-card-actions .btn-damage,
            .loading-card-actions .btn-view-damage,
            .loading-card-actions .btn-add-temp,
            .loading-card-actions .btn-edit-qty {
                min-height: 44px;
                min-width: 44px;
                padding: var(--space-2) var(--space-3);
            }

            /* 装车卡片底部 - 文字缩小但保持可读 */
            .loading-card-footer {
                font-size: 12px;
                flex-wrap: wrap;
                gap: var(--space-2);
            }

            /* 修复：移除 left-panel width:280px，与 768px 断点的列布局冲突 */
            .calling-form { padding: var(--space-4); }
            .form-row { flex-wrap: wrap; gap: var(--space-2); }
            .form-group { min-width: 120px; }

            /* === 数据看板优化 === */
            /* KPI 卡片网格 - 手机上改为 2 列 */
            .kpi-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: var(--space-3);
            }
            .kpi-card {
                min-height: 44px;
                padding: var(--space-3);
            }
            /* 数据看板内网格布局 - 手机上改为 1 列 */
            .dashboard-grid {
                grid-template-columns: 1fr;
                gap: var(--space-3);
            }
            /* 图表容器最小高度 200px，确保手机上可读 */
            .chart-container {
                min-height: 200px;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }


            /* === 导航栏优化 === */
            /* tab 按钮横向滚动，间距增大避免误触 */
            .tabs {
                overflow-x: auto;
                flex-wrap: nowrap;
                -webkit-overflow-scrolling: touch;
                gap: var(--space-2);
                padding-bottom: var(--space-2);
            }
            .tab-btn {
                white-space: nowrap;
                flex-shrink: 0;
                min-height: 44px;
                padding: var(--space-2) var(--space-4);
            }

            /* === 通用移动端优化 === */
            /* 所有可点击元素最小 44px 高度 */
            .btn-sm, .btn-stop, .modal-btns button, .modal-close-btn {
                min-height: 44px;
            }
            /* 表单输入框 font-size: 16px，防止 iOS 自动缩放 */
            input, select, textarea {
                font-size: 16px;
            }
            .filter-bar input, .filter-bar select,
            .form-group input, .form-group select, .form-group textarea,
            .stats-filter-bar input, .stats-filter-bar select,
            .date-range-filter input {
                font-size: 16px;
                min-height: 44px;
            }
            /* 模态框手机全屏显示 */
            .modal {
                max-width: 100vw;
                width: 100%;
                max-height: 90vh;
                border-radius: var(--radius-lg);
            }
        }

        /* ============================================================
           响应式适配 - 手机 (<=480px)
           ============================================================ */
        @media (max-width: 480px) {
            /* --- Body --- */
            body { padding: var(--space-2); }
            .watermark { font-size: 60px; }

            /* --- 头部 --- */
            .header { padding: var(--space-2) var(--space-3); gap: var(--space-2); }
            .header-title h1 { font-size: var(--text-base); }
            .header-title img, .logo-img { width: 32px; height: 32px; }
            .header-stats { gap: var(--space-2); }
            .stat-item { padding: var(--space-1) var(--space-2); }
            .stat-value { font-size: var(--text-base); }
            .header-gif { height: 40px; }
            .header-right { gap: var(--space-1); }
            .export-btn { font-size: 14px; padding: 8px 12px; }

            /* --- 卡片 --- */
            .card { padding: var(--space-3); }

            /* --- 网格 (进一步减少列) --- */
            .stats-summary-row { grid-template-columns: 1fr; }
            .damage-stats-section { grid-template-columns: repeat(2, 1fr); }
            .personnel-stats-grid { grid-template-columns: 1fr; }
            .personnel-stats-summary { grid-template-columns: repeat(2, 1fr); }
            .damage-detail-stats { grid-template-columns: 1fr; }

            /* --- 装车卡片 (完全纵向堆叠) --- */
            .loading-card-body {
                flex-direction: column;
                align-items: flex-start;
                gap: var(--space-3);
            }
            .timer-box { width: 100%; }
            .loading-header { min-width: unset; width: 100%; }
            .loading-info { width: 100%; }
            .loading-card-footer {
                flex-direction: column;
                align-items: stretch;
            }
            .loading-card-actions {
                flex-direction: column;
            }
            .loading-card-actions .btn-sm { width: 100%; }
            .loading-card-actions .btn-damage,
            .loading-card-actions .btn-view-damage,
            .loading-card-actions .btn-add-temp,
            .loading-card-actions .btn-edit-qty {
                width: 100%;
                justify-content: center;
                display: flex;
                align-items: center;
                gap: var(--space-2);
            }
            .btn-stop { width: 100%; }
            .loading-plate { font-size: var(--text-base); }
            .timer-box .time { font-size: var(--text-lg); }

            /* --- 用户徽章（移动端：极简模式，保留退出按钮） --- */
            .user-badge { padding: 3px 4px; gap: 4px; }
            .user-badge .user-badge-info { display: none; }
            .user-badge .user-badge-logout { display: inline-flex !important; width: 24px; height: 24px; }
            .user-badge-avatar { width: 26px; height: 26px; font-size: 12px; }
            .user-badge-role { font-size: 0; }
            .user-badge-name { font-size: 0; }

            /* --- [v3.3.3] 管理员模式指示器（移动端） --- */
            .admin-mode-chip { padding: 2px 6px; font-size: 9px; }
            .admin-mode-chip span { display: none; }

            /* --- 表单行 (纵向堆叠) --- */
            .form-row { flex-direction: column; }
            .btn-warehouse { width: 100%; }

            /* --- 筛选栏 (全宽) --- */
            .filter-bar input, .filter-bar select { flex: 1 1 100%; }
            .date-range-filter { flex-direction: column; align-items: stretch; }
            .date-range-filter input { width: 100%; }
            .stats-filter-bar { flex-direction: column; }

            /* --- 人员统计筛选 --- */
            .personnel-stats-filters { grid-template-columns: 1fr; }

            /* --- 弹窗 (底部抽屉样式) --- */
            .modal-overlay { align-items: flex-end; }
            .modal {
                max-width: 100%;
                width: 100vw;
                border-radius: var(--radius-lg) var(--radius-lg) 0 0;
                max-height: 85vh;
            }
            .variety-modal, .variety-detail-modal, .end-loading-modal,
            .temp-operator-modal, .personnel-modal, .damage-record-modal,
            .history-query-modal, .damage-list-modal, .variety-detail-popup {
                width: 100vw;
                max-width: 100%;
            }
            .modal-title { padding: var(--space-3) var(--space-4); }
            .modal-btns { padding: var(--space-3) var(--space-4); }
            .modal-btns button { width: 100%; }

            /* --- 表格 (紧凑模式) --- */
            .history-table { font-size: var(--text-xs); }
            .history-table th, .history-table td { padding: var(--space-2); }

            /* --- 统计卡片 --- */
            .stat-card { padding: var(--space-3); }
            .stat-card-icon { width: 40px; height: 40px; }
            .stat-card .value { font-size: 22px; }

            /* --- 空状态 --- */
            .empty-state { padding: 40px var(--space-3); min-height: 200px; }

            /* --- 品种输入行 --- */
            .variety-input-row { flex-direction: column; align-items: stretch; }

            /* === 新增区块：实时大屏和经营分析移动适配 === */
            #loadingProgressCards { grid-template-columns: 1fr !important; gap: 8px !important; }
            #loadingProgressCards > div { padding: 10px !important; }
            #loadingProgressCards > div > div:last-child { font-size: 20px !important; }
            #businessKpiRow { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
            #businessKpiRow > div { padding: 10px !important; }
            #businessKpiRow > div > div:last-child { font-size: 18px !important; }
            /* 实时大屏内的双列布局改为单列 */
            #realtimeDashboardSection > div[style*="grid-template-columns: 1fr 1fr"] {
                grid-template-columns: 1fr !important;
            }
            /* 图表容器最小高度 */
            #realtimeDashboardSection .chart-container,
            #businessAnalysisSection .chart-container {
                min-height: 220px;
            }
            /* canvas 响应式 */
            #avgDurationTrendChart, #efficiencyTrendChart {
                max-height: 260px;
            }
            /* 时段切换标签：触摸目标 */
            .efficiency-period-tab, .shift-period-tab {
                min-height: 36px;
                padding: 6px 14px !important;
                font-size: 12px !important;
            }
        }

        /* ===== Responsive: Table Overflow Scroll ===== */
        @media (max-width: 768px) {
            .history-table-container,
            .damage-list-section,
            .fo-table-container {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }
            .damage-query-table {
                min-width: 800px;
            }
            .fo-summary-table {
                min-width: 600px;
            }
        }

        /* ===== Smooth Scrolling ===== */
        html {
            scroll-behavior: smooth;
        }

        /* ===== 登录弹窗 ===== */
        .login-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(1, 1, 2, 0.92); z-index: 99999;
            display: flex; align-items: center; justify-content: center;
        }
        .login-box {
            background: var(--bg-elevated, #1a1a2e);
            border: 1px solid var(--border, #333);
            border-radius: var(--radius-lg, 14px);
            padding: 40px 36px; width: 360px; text-align: center;
            box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.3));
        }
        .login-logo {
            font-size: 22px; font-weight: 900;
            /* [v4.17.16] 繁体艺术字：鎏金渐变 + 立体阴影（CSS 变量适配所有主题） */
            background: linear-gradient(180deg,
                var(--hdr-title-c1, #F8EDC8) 0%,
                var(--hdr-title-c2, #D9A85C) 55%,
                var(--hdr-title-c3, #A8782E) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: var(--text-primary, #eee);
            filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)) drop-shadow(0 0 8px rgba(217,168,92,.3));
            letter-spacing: 1.5px;
            margin-bottom: 8px;
        }
        .login-logo .en {
            display: block;
            font-size: 11px;
            font-weight: 600;
            line-height: 1.2;
            letter-spacing: 0.6px;
            margin-top: 3px;
            color: var(--text-secondary, #aaa);
        }
        .login-subtitle {
            font-size: 14px; color: var(--text-secondary, #aaa);
            margin-bottom: 24px;
        }
        .login-input {
            width: 100%; padding: 12px 16px; border-radius: var(--radius-md);
            border: 1px solid var(--border);
            background: var(--input-bg);
            color: var(--text-primary);
            font-size: var(--text-base); margin-bottom: 16px; outline: none;
            box-sizing: border-box;
        }
        .login-input:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
        }
        .login-btn {
            width: 100%; padding: 12px; border: none; border-radius: var(--radius-md);
            background: var(--accent); color: var(--on-accent, #fff);
            font-size: var(--text-base); font-weight: 600; cursor: pointer; transition: opacity 0.2s;
        }
        .login-btn:hover { opacity: 0.9; }
        .login-error {
            color: var(--danger, #e74c3c); font-size: 13px; margin-top: 12px; min-height: 18px;
        }

        /* ===== 装货对比分析系统 ===== */
        .ch-sub-tabs {
            display: flex; gap: 0; margin-bottom: 16px;
            border-radius: var(--radius-sm); overflow: hidden;
            border: 1px solid var(--border); width: fit-content;
        }
        .ch-sub-tab {
            padding: 8px 24px; border: none; cursor: pointer;
            font-size: var(--text-sm); font-weight: 500;
            background: var(--input-bg); color: var(--text-secondary);
            transition: all 0.25s;
        }
        .ch-sub-tab:hover { background: var(--input-bg-hover); color: var(--text-primary); }
        .ch-sub-tab.active { background: var(--accent); color: #fff; }
        .ch-toolbar {
            display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
            padding: 12px 0; border-bottom: 1px solid var(--border); margin-bottom: 16px;
        }
        .ch-toolbar select, .ch-toolbar input[type="date"] {
            padding: 6px 10px; border-radius: var(--radius-sm);
            border: 1px solid var(--border);
            background: var(--input-bg); color: var(--text-primary);
            font-size: 13px; outline: none;
        }
        .ch-toolbar select:focus, .ch-toolbar input[type="date"]:focus {
            border-color: var(--accent);
        }
        .ch-time-switch {
            display: flex; gap: 0; border-radius: var(--radius-sm);
            overflow: hidden; border: 1px solid var(--border);
        }
        .ch-time-btn {
            padding: 6px 16px; border: none; cursor: pointer;
            font-size: 13px; font-weight: 500;
            background: var(--input-bg); color: var(--text-secondary);
            transition: all 0.25s;
        }
        .ch-time-btn:hover { background: var(--input-bg-hover); color: var(--text-primary); }
        .ch-time-btn.active { background: var(--accent); color: #fff; }
        .ch-period-toggle {
            display: flex; gap: 0; border-radius: var(--radius-sm);
            overflow: hidden; border: 1px solid var(--border);
        }
        .ch-period-btn {
            padding: 6px 12px; border: none; cursor: pointer;
            font-size: 12px; font-weight: 500;
            background: var(--input-bg); color: var(--text-secondary);
            transition: all 0.25s;
        }
        .ch-period-btn:hover { background: var(--input-bg-hover); color: var(--text-primary); }
        .ch-period-btn.active { background: var(--accent); color: #fff; }
        .ch-compare-summary {
            display: grid; grid-template-columns: 1fr auto 1fr;
            gap: 16px; margin-bottom: 20px; align-items: stretch;
        }
        @media (max-width: 800px) {
            .ch-compare-summary { grid-template-columns: 1fr; }
        }
        .ch-period-card {
            background: var(--card-bg); border-radius: var(--radius-lg);
            padding: 16px 20px; border: 1px solid var(--border);
        }
        .ch-period-card.current { border-color: var(--accent); }
        .ch-period-card .ch-period-title {
            font-size: 13px; color: var(--text-muted); margin-bottom: 12px;
            display: flex; align-items: center; gap: 6px;
        }
        .ch-period-card .ch-period-stats {
            display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
        }
        .ch-period-stat .ch-ps-value {
            font-size: var(--text-lg); font-weight: 700; color: var(--text-primary);
        }
        .ch-period-stat .ch-ps-label {
            font-size: 11px; color: var(--text-muted);
        }
        .ch-diff-card {
            background: var(--card-bg); border-radius: var(--radius-lg);
            padding: 16px 20px; border: 1px solid var(--border);
            display: flex; flex-direction: column; justify-content: center;
            align-items: center; min-width: 120px;
        }
        .ch-diff-card .ch-diff-arrow {
            font-size: 28px; margin-bottom: 6px;
        }
        .ch-diff-card .ch-diff-arrow.up { color: var(--success); }
        .ch-diff-card .ch-diff-arrow.down { color: var(--danger); }
        .ch-diff-card .ch-diff-value {
            font-size: var(--text-lg); font-weight: 700;
        }
        .ch-diff-card .ch-diff-value.up { color: var(--success); }
        .ch-diff-card .ch-diff-value.down { color: var(--danger); }
        .ch-diff-card .ch-diff-label {
            font-size: 11px; color: var(--text-muted); margin-top: 2px;
        }
        .ch-charts-grid {
            display: grid; grid-template-columns: 1fr 1fr;
            gap: 20px; margin-top: 24px;
        }
        @media (max-width: 1100px) {
            .ch-charts-grid { grid-template-columns: 1fr; }
        }
        .ch-chart-card {
            background: var(--card-bg); border-radius: var(--radius-lg);
            padding: 20px; border: 1px solid var(--border);
            position: relative;
        }
        .ch-chart-card h3 {
            font-size: var(--text-base); color: var(--text-primary);
            margin-bottom: 16px; display: flex; align-items: center; gap: 8px;
        }
        .ch-chart-card canvas { max-height: 380px; width: 100% !important; }
        .ch-topn {
            margin-left: auto; padding: 2px 8px; border: 1px solid var(--border);
            border-radius: var(--radius-sm); background: var(--input-bg);
            color: var(--text-secondary); font-size: 11px; cursor: pointer;
        }
        .ch-chart-info {
            font-size: 11px; color: var(--text-muted); margin-bottom: 8px; display: flex; gap: 6px; align-items: center;
        }
        .ch-chart-info i { opacity: 0.6; }
        .ch-pagination {
            display: flex; align-items: center; justify-content: space-between;
            padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border);
        }
        .ch-page-info { font-size: 12px; color: var(--text-muted); }
        .ch-page-btns { display: flex; align-items: center; gap: var(--space-2); }
        .ch-page-btns .btn-xs {
            padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
            background: var(--surface); color: var(--text-secondary); cursor: pointer; font-size: 12px;
        }
        .ch-page-btns .btn-xs:hover { background: var(--accent); color: white; border-color: var(--accent); }
        .ch-page-btns .btn-xs:disabled { opacity: 0.4; cursor: not-allowed; }
        .ch-page-btns span { font-size: 12px; color: var(--text-secondary); }
        .ch-page-btns select {
            padding: 3px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm);
            background: var(--input-bg); color: var(--text-primary); font-size: 12px;
        }
        .ch-table-container {
            background: var(--card-bg); border-radius: var(--radius-lg);
            border: 1px solid var(--border); overflow: auto;
            margin-bottom: 0;
        }
        .ch-table-header {
            display: flex; justify-content: space-between; align-items: center;
            padding: 14px 20px; border-bottom: 1px solid var(--border);
            position: sticky; top: 0; z-index: 2;
            background: var(--card-bg);
        }
        .ch-table-header h3 {
            font-size: var(--text-base); color: var(--text-primary);
            display: flex; align-items: center; gap: 8px; margin: 0;
        }
        .ch-table {
            width: 100%; border-collapse: collapse; font-size: 13px;
            table-layout: fixed;
        }
        .ch-table th {
            background: var(--surface); color: var(--text-secondary);
            padding: 10px 12px; text-align: center; font-weight: 600;
            border-bottom: 2px solid var(--border); white-space: nowrap;
            cursor: pointer; user-select: none; font-size: 12px;
            position: sticky; top: 0; z-index: 1;
        }
        .ch-table th:first-child { text-align: left; }
        .ch-table td:first-child { text-align: left; }
        .ch-table td { text-align: center; }
        .ch-table th:hover { color: var(--accent); }
        .ch-table th .sort-arrow { margin-left: 4px; font-size: 10px; opacity: 0.5; }
        .ch-table th .sort-arrow.active { opacity: 1; color: var(--accent); }
        .ch-table td {
            padding: 9px 12px; border-bottom: 1px solid var(--border);
            color: var(--text-primary); font-size: 13px;
        }
        .ch-table tr:hover td { background: var(--card-bg-hover); }
        .ch-table .highlight { color: var(--accent); font-weight: 600; }
        .ch-table td.up { color: var(--success); font-weight: 600; }
        .ch-table td.down { color: var(--danger); font-weight: 600; }
        .ch-empty {
            text-align: center; padding: 48px 20px; color: var(--text-muted);
        }
        .ch-empty i { font-size: 48px; display: block; margin-bottom: 12px; opacity: 0.4; }
        .ch-empty span { font-size: var(--text-sm); }

        /* ===== 响应式增强 ===== */

        /* 全局平滑过渡：窗口缩放时元素自动过渡 */
        .main-layout, .left-panel, .card, .tabs, .stats-filter-bar,
        .ch-toolbar, .ch-compare-summary, .ch-charts-grid,
        .filter-bar, .header, .stats-section-header {
            transition: all 0.25s ease-out;
        }

        /* --- 平板横屏 (max-width: 1024px) --- */
        @media (max-width: 1024px) {
            .main-layout { height: auto; gap: var(--space-4); }
            .left-panel { width: 320px; max-height: none; }
            .header-title h1 { font-size: var(--text-base); }
            .header-stats { gap: var(--space-3); }
            .stat-item { padding: var(--space-1) var(--space-3); }
            .stat-value { font-size: var(--text-base); }
            .ch-compare-summary { gap: 12px; }
            .ch-period-card { padding: 12px 14px; }
            .ch-period-card .ch-period-stats { gap: 6px; }
            .ch-ps-value { font-size: var(--text-base) !important; }
            .ch-table th { font-size: 11px; padding: 8px 8px; }
            .ch-table td { font-size: 12px; padding: 7px 8px; }
        }

        /* --- 平板竖屏 (max-width: 768px) — 补充新增模块规则 --- */
        @media (max-width: 768px) {
            /* 创意堂工具栏全宽堆叠 */
            .ch-toolbar {
                flex-direction: column;
                gap: 8px; padding: 10px 0;
            }
            .ch-toolbar input[type="date"],
            .ch-toolbar select,
            .ch-toolbar .ch-time-switch,
            .ch-toolbar .ch-period-toggle { width: 100%; }
            .ch-time-switch { justify-content: center; }
            .ch-time-btn { flex: 1; text-align: center; min-height: 40px; }
            .ch-period-btn { flex: 1; text-align: center; min-height: 40px; }
            .ch-compare-summary {
                grid-template-columns: 1fr;
                gap: 10px;
            }
            .ch-charts-grid { grid-template-columns: 1fr; }
            .ch-sub-tabs { width: 100%; }
            .ch-sub-tab { flex: 1; text-align: center; min-height: 44px; }


            /* 标签栏横向滚动 */
            .tabs {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                white-space: nowrap;
                padding-bottom: 4px;
            }
            .tab-btn { flex-shrink: 0; white-space: nowrap; min-height: 44px; }

            /* 比较表格触摸优化 */
            .ch-table th { font-size: 11px; padding: 8px 6px; }
            .ch-table td { font-size: 11px; padding: 7px 6px; }
            .ch-table-header {
                flex-direction: column;
                gap: 8px; padding: 10px 14px;
            }
            .ch-table-header input { width: 100% !important; }
        }

        /* --- 手机 (max-width: 480px) — 补充新增模块规则 --- */
        @media (max-width: 480px) {
            .ch-toolbar input, .ch-toolbar select { font-size: 16px; min-height: 44px; }
            .ch-time-btn { font-size: 12px; padding: 8px 10px; min-height: 44px; }
            .ch-period-btn { font-size: 12px; padding: 8px 10px; min-height: 44px; }
            .ch-sub-tab { font-size: 13px; padding: 10px 14px; min-height: 44px; }
            .ch-period-card { padding: 10px 12px; }
            .ch-diff-card { padding: 10px 12px; min-width: auto; }
            .ch-ps-value { font-size: var(--text-base) !important; }
            .ch-chart-card { padding: 12px; }
            .ch-chart-card h3 { font-size: 14px; }
            .ch-chart-card canvas { max-height: 240px; }
            .ch-table { font-size: 10px; }
            .ch-table th, .ch-table td { padding: 6px 4px; }
        }

        /* ===== 出库数据统计 ===== */
        .fo-toolbar {
            display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
            padding: 12px 0; border-bottom: 1px solid var(--border); margin-bottom: 16px;
        }
        .fo-toolbar select, .fo-toolbar input[type="date"] {
            padding: 6px 10px; border-radius: var(--radius-sm);
            border: 1px solid var(--border);
            background: var(--input-bg); color: var(--text-primary);
            font-size: 13px; outline: none;
        }
        .fo-toolbar select:focus, .fo-toolbar input[type="date"]:focus { border-color: var(--accent); }
        .fo-entry-card {
            background: var(--card-bg); border-radius: var(--radius-lg);
            padding: 18px 20px; border: 1px solid var(--border); margin-bottom: 20px;
        }
        .fo-entry-card h3 {
            font-size: var(--text-base); color: var(--text-primary);
            margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
        }
        .fo-entry-row {
            display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
        }
        .fo-entry-row .fo-field { display: flex; flex-direction: column; gap: 4px; }
        .fo-entry-row .fo-field label {
            font-size: 12px; color: var(--text-secondary);
        }
        .fo-entry-row .fo-field input,
        .fo-entry-row .fo-field select {
            padding: 7px 10px; border-radius: var(--radius-sm);
            border: 1px solid var(--border);
            background: var(--input-bg); color: var(--text-primary);
            font-size: 13px; outline: none;
        }
        .fo-entry-row .fo-field input:focus,
        .fo-entry-row .fo-field select:focus { border-color: var(--accent); }
        .fo-summary-cards {
            display: grid; grid-template-columns: repeat(5, 1fr);
            gap: 12px; margin-bottom: 20px;
        }
        @media (max-width: 1200px) { .fo-summary-cards { grid-template-columns: repeat(3, 1fr); } }
        @media (max-width: 900px) { .fo-summary-cards { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 480px) { .fo-summary-cards { grid-template-columns: 1fr; } }
        .fo-summary-card {
            background: var(--card-bg); border-radius: var(--radius-lg);
            padding: 14px 14px; border: 1px solid var(--border);
            display: flex; align-items: center; gap: 10px;
        }
        .fo-summary-icon {
            width: 40px; height: 40px; border-radius: var(--radius-md);
            display: flex; align-items: center; justify-content: center; font-size: 18px;
            flex-shrink: 0;
        }
        .fo-summary-icon.c1 { background: rgba(11, 75, 202, 0.15); color: #0B4BCA; }
        .fo-summary-icon.c2 { background: rgba(79, 49, 190, 0.15); color: #4F31BE; }
        .fo-summary-icon.c3 { background: rgba(4, 101, 33, 0.15); color: #046521; }
        .fo-summary-icon.c4 { background: rgba(165, 70, 1, 0.15); color: #A54601; }
        .fo-summary-icon.c5 { background: rgba(187, 11, 12, 0.15); color: #BB0B0C; }
        .fo-summary-info .fo-value { font-size: var(--text-xl); font-weight: 700; color: var(--text-primary); }
        .fo-summary-info .fo-label { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
                /* [P3修复] .fo-biz 原无样式规则，文字色依赖继承链，浅色模式下可能继承到奶白字压白底；
                   显式变量化，确保明暗模式均可读 */
                .fo-summary-info .fo-biz { font-size: 11px; color: var(--text-primary); margin-top: 3px; font-weight: 600; }
        .fo-charts-grid {
            display: grid; grid-template-columns: 1fr 1fr;
            gap: 20px; margin-bottom: 20px;
        }
        @media (max-width: 1100px) { .fo-charts-grid { grid-template-columns: 1fr; } }
        .fo-chart-card {
            background: var(--card-bg); border-radius: var(--radius-lg);
            padding: 20px; border: 1px solid var(--border);
        }
        .fo-chart-card h3 {
            font-size: var(--text-base); color: var(--text-primary);
            margin-bottom: 16px; display: flex; align-items: center; gap: 8px;
        }
        .fo-chart-card canvas { max-height: 340px; width: 100% !important; }
        .fo-table-container {
            background: var(--card-bg); border-radius: var(--radius-lg);
            border: 1px solid var(--border); overflow: hidden; margin-bottom: 20px;
        }
        .fo-table-header {
            display: flex; justify-content: space-between; align-items: center;
            padding: 14px 20px; border-bottom: 1px solid var(--border);
        }
        .fo-table-header h3 {
            font-size: var(--text-base); color: var(--text-primary);
            display: flex; align-items: center; gap: 8px; margin: 0;
        }
        .fo-table { width: 100%; border-collapse: collapse; font-size: 13px; }
        .fo-table th {
            background: var(--surface); color: var(--text-secondary);
            padding: 10px 12px; text-align: center; font-weight: 600;
            border-bottom: 2px solid var(--border); white-space: nowrap;
            cursor: pointer; user-select: none; font-size: 12px;
        }
        .fo-table th:first-child, .fo-table td:first-child { text-align: left; }
        .fo-table th:hover { color: var(--accent); }
        .fo-table td {
            padding: 9px 12px; border-bottom: 1px solid var(--border);
            color: var(--text-primary); text-align: center;
        }
        .fo-table tr:hover td { background: var(--card-bg-hover); }
        .fo-table .sort-arrow { margin-left: 4px; font-size: 10px; opacity: 0.5; }
        .fo-table .sort-arrow.active { opacity: 1; color: var(--accent); }
        .fo-table .btn-xs {
            padding: 3px 8px; border: none; border-radius: 4px;
            cursor: pointer; font-size: 11px; margin: 0 2px;
        }
        .fo-table .btn-edit { background: var(--accent); color: #fff; }
        .fo-table .btn-del { background: var(--danger); color: #fff; }
        .fo-pagination {
            display: flex; align-items: center; justify-content: space-between;
            padding: var(--space-3) 0; border-top: 1px solid var(--border); margin-top: 4px;
        }
        .fo-page-info { font-size: 12px; color: var(--text-muted); }
        .fo-page-btns { display: flex; align-items: center; gap: var(--space-2); }
        .fo-page-btns .btn-xs {
            padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
            background: var(--surface); color: var(--text-secondary); cursor: pointer; font-size: 12px;
        }
        .fo-page-btns .btn-xs:hover { background: var(--accent); color: white; border-color: var(--accent); }
        .fo-page-btns .btn-xs:disabled { opacity: 0.4; cursor: not-allowed; }
        .fo-page-btns span { font-size: 12px; color: var(--text-secondary); }
        .fo-page-btns select {
            padding: 3px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm);
            background: var(--input-bg); color: var(--text-primary); font-size: 12px;
        }
        .fo-prediction-card {
            background: var(--card-bg); border-radius: var(--radius-lg);
            padding: 20px; border: 1px solid rgba(11, 75, 202, 0.3);
            margin-bottom: 20px;
        }
        .fo-prediction-card h3 {
            font-size: var(--text-base); color: var(--text-primary);
            margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
        }
        /* AI智能分析按钮 */
        .btn-ai-forecast {
            margin-left: auto;
            padding: 6px 16px;
            border: 1px solid rgba(4, 125, 53, 0.5);
            border-radius: var(--radius-md);
            background: linear-gradient(135deg, #047D35, #026149);
            color: #fff;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
            transition: all 0.25s;
            box-shadow: 0 2px 8px rgba(4, 125, 53, 0.3);
        }
        .btn-ai-forecast:hover:not(:disabled) {
            transform: translateY(-1px);
            box-shadow: 0 4px 14px rgba(4, 125, 53, 0.5);
        }
        .btn-ai-forecast:disabled { opacity: 0.7; cursor: wait; }
        /* AI分析结果区 */
        .fo-ai-result {
            margin-top: 18px;
            border: 1px solid rgba(4, 125, 53, 0.4);
            border-radius: var(--radius-lg);
            overflow: hidden;
            background: var(--surface);
        }
        .fo-ai-result-header {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 16px;
            background: linear-gradient(135deg, rgba(4, 125, 53, 0.15), rgba(2, 97, 73, 0.1));
            border-bottom: 1px solid var(--border);
        }
        .fo-ai-result-title {
            font-size: 15px;
            font-weight: 700;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .fo-ai-result-title i { color: #047D35; }
        .fo-ai-result-meta {
            margin-left: auto;
            font-size: 12px;
            color: var(--text-muted);
        }
        .btn-ai-close {
            background: none; border: none; cursor: pointer;
            color: var(--text-muted); font-size: 16px; padding: 4px;
            border-radius: var(--radius-sm);
        }
        .btn-ai-close:hover { background: var(--hover-bg); color: var(--text-primary); }
        .fo-ai-result-body {
            padding: 18px 20px;
            max-height: 600px;
            overflow-y: auto;
            line-height: 1.8;
            color: var(--text-primary);
            font-size: 14px;
        }
        .fo-ai-loading {
            text-align: center;
            padding: 40px 20px;
            color: var(--text-muted);
            font-size: 15px;
        }
        .fo-ai-loading i { margin-right: 8px; }
        .fo-ai-error {
            padding: 16px;
            color: #E01313;
            background: rgba(224, 19, 19, 0.08);
            border-radius: var(--radius-md);
            font-size: 14px;
        }
        .fo-ai-error i { margin-right: 6px; }
        /* Markdown渲染样式 */
        .fo-ai-result-body .md-h1 { font-size: 20px; font-weight: 700; margin: 18px 0 12px; color: var(--text-primary); border-bottom: 2px solid var(--border); padding-bottom: 8px; }
        .fo-ai-result-body .md-h2 { font-size: 17px; font-weight: 700; margin: 16px 0 10px; color: var(--text-primary); padding-left: 10px; border-left: 4px solid #047D35; }
        .fo-ai-result-body h3 { font-size: 15px; font-weight: 600; margin: 14px 0 8px; }
        .fo-ai-result-body h4, .fo-ai-result-body h5, .fo-ai-result-body h6 { font-size: 14px; font-weight: 600; margin: 12px 0 6px; }
        .fo-ai-result-body p { margin: 8px 0; }
        .fo-ai-result-body ul { margin: 8px 0; padding-left: 22px; }
        .fo-ai-result-body li { margin: 4px 0; }
        .fo-ai-result-body strong { color: var(--text-primary); font-weight: 700; }
        .fo-ai-result-body .md-code { background: var(--code-bg, rgba(7, 7, 7, 0.05)); padding: 12px; border-radius: var(--radius-md); overflow-x: auto; font-family: 'Consolas', 'Monaco', monospace; font-size: 13px; }
        .fo-ai-result-body .md-table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13px; }
        .fo-ai-result-body .md-table th { background: var(--hover-bg); padding: 8px 12px; text-align: left; font-weight: 600; border: 1px solid var(--border); }
        .fo-ai-result-body .md-table td { padding: 8px 12px; border: 1px solid var(--border); }
        .fo-ai-result-body .md-table tr:nth-child(even) td { background: var(--surface); }
        .fo-prediction-grid {
            display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
        }
        @media (max-width: 768px) { .fo-prediction-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 480px) { .fo-prediction-grid { grid-template-columns: 1fr; } }
        .fo-pred-item {
            background: var(--surface); border-radius: var(--radius-md);
            padding: 14px; border: 1px solid var(--border); text-align: center;
        }
        .fo-pred-item .fo-pred-factory {
            font-size: 12px; color: var(--text-secondary); margin-bottom: 6px;
        }
        .fo-pred-item .fo-pred-value {
            font-size: var(--text-xl); font-weight: 700; color: var(--accent);
        }
        .fo-pred-item .fo-pred-trend {
            font-size: 11px; margin-top: 4px;
        }
        .fo-pred-item .fo-pred-revenue {
            font-size: 13px; font-weight: 600; color: var(--danger);
            margin-top: 4px;
        }
        /* 合计行：突出显示 */
        .fo-pred-item.fo-pred-total {
            background: linear-gradient(135deg, rgba(0, 48, 4, 0.12), rgba(0, 44, 33, 0.08));
            border: 1px solid rgba(0, 82, 16, 0.5);
            grid-column: 1 / -1;
        }
        .fo-pred-item.fo-pred-total .fo-pred-factory {
            color: var(--text-primary); font-weight: 700; font-size: 14px;
        }
        .fo-pred-item.fo-pred-total .fo-pred-value {
            color: var(--success);
        }
        .fo-pred-item.fo-pred-total .fo-pred-revenue {
            font-size: var(--text-xl);
        }
        .fo-pred-item.fo-pred-total .fo-pred-trend {
            color: var(--text-muted); font-size: 11px;
        }

        /* ===== 打印样式 ===== */
        /* 安全修复 CSS-H1：添加 @media print 规则，确保打印输出清晰可读 */
        @media print {
            /* 隐藏不需要打印的元素 */
            .watermark, .header-gif, .header-right, .tabs, .sync-indicator,
            .modal-overlay, .sentinel-badge, .user-badge,
            .nav-item[onclick*="toggleTheme"], .nav-item[onclick*="export"],
            .btn-sm, .skip-link, #loginOverlay { display: none !important; }

            /* 使用白色背景和黑色文字，节省墨水 */
            body {
                background: #fff !important;
                color: #000 !important;
                font-size: 12pt;
            }

            /* 表格和卡片使用黑色边框 */
            table, .card, .loading-card, .waiting-card {
                border: 1px solid #000 !important;
                box-shadow: none !important;
                background: #fff !important;
                color: #000 !important;
                page-break-inside: avoid;
            }

            /* 表格容器不滚动，显示全部内容 */
            .history-table-container, .table-container {
                overflow: visible !important;
                max-height: none !important;
            }

            /* 链接显示 URL */
            a[href]:after {
                content: " (" attr(href) ")";
                font-size: 10pt;
                color: #555;
            }
            a[href^="#"]:after, a[href^="javascript:"]:after { content: ""; }

            /* 页面设置 */
            @page {
                margin: 1.5cm;
            }
        }
        .fo-pred-item .fo-pred-trend.up { color: var(--success); }
        .fo-pred-item .fo-pred-trend.down { color: var(--danger); }
        .fo-empty {
            text-align: center; padding: 48px 20px; color: var(--text-muted);
        }
        .fo-empty i { font-size: 48px; display: block; margin-bottom: 12px; opacity: 0.4; }
        .fo-empty span { font-size: var(--text-sm); }

        @media (max-width: 768px) {
            .fo-toolbar { flex-direction: column; }
            .fo-entry-row { flex-direction: column; }
            .fo-entry-row .fo-field { width: 100%; }
            .fo-entry-row .fo-field input,
            .fo-entry-row .fo-field select { width: 100%; }
        }

        /* ===== 品种管理模块 ===== */
        .vm-container { }
        .vm-form { padding: var(--space-2) 0; }
        .vm-form-row { display: flex; gap: var(--space-3); align-items: flex-end; flex-wrap: wrap; }
        .vm-field { flex: 1; min-width: 140px; position: relative; }
        .vm-field label { display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; font-weight: 500; }
        .vm-field input {
            width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
            background: var(--input-bg); color: var(--text-primary); font-size: 13px;
        }
        .vm-field input:focus { border-color: var(--accent); outline: none; }
        .vm-autocomplete {
            position: absolute; top: 100%; left: 0; right: 0; z-index: 100;
            background: var(--bg-elevated); border: 1px solid var(--border-strong);
            border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
            max-height: 200px; overflow-y: auto; margin-top: 2px;
        }
        .vm-autocomplete .vm-option {
            padding: 8px 12px; cursor: pointer; font-size: 12px; color: var(--text-primary);
            border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center;
        }
        .vm-autocomplete .vm-option:last-child { border-bottom: none; }
        .vm-autocomplete .vm-option:hover { background: rgba(24, 62, 254, 0.08); }
        .vm-autocomplete .vm-option .vm-opt-code { color: var(--accent); font-family: var(--font-mono); font-size: 11px; }
        .vm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
        .vm-table th {
            background: var(--surface); color: var(--text-secondary); padding: 10px 12px;
            text-align: left; font-weight: 600; border-bottom: 2px solid var(--border); font-size: 12px; white-space: nowrap;
        }
        .vm-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); }
        .vm-table tbody tr:nth-child(even) { background: rgba(39, 42, 53, 0.04); }
        [data-theme="light"] .vm-table tbody tr:nth-child(even) { background: rgba(43, 38, 32, 0.035); }
        .vm-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
        [data-theme="light"] .vm-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
        .vm-table .btn-xs {
            padding: 3px 8px; border: none; border-radius: 4px; cursor: pointer; font-size: 11px; margin: 0 2px;
        }
        .vm-table .btn-edit { background: var(--accent); color: #fff; }
        .vm-table .btn-del { background: var(--danger); color: #fff; }
        .vm-empty {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            padding: 40px; color: var(--text-muted); gap: 8px; font-size: 14px;
        }
        .vm-empty i { font-size: 36px; opacity: 0.3; }
        .vm-pagination {
            display: flex; align-items: center; justify-content: space-between;
            padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border);
        }
        .vm-page-info { font-size: 12px; color: var(--text-muted); }
        .vm-page-btns { display: flex; align-items: center; gap: var(--space-2); }
        .vm-page-btns .btn-xs {
            padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
            background: var(--surface); color: var(--text-secondary); cursor: pointer; font-size: 12px;
        }
        .vm-page-btns .btn-xs:hover { background: var(--accent); color: white; border-color: var(--accent); }
        .vm-page-btns .btn-xs:disabled { opacity: 0.4; cursor: not-allowed; }

        /* ===== 品种管理：从WMS导入弹窗 ===== */
        .vm-wms-modal {
            position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            z-index: 10050; display: flex; align-items: center; justify-content: center;
            animation: vmWmsFadeIn 0.18s ease;
        }
        @keyframes vmWmsFadeIn { from { opacity: 0; } to { opacity: 1; } }
        .vm-wms-mask {
            position: absolute; top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px);
        }
        .vm-wms-panel {
            position: relative; width: min(960px, 92vw); max-height: 86vh;
            background: var(--bg-elevated); border: 1px solid var(--border-strong);
            border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
            display: flex; flex-direction: column; overflow: hidden;
            animation: vmWmsSlideIn 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
        }
        @keyframes vmWmsSlideIn {
            from { transform: scale(0.94) translateY(8px); opacity: 0; }
            to { transform: scale(1) translateY(0); opacity: 1; }
        }
        .vm-wms-header {
            display: flex; justify-content: space-between; align-items: center;
            padding: 14px 18px; border-bottom: 1px solid var(--border);
            background: linear-gradient(180deg, var(--bg-secondary), var(--bg-elevated));
        }
        .vm-wms-close {
            width: 30px; height: 30px; border: none; background: transparent;
            color: var(--text-secondary); font-size: 22px; line-height: 1;
            cursor: pointer; border-radius: 6px; transition: all 0.15s;
        }
        .vm-wms-close:hover { background: var(--danger); color: #fff; }
        .vm-wms-toolbar {
            display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
            padding: 10px 18px; border-bottom: 1px solid var(--border);
            background: var(--bg-secondary);
        }
        .vm-wms-body {
            flex: 1; overflow: auto; min-height: 240px;
            background: var(--bg-primary);
        }
        .vm-wms-table {
            width: 100%; border-collapse: collapse; font-size: 13px;
        }
        .vm-wms-table thead {
            position: sticky; top: 0; z-index: 1;
            background: var(--bg-secondary);
        }
        .vm-wms-table th {
            padding: 10px 12px; text-align: left; font-weight: 600;
            color: var(--text-secondary); border-bottom: 1px solid var(--border);
            font-size: 12px;
        }
        .vm-wms-table td {
            padding: 9px 12px; border-bottom: 1px solid var(--border);
            color: var(--text-primary);
        }
        .vm-wms-table tbody tr { transition: background 0.12s; }
        .vm-wms-table tbody tr:hover { background: rgba(24, 62, 254, 0.08); }
        .vm-wms-table tbody tr.vm-wms-row-exists { opacity: 0.55; }
        .vm-wms-table tbody tr.vm-wms-row-exists:hover { opacity: 0.85; }
        .vm-wms-table .vm-wms-code { font-family: 'Cascadia Code', 'Consolas', monospace; color: var(--accent); }
        .vm-wms-table .vm-wms-batch { font-size: 11px; color: var(--text-secondary); }
        .vm-wms-tag {
            display: inline-block; padding: 2px 8px; border-radius: 10px;
            font-size: 10px; font-weight: 600; line-height: 1.4;
        }
        .vm-wms-tag-new { background: rgba(2, 127, 52, 0.18); color: #027F34; }
        .vm-wms-tag-exists { background: rgba(33, 44, 58, 0.2); color: var(--text-muted); }
        .vm-wms-tag-count { background: rgba(24, 62, 254, 0.18); color: var(--accent); }
        .vm-wms-footer {
            display: flex; justify-content: space-between; align-items: center;
            padding: 12px 18px; border-top: 1px solid var(--border);
            background: var(--bg-secondary);
        }
        [data-theme="light"] .vm-wms-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }

/* ===== AI 哨兵监控 ===== */
.sentinel-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #fbbf24;
    color: #7f1d1d;
    font-size: 11px;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
    padding: 0 4px;
    box-shadow: 0 0 0 2px var(--bg-primary);
    animation: sentinel-pulse 1.5s ease-in-out infinite;
}
@keyframes sentinel-pulse {
    0%, 100% { box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 0 rgba(251,191,36,0.6); }
    50% { box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 6px rgba(251,191,36,0); }
}
.sentinel-warning-card {
    border: 1px solid var(--danger);
    border-left: 4px solid var(--danger);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    margin-bottom: 8px;
    background: rgba(217, 9, 11, 0.06);
    cursor: pointer;
    transition: all 0.15s;
}
.sentinel-warning-card:hover {
    background: rgba(217, 9, 11, 0.12);
    transform: translateX(2px);
}
.sentinel-warning-card.resolved {
    border-color: var(--text-muted);
    border-left-color: var(--text-muted);
    background: var(--surface);
    opacity: 0.6;
}
.sentinel-red-flag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--danger);
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    animation: sentinel-flag-blink 1s ease-in-out infinite alternate;
}
@keyframes sentinel-flag-blink {
    from { opacity: 1; }
    to { opacity: 0.6; }
}
.sentinel-filter-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    align-items: center;
}
.sentinel-filter-bar select, .sentinel-filter-bar input {
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 12px;
}
.sentinel-stat-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
    align-items: center;
}
.sentinel-stat-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    font-size: 12px;
}
.sentinel-stat-item strong {
    color: var(--danger);
    font-size: 16px;
}
/* 统计按钮（可点击快速筛选） */
.sentinel-stat-btn {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
    color: var(--text-secondary);
}
.sentinel-stat-btn:hover {
    border-color: var(--primary);
    background: var(--surface-hover);
    color: var(--text-primary);
}
.sentinel-stat-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.sentinel-stat-btn.active strong {
    color: #fff;
}
.sentinel-stat-btn strong {
    color: var(--danger);
    font-size: 16px;
    margin-left: 2px;
}
.sentinel-stat-divider {
    width: 1px;
    height: 24px;
    background: var(--border);
    margin: 0 4px;
}

/* ===== 移动端适配 (响应式设计) ===== */
@media (max-width: 1024px) {
    .header {
        flex-direction: column;
        gap: var(--space-3);
        padding: var(--space-3);
        height: auto;
    }
    .header-left-group {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
    .header-title h1 {
        font-size: var(--text-xl);
    }
    .header-stats {
        flex-wrap: wrap;
        gap: var(--space-2);
    }
    .stat-item {
        min-width: 80px;
    }
    .header-gif {
        display: none;
    }
    .header-right {
        width: 100%;
        justify-content: space-between;
    }
    .header-btn-group {
        flex-wrap: wrap;
        gap: var(--space-2);
    }
    .export-btn {
        padding: 6px 12px;
        font-size: var(--text-sm);
    }
}

@media (max-width: 768px) {
    :root {
        --space-1: 4px;
        --space-2: 6px;
        --space-3: 8px;
        --space-4: 12px;
        --space-5: 16px;
        --space-6: 20px;
    }
    
    body {
        font-size: var(--text-sm);
    }
    
    .header {
        padding: var(--space-2) var(--space-3);
    }
    
    .header-title {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
    
    .logo-img {
        width: 40px;
        height: 40px;
    }
    
    .header-title h1 {
        font-size: var(--text-lg);
    }
    
    .stat-item {
        min-width: 70px;
        padding: 4px 8px;
    }
    
    .stat-value {
        font-size: 16px !important;
    }
    
    .stat-label {
        font-size: 9px !important;
    }
    
    .header-theme-group {
        flex-direction: column;
        gap: var(--space-2);
    }
    
    .theme-select {
        height: 36px;
        padding: var(--space-1) var(--space-3);
        font-size: var(--text-xs);
    }
    
    .header-btn-group {
        flex-direction: column;
        gap: var(--space-1);
    }
    
    .export-btn {
        width: 100%;
        padding: 8px 12px;
        font-size: var(--text-sm);
    }
    
    .main-layout {
        flex-direction: column;
        height: auto;
        gap: var(--space-3);
    }
    
    .left-panel {
        width: 100%;
        max-width: 100%;
    }
    
    .content-area {
        flex: 1;
        padding: var(--space-3);
    }
    
    .card {
        padding: var(--space-3);
        margin-bottom: var(--space-3);
    }
    
    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
    
    .card-title {
        font-size: var(--text-lg);
    }
    
    .tab-bar {
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: var(--space-2);
    }
    
    .tab-btn {
        padding: 6px 12px;
        font-size: var(--text-xs);
    }
    
    .table-container {
        overflow-x: auto;
    }
    
    table {
        font-size: var(--text-xs);
    }
    
    th, td {
        padding: 6px 8px;
    }
    
    .form-row {
        flex-direction: column;
        gap: var(--space-2);
    }
    
    .form-group {
        width: 100%;
    }
    
    .form-control {
        width: 100%;
        padding: 8px 12px;
        font-size: var(--text-sm);
    }
    
    .btn {
        padding: 8px 16px;
        font-size: var(--text-sm);
    }
    
    .btn-lg {
        padding: 10px 20px;
        font-size: var(--text-base);
    }
    
    .modal-overlay {
        padding: var(--space-3);
    }
    
    .modal-box {
        width: 100%;
        max-width: none;
        padding: var(--space-4);
    }
    
    .modal-header {
        padding: var(--space-3);
    }
    
    .modal-content {
        padding: var(--space-3);
        max-height: 60vh;
    }
    
    .login-box {
        width: 100%;
        max-width: 320px;
        padding: var(--space-5);
    }
    
    .login-input {
        padding: 10px 14px;
        font-size: var(--text-base);
    }
    
    .login-btn {
        padding: 12px;
        font-size: var(--text-base);
    }
    
    .nav-item {
        padding: 10px 14px;
        font-size: var(--text-sm);
    }
    
    .nav-item i {
        font-size: 14px;
        margin-right: 8px;
    }
    
    .loading-card {
        padding: var(--space-3);
    }
    
    .loading-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
    
    .loading-info-row {
        flex-direction: column;
        gap: var(--space-1);
    }
    
    .loading-info-label {
        font-size: var(--text-xs);
    }
    
    .loading-info-value {
        font-size: var(--text-sm);
    }
    
    .chart-container {
        height: 200px;
    }
    
    .realtime-dashboard {
        padding: var(--space-3);
    }
    
    .dashboard-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2);
    }
    
    .dashboard-stat {
        padding: var(--space-3);
    }
    
    .dashboard-stat-value {
        font-size: var(--text-2xl);
    }
    
    .dashboard-stat-label {
        font-size: var(--text-xs);
    }
    
    .shift-pk-container {
        flex-direction: column;
        gap: var(--space-3);
    }
    
    .shift-pk-item {
        width: 100%;
    }
    
    .history-modal {
        max-width: none;
        width: 100%;
    }
    
    .history-toolbar {
        flex-direction: column;
        gap: var(--space-2);
    }
    
    .history-filter-group {
        flex-wrap: wrap;
        gap: var(--space-2);
    }
    
    .history-filter-item {
        flex: 1;
        min-width: 120px;
    }
    
    .history-table-container {
        max-height: 40vh;
    }
    
    .watermark {
        display: none;
    }
}

@media (max-width: 480px) {
    .header {
        padding: var(--space-2);
    }
    
    .header-title h1 {
        font-size: var(--text-base);
    }
    
    .stat-item {
        min-width: 60px;
        padding: 3px 6px;
    }
    
    .stat-value {
        font-size: 14px !important;
    }
    
    .stat-label {
        font-size: 8px !important;
    }
    
    .content-area {
        padding: var(--space-2);
    }
    
    .card {
        padding: var(--space-2);
    }
    
    .card-title {
        font-size: var(--text-base);
    }
    
    table {
        font-size: 11px;
    }
    
    th, td {
        padding: 4px 6px;
        white-space: nowrap;
    }
    
    .form-control {
        padding: 6px 10px;
        font-size: var(--text-xs);
    }
    
    .btn {
        padding: 6px 12px;
        font-size: var(--text-xs);
    }
    
    .modal-box {
        padding: var(--space-3);
    }
    
    .dashboard-stat {
        padding: var(--space-2);
    }
    
    .dashboard-stat-value {
        font-size: var(--text-xl);
    }
    
    .nav-item {
        padding: 8px 12px;
        font-size: var(--text-xs);
    }
    
    .nav-item i {
        font-size: 12px;
        margin-right: 6px;
    }
}

/* ===== 触摸优化 ===== */
button, [role="button"], .clickable, .nav-item, .tab-btn, .card, .stat-card, .btn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* 移除全局按钮点击缩放效果（用户反馈"晃动"体验不佳），保留触摸优化 */
button:active, [role="button"]:active, .clickable:active, .nav-item:active, .tab-btn:active, .card:active, .btn:active {
    transition: none;
}

/* ===== 移动端表格体验优化 ===== */
/* 768px 以下：表格变为可横向滚动块，保留完整列信息 */
@media (max-width: 768px) {
    .history-table,
    .comparison-table,
    .damage-query-table,
    .variety-popup-table,
    .ch-table,
    .fo-table,
    .vm-table,
    .tab-content table,
    .card table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* 表头不随滚动消失（sticky） */
    .history-table thead th,
    .comparison-table thead th,
    .tab-content table thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        background: var(--bg-secondary, #f5f5f5);
    }

    /* 允许长文本换行，避免单列过宽 */
    .history-table td,
    .comparison-table td,
    .tab-content table td {
        white-space: normal;
        word-break: break-word;
    }
}

/* 480px 以下：进一步紧凑 */
@media (max-width: 480px) {
    .history-table,
    .comparison-table,
    .tab-content table,
    .card table {
        font-size: 10px;
    }

    .history-table th,
    .history-table td,
    .comparison-table th,
    .comparison-table td,
    .tab-content table th,
    .tab-content table td {
        padding: 3px 4px;
    }

    /* 数字列右对齐，提升可读性 */
    .history-table td:nth-child(n+3),
    .comparison-table td:nth-child(n+3) {
        text-align: right;
    }
}

input, select, textarea {
    touch-action: manipulation;
}

/* ===== 高DPI屏幕适配 ===== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo-img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* ===== 横竖屏切换优化 ===== */
@media (orientation: landscape) and (max-width: 768px) {
    .main-layout {
        flex-direction: row;
        height: calc(100vh - 100px);
    }
    
    .left-panel {
        width: 200px;
        max-width: 200px;
    }

    .dashboard-stats {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ===== iOS 刘海屏安全区适配（需 viewport-fit=cover 配合） ===== */
body {
    /* 底部安全区：避免内容被 Home Indicator 遮挡 */
    padding-bottom: env(safe-area-inset-bottom, 0);
    /* 左右安全区：横屏时避免内容进入圆角/刘海区域 */
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
}
/* 顶部安全区：导航栏避开刘海 */
.navbar, .top-nav, .app-header {
    padding-top: env(safe-area-inset-top, 0);
}

/* ============================================================
 * 视觉增强层（2026-07-18 纯视觉美化，不改任何结构/类名/行为）
 * 原则：只追加与覆盖视觉效果，不触碰布局尺寸与既有交互逻辑
 * ============================================================ */

/* --- 选中文字配色：呼应主题强调色 --- */
::selection {
    background: rgba(217, 168, 92, 0.35);
    color: var(--text-primary);
}
[data-theme="light"] ::selection {
    background: rgba(150, 105, 31, 0.25);
    color: #2B2620;
}

/* --- 输入控件聚焦光环：在既有描边之上叠加柔和光晕，提升聚焦可感知度 --- */
input:focus, select:focus, textarea:focus {
    box-shadow: 0 0 0 3px rgba(217, 168, 92, 0.22);
}
[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
    box-shadow: 0 0 0 3px rgba(150, 105, 31, 0.16);
}
input.error:focus, select.error:focus, textarea.error:focus {
    box-shadow: 0 0 0 3px rgba(241, 13, 15, 0.16);
}

/* --- 数字等宽：统计数字刷新/计时跳动时不再左右抖动 --- */
.stat-value, .timer-value, .dashboard-stat-value,
.sync-indicator, .stat-pop {
    font-variant-numeric: tabular-nums;
}


/* --- 弹窗遮罩柔和化：轻微景深让弹窗从背景中浮出（flex 居中定位不受影响） --- */
.modal-overlay {
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* --- Toast 入场动画平滑化：去除回弹，统一为指数缓出（同名 keyframes 后者覆盖前者） --- */
@keyframes toastSlideIn {
    from { transform: translateY(16px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* --- 滚动条精致化：滑块加透明包边，视觉上更纤细 --- */
::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 3px;
    border: 1px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
    border: 1px solid transparent;
    background-clip: padding-box;
}

/* ============================================================
 * 底部备案条遮挡修复（2026-07-18）
 * 原因：底部 fixed 备案条占用 40px 高度，但只在 body 加了
 *       padding-bottom:40px。内部使用 calc(100vh - Xpx) 的
 *       滚动容器不会继承 body padding，导致末尾内容被遮挡。
 * 方案：在 :root 定义 --footer-height，对所有依赖视口高度的
 *       滚动容器统一减去 --footer-height，让出底部备案条空间。
 * 原则：只调整尺寸公式，不改变布局结构与交互逻辑。
 * ============================================================ */

/* 主布局容器 */
.main-layout {
    height: calc(100vh - 122px - var(--footer-height));
}
.left-panel {
    max-height: calc(100vh - 80px - var(--footer-height));
}

/* 装载列表 */
.loading-list {
    max-height: calc(100vh - 280px - var(--footer-height));
}

/* 历史表格容器 */
.history-table-container {
    max-height: calc(100vh - 320px - var(--footer-height));
}

/* 详情弹窗 */
.record-field-detail-modal {
    max-height: calc(70vh - var(--footer-height));
}
.record-field-detail-content {
    max-height: calc(70vh - 120px - var(--footer-height));
}

/* 人员管理弹窗 */
.personnel-modal {
    max-height: calc(80vh - var(--footer-height));
}
.personnel-content {
    max-height: calc(80vh - 120px - var(--footer-height));
}

/* 历史查询弹窗 */
.history-query-modal {
    max-height: calc(90vh - var(--footer-height));
}
.history-query-container {
    height: calc(90vh - 100px - var(--footer-height));
}

/* 损耗清单弹窗 */
.damage-list-modal {
    max-height: calc(94vh - var(--footer-height));
}
.damage-list-container {
    height: calc(94vh - 100px - var(--footer-height));
}

/* 横屏移动端主布局 */
@media (orientation: landscape) and (max-width: 768px) {
    .main-layout {
        height: calc(100vh - 100px - var(--footer-height));
    }
}

/* ============================================================
 * 主内容区 .card 内部滚动修复（2026-07-18）
 * 原因：.main-layout 有固定 height，主内容区 .card (flex:1) 的高度
 *       受其限制。但 .card 和 .tab-content 都无 overflow 设置，
 *       装货对比分析等无内部滚动容器的 tab 内容溢出后无法滚动查看。
 * 方案：将 .main-layout > .card 改为 flex column，.tabs 固定高度，
 *       .tab-content.active 占满剩余空间并内部滚动。
 *       不影响 .left-panel 里的 .card（非 .main-layout 直接子项）。
 *       已有内部滚动的 tab（loading/history 等）行为不变：
 *       内部容器 max-height 仍小于 .tab-content 高度，先触发内部滚动。
 * 原则：只调整布局方式（block → flex column），不改变视觉与交互。
 * ============================================================ */
.main-layout > .card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.main-layout > .card > .tabs {
    flex-shrink: 0;
}
.main-layout > .card > .tab-content.active {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
}

/* ============================================================
 * 布局精修补丁（2026-07-19）
 * 原则：只追加覆盖，不改原规则；纯视觉增强，不影响任何功能逻辑。
 *
 * 评审发现的问题与对策：
 * ① 窄屏下 .header-right 横向滚动时，用户徽章（退出登录入口）
 *    会随滚动移出视野 → sticky 钉在右侧，身份区永远可达。
 * ② 1366~1600 笔记本缺少中间断点（现有断点 1024 跳档），
 *    头部 12+ 控件拥挤 → 新增 1440 档压缩间距与字号。
 * ③ 激活 tab 与普通 tab 层级差异仅靠底色 → 加轻微投影提升层级。
 * ============================================================ */

/* ① 用户徽章钉住右侧（横向滚动时不被带走） */
.header-right .user-badge {
    position: sticky;
    right: 0;
    flex-shrink: 0;
    z-index: 5;
}

/* ② 笔记本中间断点（1025px ~ 1440px）：头部减压 */
@media (max-width: 1440px) and (min-width: 1025px) {
    .header { padding: 0 var(--space-4); }
    .header-left-group { gap: var(--space-3); }
    .header-left-group .header-title h1 { font-size: 17px; }
    .header-stats { gap: var(--space-2); }
    .stat-item { min-width: 64px !important; padding: 4px 8px !important; }
    .stat-value { font-size: 17px !important; }
    .header-right .export-btn { font-size: 10px; padding: 5px 8px; }
    .theme-select { padding: var(--space-2) var(--space-2); }
    .left-panel { width: 340px; }
}

/* ③ 激活 tab 提升视觉层级（各主题共用 accent 微光） */
.tab-btn.active {
    box-shadow: 0 2px 10px rgba(24, 62, 254, 0.35);
}

/* ============================================================
 * 视觉增强包 v2.0（2026-07-24）
 * 包含 11 项视觉优化：表格/徽章/侧边栏/进度条/主题过渡/数字光扫/
 * 卡片阶梯/骨架屏/空状态插画/时间轴
 * 原则：纯视觉增强，不改任何 DOM 结构与交互逻辑
 * ============================================================ */

/* ============================================================
 * #10 主题切换过渡动画（300ms）
 * 切换主题时整页颜色平滑过渡，不再瞬间变色
 * ============================================================ */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease,
                box-shadow 0.3s ease, fill 0.3s ease, stroke 0.3s ease !important;
    transition-delay: 0s !important;
}


/* ============================================================
 * #4 徽章/状态点脉冲呼吸光圈
 * 2s 一次的脉冲扩散光圈，吸引注意但不刺眼
 * ============================================================ */
@keyframes badgePulse {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 50%, transparent);
    }
    70% {
        box-shadow: 0 0 0 8px transparent;
    }
    100% {
        box-shadow: 0 0 0 0 transparent;
    }
}
@keyframes badgePulseWarning {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--warning) 50%, transparent);
    }
    70% {
        box-shadow: 0 0 0 8px transparent;
    }
    100% {
        box-shadow: 0 0 0 0 transparent;
    }
}
@keyframes badgePulseSuccess {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 50%, transparent);
    }
    70% {
        box-shadow: 0 0 0 8px transparent;
    }
    100% {
        box-shadow: 0 0 0 0 transparent;
    }
}
.badge-pulse {
    animation: badgePulse 2s ease-out infinite;
}
/* AI 哨兵未读徽章呼吸 */
.niu2-badge,
.badge-unread,
.unread-badge {
    animation: badgePulse 2s ease-out infinite;
}

/* ============================================================
 * #7 侧边栏当前页高亮强化
 * 主题色竖条加粗 + 图标彩色化 + 文字加粗 + 微右移 2px
 * ============================================================ */
.m002-sidebar-item {
    position: relative;
    transition: all 0.18s ease;
}
.m002-sidebar-item.active {
    border-left-width: 4px;
    padding-left: 15px; /* 补偿 border 加宽 */
    font-weight: 700;
    transform: translateX(2px);
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--accent) 12%, transparent),
        color-mix(in srgb, var(--accent) 4%, transparent) 60%,
        transparent);
    box-shadow: inset 0 0 12px color-mix(in srgb, var(--accent) 6%, transparent);
}
.m002-sidebar-item.active::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 6px var(--accent);
}
.m002-sidebar-item:hover:not(.active) {
    background: color-mix(in srgb, var(--accent) 5%, transparent);
    transform: translateX(1px);
}

/* ============================================================
 * #8 进度条 shimmer 流光动画
 * 从左到右扫过的渐变流光
 * ============================================================ */
@keyframes progressShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}
.progress-fill,
.progress-bar-fill,
.task-progress-fill,
.loading-progress-fill {
    position: relative;
    overflow: hidden;
}
.progress-fill::after,
.progress-bar-fill::after,
.task-progress-fill::after,
.loading-progress-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.35) 50%,
        transparent 100%);
    animation: progressShimmer 2.2s ease-in-out infinite;
    pointer-events: none;
}

/* ============================================================
 * #1 数字滚动渐变光扫效果
 * 数字变化时从底部扫过一道主题色渐变光
 * ============================================================ */
@keyframes statValueSweep {
    0% {
        background-position: 0% 100%;
        background-size: 100% 0%;
    }
    40% {
        background-position: 0% 100%;
        background-size: 100% 100%;
    }
    100% {
        background-position: 0% 100%;
        background-size: 100% 0%;
    }
}
.stat-value.stat-sweep,
.dashboard-stat-value.stat-sweep {
    background-image: linear-gradient(0deg,
        color-mix(in srgb, var(--accent) 35%, transparent) 0%,
        transparent 100%);
    background-repeat: no-repeat;
    animation: statValueSweep 0.8s ease-out;
    border-radius: 4px;
}

/* ============================================================
 * #5 卡片入场阶梯动画
 * fade-in + translateY(12px→0)，按 60ms 阶梯延迟
 * ============================================================ */
@keyframes cardStaggerIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.card-stagger-in {
    animation: cardStaggerIn 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}

/* ============================================================
 * #6 骨架屏加载
 * 灰色呼吸骨架，代替"正在加载..."文字
 * ============================================================ */
@keyframes skeletonBreath {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}
.skeleton {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--text-muted) 12%, transparent) 25%,
        color-mix(in srgb, var(--text-muted) 22%, transparent) 50%,
        color-mix(in srgb, var(--text-muted) 12%, transparent) 75%);
    background-size: 200% 100%;
    animation: skeletonBreath 1.6s ease-in-out infinite,
               progressShimmer 1.8s linear infinite;
    border-radius: var(--radius-sm);
    color: transparent;
    user-select: none;
    pointer-events: none;
}
.skeleton-line {
    height: 14px;
    margin-bottom: 10px;
}
.skeleton-line:last-child {
    margin-bottom: 0;
}
.skeleton-line.w-100 { width: 100%; }
.skeleton-line.w-80 { width: 80%; }
.skeleton-line.w-60 { width: 60%; }
.skeleton-line.w-40 { width: 40%; }
.skeleton-card {
    height: 120px;
    border-radius: var(--radius-md);
}

/* ============================================================
 * #3 空状态插画化
 * SVG 插画 + 引导按钮，主题色适配
 * ============================================================ */
.empty-state-illustrated {
    padding: 50px var(--space-4);
    text-align: center;
    color: var(--text-muted);
}
.empty-state-illustrated svg {
    width: 120px;
    height: 120px;
    margin-bottom: 20px;
    opacity: 0.85;
}
.empty-state-illustrated .empty-title {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}
.empty-state-illustrated .empty-desc {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: 20px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}
.empty-state-illustrated .empty-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    color: #fff;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent);
}
.empty-state-illustrated .empty-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* ============================================================
 * #11 时间轴视图（按小时分布）
 * 类似 GitHub 提交热力图，显示当天装车高峰
 * ============================================================ */
.timeline-view {
    padding: var(--space-4);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}
.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}
.timeline-title {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
}
.timeline-subtitle {
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.timeline-grid {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    gap: 4px;
    margin-bottom: var(--space-2);
}
.timeline-cell {
    aspect-ratio: 1;
    border-radius: 3px;
    background: color-mix(in srgb, var(--text-muted) 10%, transparent);
    position: relative;
    cursor: pointer;
    transition: all 0.15s ease;
    min-height: 20px;
}
.timeline-cell:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    z-index: 2;
}
.timeline-cell[data-level="1"] {
    background: color-mix(in srgb, var(--accent) 25%, transparent);
}
.timeline-cell[data-level="2"] {
    background: color-mix(in srgb, var(--accent) 50%, transparent);
}
.timeline-cell[data-level="3"] {
    background: color-mix(in srgb, var(--accent) 75%, transparent);
}
.timeline-cell[data-level="4"] {
    background: var(--accent);
    box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 50%, transparent);
}
.timeline-labels {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    gap: 4px;
    font-size: 9px;
    color: var(--text-muted);
    text-align: center;
}
.timeline-legend {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-3);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}
.timeline-legend-cell {
    width: 14px;
    height: 14px;
    border-radius: 3px;
}
.timeline-tooltip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-primary);
    color: var(--text-primary);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    white-space: nowrap;
    border: 1px solid var(--border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 10;
}
.timeline-cell:hover .timeline-tooltip {
    opacity: 1;
}

/* ============================================================
 * 装车卡片"恢宏大气"强化（保持用户偏好）
 * 高亮当前进行中的装车任务
 * ============================================================ */
.loading-task-card,
.task-card {
    position: relative;
    transition: all 0.25s ease;
}
.loading-task-card:hover,
.task-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* ============================================================
 * 减少动画偏好适配（无障碍）
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
 * #9 数据大屏模式（2026-07-24）
 * 全屏深色背景 + 大字号 + 实时数据展示
 * 不修改现有功能，仅作为视觉覆盖层
 * ============================================================ */
.bigscreen-overlay {
    position: fixed;
    inset: 0;
    z-index: 999998;
    background: linear-gradient(135deg, #0a1628 0%, #1a2f4a 50%, #0f1f38 100%);
    overflow-y: auto;
    display: none;
    animation: bigscreenFadeIn 0.4s ease-out;
}
.bigscreen-overlay.active {
    display: block;
}
@keyframes bigscreenFadeIn {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}
.bigscreen-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 40px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
    backdrop-filter: blur(10px);
}
.bigscreen-title {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 2px;
    background: linear-gradient(90deg, #4da3ff, #66d9ff, #4da3ff);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: bigscreenTitleShine 3s linear infinite;
}
@keyframes bigscreenTitleShine {
    0% { background-position: 0% 0; }
    100% { background-position: 200% 0; }
}
.bigscreen-time {
    font-size: 18px;
    color: rgba(255,255,255,0.75);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
.bigscreen-close {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.15);
    padding: 8px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}
.bigscreen-close:hover {
    background: rgba(255,100,100,0.2);
    border-color: rgba(255,100,100,0.4);
}
.bigscreen-body {
    padding: 30px 40px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.bigscreen-stat-card {
    background: linear-gradient(135deg, rgba(77,163,255,0.1), rgba(77,163,255,0.03));
    border: 1px solid rgba(77,163,255,0.25);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}
.bigscreen-stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
    animation: bigscreenCardShine 3.5s linear infinite;
}
@keyframes bigscreenCardShine {
    0% { left: -100%; }
    100% { left: 100%; }
}
.bigscreen-stat-card:hover {
    transform: translateY(-4px);
    border-color: rgba(77,163,255,0.5);
    box-shadow: 0 8px 24px rgba(77,163,255,0.2);
}
.bigscreen-stat-label {
    font-size: 14px;
    color: rgba(255,255,255,0.65);
    margin-bottom: 12px;
    letter-spacing: 1px;
}
.bigscreen-stat-value {
    font-size: 42px;
    font-weight: 700;
    color: #4da3ff;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 20px rgba(77,163,255,0.5);
    line-height: 1.2;
}
.bigscreen-stat-unit {
    font-size: 14px;
    color: rgba(255,255,255,0.5);
    margin-left: 4px;
}
.bigscreen-section {
    grid-column: 1 / -1;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 20px;
    margin-top: 10px;
}
.bigscreen-section-title {
    font-size: 18px;
    font-weight: 600;
    color: #66d9ff;
    margin-bottom: 16px;
    padding-left: 12px;
    border-left: 3px solid #4da3ff;
}
.bigscreen-log-list {
    max-height: 300px;
    overflow-y: auto;
    font-size: 14px;
    color: rgba(255,255,255,0.85);
}
.bigscreen-log-item {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    display: flex;
    justify-content: space-between;
    animation: bigscreenLogSlide 0.4s ease-out;
}
.bigscreen-log-item:last-child {
    border-bottom: none;
}
@keyframes bigscreenLogSlide {
    from { opacity: 0; transform: translateX(-16px); }
    to { opacity: 1; transform: translateX(0); }
}
.bigscreen-log-item .log-plate {
    font-weight: 600;
    color: #66d9ff;
}
.bigscreen-log-item .log-qty {
    color: #ffd166;
    font-weight: 600;
}
.bigscreen-log-item .log-time {
    color: rgba(255,255,255,0.5);
    font-size: 12px;
}
/* 响应式：窄屏 2 列 */
@media (max-width: 1200px) {
    .bigscreen-body {
        grid-template-columns: repeat(2, 1fr);
        padding: 20px;
    }
    .bigscreen-header {
        padding: 16px 20px;
    }
    .bigscreen-title {
        font-size: 22px;
    }
    .bigscreen-stat-value {
        font-size: 32px;
    }
}


/* ============================================================ */
/* 顶栏合理安排（2026-07-31 nav-arrange v3）                      */
/* ============================================================ */

/* 顶栏：三区布局（Logo / 按钮组 / 用户卡片） */
.header {
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px 14px !important;
    padding: 6px 14px !important;
}

/* ============================================================
 * 顶栏两行布局（截图样式 - 环境监控在顶）
 * 第1行：环境监控（温度传感器信息）横铺
 * 第2行：左 Logo+标题+统计 | 中 导航按钮组 | 右 用户卡片
 * ============================================================ */

/* 顶栏整体：垂直两行布局 */
#topHeader.header-two-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    padding: 4px 16px 6px !important;
    gap: 4px !important;
    min-height: 0 !important;
    max-height: none !important;
}

/* 通用行 */
#topHeader .hdr-row {
    display: flex;
    align-items: center;
    min-width: 0;
}

/* ============= 第1行：环境监控横铺 ============= */
#topHeader .hdr-env-row {
    gap: 6px;
    padding: 2px 6px;
    background: color-mix(in srgb, var(--bg-elevated, var(--bg-secondary)) 50%, transparent);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}
#topHeader .hdr-env-row::-webkit-scrollbar { height: 4px; }
#topHeader .hdr-env-row::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
#topHeader .hdr-env-row::-webkit-scrollbar-track { background: transparent; }

#topHeader .hdr-env-card {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 12px;
    background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
    border: 1px solid var(--border);
    border-radius: 14px;
    white-space: nowrap;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
#topHeader .hdr-env-card:hover {
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-elevated));
    border-color: var(--accent);
}
#topHeader .hdr-env-num {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
}
#topHeader .hdr-env-unit {
    font-size: 10px;
    color: var(--text-muted);
    margin-left: 1px;
}
#topHeader .hdr-env-label {
    font-size: 10px;
    color: var(--text-muted);
}
#topHeader .hdr-env-divider {
    font-size: 11px;
    color: var(--text-muted);
    margin: 0 2px;
}
#topHeader .hdr-env-alert { color: #FF7A6E; }
#topHeader .hdr-env-alert i { color: #FF7A6E; }
#topHeader .hdr-env-alert .hdr-env-num { color: #FF7A6E; }
#topHeader .hdr-env-alert.has-alert { animation: hdrAlertPulse 1.5s ease-in-out infinite; }
@keyframes hdrAlertPulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, #ef4444 50%, transparent); }
    50% { box-shadow: 0 0 0 4px color-mix(in srgb, #ef4444 0%, transparent); }
}
#topHeader .hdr-env-temp { color: #06b6d4; }
#topHeader .hdr-env-temp i { color: #06b6d4; }
#topHeader .hdr-env-temp .hdr-env-num { color: #06b6d4; }
#topHeader .hdr-env-temp.alert-mode { color: #FF7A6E; background: color-mix(in srgb, #ef4444 12%, var(--bg-elevated)); border-color: #ef4444; }
#topHeader .hdr-env-temp.alert-mode i,
#topHeader .hdr-env-temp.alert-mode .hdr-env-num { color: #FF7A6E; }
#topHeader .hdr-env-sensor { color: #10b981; }
#topHeader .hdr-env-sensor i { color: #10b981; }
#topHeader .hdr-env-sensor .hdr-env-num { color: #10b981; }

#topHeader .hdr-env-list {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding-left: 4px;
}
#topHeader .hdr-env-list::-webkit-scrollbar { height: 3px; }
#topHeader .hdr-env-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
#topHeader .hdr-env-list-empty {
    font-size: 11px;
    color: var(--text-muted);
    padding: 2px 8px;
    white-space: nowrap;
}

/* ============= 第2行：主导航栏 ============= */
#topHeader .hdr-main-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    min-width: 0;
}

/* 左侧：Logo + 标题 + 统计 */
#topHeader .hdr-main-left {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex-shrink: 0;
    min-width: 0;
    height: 48px;
}
#topHeader .hdr-logo {
    width: auto;
    height: 100%;
    max-height: 48px;
    object-fit: contain;
    object-position: center;
    border-radius: 5px;
    flex-shrink: 0;
    align-self: center;
}
#topHeader .hdr-title-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
    flex-shrink: 0;
    gap: 4px;
    align-self: center;
    padding: 4px 12px;
    background: color-mix(in srgb, var(--bg-elevated, var(--bg-secondary)) 35%, transparent);
    border: 1px solid var(--border);
    border-radius: 8px;
    min-width: 0;
}
#topHeader .hdr-title-gif {
    width: 130px;
    height: 22px;
    object-fit: cover;
    display: block;
    margin: 0;
    padding: 0;
    align-self: center;
    line-height: 1;
}
#topHeader .hdr-title {
    font-size: 16px;
    font-weight: 900;
    color: var(--header-text, #F2EDE3);
    white-space: nowrap;
    line-height: 1.1;
    margin: 0;
    padding: 0;
    align-self: center;
    letter-spacing: 2px;
    /* [v4.17.16] 繁体艺术字：鎏金渐变 + 立体阴影（CSS 变量适配所有主题） */
    background: linear-gradient(180deg,
        var(--hdr-title-c1, #F8EDC8) 0%,
        var(--hdr-title-c2, #D9A85C) 55%,
        var(--hdr-title-c3, #A8782E) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)) drop-shadow(0 0 6px rgba(217,168,92,.28));
}
#topHeader .hdr-title .en {
    display: block;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.6px;
    margin-top: 2px;
    /* [v4.17.16] 隔离父级渐变文字填充，副标题保持主题色 */
    -webkit-text-fill-color: var(--text-secondary, #A99E86);
    color: var(--text-secondary, #A99E86);
}
#topHeader .hdr-stats {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    margin-left: 4px;
    flex-shrink: 0;
    align-self: center;
    min-height: 34px;
}
#topHeader .hdr-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    min-width: 56px;
}
#topHeader .hdr-stat-num {
    font-size: 18px;
    font-weight: 700;
    color: var(--accent);
    line-height: 1.1;
}
#topHeader .hdr-stat-label {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.1;
}
/* 首页统计卡趋势指示器（对比昨日同时刻） */
#topHeader .hdr-stat-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    margin-top: 2px;
    padding: 1px 5px;
    border-radius: 8px;
    white-space: nowrap;
}
#topHeader .hdr-stat-trend .trend-pct {
    font-size: 9px;
    font-weight: 600;
}
#topHeader .hdr-stat-trend.up {
    color: var(--success);
    background: color-mix(in srgb, var(--success) 14%, transparent);
}
#topHeader .hdr-stat-trend.down {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 14%, transparent);
}
#topHeader .hdr-stat-trend.flat {
    color: var(--text-muted);
    background: color-mix(in srgb, var(--text-muted) 12%, transparent);
}

/* 中间：导航按钮组 */
#topHeader .hdr-main-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: visible;
    padding: 2px 0;
    scrollbar-width: thin;
}
#topHeader .hdr-main-nav::-webkit-scrollbar { height: 4px; }
#topHeader .hdr-main-nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
#topHeader .hdr-main-nav::-webkit-scrollbar-track { background: transparent; }

#topHeader .hdr-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 500;
    color: #fff;
    background: var(--bg-elevated, var(--bg-secondary));
    border: 1px solid var(--border);
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.15s ease;
    font-family: inherit;
    position: relative;
    line-height: 1.2;
}
#topHeader .hdr-nav-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px color-mix(in srgb, currentColor 30%, transparent);
}
#topHeader .hdr-nav-btn i {
    font-size: 10px;
}
#topHeader .hdr-nav-icon {
    padding: 4px 7px;
}
#topHeader .hdr-nav-btn .sentinel-badge {
    position: absolute;
    top: -4px;
    right: -4px;
}

/* 彩色按钮变体（按截图配色） */
#topHeader .hdr-nav-btn.btn-teal   { background: linear-gradient(135deg, #14b8a6, #0d9488); border-color: #0d9488; }
#topHeader .hdr-nav-btn.btn-purple { background: linear-gradient(135deg, #a855f7, #7e22ce); border-color: #7e22ce; }
#topHeader .hdr-nav-btn.btn-amber  { background: linear-gradient(135deg, #f59e0b, #d97706); border-color: #d97706; }
#topHeader .hdr-nav-btn.btn-pink   { background: linear-gradient(135deg, #ec4899, #be185d); border-color: #be185d; }
#topHeader .hdr-nav-btn.btn-cyan   { background: linear-gradient(135deg, #06b6d4, #0891b2); border-color: #0891b2; }
#topHeader .hdr-nav-btn.btn-red    { background: linear-gradient(135deg, #ef4444, #b91c1c); border-color: #b91c1c; }
#topHeader .hdr-nav-btn.btn-indigo { background: linear-gradient(135deg, #6366f1, #4338ca); border-color: #4338ca; }
#topHeader .hdr-nav-btn.btn-green  { background: linear-gradient(135deg, #10b981, #047857); border-color: #047857; }
#topHeader .hdr-nav-btn.btn-orange { background: linear-gradient(135deg, #f97316, #c2410c); border-color: #c2410c; }
#topHeader .hdr-nav-btn.btn-emerald{ background: linear-gradient(135deg, #059669, #065f46); border-color: #065f46; }
#topHeader .hdr-nav-btn.btn-slate  { background: linear-gradient(135deg, #64748b, #334155); border-color: #334155; }
#topHeader .hdr-nav-btn.btn-warning{ background: linear-gradient(135deg, #f59e0b, #b45309); border-color: #b45309; }
#topHeader .hdr-nav-btn.btn-info   { background: linear-gradient(135deg, #3b82f6, #1d4ed8); border-color: #1d4ed8; }
#topHeader .hdr-nav-btn.btn-rose   { background: linear-gradient(135deg, #f43f5e, #be123c); border-color: #be123c; }

/* NEW 标签徽章 */
.nav-new-tag {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    font-size: 9px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #916318, #7A5210);
    border-radius: 8px;
    letter-spacing: 0.5px;
    box-shadow: 0 1px 3px rgba(245, 158, 11, 0.5);
    animation: navNewPulse 1.6s ease-in-out infinite;
}
@keyframes navNewPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 1px 3px rgba(245, 158, 11, 0.5); }
    50% { transform: scale(1.12); box-shadow: 0 2px 8px rgba(245, 158, 11, 0.8); }
}

/* 热门高热度标签（红色脉冲，区别于黄色 NEW） */
.nav-hot-tag {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    font-size: 9px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #f87171, #ef4444, #dc2626);
    border-radius: 8px;
    letter-spacing: 0.5px;
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.5);
    animation: navHotPulse 1.4s ease-in-out infinite;
}
@keyframes navHotPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 1px 3px rgba(239, 68, 68, 0.5); }
    50% { transform: scale(1.14); box-shadow: 0 2px 9px rgba(239, 68, 68, 0.85); }
}

#topHeader .hdr-main-nav .header-dropdown {
    position: relative;
    flex-shrink: 0;
}

/* 右侧：用户卡片 */
#topHeader .hdr-main-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 8px;
    border-left: 2px solid var(--accent);
}

/* 顶栏环境监控新结构（hdr-env-list）兼容旧 env-sensor-item 样式 */
#topHeader .hdr-env-list .env-sensor-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    border-radius: 12px;
    font-size: 11px;
    line-height: 1.2;
    color: var(--text-primary);
    flex-shrink: 0;
    white-space: nowrap;
    min-height: 22px;
    height: 22px;
    min-width: auto;
    flex: 0 0 auto;
}
#topHeader .hdr-env-list .env-sensor-item .env-sensor-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--success, #22c55e);
    flex-shrink: 0;
}
#topHeader .hdr-env-list .env-sensor-item .env-sensor-wh {
    font-size: 9px;
    padding: 0 4px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent, #4fc3f7);
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1.3;
}
#topHeader .hdr-env-list .env-sensor-item .env-sensor-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}
#topHeader .hdr-env-list .env-sensor-item .env-sensor-temp,
#topHeader .hdr-env-list .env-sensor-item .env-sensor-humi {
    font-size: 11px;
    color: var(--accent, #4fc3f7);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
}

/* M007 顶栏恒浅字：顶栏为固定深色（--header-bg），
   内部文字统一走 --header-text / --header-num 专用变量，
   确保明暗模式下都保持浅字深底可读（修复浅色模式下
   var(--text-primary) 变深字压深顶栏不可读的问题）
   注：以下覆盖规则仅限默认新主题（html 无 data-style），
   19 个旧风格主题保留原有顶栏数字配色，避免色漂移 */
html:not([data-style]) #topHeader .hdr-title { color: var(--header-text, #F2EDE3); }
html:not([data-style]) #topHeader .hdr-stat-num { color: var(--header-num, #D9A85C); }
html:not([data-style]) #topHeader .hdr-stat-label,
html:not([data-style]) #topHeader .hdr-env-label,
html:not([data-style]) #topHeader .hdr-env-unit,
html:not([data-style]) #topHeader .hdr-env-divider,
html:not([data-style]) #topHeader .hdr-env-list-empty {
    color: color-mix(in srgb, var(--header-text, #F2EDE3) 68%, transparent);
}
html:not([data-style]) #topHeader .hdr-env-num { color: var(--header-num, #D9A85C); }
html:not([data-style]) #topHeader .hdr-env-list .env-sensor-item .env-sensor-name {
    color: var(--header-text, #F2EDE3);
}
html:not([data-style]) #topHeader .hdr-env-list .env-sensor-item .env-sensor-wh {
    color: var(--header-num, #D9A85C);
    background: color-mix(in srgb, var(--header-num, #D9A85C) 18%, transparent);
}
html:not([data-style]) #topHeader .hdr-env-list .env-sensor-item .env-sensor-temp,
html:not([data-style]) #topHeader .hdr-env-list .env-sensor-item .env-sensor-humi {
    color: var(--header-num, #D9A85C);
}
/* 告警/离线状态仍需醒目色，保持在深色顶栏上可读的亮色 */
html:not([data-style]) #topHeader .hdr-env-alert,
html:not([data-style]) #topHeader .hdr-env-alert i,
html:not([data-style]) #topHeader .hdr-env-alert .hdr-env-num,
html:not([data-style]) #topHeader .hdr-env-temp.alert-mode,
html:not([data-style]) #topHeader .hdr-env-temp.alert-mode i,
html:not([data-style]) #topHeader .hdr-env-temp.alert-mode .hdr-env-num {
    color: #FF7A6E;
}
html:not([data-style]) #topHeader .hdr-env-list .env-sensor-item.alert .env-sensor-temp,
html:not([data-style]) #topHeader .hdr-env-list .env-sensor-item.alert .env-sensor-humi,
html:not([data-style]) #topHeader .hdr-env-list .env-sensor-item.alert .env-sensor-wh {
    color: #FF7A6E;
}
#topHeader .hdr-env-list .env-sensor-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 10px;
    padding: 2px 8px;
    opacity: 0.7;
    white-space: nowrap;
}

/* ============================================================
 * 保留旧 v388 样式作为向下兼容（避免破坏老 JS 选择器）
 * ============================================================ */

/* 左侧：Logo + 标题 + 统计项 */
.v388-topnav-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.v388-logo {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
}
.v388-title-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}
.v388-gif {
    width: 60px;
    height: 16px;
    object-fit: cover;
}
.v388-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
}
.v388-stats {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    margin-left: 4px;
}
.v388-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 8px;
    min-width: 56px;
}
.v388-stat-num {
    font-size: 18px;
    font-weight: 700;
    color: var(--accent);
    line-height: 1.1;
}
.v388-stat-label {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.1;
}

/* 中间：环境监控（温度传感器） */
.v388-env-cards {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    cursor: pointer;
    padding: 4px 8px;
}
.v388-env-card {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 12px;
    background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
    border: 1px solid var(--border);
    border-radius: 16px;
    white-space: nowrap;
    transition: all 0.2s ease;
}
.v388-env-card:hover {
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-elevated));
    border-color: var(--accent);
}
.v388-env-num {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
}
.v388-env-unit {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 1px;
}
.v388-env-label {
    font-size: 10px;
    color: var(--text-muted);
}
.v388-env-divider {
    font-size: 11px;
    color: var(--text-muted);
    margin: 0 2px;
}
.v388-env-alert {
    color: #ef4444;
}
.v388-env-alert i {
    color: #ef4444;
}
.v388-env-alert .v388-env-num {
    color: #ef4444;
}
.v388-env-temp {
    color: #06b6d4;
}
.v388-env-temp i {
    color: #06b6d4;
}
.v388-env-sensor {
    color: #10b981;
}
.v388-env-sensor i {
    color: #10b981;
}
.v388-env-list {
    display: none;
}
.v388-env-list-empty {
    display: none;
}

/* 右侧：核心按钮 + 用户卡片 */
.v388-topnav-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.v388-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.15s ease;
    font-family: inherit;
    position: relative;
}
.v388-btn:hover {
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-elevated));
    border-color: var(--accent);
    color: var(--accent);
}
.v388-btn i {
    font-size: 11px;
}
.v388-btn-icon {
    padding: 5px 8px;
}
.v388-btn .sentinel-badge {
    position: absolute;
    top: -4px;
    right: -4px;
}
.v388-topnav-right .header-dropdown {
    position: relative;
}
.header-left-group {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
/* 按钮组容器：原始单行水平排列（恢复v3.0.14前） */
.header-right {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 1 1 auto !important;
    min-width: 0;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    padding-top: 4px;
    overflow-x: auto !important;
    overflow-y: visible;
}
/* 按钮组：组间简洁竖线分隔，原始不换行（恢复v3.0.14前） */
.header-btn-group {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-right: 8px;
    border-right: 1px solid var(--border);
    flex-wrap: nowrap;
    flex-shrink: 0;
}
.header-btn-group:last-of-type {
    border-right: none;
    padding-right: 0;
}

/* 用户卡片独立区：固定右侧，与按钮组严格分离 */
.header-user-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
    padding: 4px 10px;
    border-left: 2px solid var(--accent);
    border-radius: 0 6px 6px 0;
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    align-self: stretch;
    min-height: 40px;
}

/* 左栏主题切换栏 sticky：始终可见 */
.m002-sidebar-theme-bar {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: var(--bg-elevated, var(--bg-secondary));
    box-shadow: 0 -4px 12px rgba(0,0,0,0.15);
    backdrop-filter: blur(6px);
}

/* ===== 数据大屏新维度样式 ===== */
/* 同期环比行 */
.bigscreen-cmp-row {
    display: flex !important;
    gap: 24px;
    padding: 16px 20px !important;
}
.bigscreen-cmp-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.06);
}
.bigscreen-cmp-item .cmp-label { font-size: 13px; color: rgba(255,255,255,0.5); min-width: 50px; }
.bigscreen-cmp-item .cmp-today { font-size: 22px; font-weight: 700; color: #66d9ff; }
.bigscreen-cmp-item .cmp-yesterday { font-size: 12px; color: rgba(255,255,255,0.35); }
.bigscreen-cmp-item .cmp-change { font-size: 16px; font-weight: 700; margin-left: auto; }
.bigscreen-cmp-item .cmp-up { color: #22c55e; }
.bigscreen-cmp-item .cmp-down { color: #ef4444; }

/* 双列布局（排行 + 热力） */
.bigscreen-dual-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 16px;
}
@media (max-width: 1200px) {
    .bigscreen-dual-col { grid-template-columns: 1fr; }
}

/* 人员排行 */
.bigscreen-rank-list { padding: 0 4px; }
.bigscreen-rank-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.bigscreen-rank-item:last-child { border-bottom: none; }
.bigscreen-rank-item .rank-medal { font-size: 18px; min-width: 28px; text-align: center; }
.bigscreen-rank-item .rank-name { font-size: 14px; color: rgba(255,255,255,0.8); min-width: 60px; font-weight: 500; }
.bigscreen-rank-item .rank-bar-bg {
    flex: 1;
    height: 8px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    overflow: hidden;
}
.bigscreen-rank-item .rank-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
    border-radius: 4px;
    transition: width 0.6s ease;
}
.bigscreen-rank-item .rank-qty { font-size: 12px; color: #ffd166; font-weight: 600; min-width: 100px; text-align: right; }

/* 时段热力图 */
.bigscreen-heat-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 4px;
    padding: 0 4px;
}
.bigscreen-heat-cell {
    aspect-ratio: 1;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: default;
    transition: transform 0.2s;
}
.bigscreen-heat-cell:hover { transform: scale(1.15); z-index: 1; }
.bigscreen-heat-cell .heat-hr { font-size: 10px; color: rgba(255,255,255,0.4); }
.bigscreen-heat-cell .heat-cnt { font-size: 11px; color: rgba(255,255,255,0.7); font-weight: 600; }
@media (max-width: 1200px) {
    .bigscreen-heat-grid { grid-template-columns: repeat(8, 1fr); }
}

/* 破损对比行 */
.bigscreen-damage-row { padding: 12px 20px !important; }
.bigscreen-damage-content {
    display: flex;
    gap: 32px;
    padding: 8px 0;
}
.bigscreen-damage-content .dmg-item {
    display: flex;
    align-items: center;
    gap: 8px;
}
.bigscreen-damage-content .dmg-label { font-size: 13px; color: rgba(255,255,255,0.5); }
.bigscreen-damage-content .dmg-val { font-size: 18px; font-weight: 700; color: #ffd166; }
.bigscreen-damage-content .cmp-up { color: #22c55e; }
.bigscreen-damage-content .cmp-down { color: #ef4444; }

/* 大屏模式触发按钮（浮动在右下角） */
.bigscreen-trigger {
    position: fixed;
    bottom: 80px;
    right: 24px;
    z-index: 9999;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    color: #fff;
    border: none;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 40%, transparent);
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bigscreen-trigger:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 60%, transparent);
}

/* 数据大屏模式按钮（数据看板顶部工具栏，紫色品牌渐变 + 流光动效） */
.bigscreen-trigger-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35), 0 0 0 4px rgba(99, 102, 241, 0.08);
    transition: all 0.25s ease;
}
.bigscreen-trigger-btn i {
    font-size: 14px;
    line-height: 1;
}
.bigscreen-trigger-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transition: left 0.6s ease;
    pointer-events: none;
}
.bigscreen-trigger-btn:hover {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.5), 0 0 0 6px rgba(99, 102, 241, 0.12);
}
.bigscreen-trigger-btn:hover::before {
    left: 100%;
}
.bigscreen-trigger-btn:active {
    transform: translateY(0);
}

/* 车辆/司机档案子标签按钮美化（仅作用于 #tab-fleet 内部） */
#tab-fleet .tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--bg-elevated) 70%, transparent);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
#tab-fleet .tab-btn i {
    font-size: 14px;
    line-height: 1;
    color: var(--accent);
    transition: transform 0.25s ease;
}
#tab-fleet .tab-btn:hover:not(.active) {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px color-mix(in srgb, var(--accent) 20%, transparent);
}
#tab-fleet .tab-btn:hover:not(.active) i {
    transform: scale(1.15);
}
#tab-fleet .tab-btn.active {
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    border-color: transparent;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 40%, transparent);
}
#tab-fleet .tab-btn.active i {
    color: #fff;
}

/* ===== AI 功能组件样式 ===== */
.ai-trigger-btn {
    font-size: var(--text-xs) !important;
    padding: 4px 10px !important;
    border-radius: 5px !important;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ai-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    color: var(--text-muted);
    font-size: var(--text-sm);
}
.ai-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: ai-spin 0.8s linear infinite;
}
@keyframes ai-spin {
    to { transform: rotate(360deg); }
}
.ai-error {
    padding: 12px 16px;
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 8%, transparent);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
}
.ai-result {
    padding: 14px 16px;
    background: color-mix(in srgb, var(--accent) 4%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
    border-radius: var(--radius-md);
    margin-top: 8px;
    position: relative;
}
.ai-mode-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 600;
}
.ai-mode-badge.demo {
    background: var(--warning);
    color: #fff;
}
.ai-mode-badge.live {
    background: var(--success);
    color: #fff;
}
.ai-content {
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--text-primary);
}
.ai-content h2,
.ai-content h3,
.ai-content h4 {
    margin: 10px 0 6px 0;
    color: var(--text-primary);
}
.ai-content h3 {
    font-size: var(--text-base);
    font-weight: 700;
}
.ai-content h4 {
    font-size: var(--text-sm);
    font-weight: 600;
}
.ai-content p {
    margin: 6px 0;
}
.ai-content ul {
    margin: 6px 0 6px 18px;
}
.ai-content li {
    margin: 3px 0;
    list-style: disc;
}
.ai-content strong {
    color: var(--accent);
    font-weight: 700;
}
.ai-md-table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0;
    font-size: var(--text-xs);
}
.ai-md-table th,
.ai-md-table td {
    padding: 4px 8px;
    border: 1px solid var(--border);
    text-align: left;
}
.ai-md-table th {
    background: var(--bg-secondary);
    font-weight: 600;
}
.ai-insight-card {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 10px 0;
}
.ai-insight-item {
    padding: 12px;
    border-radius: var(--radius-md);
    border-left: 3px solid;
    background: var(--card-bg);
}
.ai-insight-item.finding { border-color: var(--info); }
.ai-insight-item.risk { border-color: var(--warning); }
.ai-insight-item.advice { border-color: var(--success); }
.ai-insight-item .label {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.ai-insight-item .value {
    font-size: var(--text-sm);
    color: var(--text-primary);
    font-weight: 500;
}
@media (max-width: 768px) {
    .ai-insight-card { grid-template-columns: 1fr; }
}
.ai-search-box {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}
.ai-search-box input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    background: var(--input-bg);
    color: var(--text-primary);
}
.ai-search-box input:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* ===== AI 综合功能中心样式 ===== */
/* v3.0.11：与顶栏其他 .export-btn 大小完全一致（继承 .export-btn 基础样式，只保留品牌渐变和阴影） */
.aihub-trigger-btn {
    background: linear-gradient(135deg, var(--accent), var(--purple, #8b5cf6)) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 40%, transparent) !important;
}
.aihub-trigger-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 50%, transparent) !important;
    filter: brightness(1.1);
}

/* ===== v3.0.11 顶栏环境监控 mini 卡片 ===== */
/* 双层布局：上层 mini 卡片（告警+温湿度+在线）+ 下层多传感器列表
   整体高度与统计卡片（在装中/今日完成/装酒总量）一致，容纳更多内容 */
.header-env-cards {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-left: 8px;
    padding: 3px 8px;
    border-left: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.2s;
    flex-shrink: 0;
    min-width: 300px;
    max-width: 560px;
    flex: 1 1 auto;
    align-self: stretch;
    min-height: 68px;
    justify-content: center;
    overflow: hidden;
}
.header-env-cards:hover {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.env-mini-row {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: nowrap;
    height: 22px;
}
.env-mini-card {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    color: var(--text, #cdd6f4);
    font-size: 12px;
    line-height: 1.2;
    transition: all 0.2s;
    white-space: nowrap;
    position: relative;
    height: 28px;
    box-sizing: border-box;
}
.env-mini-card i {
    font-size: 12px;
    color: var(--accent, #4fc3f7);
    opacity: 0.9;
}
.env-mini-card .env-mini-num {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent, #4fc3f7);
    font-variant-numeric: tabular-nums;
}
.env-mini-card .env-mini-label {
    color: var(--text-muted, #7a8bb5);
    font-size: 11px;
    font-weight: 500;
    margin-left: 1px;
}
.env-mini-card .env-mini-unit {
    color: var(--text-muted, #7a8bb5);
    font-size: 11px;
    margin-right: 1px;
}
.env-mini-card .env-mini-divider {
    color: var(--text-muted, #7a8bb5);
    margin: 0 1px;
    opacity: 0.5;
}
.env-mini-card .env-mini-humi-icon {
    color: #3b82f6;
}

/* 告警样式：红色脉冲（v3.0.19 与传感器盒子统一高度） */
.env-mini-card.env-mini-alert {
    background: color-mix(in srgb, var(--danger, #ef4444) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger, #ef4444) 35%, transparent);
    padding: 4px 10px;
}
.env-mini-card.env-mini-alert i {
    color: var(--danger, #ef4444);
}
.env-mini-card.env-mini-alert .env-mini-num {
    color: var(--danger, #ef4444);
}
.env-mini-card.env-mini-alert.has-alert {
    animation: envAlertPulse 1.4s ease-in-out infinite;
    border-color: var(--danger, #ef4444);
}
@keyframes envAlertPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger, #ef4444) 50%, transparent);
        background: color-mix(in srgb, var(--danger, #ef4444) 12%, transparent);
    }
    50% {
        box-shadow: 0 0 0 5px color-mix(in srgb, var(--danger, #ef4444) 0%, transparent);
        background: color-mix(in srgb, var(--danger, #ef4444) 24%, transparent);
    }
}

/* 温度卡片异常时整体变红（v3.0.19 统一高度） */
.env-mini-card.env-mini-temp {
    padding: 4px 10px;
}
.env-mini-card.env-mini-temp.alert-mode {
    background: color-mix(in srgb, var(--danger, #ef4444) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger, #ef4444) 40%, transparent);
}
.env-mini-card.env-mini-temp.alert-mode .env-mini-num {
    color: var(--danger, #ef4444);
}
.env-mini-card.env-mini-temp.alert-mode .env-mini-humi-icon,
.env-mini-card.env-mini-temp.alert-mode > i:first-child {
    color: var(--danger, #ef4444);
}

/* ===== v3.0.19 顶栏环境监控：铺满整行，视觉更和谐 ===== */
.header-env-cards {
    /* 通过 order 让 .header-env-cards 排在按钮组之前 */
    order: -1 !important;
    /* 在 .header 中拉满整行 */
    flex: 0 0 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 0 4px 0 !important;
    padding: 8px 14px !important;
    border-left: none !important;
    border-top: none !important;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 22%, transparent) !important;
    border-radius: 0;
    cursor: pointer;
    transition: background 0.2s;
    overflow: visible;
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, transparent) 0%, color-mix(in srgb, var(--accent) 2%, transparent) 100%);
    box-sizing: border-box;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px 10px;
    min-height: 36px;
}
.header-env-cards:hover {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent) 0%, color-mix(in srgb, var(--accent) 4%, transparent) 100%);
}

/* env-mini-row 在整行中作为不换行的子组（3个mini卡片） */
.env-mini-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    flex: 0 0 auto !important;
    width: auto;
    margin-right: 4px;
    padding-right: 12px;
    border-right: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}

/* 传感器列表：整行，flex-wrap 自动换行（v3.0.19） */
.env-sensor-list {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    flex: 1 1 auto !important;
    min-width: 0;
    overflow: visible;
    max-height: none;
    width: auto;
}

/* 让每个传感器盒子按比例填充剩余空间，填满整行 */
.env-sensor-item {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 16px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.2;
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    transition: all 0.2s;
    min-height: 28px;
    height: 28px;
    flex: 1 1 0 !important;
    min-width: 160px;
    white-space: nowrap;
    box-sizing: border-box;
}
.env-sensor-item:hover {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    transform: translateY(-1px);
}
.env-sensor-item .env-sensor-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success, #22c55e);
    flex-shrink: 0;
    box-shadow: 0 0 4px var(--success, #22c55e);
}
.env-sensor-item.offline .env-sensor-dot {
    background: var(--text-muted, #7a8bb5);
    box-shadow: none;
}
.env-sensor-item.alert .env-sensor-dot {
    background: var(--danger, #ef4444);
    box-shadow: 0 0 6px var(--danger, #ef4444);
    animation: envSensorDotPulse 1s ease-in-out infinite;
}
@keyframes envSensorDotPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.env-sensor-item .env-sensor-name {
    color: var(--text, #cdd6f4);
    font-weight: 600;
    flex: 0 0 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: 40px;
}
.env-sensor-item .env-sensor-temp,
.env-sensor-item .env-sensor-humi {
    color: var(--accent, #4fc3f7);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    white-space: nowrap;
    flex-shrink: 0;
}
.env-sensor-item .env-sensor-wh {
    font-size: 9px;
    padding: 0 4px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent, #4fc3f7);
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1.3;
}
.env-sensor-item .env-sensor-time {
    font-size: 9px;
    color: var(--text-muted, #7a8bb5);
    opacity: 0.85;
    font-weight: 500;
    flex-shrink: 0;
    white-space: nowrap;
}
.env-sensor-item.alert .env-sensor-wh {
    background: color-mix(in srgb, var(--danger, #ef4444) 22%, transparent);
    color: var(--danger, #ef4444);
}
.env-sensor-item.alert .env-sensor-temp,
.env-sensor-item.alert .env-sensor-humi {
    color: var(--danger, #ef4444);
}
.env-sensor-item.offline .env-sensor-temp,
.env-sensor-item.offline .env-sensor-humi {
    color: var(--text-muted, #7a8bb5);
    opacity: 0.6;
}
.env-sensor-empty {
    text-align: center;
    color: var(--text-muted, #7a8bb5);
    font-size: 10px;
    padding: 4px 0;
    opacity: 0.7;
    white-space: nowrap;
    width: 100%;
}
.env-sensor-empty i {
    margin-right: 3px;
}

/* 顶栏溢出处理 */
@media (max-width: 1600px) {
    .header-env-cards .env-mini-divider,
    .header-env-cards .env-mini-unit {
        display: none;
    }
    .env-mini-card {
        padding: 3px 6px;
    }
    .env-sensor-item {
        padding: 3px 8px;
        font-size: 11px;
        gap: 6px;
    }
}
@media (max-width: 1500px) {
    .env-mini-card.env-mini-alert .env-mini-num {
        font-size: 11px;
    }
    .env-sensor-item {
        padding: 3px 8px;
        font-size: 11px;
    }
    .env-sensor-item .env-sensor-name {
        max-width: 200px;
    }
}
@media (max-width: 1366px) {
    .header-stats { display: none !important; }
    .header-env-cards { margin-left: 0; border-left: none; }
}

.aihub-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 10030;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: aihub-fade-in 0.2s ease-out;
}
@keyframes aihub-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
.aihub-modal {
    width: 90%;
    max-width: 1000px;
    height: 85vh;
    max-height: 750px;
    background: var(--bg-primary);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: aihub-slide-up 0.3s ease-out;
    border: 1px solid var(--border);
}
@keyframes aihub-slide-up {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.aihub-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--bg-elevated)), var(--bg-elevated));
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.aihub-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-primary);
}
.aihub-logo {
    font-size: 24px;
}
.aihub-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
.aihub-close:hover {
    background: color-mix(in srgb, var(--danger) 15%, transparent);
    color: var(--danger);
}
.aihub-search-bar {
    display: flex;
    gap: 16px;
    padding: 12px 24px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    align-items: center;
    flex-shrink: 0;
}
.aihub-search-input-wrap {
    position: relative;
    flex: 1;
    min-width: 240px;
}
.aihub-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 14px;
}
.aihub-search-input {
    width: 100%;
    padding: 8px 12px 8px 36px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: var(--text-sm);
    background: var(--input-bg);
    color: var(--text-primary);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.aihub-search-input:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.aihub-cat-group {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.aihub-cat-btn {
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.aihub-cat-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.aihub-cat-btn.active {
    background: var(--accent);
    color: var(--on-accent, #fff);
    border-color: var(--accent);
}
.aihub-body {
    flex: 1;
    overflow: hidden;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.aihub-grid {
    flex: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    align-content: start;
}
.aihub-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    cursor: default;
}
.aihub-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}
.aihub-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    flex-shrink: 0;
}
.aihub-card-body {
    flex: 1;
    min-width: 0;
}
.aihub-card-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.aihub-card-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.5;
}
.aihub-card-action {
    flex-shrink: 0;
}
.aihub-run-btn,
.aihub-jump-btn {
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: filter 0.15s, transform 0.15s;
    white-space: nowrap;
}
.aihub-run-btn {
    background: var(--success);
    color: #fff;
}
.aihub-run-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}
.aihub-jump-btn {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.aihub-jump-btn:hover {
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    transform: translateY(-1px);
}
.aihub-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
}
.aihub-empty i {
    font-size: 32px;
    margin-bottom: 8px;
    display: block;
}
.aihub-result-panel {
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card-bg);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.aihub-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
}
.aihub-result-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
}
.aihub-result-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    padding: 2px 6px;
    border-radius: 4px;
}
.aihub-result-close:hover {
    background: color-mix(in srgb, var(--text-muted) 15%, transparent);
}
.aihub-result-content {
    padding: 16px;
    max-height: 300px;
    overflow-y: auto;
}
.aihub-footer {
    padding: 10px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.aihub-stat {
    font-weight: 600;
}
@media (max-width: 768px) {
    .aihub-modal {
        width: 95%;
        height: 90vh;
    }
    .aihub-grid {
        grid-template-columns: 1fr;
    }
    .aihub-search-bar {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ============================================================
 * v3.0.11 库房环境监控（env-monitor）+ 批次追溯（batch-trace）
 * 主题色：环境监控用 orange（#f97316），批次追溯用 purple（#7c3aed）
 * ============================================================ */

/* ========== 通用：env-badge-dot 顶栏红点告警 ========== */
.env-badge-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    margin-left: 4px;
    box-shadow: 0 0 0 2px #fff, 0 0 6px #ef4444;
    animation: env-dot-pulse 1.5s ease-in-out infinite;
    vertical-align: middle;
}
@keyframes env-dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.3); }
}

/* ========== 环境监控弹窗 ========== */
.env-monitor-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10030;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: env-fade-in 0.2s ease-out;
    padding: 20px;
}
@keyframes env-fade-in { from { opacity: 0; } to { opacity: 1; } }

.env-monitor-modal {
    width: 95%;
    max-width: 1200px;
    max-height: 90vh;
    background: var(--bg-primary, #fff);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: env-slide-up 0.3s ease-out;
    border: 1px solid var(--border, #e5e7eb);
}
@keyframes env-slide-up {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.env-monitor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--orange, #f97316), #fb923c);
    color: #fff;
    flex-shrink: 0;
}
.env-monitor-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
}
.env-mode-badge {
    font-size: 11px;
    background: rgba(255,255,255,0.25);
    padding: 2px 10px;
    border-radius: 12px;
    font-weight: 500;
}
.env-close-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.2s;
}
.env-close-btn:hover { background: rgba(255,255,255,0.4); }

/* 统计卡片 */
.env-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 16px 20px;
    background: var(--bg-secondary, #f9fafb);
    flex-shrink: 0;
}
.env-stat-card {
    background: var(--card-bg, #fff);
    padding: 12px 14px;
    border-radius: 10px;
    text-align: center;
    border-left: 4px solid var(--accent, #3b82f6);
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.env-stat-card.env-stat-normal { border-left-color: var(--success, #22c55e); }
.env-stat-card.env-stat-warn { border-left-color: var(--warning, #f59e0b); }
.env-stat-card.env-stat-danger { border-left-color: var(--danger, #ef4444); }
.env-stat-num {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}
.env-stat-label {
    font-size: 12px;
    color: var(--text-muted, #6b7280);
    margin-top: 4px;
}

/* 标签页 */
.env-tabs {
    display: flex;
    gap: 4px;
    padding: 0 20px;
    border-bottom: 1px solid var(--border, #e5e7eb);
    background: var(--bg-secondary, #f9fafb);
    flex-shrink: 0;
    overflow-x: auto;
}
.env-tab-btn {
    background: transparent;
    border: none;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    white-space: nowrap;
}
.env-tab-btn:hover { color: var(--orange, #f97316); }
.env-tab-btn.active {
    color: var(--orange, #f97316);
    border-bottom-color: var(--orange, #f97316);
    font-weight: 600;
}
.env-tab-content {
    display: none;
    padding: 18px 20px;
    overflow-y: auto;
    flex: 1;
}
.env-tab-content.active { display: block; }

/* 实时面板卡片网格 */
.env-realtime-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}
.env-card {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    padding: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    transition: transform 0.2s, box-shadow 0.2s;
}
.env-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.env-card.env-card-alert {
    border-color: var(--danger, #ef4444);
    background: color-mix(in srgb, var(--danger, #ef4444) 5%, var(--card-bg, #fff));
    animation: env-alert-pulse 2s ease-in-out infinite;
}
@keyframes env-alert-pulse {
    0%, 100% { box-shadow: 0 1px 4px rgba(239,68,68,0.1); }
    50% { box-shadow: 0 1px 12px rgba(239,68,68,0.3); }
}
.env-card.env-card-offline { opacity: 0.6; }
.env-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.env-card-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.env-card-status { font-size: 12px; }
.env-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    background: var(--bg-secondary, #f3f4f6);
    color: var(--text-secondary);
}
.env-badge-red { background: color-mix(in srgb, var(--danger, #ef4444) 15%, transparent); color: var(--danger, #ef4444); }
.env-badge-green { background: color-mix(in srgb, var(--success, #22c55e) 15%, transparent); color: var(--success, #22c55e); }
.env-badge-gray { background: var(--bg-secondary, #f3f4f6); color: var(--text-muted); }

.env-val-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}
.env-val-item { text-align: center; }
.env-val-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.env-val {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
}
.env-val-ok { color: var(--success, #22c55e); }
.env-val-alert { color: var(--danger, #ef4444); }
.env-card-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    color: var(--text-muted);
    border-top: 1px dashed var(--border, #e5e7eb);
    padding-top: 8px;
}
.env-card-actions {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border, #e5e7eb);
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}
.env-alert-msg {
    margin-top: 8px;
    padding: 6px 8px;
    background: color-mix(in srgb, var(--danger, #ef4444) 12%, transparent);
    color: var(--danger, #ef4444);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
}

/* 过滤栏 */
.env-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding: 10px 14px;
    background: var(--bg-secondary, #f9fafb);
    border-radius: 8px;
}
.env-filter-bar label { font-size: 13px; color: var(--text-secondary); }
.env-filter-bar select,
.env-filter-bar input {
    padding: 5px 10px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
    font-size: 13px;
    background: var(--input-bg, #fff);
    color: var(--text-primary);
}
.env-chart-wrap {
    background: var(--card-bg, #fff);
    padding: 14px;
    border-radius: 10px;
    border: 1px solid var(--border, #e5e7eb);
}

/* 按钮 */
.env-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    background: var(--bg-secondary, #f3f4f6);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
}
.env-btn:hover { background: var(--bg-hover, #e5e7eb); }
.env-btn-primary {
    background: var(--orange, #f97316);
    border-color: var(--orange, #f97316);
    color: #fff;
}
.env-btn-primary:hover { filter: brightness(1.1); background: var(--orange, #f97316); }
.env-btn-mini {
    background: transparent;
    border: 1px solid var(--border, #e5e7eb);
    color: var(--text-secondary);
    width: 28px;
    height: 28px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    margin-right: 3px;
    transition: all 0.2s;
}
.env-btn-mini:hover { background: var(--accent, #3b82f6); color: var(--on-accent, #fff); border-color: var(--accent, #3b82f6); }
.env-btn-mini.env-btn-danger:hover { background: var(--danger, #ef4444); border-color: var(--danger, #ef4444); }

.env-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

/* 表单 */
.env-form {
    background: var(--card-bg, #fff);
    padding: 16px;
    border-radius: 10px;
    border: 1px solid var(--border, #e5e7eb);
    max-width: 480px;
}
.env-form h3 {
    margin: 0 0 12px 0;
    font-size: 15px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
}
.env-form-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.env-form-row label {
    min-width: 90px;
    font-size: 13px;
    color: var(--text-secondary);
}
.env-form-row input,
.env-form-row select {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
    font-size: 13px;
    background: var(--input-bg, #fff);
    color: var(--text-primary);
}
.env-form-row input:focus,
.env-form-row select:focus {
    border-color: var(--orange, #f97316);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange, #f97316) 25%, transparent);
}

.env-success-msg {
    padding: 10px 14px;
    background: color-mix(in srgb, var(--success, #22c55e) 12%, transparent);
    color: var(--success, #22c55e);
    border-radius: 6px;
    font-size: 13px;
    border: 1px solid color-mix(in srgb, var(--success, #22c55e) 30%, transparent);
    word-break: break-all;
}
.env-error-msg {
    padding: 10px 14px;
    background: color-mix(in srgb, var(--danger, #ef4444) 12%, transparent);
    color: var(--danger, #ef4444);
    border-radius: 6px;
    font-size: 13px;
    border: 1px solid color-mix(in srgb, var(--danger, #ef4444) 30%, transparent);
}

/* 表格 */
.env-alerts-table, .env-sensors-table {
    overflow-x: auto;
    background: var(--card-bg, #fff);
    border-radius: 10px;
    border: 1px solid var(--border, #e5e7eb);
}
.env-alerts-table table, .env-sensors-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.env-alerts-table th, .env-alerts-table td,
.env-sensors-table th, .env-sensors-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border, #e5e7eb);
    text-align: left;
}
.env-alerts-table th, .env-sensors-table th {
    background: var(--bg-secondary, #f9fafb);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 12px;
    position: sticky;
    top: 0;
}
.env-alert-row:hover, .env-sensors-table tr:hover { background: var(--bg-secondary, #f9fafb); }
.env-alerts-table code, .env-sensors-table code {
    font-size: 11px;
    padding: 1px 5px;
    background: var(--bg-secondary, #f3f4f6);
    border-radius: 3px;
    color: var(--accent, #3b82f6);
}

.env-empty {
    text-align: center;
    padding: 50px 20px;
    color: var(--text-muted);
    font-size: 14px;
}
.env-empty i { font-size: 36px; display: block; margin-bottom: 12px; opacity: 0.4; }
.env-empty p { margin: 6px 0; }
.env-empty p.bt-hint { font-size: 12px; opacity: 0.7; }

.env-loading {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
    font-size: 14px;
}

/* ===== v3.4 运维中心 ===== */
.ops-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.ops-health-section {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 300px;
}
.ops-health-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 100px;
}
.ops-health-label {
    font-size: var(--text-xs, 11px);
    color: var(--text-muted);
    margin-bottom: 4px;
}
.ops-health-number {
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
    color: #22c55e;
    transition: color 0.5s;
    font-variant-numeric: tabular-nums;
}
.ops-health-status {
    font-size: var(--text-sm, 13px);
    margin-top: 4px;
    font-weight: 600;
}
.ops-health-bar-container {
    flex: 1;
    height: 8px;
    background: var(--bg-elevated, #f3f4f6);
    border-radius: 4px;
    overflow: hidden;
}
.ops-health-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s, background 0.5s;
}
.ops-action-section {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ops-diagnosis-btn {
    padding: 8px 20px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: var(--text-sm, 13px);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ops-diagnosis-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}
.ops-diagnosis-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.ops-diagnosis-time, .ops-update-time {
    font-size: var(--text-xs, 11px);
    color: var(--text-muted);
}
.ops-refresh-btn {
    padding: 8px 16px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    background: var(--bg-elevated, #fff);
    color: var(--text-primary);
    font-size: var(--text-sm, 13px);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ops-refresh-btn:hover {
    border-color: var(--accent, #2563eb);
    color: var(--accent, #2563eb);
}
.ops-sysinfo {
    font-size: var(--text-xs, 11px);
    color: var(--text-muted);
    margin-bottom: 16px;
    padding: 8px 12px;
    background: var(--bg-elevated, #f9fafb);
    border-radius: 6px;
    border: 1px solid var(--border, #f3f4f6);
}
.ops-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.ops-card {
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--bg-elevated, #fff);
    border: 1px solid var(--border, #e5e7eb);
    transition: all 0.2s;
}
.ops-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.ops-card-ok { border-left: 3px solid #22c55e; }
.ops-card-warning { border-left: 3px solid #f59e0b; }
.ops-card-critical { border-left: 3px solid #ef4444; }
.ops-card-label {
    font-size: var(--text-xs, 11px);
    color: var(--text-muted);
    margin-bottom: 6px;
}
.ops-card-value {
    font-size: var(--text-base, 15px);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.ops-section {
    margin-bottom: 20px;
}
.ops-section-title {
    font-size: var(--text-sm, 13px);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--border, #e5e7eb);
    display: flex;
    align-items: center;
    gap: 6px;
}
.ops-diagnosis-panel {
    min-height: 80px;
}
.ops-diagnosis-ok {
    padding: 20px;
    text-align: center;
    color: #22c55e;
    font-size: var(--text-sm, 13px);
    font-weight: 600;
}
.ops-diagnosis-ok i {
    font-size: 28px;
    display: block;
    margin-bottom: 8px;
}
.ops-diagnosis-summary {
    padding: 10px 14px;
    margin-bottom: 10px;
    background: var(--bg-elevated, #f9fafb);
    border-radius: 8px;
    font-size: var(--text-sm, 13px);
    color: var(--text-primary);
    font-weight: 600;
}
.ops-suggestion {
    padding: 12px 14px;
    margin-bottom: 10px;
    border-radius: 8px;
    background: var(--bg-elevated, #fff);
    border: 1px solid var(--border, #e5e7eb);
}
.ops-suggestion-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.ops-suggestion-level {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
    flex-shrink: 0;
}
.ops-suggestion-title {
    font-size: var(--text-sm, 13px);
    font-weight: 600;
    color: var(--text-primary);
}
.ops-suggestion-detail {
    font-size: var(--text-xs, 11px);
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 6px;
}
.ops-suggestion-action {
    font-size: var(--text-xs, 11px);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.ops-suggestion-link {
    padding: 3px 10px;
    border: none;
    border-radius: 6px;
    background: var(--accent, #2563eb);
    color: var(--on-accent, #fff);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ops-suggestion-link:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}
.ops-diagnosis-mode {
    text-align: right;
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 8px;
    opacity: 0.8;
}
.ops-alert-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ops-alert-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--bg-elevated, #fff);
    border: 1px solid var(--border, #e5e7eb);
}
.ops-alert-icon {
    font-size: 16px;
    flex-shrink: 0;
}
.ops-alert-body {
    flex: 1;
    min-width: 0;
}
.ops-alert-msg {
    font-size: var(--text-sm, 13px);
    color: var(--text-primary);
    font-weight: 500;
    word-break: break-word;
}
.ops-alert-meta {
    font-size: var(--text-xs, 11px);
    color: var(--text-muted);
    margin-top: 2px;
}
.ops-alert-link {
    padding: 4px 12px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
    background: transparent;
    color: var(--accent, #2563eb);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}
.ops-alert-link:hover {
    background: var(--accent, #2563eb);
    color: var(--on-accent, #fff);
}
.ops-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ops-shortcut-btn {
    padding: 8px 16px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    background: var(--bg-elevated, #fff);
    color: var(--text-primary);
    font-size: var(--text-sm, 13px);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ops-shortcut-btn:hover {
    border-color: var(--accent, #2563eb);
    color: var(--accent, #2563eb);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.ops-loading {
    text-align: center;
    padding: 30px;
    color: var(--text-muted);
    font-size: var(--text-sm, 13px);
}
.ops-loading i {
    font-size: 24px;
    display: block;
    margin-bottom: 8px;
}
/* 运维工具台 Tab 样式 */
.ops-tool-tab {
    padding: 8px 14px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px 8px 0 0;
    background: var(--bg-elevated, #fff);
    color: var(--text-muted);
    font-size: var(--text-sm, 13px);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: -2px;
}
.ops-tool-tab:hover {
    border-color: var(--accent, #2563eb);
    color: var(--accent, #2563eb);
}
.ops-tool-tab.active {
    border-bottom: 2px solid var(--accent, #2563eb);
    color: var(--accent, #2563eb);
    font-weight: 600;
    background: var(--card-bg, #fff);
}
.ops-tool-panel {
    padding: 12px 0;
}
.ops-empty {
    text-align: center;
    padding: 30px;
    color: var(--text-muted);
    font-size: var(--text-sm, 13px);
}
.ops-empty i {
    font-size: 24px;
    display: block;
    margin-bottom: 8px;
    opacity: 0.4;
}
.ops-error {
    padding: 16px;
    text-align: center;
    color: #ef4444;
    font-size: var(--text-sm, 13px);
}
/* 运维中心响应式 */
@media (max-width: 768px) {
    .ops-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ops-header {
        flex-direction: column;
        align-items: stretch;
    }
    .ops-health-section {
        min-width: auto;
    }
}
@media (max-width: 480px) {
    .ops-cards-grid {
        grid-template-columns: 1fr;
    }
    .ops-health-number {
        font-size: 32px;
    }
}

/* ========== 分厂出库分析 ========== */
.fa-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0;
}
.fa-date-group {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
}
.fa-date-group input[type="date"] {
    padding: 4px 8px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    background: var(--bg-secondary, #f5f5f5);
    color: var(--text-primary);
    font-size: 13px;
}
.fa-btn {
    padding: 5px 14px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.fa-btn-primary {
    background: var(--accent, #2563eb);
    color: var(--on-accent, #fff);
}
.fa-btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
.fa-btn-export {
    background: var(--bg-elevated, #fff);
    color: var(--text-primary);
    border: 1px solid var(--border-color, #e5e7eb);
}
.fa-btn-export:hover { border-color: var(--accent, #2563eb); color: var(--accent, #2563eb); }

/* ===== 分厂分析 日期范围选择器美化（主题自适应） ===== */
.fa-daterange {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 14px;
    padding: 5px 10px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-secondary, #f5f5f5) 72%, transparent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.fa-daterange-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}
.fa-daterange-label i { color: var(--accent, #2563eb); }
.fa-date-input {
    padding: 5px 10px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    background: var(--bg-elevated, #fff);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
    color-scheme: light dark;
    cursor: pointer;
}
.fa-date-input:hover { border-color: var(--accent, #2563eb); }
.fa-date-input:focus {
    outline: none;
    border-color: var(--accent, #2563eb);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #2563eb) 25%, transparent);
}
.fa-daterange-sep {
    color: var(--text-muted, #999);
    font-weight: 600;
}
.fa-daterange-btn { padding: 5px 12px; border-radius: 8px; }

/* Tab 栏 */
.fa-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--border-color, #e5e7eb);
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.fa-tab-btn {
    padding: 8px 16px;
    border: none;
    background: none;
    color: var(--text-muted, #999);
    font-size: 14px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
}
.fa-tab-btn:hover { color: var(--text-primary); }
.fa-tab-active {
    color: var(--accent, #2563eb);
    border-bottom-color: var(--accent, #2563eb);
    font-weight: 600;
}

/* 指标/粒度切换栏 */
.fa-metric-bar, .fa-filter-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 8px 0;
    font-size: 13px;
    color: var(--text-secondary);
}
.fa-metric-btn, .fa-gran-btn, .fa-factory-btn {
    padding: 4px 12px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 4px;
    background: var(--bg-elevated, #fff);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}
.fa-metric-btn:hover, .fa-gran-btn:hover, .fa-factory-btn:hover {
    border-color: var(--accent, #2563eb);
    color: var(--accent, #2563eb);
}
.fa-metric-active, .fa-gran-active, .fa-factory-active {
    background: var(--accent, #2563eb);
    color: var(--on-accent, #fff);
    border-color: var(--accent, #2563eb);
}

/* 指标卡片 */
.fa-cards-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 12px 0;
}
.fa-card {
    flex: 1;
    min-width: 160px;
    padding: 14px;
    border-radius: 10px;
    background: var(--card-bg, #fff);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    text-align: center;
}
.fa-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}
.fa-card-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}
.fa-card-label {
    font-size: 12px;
    color: var(--text-muted, #999);
    margin-top: 2px;
}
.fa-card-sub {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-secondary);
}
.fa-card-ratio {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-muted, #999);
}

/* 图表区域 */
.fa-chart-row {
    display: flex;
    gap: 12px;
    margin: 12px 0;
    flex-wrap: wrap;
}
.fa-chart-box {
    min-height: 300px;
    border-radius: 10px;
    background: var(--card-bg, #fff);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    padding: 8px;
}

/* 表格 */
.fa-table-wrap {
    margin: 12px 0;
    overflow-x: auto;
}
.fa-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.fa-table th {
    padding: 8px 10px;
    text-align: left;
    background: var(--bg-secondary, #f5f5f5);
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 2px solid var(--border-color, #e5e7eb);
}
.fa-table td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    color: var(--text-primary);
    white-space: nowrap;
}
.fa-table tbody tr:hover {
    background: color-mix(in srgb, var(--accent, #2563eb) 5%, transparent);
}
.fa-table-summary td {
    font-weight: 700;
    background: var(--bg-secondary, #f5f5f5);
}
.fa-table-info {
    font-size: 12px;
    color: var(--text-muted, #999);
    margin: 4px 0;
}

/* 标题 */
.fa-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 16px 0 8px;
    padding-left: 8px;
    border-left: 3px solid var(--accent, #2563eb);
}

/* 标签 */
.fa-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}
.fa-ratio {
    font-size: 11px;
    color: var(--text-muted, #999);
}
.fa-variety-tag {
    display: inline-block;
    padding: 3px 10px;
    margin: 2px 4px 2px 0;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent, #2563eb) 12%, transparent);
    color: var(--accent, #2563eb);
    font-size: 13px;
}
.fa-selected-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.fa-hint {
    color: var(--text-muted, #999);
    font-size: 13px;
}
.fa-summary-bar {
    display: flex;
    gap: 24px;
    padding: 10px 0;
    font-size: 14px;
    color: var(--text-secondary);
    flex-wrap: wrap;
}
.fa-summary-bar b {
    color: var(--text-primary);
    font-size: 16px;
}

/* 计算说明条 */
.fa-note-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 14px;
    margin: 8px 0 4px;
    border: 1px solid color-mix(in srgb, var(--accent, #2563eb) 22%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent, #2563eb) 5%, transparent);
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-secondary);
}
.fa-note-title {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    color: var(--accent, #2563eb);
    white-space: nowrap;
}
.fa-note-text {
    flex: 1;
    min-width: 260px;
}

/* 环比/同比 对比条 */
.fa-compare-bar {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 16px;
    margin: 8px 0 4px;
    border: 1px dashed var(--border-color, rgba(128,128,128,0.25));
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent, #2563eb) 6%, transparent);
    font-size: 13px;
    color: var(--text-secondary);
}
.fa-compare-bar .fa-cmp-item {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--bg-secondary, #1a1a1a) 60%, transparent);
}
.fa-compare-bar .fa-cmp-tag {
    font-weight: 600;
    color: var(--text-primary);
}
.fa-compare-bar .fa-cmp-range {
    color: var(--text-muted, #999);
}
.fa-compare-bar .fa-cmp-val {
    font-weight: 600;
    color: var(--text-primary);
}
.fa-empty {
    text-align: center;
    padding: 24px;
    color: var(--text-muted, #999);
    font-size: 13px;
}
.fa-error {
    padding: 16px;
    text-align: center;
    color: #ef4444;
    font-size: 14px;
}
.fa-tab-panel {
    min-height: 200px;
}

/* ============================================================
   分厂出库分析 · UI 美化增强 v20260803
   （时间对比 + 智能洞察，主题适配：全部使用 CSS 变量）
   ============================================================ */

/* --- 工具栏美化：悬浮卡片化 --- */
.fa-toolbar {
    background: var(--card-bg, #fff);
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
    margin-bottom: 12px;
    border: 1px solid color-mix(in srgb, var(--border-color, #e5e7eb) 60%, transparent);
}

/* --- Tab 按钮美化：胶囊悬浮 --- */
.fa-tab-btn {
    border-radius: 8px 8px 0 0;
    padding: 9px 18px;
    font-weight: 500;
}
.fa-tab-btn:hover {
    background: color-mix(in srgb, var(--accent, #2563eb) 8%, transparent);
}
.fa-tab-active {
    background: color-mix(in srgb, var(--accent, #2563eb) 10%, transparent);
    box-shadow: inset 0 -2px 0 var(--accent, #2563eb);
}

/* --- 指标卡片美化：立体感 + 悬停上浮 --- */
.fa-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border: 1px solid color-mix(in srgb, var(--border-color, #e5e7eb) 55%, transparent);
}
.fa-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

/* --- 图表容器美化 --- */
.fa-chart-box {
    border: 1px solid color-mix(in srgb, var(--border-color, #e5e7eb) 55%, transparent);
    transition: box-shadow 0.25s ease;
}
.fa-chart-box:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

/* --- 表格美化：斑马纹 + 表头吸顶感 --- */
.fa-table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--bg-secondary, #f5f5f5) 45%, transparent);
}
.fa-table tbody tr {
    transition: background 0.15s ease;
}

/* --- 时间对比：粒度按钮 --- */
.fa-tc-btn {
    padding: 6px 16px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 20px;
    background: var(--bg-elevated, #fff);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.fa-tc-btn:hover {
    border-color: var(--accent, #2563eb);
    color: var(--accent, #2563eb);
    transform: translateY(-1px);
}
.fa-tc-active, .fa-tc-btn.fa-tc-active {
    background: var(--accent, #2563eb) !important;
    color: #fff !important;
    border-color: var(--accent, #2563eb) !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent, #2563eb) 35%, transparent);
}

/* --- 时间对比：汇总条 --- */
.fa-tc-summary {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 12px 0;
}
.fa-tc-stat {
    flex: 1;
    min-width: 140px;
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--card-bg, #fff);
    border: 1px solid color-mix(in srgb, var(--border-color, #e5e7eb) 55%, transparent);
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fa-tc-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.09);
}
.fa-tc-stat-label {
    font-size: 12px;
    color: var(--text-muted, #999);
}
.fa-tc-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}
.fa-up { color: #4CAF50; font-weight: 600; }
.fa-down { color: #EF5350; font-weight: 600; }

/* --- 图表卡片（带标题的容器） --- */
.fa-chart-card {
    background: var(--card-bg, #fff);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
    border: 1px solid color-mix(in srgb, var(--border-color, #e5e7eb) 55%, transparent);
    margin: 12px 0;
    min-width: 280px;
    transition: box-shadow 0.25s ease;
}
.fa-chart-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.09);
}
.fa-chart-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.fa-chart-card-title i {
    color: var(--accent, #2563eb);
    font-size: 15px;
}
.fa-chart-card-sub {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted, #999);
    margin-left: 4px;
}
.fa-chart-box-inner {
    width: 100%;
}

/* --- 智能洞察：子导航 --- */
.fa-insight-nav {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 4px 0 14px;
}
.fa-in-btn {
    padding: 8px 20px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 22px;
    background: var(--card-bg, #fff);
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.25s;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.fa-in-btn:hover {
    border-color: var(--accent, #2563eb);
    color: var(--accent, #2563eb);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.fa-in-btn.fa-in-active {
    background: linear-gradient(135deg, var(--accent, #2563eb), color-mix(in srgb, var(--accent, #2563eb) 75%, #7c3aed));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent, #2563eb) 40%, transparent);
}

/* --- 智能洞察：统计卡片 --- */
.fa-term-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 10px 0 14px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.8;
    color: #ffffff;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent, #6366f1) 22%, transparent), color-mix(in srgb, var(--accent, #6366f1) 10%, transparent));
    border: 1px solid color-mix(in srgb, var(--accent, #6366f1) 55%, transparent);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(6px);
}
.fa-term-note i {
    margin-top: 3px;
    color: #fbbf24;
    font-size: 14px;
    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.5));
}
.fa-term-note .fa-term-note-txt {
    flex: 1;
    min-width: 0;
    word-break: normal;
    overflow-wrap: break-word;
    color: #ffffff;
}
.fa-term-note .t-a    { color: var(--term-a) !important; }
.fa-term-note .t-x    { color: var(--term-x) !important; }
.fa-term-note .t-cv   { color: var(--term-cv) !important; }
.fa-term-note .t-combo{ color: var(--term-combo) !important; }
.fa-term-note b {
    color: #fde68a;
    font-weight: 700;
}
.fa-term-note code {
    background: rgba(0, 0, 0, 0.32);
    color: #ffffff;
    padding: 1px 8px;
    border-radius: 5px;
    font-size: 12px;
    font-family: var(--font-mono, monospace);
}
/* 浅色主题：深色文字 + 强对比背景（必须在全局规则之后才生效） */
html[data-theme="light"] .fa-term-note {
    color: #2B2620 !important;
    font-weight: 500;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent, #96691F) 8%, #ffffff), #ffffff) !important;
    border: 1px solid color-mix(in srgb, var(--accent, #96691F) 35%, transparent) !important;
    box-shadow: 0 2px 8px rgba(150, 105, 31, 0.12) !important;
}
html[data-theme="light"] .fa-term-note i {
    color: #B45309 !important;
    filter: drop-shadow(0 0 3px rgba(180, 83, 9, 0.35));
}
html[data-theme="light"] .fa-term-note .fa-term-note-txt { color: #2B2620 !important; }
html[data-theme="light"] .fa-term-note .t-a    { color: var(--term-a) !important; }
html[data-theme="light"] .fa-term-note .t-x    { color: var(--term-x) !important; }
html[data-theme="light"] .fa-term-note .t-cv   { color: var(--term-cv) !important; }
html[data-theme="light"] .fa-term-note .t-combo{ color: var(--term-combo) !important; }
html[data-theme="light"] .fa-term-note b { color: #8A5F1E !important; font-weight: 700; }
html[data-theme="light"] .fa-term-note code {
    background: rgba(150, 105, 31, 0.10) !important;
    color: #8A5F1E !important;
    border: 1px solid rgba(150, 105, 31, 0.22) !important;
}
/* 素白(clean)主题：纯白底 + 深色正文 + 标题带彩色高亮底纹（最高优先级，保证可读性） */
html[data-theme="light"][data-style="clean"] .fa-term-note {
    color: #0f172a !important;
    font-weight: 500;
    background: #ffffff !important;
    background-image: linear-gradient(135deg, rgba(180, 83, 9, 0.06), rgba(29, 78, 216, 0.04) 30%, rgba(4, 120, 87, 0.04) 60%, rgba(109, 40, 217, 0.06)) !important;
    border: 1px solid rgba(160, 103, 60, 0.25) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
}
html[data-theme="light"][data-style="clean"] .fa-term-note .fa-term-note-txt { color: #0f172a !important; }
html[data-theme="light"][data-style="clean"] .fa-term-note .t-a    { color: #b45309 !important; font-weight: 700; }
html[data-theme="light"][data-style="clean"] .fa-term-note .t-x    { color: #1d4ed8 !important; font-weight: 700; }
html[data-theme="light"][data-style="clean"] .fa-term-note .t-cv   { color: #047857 !important; font-weight: 700; }
html[data-theme="light"][data-style="clean"] .fa-term-note .t-combo{ color: #6d28d9 !important; font-weight: 700; }
html[data-theme="light"][data-style="clean"] .fa-term-note b { color: #1e3a8a !important; font-weight: 700; }
html[data-theme="light"][data-style="clean"] .fa-term-note i { color: #d97706 !important; }
/* 深色风格主题（neon/shenlan/obsidian/abyss）虽然 data-theme=light 但页面是深色，恢复深色术语卡 */
[data-theme="light"][data-style="neon"] .fa-term-note,
[data-theme="light"][data-style="shenlan"] .fa-term-note,
[data-theme="light"][data-style="obsidian"] .fa-term-note {
    color: #ffffff !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent, #6366f1) 22%, transparent), color-mix(in srgb, var(--accent, #6366f1) 10%, transparent)) !important;
    border: 1px solid color-mix(in srgb, var(--accent, #6366f1) 55%, transparent) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18) !important;
}
[data-theme="light"][data-style="neon"] .fa-term-note i,
[data-theme="light"][data-style="shenlan"] .fa-term-note i,
[data-theme="light"][data-style="obsidian"] .fa-term-note i { color: #fbbf24 !important; }
[data-theme="light"][data-style="neon"] .fa-term-note .fa-term-note-txt,
[data-theme="light"][data-style="shenlan"] .fa-term-note .fa-term-note-txt,
[data-theme="light"][data-style="obsidian"] .fa-term-note .fa-term-note-txt { color: #ffffff !important; }
[data-theme="light"][data-style="neon"] .fa-term-note b,
[data-theme="light"][data-style="shenlan"] .fa-term-note b,
[data-theme="light"][data-style="obsidian"] .fa-term-note b { color: #fde68a !important; }
[data-theme="light"][data-style="neon"] .fa-term-note .t-a,
[data-theme="light"][data-style="shenlan"] .fa-term-note .t-a,
[data-theme="light"][data-style="obsidian"] .fa-term-note .t-a { color: var(--term-a) !important; }
[data-theme="light"][data-style="neon"] .fa-term-note .t-x,
[data-theme="light"][data-style="shenlan"] .fa-term-note .t-x,
[data-theme="light"][data-style="obsidian"] .fa-term-note .t-x { color: var(--term-x) !important; }
[data-theme="light"][data-style="neon"] .fa-term-note .t-cv,
[data-theme="light"][data-style="shenlan"] .fa-term-note .t-cv,
[data-theme="light"][data-style="obsidian"] .fa-term-note .t-cv { color: var(--term-cv) !important; }
[data-theme="light"][data-style="neon"] .fa-term-note .t-combo,
[data-theme="light"][data-style="shenlan"] .fa-term-note .t-combo,
[data-theme="light"][data-style="obsidian"] .fa-term-note .t-combo { color: var(--term-combo) !important; }
[data-theme="light"][data-style="neon"] .fa-term-note code,
[data-theme="light"][data-style="shenlan"] .fa-term-note code,
[data-theme="light"][data-style="obsidian"] .fa-term-note code {
    background: rgba(0, 0, 0, 0.32) !important;
    color: #ffffff !important;
    border: none !important;
}
.fa-stat-cards {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 12px 0;
}
.fa-stat-card {
    flex: 1;
    min-width: 170px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--card-bg, #fff);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    border: 1px solid color-mix(in srgb, var(--border-color, #e5e7eb) 55%, transparent);
    display: flex;
    align-items: center;
    gap: 14px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.fa-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}
.fa-stat-card-icon {
    font-size: 26px;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, currentColor 10%, transparent);
    flex-shrink: 0;
}
.fa-stat-card-body { flex: 1; min-width: 0; }
.fa-stat-card-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}
.fa-stat-card-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}
.fa-stat-card-sub {
    font-size: 11px;
    color: var(--text-muted, #999);
    margin-top: 2px;
}

/* --- 智能洞察：风险等级徽章 --- */
.fa-level-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* --- 智能洞察：AI 运营摘要 --- */
.fa-ai-summary-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 12px 0 4px;
    padding: 12px 16px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent, #2563eb) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent, #2563eb) 30%, transparent);
}
.fa-btn-ai {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    border: none;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.35);
}
.fa-btn-ai:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.45);
}
.fa-ai-summary-box {
    margin: 8px 0 16px;
}
.fa-ai-summary {
    padding: 16px 20px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent, #2563eb) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent, #2563eb) 25%, transparent);
    border-left: 4px solid var(--accent, #2563eb);
}
.fa-ai-summary-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--accent, #2563eb);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.fa-ai-summary-body {
    font-size: 13px;
    line-height: 1.9;
    color: var(--text-primary);
    white-space: normal;
}
.fa-loading {
    padding: 20px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
}
.fa-error {
    padding: 20px;
    text-align: center;
    color: #EF5350;
    font-size: 13px;
}

/* --- 智能洞察：预警过滤器 --- */
.fa-alert-filter {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.fa-af-btn {
    padding: 4px 14px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 16px;
    background: var(--bg-elevated, #fff);
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.fa-af-btn:hover {
    border-color: var(--accent, #2563eb);
    color: var(--accent, #2563eb);
}
.fa-af-btn.fa-af-active {
    background: var(--accent, #2563eb);
    color: var(--on-accent, #fff);
    border-color: var(--accent, #2563eb);
}

/* --- 智能洞察：预警/异常列表项 --- */
.fa-alert-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 520px;
    overflow-y: auto;
    padding-right: 4px;
}
.fa-alert-item {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--bg-secondary, #f5f5f5);
    border-left: 3px solid var(--border-color, #e5e7eb);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fa-alert-item:hover {
    transform: translateX(3px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.07);
}
.fa-alert-high { border-left-color: #EF5350; background: color-mix(in srgb, #EF5350 7%, var(--bg-secondary, #f5f5f5)); }
.fa-alert-medium { border-left-color: #FFB74D; background: color-mix(in srgb, #FFB74D 8%, var(--bg-secondary, #f5f5f5)); }
.fa-alert-low { border-left-color: #81C784; background: color-mix(in srgb, #81C784 7%, var(--bg-secondary, #f5f5f5)); }
.fa-alert-icon {
    font-size: 18px;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card-bg, #fff);
    color: var(--text-secondary);
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.fa-alert-high .fa-alert-icon { color: #EF5350; }
.fa-alert-medium .fa-alert-icon { color: #FFB74D; }
.fa-alert-low .fa-alert-icon { color: #66BB6A; }
.fa-alert-body { flex: 1; min-width: 0; }
.fa-alert-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.fa-alert-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 13px;
}
.fa-alert-msg {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}
.fa-alert-info {
    font-size: 12px;
    color: var(--text-muted, #999);
    margin-top: 4px;
}
.fa-alert-info b { color: var(--text-primary); }

/* --- 洞察子面板动画 --- */
.fa-insight-panel {
    animation: faFadeIn 0.3s ease;
}
.fa-tab-panel {
    animation: faFadeIn 0.25s ease;
}
@keyframes faFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- 响应式：窄屏适配 --- */
@media (max-width: 900px) {
    .fa-chart-row { flex-direction: column; }
    .fa-chart-card { min-width: 0; }
    .fa-stat-card { min-width: 45%; }
    .fa-tc-stat { min-width: 45%; }
}
@media (max-width: 560px) {
    .fa-stat-card { min-width: 100%; }
    .fa-tc-stat { min-width: 100%; }
    .fa-tab-btn { padding: 7px 10px; font-size: 13px; }
}

/* ========== 批次追溯弹窗 ========== */
.bt-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10030;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: env-fade-in 0.2s ease-out;
    padding: 20px;
}
.bt-modal {
    width: 95%;
    max-width: 1100px;
    max-height: 90vh;
    background: var(--bg-primary, #fff);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: env-slide-up 0.3s ease-out;
    border: 1px solid var(--border, #e5e7eb);
}
.bt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--purple, #7c3aed), #a78bfa);
    color: #fff;
    flex-shrink: 0;
}
.bt-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
}
.bt-mode-badge {
    font-size: 11px;
    background: rgba(255,255,255,0.25);
    padding: 2px 10px;
    border-radius: 12px;
    font-weight: 500;
}
.bt-close-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.2s;
}
.bt-close-btn:hover { background: rgba(255,255,255,0.4); }

/* [v3.7.12] 头部报告导出按钮：与关闭按钮同款风格，但展示标签更醒目 */
.bt-header-report-btn {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border: 2px solid rgba(255,255,255,0.85);
    color: #1e3a8a;
    height: 40px;
    padding: 0 18px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
    white-space: nowrap;
    box-shadow: 0 3px 10px rgba(245,158,11,0.45), 0 0 0 1px rgba(245,158,11,0.3);
    letter-spacing: 0.3px;
    position: relative;
}
.bt-header-report-btn::before {
    content: '📑';
    font-size: 14px;
    margin-right: 2px;
}
.bt-header-report-btn:hover {
    background: linear-gradient(135deg, #fcd34d, #fbbf24);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(245,158,11,0.65), 0 0 0 2px rgba(245,158,11,0.5);
}
.bt-header-report-btn:active {
    transform: translateY(0);
}
.bt-header-report-btn i { font-size: 15px; }
/* 第二个按钮（HTML 报告）使用不同色调，避免完全重叠 */
.bt-header-report-btn#btHeaderExportHtml {
    background: linear-gradient(135deg, #34d399, #10b981);
    color: #064e3b;
    box-shadow: 0 3px 10px rgba(16,185,129,0.45), 0 0 0 1px rgba(16,185,129,0.3);
}
.bt-header-report-btn#btHeaderExportHtml::before {
    content: '🌐';
}
.bt-header-report-btn#btHeaderExportHtml:hover {
    background: linear-gradient(135deg, #6ee7b7, #34d399);
    box-shadow: 0 6px 16px rgba(16,185,129,0.65), 0 0 0 2px rgba(16,185,129,0.5);
}

.bt-mode-tabs {
    display: flex;
    gap: 4px;
    padding: 0 20px;
    border-bottom: 1px solid var(--border, #e5e7eb);
    background: var(--bg-secondary, #f9fafb);
    flex-shrink: 0;
}
.bt-mode-tab {
    background: transparent;
    border: none;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    white-space: nowrap;
}
.bt-mode-tab:hover { color: var(--purple, #7c3aed); }
.bt-mode-tab.active {
    color: var(--purple, #7c3aed);
    border-bottom-color: var(--purple, #7c3aed);
    font-weight: 600;
}
.bt-mode-content {
    display: none;
    padding: 18px 20px;
    overflow-y: auto;
    flex: 1;
}
.bt-mode-content.active { display: block; }

.bt-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding: 12px 14px;
    background: var(--bg-secondary, #f9fafb);
    border-radius: 8px;
}
.bt-search-bar label { font-size: 13px; color: var(--text-secondary); }
.bt-search-bar input,
.bt-search-bar select {
    padding: 6px 10px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
    font-size: 13px;
    background: var(--input-bg, #fff);
    color: var(--text-primary);
    min-width: 140px;
}
.bt-search-bar input:focus,
.bt-search-bar select:focus {
    border-color: var(--purple, #7c3aed);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple, #7c3aed) 25%, transparent);
}
.bt-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    background: var(--bg-secondary, #f3f4f6);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
}
.bt-btn:hover { background: var(--bg-hover, #e5e7eb); }
.bt-btn-primary {
    background: var(--purple, #7c3aed);
    border-color: var(--purple, #7c3aed);
    color: #fff;
}
.bt-btn-primary:hover { filter: brightness(1.1); background: var(--purple, #7c3aed); }

.bt-chain { font-size: 13px; }
.bt-chain-header {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
}
.bt-batch-no {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border, #e5e7eb);
}
.bt-batch-no strong { color: var(--purple, #7c3aed); }
.bt-summary {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}
.bt-summary-item {
    text-align: center;
    padding: 8px;
    background: var(--bg-secondary, #f9fafb);
    border-radius: 8px;
    border-left: 3px solid var(--accent, #3b82f6);
}
.bt-summary-val {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
}
.bt-summary-unit {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 2px;
    font-weight: 400;
}
.bt-summary-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* 时间轴 */
.bt-timeline {
    position: relative;
    padding-left: 30px;
}
.bt-timeline::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 20px;
    bottom: 20px;
    width: 2px;
    background: linear-gradient(180deg, var(--purple, #7c3aed), var(--bg-secondary, #e5e7eb));
}
.bt-timeline-node {
    position: relative;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s;
}
.bt-timeline-node:hover { box-shadow: 0 4px 10px rgba(0,0,0,0.08); }
.bt-timeline-node::before {
    content: '';
    position: absolute;
    left: -24px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background: var(--purple, #7c3aed);
    border: 2px solid var(--bg-primary, #fff);
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--purple, #7c3aed);
}
.bt-node-muted::before { background: var(--bg-secondary, #d1d5db); box-shadow: 0 0 0 2px var(--bg-secondary, #d1d5db); }
.bt-node-warning::before { background: var(--warning, #f59e0b); box-shadow: 0 0 0 2px var(--warning, #f59e0b); }
.bt-node-icon { font-size: 18px; }
.bt-node-content { flex: 1; }
.bt-node-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.bt-node-status {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}
/* [优化] 节点间的轨迹连接线 */
.bt-node-arrow {
    position: absolute;
    left: -20px;
    bottom: -14px;
    width: 2px;
    height: 12px;
    opacity: 0.6;
}
.bt-timeline-node:last-child .bt-node-arrow { display: none; }
/* [优化] 节点图标样式（圆形+动画） */
.bt-node-icon {
    font-size: 18px;
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: transform 0.2s;
}
.bt-timeline-node:hover .bt-node-icon { transform: scale(1.1) rotate(5deg); }
.bt-node-detail {
    background: var(--bg-secondary, #f9fafb);
    border-radius: 8px;
    padding: 12px 14px;
    margin: -5px 0 12px 0;
    margin-left: 28px;
    font-size: 13px;
}
.bt-node-empty {
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
}
.bt-node-empty a {
    color: var(--purple, #7c3aed);
    text-decoration: underline;
    cursor: pointer;
    font-style: normal;
    font-weight: 600;
}
.bt-detail-row {
    display: flex;
    padding: 3px 0;
    border-bottom: 1px dashed var(--border, #e5e7eb);
}
.bt-detail-row:last-child { border-bottom: none; }
.bt-detail-label {
    min-width: 90px;
    color: var(--text-muted);
    font-size: 12px;
}
.bt-detail-value {
    color: var(--text-primary);
    font-weight: 500;
    flex: 1;
}

.bt-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    background: var(--card-bg, #fff);
    border-radius: 6px;
    overflow: hidden;
}
.bt-detail-table th, .bt-detail-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border, #e5e7eb);
    text-align: left;
}
.bt-detail-table th {
    background: var(--bg-secondary, #f3f4f6);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 11px;
}
.bt-detail-table code {
    font-size: 11px;
    padding: 1px 5px;
    background: var(--bg-secondary, #f3f4f6);
    border-radius: 3px;
    color: var(--purple, #7c3aed);
    cursor: pointer;
}
.bt-detail-table tr:hover { background: var(--bg-secondary, #f9fafb); }

.bt-section {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
.bt-section h3 {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 600;
}

.bt-reverse-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}

.bt-more-hint {
    text-align: center;
    padding: 8px;
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg-secondary, #f9fafb);
    border-radius: 0 0 8px 8px;
}

.bt-form {
    padding: 4px;
}
.bt-form-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border, #e5e7eb);
}

.bt-error {
    padding: 14px;
    background: color-mix(in srgb, var(--danger, #ef4444) 12%, transparent);
    color: var(--danger, #ef4444);
    border-radius: 8px;
    font-size: 13px;
    text-align: center;
}
.bt-success-msg {
    padding: 10px 14px;
    background: color-mix(in srgb, var(--success, #22c55e) 12%, transparent);
    color: var(--success, #22c55e);
    border-radius: 6px;
    font-size: 13px;
    border: 1px solid color-mix(in srgb, var(--success, #22c55e) 30%, transparent);
}

/* ========== 移动端适配 ========== */
@media (max-width: 768px) {
    .env-monitor-modal, .bt-modal { max-height: 95vh; }
    .env-stats-row { grid-template-columns: repeat(2, 1fr); }
    .bt-summary { grid-template-columns: repeat(2, 1fr); }
    .bt-reverse-summary { grid-template-columns: 1fr; }
    .bt-timeline { padding-left: 20px; }
    .bt-node-detail { margin-left: 0; }
    .bt-timeline-node::before { left: -19px; }
    .env-form, .bt-form { max-width: 100%; }
}

/* ============================================================
 * 装车卡片 & 等待卡片 · 紧凑化覆盖包（桌面端专用）
 * 2026-08-09  |  需求：占地太大，希望"紧凑但保持大气"
 *
 * 原则：
 *  ① 只针对 .loading-card（装车）和 .waiting-card（等待）做微调，
 *     不改任何通用类（.card-header 等仍被弹窗复用，此处用更精确的
 *     后代选择器覆盖，避免影响其他组件）。
 *  ② 仅压缩 内边距/行距/字号/卡片间距，保留全部信息与按钮功能。
 *  ③ 仅桌面端生效（min-width: 769px），移动端布局不受影响。
 *  ④ 全部使用 CSS 变量，主题自适应。
 *  回滚：删除本覆盖块，或恢复 style.css.bak-compact-* 备份。
 * ============================================================ */
@media (min-width: 769px) {

    /* ---------- 装车卡片 ---------- */
    .loading-card {
        margin-bottom: 8px;              /* 原 12px */
        border-radius: 8px;
    }
    .loading-card .card-header {
        padding: 6px 12px;               /* 原 10px 16px */
    }
    .loading-card .loading-plate {
        font-size: 17px;                 /* 原 20px */
        letter-spacing: 1px;
    }
    .loading-card .timer-box {
        padding: 3px 10px;               /* 原 6px 14px */
    }
    .loading-card .timer-box .time {
        font-size: 17px;                 /* 原 20px */
    }
    .loading-card .card-body {
        padding: 6px 12px;               /* 原 12px 18px */
    }
    .loading-card .info-col {
        gap: 3px;                        /* 原 6px */
    }
    .loading-card .info-value {
        font-size: 12px;                 /* 原 13px */
    }
    .loading-card .stat-num {
        font-size: 18px;                 /* 原 22px */
    }
    .loading-card .stat-box {
        padding: 2px 8px;                /* 原 4px 10px */
    }
    .loading-card .card-footer {
        padding: 4px 12px;               /* 原 8px 18px */
    }
    .loading-card .loading-card-footer {
        padding: 4px 12px;               /* 原 8px 16px */
    }

    /* ---------- 等待卡片 ---------- */
    .waiting-card {
        margin-bottom: 8px;              /* 原 var(--space-4) */
        border-radius: 8px;
    }
    .waiting-card .card-header {
        padding: 6px 12px;               /* 原 10px 16px */
    }
    .waiting-card .plate-info {
        font-size: 17px;                 /* 原 var(--text-xl) */
        letter-spacing: 0.5px;
    }
    .waiting-card .varieties-info {
        padding: 8px 12px;               /* 原 var(--space-4)=16px */
        margin: 8px 12px 10px;           /* 原 16px 16px 20px */
    }
    .waiting-card .varieties-list {
        line-height: 1.45;               /* 原 1.6 */
        margin-bottom: 6px;
    }
    .waiting-card .quantity-info {
        padding: 6px 12px 0;             /* 原 12px 16px 0 */
    }
    .waiting-unit-info {
        padding: 4px 12px;               /* 原 8px 16px */
        margin-top: 4px;                 /* 原 8px */
    }
    .waiting-card .qty-item {
        font-size: 13px;                 /* 原 var(--text-base) */
    }
}

/* ============================================================
 * 深空主题精修层 (2026-08-09) — 纯视觉优化
 * 目标：降低高饱和按钮的视觉噪音，统一排版，昼夜都舒适耐看。
 * 原则：仅追加/覆盖视觉样式，不改变任何结构/类名/交互逻辑。
 * 说明：顶栏固定深色(--header-bg)，故顶栏内用浅色文字；其余用主题变量。
 * ============================================================ */

/* —— 全局中文排版微调：抗锯齿 + 均衡字距，提升长时间阅读舒适度 —— */
body,
button,
input,
select,
textarea {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
#topHeader .hdr-title,
#topHeader .hdr-stat-label,
#topHeader .hdr-nav-btn,
.sidebar-menu a,
.sidebar-menu span {
    letter-spacing: 0.3px;
}

/* ============ 顶栏导航按钮：玻璃质感 + 语义色图标 ============ */
/* 去掉一排高饱和整块填色，改为通透玻璃卡片，保留语义色彩用于功能识别 */
#topHeader .hdr-main-nav {
    gap: 2px;
}
#topHeader .hdr-nav-btn {
    padding: 2px 6px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.2px;
    line-height: 1.3;
    border-radius: 6px;
    /* 主题自适应：文字/背景/描边均随顶栏明暗变化 —— 深色顶栏浅字、浅色顶栏深字 */
    color: var(--header-btn-text, var(--header-text, #eef1f6));
    background: color-mix(in srgb, var(--header-btn-bg, #2a2f3a) 90%, transparent);
    border: 1px solid color-mix(in srgb, var(--header-btn-text, var(--header-text, #eef1f6)) 20%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--header-btn-text, var(--header-text, #eef1f6)) 8%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: all 0.18s ease;
}
#topHeader .hdr-nav-btn i {
    font-size: 10.5px;
    filter: drop-shadow(0 0 4px currentColor);
}
/* 覆盖 .btn-* 的整块高饱和背景（等特异性，因本层位于文件末尾而生效）：
   统一为通透明暗自适应玻璃卡片，仅保留图标语义色用于功能识别 */
#topHeader .hdr-nav-btn.btn-purple,
#topHeader .hdr-nav-btn.btn-pink,
#topHeader .hdr-nav-btn.btn-orange,
#topHeader .hdr-nav-btn.btn-amber,
#topHeader .hdr-nav-btn.btn-cyan,
#topHeader .hdr-nav-btn.btn-teal,
#topHeader .hdr-nav-btn.btn-red,
#topHeader .hdr-nav-btn.btn-rose,
#topHeader .hdr-nav-btn.btn-indigo,
#topHeader .hdr-nav-btn.btn-green,
#topHeader .hdr-nav-btn.btn-emerald,
#topHeader .hdr-nav-btn.btn-slate,
#topHeader .hdr-nav-btn.btn-warning,
#topHeader .hdr-nav-btn.btn-info {
    background: color-mix(in srgb, var(--header-btn-bg, #2a2f3a) 90%, transparent);
    border-color: color-mix(in srgb, var(--header-btn-text, var(--header-text, #eef1f6)) 20%, transparent);
}
/* 悬停：背景轻微提亮，描边随文字色（语义色）变化以保持功能识别度 */
#topHeader .hdr-nav-btn.btn-purple:hover,
#topHeader .hdr-nav-btn.btn-pink:hover,
#topHeader .hdr-nav-btn.btn-orange:hover,
#topHeader .hdr-nav-btn.btn-amber:hover,
#topHeader .hdr-nav-btn.btn-cyan:hover,
#topHeader .hdr-nav-btn.btn-teal:hover,
#topHeader .hdr-nav-btn.btn-red:hover,
#topHeader .hdr-nav-btn.btn-rose:hover,
#topHeader .hdr-nav-btn.btn-indigo:hover,
#topHeader .hdr-nav-btn.btn-green:hover,
#topHeader .hdr-nav-btn.btn-emerald:hover,
#topHeader .hdr-nav-btn.btn-slate:hover,
#topHeader .hdr-nav-btn.btn-warning:hover,
#topHeader .hdr-nav-btn.btn-info:hover {
    background: color-mix(in srgb, var(--header-btn-bg, #2a2f3a) 96%, transparent);
}
#topHeader .hdr-nav-btn:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, currentColor 55%, var(--header-btn-text, var(--header-text, #eef1f6)));
    box-shadow:
        0 4px 14px color-mix(in srgb, currentColor 20%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--header-btn-text, var(--header-text, #eef1f6)) 10%, transparent);
    background: color-mix(in srgb, var(--header-btn-bg, #2a2f3a) 96%, transparent);
}
#topHeader .hdr-nav-btn:active {
    transform: translateY(0);
}

/* 语义色：图标着色 —— 与顶栏文字色混合，深色顶栏呈浅色、浅色顶栏自动加深，深浅主题均清晰 */
#topHeader .hdr-nav-btn.btn-purple i   { color: color-mix(in srgb, #c4b5fd 72%, var(--header-btn-text, var(--header-text, #eef1f6))); }
#topHeader .hdr-nav-btn.btn-pink i     { color: color-mix(in srgb, #fdba74 72%, var(--header-btn-text, var(--header-text, #eef1f6))); } /* 换残记录：柔粉橙 */
#topHeader .hdr-nav-btn.btn-orange i   { color: color-mix(in srgb, #fdba74 72%, var(--header-btn-text, var(--header-text, #eef1f6))); }
#topHeader .hdr-nav-btn.btn-amber i    { color: color-mix(in srgb, #fcd34d 72%, var(--header-btn-text, var(--header-text, #eef1f6))); }
#topHeader .hdr-nav-btn.btn-warning i  { color: color-mix(in srgb, #fcd34d 72%, var(--header-btn-text, var(--header-text, #eef1f6))); }
#topHeader .hdr-nav-btn.btn-teal i     { color: color-mix(in srgb, #5eead4 72%, var(--header-btn-text, var(--header-text, #eef1f6))); }
#topHeader .hdr-nav-btn.btn-cyan i     { color: color-mix(in srgb, #67e8f9 72%, var(--header-btn-text, var(--header-text, #eef1f6))); }
#topHeader .hdr-nav-btn.btn-info i     { color: color-mix(in srgb, #93c5fd 72%, var(--header-btn-text, var(--header-text, #eef1f6))); }
#topHeader .hdr-nav-btn.btn-red i      { color: color-mix(in srgb, #fca5a5 72%, var(--header-btn-text, var(--header-text, #eef1f6))); }
#topHeader .hdr-nav-btn.btn-rose i     { color: color-mix(in srgb, #fda4af 72%, var(--header-btn-text, var(--header-text, #eef1f6))); }
#topHeader .hdr-nav-btn.btn-indigo i   { color: color-mix(in srgb, #a5b4fc 72%, var(--header-btn-text, var(--header-text, #eef1f6))); }
#topHeader .hdr-nav-btn.btn-green i    { color: color-mix(in srgb, #86efac 72%, var(--header-btn-text, var(--header-text, #eef1f6))); }
#topHeader .hdr-nav-btn.btn-emerald i  { color: color-mix(in srgb, #6ee7b7 72%, var(--header-btn-text, var(--header-text, #eef1f6))); }
#topHeader .hdr-nav-btn.btn-slate i    { color: color-mix(in srgb, #cbd5e1 72%, var(--header-btn-text, var(--header-text, #eef1f6))); }

/* NEWS 徽章：保持醒目但更精致 */
.nav-new-tag {
    color: #fff;
    background: linear-gradient(135deg, #916318, #7A5210);
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(145, 99, 24, 0.45);
}

/* ============ 登录弹窗：更精致、随主题自适应 ============ */
.login-box {
    position: relative;
    overflow: hidden;
    background: color-mix(in srgb, var(--bg-elevated, #222) 92%, var(--bg-primary, #17181f));
    border: 1px solid color-mix(in srgb, var(--border, #333) 70%, transparent);
    border-radius: 18px;
    box-shadow:
        0 20px 60px color-mix(in srgb, var(--accent, #4f8cff) 18%, rgba(0, 0, 0, 0.5)),
        0 8px 24px rgba(0, 0, 0, 0.35);
}
[data-theme="light"] .login-box {
    box-shadow:
        0 20px 60px rgba(43, 38, 32, 0.14),
        0 8px 24px rgba(43, 38, 32, 0.07);
}
.login-btn {
    border-radius: 10px;
    /* 渐变加深至 #916318 系，白字对比度 ≥4.5（原浅金渐变白字仅 2.16:1） */
    background: linear-gradient(135deg, #916318, #7A5210);
    color: #fff;
    box-shadow: 0 6px 18px rgba(145, 99, 24, 0.35);
    transition: all 0.2s ease;
}
.login-btn:hover {
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--accent, #4f8cff) 45%, transparent);
}

/* ============ 核心统计卡片：更柔和、更精致 ============ */
.stat-card {
    border: 1px solid color-mix(in srgb, var(--border, #333) 60%, transparent);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--accent, #4f8cff) 14%, rgba(0, 0, 0, 0.18));
    border-color: color-mix(in srgb, var(--accent, #4f8cff) 40%, var(--border, #333));
}

/* ============ 通用按钮焦点：柔和强调色光晕 ============ */
button:focus-visible,
a:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent, #4f8cff) 70%, transparent);
    outline-offset: 2px;
}

/* ============================================================
 * 筛选栏按钮统一精修层 (2026-08-09) — 纯视觉优化
 * 目标：统计报表/今日记录/装车效率/破损率/夜班等所有页面的
 *       筛选栏按钮统一为「胶囊 + 图标 + 层级区分」，降高饱和，
 *       深浅主题自适应。原则：仅追加/覆盖视觉，不改结构/类名/交互。
 * 说明：用 :has() 按图标自动分类，无需改动任何按钮 HTML。
 * ============================================================ */

/* —— 日期快捷按钮（今日/本周/本月/本季/全年/全部/今年/当前周期）——
   柔和胶囊描边，hover 轻抬升+品牌描边，点击(:active)压实 */
.stats-filter-bar .btn-sm:not(:has(i)),
.date-range-filter .btn-sm:not(:has(i)),
.calling-queue-panel .btn-sm:not(:has(i)){
    background: color-mix(in srgb, var(--surface, #1c1e26) 88%, transparent);
    color: var(--text-primary, #eef1f6);
    border: 1px solid var(--border, #333);
    border-radius: 999px;
    font-weight: 600;
    padding-left: 14px;
    padding-right: 14px;
    letter-spacing: 0.3px;
    transition: all 0.16s ease;
}
[data-theme="light"] .stats-filter-bar .btn-sm:not(:has(i)),
[data-theme="light"] .date-range-filter .btn-sm:not(:has(i)),
[data-theme="light"] .calling-queue-panel .btn-sm:not(:has(i)){
    color: var(--text-primary, #222);
}
.stats-filter-bar .btn-sm:not(:has(i)):hover,
.date-range-filter .btn-sm:not(:has(i)):hover,
.calling-queue-panel .btn-sm:not(:has(i)):hover{
    border-color: var(--accent, #4f8cff);
    color: var(--accent, #4f8cff);
    transform: translateY(-1px);
    filter: none;
}
.stats-filter-bar .btn-sm:not(:has(i)):active,
.date-range-filter .btn-sm:not(:has(i)):active,
.calling-queue-panel .btn-sm:not(:has(i)):active{
    transform: translateY(0);
}

/* —— 查询类主操作（放大镜）—— 品牌色实心，最醒目 */
.stats-filter-bar .btn-sm:has(.fa-magnifying-glass) {
    background: linear-gradient(135deg, var(--accent, #4f8cff), var(--accent-hover, #6e9eff));
    color: #fff;
    border: none;
    border-radius: 999px;
    font-weight: 700;
    padding-left: 18px;
    padding-right: 18px;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent, #4f8cff) 32%, transparent);
    letter-spacing: 0.3px;
}
.stats-filter-bar .btn-sm:has(.fa-magnifying-glass):hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--accent, #4f8cff) 42%, transparent);
}
.stats-filter-bar .btn-sm:has(.fa-magnifying-glass):active {
    transform: translateY(0);
}

/* —— 导出类（下载 / PDF / CSV）—— 描边 + 品牌图标，低于主操作 */
.stats-filter-bar .btn-sm:has(.fa-download),
.stats-filter-bar .btn-sm:has(.fa-file-pdf),
.stats-filter-bar .btn-sm:has(.fa-file-csv),
.stats-filter-bar .btn-sm:has(.fa-file-export) {
    background: color-mix(in srgb, var(--surface, #1c1e26) 60%, transparent);
    color: var(--text-primary, #eef1f6);
    border: 1px solid color-mix(in srgb, var(--accent, #4f8cff) 45%, var(--border, #333));
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
[data-theme="light"] .stats-filter-bar .btn-sm:has(.fa-download),
[data-theme="light"] .stats-filter-bar .btn-sm:has(.fa-file-pdf),
[data-theme="light"] .stats-filter-bar .btn-sm:has(.fa-file-csv),
[data-theme="light"] .stats-filter-bar .btn-sm:has(.fa-file-export) {
    color: var(--text-primary, #222);
}
.stats-filter-bar .btn-sm:has(.fa-download) i,
.stats-filter-bar .btn-sm:has(.fa-file-pdf) i,
.stats-filter-bar .btn-sm:has(.fa-file-csv) i,
.stats-filter-bar .btn-sm:has(.fa-file-export) i {
    color: var(--accent, #4f8cff);
}
.stats-filter-bar .btn-sm:has(.fa-download):hover,
.stats-filter-bar .btn-sm:has(.fa-file-pdf):hover,
.stats-filter-bar .btn-sm:has(.fa-file-csv):hover,
.stats-filter-bar .btn-sm:has(.fa-file-export):hover {
    border-color: var(--accent, #4f8cff);
    transform: translateY(-1px);
}

/* —— 重置类（旋转箭头）—— 柔和灰描边 */
.stats-filter-bar .btn-sm:has(.fa-rotate-left) {
    background: transparent;
    color: var(--text-secondary, #9aa0aa);
    border: 1px solid var(--border, #333);
    border-radius: 999px;
    font-weight: 600;
}
[data-theme="light"] .stats-filter-bar .btn-sm:has(.fa-rotate-left) {
    color: var(--text-secondary, #555);
}
.stats-filter-bar .btn-sm:has(.fa-rotate-left):hover {
    border-color: var(--text-secondary, #9aa0aa);
    color: var(--text-primary, #eef1f6);
    transform: translateY(-1px);
}

/* —— 其它带图标的功能按钮（托拍追溯/破损照片/手动录入/自动识别等）——
   覆盖内联高饱和渐变，统一降饱和为通透明暗玻璃胶囊，保留图标语义色 */
.stats-filter-bar .btn-sm:has(i):not(:has(.fa-magnifying-glass)):not(:has(.fa-download)):not(:has(.fa-file-pdf)):not(:has(.fa-file-csv)):not(:has(.fa-file-export)):not(:has(.fa-rotate-left)) {
    background: color-mix(in srgb, var(--surface, #1c1e26) 82%, transparent);
    color: var(--text-primary, #eef1f6);
    border: 1px solid var(--border, #333);
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.3px;
    background-image: none !important;
}
[data-theme="light"] .stats-filter-bar .btn-sm:has(i):not(:has(.fa-magnifying-glass)):not(:has(.fa-download)):not(:has(.fa-file-pdf)):not(:has(.fa-file-csv)):not(:has(.fa-file-export)):not(:has(.fa-rotate-left)) {
    color: var(--text-primary, #222);
}
.stats-filter-bar .btn-sm:has(i):not(:has(.fa-magnifying-glass)):not(:has(.fa-download)):not(:has(.fa-file-pdf)):not(:has(.fa-file-csv)):not(:has(.fa-file-export)):not(:has(.fa-rotate-left)):hover {
    border-color: var(--accent, #4f8cff);
    transform: translateY(-1px);
    filter: none;
}

/* —— 筛选栏整体：更通透的容器 + 图标对齐 —— */
.stats-filter-bar {
    background: color-mix(in srgb, var(--bg-secondary, #16181f) 96%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary, #eef1f6) 4%, transparent);
}
.stats-filter-bar .btn-sm i {
    font-size: 12px;
}
.stats-filter-bar .btn-sm {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* —— 筛选栏内带内联高饱和渐变的按钮（托拍追溯/拍照取证）——
   内联 background:linear-gradient()+color:#fff 优先级高于普通CSS，
   需用 !important 彻底覆盖，统一为玻璃胶囊、深浅主题自适应。
   仅影响筛选栏(.stats-filter-bar)内的按钮，不影响WMS同步/导入等功能操作按钮。 */
.stats-filter-bar .btn-sm:has(.fa-barcode),
.stats-filter-bar .btn-sm:has(.fa-images) {
    background: color-mix(in srgb, var(--surface, #1c1e26) 82%, transparent) !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--text-primary, #eef1f6) !important;
    border: 1px solid var(--border, #333) !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
}
[data-theme="light"] .stats-filter-bar .btn-sm:has(.fa-barcode),
[data-theme="light"] .stats-filter-bar .btn-sm:has(.fa-images) {
    color: var(--text-primary, #222) !important;
}
.stats-filter-bar .btn-sm:has(.fa-barcode):hover,
.stats-filter-bar .btn-sm:has(.fa-images):hover {
    border-color: var(--accent, #4f8cff) !important;
    color: var(--accent, #4f8cff) !important;
    transform: translateY(-1px) !important;
}
.stats-filter-bar .btn-sm:has(.fa-barcode) i,
.stats-filter-bar .btn-sm:has(.fa-images) i {
    color: var(--accent, #4f8cff) !important;
}

/* ===== 领导总览驾驶舱 (Leadership Overview Dashboard) ===== */

.leadership-body {
    min-height: 100vh;
    background: linear-gradient(180deg, var(--bg-start, #12141b) 0%, var(--bg-end, #1a1c25) 100%);
    color: var(--text-primary, #f0e9db);
    font-family: var(--font-sans, 'Inter', 'Microsoft YaHei', sans-serif);
    padding: var(--space-4, 16px);
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 16px);
    position: relative;
    overflow-x: hidden;
}

.leadership-body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 20% 10%, var(--aurora-color, rgba(212, 169, 96, 0.14)) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 90%, var(--aurora-color-2, rgba(95, 99, 201, 0.1)) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.leadership-header {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-5, 20px) var(--space-6, 24px);
    background: var(--card-bg, #1c2029);
    border: 1px solid var(--border, rgba(216, 180, 120, 0.16));
    border-radius: var(--radius-lg, 14px);
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.4));
}

.leadership-header-left {
    display: flex;
    align-items: center;
    gap: var(--space-4, 16px);
}

.leadership-logo {
    height: 48px;
    width: auto;
    border-radius: var(--radius-sm, 6px);
}

.leadership-title-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 4px);
}

.leadership-title {
    font-size: var(--text-2xl, 28px);
    font-weight: 700;
    color: var(--text-primary, #f0e9db);
    margin: 0;
    letter-spacing: 2px;
    background: linear-gradient(135deg, var(--text-primary, #f0e9db) 0%, var(--accent, #d4a960) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.leadership-subtitle {
    font-size: var(--text-xs, 11px);
    color: var(--text-muted, #9a8e78);
    letter-spacing: 3px;
    text-transform: uppercase;
}

.leadership-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-1, 4px);
}

.leadership-clock {
    font-size: var(--text-xl, 22px);
    font-weight: 700;
    color: var(--accent, #d4a960);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    letter-spacing: 2px;
}

.leadership-date {
    font-size: var(--text-sm, 13px);
    color: var(--text-secondary, #c9bfa9);
}

.leadership-toolbar {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4, 16px);
    padding: var(--space-4, 16px) var(--space-6, 24px);
    background: var(--card-bg, #1c2029);
    border: 1px solid var(--border, rgba(216, 180, 120, 0.16));
    border-radius: var(--radius-lg, 14px);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.5));
}

.toolbar-left,
.toolbar-right {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    flex-wrap: wrap;
}

.toolbar-label {
    font-size: var(--text-sm, 13px);
    font-weight: 600;
    color: var(--text-secondary, #c9bfa9);
}

.toolbar-period-group {
    display: flex;
    gap: var(--space-2, 8px);
    background: var(--bg-elevated, #1e222d);
    padding: var(--space-1, 4px);
    border-radius: var(--radius-md, 10px);
    border: 1px solid var(--border, rgba(216, 180, 120, 0.16));
}

.toolbar-btn {
    padding: var(--space-2, 8px) var(--space-4, 16px);
    font-size: var(--text-sm, 13px);
    font-weight: 500;
    color: var(--text-secondary, #c9bfa9);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
    transition: all 0.2s ease;
}

.toolbar-btn:hover {
    color: var(--accent, #d4a960);
    background: color-mix(in srgb, var(--accent, #d4a960) 12%, transparent);
}

.toolbar-btn.active {
    color: #fff;
    background: linear-gradient(135deg, var(--accent, #d4a960), var(--primary-dark, #b8913f));
    box-shadow: 0 2px 10px color-mix(in srgb, var(--accent, #d4a960) 35%, transparent);
}

.toolbar-btn-primary {
    padding: var(--space-2, 8px) var(--space-5, 20px);
    color: #fff;
    background: linear-gradient(135deg, var(--accent, #d4a960), var(--primary-dark, #b8913f));
    border: none;
    border-radius: var(--radius-md, 10px);
    font-weight: 600;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent, #d4a960) 32%, transparent);
}

.toolbar-btn-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--accent, #d4a960) 42%, transparent);
    color: #fff;
}

.toolbar-date-input {
    padding: var(--space-2, 8px) var(--space-3, 12px);
    font-size: var(--text-sm, 13px);
    color: var(--text-primary, #f0e9db);
    background: var(--input-bg, #1e222d);
    border: 1px solid var(--border, rgba(216, 180, 120, 0.16));
    border-radius: var(--radius-sm, 6px);
    outline: none;
    transition: all 0.2s ease;
    font-family: var(--font-sans);
}

.toolbar-date-input:hover {
    border-color: var(--accent, #d4a960);
}

.toolbar-date-input:focus {
    border-color: var(--accent, #d4a960);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #d4a960) 20%, transparent);
}

.toolbar-date-sep {
    color: var(--text-muted, #9a8e78);
    font-size: var(--text-sm, 13px);
}

.leadership-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 16px);
    flex: 1;
}

.leadership-row {
    display: grid;
    gap: var(--space-4, 16px);
}

.leadership-row-1 {
    grid-template-columns: repeat(4, 1fr);
}

.leadership-row-2,
.leadership-row-3,
.leadership-row-4,
.leadership-row-5,
.leadership-row-6 {
    grid-template-columns: repeat(2, 1fr);
}

.leadership-card {
    background: var(--card-bg, #1c2029);
    border: 1px solid var(--border, rgba(216, 180, 120, 0.16));
    border-radius: var(--radius-lg, 14px);
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.4));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    position: relative;
}

.leadership-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--accent, #d4a960) 30%,
        var(--primary-light, #e0c081) 50%,
        var(--accent, #d4a960) 70%,
        transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.leadership-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.5));
    border-color: var(--border-strong, rgba(216, 180, 120, 0.34));
}

.leadership-card:hover::before {
    opacity: 1;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4, 16px) var(--space-5, 20px);
    border-bottom: 1px solid var(--border, rgba(216, 180, 120, 0.16));
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--accent, #d4a960) 6%, transparent) 0%,
        transparent 100%);
}

.card-title {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    font-size: var(--text-base, 15px);
    font-weight: 600;
    color: var(--text-primary, #f0e9db);
}

.card-title i {
    color: var(--accent, #d4a960);
    font-size: var(--text-lg, 18px);
}

.card-subtitle {
    font-size: var(--text-xs, 11px);
    color: var(--text-muted, #9a8e78);
    padding: var(--space-1, 4px) var(--space-2, 8px);
    background: var(--bg-elevated, #1e222d);
    border-radius: var(--radius-sm, 6px);
}

.card-body {
    flex: 1;
    padding: var(--space-4, 16px) var(--space-5, 20px);
    min-height: 120px;
}

.chart-body {
    min-height: 260px;
    padding: var(--space-3, 12px);
}

.leadership-kpi-card {
    background: linear-gradient(145deg,
        var(--card-bg, #1c2029) 0%,
        color-mix(in srgb, var(--accent, #d4a960) 8%, var(--card-bg, #1c2029)) 100%);
}

.leadership-kpi-card .card-header {
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border-bottom: none;
    background: transparent;
}

.leadership-kpi-card .card-title {
    font-size: var(--text-sm, 13px);
    font-weight: 500;
    color: var(--text-secondary, #c9bfa9);
}

.leadership-kpi-card .card-title i {
    font-size: var(--text-base, 15px);
}

.leadership-kpi-card .card-body {
    min-height: 100px;
    padding: 0 var(--space-4, 16px) var(--space-4, 16px);
    display: flex;
    align-items: center;
    justify-content: center;
}

#kpiCard1 { border-top: 3px solid var(--info, #818cf8); }
#kpiCard2 { border-top: 3px solid var(--success, #34d399); }
#kpiCard3 { border-top: 3px solid var(--warning, #fbbf24); }
#kpiCard4 { border-top: 3px solid var(--danger, #f87171); }

#kpiCard1::before { background: linear-gradient(90deg, transparent, var(--info, #818cf8), transparent); }
#kpiCard2::before { background: linear-gradient(90deg, transparent, var(--success, #34d399), transparent); }
#kpiCard3::before { background: linear-gradient(90deg, transparent, var(--warning, #fbbf24), transparent); }
#kpiCard4::before { background: linear-gradient(90deg, transparent, var(--danger, #f87171), transparent); }

@media (max-width: 1440px) {
    .leadership-row-1 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .leadership-row-2,
    .leadership-row-3,
    .leadership-row-4,
    .leadership-row-5,
    .leadership-row-6 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .leadership-body {
        padding: var(--space-3, 12px);
    }

    .leadership-header {
        flex-direction: column;
        gap: var(--space-3, 12px);
        text-align: center;
    }

    .leadership-header-left,
    .leadership-header-right {
        flex-direction: column;
        align-items: center;
    }

    .leadership-row-1 {
        grid-template-columns: 1fr 1fr;
    }

    .leadership-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar-left,
    .toolbar-right {
        justify-content: center;
    }
}

/* ===== 交互反馈统一增强（纯视觉，不改功能） =====
   内容区主操作按钮：hover 上浮幅度统一加大并追加柔和阴影，点击回弹，反馈更清晰 */
#app :not(#topHeader) .btn-primary,
#app :not(#topHeader) .btn-success,
#app :not(#topHeader) .btn-danger,
#app :not(#topHeader) .btn-warning,
#app :not(#topHeader) .btn-orange,
#app :not(#topHeader) .btn-info,
#app :not(#topHeader) .btn-start,
#app :not(#topHeader) .btn-call {
    transition: transform 0.18s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.18s ease-out, filter 0.18s ease-out;
}
#app :not(#topHeader) .btn-primary:hover,
#app :not(#topHeader) .btn-success:hover,
#app :not(#topHeader) .btn-danger:hover,
#app :not(#topHeader) .btn-warning:hover,
#app :not(#topHeader) .btn-orange:hover,
#app :not(#topHeader) .btn-info:hover,
#app :not(#topHeader) .btn-start:hover,
#app :not(#topHeader) .btn-call:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    filter: brightness(1.05);
}
#app :not(#topHeader) .btn-primary:active,
#app :not(#topHeader) .btn-success:active,
#app :not(#topHeader) .btn-danger:active,
#app :not(#topHeader) .btn-warning:active,
#app :not(#topHeader) .btn-orange:active,
#app :not(#topHeader) .btn-info:active,
#app :not(#topHeader) .btn-start:active,
#app :not(#topHeader) .btn-call:active {
    transform: translateY(0);
    filter: brightness(0.97);
}

/* 内容区数据卡片：hover 轻微上浮 + 描边微亮，增强可点感 */
#app :not(#topHeader) .stat-card:hover,
#app :not(#topHeader) .kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: color-mix(in srgb, var(--accent, #A0673C) 35%, var(--border, #d1d5db));
}

/* ============================================================
   装车单卡片 · 状态感知视觉增强层 v3.14（纯视觉，不改功能）
   ① 计时进度环（进度=耗时/历史平均，无历史默认45分钟）
   ② 暂停态整卡降饱和 + 左上角暂停浮标
   ③ 尾托提示醒目化
   全部使用 CSS 变量，自动适配所有主题
   ============================================================ */

/* ---------- ② 暂停态：整卡降饱和 ---------- */
.loading-card {
    transition: all 0.25s ease-out, filter 0.4s ease, opacity 0.4s ease;
}
.loading-card.card-paused {
    filter: grayscale(0.6) opacity(0.88);
}
.loading-card.card-paused:hover {
    filter: grayscale(0.35) opacity(0.96);
}

/* 暂停浮标：默认隐藏，卡片带 card-paused 时由 CSS 联动显示 */
.card-paused-flag {
    display: none;
    position: absolute;
    top: 9px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    align-items: center;
    gap: 5px;
    padding: 3px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    border-radius: 999px;
    color: var(--warning, #D77402);
    background: color-mix(in srgb, var(--warning, #D77402) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--warning, #D77402) 45%, transparent);
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--warning, #D77402) 25%, transparent);
    animation: pausedFlagIn 0.35s ease;
}
.loading-card.card-paused .card-paused-flag {
    display: flex;
}
.card-paused-flag i {
    font-size: 10px;
}
@keyframes pausedFlagIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ---------- ① 计时进度环 ---------- */
/* 升级后的 timer-box 改为横向布局：左进度环 + 右侧时间信息 */
.timer-box.loading-timer-themed {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
}
.timer-ring {
    position: relative;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
}
.timer-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    display: block;
}
.timer-ring-bg {
    fill: none;
    stroke: color-mix(in srgb, var(--text-muted, #9C917C) 22%, transparent);
    stroke-width: 3.5;
}
.timer-ring-fg {
    fill: none;
    stroke: var(--accent, #D9A85C);
    stroke-width: 3.5;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.6s ease, stroke 0.4s ease;
}
.timer-ring-ic {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--accent, #D9A85C);
    transition: color 0.4s ease;
}
/* 时间信息列（环右侧） */
.timer-box.loading-timer-themed .time,
.timer-box.loading-timer-themed .timer-label,
.timer-box.loading-timer-themed .timer-compare {
    text-align: left;
    align-self: stretch;
}
.timer-box.loading-timer-themed .timer-compare {
    font-size: 10px;
    white-space: nowrap;
}
/* 状态配色（复用 timer-theme 状态类） */
.timer-box.normal .timer-ring-fg   { stroke: var(--accent, #D9A85C); }
.timer-box.normal .timer-ring-ic   { color: var(--accent, #D9A85C); }
.timer-box.warning .timer-ring-fg  { stroke: var(--warning, #D77402); }
.timer-box.warning .timer-ring-ic  { color: var(--warning, #D77402); }
.timer-box.danger .timer-ring-fg   { stroke: var(--danger, #F87171); }
.timer-box.danger .timer-ring-ic   { color: var(--danger, #F87171); }
.timer-box.paused .timer-ring-fg   { stroke: var(--text-muted, #9C917C); }
.timer-box.paused .timer-ring-ic   { color: var(--text-muted, #9C917C); }
.timer-box.completed .timer-ring-fg { stroke: var(--success, #4ADE80); }
.timer-box.completed .timer-ring-ic { color: var(--success, #4ADE80); }
/* 严重超时：进度环红色脉冲提醒 */
.timer-box.danger .timer-ring {
    animation: ringPulse 1.2s ease-in-out infinite;
}
@keyframes ringPulse {
    0%, 100% { filter: drop-shadow(0 0 0 color-mix(in srgb, var(--danger, #F87171) 0%, transparent)); transform: scale(1); }
    50%      { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--danger, #F87171) 55%, transparent)); transform: scale(1.05); }
}
/* 移动端：环缩小避免挤压 */
.loading-card-mobile .timer-ring {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
}
.loading-card-mobile .timer-ring-ic {
    font-size: 11px;
}

/* ---------- ③ 尾托提示醒目化 ---------- */
.loading-card .footer-tail .tail-tag.has-tail {
    background: color-mix(in srgb, var(--warning, #D77402) 16%, transparent);
    color: var(--warning, #D77402);
    border: 1px solid color-mix(in srgb, var(--warning, #D77402) 55%, transparent);
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 999px;
    box-shadow: 0 1px 8px color-mix(in srgb, var(--warning, #D77402) 20%, transparent);
}
.loading-card .footer-tail .tail-tag.has-tail i {
    font-size: 10px;
}
.loading-card .footer-tail .tail-tag.no-tail {
    padding: 3px 12px;
    border-radius: 999px;
}