/* ======================================
           企业后台通用样式（终极完整版 · 无遗漏）
        ====================================== */
        .sys-ui {
            font-family: "Microsoft YaHei", Arial, sans-serif;
            font-size: 14px;
            color: #333;
            line-height: 1.5;
            box-sizing: border-box;
            background: #f5f7fa;
            padding: 20px;
            position: relative;
        }
        .sys-ui * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 卡片容器 */
        .sys-ui .card {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            padding: 20px;
            margin-bottom: 20px;
            border: 1px solid #e8e8e8;
        }
        .sys-ui .card-title {
            font-size: 16px;
            font-weight: 600;
            color: #2f5496;
            margin-bottom: 15px;
            padding-bottom: 8px;
            border-bottom: 1px solid #eee;
        }

        /* 标准表格 */
        .sys-ui .table {
            width: 100%;
            border-collapse: collapse;
            background: #fff;
            margin: 10px 0;
        }
        .sys-ui .table th {
            background: #2f5496;
            color: #fff;
            padding: 12px 10px;
            text-align: left;
            font-weight: 500;
            border: 1px solid #e8e8e8;
        }
        .sys-ui .table td {
            padding: 10px;
            border: 1px solid #e8e8e8;
            vertical-align: middle;
        }
        .sys-ui .table tr:hover {
            background: #f8f9fa;
        }

        /* 紧凑表格 */
        .sys-ui .table-compact {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
            background: #fff;
        }
        .sys-ui .table-compact th {
            background: #2f5496;
            color: #fff;
            padding: 6px 8px;
            text-align: left;
            border: 1px solid #ddd;
        }
        .sys-ui .table-compact td {
            padding: 4px 8px;
            border: 1px solid #ddd;
            vertical-align: middle;
        }
        .sys-ui .table-compact tr:hover {
            background: #f1f5fb;
        }

        /* 按钮 + 动态效果 + 禁用 */
        .sys-ui .btn {
            padding: 7px 16px;
            border-radius: 4px;
            border: none;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.25s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            margin-right: 6px;
            user-select: none;
        }
        .sys-ui .btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .sys-ui .btn:active {
            transform: translateY(0);
        }
        .sys-ui .btn-primary { background: #2f5496; color: #fff; }
        .sys-ui .btn-primary:hover { background: #1d3b6f; }
        .sys-ui .btn-success { background: #52c41a; color: #fff; }
        .sys-ui .btn-warning { background: #faad14; color: #fff; }
        .sys-ui .btn-danger { background: #f5222d; color: #fff; }
        .sys-ui .btn-default { background: #fff; color: #333; border: 1px solid #d9d9d9; }
        .sys-ui .btn-default:hover { background: #f5f7fa; }
        .sys-ui .btn:disabled {
            opacity: 0.55;
            cursor: not-allowed !important;
            transform: none !important;
            box-shadow: none !important;
        }
        .sys-ui .btn-icon {
            padding: 6px 10px;
            font-size: 13px;
        }

        /* 输入框、下拉框、文本域 */
        .sys-ui input[type="text"],
        .sys-ui input[type="number"],
        .sys-ui input[type="date"],
        .sys-ui select,
        .sys-ui textarea {
            padding: 7px 10px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            font-size: 14px;
            width: 220px;
            outline: none;
            transition: border 0.2s;
        }
        .sys-ui input:focus,
        .sys-ui select:focus,
        .sys-ui textarea:focus {
            border-color: #40a9ff;
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
        }
        .sys-ui textarea {
            width: 100%;
            min-height: 80px;
            resize: vertical;
        }

        /* 必输项 */
        .sys-ui .required {
            border: 1px solid #ff4d4f !important;
        }
        .sys-ui .required-label {
            position: relative;
        }
        .sys-ui .required-label::after {
            content: "";
            color: #ff4d4f;
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 16px;
            font-weight: bold;
        }

        /* 双击弹出输入框 */
        .sys-ui .input-dblclick {
            border: 1px solid #40a9ff !important;
            background: #f0f7ff !important;
            cursor: pointer !important;
        }

        /* 禁用输入框样式 */
        .sys-ui input:disabled,
        .sys-ui select:disabled,
        .sys-ui textarea:disabled {
            background: #f5f7fa !important;
            border-color: #dcdcdc !important;
            color: #999 !important;
            cursor: not-allowed !important;
        }

        /* 单选、复选 + 新增禁用样式 */
        .sys-ui input[type="radio"],
        .sys-ui input[type="checkbox"] {
            width: 16px;
            height: 16px;
            margin-right: 6px;
            vertical-align: middle;
        }
        .sys-ui input[type="radio"]:disabled,
        .sys-ui input[type="checkbox"]:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        .sys-ui .radio-group,
        .sys-ui .checkbox-group {
            display: flex;
            gap: 15px;
            margin: 6px 0;
        }

        /* 普通列表 */
        .sys-ui .list {
            list-style: none;
            border: 1px solid #e8e8e8;
            border-radius: 6px;
        }
        .sys-ui .list li {
            padding: 10px 15px;
            border-bottom: 1px solid #f0f0f0;
            background: #fff;
        }

        /* 左侧标准多级菜单 */
        .sys-ui .menu {
            list-style: none;
            width: 220px;
            background: #fff;
            border: 1px solid #e8e8e8;
            border-radius: 6px;
        }
        .sys-ui .menu li {
            padding: 10px 15px;
            cursor: pointer;
            border-left: 3px solid transparent;
            position: relative;
        }
        .sys-ui .menu li:hover {
            background: #f5f7fa;
            border-left-color: #2f5496;
        }
        .sys-ui .menu li.active {
            background: #e6f7ff;
            border-left-color: #2f5496;
            color: #2f5496;
        }
        .sys-ui .menu .submenu {
            list-style: none;
            display: none;
            background: #fafbfc;
            margin-top: 5px;
            border-left: 2px solid #e8e8e8;
        }
        .sys-ui .menu .submenu li {
            padding-left: 25px;
        }
        .sys-ui .menu .has-sub.open > .submenu {
            display: block;
        }
        .sys-ui .menu .menu-arrow {
            position: absolute;
          right: 12px;
          top: 50%;
          transform: translateY(-50%);
        }

        /* 紧凑菜单 */
        .sys-ui .menu-compact {
            list-style: none;
            width: 200px;
            background: #fff;
            border: 1px solid #e8e8e8;
            border-radius: 4px;
            font-size: 13px;
        }
        .sys-ui .menu-compact li {
            padding: 6px 12px;
            cursor: pointer;
            border-left: 2px solid transparent;
            position: relative;
        }
        .sys-ui .menu-compact li:hover {
            background: #f5f7fa;
            border-left-color: #2f5496;
        }
        .sys-ui .menu-compact li.active {
            background: #e6f7ff;
            border-left-color: #2f5496;
            color: #2f5496;
        }
        .sys-ui .menu-compact .submenu {
            list-style: none;
            display: none;
            background: #fafbfc;
            margin-top: 3px;
            border-left: 2px solid #e8e8e8;
        }
        .sys-ui .menu-compact .submenu li {
            padding-left: 20px;
        }
        .sys-ui .menu-compact .has-sub.open > .submenu {
            display: block;
        }
        .sys-ui .menu-compact .menu-arrow {
            position: absolute;
          right: 8px;
          top: 50%;
          transform: translateY(-50%);
        }

        /* 右侧菜单（修复：文字靠右，不遮挡） */
        .sys-ui .menu-right {
            list-style: none;
            width: 200px;
            background: #fff;
            border: 1px solid #e8e8e8;
            border-radius: 6px;
            position: absolute;
            right: 20px;
            top: 100px;
        }
        .sys-ui .menu-right li {
            padding: 10px 15px;
            cursor: pointer;
            border-right: 3px solid transparent;
            position: relative;
            text-align: right; /* 文字靠右 */
        }
        .sys-ui .menu-right li:hover {
            background: #f5f7fa;
            border-right-color: #2f5496;
        }
        .sys-ui .menu-right li.active {
            background: #e6f7ff;
            border-right-color: #2f5496;
            color: #2f5496;
        }
        .sys-ui .menu-right .submenu {
            list-style: none;
            display: none;
            background: #fafbfc;
            margin-top: 5px;
            border-right: 2px solid #e8e8e8;
        }
        .sys-ui .menu-right .submenu li {
            padding-right: 25px;
            text-align: right;
        }
        .sys-ui .menu-right .has-sub.open > .submenu {
            display: block;
        }
        .sys-ui .menu-right .menu-arrow {
            position: absolute;
          left: 12px;
          top: 50%;
          transform: translateY(-50%);
        }

        /* 顶部横向多级菜单（支持3级）+ 禁用 + 子菜单箭头 */
        .sys-ui .top-menu {
            list-style: none;
            display: flex;
            background: #2f5496;
            border-radius: 6px;
        }
        .sys-ui .top-menu > li {
            padding: 10px 20px;
            color: #fff;
            cursor: pointer;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }
        .sys-ui .top-menu > li:hover {
            background: #1d3b6f;
        }
        .sys-ui .top-menu > li.disabled {
            opacity: 0.5;
            cursor: not-allowed !important;
            background: transparent !important;
        }
        .sys-ui .top-menu .top-sub {
            list-style: none;
            position: absolute;
            top: 100%;
            left: 0;
            background: #fff;
            border: 1px solid #e8e8e8;
            min-width: 160px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            display: none;
            z-index: 999;
        }
        .sys-ui .top-menu .top-sub li {
            padding: 8px 15px;
            color: #333;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }
        .sys-ui .top-menu .top-sub li:hover {
            background: #f5f7fa;
        }
        .sys-ui .top-menu > li:hover > .top-sub,
        .sys-ui .top-menu .top-sub li:hover > .top-sub {
            display: block;
        }
        .sys-ui .top-menu .top-sub .top-sub {
            top: 0;
            left: 100%;
        }

        /* 专业CSS小箭头（替代丑三角） */
        .sys-ui .menu-arrow {
            display: inline-block;
            width: 0;
            height: 0;
            border-style: solid;
            transition: transform 0.2s;
            flex-shrink: 0;
        }
        /* 右侧箭头 → */
        .sys-ui .menu-arrow-right {
            border-width: 3px 0 3px 4px;
            border-color: transparent transparent transparent #999;
        }
        /* 下侧箭头 ↓ */
        .sys-ui .menu-arrow-down {
            border-width: 4px 3px 0 3px;
            border-color: #999 transparent transparent transparent;
        }
        /* 左侧箭头 ← */
        .sys-ui .menu-arrow-left {
            border-width: 3px 4px 3px 0;
            border-color: transparent #999 transparent transparent;
        }
        /* 白色箭头（顶部菜单用） */
        .sys-ui .top-menu .menu-arrow-down {
            border-color: #fff transparent transparent transparent;
        }
        .sys-ui .top-menu .top-sub .menu-arrow-right {
            border-color: transparent transparent transparent #666;
        }

        /* 标签 */
        .sys-ui .tag {
            display: inline-block;
            padding: 2px 8px;
            font-size: 12px;
            border-radius: 12px;
            background: #f5f7fa;
            margin-right: 5px;
        }
        .sys-ui .tag-blue {
            background: #e6f7ff;
            color: #2f5496;
        }
        .sys-ui .tag-green { background: #f6ffed; color: #52c41a; }
        .sys-ui .tag-orange { background: #fffbe6; color: #faad14; }
        .sys-ui .tag-red { background: #fff2f0; color: #f5222d; }

        /* 弹出对话框 */
        .sys-ui .modal-overlay {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.4);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 9999;
        }
        .sys-ui .modal {
            width: 500px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
            overflow: hidden;
        }
        .sys-ui .modal-header {
            padding: 15px 20px;
            background: #2f5496;
            color: #fff;
            font-size: 16px;
            font-weight: 600;
        }
        .sys-ui .modal-body {
            padding: 20px;
            min-height: 100px;
        }
        .sys-ui .modal-footer {
            padding: 12px 20px;
            text-align: right;
            border-top: 1px solid #eee;
        }

        /* 消息提示框 */
        .sys-ui .msg-box {
            padding: 12px 15px;
            border-radius: 4px;
            margin: 10px 0;
            font-size: 14px;
        }
        .sys-ui .msg-success { background: #f6ffed; border: 1px solid #b7eb8f; color: #52c41a; }
        .sys-ui .msg-error { background: #fff2f0; border: 1px solid #ffccc7; color: #f5222d; }
        .sys-ui .msg-warning { background: #fffbe6; border: 1px solid #ffe58f; color: #faad14; }
        .sys-ui .msg-info { background: #e6f7ff; border: 1px solid #91caff; color: #1890ff; }

        /* ======================================
           【企业必备新增样式】真正生产环境常用
        ====================================== */
        /* 统计数字面板 */
        .sys-ui .stat-panel {
            display: flex; gap:15px; margin-bottom:20px;
        }
        .sys-ui .stat-item {
            flex:1; background:#fff; border-radius:8px; padding:20px;
            border:1px solid #eee; box-shadow:0 2px 6px rgba(0,0,0,0.05);
        }
        .sys-ui .stat-label { font-size:13px; color:#666; margin-bottom:6px; }
        .sys-ui .stat-value { font-size:24px; font-weight:bold; color:#2f5496; }

        /* 分割线 */
        .sys-ui .divider {
            height:1px; background:#eee; margin:16px 0;
        }

        /* 文字排版（常用） */
        .sys-ui .text-muted { color:#999; }
        .sys-ui .text-primary { color:#2f5496; }
        .sys-ui .text-success { color:#52c41a; }
        .sys-ui .text-warning { color:#faad14; }
        .sys-ui .text-danger { color:#f5222d; }
        .sys-ui .text-center { text-align:center; }
        .sys-ui .text-right { text-align:right; }

        /* 表单行（企业表单必用） */
        .sys-ui .form-row {
            display:flex; align-items:center; margin-bottom:12px; gap:10px;
        }
        .sys-ui .form-label {
            width:100px; text-align:right; font-weight:500;
        }

        /* 加载占位 */
        .sys-ui .skeleton {
            background:#f5f7fa; border-radius:4px;
            height:16px; width:80%;
            animation:skeleton 1.5s infinite linear;
        }
        @keyframes skeleton {
            0%{opacity:0.6;} 50%{opacity:0.3;} 100%{opacity:0.6;}
        }

        /* ======================
           【顶部企业标题栏】
        ====================== */
        .sys-ui .top-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #2f5496;
            border-radius: 8px;
            padding: 0 20px;
            height: 50px;
            margin-bottom: 20px;
        }
        .sys-ui .top-logo-name {
            display: flex;
            align-items: center;
            gap: 10px;
            color: #fff;
            font-size: 16px;
            font-weight: bold;
        }
        .sys-ui .top-icon {
            width: 32px;
            height: 32px;
            background: #fff;
            color: #2f5496;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }
        .sys-ui .top-header .top-menu {
            margin: 0;
            padding: 0;
            background: transparent;
        }
        .sys-ui .top-header .top-menu > li {
            height: 50px;
            line-height: 30px;
        }

        .sys-ui .img-responsive {
            max-width: 100%;
            height: auto;
            border-radius: 6px;
        }
        .sys-ui .img-card {
            border: 1px solid #eee;
            border-radius: 8px;
            padding: 4px;
            background: #fff;
        }
        .sys-ui .img-thumbnail {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 6px;
            border: 1px solid #eee;
        }
                
        /* ======================================
           🔥 新增：处理中 + 进度条 动态效果
        ====================================== */
        /* 处理中 点点点动画 */
        .sys-ui .loading-dots {
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .sys-ui .loading-dots::after {
            content: "";
            width: 3px; height: 3px;
            border-radius: 50%;
            background: #2f5496;
            animation: loadingDots 1s infinite;
        }
        @keyframes loadingDots {
            0% { box-shadow: 6px 0 0 #2f5496, 12px 0 0 #2f5496; }
            33% { box-shadow: 6px 0 0 #2f5496, 12px 0 0 transparent; }
            66% { box-shadow: 6px 0 0 transparent, 12px 0 0 #2f5496; }
            100% { box-shadow: 6px 0 0 #2f5496, 12px 0 0 #2f5496; }
        }

        /* 进度条容器 */
        .sys-ui .progress {
            width: 100%;
            height: 8px;
            background: #f0f2f5;
            border-radius: 4px;
            overflow: hidden;
            margin: 8px 0;
        }
        /* 进度条流动效果 */
        .sys-ui .progress-bar {
            height: 100%;
            border-radius: 4px;
            background: #2f5496;
            transition: width 0.3s ease;
            position: relative;
        }
        /* 流光动画 */
        .sys-ui .progress-bar::after {
            content: "";
            position: absolute;
            top: 0; left: 0; bottom: 0;
            width: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            animation: progressShine 1.5s infinite;
        }
        @keyframes progressShine {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(200%); }
        }
        /* 多色进度条 */
        .sys-ui .progress-success .progress-bar { background: #52c41a; }
        .sys-ui .progress-warning .progress-bar { background: #faad14; }
        .sys-ui .progress-danger .progress-bar { background: #f5222d; }

      /* ======================================
         【新增】Tab 标签页样式
      ====================================== */
      /* Tab 容器 */
      .sys-ui .tabs {
          display: flex;
          align-items: center;
          border-bottom: 1px solid #e8e8e8;
          margin-bottom: 15px;
          position: relative;
      }
      /* Tab 标签项 */
      .sys-ui .tab-item {
          padding: 8px 20px;
          margin-right: 2px;
          cursor: pointer;
          font-size: 14px;
          color: #666;
          border-bottom: 2px solid transparent;
          transition: all 0.2s ease;
          user-select: none;
      }
      /* 激活的 Tab */
      .sys-ui .tab-item.active {
          color: #2f5496;
          border-bottom-color: #2f5496;
          font-weight: 500;
      }
      /* 悬停效果 */
      .sys-ui .tab-item:hover:not(.active) {
          color: #2f5496;
          border-bottom-color: #e6f7ff;
      }
      /* 禁用的 Tab */
      .sys-ui .tab-item.disabled {
          color: #999;
          cursor: not-allowed;
          opacity: 0.6;
      }
      .sys-ui .tab-item.disabled:hover {
          color: #999;
          border-bottom-color: transparent;
      }
      /* 卡片式 Tab 容器（带背景/圆角） */
      .sys-ui .tabs-card {
          background: #f5f7fa;
          border-radius: 6px 6px 0 0;
          padding: 2px 2px 0 2px;
          border-bottom: none;
      }
      .sys-ui .tabs-card .tab-item {
          border-bottom: none;
          border-radius: 6px 6px 0 0;
          padding: 10px 20px;
      }
      .sys-ui .tabs-card .tab-item.active {
          background: #fff;
          box-shadow: 0 -2px 4px rgba(0,0,0,0.02);
      }
      /* Tab 内容容器 */
      .sys-ui .tab-content {
          display: none;
          padding: 15px 0;
      }
      .sys-ui .tab-content.active {
          display: block;
      }
	  
	          /* 使用说明样式（不破坏原有布局） */
        .use-tips {
            background: #f7faff;
            border-left: 3px solid #2f5496;
            padding: 8px 12px;
            margin-bottom: 12px;
            font-size: 13px;
            line-height: 1.5;
            color: #2f5496;
            border-radius: 0 4px 4px 0;
        }