* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
body {
  margin: 0;
  padding: 0;
}


.toast-overlay[data-v-1157bc14] {
  position: fixed;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn-1157bc14 0.2s ease;
}
.toast-overlay.center[data-v-1157bc14] {
  top: 0;
  bottom: 0;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.4);
}
.toast-overlay.top[data-v-1157bc14] {
  top: 80px;
  align-items: flex-start;
  background-color: transparent;
}
.toast-container[data-v-1157bc14] {
  min-width: 300px;
  max-width: 500px;
  padding: 16px 24px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 12px;
  animation: slideIn-1157bc14 0.3s ease;
  backdrop-filter: blur(8px);
}
.toast-container.success[data-v-1157bc14] {
  background: linear-gradient(135deg, #389e0d 0%, #52c41a 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(56, 158, 13, 0.35);
  border-left: 4px solid rgba(255, 255, 255, 0.4);
}
.toast-container.error[data-v-1157bc14] {
  background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
  color: white;
}
.toast-container.warning[data-v-1157bc14] {
  background: linear-gradient(135deg, #e6a23c 0%, #f5af58 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(230, 162, 60, 0.35);
  border-left: 4px solid rgba(255, 255, 255, 0.4);
}
.toast-container.info[data-v-1157bc14] {
  background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.35);
  border-left: 4px solid rgba(255, 255, 255, 0.4);
}
.toast-icon[data-v-1157bc14] {
  font-size: 24px;
  font-weight: bold;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}
.toast-content[data-v-1157bc14] {
  flex: 1;
  min-width: 0;
}
.toast-message[data-v-1157bc14] {
  font-size: 15px;
  line-height: 1.5;
  word-break: break-word;
}
@keyframes fadeIn-1157bc14 {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}
@keyframes slideIn-1157bc14 {
from {
    transform: translateY(-20px);
    opacity: 0;
}
to {
    transform: translateY(0);
    opacity: 1;
}
}


/* 基础样式 - 现代化设计 */
.login-register-container[data-v-453100b2] {
  display: flex;
  justify-content: space-between; /* 左右分布 */
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  position: relative;
  overflow: hidden;
  padding: 0 5%;
}

/* 左侧项目特点说明 */
.features-section[data-v-453100b2] {
  flex: 1;
  max-width: 50%;
  padding-left: 5%;
  animation: fadeIn-453100b2 0.8s ease-out;
}
.features-title[data-v-453100b2] {
  font-size: 36px;
  font-weight: 700;
  color: #333;
  margin-bottom: 40px;
  line-height: 1.3;
}
.features-list[data-v-453100b2] {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.feature-item[data-v-453100b2] {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}
.feature-item[data-v-453100b2]:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateX(5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.feature-icon[data-v-453100b2] {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 10px;
  color: #fff;
}
.feature-icon svg[data-v-453100b2] {
  width: 24px;
  height: 24px;
}
.feature-content h3[data-v-453100b2] {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 6px 0;
}
.feature-content p[data-v-453100b2] {
  font-size: 14px;
  color: #666;
  margin: 0;
  line-height: 1.5;
}

/* 页面左上角品牌标识 */
.page-brand[data-v-453100b2] {
  position: fixed;
  top: 30px;
  left: 30px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 100;
  animation: fadeIn-453100b2 0.6s ease-out;
}
.page-brand-icon[data-v-453100b2] {
  width: 32px;
  height: 32px;
  -o-object-fit: contain;
     object-fit: contain;
}
.page-brand-text[data-v-453100b2] {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
}

/* 背景装饰 */
.login-register-container[data-v-453100b2]::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  animation: rotate-453100b2 30s linear infinite;
  pointer-events: none;
}
@keyframes rotate-453100b2 {
0% { transform: rotate(0deg);
}
100% { transform: rotate(360deg);
}
}
.auth-box[data-v-453100b2] {
  background: rgba(255, 255, 255, 0.98);
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  width: 100%;
  max-width: 450px;
  position: relative;
  z-index: 1;
  backdrop-filter: blur(10px);
  animation: slideUp-453100b2 0.5s ease-out;
  margin-right: 0; /* 确保靠右 */
}
@keyframes slideUp-453100b2 {
from {
    opacity: 0;
    transform: translateY(30px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.auth-tabs[data-v-453100b2] {
  display: flex;
  margin-bottom: 20px;
  border-bottom: 2px solid #eee;
}
.tab-btn[data-v-453100b2] {
  flex: 1;
  padding: 14px 10px;
  border: none;
  background: transparent;
  font-size: 15px;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
  position: relative;
  border-radius: 8px 8px 0 0;
}
.tab-btn[data-v-453100b2]:hover {
  background: rgba(24, 144, 255, 0.05);
}
.tab-btn.active[data-v-453100b2] {
  color: #1890ff;
  font-weight: 600;
  background: rgba(24, 144, 255, 0.08);
}
.tab-btn.active[data-v-453100b2]::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  background: #1890ff;
  border-radius: 2px;
}
.auth-form[data-v-453100b2] {
  padding: 10px 0;
  min-height: 520px; /* 固定最小高度，与注册页面一致 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.form-item[data-v-453100b2] {
  margin-bottom: 15px;
}
.form-item label[data-v-453100b2] {
  display: block;
  margin-bottom: 8px;
  color: #555;
  font-weight: 600;
  text-align: left;
  font-size: 14px;
}
.form-item input[data-v-453100b2] {
  width: 100%;
  padding: 12px 15px;
  border: 2px solid #e8e8e8;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.3s ease;
  box-sizing: border-box;
  background: #fafafa;
}

/* 带图标的输入框容器 */
.input-with-icon[data-v-453100b2] {
  position: relative;
  display: flex;
  align-items: center;
}
.input-icon[data-v-453100b2] {
  position: absolute;
  left: 12px;
  width: 20px;
  height: 20px;
  color: #999;
  pointer-events: none;
  transition: color 0.3s ease;
  z-index: 1;
}
.input-with-icon .account-input-with-icon[data-v-453100b2] {
  padding-left: 42px;
  padding-right: 15px;
  width: 350px;
  box-sizing: border-box;
}
.input-with-icon:focus-within .input-icon[data-v-453100b2] {
  color: #1890ff;
}

/* 忘记密码弹窗样式 - 使用forgot-form前缀 */
.forgot-form .form-item[data-v-453100b2] {
  margin-bottom: 15px;
}
.forgot-form .input-with-icon[data-v-453100b2] {
  position: relative;
  display: flex;
  align-items: center;
}
.forgot-form .input-icon[data-v-453100b2] {
  position: absolute;
  left: 12px;
  width: 20px;
  height: 20px;
  color: #999;
  pointer-events: none;
  transition: color 0.3s ease;
  z-index: 1;
}
.forgot-form .sub-account-input[data-v-453100b2] {
  width: 350px;
  padding: 12px 15px 12px 42px;
  border: 2px solid #e8e8e8;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.3s ease;
  box-sizing: border-box;
  background: #fafafa;
}
.forgot-form .sub-account-input[data-v-453100b2]:focus {
  outline: none;
  border-color: #1890ff;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.1);
}
.forgot-form .form-row[data-v-453100b2] {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  width: 350px;
}
.forgot-form .form-row .input-with-icon[data-v-453100b2] {
  flex: 1;
}
.forgot-form .form-row .input-with-icon .sub-account-input[data-v-453100b2] {
  width: 100%;
}
.forgot-code-btn[data-v-453100b2] {
  width: auto !important;
  padding: 12px 16px !important;
  margin-right: 0;
  background: #1890ff;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.3s ease;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(24, 144, 255, 0.3);
  flex-shrink: 0;
}
.forgot-code-btn[data-v-453100b2]:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(24, 144, 255, 0.4);
}
.forgot-code-btn[data-v-453100b2]:disabled {
  background: linear-gradient(135deg, #ccc 0%, #e0e0e0 100%);
  cursor: not-allowed;
  box-shadow: none;
}
.forgot-submit-btn[data-v-453100b2] {
  width: 350px !important;
}
.form-item input[data-v-453100b2]:focus {
  outline: none;
  border-color: #1890ff;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.1);
  transform: translateY(-1px);
}
.form-item input.error[data-v-453100b2] {
  border-color: #f56c6c;
}
.input-group[data-v-453100b2] {
  display: flex;
  gap: 10px;
}
.input-group input[data-v-453100b2] {
  flex: 1;
}
.password-input-group[data-v-453100b2] {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.password-input-group input[data-v-453100b2] {
  flex: 1;
  margin-right: 10px;
}
.forgot-link[data-v-453100b2] {
  color: #1890ff;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}
.forgot-link[data-v-453100b2]:hover {
  text-decoration: underline;
}

/* 登录方式切换 */
.login-type-switch[data-v-453100b2] {
  margin: 20px 0;
  padding: 15px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.switch-label[data-v-453100b2] {
  display: flex;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.switch-checkbox[data-v-453100b2] {
  width: 18px;
  height: 18px;
  margin-right: 10px;
  cursor: pointer;
  accent-color: #1890ff;
}
.switch-text[data-v-453100b2] {
  color: #555;
  font-size: 14px;
  font-weight: 500;
}

/* 子账户登录字段 */
.sub-account-fields[data-v-453100b2] {
  margin-top: 15px;
  padding: 15px;
  background: rgba(24, 144, 255, 0.05);
  border-radius: 5px;
  border: 1px solid rgba(24, 144, 255, 0.2);
}
.sub-account-input[data-v-453100b2] {
  width: 350px;
  padding: 12px 15px;
  border: 2px solid #e8e8e8;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.3s ease;
  box-sizing: border-box;
  background: #fafafa;
}
.sub-account-input[data-v-453100b2]:focus {
  outline: none;
  border-color: #1890ff;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.1);
  transform: translateY(-1px);
}
.sub-account-btn[data-v-453100b2] {
  width: 100%;
  padding: 10px;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  transition: opacity 0.3s;
  font-weight: 500;
}
.sub-account-btn[data-v-453100b2]:hover:not(:disabled) {
  opacity: 0.9;
}
.sub-account-btn[data-v-453100b2]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 第三方登录 */
.third-party-login[data-v-453100b2] {
  margin: 25px 0;
}
.divider[data-v-453100b2] {
  text-align: center;
  position: relative;
  margin-bottom: 20px;
}
.divider[data-v-453100b2]::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: #eee;
}
.divider span[data-v-453100b2] {
  background: #fff;
  padding: 0 15px;
  color: #999;
  font-size: 13px;
  position: relative;
}
.third-party-icons[data-v-453100b2] {
  display: flex;
  justify-content: center;
  gap: 20px;
}
.third-icon[data-v-453100b2] {
  cursor: pointer;
  transition: transform 0.3s;
}
.third-icon[data-v-453100b2]:hover {
  transform: scale(1.1);
}
.code-btn[data-v-453100b2] {
  padding: 12px 24px;
  background: #1890ff;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.3s ease;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(24, 144, 255, 0.3);
}
.code-btn[data-v-453100b2]:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(24, 144, 255, 0.4);
}
.code-btn[data-v-453100b2]:active:not(:disabled) {
  transform: translateY(0);
}
.code-btn[data-v-453100b2]:disabled {
  background: linear-gradient(135deg, #ccc 0%, #e0e0e0 100%);
  cursor: not-allowed;
  box-shadow: none;
}
.submit-btn[data-v-453100b2] {
  width: 350px;
  padding: 12px 15px;
  background: #1890ff;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
  letter-spacing: 1px;
  box-shadow: 0 4px 15px rgba(24, 144, 255, 0.4);
  box-sizing: border-box;
  display: block;
}
.submit-btn[data-v-453100b2]:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(24, 144, 255, 0.5);
}
.submit-btn[data-v-453100b2]:active:not(:disabled) {
  transform: translateY(0);
}
.submit-btn[data-v-453100b2]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}
.error-msg[data-v-453100b2] {
  color: #f56c6c;
  font-size: 12px;
  margin-top: 6px;
  display: block;
  font-weight: 500;
}
.error-msg.global-error[data-v-453100b2] {
  text-align: center;
  font-size: 14px;
  padding: 8px;
  background: rgba(245, 108, 108, 0.1);
  border-radius: 6px;
  margin-top: 10px;
}

/* 弹窗样式 - 现代化设计 */
.modal-overlay[data-v-453100b2] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(5px);
  animation: fadeIn-453100b2 0.3s ease;
}
@keyframes fadeIn-453100b2 {
from { opacity: 0;
}
to { opacity: 1;
}
}
.modal-content[data-v-453100b2] {
  background: #fff;
  padding: 35px;
  border-radius: 16px;
  width: 100%;
  max-width: 420px;
  max-height: 400px;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: slideUpModal-453100b2 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes slideUpModal-453100b2 {
from {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
}
to {
    opacity: 1;
    transform: translateY(0) scale(1);
}
}
.modal-header[data-v-453100b2] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}
.modal-header h3[data-v-453100b2] {
  margin: 0;
  color: #333;
}
.modal-close[data-v-453100b2] {
  background: none;
  border: none;
  font-size: 24px;
  color: #999;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.modal-close[data-v-453100b2]:hover {
  color: #333;
}
.modal-form[data-v-453100b2] {
  padding: 10px 0;
}

/* 微信扫码 */
.wechat-modal[data-v-453100b2] {
  max-width: 350px;
  text-align: center;
}
.wechat-qrcode[data-v-453100b2] {
  padding: 20px 0;
}
.qrcode-container[data-v-453100b2] {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.qrcode-img[data-v-453100b2] {
  width: 200px;
  height: 200px;
  border: 1px solid #eee;
  border-radius: 5px;
  padding: 10px;
}
.qrcode-tip[data-v-453100b2] {
  margin-top: 15px;
  color: #666;
  font-size: 14px;
}
.scan-success[data-v-453100b2] {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 0;
}
.scan-success p[data-v-453100b2] {
  margin-top: 15px;
  color: #07C160;
  font-size: 16px;
}
.wechat-status[data-v-453100b2] {
  margin-top: 20px;
  color: #666;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.loading-dot[data-v-453100b2] {
  width: 8px;
  height: 8px;
  background: #1890ff;
  border-radius: 50%;
  animation: pulse-453100b2 1s infinite;
}
@keyframes pulse-453100b2 {
0%, 100% { opacity: 1; transform: scale(1);
}
50% { opacity: 0.5; transform: scale(1.2);
}
}

/* 记住密码复选框样式 */
.remember-password-item[data-v-453100b2] {
  margin-top: 5px;
  margin-bottom: 20px;
  display: inline-flex;
  width: 100%;
}
.remember-password-label[data-v-453100b2] {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #606266;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  margin: 0 !important;
  padding: 0;
  font-weight: normal;
  white-space: nowrap;
}
.remember-password-label[data-v-453100b2]:hover {
  color: #1890ff;
}
.remember-checkbox[data-v-453100b2] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #1890ff;
  margin: 0;
}
.remember-checkbox[data-v-453100b2]:checked {
  accent-color: #1890ff;
}

/* 公安备案 */
.beian-footer[data-v-453100b2] {
  position: fixed;
  bottom: 8px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 12px;
  color: #909399;
  z-index: 100;
}
.beian-icon[data-v-453100b2] {
  width: 16px;
  height: 16px;
}
.beian-footer a[data-v-453100b2] {
  color: #909399;
  text-decoration: none;
}
.beian-footer a[data-v-453100b2]:hover {
  color: #1890ff;
  text-decoration: underline;
}


.expired-page[data-v-a34a7986] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #f0f2f5, #fff1f0);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.expired-card[data-v-a34a7986] {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  width: 90%;
  max-width: 400px;
  overflow: hidden;
  animation: slideDown-a34a7986 0.3s ease;
}
@keyframes slideDown-a34a7986 {
from {
    opacity: 0;
    transform: translateY(-30px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.card-header[data-v-a34a7986] {
  background: linear-gradient(135deg, #fff1f0, #ffe0e0);
  border-bottom: 1px solid #ffccc7;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.header-icon[data-v-a34a7986] {
  width: 36px;
  height: 36px;
  background: #f5222d;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}
.header-icon svg[data-v-a34a7986] {
  width: 20px;
  height: 20px;
}
.card-header h2[data-v-a34a7986] {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}
.card-body[data-v-a34a7986] {
  padding: 24px;
  text-align: center;
}
.message[data-v-a34a7986] {
  margin: 0 0 6px 0;
  font-size: 15px;
  color: #303133;
  line-height: 1.6;
}
.subtitle[data-v-a34a7986] {
  margin: 0 0 16px 0;
  font-size: 14px;
  color: #f5222d;
  font-weight: 600;
}
.qrcode-section[data-v-a34a7986] {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 16px;
}
.qrcode-placeholder[data-v-a34a7986] {
  width: 180px;
  height: 180px;
  background: #f5f7fa;
  border: 2px dashed #dcdfe6;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #c0c4cc;
}
.placeholder-icon[data-v-a34a7986] {
  width: 48px;
  height: 48px;
}
.placeholder-text[data-v-a34a7986] {
  font-size: 13px;
  color: #909399;
}
.qrcode-tip[data-v-a34a7986] {
  margin: 12px 0 0 0;
  font-size: 13px;
  color: #606266;
}
.card-footer[data-v-a34a7986] {
  padding: 0 24px 24px;
  display: flex;
  justify-content: center;
}
.btn[data-v-a34a7986] {
  padding: 10px 40px;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-primary[data-v-a34a7986] {
  background: #1890ff;
  color: white;
}
.btn-primary[data-v-a34a7986]:hover {
  background: #40a9ff;
}
.btn-primary[data-v-a34a7986]:active {
  background: #096dd9;
}

/* 弹窗遮罩层 */
.project-set-dialog[data-v-70492e00] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* 弹窗内容 */
.dialog-content[data-v-70492e00] {
  background: white;
  border-radius: 8px;
  width: 400px;
  height: 480px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 弹窗头部 */
.dialog-header[data-v-70492e00] {
  padding: 20px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dialog-header h2[data-v-70492e00] {
  margin: 0;
  color: #303133;
  font-size: 18px;
}
.close-btn[data-v-70492e00] {
  background: none;
  border: none;
  font-size: 28px;
  color: #909399;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
.close-btn[data-v-70492e00]:hover {
  background-color: #f5f7fa;
  color: #606266;
}

/* 弹窗主体 */
.dialog-body[data-v-70492e00] {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.form-content[data-v-70492e00] {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.remark-section[data-v-70492e00] {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.remark-section .info-item[data-v-70492e00] {
  flex: 1;
}
.editable-textarea[data-v-70492e00] {
  flex: 1;
  min-height: 80px;
  resize: none;
}
.info-item[data-v-70492e00] {
  display: flex;
  align-items: center;
}
.info-item.full-width[data-v-70492e00] {
  flex-direction: column;
  align-items: stretch;
}
.info-item label[data-v-70492e00] {
  width: 100px;
  color: #606266;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}
.info-text[data-v-70492e00] {
  color: #303133;
  font-size: 14px;
  padding: 8px 0;
}
.editable-input[data-v-70492e00],
.editable-select[data-v-70492e00],
.editable-textarea[data-v-70492e00] {
  padding: 10px 14px;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  font-size: 14px;
  background-color: #fff;
  transition: all 0.3s ease;
  font-family: inherit;
  color: #303133;
}
.editable-input[data-v-70492e00]:hover,
.editable-select[data-v-70492e00]:hover,
.editable-textarea[data-v-70492e00]:hover {
  border-color: #c0c4cc;
}
.editable-input[data-v-70492e00]:focus,
.editable-select[data-v-70492e00]:focus,
.editable-textarea[data-v-70492e00]:focus {
  outline: none;
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}
.editable-input[data-v-70492e00] {
  flex: 1;
}
.editable-select[data-v-70492e00] {
  flex: 1;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 12 12%27%3E%3Cpath fill=%27%23606266%27 d=%27M6 9L1 4h10z%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
.editable-select option[data-v-70492e00] {
  padding: 8px;
}
.editable-textarea[data-v-70492e00] {
  width: 100%;
  resize: vertical;
  min-height: 80px;
  line-height: 1.6;
}
.status[data-v-70492e00] {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  background-color: #f0f0f0;
  color: #606266;
}
.status.active[data-v-70492e00] {
  background-color: #f0f9ff;
  color: #409eff;
}

/* 弹窗底部 */
.dialog-footer[data-v-70492e00] {
  padding: 16px 20px;
  border-top: 1px solid #e0e0e0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.cancel-btn[data-v-70492e00],
.confirm-btn[data-v-70492e00] {
  padding: 8px 20px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  border: none;
  transition: background-color 0.3s ease;
}
.cancel-btn[data-v-70492e00] {
  background-color: #f5f7fa;
  color: #606266;
}
.cancel-btn[data-v-70492e00]:hover {
  background-color: #e0e0e0;
}
.confirm-btn[data-v-70492e00] {
  background-color: #409eff;
  color: white;
}
.confirm-btn[data-v-70492e00]:hover {
  background-color: #66b1ff;
}

/* 图片上传区域 */
.form-right[data-v-70492e00] {
  display: flex;
  flex-direction: column;
}
.image-upload-section[data-v-70492e00] {
  width: 100%;
}
.image-preview-container[data-v-70492e00] {
  position: relative;
  width: 100%;
  height: 155px;  /* 固定高度 155px */
  min-height: 155px;
  max-height: 155px;
  border-radius: 8px;
  overflow: hidden;
}
.preview-image[data-v-70492e00] {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
.remove-image-btn[data-v-70492e00] {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 71, 87, 0.95);
  color: white;
  border: none;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s;
  backdrop-filter: blur(4px);
}
.remove-image-btn[data-v-70492e00]:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 16px rgba(255, 71, 87, 0.4);
}
.upload-placeholder[data-v-70492e00] {
  width: 100%;
  height: 155px;  /* 固定高度 155px */
  min-height: 155px;
  max-height: 155px;
  border: 2px dashed #e4e7ed;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #f8f9fa 0%, #fafafa 100%);
}
.upload-placeholder[data-v-70492e00]:hover {
  border-color: #409eff;
  background: linear-gradient(135deg, #ecf5ff 0%, #f0f9ff 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.15);
}
.upload-icon[data-v-70492e00] {
  font-size: 42px;  /* 减小图标尺寸 */
  margin-bottom: 8px;
  opacity: 0.6;
  transition: all 0.3s;
}
.upload-placeholder:hover .upload-icon[data-v-70492e00] {
  opacity: 1;
  transform: scale(1.05);
}
.no-image-text[data-v-70492e00] {
  font-size: 14px;  /* 减小字体 */
  color: #909399;
  font-weight: 500;
  margin: 6px 0 3px;
}
.upload-text[data-v-70492e00] {
  font-size: 14px;
  color: #606266;
  margin: 5px 0;
}
.upload-hint[data-v-70492e00] {
  font-size: 12px;
  color: #a8abb2;
  margin: 0;
}
.file-input[data-v-70492e00] {
  display: none;
}

/* 项目备注区域 */
.remark-section[data-v-70492e00] {
  margin-top: 24px;
}
.remark-section .info-item[data-v-70492e00] {
  display: flex;
  align-items: flex-start;  /* 顶部对齐 */
  gap: 0;
}
.remark-section label[data-v-70492e00] {
  width: 100px;
  color: #606266;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
  margin-bottom: 0;
  padding-top: 10px;  /* 与文本框 padding 对齐 */
}
.remark-section .editable-textarea[data-v-70492e00] {
  flex: 1;
  width: auto;  /* 不再使用 calc 计算宽度 */
  margin-left: 0;  /* 不再需要左边距 */
  vertical-align: top;
}
/* 创建项目弹窗样式 */
.create-project-container[data-v-26ebf75b] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}
.project-modal-overlay[data-v-26ebf75b] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  animation: fadeIn-26ebf75b 0.3s ease-out;
}
@keyframes fadeIn-26ebf75b {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}
.project-modal-content[data-v-26ebf75b] {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 400px;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn-26ebf75b 0.3s ease-out;
}
@keyframes modalSlideIn-26ebf75b {
from {
    opacity: 0;
    transform: translateY(-30px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.project-modal-header[data-v-26ebf75b] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background-color: #fff;
  border-radius: 12px 12px 0 0;
  border-bottom: 1px solid #e8e8e8;
}
.project-modal-title[data-v-26ebf75b] {
  margin: 0;
  font-size: 16px;
  color: #333;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.project-modal-close[data-v-26ebf75b] {
  background: none;
  border: none;
  font-size: 24px;
  color: #666;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: all 0.3s;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.project-modal-close[data-v-26ebf75b]:hover {
  color: #1890ff;
  background: #f5f5f5;
}
.project-modal-body[data-v-26ebf75b] {
  padding: 24px;
  background: #f8f9fa;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.project-form[data-v-26ebf75b] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}
.form-left[data-v-26ebf75b] {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
.form-right[data-v-26ebf75b] {
  display: flex;
  flex-direction: column;
}
.image-upload-container[data-v-26ebf75b] {
  height: -moz-fit-content;
  height: fit-content;
  position: sticky;
  top: 20px;
}
.image-upload[data-v-26ebf75b] {
  min-height: 150px;
  max-height: 130px;
  margin-bottom: 0;
}
.upload-hint[data-v-26ebf75b] {
  font-size: 10px;
  color: #999;
  text-align: left;
  line-height: 1.3;
  margin-top: 0px;
}
.project-form-row[data-v-26ebf75b] {
  display: flex;
  gap: 25px;
}
.project-form-item.half[data-v-26ebf75b] {
  flex: 1;
  min-width: 0; /* 防止内容溢出 */
}
.project-form-item[data-v-26ebf75b] {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
}
.project-form-item.full-width[data-v-26ebf75b] {
  width: 100%;
  flex-direction: row;
  align-items: flex-start;
}
.project-form-label[data-v-26ebf75b] {
  min-width: 80px;
  flex-shrink: 0;
  color: #333;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  line-height: 40px;
}
.project-required[data-v-26ebf75b] {
  color: #ff4757;
  margin-left: 2px;
  font-weight: bold;
}
.project-form-input[data-v-26ebf75b],
.project-form-select[data-v-26ebf75b] {
  padding: 12px 14px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.3s;
  box-sizing: border-box;
  background: #fff;
  color: #333;
  cursor: pointer;
  flex: 1;
  min-width: 0;
}

/* 自定义下拉箭头 */
.project-form-select[data-v-26ebf75b] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 12 12%27%3E%3Cpath fill=%27%23667eea%27 d=%27M6 9L1 4h10z%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  padding-right: 40px;
}
.project-form-textarea[data-v-26ebf75b] {
  padding: 12px 14px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.3s;
  box-sizing: border-box;
  resize: vertical;
  font-family: inherit;
  background: #fff;
  color: #333;
  flex: 1;
  min-width: 0;
  min-height: 95px;
}
.project-form-input[data-v-26ebf75b]:hover,
.project-form-select[data-v-26ebf75b]:hover {
  border-color: #1890ff;
}
.project-form-input[data-v-26ebf75b]:focus,
.project-form-select[data-v-26ebf75b]:focus,
.project-form-textarea[data-v-26ebf75b]:focus {
  outline: none;
  border-color: #1890ff;
  box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.1);
}

/* 下拉框聚焦时的箭头颜色变化 */
.project-form-select[data-v-26ebf75b]:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 12 12%27%3E%3Cpath fill=%27%23764ba2%27 d=%27M6 9L1 4h10z%27/%3E%3C/svg%3E");
}
.project-input-error[data-v-26ebf75b] {
  border-color: #ff4757 !important;
}
.project-error-msg[data-v-26ebf75b] {
  color: #ff4757;
  font-size: 12px;
  margin-top: 6px;
  font-weight: 500;
}
.image-upload[data-v-26ebf75b] {
  margin-bottom: 10px;
}
.image-preview[data-v-26ebf75b] {
  position: relative;
  display: inline-block;
  margin-bottom: 10px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.preview-img[data-v-26ebf75b] {
  max-width: 200px;
  max-height: 200px;
  display: block;
  transition: transform 0.3s;
}
.image-preview:hover .preview-img[data-v-26ebf75b] {
  transform: scale(1.05);
}
.remove-btn[data-v-26ebf75b] {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 71, 87, 0.95);
  color: #fff;
  border: 2px solid #fff;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.remove-btn[data-v-26ebf75b]:hover {
  background: #ff4757;
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(255, 71, 87, 0.4);
}
.upload-placeholder[data-v-26ebf75b] {
  border: 2px dashed #d0d0d0;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  background: #fff;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.upload-placeholder[data-v-26ebf75b]:hover {
  border-color: #1890ff;
  background: linear-gradient(135deg, rgba(24, 144, 255, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(24, 144, 255, 0.15);
}
.upload-icon[data-v-26ebf75b] {
  font-size: 52px;
  margin-bottom: 12px;
  opacity: 0.6;
}
.upload-text[data-v-26ebf75b] {
  color: #666;
  font-size: 15px;
  margin: 8px 0;
  font-weight: 500;
}
.upload-hint[data-v-26ebf75b] {
  font-size: 10px;
  color: #999;
  text-align: center;
  line-height: 1.3;
  margin-top: 4px;
}
.file-input[data-v-26ebf75b] {
  display: none;
}
.modal-footer[data-v-26ebf75b] {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  background: #fff;
  border-top: 1px solid #e8e8e8;
  border-radius: 0 0 12px 12px;
}
.btn[data-v-26ebf75b] {
  padding: 8px 20px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid transparent;
  font-weight: 500;
  min-width: 70px;
  height: 36px;
  line-height: 1;
  box-sizing: border-box;
}
.btn-cancel[data-v-26ebf75b] {
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
}
.btn-cancel[data-v-26ebf75b]:hover {
  color: #1890ff;
  border-color: #1890ff;
  background: #f0f5ff;
}
.btn-submit[data-v-26ebf75b] {
  background: #1890ff;
  color: #fff;
  box-shadow: 0 4px 15px rgba(24, 144, 255, 0.3);
}
.btn-submit[data-v-26ebf75b]:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(24, 144, 255, 0.4);
}
.btn-submit[data-v-26ebf75b]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* 下拉选项样式优化 */
.form-select option[data-v-26ebf75b] {
  padding: 10px;
  font-size: 14px;
  color: #333;
  background: #fff;
}
.form-select option[data-v-26ebf75b]:hover {
  background: linear-gradient(135deg, rgba(24, 144, 255, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

/* 项目成员下拉框样式 */
.member-dropdown-wrapper[data-v-26ebf75b] {
  position: relative;
  flex: 1;
  min-width: 0;
}
.member-dropdown-trigger[data-v-26ebf75b] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: all 0.3s;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: 14px;
  min-height: 44px;
  box-sizing: border-box;
}
.member-dropdown-trigger[data-v-26ebf75b]:hover {
  border-color: #1890ff;
}
.member-placeholder[data-v-26ebf75b] {
  color: #999;
}
.member-selected-text[data-v-26ebf75b] {
  color: #333;
  font-weight: 500;
}
.member-arrow[data-v-26ebf75b] {
  font-size: 20px;
  color: #999;
  transition: transform 0.3s;
  margin-left: 8px;
}
.member-arrow-up[data-v-26ebf75b] {
  transform: rotate(180deg);
}

/* 下拉面板 */
.member-dropdown-panel[data-v-26ebf75b] {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  z-index: 1000;
  overflow: hidden;
}
.member-panel-search[data-v-26ebf75b] {
  padding: 8px 12px;
  border-bottom: 1px solid #f0f0f0;
}
.member-panel-search-input[data-v-26ebf75b] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  font-size: 13px;
  outline: none;
  transition: border-color 0.3s;
  box-sizing: border-box;
}
.member-panel-search-input[data-v-26ebf75b]:focus {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
}
.member-panel-action[data-v-26ebf75b] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid #f0f0f0;
  background: #fafafa;
  cursor: pointer;
  font-size: 13px;
  color: #666;
  transition: background 0.2s;
}
.member-panel-action[data-v-26ebf75b]:hover {
  background: #f0f5ff;
}
.member-panel-action input[type="checkbox"][data-v-26ebf75b] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #1890ff;
}
.member-panel-list[data-v-26ebf75b] {
  max-height: 220px;
  overflow-y: auto;
}
.member-panel-item[data-v-26ebf75b] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.2s;
  border-bottom: 1px solid #f5f5f5;
}
.member-panel-item[data-v-26ebf75b]:last-child {
  border-bottom: none;
}
.member-panel-item[data-v-26ebf75b]:hover {
  background: #f0f5ff;
}
.member-panel-item-checked[data-v-26ebf75b] {
  background: #e6f7ff;
}
.member-panel-item input[type="checkbox"][data-v-26ebf75b] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #1890ff;
  flex-shrink: 0;
}
.member-panel-avatar[data-v-26ebf75b] {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.member-panel-name[data-v-26ebf75b] {
  flex: 1;
  font-size: 13px;
  color: #333;
}
.member-panel-empty[data-v-26ebf75b] {
  padding: 20px;
  text-align: center;
  color: #999;
  font-size: 13px;
}
.dropdown-fade-enter-active[data-v-26ebf75b],
.dropdown-fade-leave-active[data-v-26ebf75b] {
  transition: all 0.3s ease;
}
.dropdown-fade-enter-from[data-v-26ebf75b],
.dropdown-fade-leave-to[data-v-26ebf75b] {
  opacity: 0;
  transform: translateY(-10px);
}

/* 客户管理 - 样式文件 */

/* 主弹窗容器 */
.customer-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.customer-modal-content.large {
  background-color: #fff;
  border-radius: 8px;
  width: 95%;
  max-width: 1900px;
  /* max-height: 800px;
  min-height:800px; */
  height: 95%;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
}

/* ========== 弹窗头部样式 ========== */
.customer-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #5887f3;
  flex-shrink: 0;
}

.customer-modal-header h2 {
  margin: 0;
  color: #333;
  font-size: 16px;
  font-weight: 600;
}

.customer-modal-header h3 {
  margin: 0;
  color: #333;
  font-size: 15px;
  font-weight: 600;
}

.customer-modal-close {
  background: none;
  border: none;
  font-size: 28px;
  color: #909399;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.customer-modal-close:hover {
  background-color: #f5f7fa;
  color: #606266;
}

/* ========== 弹窗主体样式 ========== */
.customer-modal-body {
  padding: 15px;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ========== 查询区域样式 ========== */
.search-area {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.search-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-item label {
  color: #606266;
  font-size: 13px;
  white-space: nowrap;
}

.search-item input,
.search-item select {
  padding: 6px 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
  min-width: 150px;
}

.search-item input:focus,
.search-item select:focus {
  outline: none;
  border-color: #409eff;
}

.btn-search {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 6px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}

.btn-search:hover {
  background-color: #66b1ff;
}

.btn-reset {
  background-color: #909399;
  color: white;
  border: none;
  padding: 6px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}

.btn-reset:hover {
  background-color: #a6a9ad;
}

.btn-add {
  background-color: #67c23a;
  color: white;
  border: none;
  padding: 6px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}

.btn-add:hover {
  background-color: #85ce61;
}

/* ========== 表格样式 ========== */
.table-wrapper {
  overflow-x: auto;
  overflow-y: auto;
  flex: 1;
  min-height: 300px;
}

.table-container {
  position: relative;
  min-height: 100%;
}

.table-container table {
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
  table-layout: fixed !important;
}

.customer-modal-body thead {
  background-color: #f5f7fa;
}

/* 固定列宽 */
.customer-modal-body th:nth-child(1), .customer-modal-body td:nth-child(1) { /* 序号 */
  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;
  text-align: center;
}

.customer-modal-body th:nth-child(2), .customer-modal-body td:nth-child(2) { /* 客户名称 */
  width: 180px !important;
  min-width: 180px !important;
  max-width: 180px !important;
}

.customer-modal-body th:nth-child(3), .customer-modal-body td:nth-child(3) { /* 客户简称 */
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
}

.customer-modal-body th:nth-child(4), .customer-modal-body td:nth-child(4) { /* 客户类型 */
  width: 80px !important;
  min-width: 80px !important;
}

.customer-modal-body th:nth-child(5), .customer-modal-body td:nth-child(5) { /* 省份 */
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
}

.customer-modal-body th:nth-child(6), .customer-modal-body td:nth-child(6) { /* 联系人 */
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
}

.customer-modal-body th:nth-child(7), .customer-modal-body td:nth-child(7) { /* 联系电话 */
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
}

.customer-modal-body th:nth-child(8), .customer-modal-body td:nth-child(8) { /* 联系邮箱 */
  width: auto;
}

.customer-modal-body th:nth-child(9), .customer-modal-body td:nth-child(9) { /* 状态 */
  width: 70px;
  min-width: 70px;
}

.customer-modal-body th:nth-child(10), .customer-modal-body td:nth-child(10) { /* 备注 */
  width: auto;
}

.customer-modal-body th,
.customer-modal-body td {
  padding: 10px 8px;
  text-align: center;
  font-weight: 600;
  color: #606266;
  font-size: 13px;
  border-bottom: 2px solid #ebeef5;
}

.customer-modal-body td {
  padding: 8px;
  text-align: center;
  color: #606266;
  font-size: 13px;
  border-bottom: 1px solid #ebeef5;
}

.customer-modal-body tbody tr:hover {
  background-color: #f5f7fa;
}

/* 空数据提示 */
.empty-data {
  text-align: center;
  padding: 40px 0;
  color: #909399;
  font-size: 14px;
}

/* 状态标签 */
.status {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.status-active {
  background-color: #f0f9ff;
  color: #67c23a;
}

.status-inactive {
  background-color: #fef0f0;
  color: #f56c6c;
}

/* 客户类型标签 */
.customer-type {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.type-enterprise {
  background-color: #e6f7ff;
  color: #1890ff;
}

.type-personal {
  background-color: #f6ffed;
  color: #52c41a;
}

/* 操作按钮 */
.actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  white-space: nowrap;
  min-width: 120px;
}

/* 确保操作列不被压缩 */
.customer-modal-body th:last-child,
.customer-modal-body td:last-child {
  min-width: 120px;
  width: 120px;
  white-space: nowrap;
}

.btn-edit {
  background-color: #e6a23c;
  color: white;
  border: none;
  padding: 5px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.btn-edit:hover {
  background-color: #ebb563;
}

.btn-delete {
  background-color: #f56c6c;
  color: white;
  border: none;
  padding: 5px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.btn-delete:hover {
  background-color: #f78989;
}

/* ========== 分页样式 ========== */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-top: 15px;
  padding: 10px 0;
}

.page-size-selector {
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-size-selector label {
  color: #606266;
  font-size: 13px;
  white-space: nowrap;
}

.page-size-selector select {
  padding: 6px 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
  color: #606266;
  cursor: pointer;
  min-width: 80px;
}

.page-size-selector select:focus {
  outline: none;
  border-color: #409eff;
}

.pagination button {
  background-color: #fff;
  border: 1px solid #dcdfe6;
  padding: 6px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  color: #606266;
}

.pagination button:hover:not(:disabled) {
  background-color: #ecf5ff;
  border-color: #409eff;
  color: #409eff;
}

.pagination button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.page-info {
  color: #606266;
  font-size: 13px;
}

/* ========== 子弹窗样式 ========== */
.sub-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1100;
}

.customer-management .sub-modal-content {
  background-color: #fff;
  border-radius: 8px;
  width: 90% !important;
  max-width: 900px !important;
  /* height: 760px; */
  height: 90%;
  max-height: 760px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
}

.sub-modal-content .customer-modal-body {
  padding: 15px 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.customer-form-wrapper {
  flex: 1;
  overflow-y: auto;
  padding-right: 5px;
}

.customer-form-buttons {
  display: flex;
  gap: 10px;
  padding: 15px 0 0;
  justify-content: flex-end;
  flex-shrink: 0;
  border-top: 1px solid #ebeef5;
  margin-top: 15px;
}

/* 子弹窗标题栏样式 */
.sub-modal-content .customer-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #ebeef5;
}

.sub-modal-content .customer-modal-header h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.sub-modal-content .customer-modal-close {
  background: none;
  border: none;
  font-size: 28px;
  color: #909399;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.sub-modal-content .customer-modal-close:hover {
  background-color: #f5f7fa;
  color: #606266;
}

/* ========== 表单样式 ========== */
.customer-form {
  display: flex;
  flex-direction: column;
}

.customer-form-row {
  display: flex;
  gap: 15px;
  margin-bottom: 13px;
}

.customer-form-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.customer-form-item.customer-full-width {
  margin-bottom: 13px;
}

.customer-form-item label {
  color: #606266;
  font-size: 13px;
  font-weight: 500;
  min-width: 80px;
  text-align: right;
  flex-shrink: 0;
}

.customer-form-item input,
.customer-form-item select,
.customer-form-item textarea {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
}

.customer-form-item input:focus,
.customer-form-item select:focus,
.customer-form-item textarea:focus {
  outline: none;
  border-color: #409eff;
}

.customer-form-buttons {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  justify-content: center;
}

.customer-btn-submit {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 8px 25px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  min-width: 80px;
}

.customer-btn-submit:hover {
  background-color: #66b1ff;
}

.customer-btn-cancel {
  background-color: #909399;
  color: white;
  border: none;
  padding: 8px 25px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  min-width: 80px;
}

.customer-btn-cancel:hover {
  background-color: #a6a9ad;
}

/* 分区标题样式 */
.customer-section-title {
  font-size: 14px;
  font-weight: 600;
  color: #409eff;
  padding: 6px 0 2px;
  margin-bottom: 6px;
  border-bottom: 2px solid #409eff;
}

/* 响应式 */
@media (max-width: 768px) {
  .search-area {
    flex-direction: column;
    align-items: stretch;
  }

  .search-item {
    flex-direction: column;
    align-items: stretch;
  }

  .search-item input,
  .search-item select {
    min-width: auto;
    width: 100%;
  }

  .customer-form-row {
    flex-direction: column;
    gap: 0;
  }

  .actions {
    flex-direction: column;
  }

  .btn-edit,
  .btn-delete {
    width: 100%;
  }
}



/* 账户管理 - 样式文件 */

/* 主弹窗容器 */
.account-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.account-modal-content.large {
  background-color: #fff;
  border-radius: 8px;
  width: 90%;
  max-width: 1900px;
  /* max-height: 800px;
  min-height: 800px; */
  height: 90%;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
}

/* ========== 弹窗头部样式 ========== */
.account-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px; /* 【可调整】标题栏上下内边距，值越小越薄，建议范围：3px-8px */
  border-bottom: 1px solid #5887f3;
  flex-shrink: 0;
}

.account-modal-header h2 {
  margin: 0;
  color: #333;
  font-size: 16px; /* 【可调整】标题字体大小，建议范围：14px-18px */
  font-weight: 600;
}

.account-modal-close {
  background: none;
  border: none;
  font-size: 28px;
  color: #909399;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.account-modal-close:hover {
  background-color: #f5f7fa;
  color: #606266;
}

/* ========== 弹窗主体样式 ========== */
.account-modal-content .account-modal-body {
  flex: 1;
  overflow: hidden;
  padding: 2px 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 0;
}

/* ========== 弹窗主体样式 ========== */
.search-area {
  background-color: #fff;
  padding: 10px 15px; /* 【可调整】查询区内边距 */
  border-radius: 8px;
  margin-bottom: 0; /* 移除底部间距，节省空间 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 【可调整】查询条件内部元素间距 */
  align-items: center;
}

.search-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-item label {
  color: #606266;
  font-size: 14px;
  white-space: nowrap;
}

.search-item input,
.search-item select {
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s;
}

.search-item input:focus,
.search-item select:focus {
  border-color: #409eff;
}

.search-item textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s;
  resize: vertical;
}

.search-item textarea:focus {
  border-color: #409eff;
}

.search-item input {
  width: 150px; /* 调整输入框宽度以适应更多查询条件 */
}

.form-item textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s;
  resize: vertical;
}

.form-item textarea:focus {
  border-color: #409eff;
}

.btn-search {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.btn-search:hover {
  background-color: #66b1ff;
}

.btn-reset {
  background-color: #909399;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.btn-reset:hover {
  background-color: #a6a9ad;
}

.btn-add {
  background-color: #67c23a; /* 绿色按钮，区别于查询和重置 */
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.btn-add:hover {
  background-color: #85ce61;
}

.btn-role {
  background-color: #e6a23c; /* 橙色按钮，区别于其他按钮 */
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.btn-role:hover {
  background-color: #ebb563;
}

/* ========== 表格包装器 - 带独立滚动 ========== */
.account-modal-content .table-wrapper {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  position: relative;
}

.account-modal-content .table-wrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.account-modal-content .table-wrapper::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.account-modal-content .table-wrapper::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 4px;
}

.account-modal-content .table-wrapper::-webkit-scrollbar-thumb:hover {
  background: #909399;
}

/* 表格容器 */
.account-modal-content .table-container {
  background-color: #fff;
  border-radius: 8px;
  padding: 0px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* 移除 overflow-x: auto; 让 .table-wrapper 来控制滚动 */
}

table {
  width: auto;
  min-width: 100%;
  border-collapse: collapse;
  background-color: #fff;
  table-layout: fixed;
}

thead th {
  position: sticky; /* 【关键】固定表头单元格 */
  top: 0; /* 【关键】距离顶部 0 像素 */
  background-color: #f5f7fa;
  z-index: 10; /* 【关键】确保表头在内容之上 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 【可选】添加阴影增强视觉效果 */
}

th, td {
  padding: 8px 12px; /* 减小单元格内边距 */
  text-align: center; /* 表格内容居中显示 */
  border-bottom: 1px solid #ebeef5;
  background-color: inherit; /* 【关键】继承 thead 的背景色，避免透明 */
}

/* 表格列宽度设置 - 使用更高优先级选择器 */
table th.col-index,
table td.col-index {
  width: 74px !important;
  min-width: 74px !important;
  max-width: 74px !important;
  text-align: center;
}

table th.col-userid,
table td.col-userid {
  width: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
}

table th.col-username,
table td.col-username {
  width: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
}

table th.col-phone,
table td.col-phone {
  width: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
}

table th.col-role,
table td.col-role {
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
}

table th.col-status,
table td.col-status {
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
}

table th.col-projects,
table td.col-projects {
  width: 200px !important;
  min-width: 200px !important;
  max-width: 200px !important;
}

table th.col-remark,
table td.col-remark {
  width: auto;
}

table th.col-action,
table td.col-action {
  width: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
}

/* 备注列特殊处理 - 文本溢出省略号 */
td:nth-child(8),
th:nth-child(8) {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 参与项目标签样式 */
.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.project-tag {
  display: inline-block;
  background-color: #ecf5ff;
  color: #409eff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
}

.no-project {
  color: #c0c4cc;
}

th {
  color: #606266;
  font-weight: 600;
  font-size: 14px;
}

td {
  color: #606266;
  font-size: 14px;
}

tbody tr:hover {
  background-color: #f5f7fa;
}

/* 状态标签 */
.status {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
}

.status-active {
  background-color: #f0f9eb;
  color: #67c23a;
}

.status-inactive {
  background-color: #fef0f0;
  color: #f56c6c;
}

/* 角色标签 */
.role-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.role-super-admin {
  background-color: #fef7e6;
  color: #e6a23c;
  font-weight: 600;
}

.role-admin {
  background-color: #ecf5ff;
  color: #409eff;
}

.role-employee {
  background-color: #f4f4f5;
  color: #909399;
}

/* 操作按钮 */
.actions {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.btn-edit {
  background-color: #e6a23c;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: background-color 0.3s;
}

.btn-edit:hover {
  background-color: #ebb563;
}

.btn-delete {
  background-color: #f56c6c;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: background-color 0.3s;
}

.btn-delete:hover {
  background-color: #f78989;
}

.btn-copy {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: background-color 0.3s;
}

.btn-copy:hover {
  background-color: #66b1ff;
}

/* 空数据提示 */
.empty-data {
  text-align: center;
  padding: 40px;
  color: #909399;
  font-size: 14px;
}

/* 分页 */
.account-modal-content .pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  background-color: #fff;
  padding: 2px 10px 10px 10px;
  border-radius: 0;
  box-shadow: none;
}

/* 分页固定在底部 */
.account-modal-content .pagination-footer {
  flex-shrink: 0;
  border-top: 1px solid #ebeef5;
  background-color: #fff;
}

.account-modal-content .pagination button {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: background-color 0.3s;
}

.account-modal-content .pagination button:hover:not(:disabled) {
  background-color: #66b1ff;
}

.account-modal-content .pagination button:disabled {
  background-color: #c0c4cc;
  cursor: not-allowed;
}

.account-modal-content .page-info {
  color: #606266;
  font-size: 13px;
}

/* 每页显示条数选择器 */
.account-modal-content .page-size-selector {
  display: flex;
  align-items: center;
  gap: 8px;
}

.account-modal-content .page-size-selector label {
  color: #606266;
  font-size: 13px;
  white-space: nowrap;
}

.account-modal-content .page-size-selector select {
  padding: 3px 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
  color: #606266;
  background-color: #fff;
  cursor: pointer;
  transition: border-color 0.3s;
}

.account-modal-content .page-size-selector select:hover {
  border-color: #409eff;
}

.account-modal-content .page-size-selector select:focus {
  outline: none;
  border-color: #409eff;
}

/* 子弹窗（新增/编辑表单） */
.sub-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001;
}

.sub-modal-content {
  background-color: #fff;
  border-radius: 8px;
  width: 600px !important;
  max-width: 90%;
  height: 700px;
  max-height: 700px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sub-modal-content .account-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding:20px;
  border-bottom: 1px solid #ebeef5;
}

.sub-modal-content .account-modal-header h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.sub-modal-content .account-modal-close {
  background: none;
  border: none;
  font-size: 28px;
  color: #909399;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.sub-modal-content .account-modal-close:hover {
  background-color: #f5f7fa;
  color: #606266;
}

.sub-modal-content .account-modal-body {
  padding: 20px;
}

.account-form-item {
  display: flex; /* 使用 flex 布局让标签和输入框在同一行 */
  align-items: center; /* 垂直居中对齐 */
  margin-bottom: 15px; /* 【可调整】表单字段之间的间距 */
}

.account-form-item label {
  width: 80px; /* 【可调整】标签固定宽度 */
  flex-shrink: 0; /* 标签不被压缩 */
  color: #606266;
  font-size: 14px;
  font-weight: 500;
}

.account-form-item input,
.account-form-item select,
.account-form-item textarea {
  flex: 1; /* 输入框占据剩余空间 */
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s;
  box-sizing: border-box; /* 确保 padding 不会增加总宽度 */
}

/* 密码输入框包装器 */
.password-input-wrapper {
  flex: 1;
  display: flex;
  gap: 8px;
  align-items: center;
}

.password-input-wrapper input {
  flex: 1;
}

/* 重置密码按钮 */
.btn-reset-password {
  padding: 8px 16px;
  background-color: #e6a23c;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
  transition: background-color 0.3s;
  flex-shrink: 0;
}

.btn-reset-password:hover {
  background-color: #ebb563;
}

.form-item textarea {
  resize: vertical; /* 只允许垂直调整大小 */
  min-height: 50px; /* 最小高度 */
}

/* 项目多选框包装器 */
.project-select-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* 项目复选框列表 */
.project-checkbox-list {
  height: 150px;
  overflow-y: auto;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 10px;
  background-color: #fff;
}

/* 单个复选框项目 */
.project-checkbox-item {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  cursor: pointer;
  transition: background-color 0.2s;
  border-radius: 3px;
}

.project-checkbox-item:hover {
  background-color: #f5f7fa;
}

.project-checkbox-item input[type="checkbox"] {
  margin-right: 8px;
  cursor: pointer;
  width: 16px;
  height: 16px;
}

.project-checkbox-item span {
  font-size: 14px;
  color: #606266;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* 项目选择提示 */
.project-select-hint {
  font-size: 12px;
  color: #909399;
  line-height: 1.4;
  padding: 4px 0;
}

.account-form-item input:focus,
.account-form-item select:focus {
  border-color: #409eff;
}

.account-form-item input:disabled {
  background-color: #f5f7fa;
  cursor: not-allowed;
  color: #606266; /* 保持正常文字颜色，让*号可见 */
}

.account-form-item textarea {
  resize: vertical; /* 只允许垂直调整大小 */
  min-height: 50px; /* 最小高度 */
}

.account-form-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 30px;
}

.account-btn-submit {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 10px 24px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.account-btn-submit:hover {
  background-color: #66b1ff;
}

.account-btn-cancel {
  background-color: #909399;
  color: white;
  border: none;
  padding: 10px 24px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.account-btn-cancel:hover {
  background-color: #a6a9ad;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }

  .search-area {
    flex-direction: column;
    align-items: stretch;
  }

  .search-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .search-item input {
    width: 100%;
  }

  .modal-content {
    width: 100%;
    margin: 20px;
  }
}

/* 重置密码弹窗样式 */
.reset-password-modal {
  max-width: 450px;
  width: 90%;
  height: 300px;
  max-height: 300px;
}

.reset-password-modal .account-modal-body {
  padding: 20px;
}

/* 角色管理弹窗样式 */
.role-management-modal {
  max-width: 1500px;
  min-width: 1200px;
  width: 1500px;
  height: 700px;
  max-height: 800px;
  display: flex;
  flex-direction: column;
}

.role-management-modal .modal-header {
  padding: 10px 15px;
  flex-shrink: 0;
}

.role-management-modal .modal-body {
  flex: 1;
  padding: 0 !important;
  overflow: hidden;
  min-height: 0;
  display: flex !important;
  flex-direction: row !important;
}

.role-modal-body {
  display: flex;
  height: 100%;
  min-height: 0;
}

/* 左侧面板 */
.role-left-panel {
  width: 200px;
  flex-shrink: 0;
  background-color: #f5f7fa;
  border-right: 1px solid #e4e7ed;
  display: flex;
  flex-direction: column;
}

.role-left-header {
  padding: 10px 12px;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.role-left-header h4 {
  margin: 0;
  font-size: 13px;
  color: #303133;
}

.btn-add-role {
  padding: 3px 8px;
  background-color: #67c23a;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  transition: background-color 0.3s;
}

.btn-add-role:hover {
  background-color: #85ce61;
}

.role-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.role-item {
  padding: 8px 10px;
  margin-bottom: 6px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 13px;
  color: #606266;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.role-item:hover {
  border-color: #409eff;
  color: #409eff;
}

.role-item.active {
  background-color: #ecf5ff;
  border-color: #409eff;
  color: #409eff;
  font-weight: 500;
}

.role-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.btn-role-edit,
.btn-role-delete {
  padding: 2px 6px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  transition: all 0.3s;
  white-space: nowrap;
}

.btn-role-edit {
  background-color: #409eff;
  color: white;
}

.btn-role-edit:hover {
  background-color: #66b1ff;
}

.btn-role-delete {
  background-color: #f56c6c;
  color: white;
}

.btn-role-delete:hover {
  background-color: #f78989;
}

/* 右侧面板 */
.role-right-panel {
  flex: 1;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.permission-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.permission-header {
  padding: 12px 15px;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.permission-header h4 {
  margin: 0;
  font-size: 15px;
  color: #303133;
}

.btn-save-permission {
  padding: 6px 16px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: background-color 0.3s;
}

.btn-save-permission:hover {
  background-color: #66b1ff;
}

.permission-list {
  flex: 1;
  overflow-y: auto;
  padding: 15px;
}

.permission-group {
  margin-bottom: 20px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  overflow: hidden;
}

.permission-group-title {
  padding: 10px 15px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
  font-weight: 500;
  color: #303133;
}

.permission-group-title label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  margin: 0;
}

.permission-group-title input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.permission-items {
  padding: 12px 15px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.permission-item label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  margin: 0;
  position: relative;
  font-size: 13px;
  color: #606266;
}

/* 权限说明问号图标 */
.permission-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #909399;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  cursor: help;
  margin-left: 4px;
  transition: background-color 0.2s;
}

.permission-tip:hover {
  background-color: #409EFF;
}

.permission-item input[type="checkbox"] {
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.permission-item input[type="checkbox"]:disabled,
.permission-group-title input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.role-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #909399;
  font-size: 14px;
}

/* 新增角色弹窗样式 */
.add-role-modal {
  max-width: 500px !important;
  min-width: 300px;
  width: 450px !important;
  height: 300px;
  max-height: 300px;
}

/* 删除确认弹窗样式 */
.delete-confirm-modal {
  max-width: 450px;
  width: 90%;
}

.delete-confirm-content {
  text-align: center;
  padding: 20px 0;
}

.delete-confirm-message {
  font-size: 16px;
  color: #303133;
  margin-bottom: 15px;
  line-height: 1.6;
}

.delete-confirm-message strong {
  color: #409eff;
  font-weight: 600;
}

.delete-confirm-hint {
  font-size: 13px;
  color: #f56c6c;
  margin: 0;
}

.btn-delete-confirm {
  background-color: #f56c6c;
  color: white;
  border: none;
  padding: 10px 24px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.btn-delete-confirm:hover {
  background-color: #f78989;
}

/* ==================== 新增/编辑角色弹窗（独立样式，不受其他模块影响） ==================== */

.add-role-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1002;
}

.add-role-dialog {
  background-color: #fff;
  border-radius: 8px;
  width: 450px;
  max-width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.add-role-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #ebeef5;
}

.add-role-header h3 {
  margin: 0;
  color: #333;
  font-size: 16px;
  font-weight: 600;
}

.add-role-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #909399;
  cursor: pointer;
  padding: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.add-role-close:hover {
  background-color: #f5f7fa;
  color: #606266;
}

.add-role-body {
  padding: 20px;
}

.add-role-form-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
}

.add-role-form-item label {
  width: 75px;
  flex-shrink: 0;
  color: #606266;
  font-size: 14px;
  font-weight: 500;
  line-height: 32px;
}

.add-role-form-item input,
.add-role-form-item textarea {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s;
  box-sizing: border-box;
  font-family: inherit;
}

.add-role-form-item textarea {
  resize: vertical;
  min-height: 60px;
  line-height: 1.5;
}

.add-role-form-item input:focus,
.add-role-form-item textarea:focus {
  border-color: #409eff;
}

.add-role-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.add-role-btn-submit {
  padding: 8px 24px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.add-role-btn-submit:hover {
  background-color: #66b1ff;
}

.add-role-btn-cancel {
  padding: 8px 24px;
  background-color: #f5f7fa;
  color: #606266;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.add-role-btn-cancel:hover {
  background-color: #ecf5ff;
  color: #409eff;
  border-color: #c6e2ff;
}




.auto-complete[data-v-57b56905] {
  position: relative;
  width: 100%;
}
.input-wrapper[data-v-57b56905] {
  position: relative;
  display: flex;
  align-items: center;
}
.auto-complete-input[data-v-57b56905] {
  width: 100%;
  padding: 8px 60px 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.3s;
}
.auto-complete-input[data-v-57b56905]:focus {
  border-color: #409eff;
  outline: none;
}
.auto-complete-input[data-v-57b56905]:disabled {
  background-color: #f5f7fa;
  cursor: not-allowed;
}
.clear-btn[data-v-57b56905],
.dropdown-btn[data-v-57b56905] {
  position: absolute;
  right: 30px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: #c0c4cc;
  padding: 0 4px;
  line-height: 1;
}
.clear-btn[data-v-57b56905]:hover,
.dropdown-btn[data-v-57b56905]:hover {
  color: #909399;
}
.dropdown-btn[data-v-57b56905] {
  right: 4px;
}
.dropdown-list[data-v-57b56905] {
  position: fixed;
  top: auto;
  left: 0;
  right: auto;
  width: 100%;
  z-index: 9999;
  margin-top: 4px;
  background: #fff;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  max-height: 200px;
  overflow-y: auto;
}
.dropdown-item[data-v-57b56905] {
  padding: 8px 12px;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.2s;
}
.dropdown-item[data-v-57b56905]:hover,
.dropdown-item.active[data-v-57b56905] {
  background-color: #f5f7fa;
}
.dropdown-item[data-v-57b56905]:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.dropdown-item[data-v-57b56905]:last-child {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* 色号管理 - 样式文件（参考账号管理） */

.yarn-management {
  /* 作为弹窗组件时不需要背景色 */
}

/* 必填字段红色星号 */
.required-star {
  color: #ff4d4f;
  margin-right: 2px;
  font-weight: bold;
}

/* 主弹窗容器 */
.yarn-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.yarn-modal-content.large {
  background-color: #fff;
  border-radius: 8px;
  width: 95%;
  max-width: 1900px;
  /* max-height: 800px;
  min-height: 800px; */
  height: 95%;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
}

/* ========== 弹窗头部样式 ========== */
.yarn-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #5887f3;
  flex-shrink: 0;
}

.yarn-modal-header h2 {
  margin: 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.yarn-modal-close {
  background: none;
  border: none;
  font-size: 28px;
  color: #909399;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.yarn-modal-close:hover {
  background-color: #f5f7fa;
  color: #606266;
}

/* ========== 弹窗主体样式 ========== */
.yarn-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* ========== 查询区域 ========== */
.search-area {
  background-color: #fff;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.search-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-item label {
  color: #606266;
  font-size: 14px;
  white-space: nowrap;
  font-weight: 500;
}

.search-item input,
.search-item select {
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s;
}

.search-item input:focus,
.search-item select:focus {
  border-color: #409eff;
}

.search-item input {
  width: 160px;
}

.btn-search {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.btn-search:hover {
  background-color: #66b1ff;
}

.btn-reset {
  background-color: #909399;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.btn-reset:hover {
  background-color: #a6a9ad;
}

.btn-add {
  background-color: #67c23a;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
  margin-left: auto;
}

.btn-add:hover {
  background-color: #85ce61;
}

/* ========== 表格包装器 ========== */
.table-wrapper {
  flex: 1;
  min-height: 400px;
  max-height: 800px;
  overflow-y: auto;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  position: relative;
}

.table-wrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.table-wrapper::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.table-wrapper::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 4px;
}

.table-wrapper::-webkit-scrollbar-thumb:hover {
  background: #909399;
}

.table-container {
  background-color: #fff;
  border-radius: 4px;
  padding: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.yarn-modal-body table {
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
  table-layout: fixed;
}

.yarn-modal-body thead th {
  position: sticky;
  top: 0;
  background-color: #f5f7fa;
  z-index: 10;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  color: #606266;
  font-weight: 600;
  font-size: 14px;
  padding: 9px 10px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yarn-modal-body th, .yarn-modal-body td {
  padding: 5px 8px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
  background-color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 设置各列的固定宽度 */
.yarn-modal-body th:nth-child(1), .yarn-modal-body td:nth-child(1) {
  width: 50px !important;  /* 序号 */
  min-width: 50px !important;
  max-width: 50px !important;
  text-align: center;
}

.yarn-modal-body th:nth-child(2), .yarn-modal-body td:nth-child(2) {
  width: 120px !important;  /* 色号 */
  min-width: 120px !important;
  max-width: 120px !important;
}

.yarn-modal-body th:nth-child(3), .yarn-modal-body td:nth-child(3) {
  width: 120px !important;  /* 色名 */
  min-width: 120px !important;
  max-width: 120px !important;
}

.yarn-modal-body th:nth-child(4), .yarn-modal-body td:nth-child(4) {
  width: 100px !important;  /* 缸号 */
  min-width: 100px !important;
  max-width: 100px !important;
}

.yarn-modal-body th:nth-child(5), .yarn-modal-body td:nth-child(5) {
  width: 100px !important;  /* 批次 */
  min-width: 100px !important;
  max-width: 100px !important;
}

.yarn-modal-body th:nth-child(6), .yarn-modal-body td:nth-child(6) {
  width: 120px !important;  /* 颜色 */
  min-width: 120px !important;
  max-width: 120px !important;
}

.yarn-modal-body th:nth-child(7), .yarn-modal-body td:nth-child(7) {
  width: 120px !important;  /* 品类 */
  min-width: 120px !important;
  max-width: 120px !important;
}

.yarn-modal-body th:nth-child(8), .yarn-modal-body td:nth-child(8) {
  width: 100px !important;  /* 纱支 */
  min-width: 100px !important;
  max-width: 100px !important;
}

.yarn-modal-body th:nth-child(9), .yarn-modal-body td:nth-child(9) {
  width: 150px !important;  /* 原料 */
  min-width: 150px !important;
  max-width: 150px !important;
}

.yarn-modal-body th:nth-child(10), .yarn-modal-body td:nth-child(10) {
  width: 150px !important;  /* 成分 */
  min-width: 100px !important;
  max-width: 150px !important;
}

.yarn-modal-body th:nth-child(11), .yarn-modal-body td:nth-child(11) {
  width: 80px !important;  /* 股数 */
  min-width: 80px !important;
  max-width: 80px !important;
}

.yarn-modal-body th:nth-child(12), .yarn-modal-body td:nth-child(12) {
  width: 120px !important;  /* 厂家 */
  min-width: 120px !important;
  max-width: 120px !important;
}

.yarn-modal-body th:nth-child(13), .yarn-modal-body td:nth-child(13) {
  width: 120px !important;  /* 单价(元/kg) */
  min-width: 120px !important;
  max-width: 120px !important;
}

.yarn-modal-body th:nth-child(14), .yarn-modal-body td:nth-child(14) {
  min-width: 150px !important;  /* 操作列最小宽度 */
  text-align: center;
}

.yarn-modal-body td {
  color: #606266;
  font-size: 14px;
}

.yarn-modal-body tbody tr:hover {
  background-color: #f5f7fa;
}

/* 颜色预览块 */
.color-preview {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid #ddd;
  margin-right: 6px;
  vertical-align: middle;
}

/* 状态标签 */
.status {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.status-active {
  background-color: #f0f9eb;
  color: #67c23a;
}

.status-inactive {
  background-color: #fef0f0;
  color: #f56c6c;
}

.status-deleted {
  background-color: #fef7e6;
  color: #e6a23c;
}

/* 操作按钮 */
.actions {
  display: flex;
  flex-direction: row;
  gap: 4px;
  justify-content: left;
  flex-wrap: wrap;
}

.btn-copy,
.btn-edit,
.btn-delete {
  background-color: inherit;
  color: white;
  border: none !important;
  padding: 2px 6px !important;
  border-radius: 3px !important;
  cursor: pointer;
  font-size: 11px !important;
  font-weight: normal !important;
  font-family: inherit;
  line-height: normal !important;
  white-space: nowrap;
  min-width: 38px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box;
  text-transform: none;
  letter-spacing: normal;
}

.btn-copy {
  background-color: #17a2b8 !important;
}

.btn-copy:hover {
  background-color: #138496 !important;
}

.btn-edit {
  background-color: #f7d29a !important;
}

.btn-edit:hover {
  background-color: #b2f193 !important;
}

.btn-delete {
  background-color: #f56c6c !important;
}

.btn-delete:hover {
  background-color: #f78989 !important;
}

/* 空数据提示 */
.empty-data {
  text-align: center;
  padding: 40px;
  color: #909399;
  font-size: 14px;
}

/* 分页固定在底部 */
.pagination-footer {
  flex-shrink: 0;
  border-top: 1px solid #ebeef5;
  background-color: #fff;
}

/* 分页 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  background-color: #fff;
  padding: 1px 15px 12px 15px;
  border-radius: 0;
  box-shadow: none;
}

/* 每页显示条数选择器 */
.page-size-selector {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #606266;
  font-size: 14px;
}

.page-size-select {
  padding: 6px 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  color: #606266;
  outline: none;
  cursor: pointer;
  transition: border-color 0.3s;
}

.page-size-select:focus {
  border-color: #409eff;
}

/* 页码跳转器 */
.page-jumper {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #606266;
  font-size: 14px;
}

.pagination button {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.pagination button:hover:not(:disabled) {
  background-color: #66b1ff;
}

.pagination button:disabled {
  background-color: #c0c4cc;
  cursor: not-allowed;
}

.page-info {
  color: #606266;
  font-size: 14px;
}

.page-input {
  width: 60px;
  padding: 6px 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
  color: #606266;
  outline: none;
}

.page-input:focus {
  border-color: #409eff;
}

.jump-btn {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.jump-btn:hover {
  background-color: #66b1ff;
}

.page-total {
  color: #909399;
  font-size: 13px;
  font-style: italic;
}

/* ========== 子弹窗（新增/编辑表单） ========== */
.sub-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001;
}

.yarn-management .sub-modal-content {
  background-color: #fff;
  border-radius: 8px;
  width: 700px !important;
  max-width: 90% !important;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sub-modal-content .yarn-modal-header {
  padding: 18px 20px;
  border-bottom: 1px solid #ebeef5;
}

.sub-modal-content .yarn-modal-header h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.sub-modal-content .yarn-modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: calc(90vh - 100px);
}

.yarn-form-wrapper {
  flex: 1;
  overflow-y: auto;
  padding-right: 5px;
}

.yarn-form-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 15px 0 0;
  flex-shrink: 0;
  border-top: 1px solid #ebeef5;
  margin-top: 15px;
}

.yarn-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.yarn-form-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.yarn-form-item label {
  width: 80px;
  flex-shrink: 0;
  color: #606266;
  font-size: 14px;
  font-weight: 500;
}

.yarn-form-item input,
.yarn-form-item select,
.yarn-form-item textarea {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s;
  box-sizing: border-box;
}

.yarn-form-item input:focus,
.yarn-form-item select:focus {
  border-color: #409eff;
}

.yarn-form-item input:disabled {
  background-color: #f5f7fa;
  cursor: not-allowed;
}

.yarn-form-item textarea {
  resize: vertical;
  min-height: 50px;
}

.input-with-color {
  display: flex;
  align-items: center;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 1px 1px;
  background-color: #fff;
  flex: 1;
  max-width: 230px;
}

.color-picker {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  padding: 10px;
  margin-right: 8px;
  background-color: transparent;
  transition: transform 0.3s;
  flex-shrink: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.color-picker::-webkit-color-swatch-wrapper {
  padding: 0;
  border: none;
  border-radius: 2px;
}

.color-picker::-webkit-color-swatch {
  border: none;
  border-radius: 2px;
  padding: 0;
}

.color-picker::-moz-color-swatch {
  border: none;
  border-radius: 2px;
  padding: 0;
}

.color-picker:hover {
  transform: scale(1.05);
}

.color-picker:focus {
  outline: none;
  transform: scale(1.05);
}

.input-with-color .color-text {
  font-family: 'Courier New', monospace;
  font-size: 14px;
  color: #606266;
  text-transform: uppercase;
  flex: 1;
}

.yarn-btn-submit {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 10px 24px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.yarn-btn-submit:hover {
  background-color: #66b1ff;
}

.yarn-btn-cancel {
  background-color: #909399;
  color: white;
  border: none;
  padding: 10px 24px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.yarn-btn-cancel:hover {
  background-color: #a6a9ad;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .yarn-modal-content {
    width: 100%;
    margin: 10px;
  }
  
  .search-area {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .search-item input {
    width: 100%;
  }
  
  .form-row {
    grid-template-columns: 1fr;
  }
  
  .btn-add {
    margin-left: 0;
  }
}




/* 覆盖全局间距 */
.yarn-inout .yarn-modal-body {
  padding: 10px;
}


/* 菜单导航样式 */
.yarn-inout-menu[data-v-d9ae93e0] {
  display: flex;
  list-style: none;
  margin: -5px 0 -10px 0;
  padding: 0;
  gap: 0;
  border-bottom: 1px solid #e8e8e8;
}
.yarn-inout-menu-item[data-v-d9ae93e0] {
  padding: 8px 18px;
  cursor: pointer;
  font-size: 15px;
  color: #606266;
  background-color: #f5f7fa;
  border: 1px solid #e8e8e8;
  border-bottom: none;
  margin-bottom: -1px;
  transition: color 0.2s, background-color 0.2s;
}
.yarn-inout-menu-item[data-v-d9ae93e0]:first-child {
  border-radius: 4px 0 0 0;
}
.yarn-inout-menu-item[data-v-d9ae93e0]:last-child {
  border-radius: 0 4px 0 0;
}
.yarn-inout-menu-item[data-v-d9ae93e0]:hover {
  color: #1890ff;
  background-color: #fff;
}
.yarn-inout-menu-item.active[data-v-d9ae93e0] {
  color: #1890ff;
  background-color: #e6f7ff;
  border-bottom: 2px solid #1890ff;
  font-weight: 600;
  margin-bottom: -2px;
}

/* 内容区域 - 上下布局 */
.yarn-inout_content[data-v-d9ae93e0] {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 5px;
}

/* 操作按钮栏（最上方） */
.yarn-inout_actions-bar[data-v-d9ae93e0] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  border-bottom: 1px solid #e8e8e8;
}
.yarn-inout-btn.danger[data-v-d9ae93e0] {
  color: #ff4d4f;
  border-color: #ff4d4f;
}
.yarn-inout-btn.danger[data-v-d9ae93e0]:hover {
  background-color: #ff4d4f;
  color: #fff;
}
.yarn-inout_template-group[data-v-d9ae93e0] {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 10px;
}
.yarn-inout_template-group label[data-v-d9ae93e0] {
  font-size: 13px;
  color: #606266;
  white-space: nowrap;
}
.yarn-inout_template-group select[data-v-d9ae93e0] {
  padding: 5px 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
  width: 150px;
  outline: none;
}
.yarn-inout-btn[data-v-d9ae93e0] {
  padding: 4px 14px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  background-color: #fff;
  color: #606266;
  transition: all 0.3s;
}
.yarn-inout-btn[data-v-d9ae93e0]:hover {
  border-color: #1890ff;
  color: #1890ff;
}
.yarn-inout-btn.primary[data-v-d9ae93e0] {
  background-color: #1890ff;
  border-color: #1890ff;
  color: #fff;
}
.yarn-inout-btn.primary[data-v-d9ae93e0]:hover {
  background-color: #40a9ff;
  border-color: #40a9ff;
}

/* 单据号显示 */
.record-no-display[data-v-d9ae93e0] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: #606266;
  padding: 5px 0;
  text-align: left;
}
.record-no-left[data-v-d9ae93e0] {
  display: flex;
  align-items: center;
  gap: 4px;
}
.record-no-right[data-v-d9ae93e0] {
  display: flex;
  align-items: center;
  gap: 4px;
}
.record-no-value[data-v-d9ae93e0] {
  color: #ff4d4f;
  font-weight: 600;
  font-size: 15px;
}
.record-no-copy-btn[data-v-d9ae93e0] {
  margin-left: 8px;
  background: none;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 14px;
  color: #606266;
  cursor: pointer;
  transition: all 0.2s;
  vertical-align: middle;
}
.record-no-copy-btn[data-v-d9ae93e0]:hover {
  border-color: #ff4d4f;
  color: #ff4d4f;
  background: #fff1f0;
}

/* 下部分：表格区域 */
.yarn-inout_table-section[data-v-d9ae93e0] {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.table-scroll-wrapper[data-v-d9ae93e0] {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
}
.summary-label[data-v-d9ae93e0] {
  font-weight: bold;
  color: #333;
}
.summary-value[data-v-d9ae93e0] {
  color: #1890ff;
  font-weight: bold;
  font-size: 14px;
}
.summary-divider[data-v-d9ae93e0] {
  width: 1px;
  height: 16px;
  background-color: #d9d9d9;
  margin: 0 12px;
}
.total-price-cell[data-v-d9ae93e0] {
  color: #ff6600;
  font-weight: 500;
  text-align: center;
  padding-left: 8px;
}
.yarn-inout-table[data-v-d9ae93e0] {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.yarn-inout-table thead th[data-v-d9ae93e0] {
  position: sticky;
  top: 0;
  background-color: #f5f7fa;
  padding: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #606266;
  border-bottom: 1px solid #ebeef5;
  text-align: center;
}
.yarn-inout-table tbody td[data-v-d9ae93e0] {
  padding: 0;
  font-size: 14px;
  color: #606266;
  border-bottom: 1px solid #ebeef5;
  text-align: center;
  cursor: text;
}
.yarn-inout-table tbody tr[data-v-d9ae93e0]:hover {
  background-color: #f5f7fa;
}

/* 校验失败行红色高亮 */
.yarn-inout-table tbody tr.error-row[data-v-d9ae93e0] {
  background-color: #fff1f0;
}
.yarn-inout-table tbody tr.error-row .cell-input[data-v-d9ae93e0] {
  color: #ff4d4f;
}
.yarn-inout-table tbody tr.error-row td[data-v-d9ae93e0] {
  border-bottom-color: #ffccc7;
}

/* 单元格内编辑 - 无边框，直接点击编辑 */
.cell-input[data-v-d9ae93e0] {
  width: 100%;
  padding: 6px 8px;
  border: none;
  border-radius: 0;
  font-size: 14px;
  color: #606266;
  background: transparent;
  outline: none;
  box-sizing: border-box;
}
.cell-input[data-v-d9ae93e0]:focus {
  background-color: #e6f7ff;
}
.cell-input.number[data-v-d9ae93e0] {
  text-align: center;
  -moz-appearance: textfield;
}
.cell-input.number[data-v-d9ae93e0]::-webkit-inner-spin-button,
.cell-input.number[data-v-d9ae93e0]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cell-select[data-v-d9ae93e0] {
  cursor: pointer;
  background-color: #fff;
}
.cell-select[data-v-d9ae93e0]:focus {
  background-color: #e6f7ff;
}
.empty-cell[data-v-d9ae93e0] {
  text-align: center;
  padding: 40px !important;
  color: #999;
  font-size: 14px;
}
.btn-link[data-v-d9ae93e0] {
  background: none;
  border: none;
  color: #1890ff;
  cursor: pointer;
  font-size: 13px;
  padding: 0 4px;
}
.btn-link[data-v-d9ae93e0]:hover {
  text-decoration: underline;
}
.btn-link.danger[data-v-d9ae93e0] {
  color: #f56c6c;
  background: #fff1f0;
  border: 1px solid #f56c6c;
  border-radius: 4px;
  padding: 2px 8px;
  text-decoration: none;
  transition: all 0.2s;
}
.btn-link.danger[data-v-d9ae93e0]:hover {
  background: #f56c6c;
  color: #fff;
  text-decoration: none;
}

/* 色号下拉输入区域 */
.color-code-cell[data-v-d9ae93e0] {
  position: relative;
}
.color-code-input-wrapper[data-v-d9ae93e0] {
  position: relative;
}
.color-code-dropdown[data-v-d9ae93e0] {
  position: fixed;
  min-width: 220px;
  max-height: 200px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  list-style: none;
  margin: 2px 0 0 0;
  padding: 4px 0;
}
.color-code-dropdown .dropdown-item[data-v-d9ae93e0] {
  padding: 6px 10px;
  font-size: 13px;
  color: #606266;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.color-code-dropdown .dropdown-item[data-v-d9ae93e0]:hover {
  background-color: #f5f7fa;
  color: #1890ff;
}

/* 出入库记录占位 */
.tab-panel[data-v-d9ae93e0] {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  color: #999;
  font-size: 16px;
}

/* Toast 提示样式 */
.yarn-toast-overlay[data-v-d9ae93e0] {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;
  animation: toastSlideIn-d9ae93e0 0.3s ease;
}
.yarn-toast-content[data-v-d9ae93e0] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-size: 14px;
  min-width: 250px;
  max-width: 400px;
}
.yarn-toast-overlay.error .yarn-toast-content[data-v-d9ae93e0] {
  background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
  color: #fff;
}
.yarn-toast-overlay.warning .yarn-toast-content[data-v-d9ae93e0] {
  background: linear-gradient(135deg, #e6a23c 0%, #f5af58 100%);
  color: #fff;
}
.yarn-toast-overlay.success .yarn-toast-content[data-v-d9ae93e0] {
  background: linear-gradient(135deg, #389e0d 0%, #52c41a 100%);
  color: #fff;
}
.yarn-toast-icon[data-v-d9ae93e0] {
  font-size: 18px;
  font-weight: bold;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  flex-shrink: 0;
}
.yarn-toast-message[data-v-d9ae93e0] {
  flex: 1;
  line-height: 1.5;
}
@keyframes toastSlideIn-d9ae93e0 {
from {
    transform: translateX(-50%) translateY(-20px);
    opacity: 0;
}
to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
}

/* 删除确认弹窗样式 */
.yarn-confirm-overlay[data-v-d9ae93e0] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn-d9ae93e0 0.2s ease;
}
.yarn-confirm-dialog[data-v-d9ae93e0] {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  width: 360px;
  overflow: hidden;
  animation: scaleIn-d9ae93e0 0.2s ease;
}
.yarn-confirm-header[data-v-d9ae93e0] {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
}
.yarn-confirm-icon[data-v-d9ae93e0] {
  font-size: 20px;
  color: #faad14;
  margin-right: 10px;
}
.yarn-confirm-title[data-v-d9ae93e0] {
  font-size: 16px;
  font-weight: 500;
  color: #262626;
}
.yarn-confirm-content[data-v-d9ae93e0] {
  padding: 20px;
  font-size: 14px;
  color: #595959;
  line-height: 1.6;
}
.yarn-confirm-footer[data-v-d9ae93e0] {
  display: flex;
  justify-content: flex-end;
  padding: 12px 20px;
  border-top: 1px solid #f0f0f0;
  gap: 10px;
}
.yarn-confirm-btn[data-v-d9ae93e0] {
  padding: 6px 16px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}
.yarn-confirm-btn.cancel[data-v-d9ae93e0] {
  background: #f5f5f5;
  color: #595959;
}
.yarn-confirm-btn.cancel[data-v-d9ae93e0]:hover {
  background: #e8e8e8;
}
.yarn-confirm-btn.confirm[data-v-d9ae93e0] {
  background: #ff4d4f;
  color: #fff;
}
.yarn-confirm-btn.confirm[data-v-d9ae93e0]:hover {
  background: #ff7875;
}
@keyframes fadeIn-d9ae93e0 {
from { opacity: 0;
}
to { opacity: 1;
}
}
@keyframes scaleIn-d9ae93e0 {
from { transform: scale(0.9); opacity: 0;
}
to { transform: scale(1); opacity: 1;
}
}

/* 出入库记录页面样式 */
.record-page[data-v-d9ae93e0] {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 4px;
}
.record-filter-bar[data-v-d9ae93e0] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 4px;
  flex-shrink: 0;
  flex-wrap: nowrap;
}
.record-filter-item[data-v-d9ae93e0] {
  display: flex;
  align-items: center;
  gap: 4px;
}
.record-filter-item label[data-v-d9ae93e0] {
  font-size: 13px;
  color: #606266;
  white-space: nowrap;
}
.record-filter-input[data-v-d9ae93e0] {
  padding: 4px 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
  outline: none;
}
.record-filter-input[data-v-d9ae93e0]:focus {
  border-color: #1890ff;
}
.date-sep[data-v-d9ae93e0] {
  color: #909399;
  margin: 0 2px;
}
.record-section[data-v-d9ae93e0] {
  display: flex;
  flex-direction: column;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow: hidden;
  min-height: 0;
}
.record-list-section[data-v-d9ae93e0] {
  flex: 0 0 auto;
  max-height: 390px;
}
.record-detail-section[data-v-d9ae93e0] {
  flex: 1;
  min-height: 150px;
}
.record-section-title[data-v-d9ae93e0] {
  padding: 6px 12px;
  background: #f5f7fa;
  font-size: 13px;
  font-weight: bold;
  color: #303133;
  border-bottom: 1px solid #ebeef5;
  flex-shrink: 0;
}
.record-table[data-v-d9ae93e0] {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.record-table th[data-v-d9ae93e0] {
  background: #fafafa;
  font-weight: 500;
  font-size: 14px;
  padding: 6px 8px;
  text-align: center;
}
.record-table td[data-v-d9ae93e0] {
  font-size: 16px;
  padding: 6px 8px;
  text-align: center;
}
.record-table tbody tr[data-v-d9ae93e0] {
  cursor: pointer;
  transition: background 0.2s;
}
.record-table tbody tr[data-v-d9ae93e0]:hover {
  background: #f5f7fa;
}
.record-table tbody tr.selected-row[data-v-d9ae93e0] {
  background: #e6f7ff;
}
.tag-in[data-v-d9ae93e0] {
  display: inline-block;
  padding: 2px 8px;
  background: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
  border-radius: 4px;
  font-size: 12px;
}
.tag-out[data-v-d9ae93e0] {
  display: inline-block;
  padding: 2px 8px;
  background: #fff7e6;
  color: #fa8c16;
  border: 1px solid #ffd591;
  border-radius: 4px;
  font-size: 12px;
}
.btn-link.primary[data-v-d9ae93e0] {
  color: #1890ff;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  padding: 0 4px;
}
.btn-link.primary[data-v-d9ae93e0]:hover {
  text-decoration: underline;
}
.btn-link.danger[data-v-d9ae93e0] {
  color: #ff4d4f;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  padding: 0 4px;
  margin-left: 4px;
}
.btn-link.danger[data-v-d9ae93e0]:hover {
  text-decoration: underline;
}

/* 明细编辑弹窗 */
.yarn-edit-modal[data-v-d9ae93e0] {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  width: 380px;
  max-width: 90vw;
  animation: fadeIn-d9ae93e0 0.2s ease;
}
.yarn-edit-header[data-v-d9ae93e0] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #ebeef5;
}
.yarn-edit-title[data-v-d9ae93e0] {
  font-size: 15px;
  font-weight: 600;
  color: #303133;
}
.yarn-edit-close[data-v-d9ae93e0] {
  font-size: 20px;
  color: #909399;
  cursor: pointer;
  line-height: 1;
}
.yarn-edit-close[data-v-d9ae93e0]:hover {
  color: #606266;
}
.yarn-edit-body[data-v-d9ae93e0] {
  padding: 16px 18px;
}
.yarn-edit-row[data-v-d9ae93e0] {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.yarn-edit-row[data-v-d9ae93e0]:last-child {
  margin-bottom: 0;
}
.yarn-edit-label[data-v-d9ae93e0] {
  width: 90px;
  font-size: 13px;
  color: #606266;
  flex-shrink: 0;
}
.yarn-edit-value[data-v-d9ae93e0] {
  flex: 1;
  font-size: 13px;
  color: #303133;
}
.yarn-edit-total[data-v-d9ae93e0] {
  color: #ff6600;
  font-weight: 500;
}
.yarn-edit-input[data-v-d9ae93e0] {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
  color: #606266;
  outline: none;
  text-align: center;
  -moz-appearance: textfield;
}
.yarn-edit-input[data-v-d9ae93e0]:focus {
  border-color: #409eff;
}
.yarn-edit-input[data-v-d9ae93e0]::-webkit-inner-spin-button,
.yarn-edit-input[data-v-d9ae93e0]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


/* 覆盖全局间距 */
.yarn-return .yarn-modal-body {
  padding: 10px;
}


/* 菜单导航样式 */
.yarn-return-menu[data-v-b895035c] {
  display: flex;
  list-style: none;
  margin: -5px 0 -10px 0;
  padding: 0;
  gap: 0;
  border-bottom: 1px solid #e8e8e8;
}
.yarn-return-menu-item[data-v-b895035c] {
  padding: 8px 18px;
  cursor: pointer;
  font-size: 15px;
  color: #606266;
  background-color: #f5f7fa;
  border: 1px solid #e8e8e8;
  border-bottom: none;
  margin-bottom: -1px;
  transition: color 0.2s, background-color 0.2s;
}
.yarn-return-menu-item[data-v-b895035c]:first-child {
  border-radius: 4px 0 0 0;
}
.yarn-return-menu-item[data-v-b895035c]:last-child {
  border-radius: 0 4px 0 0;
}
.yarn-return-menu-item[data-v-b895035c]:hover {
  color: #1890ff;
  background-color: #fff;
}
.yarn-return-menu-item.active[data-v-b895035c] {
  color: #1890ff;
  background-color: #e6f7ff;
  border-bottom: 2px solid #1890ff;
  font-weight: 600;
  margin-bottom: -2px;
}

/* 内容区域 - 上下布局 */
.yarn-return_content[data-v-b895035c] {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 5px;
}

/* 操作按钮栏（最上方） */
.yarn-return_actions-bar[data-v-b895035c] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  border-bottom: 1px solid #e8e8e8;
}
.yarn-return-btn.danger[data-v-b895035c] {
  color: #ff4d4f;
  border-color: #ff4d4f;
}
.yarn-return-btn.danger[data-v-b895035c]:hover {
  background-color: #ff4d4f;
  color: #fff;
}
.yarn-return_template-group[data-v-b895035c] {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 10px;
}
.yarn-return_template-group label[data-v-b895035c] {
  font-size: 13px;
  color: #606266;
  white-space: nowrap;
}
.yarn-return_template-group select[data-v-b895035c] {
  padding: 5px 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
  width: 150px;
  outline: none;
}
.yarn-return-btn[data-v-b895035c] {
  padding: 4px 14px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  background-color: #fff;
  color: #606266;
  transition: all 0.3s;
}
.yarn-return-btn[data-v-b895035c]:hover {
  border-color: #1890ff;
  color: #1890ff;
}
.yarn-return-btn.primary[data-v-b895035c] {
  background-color: #1890ff;
  border-color: #1890ff;
  color: #fff;
}
.yarn-return-btn.primary[data-v-b895035c]:hover {
  background-color: #40a9ff;
  border-color: #40a9ff;
}

/* 单据号显示 */
.record-no-display[data-v-b895035c] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: #606266;
  padding: 5px 0;
  text-align: left;
}
.record-no-left[data-v-b895035c] {
  display: flex;
  align-items: center;
  gap: 4px;
}
.record-no-right[data-v-b895035c] {
  display: flex;
  align-items: center;
  gap: 4px;
}
.record-no-divider[data-v-b895035c] {
  width: 1px;
  height: 16px;
  background-color: #d9d9d9;
  margin: 0 8px;
}
.person-label[data-v-b895035c] {
  font-size: 13px;
  color: #606266;
  white-space: nowrap;
}
.person-select[data-v-b895035c] {
  padding: 3px 6px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
  outline: none;
  min-width: 120px;
}
.person-select[data-v-b895035c]:focus {
  border-color: #1890ff;
}
.pick-record-input[data-v-b895035c] {
  width: 160px;
}
.import-btn[data-v-b895035c] {
  background-color: #1890ff;
  border-color: #1890ff;
  color: #fff;
}
.import-btn[data-v-b895035c]:hover {
  background-color: #40a9ff;
  border-color: #40a9ff;
}
.record-no-value[data-v-b895035c] {
  color: #ff4d4f;
  font-weight: 600;
  font-size: 15px;
}
.record-no-copy-btn[data-v-b895035c] {
  margin-left: 8px;
  background: none;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 14px;
  color: #606266;
  cursor: pointer;
  transition: all 0.2s;
  vertical-align: middle;
}
.record-no-copy-btn[data-v-b895035c]:hover {
  border-color: #ff4d4f;
  color: #ff4d4f;
  background: #fff1f0;
}

/* 下部分：表格区域 */
.yarn-return_table-section[data-v-b895035c] {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.table-scroll-wrapper[data-v-b895035c] {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
}
.summary-label[data-v-b895035c] {
  font-weight: bold;
  color: #333;
}
.summary-value[data-v-b895035c] {
  color: #1890ff;
  font-weight: bold;
  font-size: 14px;
}
.summary-divider[data-v-b895035c] {
  width: 1px;
  height: 16px;
  background-color: #d9d9d9;
  margin: 0 12px;
}
.total-price-cell[data-v-b895035c] {
  color: #ff6600;
  font-weight: 500;
  text-align: center;
  padding-left: 8px;
}
.yarn-return-table[data-v-b895035c] {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/* 覆盖 yarn.css 中 nth-child 规则 */
.yarn-return-table th[data-v-b895035c]:nth-child(1), .yarn-return-table td[data-v-b895035c]:nth-child(1) { width: 35px !important; min-width: 35px !important;
}
.yarn-return-table th[data-v-b895035c]:nth-child(2), .yarn-return-table td[data-v-b895035c]:nth-child(2) { width: 100px !important; min-width: 100px !important;
}
.yarn-return-table th[data-v-b895035c]:nth-child(3), .yarn-return-table td[data-v-b895035c]:nth-child(3) { width: 80px !important; min-width: 80px !important;
}
.yarn-return-table th[data-v-b895035c]:nth-child(4), .yarn-return-table td[data-v-b895035c]:nth-child(4) { width: 80px !important; min-width: 80px !important;
}
.yarn-return-table th[data-v-b895035c]:nth-child(5), .yarn-return-table td[data-v-b895035c]:nth-child(5) { width: 80px !important; min-width: 80px !important;
}
.yarn-return-table th[data-v-b895035c]:nth-child(6), .yarn-return-table td[data-v-b895035c]:nth-child(6) { width: 80px !important; min-width: 80px !important;
}
.yarn-return-table th[data-v-b895035c]:nth-child(7), .yarn-return-table td[data-v-b895035c]:nth-child(7) { width: 100px !important; min-width: 100px !important;
}
.yarn-return-table th[data-v-b895035c]:nth-child(8), .yarn-return-table td[data-v-b895035c]:nth-child(8) { width: 80px !important; min-width: 80px !important;
}
.yarn-return-table th[data-v-b895035c]:nth-child(9), .yarn-return-table td[data-v-b895035c]:nth-child(9) { width: 120px !important; min-width: 120px !important;
}
.yarn-return-table th[data-v-b895035c]:nth-child(10), .yarn-return-table td[data-v-b895035c]:nth-child(10) { width: 100px !important; min-width: 100px !important;
}
.yarn-return-table thead th[data-v-b895035c] {
  position: sticky;
  top: 0;
  background-color: #f5f7fa;
  padding: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #606266;
  border-bottom: 1px solid #ebeef5;
  text-align: center;
}
.yarn-return-table tbody td[data-v-b895035c] {
  padding: 0;
  font-size: 14px;
  color: #606266;
  border-bottom: 1px solid #ebeef5;
  text-align: center;
  cursor: text;
}
.yarn-return-table tbody tr[data-v-b895035c]:hover {
  background-color: #f5f7fa;
}

/* 校验失败行红色高亮 */
.yarn-return-table tbody tr.error-row[data-v-b895035c] {
  background-color: #fff1f0;
}
.yarn-return-table tbody tr.error-row .cell-input[data-v-b895035c] {
  color: #ff4d4f;
}
.yarn-return-table tbody tr.error-row td[data-v-b895035c] {
  border-bottom-color: #ffccc7;
}

/* 单元格内编辑 - 无边框，直接点击编辑 */
.cell-input[data-v-b895035c] {
  width: 100%;
  padding: 6px 8px;
  border: none;
  border-radius: 0;
  font-size: 14px;
  color: #606266;
  background: transparent;
  outline: none;
  box-sizing: border-box;
  text-align: center;
}
.cell-input[data-v-b895035c]:focus {
  background-color: #e6f7ff;
}
.cell-input.number[data-v-b895035c] {
  text-align: center;
  -moz-appearance: textfield;
}
.cell-input.number[data-v-b895035c]::-webkit-inner-spin-button,
.cell-input.number[data-v-b895035c]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cell-select[data-v-b895035c] {
  cursor: pointer;
  background-color: #fff;
  text-align: center;
}
.cell-select[data-v-b895035c]:focus {
  background-color: #e6f7ff;
}
.empty-cell[data-v-b895035c] {
  text-align: center;
  padding: 40px !important;
  color: #999;
  font-size: 14px;
}
.btn-link[data-v-b895035c] {
  background: none;
  border: none;
  color: #1890ff;
  cursor: pointer;
  font-size: 13px;
  padding: 0 4px;
}
.btn-link[data-v-b895035c]:hover {
  text-decoration: underline;
}
.btn-link.danger[data-v-b895035c] {
  color: #f56c6c;
  background: #fff1f0;
  border: 1px solid #f56c6c;
  border-radius: 4px;
  padding: 2px 8px;
  text-decoration: none;
  transition: all 0.2s;
}
.btn-link.danger[data-v-b895035c]:hover {
  background: #f56c6c;
  color: #fff;
  text-decoration: none;
}

/* 色号下拉输入区域 */
.color-code-cell[data-v-b895035c] {
  position: relative;
}
.color-code-input-wrapper[data-v-b895035c] {
  position: relative;
}
.color-code-dropdown[data-v-b895035c] {
  position: fixed;
  min-width: 220px;
  max-height: 200px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  list-style: none;
  margin: 2px 0 0 0;
  padding: 4px 0;
}
.color-code-dropdown .dropdown-item[data-v-b895035c] {
  padding: 6px 10px;
  font-size: 13px;
  color: #606266;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.color-code-dropdown .dropdown-item[data-v-b895035c]:hover {
  background-color: #f5f7fa;
  color: #1890ff;
}

/* 领退记录占位 */
.tab-panel[data-v-b895035c] {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  color: #999;
  font-size: 16px;
}

/* Toast 提示样式 */
.yarn-toast-overlay[data-v-b895035c] {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;
  animation: toastSlideIn-b895035c 0.3s ease;
}
.yarn-toast-content[data-v-b895035c] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-size: 14px;
  min-width: 250px;
  max-width: 400px;
}
.yarn-toast-overlay.error .yarn-toast-content[data-v-b895035c] {
  background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
  color: #fff;
}
.yarn-toast-overlay.warning .yarn-toast-content[data-v-b895035c] {
  background: linear-gradient(135deg, #e6a23c 0%, #f5af58 100%);
  color: #fff;
}
.yarn-toast-overlay.success .yarn-toast-content[data-v-b895035c] {
  background: linear-gradient(135deg, #389e0d 0%, #52c41a 100%);
  color: #fff;
}
.yarn-toast-icon[data-v-b895035c] {
  font-size: 18px;
  font-weight: bold;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  flex-shrink: 0;
}
.yarn-toast-message[data-v-b895035c] {
  flex: 1;
  line-height: 1.5;
}
@keyframes toastSlideIn-b895035c {
from {
    transform: translateX(-50%) translateY(-20px);
    opacity: 0;
}
to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
}

/* 删除确认弹窗样式 */
.yarn-confirm-overlay[data-v-b895035c] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn-b895035c 0.2s ease;
}
.yarn-confirm-dialog[data-v-b895035c] {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  width: 360px;
  overflow: hidden;
  animation: scaleIn-b895035c 0.2s ease;
}
.yarn-confirm-header[data-v-b895035c] {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
}
.yarn-confirm-icon[data-v-b895035c] {
  font-size: 20px;
  color: #faad14;
  margin-right: 10px;
}
.yarn-confirm-title[data-v-b895035c] {
  font-size: 16px;
  font-weight: 500;
  color: #262626;
}
.yarn-confirm-content[data-v-b895035c] {
  padding: 20px;
  font-size: 14px;
  color: #595959;
  line-height: 1.6;
}
.yarn-confirm-footer[data-v-b895035c] {
  display: flex;
  justify-content: flex-end;
  padding: 12px 20px;
  border-top: 1px solid #f0f0f0;
  gap: 10px;
}
.yarn-confirm-btn[data-v-b895035c] {
  padding: 6px 16px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}
.yarn-confirm-btn.cancel[data-v-b895035c] {
  background: #f5f5f5;
  color: #595959;
}
.yarn-confirm-btn.cancel[data-v-b895035c]:hover {
  background: #e8e8e8;
}
.yarn-confirm-btn.confirm[data-v-b895035c] {
  background: #ff4d4f;
  color: #fff;
}
.yarn-confirm-btn.confirm[data-v-b895035c]:hover {
  background: #ff7875;
}
@keyframes fadeIn-b895035c {
from { opacity: 0;
}
to { opacity: 1;
}
}
@keyframes scaleIn-b895035c {
from { transform: scale(0.9); opacity: 0;
}
to { transform: scale(1); opacity: 1;
}
}

/* 领退记录页面样式 */
.record-page[data-v-b895035c] {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 4px;
}
.record-filter-bar[data-v-b895035c] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 4px;
  flex-shrink: 0;
  flex-wrap: nowrap;
}
.record-filter-item[data-v-b895035c] {
  display: flex;
  align-items: center;
  gap: 4px;
}
.record-filter-item label[data-v-b895035c] {
  font-size: 13px;
  color: #606266;
  white-space: nowrap;
}
.record-filter-input[data-v-b895035c] {
  padding: 4px 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
  outline: none;
}
.record-filter-input[data-v-b895035c]:focus {
  border-color: #1890ff;
}
.date-sep[data-v-b895035c] {
  color: #909399;
  margin: 0 2px;
}
.record-section[data-v-b895035c] {
  display: flex;
  flex-direction: column;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow: hidden;
  min-height: 0;
}
.record-list-section[data-v-b895035c] {
  flex: 0 0 auto;
  max-height: 390px;
}
.record-detail-section[data-v-b895035c] {
  flex: 1;
  min-height: 150px;
}
.record-section-title[data-v-b895035c] {
  padding: 6px 12px;
  background: #f5f7fa;
  font-size: 13px;
  font-weight: bold;
  color: #303133;
  border-bottom: 1px solid #ebeef5;
  flex-shrink: 0;
}
.record-table[data-v-b895035c] {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.record-table th[data-v-b895035c] {
  background: #fafafa;
  font-weight: 500;
  font-size: 14px;
  padding: 6px 8px;
  text-align: center;
}
.record-table td[data-v-b895035c] {
  font-size: 16px;
  padding: 6px 8px;
  text-align: center;
}
.record-table tbody tr[data-v-b895035c] {
  cursor: pointer;
  transition: background 0.2s;
}
.record-table tbody tr[data-v-b895035c]:hover {
  background: #f5f7fa;
}
.record-table tbody tr.selected-row[data-v-b895035c] {
  background: #e6f7ff;
}
.tag-in[data-v-b895035c] {
  display: inline-block;
  padding: 2px 8px;
  background: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
  border-radius: 4px;
  font-size: 12px;
}
.tag-out[data-v-b895035c] {
  display: inline-block;
  padding: 2px 8px;
  background: #fff7e6;
  color: #fa8c16;
  border: 1px solid #ffd591;
  border-radius: 4px;
  font-size: 12px;
}
.btn-link.primary[data-v-b895035c] {
  color: #1890ff;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  padding: 0 4px;
}
.btn-link.primary[data-v-b895035c]:hover {
  text-decoration: underline;
}
.btn-link.danger[data-v-b895035c] {
  color: #ff4d4f;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  padding: 0 4px;
  margin-left: 4px;
}
.btn-link.danger[data-v-b895035c]:hover {
  text-decoration: underline;
}

/* 明细编辑弹窗 */
.yarn-edit-modal[data-v-b895035c] {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  width: 380px;
  max-width: 90vw;
  animation: fadeIn-b895035c 0.2s ease;
}
.yarn-edit-header[data-v-b895035c] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #ebeef5;
}
.yarn-edit-title[data-v-b895035c] {
  font-size: 15px;
  font-weight: 600;
  color: #303133;
}
.yarn-edit-close[data-v-b895035c] {
  font-size: 20px;
  color: #909399;
  cursor: pointer;
  line-height: 1;
}
.yarn-edit-close[data-v-b895035c]:hover {
  color: #606266;
}
.yarn-edit-body[data-v-b895035c] {
  padding: 16px 18px;
}
.yarn-edit-row[data-v-b895035c] {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.yarn-edit-row[data-v-b895035c]:last-child {
  margin-bottom: 0;
}
.yarn-edit-label[data-v-b895035c] {
  width: 90px;
  font-size: 13px;
  color: #606266;
  flex-shrink: 0;
}
.yarn-edit-value[data-v-b895035c] {
  flex: 1;
  font-size: 13px;
  color: #303133;
}
.yarn-edit-total[data-v-b895035c] {
  color: #ff6600;
  font-weight: 500;
}
.yarn-edit-input[data-v-b895035c] {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
  color: #606266;
  outline: none;
  text-align: center;
  -moz-appearance: textfield;
}
.yarn-edit-input[data-v-b895035c]:focus {
  border-color: #409eff;
}
.yarn-edit-input[data-v-b895035c]::-webkit-inner-spin-button,
.yarn-edit-input[data-v-b895035c]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


/* 遮罩层 */
.yarn-stock-modal[data-v-445890bf] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* 弹窗主体 */
.yarn-stock-content[data-v-445890bf] {
  background: #fff;
  border-radius: 8px;
  width:90vw;
  height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 头部 */
.yarn-stock-header[data-v-445890bf] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #e8e8e8;
}
.yarn-stock-title[data-v-445890bf] {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}
.yarn-stock-close[data-v-445890bf] {
  font-size: 20px;
  cursor: pointer;
  color: #909399;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
.yarn-stock-close[data-v-445890bf]:hover {
  background: #f5f7fa;
  color: #606266;
}

/* 内容区 */
.yarn-stock-body[data-v-445890bf] {
  padding: 16px;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* 筛选栏 */
.filter-bar[data-v-445890bf] {
  margin-bottom: 12px;
  padding: 12px;
  background: #fafafa;
  border-radius: 4px;
  flex-shrink: 0;
}
.filter-row[data-v-445890bf] {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.filter-item[data-v-445890bf] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.filter-label[data-v-445890bf] {
  font-size: 13px;
  color: #606266;
  white-space: nowrap;
}
.filter-input[data-v-445890bf] {
  padding: 6px 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
  width: 140px;
  outline: none;
}
.filter-input[data-v-445890bf]:focus {
  border-color: #409eff;
}

/* 按钮 */
.yarn-stock-btn[data-v-445890bf] {
  padding: 6px 16px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  background-color: #fff;
  color: #606266;
  transition: all 0.3s;
}
.yarn-stock-btn[data-v-445890bf]:hover {
  border-color: #409eff;
  color: #409eff;
}
.yarn-stock-btn.primary[data-v-445890bf] {
  background-color: #409eff;
  border-color: #409eff;
  color: #fff;
}
.yarn-stock-btn.primary[data-v-445890bf]:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}
.yarn-stock-btn.export[data-v-445890bf] {
  color: #67c23a;
  border-color: #b3e19d;
}
.yarn-stock-btn.export[data-v-445890bf]:hover {
  background-color: #67c23a;
  border-color: #67c23a;
  color: #fff;
}

/* 表格 */
.table-wrapper[data-v-445890bf] {
  overflow: auto;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  flex: 1;
  min-height: 0;
}
.yarn-stock-table[data-v-445890bf] {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.yarn-stock-table thead th[data-v-445890bf] {
  position: sticky;
  top: 0;
  background-color: #f5f7fa;
  padding: 10px 8px;
  font-size: 13px;
  font-weight: 500;
  color: #606266;
  border-bottom: 1px solid #ebeef5;
  text-align: center;
}
.yarn-stock-table thead th.sortable[data-v-445890bf] {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.yarn-stock-table thead th.sortable[data-v-445890bf]:hover {
  background-color: #ebeef5;
}
.sort-icon[data-v-445890bf] {
  margin-left: 4px;
  font-size: 10px;
  color: #c0c4cc;
}
.sort-icon.active[data-v-445890bf] {
  color: #409eff;
}
.yarn-stock-table tbody td[data-v-445890bf] {
  padding: 10px 8px;
  font-size: 13px;
  color: #606266;
  border-bottom: 1px solid #ebeef5;
  text-align: center;
}
.yarn-stock-table tbody tr:last-child td[data-v-445890bf] {
  border-bottom: none;
}
.yarn-stock-table tbody tr[data-v-445890bf]:hover {
  background-color: #f5f7fa;
}

/* 库存<=0 行高亮 */
.row-negative-stock[data-v-445890bf] {
  background-color: #fef0f0 !important;
}
.row-negative-stock[data-v-445890bf]:hover {
  background-color: #fde2e2 !important;
}
.negative-stock-value[data-v-445890bf] {
  color: #f56c6c;
  font-weight: 500;
}
.empty-cell[data-v-445890bf] {
  text-align: center;
  padding: 40px !important;
  color: #909399;
}

/* 分页 */
.pagination[data-v-445890bf] {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 15px;
  border-top: 1px solid #ebeef5;
  background-color: #fff;
  flex-shrink: 0;
}

/* 每页显示条数选择器 */
.page-size-selector[data-v-445890bf] {
  display: flex;
  align-items: center;
  gap: 6px;
}
.page-size-selector span[data-v-445890bf] {
  color: #606266;
  font-size: 13px;
}
.page-size-select[data-v-445890bf] {
  padding: 4px 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
  color: #606266;
  outline: none;
  cursor: pointer;
  background-color: #fff;
  transition: border-color 0.3s;
}
.page-size-select[data-v-445890bf]:hover {
  border-color: #409eff;
}
.page-size-select[data-v-445890bf]:focus {
  border-color: #409eff;
}
.pagination button[data-v-445890bf] {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: background-color 0.3s;
}
.pagination button[data-v-445890bf]:hover:not(:disabled) {
  background-color: #66b1ff;
}
.pagination button[data-v-445890bf]:disabled {
  background-color: #c0c4cc;
  cursor: not-allowed;
}
.page-info[data-v-445890bf] {
  color: #606266;
  font-size: 13px;
}

/* 页码跳转 */
.page-jumper[data-v-445890bf] {
  display: flex;
  align-items: center;
  gap: 6px;
}
.page-jumper span[data-v-445890bf] {
  color: #606266;
  font-size: 13px;
}
.page-input[data-v-445890bf] {
  width: 50px;
  padding: 4px 6px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
  text-align: center;
  outline: none;
  transition: border-color 0.3s;
}
.page-input[data-v-445890bf]:focus {
  border-color: #409eff;
}
.jump-btn[data-v-445890bf] {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: background-color 0.3s;
}
.jump-btn[data-v-445890bf]:hover {
  background-color: #66b1ff;
}

/* 样衣出入库 - 样式文件 */

/* 主弹窗容器 */
.sample-modal-overlay[data-v-44bb9c56] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.sample-modal-content.large[data-v-44bb9c56] {
  background-color: #fff;
  border-radius: 8px;
  width: 90%;
  max-width: 1900px;
  /* max-height: 800px;
  min-height: 800px; */
  height: 95%;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
}

/* ========== 弹窗头部样式 ========== */
.sample-modal-header[data-v-44bb9c56] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #5887f3;
  flex-shrink: 0;
}
.sample-modal-header h2[data-v-44bb9c56] {
  margin: 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}
.sample-modal-close[data-v-44bb9c56] {
  background: none;
  border: none;
  font-size: 28px;
  color: #909399;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.3s;
}
.sample-modal-close[data-v-44bb9c56]:hover {
  background-color: #f5f7fa;
  color: #606266;
}

/* ========== 弹窗主体样式 ========== */
.sample-modal-body[data-v-44bb9c56] {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ========== 菜单导航样式 ========== */
.sample-inout-menu[data-v-44bb9c56] {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
  border-bottom: 1px solid #e8e8e8;
}
.sample-inout-menu-item[data-v-44bb9c56] {
  padding: 8px 18px;
  cursor: pointer;
  font-size: 15px;
  color: #606266;
  background-color: #f5f7fa;
  border: 1px solid #e8e8e8;
  border-bottom: none;
  margin-bottom: -1px;
  transition: color 0.2s, background-color 0.2s;
}
.sample-inout-menu-item[data-v-44bb9c56]:first-child {
  border-radius: 4px 0 0 0;
}
.sample-inout-menu-item[data-v-44bb9c56]:last-child {
  border-radius: 0 4px 0 0;
}
.sample-inout-menu-item[data-v-44bb9c56]:hover {
  color: #1890ff;
  background-color: #fff;
}
.sample-inout-menu-item.active[data-v-44bb9c56] {
  color: #1890ff;
  background-color: #e6f7ff;
  border-bottom: 2px solid #1890ff;
  font-weight: 600;
  margin-bottom: -2px;
}

/* ========== 内容区域 ========== */
.sample-inout_content[data-v-44bb9c56] {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 5px;
}

/* 操作按钮栏 */
.sample-inout_actions-bar[data-v-44bb9c56] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  border-bottom: 1px solid #e8e8e8;
}

/* 按钮 */
.sample-inout-btn[data-v-44bb9c56] {
  padding: 4px 14px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  background-color: #fff;
  color: #606266;
  transition: all 0.3s;
}
.sample-inout-btn[data-v-44bb9c56]:hover {
  border-color: #1890ff;
  color: #1890ff;
}

/* 入/出库人选择 */
.sample-inout_person-group[data-v-44bb9c56] {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
}
.sample-inout_person-group label[data-v-44bb9c56] {
  font-size: 13px;
  color: #606266;
  white-space: nowrap;
}
.person-select[data-v-44bb9c56] {
  padding: 4px 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
  outline: none;
  min-width: 150px;
}
.import-input[data-v-44bb9c56] {
  padding: 4px 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
  outline: none;
  width: 160px;
}
.sample-inout-btn.primary[data-v-44bb9c56] {
  background-color: #1890ff;
  border-color: #1890ff;
  color: #fff;
}
.sample-inout-btn.primary[data-v-44bb9c56]:hover {
  background-color: #40a9ff;
  border-color: #40a9ff;
}
.sample-inout-btn.import[data-v-44bb9c56] {
  background-color: #52c41a;
  border-color: #52c41a;
  color: #fff;
}
.sample-inout-btn.import[data-v-44bb9c56]:hover {
  background-color: #73d13d;
  border-color: #73d13d;
}

/* ========== 表格区域 ========== */
.sample-inout_table-section[data-v-44bb9c56] {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow: hidden;
}
.table-scroll-wrapper[data-v-44bb9c56] {
  flex: 1;
  overflow-x: auto;
  overflow-y: auto;
}
.sample-inout-table[data-v-44bb9c56] {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.sample-inout-table thead th[data-v-44bb9c56] {
  position: sticky;
  top: 0;
  background-color: #f5f7fa;
  padding: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #606266;
  border-bottom: 1px solid #ebeef5;
  text-align: center;
  z-index: 1;
}
.sample-inout-table tbody td[data-v-44bb9c56] {
  padding: 0;
  font-size: 14px;
  color: #606266;
  border-bottom: 1px solid #ebeef5;
  text-align: center;
}
.sample-inout-table tbody tr[data-v-44bb9c56]:hover {
  background-color: #f5f7fa;
}

/* 单元格内编辑输入框 */
.cell-input[data-v-44bb9c56] {
  width: 100%;
  padding: 6px 8px;
  border: none;
  border-radius: 0;
  font-size: 14px;
  color: #606266;
  background: transparent;
  outline: none;
  box-sizing: border-box;
  text-align: center;
}
.cell-input[data-v-44bb9c56]:focus {
  background-color: #e6f7ff;
}

/* 空数据提示 */
.empty-cell[data-v-44bb9c56] {
  text-align: center;
  padding: 40px !important;
  color: #999;
  font-size: 14px;
}

/* 链接按钮 */
.btn-link[data-v-44bb9c56] {
  background: none;
  border: none;
  color: #1890ff;
  cursor: pointer;
  font-size: 13px;
  padding: 0 4px;
}
.btn-link[data-v-44bb9c56]:hover {
  text-decoration: underline;
}
.btn-link.danger[data-v-44bb9c56] {
  color: #f56c6c;
  background: #fff1f0;
  border: 1px solid #f56c6c;
  border-radius: 4px;
  padding: 2px 8px;
  text-decoration: none;
  transition: all 0.2s;
}
.btn-link.danger[data-v-44bb9c56]:hover {
  background: #f56c6c;
  color: #fff;
}

/* ========== 出入库记录页面 ========== */
.record-page[data-v-44bb9c56] {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
}

/* 筛选栏 */
.record-filter-bar[data-v-44bb9c56] {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
  flex-wrap: wrap;
}
.record-filter-item[data-v-44bb9c56] {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: #606266;
}
.record-filter-item label[data-v-44bb9c56] {
  white-space: nowrap;
}
.record-filter-input[data-v-44bb9c56] {
  padding: 4px 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
  outline: none;
  width: 130px;
}
.date-sep[data-v-44bb9c56] {
  margin: 0 4px;
  color: #909399;
}

/* 主单/明细区域 */
.record-section[data-v-44bb9c56] {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow: hidden;
}
.record-list-section[data-v-44bb9c56] {
  max-height: 300px;
  display: flex;
  flex-direction: column;
}
.record-detail-section[data-v-44bb9c56] {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.record-detail-title[data-v-44bb9c56] {
  padding: 6px 10px;
  font-size: 14px;
  color: #333;
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
  font-weight: 600;
}

/* 选中行高亮 */
.sample-inout-table tbody tr.selected-row[data-v-44bb9c56] {
  background-color: #e6f7ff;
}

/* 入库/出库标签 */
.tag-in[data-v-44bb9c56] {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 12px;
  background-color: #e6f7ff;
  color: #1890ff;
  border: 1px solid #91d5ff;
}
.tag-out[data-v-44bb9c56] {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 12px;
  background-color: #fff1f0;
  color: #f56c6c;
  border: 1px solid #ffccc7;
}

/* 分页区域 */
.pagination[data-v-44bb9c56] {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 10px 15px;
  border-top: 1px solid #ebeef5;
  background-color: #fff;
  flex-shrink: 0;
}

/* 每页显示条数选择器 */
.page-size-selector[data-v-44bb9c56] {
  display: flex;
  align-items: center;
  gap: 6px;
}
.page-size-selector span[data-v-44bb9c56] {
  color: #606266;
  font-size: 13px;
}
.page-size-select[data-v-44bb9c56] {
  padding: 4px 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
  color: #606266;
  outline: none;
  cursor: pointer;
  background-color: #fff;
  transition: border-color 0.3s;
}
.page-size-select[data-v-44bb9c56]:hover {
  border-color: #409eff;
}
.page-size-select[data-v-44bb9c56]:focus {
  border-color: #409eff;
}
.pagination button[data-v-44bb9c56] {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: background-color 0.3s;
}
.pagination button[data-v-44bb9c56]:hover:not(:disabled) {
  background-color: #66b1ff;
}
.pagination button[data-v-44bb9c56]:disabled {
  background-color: #c0c4cc;
  cursor: not-allowed;
}
.page-info[data-v-44bb9c56] {
  color: #606266;
  font-size: 13px;
}

/* 页码跳转 */
.page-jumper[data-v-44bb9c56] {
  display: flex;
  align-items: center;
  gap: 6px;
}
.page-jumper span[data-v-44bb9c56] {
  color: #606266;
  font-size: 13px;
}
.page-input[data-v-44bb9c56] {
  width: 50px;
  padding: 4px 6px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
  text-align: center;
  outline: none;
  transition: border-color 0.3s;
}
.page-input[data-v-44bb9c56]:focus {
  border-color: #409eff;
}
.jump-btn[data-v-44bb9c56] {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: background-color 0.3s;
}
.jump-btn[data-v-44bb9c56]:hover {
  background-color: #66b1ff;
}

/* ========== 删除确认弹窗 ========== */
.sample-confirm-overlay[data-v-44bb9c56] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  animation: fadeIn 0.2s ease;
}
.sample-confirm-dialog[data-v-44bb9c56] {
  width: 360px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  animation: scaleIn-44bb9c56 0.25s ease;
}
.sample-confirm-header[data-v-44bb9c56] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px 8px;
}
.sample-confirm-icon[data-v-44bb9c56] {
  font-size: 20px;
  color: #faad14;
}
.sample-confirm-title[data-v-44bb9c56] {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}
.sample-confirm-content[data-v-44bb9c56] {
  padding: 4px 20px 20px;
  font-size: 14px;
  color: #555;
  line-height: 1.6;
}
.sample-confirm-footer[data-v-44bb9c56] {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 20px 16px;
}
.sample-confirm-btn[data-v-44bb9c56] {
  padding: 6px 18px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid #dcdfe6;
  background: #fff;
  color: #606266;
}
.sample-confirm-btn[data-v-44bb9c56]:hover {
  opacity: 0.85;
}
.sample-confirm-btn.cancel[data-v-44bb9c56]:hover {
  border-color: #dcdfe6;
  color: #333;
}
.sample-confirm-btn.confirm[data-v-44bb9c56] {
  background: #ff4d4f;
  border-color: #ff4d4f;
  color: #fff;
}
.sample-confirm-btn.confirm[data-v-44bb9c56]:hover {
  background: #ff7875;
  border-color: #ff7875;
}
@keyframes scaleIn-44bb9c56 {
from {
    transform: scale(0.9);
    opacity: 0;
}
to {
    transform: scale(1);
    opacity: 1;
}
}

/* 样衣库存 - 样式文件 */

/* 复用弹窗容器 */
.sample-modal-overlay[data-v-3bd78548] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.sample-modal-content.large[data-v-3bd78548] {
  background-color: #fff;
  border-radius: 8px;
  width: 80vw;
  /* max-width: 1200px; */
  /* max-height: 1200px; */
  min-height: 88vh;
  height: 95%;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
}

/* ========== 弹窗头部 ========== */
.sample-modal-header[data-v-3bd78548] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid #e4e7ed;
  flex-shrink: 0;
}
.sample-modal-header h2[data-v-3bd78548] {
  margin: 0;
  font-size: 16px;
  color: #303133;
}
.sample-modal-close[data-v-3bd78548] {
  border: none;
  background: none;
  font-size: 22px;
  color: #909399;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.sample-modal-close[data-v-3bd78548]:hover {
  color: #303133;
}

/* ========== 弹窗主体 ========== */
.sample-modal-body[data-v-3bd78548] {
  flex: 1;
  overflow-y: auto;
  padding: 15px 20px;
}

/* ========== 筛选栏 ========== */
.record-filter-bar[data-v-3bd78548] {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}
.record-filter-item[data-v-3bd78548] {
  display: flex;
  align-items: center;
  gap: 4px;
}
.record-filter-item label[data-v-3bd78548] {
  font-size: 13px;
  color: #606266;
  white-space: nowrap;
}
.record-filter-input[data-v-3bd78548] {
  height: 30px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 10px;
  font-size: 13px;
  width: 140px;
  outline: none;
  transition: border-color 0.2s;
}
.record-filter-input[data-v-3bd78548]:focus {
  border-color: #409eff;
}

/* 筛选栏复选框 */
.filter-checkbox-item[data-v-3bd78548] {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #606266;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.filter-checkbox-item input[type="checkbox"][data-v-3bd78548] {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: #409eff;
}

/* ========== 按钮 ========== */
.sample-inout-btn[data-v-3bd78548] {
  height: 30px;
  padding: 0 16px;
  border: 1px solid #dcdfe6;
  background: #fff;
  border-radius: 4px;
  font-size: 13px;
  color: #606266;
  cursor: pointer;
  transition: all 0.2s;
}
.sample-inout-btn[data-v-3bd78548]:hover {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}
.sample-inout-btn.primary[data-v-3bd78548] {
  background-color: #409eff;
  border-color: #409eff;
  color: #fff;
}
.sample-inout-btn.primary[data-v-3bd78548]:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
  color: #fff;
}
.sample-inout-btn.export[data-v-3bd78548] {
  color: #67c23a;
  border-color: #b3e19d;
}
.sample-inout-btn.export[data-v-3bd78548]:hover {
  background-color: #67c23a;
  border-color: #67c23a;
  color: #fff;
}

/* ========== 表格 ========== */
.table-container[data-v-3bd78548] {
  overflow-x: auto;
  margin-bottom: 15px;
}
.stock-table[data-v-3bd78548] {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.stock-table th[data-v-3bd78548],
.stock-table td[data-v-3bd78548] {
  padding: 8px 10px;
  text-align: center;
  border-bottom: 1px solid #ebeef5;
}
.stock-table th[data-v-3bd78548] {
  background-color: #fafafa;
  color: #909399;
  font-weight: 500;
}
.stock-table tbody tr[data-v-3bd78548]:hover {
  background-color: #f5f7fa;
}
.empty-cell[data-v-3bd78548] {
  text-align: center;
  color: #909399;
  padding: 30px 0;
}

/* 库存为零或负数 */
.stock-zero[data-v-3bd78548] {
  color: #f56c6c;
  font-weight: bold;
}

/* 缩略图 */
.thumb-cell[data-v-3bd78548] {
  text-align: center;
}
.stock-thumb[data-v-3bd78548] {
  width: 25px;
  height: 25px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  cursor: pointer;
  vertical-align: middle;
  transition: transform 0.15s;
}
.stock-thumb[data-v-3bd78548]:hover {
  transform: scale(1.5);
}
.no-thumb[data-v-3bd78548] {
  font-size: 12px;
  color: #c0c4cc;
}

/* 图片预览（悬停大图） */
.image-preview-tooltip[data-v-3bd78548] {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
}
.image-preview-large[data-v-3bd78548] {
  width: 280px;
  max-height: 280px;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* ========== 分页（固定底部） ========== */
.pagination[data-v-3bd78548] {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 10px 15px;
  border-top: 1px solid #ebeef5;
  background-color: #fff;
  flex-shrink: 0;
}

/* 每页显示条数选择器 */
.page-size-selector[data-v-3bd78548] {
  display: flex;
  align-items: center;
  gap: 6px;
}
.page-size-selector span[data-v-3bd78548] {
  color: #606266;
  font-size: 13px;
}
.page-size-select[data-v-3bd78548] {
  padding: 4px 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
  color: #606266;
  outline: none;
  cursor: pointer;
  background-color: #fff;
  transition: border-color 0.3s;
}
.page-size-select[data-v-3bd78548]:hover {
  border-color: #409eff;
}
.page-size-select[data-v-3bd78548]:focus {
  border-color: #409eff;
}
.pagination button[data-v-3bd78548] {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: background-color 0.3s;
}
.pagination button[data-v-3bd78548]:hover:not(:disabled) {
  background-color: #66b1ff;
}
.pagination button[data-v-3bd78548]:disabled {
  background-color: #c0c4cc;
  cursor: not-allowed;
}
.page-info[data-v-3bd78548] {
  color: #606266;
  font-size: 13px;
}

/* 页码跳转 */
.page-jumper[data-v-3bd78548] {
  display: flex;
  align-items: center;
  gap: 6px;
}
.page-jumper span[data-v-3bd78548] {
  color: #606266;
  font-size: 13px;
}
.page-input[data-v-3bd78548] {
  width: 50px;
  padding: 4px 6px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
  text-align: center;
  outline: none;
  transition: border-color 0.3s;
}
.page-input[data-v-3bd78548]:focus {
  border-color: #409eff;
}
.jump-btn[data-v-3bd78548] {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: background-color 0.3s;
}
.jump-btn[data-v-3bd78548]:hover {
  background-color: #66b1ff;
}

/* 辅料管理 - 样式文件 */
.acc-management[data-v-f8bcf932] {
  /* 作为弹窗组件时不需要背景色 */
}

/* 主弹窗容器 */
.acc-modal-overlay[data-v-f8bcf932] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.acc-modal-content.large[data-v-f8bcf932] {
  background-color: #fff;
  border-radius: 8px;
  width: 95%;
  max-width: 1900px;
  /* max-height: 800px;
  min-height: 800px; */
  height: 95%;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
}

/* ========== 弹窗头部样式 ========== */
.acc-modal-header[data-v-f8bcf932] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #5887f3;
  flex-shrink: 0;
}
.acc-modal-header h2[data-v-f8bcf932] {
  margin: 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}
.acc-modal-header h3[data-v-f8bcf932] {
  margin: 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}
.acc-modal-close[data-v-f8bcf932] {
  background: none;
  border: none;
  font-size: 28px;
  color: #909399;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.3s;
}
.acc-modal-close[data-v-f8bcf932]:hover {
  background-color: #f5f7fa;
  color: #606266;
}

/* ========== 弹窗主体样式 ========== */
.acc-modal-body[data-v-f8bcf932] {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* ========== 查询区域 ========== */
.search-area[data-v-f8bcf932] {
  background-color: #fff;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.search-item[data-v-f8bcf932] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.search-item label[data-v-f8bcf932] {
  color: #606266;
  font-size: 14px;
  white-space: nowrap;
  font-weight: 500;
}
.search-item input[data-v-f8bcf932],
.search-item select[data-v-f8bcf932] {
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s;
}
.search-item input[data-v-f8bcf932]:focus,
.search-item select[data-v-f8bcf932]:focus {
  border-color: #409eff;
}
.search-item input[data-v-f8bcf932] {
  width: 160px;
}
.btn-search[data-v-f8bcf932] {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}
.btn-search[data-v-f8bcf932]:hover {
  background-color: #66b1ff;
}
.btn-reset[data-v-f8bcf932] {
  background-color: #909399;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}
.btn-reset[data-v-f8bcf932]:hover {
  background-color: #a6a9ad;
}
.btn-add[data-v-f8bcf932] {
  background-color: #67c23a;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
  margin-left: auto;
}
.btn-add[data-v-f8bcf932]:hover {
  background-color: #85ce61;
}

/* ========== 表格包装器 ========== */
.table-wrapper[data-v-f8bcf932] {
  flex: 1;
  min-height: 400px;
  max-height: 800px;
  overflow-y: auto;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  position: relative;
}
.table-wrapper[data-v-f8bcf932]::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.table-wrapper[data-v-f8bcf932]::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}
.table-wrapper[data-v-f8bcf932]::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 4px;
}
.table-wrapper[data-v-f8bcf932]::-webkit-scrollbar-thumb:hover {
  background: #909399;
}
.table-container[data-v-f8bcf932] {
  background-color: #fff;
  border-radius: 4px;
  padding: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.acc-modal-body table[data-v-f8bcf932] {
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
  table-layout: fixed;
}
.acc-modal-body thead th[data-v-f8bcf932] {
  position: sticky;
  top: 0;
  background-color: #f5f7fa;
  z-index: 10;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  color: #606266;
  font-weight: 600;
  font-size: 14px;
  padding: 9px 10px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acc-modal-body th[data-v-f8bcf932], .acc-modal-body td[data-v-f8bcf932] {
  padding: 5px 8px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
  background-color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 设置各列的固定宽度（辅料管理 12 列） */
.acc-modal-body th[data-v-f8bcf932]:nth-child(1), .acc-modal-body td[data-v-f8bcf932]:nth-child(1) {
  width: 50px !important;  /* 序号 */
  min-width: 50px !important;
  max-width: 50px !important;
  text-align: center;
}
.acc-modal-body th[data-v-f8bcf932]:nth-child(2), .acc-modal-body td[data-v-f8bcf932]:nth-child(2) {
  width: 120px !important;  /* 辅料编号 */
  min-width: 120px !important;
  max-width: 120px !important;
}
.acc-modal-body th[data-v-f8bcf932]:nth-child(3), .acc-modal-body td[data-v-f8bcf932]:nth-child(3) {
  width: 150px !important;  /* 辅料名称 */
  min-width: 150px !important;
  max-width: 150px !important;
}
.acc-modal-body th[data-v-f8bcf932]:nth-child(4), .acc-modal-body td[data-v-f8bcf932]:nth-child(4) {
  width: 100px !important;  /* 分类 */
  min-width: 100px !important;
  max-width: 100px !important;
}
.acc-modal-body th[data-v-f8bcf932]:nth-child(5), .acc-modal-body td[data-v-f8bcf932]:nth-child(5) {
  width: 100px !important;  /* 子分类 */
  min-width: 100px !important;
  max-width: 100px !important;
}
.acc-modal-body th[data-v-f8bcf932]:nth-child(6), .acc-modal-body td[data-v-f8bcf932]:nth-child(6) {
  width: 100px !important;  /* 规格 */
  min-width: 100px !important;
  max-width: 100px !important;
}
.acc-modal-body th[data-v-f8bcf932]:nth-child(7), .acc-modal-body td[data-v-f8bcf932]:nth-child(7) {
  width: 100px !important;  /* 材质 */
  min-width: 100px !important;
  max-width: 100px !important;
}
.acc-modal-body th[data-v-f8bcf932]:nth-child(8), .acc-modal-body td[data-v-f8bcf932]:nth-child(8) {
  width: 100px !important;  /* 颜色 */
  min-width: 100px !important;
  max-width: 100px !important;
}
.acc-modal-body th[data-v-f8bcf932]:nth-child(9), .acc-modal-body td[data-v-f8bcf932]:nth-child(9) {
  width: 80px !important;  /* 单位 */
  min-width: 80px !important;
  max-width: 80px !important;
}
.acc-modal-body th[data-v-f8bcf932]:nth-child(10), .acc-modal-body td[data-v-f8bcf932]:nth-child(10) {
  width: 100px !important;  /* 单价 */
  min-width: 100px !important;
  max-width: 100px !important;
}
.acc-modal-body th[data-v-f8bcf932]:nth-child(11), .acc-modal-body td[data-v-f8bcf932]:nth-child(11) {
  width: 120px !important;  /* 仓库位置 */
  min-width: 120px !important;
  max-width: 120px !important;
}
.acc-modal-body th[data-v-f8bcf932]:nth-child(12), .acc-modal-body td[data-v-f8bcf932]:nth-child(12) {
  min-width: 150px !important;  /* 操作列最小宽度 */
  text-align: center;
}
.acc-modal-body td[data-v-f8bcf932] {
  color: #606266;
  font-size: 14px;
}
.acc-modal-body tbody tr[data-v-f8bcf932]:hover {
  background-color: #f5f7fa;
}

/* 颜色预览块 */
.color-preview[data-v-f8bcf932] {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid #ddd;
  margin-right: 6px;
  vertical-align: middle;
}

/* 状态标签 */
.status[data-v-f8bcf932] {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}
.status-active[data-v-f8bcf932] {
  background-color: #f0f9eb;
  color: #67c23a;
}
.status-inactive[data-v-f8bcf932] {
  background-color: #fef0f0;
  color: #f56c6c;
}
.status-deleted[data-v-f8bcf932] {
  background-color: #fef7e6;
  color: #e6a23c;
}

/* 操作按钮 */
.actions[data-v-f8bcf932] {
  display: flex;
  flex-direction: row;
  gap: 4px;
  justify-content: left;
  flex-wrap: wrap;
}
.btn-copy[data-v-f8bcf932],
.btn-edit[data-v-f8bcf932],
.btn-delete[data-v-f8bcf932] {
  background-color: inherit;
  color: white;
  border: none !important;
  padding: 2px 6px !important;
  border-radius: 3px !important;
  cursor: pointer;
  font-size: 11px !important;
  font-weight: normal !important;
  font-family: inherit;
  line-height: normal !important;
  white-space: nowrap;
  min-width: 38px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box;
  text-transform: none;
  letter-spacing: normal;
}
.btn-copy[data-v-f8bcf932] {
  background-color: #17a2b8 !important;
}
.btn-copy[data-v-f8bcf932]:hover {
  background-color: #138496 !important;
}
.btn-edit[data-v-f8bcf932] {
  background-color: #f7d29a !important;
}
.btn-edit[data-v-f8bcf932]:hover {
  background-color: #b2f193 !important;
}
.btn-delete[data-v-f8bcf932] {
  background-color: #f56c6c !important;
}
.btn-delete[data-v-f8bcf932]:hover {
  background-color: #f78989 !important;
}

/* 空数据提示 */
.empty-data[data-v-f8bcf932] {
  text-align: center;
  padding: 40px;
  color: #909399;
  font-size: 14px;
}

/* 表格缩略图 */
.acc-thumb-cell[data-v-f8bcf932] {
  text-align: center;
  width: 50px;
}
.acc-thumb[data-v-f8bcf932] {
  width: 30px;
  height: 30px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.15s;
}
.acc-thumb[data-v-f8bcf932]:hover {
  transform: scale(1.5);
}
.no-thumb[data-v-f8bcf932] {
  font-size: 12px;
  color: #c0c4cc;
}

/* 图片预览（悬停大图） */
.acc-image-preview-tooltip[data-v-f8bcf932] {
  position: fixed;
  z-index: 99999;
  pointer-events: none;
}
.acc-image-preview-large[data-v-f8bcf932] {
  width: 280px;
  max-height: 280px;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* 分页固定在底部 */
.pagination-footer[data-v-f8bcf932] {
  flex-shrink: 0;
  border-top: 1px solid #ebeef5;
  background-color: #fff;
}

/* 分页 */
.pagination[data-v-f8bcf932] {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  background-color: #fff;
  padding: 12px 15px;
  border-radius: 0;
  box-shadow: none;
}

/* 每页显示条数选择器 */
.page-size-selector[data-v-f8bcf932] {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #606266;
  font-size: 14px;
}
.page-size-select[data-v-f8bcf932] {
  padding: 6px 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  color: #606266;
  outline: none;
  cursor: pointer;
  transition: border-color 0.3s;
}
.page-size-select[data-v-f8bcf932]:focus {
  border-color: #409eff;
}

/* 页码跳转器 */
.page-jumper[data-v-f8bcf932] {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #606266;
  font-size: 14px;
}
.pagination button[data-v-f8bcf932] {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}
.pagination button[data-v-f8bcf932]:hover:not(:disabled) {
  background-color: #66b1ff;
}
.pagination button[data-v-f8bcf932]:disabled {
  background-color: #c0c4cc;
  cursor: not-allowed;
}
.page-info[data-v-f8bcf932] {
  color: #606266;
  font-size: 14px;
}
.page-input[data-v-f8bcf932] {
  width: 60px;
  padding: 6px 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
  color: #606266;
  outline: none;
}
.page-input[data-v-f8bcf932]:focus {
  border-color: #409eff;
}
.jump-btn[data-v-f8bcf932] {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}
.jump-btn[data-v-f8bcf932]:hover {
  background-color: #66b1ff;
}
.page-total[data-v-f8bcf932] {
  color: #909399;
  font-size: 13px;
  font-style: italic;
}

/* ========== 子弹窗（新增/编辑表单） ========== */
.sub-modal-overlay[data-v-f8bcf932] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001;
}
.acc-management .sub-modal-content[data-v-f8bcf932] {
  background-color: #fff;
  border-radius: 8px;
  width: 700px !important;
  max-width: 90% !important;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.sub-modal-content .acc-modal-header[data-v-f8bcf932] {
  padding: 18px 20px;
  border-bottom: 1px solid #ebeef5;
}
.sub-modal-content .acc-modal-header h3[data-v-f8bcf932] {
  margin: 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}
.sub-modal-content .acc-modal-body[data-v-f8bcf932] {
  padding: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: calc(90vh - 100px);
}
.acc-form-wrapper[data-v-f8bcf932] {
  flex: 1;
  overflow-y: auto;
  padding-right: 5px;
}
.acc-form-buttons[data-v-f8bcf932] {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 15px 0 0;
  flex-shrink: 0;
  border-top: 1px solid #ebeef5;
  margin-top: 15px;
}
.acc-form-row[data-v-f8bcf932] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.acc-form-item[data-v-f8bcf932] {
  display: flex;
  align-items: center;
  gap: 10px;
}
.acc-form-item label[data-v-f8bcf932] {
  width: 80px;
  flex-shrink: 0;
  color: #606266;
  font-size: 14px;
  font-weight: 500;
}
.acc-form-item input[data-v-f8bcf932],
.acc-form-item select[data-v-f8bcf932],
.acc-form-item textarea[data-v-f8bcf932] {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s;
  box-sizing: border-box;
}
.acc-form-item input[data-v-f8bcf932]:focus,
.acc-form-item select[data-v-f8bcf932]:focus {
  border-color: #409eff;
}
.acc-form-item input[data-v-f8bcf932]:disabled {
  background-color: #f5f7fa;
  cursor: not-allowed;
}
.acc-form-item textarea[data-v-f8bcf932] {
  resize: vertical;
  min-height: 50px;
}
.acc-form-item.full-width[data-v-f8bcf932] {
  grid-column: 1 / -1;
}
.acc-form-item.full-width label[data-v-f8bcf932] {
  align-self: flex-start;
  margin-top: 8px;
}
.acc-form-item.full-width textarea[data-v-f8bcf932] {
  width: 100%;
}
.input-with-color[data-v-f8bcf932] {
  display: flex;
  align-items: center;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 1px 1px;
  background-color: #fff;
  flex: 1;
  max-width: 230px;
}
.color-picker[data-v-f8bcf932] {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  padding: 10px;
  margin-right: 8px;
  background-color: transparent;
  transition: transform 0.3s;
  flex-shrink: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.color-picker[data-v-f8bcf932]::-webkit-color-swatch-wrapper {
  padding: 0;
  border: none;
  border-radius: 2px;
}
.color-picker[data-v-f8bcf932]::-webkit-color-swatch {
  border: none;
  border-radius: 2px;
  padding: 0;
}
.color-picker[data-v-f8bcf932]::-moz-color-swatch {
  border: none;
  border-radius: 2px;
  padding: 0;
}
.color-picker[data-v-f8bcf932]:hover {
  transform: scale(1.05);
}
.color-picker[data-v-f8bcf932]:focus {
  outline: none;
  transform: scale(1.05);
}
.input-with-color .color-text[data-v-f8bcf932] {
  font-family: 'Courier New', monospace;
  font-size: 14px;
  color: #606266;
  text-transform: uppercase;
  flex: 1;
}

/* ========== 弹窗底部按钮栏 ========== */
.acc-modal-footer[data-v-f8bcf932] {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 15px 20px;
  border-top: 1px solid #ebeef5;
  flex-shrink: 0;
  background-color: #fff;
}
.btn-cancel[data-v-f8bcf932] {
  background-color: #909399;
  color: white;
  border: none;
  padding: 10px 24px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}
.btn-cancel[data-v-f8bcf932]:hover {
  background-color: #a6a9ad;
}
.btn-submit[data-v-f8bcf932] {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 10px 24px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}
.btn-submit[data-v-f8bcf932]:hover:not(:disabled) {
  background-color: #66b1ff;
}
.btn-submit[data-v-f8bcf932]:disabled {
  background-color: #c0c4cc;
  cursor: not-allowed;
}

/* 响应式设计 */
@media (max-width: 768px) {
.acc-modal-content[data-v-f8bcf932] {
    width: 100%;
    margin: 10px;
}
.search-area[data-v-f8bcf932] {
    flex-direction: column;
    align-items: stretch;
}
.search-item[data-v-f8bcf932] {
    flex-direction: column;
    align-items: flex-start;
}
.search-item input[data-v-f8bcf932] {
    width: 100%;
}
.acc-form-row[data-v-f8bcf932] {
    grid-template-columns: 1fr;
}
.btn-add[data-v-f8bcf932] {
    margin-left: 0;
}
}

/* ==================== 图片上传 ==================== */
.acc-image-upload[data-v-f8bcf932] {
  flex: 1;
}
.acc-image-preview[data-v-f8bcf932] {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e0e0e0;
}
.acc-image-preview img[data-v-f8bcf932] {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.acc-image-mask[data-v-f8bcf932] {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  opacity: 0;
  transition: opacity 0.2s;
}
.acc-image-preview:hover .acc-image-mask[data-v-f8bcf932] {
  opacity: 1;
}
.acc-image-mask span[data-v-f8bcf932] {
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.2);
  transition: background 0.2s;
}
.acc-image-mask span[data-v-f8bcf932]:hover {
  background: rgba(255, 255, 255, 0.35);
}
.acc-image-placeholder[data-v-f8bcf932] {
  width: 150px;
  height: 170px;
  border: 2px dashed #dcdfe6;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.acc-image-placeholder[data-v-f8bcf932]:hover {
  border-color: #5887f3;
  background: #f5f7fa;
}
.acc-upload-icon[data-v-f8bcf932] {
  font-size: 32px;
  color: #c0c4cc;
  line-height: 1;
}
.acc-upload-text[data-v-f8bcf932] {
  font-size: 12px;
  color: #909399;
}
.acc-upload-loading[data-v-f8bcf932] {
  font-size: 13px;
  color: #5887f3;
}

/* ==================== 表单顶部左右布局 ==================== */
.acc-form-top-row[data-v-f8bcf932] {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.acc-form-top-left[data-v-f8bcf932] {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.acc-form-top-left .acc-form-item[data-v-f8bcf932] {
  margin-bottom: 0;
}
.acc-form-top-right[data-v-f8bcf932] {
  flex-shrink: 0;
}
.acc-form-top-right .acc-image-upload[data-v-f8bcf932] {
  flex: none;
}

/* ========== 主弹窗容器 ========== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: #fff;
  border-radius: 8px;
  width: 90%;
  max-width: 900px;
  height: 90vh; /* 固定高度 */
  max-height: 90vh; /* 固定最大高度 */
  overflow: hidden; /* 防止出现滚动条 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
}

/* ========== 弹窗头部 ========== */
.modal-header {
  padding: 12px 24px;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.modal-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 28px;
  color: #909399;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.3s;
}

.modal-close:hover {
  background-color: #f5f7fa;
  color: #303133;
}

/* ========== 弹窗主体 ========== */
.modal-body {
  padding: 0; /* 移除内边距，让内容铺满 */
  flex: 1; /* 占据剩余空间 */
  overflow-y: auto; /* 允许内部滚动 */
}

/* ========== 设置容器（左右布局） ========== */
.settings-container {
  display: flex;
  height: 100%; /* 占满整个 modal-body */
  min-height: 500px;
}

/* ========== 左侧菜单 ========== */
.settings-menu {
  width: 180px;
  background-color: #f5f7fa;
  border-right: 1px solid #ebeef5;
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0; /* 防止被压缩 */
  height: 100%; /* 占满整个容器高度 */
}

.menu-item {
  padding: 12px 20px;
  font-size: 14px;
  color: #606266;
  cursor: pointer;
  transition: all 0.3s;
  border-left: 3px solid transparent;
  margin-left: -3px;
}

.menu-item:hover {
  background-color: #ecf5ff;
  color: #409eff;
}

.menu-item.active {
  background-color: #ecf5ff;
  color: #409eff;
  border-left-color: #409eff;
  font-weight: 500;
}

/* ========== 右侧内容区域 ========== */
.settings-content {
  flex: 1;
  padding: 16px; /* 减小内边距 */
  overflow-y: auto;
}

/* ========== 内容面板 ========== */
.content-panel {
  animation: fadeIn 0.3s ease-in-out;
  height: 100%; /* 让面板占满高度 */
  overflow: hidden; /* 防止出现滚动条 */
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.panel-title {
  margin: 0 0 20px 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  padding-bottom: 12px;
  border-bottom: 2px solid #409eff;
}

/* ========== 设置项 ========== */
.setting-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.setting-label {
  font-size: 15px;
  font-weight: 500;
  color: #606266;
  white-space: nowrap;
  width: 180px;
  min-width: 140px;
  flex-shrink: 0;
  text-align: right;
}

.setting-input,
.setting-select {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 15px;
  color: #606266;
  background-color: #fff;
  transition: border-color 0.3s;
}

.setting-input:focus,
.setting-select:focus {
  outline: none;
  border-color: #409eff;
}

.setting-input[readonly] {
  background-color: #f5f7fa;
  color: #909399;
  cursor: not-allowed;
}

.setting-select {
  cursor: pointer;
}

/* 备注按钮 */
.btn-remark {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #909399;
  color: #fff;
  border: none;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s;
}

.btn-remark:hover {
  background: #606266;
}

/* 到期天数显示 */
.expire-days {
  font-size: 14px;
  color: #67c23a;
  font-weight: 500;
  white-space: nowrap;
  margin-left: 4px;
}

.expire-days:hover {
  color: #85ce61;
}

.setting-textarea {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 15px;
  color: #606266;
  background-color: #fff;
  transition: border-color 0.3s;
  min-height: 80px;
  resize: vertical;
  font-family: inherit;
}

.setting-textarea:focus {
  outline: none;
  border-color: #409eff;
}

/* 配置提示文字 */
.config-hint {
  font-size: 13px;
  color: #909399;
  white-space: nowrap;
  margin-left: 8px;
}

/* ========== 表单容器 ========== */
.form-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 500px;
}

/* ========== 关于页面 ========== */
.about-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.about-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.about-label {
  font-size: 15px;
  font-weight: 500;
  color: #606266;
  min-width: 100px;
}

.about-value {
  font-size: 15px;
  color: #303133;
}

.about-description {
  margin-top: 16px;
  padding: 16px;
  background-color: #f5f7fa;
  border-radius: 6px;
  font-size: 16px;
  color: #303133;
  line-height: 1.8;
}

.about-description p {
  margin: 0;
}

.about-description strong {
  font-weight: 700;
  color: #1890ff;
  font-size: 17px;
}

/* ========== Logo 上传区域 ========== */
.logo-upload {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.logo-preview {
  width: 150px;
  height: 50px;
  -o-object-fit: contain;
     object-fit: contain;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 4px;
}

.logo-placeholder {
  width: 150px;
  height: 50px;
  border: 2px dashed #dcdfe6;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;
  color: #909399;
  font-size: 14px;
}

.logo-actions {
  display: flex;
  gap: 8px;
}

.btn-upload,
.btn-remove {
  padding: 8px 16px;
  font-size: 14px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-upload {
  background-color: #409eff;
  color: #fff;
}

.btn-upload:hover {
  background-color: #66b1ff;
}

.btn-remove {
  background-color: #f56c6c;
  color: #fff;
}

.btn-remove:hover {
  background-color: #f78989;
}

/* ========== 颜色选择器 ========== */
.theme-color-picker {
  display: flex;
  align-items: center;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 1px 1px;
  background-color: #fff;
  width: 100%;
  max-width: 230px;
}

.theme-color-picker .color-picker {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  padding: 10px;
  margin-right: 8px;
  background-color: transparent;
  transition: transform 0.3s;
  flex-shrink: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.theme-color-picker .color-picker::-webkit-color-swatch-wrapper {
  padding: 0;
  border: none;
  border-radius: 2px;
}

.theme-color-picker .color-picker::-webkit-color-swatch {
  border: none;
  border-radius: 2px;
  padding: 0;
}

.theme-color-picker .color-picker::-moz-color-swatch {
  border: none;
  border-radius: 2px;
  padding: 0;
}

.theme-color-picker .color-picker:hover {
  transform: scale(1.05);
}

.theme-color-picker .color-picker:focus {
  outline: none;
  transform: scale(1.05);
}

.theme-color-picker .color-text {
  font-family: 'Courier New', monospace;
  font-size: 14px;
  color: #606266;
  text-transform: uppercase;
  flex: 1;
}

/* ========== 开关 ========== */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #dcdfe6;
  transition: 0.3s;
  border-radius: 20px;
}

.switch-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

input:checked + .switch-slider {
  background-color: #409eff;
}

input:checked + .switch-slider:before {
  transform: translateX(20px);
}

.switch-label {
  margin-left: 12px;
  font-size: 14px;
  color: #606266;
}

/* ========== 密码策略 ========== */
.password-policy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background-color: #f5f7fa;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #606266;
}

.checkbox-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* ========== 弹窗底部按钮 ========== */
.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid #ebeef5;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
}

.btn-cancel,
.btn-save {
  padding: 10px 24px;
  font-size: 14px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-cancel {
  background-color: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
}

.btn-cancel:hover {
  border-color: #909399;
  color: #909399;
}

.btn-save {
  background-color: #409eff;
  color: #fff;
}

.btn-save:hover {
  background-color: #66b1ff;
}

/* ========== 字典配置页面 - 左右分栏布局 ========== */
.dictionary-container {
  display: flex;
  gap: 12px; /* 减小间距 */
  height: calc(90vh - 160px); /* 调整高度计算，适应固定弹窗高度 */
  min-height: 450px;
  overflow: hidden; /* 防止出现滚动条 */
}

/* ========== 左侧树形结构 ========== */
.dictionary-tree {
  width: 280px; /* 稍微减小宽度 */
  flex-shrink: 0;
  background-color: #f5f7fa;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tree-header {
  padding: 8px 12px; /* 进一步减小内边距 */
  border-bottom: 1px solid #ebeef5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
}

.tree-header h3 {
  margin: 0;
  font-size: 13px; /* 稍微减小字体 */
  font-weight: 600;
  color: #303133;
}

.btn-add-node {
  width: 24px;
  height: 24px;
  border: none;
  background-color: #409eff;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.btn-add-node:hover {
  background-color: #66b1ff;
}

.tree-content {
  flex: 1;
  overflow-y: auto; /* 允许树内容滚动 */
  padding: 6px 0; /* 减小内边距 */
}

.tree-node {
  cursor: pointer;
  transition: all 0.3s;
}

.tree-node-content {
  display: flex;
  align-items: center;
  padding: 8px 14px; /* 减小内边距 */
  gap: 8px;
  transition: all 0.3s;
  border-left: 3px solid transparent; /* 为根节点添加左侧边框 */
}

/* 根节点悬停效果 */
.tree-node > .tree-node-content:hover {
  background-color: #f0f9eb; /* 浅绿色背景 */
  border-left-color: #67c23a; /* 绿色边框 */
}

/* 根节点选中效果 */
.tree-node.selected > .tree-node-content {
  background-color: #f0f9eb;
  border-left-color: #67c23a;
}

/* 子节点悬停效果 */
.tree-children .tree-node-content:hover {
  background-color: #f5f7fa; /* 浅灰色背景 */
  border-left-color: #909399; /* 灰色边框 */
}

/* 子节点选中效果 */
.tree-children .tree-node.selected .tree-node-content {
  background-color: #f5f7fa;
  border-left-color: #909399;
}

.tree-expand {
  width: 20px; /* 增大三角形区域 */
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px; /* 增大三角形字体 */
  color: #606266;
  flex-shrink: 0;
  font-weight: 600; /* 加粗三角形 */
}

.tree-expand-placeholder {
  width: 16px;
  flex-shrink: 0;
}

.tree-node-label {
  font-size: 15px; /* 增大字体，方便阅读 */
  color: #303133; /* 根节点使用深色字体 */
  font-weight: 600; /* 根节点加粗显示 */
  text-align: left; /* 左对齐 */
  flex: 1;
}

/* 子节点样式 */
.tree-children .tree-node-label {
  font-size: 14px; /* 子节点字体稍小 */
  color: #606266; /* 子节点使用灰色字体 */
  font-weight: 400; /* 子节点正常粗细 */
  text-align: left; /* 左对齐 */
}

.tree-node-actions {
  display: flex;
  gap: 4px;
  opacity: 1;
  transition: opacity 0.3s;
}

/* 根节点的操作按钮始终显示 */
.tree-node > .tree-node-content:hover .tree-node-actions {
  opacity: 1;
}

.tree-node:hover .tree-node-actions {
  opacity: 1;
}

.btn-icon {
  width: 24px;
  height: 24px;
  border: none;
  background-color: #409eff;
  color: #fff;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  transition: all 0.3s;
}

.btn-icon:hover {
  background-color: #d86866;
  color: #fff;
}

.btn-icon.btn-delete {
  background-color: #f56c6c;
  color: #fff;
  font-size: 24px;
}

.btn-icon.btn-delete:hover {
  background-color: #f56c6c;
  color: #fff;
}

.btn-icon.btn-add-type {
  width: 24px;
  height: 24px;
  border: none;
  background-color: #409eff;
  color: #fff;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  transition: all 0.3s;
}

.btn-icon.btn-add-type:hover {
  background-color: #66b1ff;
}

.tree-children {
  padding-left: 20px;
}

.empty-tree {
  padding: 40px 16px;
  text-align: center;
  color: #909399;
  font-size: 13px;
}

/* ========== 右侧编辑区域 ========== */
.dictionary-editor {
  flex: 1;
  background-color: #fff;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.editor-header {
  padding: 8px 16px; /* 进一步减小内边距 */
  border-bottom: 1px solid #ebeef5;
  background-color: #f5f7fa;
}

.editor-header h3 {
  margin: 0;
  font-size: 13px; /* 稍微减小字体 */
  font-weight: 600;
  color: #303133;
}

.editor-content {
  flex: 1;
  overflow-y: hidden; /* 隐藏编辑器滚动条 */
  padding: 16px; /* 减小内边距 */
}

.empty-editor {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #909399;
  font-size: 14px;
}

.empty-editor p {
  margin: 0;
}

.editor-footer {
  padding: 8px 16px; /* 进一步减小内边距 */
  border-top: 1px solid #ebeef5;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background-color: #f5f7fa;
}

.btn-edit {
  padding: 8px 16px;
  font-size: 14px;
  border-radius: 4px;
  border: 1px solid #409eff;
  background-color: #fff;
  color: #409eff;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-edit:hover {
  background-color: #ecf5ff;
}



/* ========================================
   进度报表弹窗
   ======================================== */
.progress-report[data-v-e28c2ec0] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}
.report-modal-overlay[data-v-e28c2ec0] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
.report-modal-content[data-v-e28c2ec0] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;
  max-width: 1400px;
  height: 85vh;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 头部 */
.report-modal-header[data-v-e28c2ec0] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid #e8e8e8;
  flex-shrink: 0;
}
.report-modal-header h2[data-v-e28c2ec0] {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}
.report-modal-close[data-v-e28c2ec0] {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 24px;
  color: #999;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.report-modal-close[data-v-e28c2ec0]:hover {
  background: #f5f5f5;
  color: #333;
}

/* 主体 */
.report-modal-body[data-v-e28c2ec0] {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 16px 24px;
  gap: 16px;
}

/* ========================================
   筛选栏
   ======================================== */
.report-filter-bar[data-v-e28c2ec0] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e8e8e8;
  flex-shrink: 0;
}
.report-filter-item[data-v-e28c2ec0] {
  display: flex;
  align-items: center;
  gap: 6px;
}
.report-filter-item label[data-v-e28c2ec0] {
  font-size: 13px;
  color: #666;
  white-space: nowrap;
  min-width: 50px;
}
.report-filter-item select[data-v-e28c2ec0],
.report-filter-item input[data-v-e28c2ec0] {
  height: 32px;
  padding: 0 10px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  font-size: 13px;
  color: #333;
  background: #fff;
  outline: none;
  transition: border-color 0.2s;
}
.report-filter-item select[data-v-e28c2ec0] {
  min-width: 140px;
  cursor: pointer;
}
.report-filter-item input[data-v-e28c2ec0] {
  width: 130px;
}
.report-filter-item select[data-v-e28c2ec0]:focus,
.report-filter-item input[data-v-e28c2ec0]:focus {
  border-color: #4a90d9;
  box-shadow: 0 0 0 2px rgba(74, 144, 217, 0.1);
}
.report-filter-actions[data-v-e28c2ec0] {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.btn-report-search[data-v-e28c2ec0] {
  height: 32px;
  padding: 0 16px;
  background: #4a90d9;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-report-search[data-v-e28c2ec0]:hover {
  background: #357abd;
}
.btn-report-reset[data-v-e28c2ec0] {
  height: 32px;
  padding: 0 16px;
  background: #fff;
  color: #666;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-report-reset[data-v-e28c2ec0]:hover {
  border-color: #4a90d9;
  color: #4a90d9;
}
.btn-report-export[data-v-e28c2ec0] {
  height: 32px;
  padding: 0 16px;
  background: #52c41a;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-report-export[data-v-e28c2ec0]:hover {
  background: #45a817;
}

/* ========================================
   汇总统计栏
   ======================================== */
.report-summary[data-v-e28c2ec0] {
  display: flex;
  gap: 16px;
  padding: 10px 16px;
  background: #f0f7ff;
  border-radius: 8px;
  border: 1px solid #d6e8fa;
  flex-shrink: 0;
}
.summary-item[data-v-e28c2ec0] {
  display: flex;
  align-items: center;
  gap: 6px;
}
.summary-label[data-v-e28c2ec0] {
  font-size: 13px;
  color: #666;
}
.summary-value[data-v-e28c2ec0] {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}
.summary-value.completed[data-v-e28c2ec0] {
  color: #52c41a;
}
.summary-value.pending[data-v-e28c2ec0] {
  color: #fa8c16;
}
.summary-value.rate[data-v-e28c2ec0] {
  color: #4a90d9;
}

/* ========================================
   表格区域
   ======================================== */
.report-table-wrapper[data-v-e28c2ec0] {
  flex: 1;
  overflow: auto;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
}
.report-table[data-v-e28c2ec0] {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}
.report-table thead th[data-v-e28c2ec0] {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f5f7fa;
  color: #555;
  font-weight: 600;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #e8e8e8;
  white-space: nowrap;
}
.report-table td[data-v-e28c2ec0] {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.report-table tbody tr[data-v-e28c2ec0]:hover {
  background: #f5f9ff;
}
.report-table tbody tr:last-child td[data-v-e28c2ec0] {
  border-bottom: none;
}

/* 列宽 */
.report-table .col-index[data-v-e28c2ec0] { width: 50px;
}
.report-table .col-image[data-v-e28c2ec0] { width: 60px;
}
.report-table .col-style-no[data-v-e28c2ec0] { width: 120px;
}
.report-table .col-sample-no[data-v-e28c2ec0] { width: 100px;
}
.report-table .col-version[data-v-e28c2ec0] { width: 120px;
}
.report-table .col-create-date[data-v-e28c2ec0] { width: 120px;
}
.report-table .col-delivery-date[data-v-e28c2ec0] { width: 140px;
}
.report-table .col-progress[data-v-e28c2ec0] { width: 100px;
}
.report-table .col-process[data-v-e28c2ec0] { width: 100px;
}
.report-table .col-status[data-v-e28c2ec0] { width: 100px;
}

/* 交货日期圆角标签 */
.delivery-date-tag[data-v-e28c2ec0] {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

/* 表头 */
.report-table th.col-index[data-v-e28c2ec0] { color: #999;
}

/* 进度条 */
.progress-bar-cell[data-v-e28c2ec0] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.progress-bar-bg[data-v-e28c2ec0] {
  flex: 1;
  height: 6px;
  background: #e8e8e8;
  border-radius: 3px;
  overflow: hidden;
}
.progress-bar-fill[data-v-e28c2ec0] {
  height: 100%;
  background: #4a90d9;
  border-radius: 3px;
  transition: width 0.3s ease;
}
.progress-bar-fill.complete[data-v-e28c2ec0] {
  background: #52c41a;
}
.progress-bar-text[data-v-e28c2ec0] {
  font-size: 12px;
  color: #666;
  min-width: 36px;
  text-align: right;
}

/* 状态标签 */
.process-status-tag[data-v-e28c2ec0] {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.4;
}
.process-status-tag.not-started[data-v-e28c2ec0] {
  background: #f0f0f0;
  color: #999;
}
.process-status-tag.in-progress[data-v-e28c2ec0] {
  background: #e6f4ff;
  color: #1677ff;
}
.process-status-tag.completed[data-v-e28c2ec0] {
  background: #f0fdf4;
  color: #16a34a;
}

/* 分页 */
.report-pagination[data-v-e28c2ec0] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0 0;
  flex-shrink: 0;
}
.report-pagination-info[data-v-e28c2ec0] {
  font-size: 13px;
  color: #666;
}
.report-pagination-controls[data-v-e28c2ec0] {
  display: flex;
  align-items: center;
  gap: 4px;
}
.page-btn[data-v-e28c2ec0] {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid #d9d9d9;
  background: #fff;
  border-radius: 6px;
  font-size: 13px;
  color: #333;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-btn[data-v-e28c2ec0]:hover:not(:disabled) {
  border-color: #4a90d9;
  color: #4a90d9;
}
.page-btn[data-v-e28c2ec0]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.page-btn.active[data-v-e28c2ec0] {
  background: #4a90d9;
  border-color: #4a90d9;
  color: #fff;
}

/* 每页条数选择器 */
.page-size-select[data-v-e28c2ec0] {
  height: 28px;
  padding: 0 8px;
  margin-left: 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 13px;
  color: #333;
  background: #fff;
  cursor: pointer;
  outline: none;
  vertical-align: middle;
}
.page-size-select[data-v-e28c2ec0]:hover {
  border-color: #4a90d9;
}
.page-size-select[data-v-e28c2ec0]:focus {
  border-color: #4a90d9;
  box-shadow: 0 0 0 2px rgba(74, 144, 217, 0.1);
}

/* 空状态 */
.report-empty[data-v-e28c2ec0] {
  text-align: center;
  padding: 60px 20px;
  color: #999;
  font-size: 14px;
}

/* 加载中 */
.report-loading[data-v-e28c2ec0] {
  text-align: center;
  padding: 60px 20px;
  color: #666;
  font-size: 14px;
}

/* ========== 缩略图 ========== */
.report-thumb[data-v-e28c2ec0] {
  width: 25px;
  height: 25px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  cursor: pointer;
  vertical-align: middle;
  transition: transform 0.15s;
}
.report-thumb[data-v-e28c2ec0]:hover {
  transform: scale(1.5);
}
.no-thumb[data-v-e28c2ec0] {
  font-size: 12px;
  color: #c0c4cc;
}

/* 图片预览（悬停大图） */
.image-preview-tooltip[data-v-e28c2ec0] {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
}
.image-preview-large[data-v-e28c2ec0] {
  width: 280px;
  max-height: 280px;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* ========================================
   员工工作统计弹窗
   ======================================== */
.operator-work-stats[data-v-14d83ceb] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}
.report-modal-overlay[data-v-14d83ceb] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
.report-modal-content[data-v-14d83ceb] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;
  /* max-width: 1400px; */
  height: 90vh;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ========== 头部 ========== */
.report-modal-header[data-v-14d83ceb] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid #e8e8e8;
  flex-shrink: 0;
}
.report-modal-header h2[data-v-14d83ceb] {
  margin: 0;
  font-size: 18px;
  color: #303133;
}
.report-modal-close[data-v-14d83ceb] {
  border: none;
  background: none;
  font-size: 24px;
  color: #909399;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.report-modal-close[data-v-14d83ceb]:hover {
  color: #303133;
}

/* ========== 主体 ========== */
.report-modal-body[data-v-14d83ceb] {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 16px 24px;
}

/* ========== 筛选栏 ========== */
.report-filter-bar[data-v-14d83ceb] {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.report-filter-item[data-v-14d83ceb] {
  display: flex;
  align-items: center;
  gap: 6px;
}
.report-filter-item label[data-v-14d83ceb] {
  font-size: 13px;
  color: #606266;
  white-space: nowrap;
}
.report-filter-item input[data-v-14d83ceb] {
  height: 32px;
  width: 180px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 10px;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}
.report-filter-item input[data-v-14d83ceb]:focus {
  border-color: #409eff;
}
.report-filter-actions[data-v-14d83ceb] {
  display: flex;
  gap: 8px;
}

/* ========== 时间筛选控件 ========== */
.time-select[data-v-14d83ceb] {
  height: 32px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 8px;
  font-size: 13px;
  color: #606266;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s;
}
.time-select[data-v-14d83ceb]:focus {
  border-color: #409eff;
}
.time-date-input[data-v-14d83ceb] {
  height: 32px;
  width: 140px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 8px;
  font-size: 13px;
  color: #606266;
  outline: none;
  transition: border-color 0.2s;
}
.time-date-input[data-v-14d83ceb]:focus {
  border-color: #409eff;
}

/* ========== 按钮 ========== */
.btn-report-search[data-v-14d83ceb],
.btn-report-reset[data-v-14d83ceb],
.btn-report-export[data-v-14d83ceb] {
  height: 32px;
  padding: 0 16px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-report-search[data-v-14d83ceb] {
  background-color: #409eff;
  border-color: #409eff;
  color: #fff;
}
.btn-report-search[data-v-14d83ceb]:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}
.btn-report-reset[data-v-14d83ceb] {
  background: #fff;
  color: #606266;
}
.btn-report-reset[data-v-14d83ceb]:hover {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}
.btn-report-export[data-v-14d83ceb] {
  color: #67c23a;
  border-color: #b3e19d;
  background: #fff;
}
.btn-report-export[data-v-14d83ceb]:hover {
  background-color: #67c23a;
  border-color: #67c23a;
  color: #fff;
}

/* ========== 表格区域：横向3列 ========== */
.stats-tables-row[data-v-14d83ceb] {
  display: flex;
  gap: 12px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.stats-table-col[data-v-14d83ceb] {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* 综合统计列占更大宽度 */
.stats-table-col[data-v-14d83ceb]:nth-child(1) {
  flex: 1.3;
}

/* 待处理、已完成列占更小宽度 */
.stats-table-col[data-v-14d83ceb]:nth-child(2),
.stats-table-col[data-v-14d83ceb]:nth-child(3) {
  flex: 0.85;
}
.stats-col-title[data-v-14d83ceb] {
  margin: 0 0 8px 0;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  background-color: #f5f7fa;
  border-radius: 4px 4px 0 0;
  border-left: 3px solid #409eff;
  text-align: center;
  flex-shrink: 0;
}

/* 待处理：橙色 */
.stats-table-col:nth-child(2) .stats-col-title[data-v-14d83ceb] {
  border-left-color: #e6a23c;
}

/* 已完成：绿色 */
.stats-table-col:nth-child(3) .stats-col-title[data-v-14d83ceb] {
  border-left-color: #67c23a;
}
.stats-table-wrapper[data-v-14d83ceb] {
  flex: 1;
  overflow-x: auto;
  overflow-y: auto;
}
.stats-table[data-v-14d83ceb] {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}
.stats-table th[data-v-14d83ceb],
.stats-table td[data-v-14d83ceb] {
  padding: 10px 8px;
  text-align: center;
  border-bottom: 1px solid #ebeef5;
  word-break: break-all;
}
.stats-table th[data-v-14d83ceb] {
  background-color: #fafafa;
  color: #909399;
  font-weight: 500;
  position: sticky;
  top: 0;
  z-index: 1;
}
.stats-table tbody tr[data-v-14d83ceb]:hover {
  background-color: #f5f7fa;
}
.stats-table tbody tr.row-selected[data-v-14d83ceb] {
  background-color: #d9ecff;
}
.stats-table tbody tr.row-selected[data-v-14d83ceb]:hover {
  background-color: #c6e2ff;
}

/* ========== 排序表头 ========== */
.stats-table th.sortable[data-v-14d83ceb] {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;
}
.stats-table th.sortable[data-v-14d83ceb]:hover {
  color: #409eff;
}
.sort-icon[data-v-14d83ceb] {
  font-size: 11px;
  margin-left: 2px;
  color: #c0c4cc;
}
.sort-icon.active[data-v-14d83ceb] {
  color: #409eff;
}
.sort-priority[data-v-14d83ceb] {
  font-size: 9px;
  color: #fff;
  background-color: #409eff;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
  line-height: 1;
  vertical-align: super;
}
.col-index[data-v-14d83ceb] { width: 35px;
}
.col-userid[data-v-14d83ceb] { width: 100px;
}
.col-name[data-v-14d83ceb] { width: 150px; text-align: left !important; font-weight: 500;
}
.col-process[data-v-14d83ceb] { text-align: center;
}
.col-count[data-v-14d83ceb] { width: 80px;
}

/* ========== 工作标签 ========== */
.work-tags[data-v-14d83ceb] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.work-tag[data-v-14d83ceb] {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 12px;
  white-space: nowrap;
}
.work-tag.completed[data-v-14d83ceb] {
  background-color: #e1f3d8;
  color: #67c23a;
  border: 1px solid #c2e7b0;
}
.work-tag.pending[data-v-14d83ceb] {
  background-color: #fdf6ec;
  color: #e6a23c;
  border: 1px solid #f5dab1;
}
.no-data-tag[data-v-14d83ceb] {
  color: #c0c4cc;
  font-size: 12px;
}

/* 合计徽章 */
.count-badge[data-v-14d83ceb] {
  display: inline-block;
  min-width: 32px;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
}
.count-badge.completed[data-v-14d83ceb] {
  background-color: #67c23a;
  color: #fff;
}
.count-badge.pending[data-v-14d83ceb] {
  background-color: #e6a23c;
  color: #fff;
}

/* ========== 空状态 & 加载 ========== */
.report-empty[data-v-14d83ceb] {
  text-align: center;
  color: #909399;
  padding: 40px 0;
}
.report-loading[data-v-14d83ceb] {
  text-align: center;
  padding: 60px 20px;
  color: #666;
  font-size: 14px;
}

/* 操作日志页面样式 */
.operation-log[data-v-92c746ec] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}
.log-modal-overlay[data-v-92c746ec] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.log-modal-content[data-v-92c746ec] {
  position: relative;
  width: 95%;
  /* max-width: 1400px; */
  height: 93%;
  margin: 3vh auto;
  background: #fff;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* 头部 */
.log-modal-header[data-v-92c746ec] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 56px;
  min-height: 56px;
  border-bottom: 1px solid #ebeef5;
}
.log-modal-header h2[data-v-92c746ec] {
  margin: 0;
  font-size: 18px;
  color: #303133;
}
.log-modal-close[data-v-92c746ec] {
  background: none;
  border: none;
  font-size: 24px;
  color: #909399;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  border-radius: 4px;
  transition: all 0.2s;
}
.log-modal-close[data-v-92c746ec]:hover {
  background-color: #f5f7fa;
  color: #303133;
}

/* 主体 */
.log-modal-body[data-v-92c746ec] {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 8px 18px;
}

/* 筛选栏 */
.log-filter-bar[data-v-92c746ec] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 5px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 16px;
}
.log-filter-item[data-v-92c746ec] {
  display: flex;
  align-items: center;
  gap: 6px;
}
.log-filter-item label[data-v-92c746ec] {
  font-size: 14px;
  color: #606266;
  white-space: nowrap;
}
.log-filter-item input[data-v-92c746ec],
.log-filter-item select[data-v-92c746ec] {
  padding: 6px 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  color: #303133;
  outline: none;
  transition: border-color 0.2s;
}
.log-filter-item input[data-v-92c746ec]:focus,
.log-filter-item select[data-v-92c746ec]:focus {
  border-color: #1890ff;
}
.log-filter-item input[data-v-92c746ec] {
  width: 140px;
}
.log-filter-item select[data-v-92c746ec] {
  width: 130px;
}
.log-filter-actions[data-v-92c746ec] {
  display: flex;
  gap: 8px;
}
.btn-log-search[data-v-92c746ec],
.btn-log-reset[data-v-92c746ec] {
  padding: 6px 20px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-log-search[data-v-92c746ec] {
  background-color: #1890ff;
  color: #fff;
}
.btn-log-search[data-v-92c746ec]:hover {
  background-color: #40a9ff;
}
.btn-log-reset[data-v-92c746ec] {
  background-color: #f5f7fa;
  color: #606266;
  border: 1px solid #dcdfe6;
}
.btn-log-reset[data-v-92c746ec]:hover {
  color: #1890ff;
  border-color: #1890ff;
}

/* 表格 */
.log-table-wrapper[data-v-92c746ec] {
  flex: 1;
  overflow: auto;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}
.log-loading[data-v-92c746ec] {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #909399;
  font-size: 14px;
}
.log-table[data-v-92c746ec] {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.log-table thead[data-v-92c746ec] {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #f5f7fa;
}
.log-table th[data-v-92c746ec] {
  padding: 10px 12px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  border-bottom: 1px solid #ebeef5;
  white-space: nowrap;
}
.log-table td[data-v-92c746ec] {
  padding: 8px 12px;
  font-size: 13px;
  color: #606266;
  border-bottom: 1px solid #f0f0f0;
  text-align: center;
  word-break: break-all;
}
.log-table tbody tr[data-v-92c746ec]:hover {
  background-color: #f5f7fa;
}
.log-empty[data-v-92c746ec] {
  text-align: center;
  color: #c0c4cc;
  padding: 40px 0;
  font-size: 14px;
}

/* 列宽 */
.log-table .col-index[data-v-92c746ec] { width: 35px;
}
.log-table .col-user[data-v-92c746ec] { width: 80px;
}
.log-table .col-module[data-v-92c746ec] { width: 80px;
}
.log-table .col-type[data-v-92c746ec] { width: 80px;
}
.log-table .col-time[data-v-92c746ec] { width: 100px;
}
.log-table .col-ip[data-v-92c746ec] { width: 100px;
}
.log-table .col-keyword[data-v-92c746ec] {
  width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: help;
}
.log-table .col-desc[data-v-92c746ec] {
  width: auto;
}
.log-table .col-remark[data-v-92c746ec] {
  width: 450px;
}

/* 单元格内文本+复制图标布局 */
.log-table td.col-desc[data-v-92c746ec], .log-table td.col-remark[data-v-92c746ec] {
  position: relative;
  padding-right: 24px;
}
.log-table td.col-desc .cell-text[data-v-92c746ec], .log-table td.col-remark .cell-text[data-v-92c746ec] {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.copy-icon[data-v-92c746ec] {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 14px;
  color: #c0c4cc;
  transition: color 0.2s;
}
.copy-icon[data-v-92c746ec]:hover {
  color: #f56c6c;
}

/* 操作类型标签 */
.type-tag[data-v-92c746ec] {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
}
.type-tag.type-insert[data-v-92c746ec] {
  background-color: #e1f3d8;
  color: #67c23a;
}
.type-tag.type-update[data-v-92c746ec] {
  background-color: #ecf5ff;
  color: #1890ff;
}
.type-tag.type-delete[data-v-92c746ec] {
  background-color: #fde2e2;
  color: #f56c6c;
}

/* 分页 */
.pagination-footer[data-v-92c746ec] {
  flex-shrink: 0;
  border-top: 1px solid #ebeef5;
  background-color: #fff;
}
.pagination[data-v-92c746ec] {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  background-color: #fff;
  padding: 4px 15px;
}

/* 每页显示条数选择器 */
.page-size-selector[data-v-92c746ec] {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #606266;
  font-size: 13px;
}
.page-size-select[data-v-92c746ec] {
  padding: 3px 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
  color: #606266;
  outline: none;
  cursor: pointer;
  transition: border-color 0.3s;
}
.page-size-select[data-v-92c746ec]:focus {
  border-color: #1890ff;
}

/* 页码跳转器 */
.page-jumper[data-v-92c746ec] {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #606266;
  font-size: 13px;
}
.pagination button[data-v-92c746ec] {
  background-color: #1890ff;
  color: white;
  border: none;
  padding: 4px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: background-color 0.3s;
}
.pagination button[data-v-92c746ec]:hover:not(:disabled) {
  background-color: #40a9ff;
}
.pagination button[data-v-92c746ec]:disabled {
  background-color: #c0c4cc;
  cursor: not-allowed;
}
.page-info[data-v-92c746ec] {
  color: #606266;
  font-size: 13px;
}
.page-input[data-v-92c746ec] {
  width: 50px;
  padding: 3px 6px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  text-align: center;
  font-size: 13px;
  color: #606266;
  outline: none;
}
.page-input[data-v-92c746ec]:focus {
  border-color: #1890ff;
}
.jump-btn[data-v-92c746ec] {
  background-color: #1890ff;
  color: white;
  border: none;
  padding: 3px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: background-color 0.3s;
}
.jump-btn[data-v-92c746ec]:hover {
  background-color: #40a9ff;
}
.page-total[data-v-92c746ec] {
  color: #909399;
  font-size: 13px;
  font-style: italic;
}


.message-center-overlay[data-v-1637213d] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: mcFadeIn-1637213d 0.2s ease;
}
@keyframes mcFadeIn-1637213d {
from { opacity: 0;
}
to { opacity: 1;
}
}
.message-center-modal[data-v-1637213d] {
  width: 680px;
  max-width: 92vw;
  max-height: 80vh;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: mcSlideUp-1637213d 0.25s ease;
}
@keyframes mcSlideUp-1637213d {
from { opacity: 0; transform: translateY(20px);
}
to { opacity: 1; transform: translateY(0);
}
}

/* 头部 */
.mc-header[data-v-1637213d] {
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.mc-title-row[data-v-1637213d] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px 8px;
}
.mc-title[data-v-1637213d] {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
}
.mc-close[data-v-1637213d] {
  font-size: 22px;
  color: #8c8c8c;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s;
  line-height: 1;
}
.mc-close[data-v-1637213d]:hover {
  background: #f5f5f5;
  color: #333;
}

/* 视图切换 */
.mc-view-switch[data-v-1637213d] {
  display: flex;
  gap: 0;
  padding: 0 24px 8px;
}
.view-btn[data-v-1637213d] {
  padding: 6px 16px;
  font-size: 13px;
  color: #8c8c8c;
  cursor: pointer;
  border-radius: 16px;
  transition: all 0.2s;
}
.view-btn[data-v-1637213d]:hover {
  color: #1890ff;
  background: #e6f7ff;
}
.view-btn.active[data-v-1637213d] {
  color: #fff;
  background: #1890ff;
}

/* 分类标签 */
.mc-tabs[data-v-1637213d] {
  display: flex;
  gap: 0;
  padding: 0 24px;
}
.mc-tab[data-v-1637213d] {
  padding: 10px 20px;
  font-size: 14px;
  color: #8c8c8c;
  cursor: pointer;
  position: relative;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  gap: 4px;
}
.mc-tab[data-v-1637213d]:hover {
  color: #1890ff;
}
.mc-tab.active[data-v-1637213d] {
  color: #1890ff;
  font-weight: 500;
}
.mc-tab.active[data-v-1637213d]::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 20px;
  height: 2px;
  background: #1890ff;
  border-radius: 1px;
}
.mc-tab-badge[data-v-1637213d] {
  background: #f56c6c;
  color: #fff;
  font-size: 10px;
  padding: 0 5px;
  border-radius: 8px;
  min-width: 16px;
  text-align: center;
  line-height: 16px;
}

/* 操作栏 */
.mc-toolbar[data-v-1637213d] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  background: #fafafa;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.mc-toolbar-info[data-v-1637213d] {
  font-size: 13px;
  color: #8c8c8c;
}
.mc-toolbar-action[data-v-1637213d] {
  font-size: 13px;
  color: #1890ff;
  cursor: pointer;
  transition: color 0.2s;
}
.mc-toolbar-action[data-v-1637213d]:hover {
  color: #40a9ff;
}

/* 消息列表 */
.mc-body[data-v-1637213d] {
  flex: 1;
  overflow-y: auto;
  min-height: 200px;
}
.mc-body[data-v-1637213d]::-webkit-scrollbar {
  width: 5px;
}
.mc-body[data-v-1637213d]::-webkit-scrollbar-thumb {
  background: #d9d9d9;
  border-radius: 3px;
}
.mc-state[data-v-1637213d] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  color: #bfbfbf;
  font-size: 14px;
  gap: 12px;
}
.mc-spinner[data-v-1637213d] {
  width: 28px;
  height: 28px;
  animation: mcSpin-1637213d 1s linear infinite;
  color: #1890ff;
}
@keyframes mcSpin-1637213d {
from { transform: rotate(0deg);
}
to { transform: rotate(360deg);
}
}
.mc-empty-icon[data-v-1637213d] {
  width: 48px;
  height: 48px;
  opacity: 0.4;
}

/* 消息条目 */
.mc-list[data-v-1637213d] {
  padding: 4px 0;
}
.mc-item[data-v-1637213d] {
  display: flex;
  gap: 14px;
  padding: 16px 24px;
  cursor: pointer;
  transition: background-color 0.2s;
  border-bottom: 1px solid #fafafa;
  align-items: flex-start;
}
.mc-item[data-v-1637213d]:last-child {
  border-bottom: none;
}
.mc-item[data-v-1637213d]:hover {
  background-color: #f5f7fa;
}
.mc-item.unread[data-v-1637213d] {
  background-color: #f0f7ff;
}
.mc-item.unread[data-v-1637213d]:hover {
  background-color: #e6f1fc;
}
.mc-item-icon[data-v-1637213d] {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.mc-item-icon svg[data-v-1637213d] {
  width: 20px;
  height: 20px;
}
.mc-item-icon.system[data-v-1637213d] { background: #e6f7ff; color: #1890ff;
}
.mc-item-icon.business[data-v-1637213d] { background: #f6ffed; color: #52c41a;
}
.mc-item-body[data-v-1637213d] {
  flex: 1;
  min-width: 0;
}
.mc-item-top[data-v-1637213d] {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.mc-item-title[data-v-1637213d] {
  font-size: 14px;
  font-weight: 500;
  color: #262626;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.mc-item-source[data-v-1637213d] {
  font-size: 12px;
  color: #1890ff;
  background: #e6f7ff;
  padding: 1px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}
.mc-item-time[data-v-1637213d] {
  font-size: 12px;
  color: #bfbfbf;
  flex-shrink: 0;
  margin-left: auto;
}
.mc-item-content[data-v-1637213d] {
  font-size: 13px;
  color: #8c8c8c;
  line-height: 1.6;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.mc-item-actions[data-v-1637213d] {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.2s;
}
.mc-item:hover .mc-item-actions[data-v-1637213d] {
  opacity: 1;
}
.mc-btn[data-v-1637213d] {
  padding: 4px 12px;
  border: 1px solid #1890ff;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  background: #fff;
  color: #1890ff;
  transition: all 0.2s;
  white-space: nowrap;
}
.mc-btn[data-v-1637213d]:hover {
  background: #1890ff;
  color: #fff;
}

/* 底部 */
.mc-footer[data-v-1637213d] {
  padding: 14px 24px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}
.mc-footer-btn[data-v-1637213d] {
  padding: 8px 24px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  background: #fff;
  color: #606266;
  transition: all 0.2s;
}
.mc-footer-btn[data-v-1637213d]:hover {
  border-color: #1890ff;
  color: #1890ff;
}


.message-notification[data-v-17d71444] {
  position: relative;
}
.message-btn[data-v-17d71444] {
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  padding: 8px;
  border-radius: 50%;
  transition: background-color 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #606266;
}
.message-btn[data-v-17d71444]:hover {
  background-color: #f5f7fa;
  color: #1890ff;
}
.bell-icon[data-v-17d71444] {
  width: 22px;
  height: 22px;
}
.message-badge[data-v-17d71444] {
  position: absolute;
  top: 2px;
  right: 2px;
  background-color: #f56c6c;
  color: white;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 10px;
  min-width: 16px;
  text-align: center;
  line-height: 16px;
  font-weight: 500;
}

/* 下拉面板 */
.notification-panel[data-v-17d71444] {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 380px;
  max-height: 520px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: panelSlideDown-17d71444 0.25s ease;
}
@keyframes panelSlideDown-17d71444 {
from { opacity: 0; transform: translateY(-8px);
}
to { opacity: 1; transform: translateY(0);
}
}

/* 面板头部 */
.panel-header[data-v-17d71444] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid #f0f0f0;
}
.panel-title[data-v-17d71444] {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
}
.mark-all-read[data-v-17d71444] {
  font-size: 13px;
  color: #1890ff;
  cursor: pointer;
  transition: color 0.2s;
}
.mark-all-read[data-v-17d71444]:hover {
  color: #40a9ff;
}

/* 分类标签 */
.panel-tabs[data-v-17d71444] {
  display: flex;
  gap: 0;
  padding: 0 18px;
  border-bottom: 1px solid #f0f0f0;
}
.tab-item[data-v-17d71444] {
  padding: 10px 16px;
  font-size: 13px;
  color: #8c8c8c;
  cursor: pointer;
  position: relative;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  gap: 4px;
}
.tab-item[data-v-17d71444]:hover {
  color: #1890ff;
}
.tab-item.active[data-v-17d71444] {
  color: #1890ff;
  font-weight: 500;
}
.tab-item.active[data-v-17d71444]::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 2px;
  background: #1890ff;
  border-radius: 1px;
}
.tab-badge[data-v-17d71444] {
  background: #f56c6c;
  color: #fff;
  font-size: 10px;
  padding: 0 5px;
  border-radius: 8px;
  min-width: 16px;
  text-align: center;
  line-height: 16px;
  font-weight: 500;
}

/* 消息列表区域 */
.panel-body[data-v-17d71444] {
  flex: 1;
  overflow-y: auto;
  max-height: 340px;
}
.panel-body[data-v-17d71444]::-webkit-scrollbar {
  width: 4px;
}
.panel-body[data-v-17d71444]::-webkit-scrollbar-thumb {
  background: #d9d9d9;
  border-radius: 2px;
}

/* 加载状态 */
.panel-loading[data-v-17d71444] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  color: #8c8c8c;
  font-size: 13px;
  gap: 10px;
}
.loading-spinner[data-v-17d71444] {
  width: 24px;
  height: 24px;
  animation: spin-17d71444 1s linear infinite;
  color: #1890ff;
}
@keyframes spin-17d71444 {
from { transform: rotate(0deg);
}
to { transform: rotate(360deg);
}
}

/* 空状态 */
.panel-empty[data-v-17d71444] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 0;
  color: #bfbfbf;
  font-size: 13px;
  gap: 10px;
}
.empty-icon[data-v-17d71444] {
  width: 40px;
  height: 40px;
  opacity: 0.5;
}

/* 消息条目 */
.message-list[data-v-17d71444] {
  padding: 4px 0;
}
.message-item[data-v-17d71444] {
  display: flex;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  transition: background-color 0.2s;
  border-bottom: 1px solid #fafafa;
}
.message-item[data-v-17d71444]:last-child {
  border-bottom: none;
}
.message-item[data-v-17d71444]:hover {
  background-color: #f5f7fa;
}
.message-item.unread[data-v-17d71444] {
  background-color: #f0f7ff;
}
.message-item.unread[data-v-17d71444]:hover {
  background-color: #e6f1fc;
}

/* 消息图标 */
.msg-icon[data-v-17d71444] {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.msg-icon svg[data-v-17d71444] {
  width: 18px;
  height: 18px;
}
.msg-icon.system[data-v-17d71444] {
  background: #e6f7ff;
  color: #1890ff;
}
.msg-icon.business[data-v-17d71444] {
  background: #f6ffed;
  color: #52c41a;
}

/* 消息内容 */
.msg-content[data-v-17d71444] {
  flex: 1;
  min-width: 0;
}
.msg-title[data-v-17d71444] {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.title-text[data-v-17d71444] {
  font-size: 14px;
  font-weight: 500;
  color: #262626;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.unread-dot[data-v-17d71444] {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f56c6c;
  flex-shrink: 0;
}
.msg-desc[data-v-17d71444] {
  font-size: 13px;
  color: #8c8c8c;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 4px;
}
.msg-time[data-v-17d71444] {
  font-size: 12px;
  color: #bfbfbf;
}

/* 面板底部 */
.panel-footer[data-v-17d71444] {
  padding: 12px 18px;
  border-top: 1px solid #f0f0f0;
  text-align: center;
}
.view-all[data-v-17d71444] {
  font-size: 13px;
  color: #1890ff;
  cursor: pointer;
  transition: color 0.2s;
}
.view-all[data-v-17d71444]:hover {
  color: #40a9ff;
}

/* 过渡动画 */
.notification-fade-enter-active[data-v-17d71444],
.notification-fade-leave-active[data-v-17d71444] {
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.notification-fade-enter-from[data-v-17d71444],
.notification-fade-leave-to[data-v-17d71444] {
  opacity: 0;
  transform: translateY(-8px);
}

/* ==================== 新消息右下角弹出 ==================== */
.msg-toast-container[data-v-17d71444] {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9998;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  pointer-events: none;
}
.msg-toast-container .msg-toast[data-v-17d71444] {
  pointer-events: auto;
}
.msg-toast[data-v-17d71444] {
  position: relative;
  width: 320px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: flex-start;
  padding: 14px 16px;
  gap: 12px;
  overflow: hidden;
  border-left: 4px solid #1890ff;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.35s, opacity 0.35s;
}
.msg-toast[data-v-17d71444]:hover {
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.msg-toast-icon[data-v-17d71444] {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.msg-toast-icon svg[data-v-17d71444] {
  width: 20px;
  height: 20px;
}
.msg-toast-icon.system[data-v-17d71444] {
  background: #e6f7ff;
  color: #1890ff;
}
.msg-toast-icon.business[data-v-17d71444] {
  background: #f6ffed;
  color: #52c41a;
}
.msg-toast-content[data-v-17d71444] {
  flex: 1;
  min-width: 0;
}
.msg-toast-title[data-v-17d71444] {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-toast-desc[data-v-17d71444] {
  margin: 0;
  font-size: 13px;
  color: #606266;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.msg-toast-close[data-v-17d71444] {
  background: transparent;
  border: none;
  color: #c0c4cc;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  transition: all 0.2s;
}
.msg-toast-close[data-v-17d71444]:hover {
  background: #f5f7fa;
  color: #909399;
}
.msg-toast-progress[data-v-17d71444] {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, #1890ff, #52c41a);
  animation: msgToastProgress-17d71444 5s linear forwards;
}
@keyframes msgToastProgress-17d71444 {
from { width: 100%;
}
to { width: 0%;
}
}

/* 滑入滑出动画（支持多条） */
.msg-toast-slide-enter-active[data-v-17d71444],
.msg-toast-slide-leave-active[data-v-17d71444] {
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.msg-toast-slide-enter-from[data-v-17d71444] {
  transform: translateX(120%);
  opacity: 0;
}
.msg-toast-slide-leave-to[data-v-17d71444] {
  transform: translateX(120%);
  opacity: 0;
}
.msg-toast-slide-move[data-v-17d71444] {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}


.top-nav-header[data-v-3f3b10f8] {
  flex-shrink: 0;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid #e8e8e8;
  position: sticky;
  top: 0;
  z-index: 100;
}
.top-navigation[data-v-3f3b10f8] {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 20px;
  background: transparent;
}
.nav-brand[data-v-3f3b10f8] {
  color: #333;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  margin-right: 30px;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-brand .company-name[data-v-3f3b10f8] {
  margin-right: 10px;
}
.nav-brand .project-name[data-v-3f3b10f8] {
  color: #666;
  font-size: 14px;
  font-weight: normal;
}
.nav-menu[data-v-3f3b10f8] {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
  flex: 1;
}
.nav-item[data-v-3f3b10f8] {
  margin: 0;
}
.nav-link[data-v-3f3b10f8] {
  display: block;
  padding: 0 20px;
  color: #666;
  text-decoration: none;
  font-size: 14px;
  line-height: 50px;
  height: 50px;
  transition: all 0.3s ease;
  cursor: pointer;
}
.nav-link[data-v-3f3b10f8]:hover {
  color: #1890ff;
  background-color: #f5f5f5;
}
.nav-link.router-link-exact-active[data-v-3f3b10f8] {
  color: #1890ff;
  background-color: #f5f5f5;
}
.dropdown-arrow[data-v-3f3b10f8] {
  width: 12px;
  height: 12px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 4px;
  transition: transform 0.3s ease;
}
.nav-item.dropdown:hover .dropdown-arrow[data-v-3f3b10f8] {
  transform: rotate(180deg);
}
.dropdown-submenu[data-v-3f3b10f8] {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  min-width: 180px;
  z-index: 1000;
  overflow: hidden;
  padding: 8px 0;
  margin-top: 0;
}
.submenu-item[data-v-3f3b10f8] {
  padding: 12px 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #606266;
  font-size: 14px;
  white-space: nowrap;
}
.submenu-item[data-v-3f3b10f8]:hover {
  background-color: #f5f7fa;
  color: #1890ff;
}
.nav-item.dropdown[data-v-3f3b10f8] {
  position: relative;
}
.nav-right-section[data-v-3f3b10f8] {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-left: 20px;
}
.avatar-dropdown[data-v-3f3b10f8] {
  position: relative;
}
.avatar[data-v-3f3b10f8] {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid #e0e0e0;
  transition: border-color 0.3s ease;
}
.avatar[data-v-3f3b10f8]:hover {
  border-color: #409eff;
}
.avatar img[data-v-3f3b10f8] {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.dropdown-menu[data-v-3f3b10f8] {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  min-width: 180px;
  z-index: 1000;
  overflow: hidden;
}
.dropdown-item[data-v-3f3b10f8] {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  color: #606266;
  font-size: 14px;
  white-space: nowrap;
}
.dropdown-item[data-v-3f3b10f8]:hover {
  background-color: #f5f7fa;
}
.dropdown-item.copy-feedback[data-v-3f3b10f8] {
  color: #52c41a;
}
.dropdown-icon[data-v-3f3b10f8] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.dropdown-item.dropdown-company[data-v-3f3b10f8] {
  background-color: #f8f9fa;
  border-bottom: 1px solid #e8e8e8;
  cursor: default;
}
.dropdown-item.dropdown-company[data-v-3f3b10f8]:hover {
  background-color: #f8f9fa;
}
.dropdown-item.dropdown-info-item[data-v-3f3b10f8] {
  cursor: default;
  color: #909399;
  font-size: 13px;
  padding: 8px 16px;
}
.dropdown-item.dropdown-info-item[data-v-3f3b10f8]:hover {
  background-color: transparent;
}
.dropdown-item.dropdown-info-item.expire-warning[data-v-3f3b10f8] {
  color: #fa8c16;
}
.dropdown-item.dropdown-info-item.expire-danger[data-v-3f3b10f8] {
  color: #f5222d;
  font-weight: 600;
}
.dropdown-divider[data-v-3f3b10f8] {
  height: 1px;
  background-color: #e0e0e0;
  margin: 0;
}
.dropdown-item.recharge-item[data-v-3f3b10f8] {
  color: #fa8c16;
  font-weight: 500;
}
.dropdown-item.recharge-item[data-v-3f3b10f8]:hover {
  background-color: #fff7e6;
  color: #d46b08;
}


.expire-dialog-overlay[data-v-190a4749] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn-190a4749 0.2s ease;
}
@keyframes fadeIn-190a4749 {
from { opacity: 0;
}
to { opacity: 1;
}
}
.expire-dialog[data-v-190a4749] {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  width: 90%;
  max-width: 380px;
  animation: slideDown-190a4749 0.3s ease;
  overflow: hidden;
}
@keyframes slideDown-190a4749 {
from {
    opacity: 0;
    transform: translateY(-30px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/* 标题栏 */
.dialog-header[data-v-190a4749] {
  background: linear-gradient(135deg, #fff7e6, #fff1f0);
  border-bottom: 1px solid #ffe7d0;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}
.dialog-header.header-expired[data-v-190a4749] {
  background: linear-gradient(135deg, #fff1f0, #ffe0e0);
  border-bottom-color: #ffccc7;
}
.header-icon[data-v-190a4749] {
  width: 30px;
  height: 30px;
  background: #fa8c16;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}
.header-icon.icon-expired[data-v-190a4749] {
  background: #f5222d;
}
.header-icon svg[data-v-190a4749] {
  width: 17px;
  height: 17px;
}
.dialog-title[data-v-190a4749] {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  flex: 1;
}
.close-btn[data-v-190a4749] {
  background: transparent;
  border: none;
  color: #909399;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  line-height: 1;
}
.close-btn[data-v-190a4749]:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #606266;
  transform: rotate(90deg);
}

/* 内容区 */
.dialog-body[data-v-190a4749] {
  padding: 20px 24px;
  background: white;
  text-align: center;
}
.message[data-v-190a4749] {
  margin: 0 0 6px 0;
  font-size: 14px;
  color: #303133;
  line-height: 1.6;
}
.subtitle[data-v-190a4749] {
  margin: 0 0 16px 0;
  font-size: 13px;
  color: #f5222d;
  line-height: 1.5;
  font-weight: 600;
}

/* 二维码区域 */
.qrcode-section[data-v-190a4749] {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 12px;
}
.qrcode-img[data-v-190a4749] {
  width: 180px;
  height: 180px;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 8px;
  border: 1px solid #ebeef5;
}
.qrcode-placeholder[data-v-190a4749] {
  width: 180px;
  height: 180px;
  background: #f5f7fa;
  border: 2px dashed #dcdfe6;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #c0c4cc;
}
.placeholder-icon[data-v-190a4749] {
  width: 48px;
  height: 48px;
}
.placeholder-text[data-v-190a4749] {
  font-size: 13px;
  color: #909399;
}
.qrcode-tip[data-v-190a4749] {
  margin: 12px 0 0 0;
  font-size: 13px;
  color: #606266;
}

/* 按钮区 */
.dialog-footer[data-v-190a4749] {
  padding: 0 24px 20px;
  display: flex;
  justify-content: center;
  background: white;
}
.btn[data-v-190a4749] {
  padding: 9px 36px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-ok[data-v-190a4749] {
  background: #1890ff;
  color: white;
}
.btn-ok[data-v-190a4749]:hover {
  background: #40a9ff;
}
.btn-ok[data-v-190a4749]:active {
  background: #096dd9;
}


.expire-toast[data-v-c96f63cc] {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 340px;
  background: linear-gradient(135deg, #fff3e0, #ffe0b2);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(250, 140, 22, 0.35), 0 0 0 1px rgba(250, 140, 22, 0.2);
  display: flex;
  align-items: flex-start;
  padding: 16px 18px;
  gap: 12px;
  z-index: 9998;
  overflow: hidden;
  border-left: 5px solid #fa541c;
  animation: pulseGlow-c96f63cc 2s ease-in-out infinite;
}
@keyframes pulseGlow-c96f63cc {
0%, 100% {
    box-shadow: 0 8px 28px rgba(250, 84, 28, 0.35), 0 0 0 1px rgba(250, 140, 22, 0.2);
}
50% {
    box-shadow: 0 8px 36px rgba(250, 84, 28, 0.5), 0 0 0 1px rgba(250, 84, 28, 0.3);
}
}
.toast-icon[data-v-c96f63cc] {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #fa8c16, #fa541c);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
  margin-top: 1px;
  box-shadow: 0 3px 10px rgba(250, 84, 28, 0.4);
}
.toast-icon svg[data-v-c96f63cc] {
  width: 20px;
  height: 20px;
}
.toast-content[data-v-c96f63cc] {
  flex: 1;
  min-width: 0;
}
.toast-title[data-v-c96f63cc] {
  margin: 0 0 4px 0;
  font-size: 15px;
  font-weight: 700;
  color: #d4380d;
}
.toast-message[data-v-c96f63cc] {
  margin: 0;
  font-size: 13px;
  color: #874d00;
  line-height: 1.5;
}
.toast-subtitle[data-v-c96f63cc] {
  margin: 6px 0 0 0;
  font-size: 13px;
  color: #fa541c;
  font-weight: 700;
}
.toast-close[data-v-c96f63cc] {
  background: transparent;
  border: none;
  color: #c0c4cc;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  transition: all 0.2s;
}
.toast-close[data-v-c96f63cc]:hover {
  background: #f5f7fa;
  color: #909399;
}
.toast-progress[data-v-c96f63cc] {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, #fa541c, #ff7a45);
  animation: progressShrink-c96f63cc 5s linear forwards;
}
@keyframes progressShrink-c96f63cc {
from { width: 100%;
}
to { width: 0%;
}
}
.toast-slide-enter-active[data-v-c96f63cc] {
  transition: all 0.3s ease;
}
.toast-slide-leave-active[data-v-c96f63cc] {
  transition: all 0.3s ease;
}
.toast-slide-enter-from[data-v-c96f63cc] {
  transform: translateX(100%);
  opacity: 0;
}
.toast-slide-leave-to[data-v-c96f63cc] {
  transform: translateX(100%);
  opacity: 0;
}

.home-container[data-v-ff30c4ce] {
  min-height: 100vh;
  background-color: #f5f7fa;
}
.main-content[data-v-ff30c4ce] {
  max-width: 100%;
  margin: 10px 15px;
  padding: 0;
}
.projects-section[data-v-ff30c4ce] {
  margin-bottom: 20px;
}

/* 项目分组 */
.project-group[data-v-ff30c4ce] {
  margin-bottom: 40px;
  padding: 25px;
  background-color: #f0f2f5;
  border-radius: 8px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}
.group-title[data-v-ff30c4ce] {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
  padding-left: 12px;
  border-left: 4px solid #1890ff;
  line-height: 1.5;
  text-align: left;
}
.projects-grid[data-v-ff30c4ce] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}
.project-card[data-v-ff30c4ce] {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  width: 100%;
  height: 150px;
  position: relative;  /* 为子元素的绝对定位提供参考 */
}
.project-card[data-v-ff30c4ce]:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
}

/* 项目状态标签 - 长方形 */
.project-status[data-v-ff30c4ce] {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.project-status.status-active[data-v-ff30c4ce] {
  background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
  color: white;
}
.project-status.status-archived[data-v-ff30c4ce] {
  background: linear-gradient(135deg, #faad14 0%, #ffc53d 100%);
  color: white;
}
.project-status.status-deleted[data-v-ff30c4ce] {
  background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
  color: white;
}
.project-image[data-v-ff30c4ce] {
  width: 100%;
  height: 100px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
}
.project-image img[data-v-ff30c4ce] {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.no-image-placeholder[data-v-ff30c4ce] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #909399;
  font-size: 14px;
}
.no-image-placeholder span[data-v-ff30c4ce] {
  margin-top: 8px;
}
.project-info[data-v-ff30c4ce] {
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.project-name[data-v-ff30c4ce] {
  color: #303133;
  margin: 0;
  font-size: 15px;
  flex-grow: 1;
  text-align: left;
}
.settings-btn[data-v-ff30c4ce] {
  background: none;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
}
.settings-btn[data-v-ff30c4ce]:hover {
  background-color: #ecf5ff;
}
.settings-icon[data-v-ff30c4ce] {
  width: 18px;
  height: 18px;
  -o-object-fit: contain;
     object-fit: contain;
}

/* 创建项目卡片样式 */
.create-project-card[data-v-ff30c4ce] {
  border: 2px dashed #dcdfe6;
  background-color: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  height: 150px; /* 保持与其它卡片相同高度 */
}
.create-project-card[data-v-ff30c4ce]:hover {
  border-color: #409eff;
  background-color: #ecf5ff;
}
.create-project-card .project-image[data-v-ff30c4ce] {
  display: none;
}
.plus-icon[data-v-ff30c4ce] {
  font-size: 60px;
  color: #909399;
  font-weight: 300;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.create-project-card:hover .plus-icon[data-v-ff30c4ce] {
  color: #409eff;
}

/* StyleBaseInfo 组件样式 */
.style-base-info[data-v-6b5c142e] {
  width: 100%;
  height: 100%;
}
.base-info-container[data-v-6b5c142e] {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
}
.left-panel[data-v-6b5c142e] {
  flex: 1;
  width: 50%;
  border-right: 1px solid #ebeef5;
  background-color: #fafafa;
  overflow-y: auto; /* 添加垂直滚动条 */
}
.right-panel[data-v-6b5c142e] {
  flex: 1;
  width: 50%;
  background-color: white;
}

/* 左侧表格样式 */
.info-table[data-v-6b5c142e] {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.info-table td[data-v-6b5c142e] {
  padding: 8px 10px;
  border-bottom: 1px solid #ebeef5;
  vertical-align: middle;
}
.field-key[data-v-6b5c142e] {
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
  text-align: right;
  font-weight: 500;
  color: #606266;
  background-color: #fafafa;
  border-right: 1px solid #ebeef5;
}
.field-input[data-v-6b5c142e] {
  width: calc(100% - 120px) !important;
}
.field-input input[data-v-6b5c142e] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}
.field-input input[data-v-6b5c142e]:focus {
  border-color: #409eff;
  outline: none;
}
.field-input input.active[data-v-6b5c142e] {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

/* 只读字段样式 */
.field-input input.readonly[data-v-6b5c142e],
.field-input select.readonly[data-v-6b5c142e] {
  background-color: #f5f7fa;
  color: #909399;
  cursor: not-allowed;
}

/* 下拉框样式 */
.field-input select[data-v-6b5c142e] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
  background-color: white;
  cursor: pointer;
}
.field-input select[data-v-6b5c142e]:focus {
  border-color: #409eff;
  outline: none;
}
.right-panel[data-v-6b5c142e] {
  flex: 1;
  width: 50%;
  background-color: white;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.tags-panel[data-v-6b5c142e] {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.tags-header[data-v-6b5c142e] {
  padding: 10px 20px;
  border-bottom: 1px solid #ebeef5;
  background-color: #fafafa;
}
.tags-header h4[data-v-6b5c142e] {
  margin: 0;
  font-size: 16px;
  color: #303133;
  font-weight: 500;
}
.tags-content[data-v-6b5c142e] {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}
.tags-container[data-v-6b5c142e] {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tag[data-v-6b5c142e] {
  display: inline-block;
  padding: 6px 8px;
  background-color: #f0f9ff;
  color: #409eff;
  border: 1px solid #d9ecff;
  border-radius: 4px;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
}
.tag[data-v-6b5c142e]:hover {
  background-color: #ecf5ff;
  border-color: #b3d8ff;
}
.tag.selected[data-v-6b5c142e] {
  background-color: #409eff;
  color: white;
  border-color: #409eff;
}
.tag.selected[data-v-6b5c142e]:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

/* 删除模式下的标签样式 */
.tag.delete-mode[data-v-6b5c142e] {
  animation: shake-6b5c142e 0.5s;
  border-color: #f56c6c;
}

/* 被标记删除的标签样式 */
.tag.marked-for-delete[data-v-6b5c142e] {
  display: none; /* 隐藏被标记删除的标签 */
}
.tag.delete-mode .delete-icon[data-v-6b5c142e] {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  background-color: #f56c6c;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.3s;
}
.tag.delete-mode .delete-icon[data-v-6b5c142e]:hover {
  background-color: #f78989;
  transform: scale(1.1);
}
@keyframes shake-6b5c142e {
0%, 100% { transform: translateX(0);
}
25% { transform: translateX(-5px);
}
75% { transform: translateX(5px);
}
}
.empty-panel[data-v-6b5c142e] {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
  font-size: 16px;
}

/* 底部新增按钮区域 */
.tags-footer[data-v-6b5c142e] {
  padding: 10px 20px;
  border-top: 1px solid #ebeef5;
  background-color: #fafafa;
  display: flex;
  justify-content: flex-end; /* 右对齐 */
  gap: 10px; /* 按钮间距 */
}
.footer-btn[data-v-6b5c142e] {
  padding: 8px 20px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;
}
.delete-mode-btn[data-v-6b5c142e] {
  background-color: #fef0f0;
  color: #f56c6c;
  border: 1px solid #fde2e2;
}
.delete-mode-btn[data-v-6b5c142e]:hover {
  background-color: #f56c6c;
  color: white;
}
.delete-mode-btn.active[data-v-6b5c142e] {
  background-color: #f56c6c;
  color: white;
  border-color: #f56c6c;
}
.add-tag-btn[data-v-6b5c142e] {
  background-color: #409eff;
  color: white;
}
.add-tag-btn[data-v-6b5c142e]:hover {
  background-color: #66b1ff;
}
.batch-delete-btn[data-v-6b5c142e] {
  background-color: #f56c6c;
  color: white;
  border: 1px solid #f56c6c;
}
.batch-delete-btn[data-v-6b5c142e]:hover {
  background-color: #ff7875;
  border-color: #ff7875;
}
.cancel-btn[data-v-6b5c142e] {
  background-color: #909399;
  color: white;
  border: 1px solid #909399;
}
.cancel-btn[data-v-6b5c142e]:hover {
  background-color: #a6a9ad;
  border-color: #a6a9ad;
}

/* 新增标签弹窗样式 */
.modal-overlay[data-v-6b5c142e] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
.add-tag-modal[data-v-6b5c142e] {
  width: 400px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
.modal-header[data-v-6b5c142e] {
  padding: 16px 20px;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fafafa;
}
.modal-header h4[data-v-6b5c142e] {
  margin: 0;
  font-size: 16px;
  color: #303133;
  font-weight: 500;
}
.close-btn[data-v-6b5c142e] {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 24px;
  color: #909399;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}
.close-btn[data-v-6b5c142e]:hover {
  background-color: #f5f7fa;
  color: #f56c6c;
}
.modal-body[data-v-6b5c142e] {
  padding: 24px 20px;
}
.new-tag-input[data-v-6b5c142e] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
  transition: border-color 0.3s;
}
.new-tag-input[data-v-6b5c142e]:focus {
  border-color: #409eff;
  outline: none;
}
.modal-footer[data-v-6b5c142e] {
  padding: 16px 20px;
  border-top: 1px solid #ebeef5;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background-color: #fafafa;
}
.modal-btn[data-v-6b5c142e] {
  padding: 8px 20px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}
.modal-btn.cancel-btn[data-v-6b5c142e] {
  background-color: #909399;
  color: white;
}
.modal-btn.cancel-btn[data-v-6b5c142e]:hover {
  background-color: #a6a9ad;
}
.modal-btn.submit-btn[data-v-6b5c142e] {
  background-color: #67c23a;
  color: white;
}
.modal-btn.submit-btn[data-v-6b5c142e]:hover {
  background-color: #85ce61;
}

.modal-overlay[data-v-6726aaa0] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}
.part-management-modal[data-v-6726aaa0] {
  background: white;
  border-radius: 8px;
  width: 750px;
  height: 650px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.modal-header[data-v-6726aaa0] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid #e0e0e0;
}
.modal-header h2[data-v-6726aaa0] {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}
.close-btn[data-v-6726aaa0] {
  background: none;
  border: none;
  font-size: 28px;
  color: #999;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s;
}
.close-btn[data-v-6726aaa0]:hover {
  background-color: #f5f5f5;
  color: #666;
}
.modal-body[data-v-6726aaa0] {
  flex: 1;
  padding: 24px;
  overflow: hidden;
}
.part-selector-container[data-v-6726aaa0] {
  display: flex;
  gap: 20px;
  height: 100%;
}
.part-column[data-v-6726aaa0] {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.column-header[data-v-6726aaa0] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.part-column h3[data-v-6726aaa0] {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #333;
}
.add-part-btn[data-v-6726aaa0] {
  padding: 4px 12px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.add-part-btn[data-v-6726aaa0]:hover {
  background-color: #66b1ff;
}
.search-box[data-v-6726aaa0] {
  margin-bottom: 12px;
}
.search-input[data-v-6726aaa0] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  transition: all 0.2s;
}
.search-input[data-v-6726aaa0]:focus {
  outline: none;
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}
.part-list[data-v-6726aaa0] {
  flex: 1;
  overflow-y: auto;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 8px;
}
.part-item[data-v-6726aaa0] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  margin-bottom: 6px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}
.part-item[data-v-6726aaa0]:hover {
  border-color: #409eff;
  background-color: #f5f7fa;
}
.part-item.selected[data-v-6726aaa0] {
  border-color: #67c23a;
  background-color: #f0f9ff;
}
.part-item.selected[data-v-6726aaa0]:hover {
  background-color: #ecf5ff;
}
.part-info[data-v-6726aaa0] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.part-name[data-v-6726aaa0] {
  font-size: 13px;
  font-weight: 500;
  color: #333;
}
.part-remark[data-v-6726aaa0] {
  font-size: 11px;
  color: #999;
}
.add-btn[data-v-6726aaa0],
.remove-btn[data-v-6726aaa0] {
  background: none;
  border: none;
  font-size: 18px;
  color: #409eff;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.2s;
  flex-shrink: 0;
}
.add-btn[data-v-6726aaa0]:hover {
  background-color: #409eff;
  color: white;
}
.remove-btn[data-v-6726aaa0] {
  color: #67c23a;
}
.remove-btn[data-v-6726aaa0]:hover {
  background-color: #67c23a;
  color: white;
}
.empty-message[data-v-6726aaa0] {
  text-align: center;
  padding: 30px 20px;
  color: #999;
  font-size: 13px;
}
.modal-footer[data-v-6726aaa0] {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid #e0e0e0;
}
.cancel-btn[data-v-6726aaa0],
.save-btn[data-v-6726aaa0] {
  padding: 6px 16px;
  border-radius: 4px;
  font-size: 13px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
.cancel-btn[data-v-6726aaa0] {
  background-color: #f5f5f5;
  color: #666;
}
.cancel-btn[data-v-6726aaa0]:hover {
  background-color: #e0e0e0;
}
.save-btn[data-v-6726aaa0] {
  background-color: #409eff;
  color: white;
}
.save-btn[data-v-6726aaa0]:hover:not(:disabled) {
  background-color: #66b1ff;
}
.save-btn[data-v-6726aaa0]:disabled {
  background-color: #a0cfff;
  cursor: not-allowed;
}

/* 滚动条样式 */
.part-list[data-v-6726aaa0]::-webkit-scrollbar {
  width: 6px;
}
.part-list[data-v-6726aaa0]::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 3px;
}
.part-list[data-v-6726aaa0]::-webkit-scrollbar-thumb {
  background: #d9d9d9;
  border-radius: 3px;
}
.part-list[data-v-6726aaa0]::-webkit-scrollbar-thumb:hover {
  background: #c0c0c0;
}

/* 新增部位弹窗样式 */
.add-part-modal[data-v-6726aaa0] {
  background: white;
  border-radius: 8px;
  width: 400px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.form-group[data-v-6726aaa0] {
  margin-bottom: 16px;
}
.form-label[data-v-6726aaa0] {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
}
.form-input[data-v-6726aaa0] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  transition: all 0.2s;
}
.form-input[data-v-6726aaa0]:focus {
  outline: none;
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}


/* 遮罩层 */
.common-modal-overlay[data-v-4124c550] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

/* 弹窗主体 */
.common-modal[data-v-4124c550] {
  background: white;
  border-radius: 8px;
  width: 400px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

/* 弹窗头部 */
.modal-header[data-v-4124c550] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #ebeef5;
}
.modal-header h3[data-v-4124c550] {
  margin: 0;
  font-size: 16px;
  color: #303133;
  font-weight: 600;
}
.close-btn[data-v-4124c550] {
  background: none;
  border: none;
  font-size: 24px;
  color: #909399;
  cursor: pointer;
  padding: 0;
  width: 28px;
  height: 28px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.3s;
}
.close-btn[data-v-4124c550]:hover {
  background-color: #f5f7fa;
  color: #606266;
}

/* 弹窗主体 */
.modal-body[data-v-4124c550] {
  padding: 20px;
}
.form-group[data-v-4124c550] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-label[data-v-4124c550] {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}
.form-input[data-v-4124c550],
.form-textarea[data-v-4124c550] {
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  color: #606266;
  outline: none;
  transition: border-color 0.3s;
}
.form-input[data-v-4124c550]:focus,
.form-textarea[data-v-4124c550]:focus {
  border-color: #409eff;
}
.form-textarea[data-v-4124c550] {
  resize: vertical;
  font-family: inherit;
}

/* 弹窗底部 */
.modal-footer[data-v-4124c550] {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid #ebeef5;
}
.cancel-btn[data-v-4124c550] {
  background-color: #f5f7fa;
  color: #606266;
  border: 1px solid #dcdfe6;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}
.cancel-btn[data-v-4124c550]:hover {
  background-color: #ecf5ff;
  border-color: #c6e2ff;
  color: #409eff;
}
.confirm-btn[data-v-4124c550] {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}
.confirm-btn[data-v-4124c550]:hover {
  background-color: #66b1ff;
}
.confirm-btn[data-v-4124c550]:disabled {
  background-color: #c0c4cc;
  cursor: not-allowed;
}

/* StyleSizePartInfo 组件样式 */
.style-size-part-info[data-v-e47d774a] {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row; /* 左右布局 */
}

/* ========== 左侧：尺码多选列表 ========== */
.left-panel[data-v-e47d774a] {
  display: flex;
  flex-direction: column;
  width: 150px;
  flex-shrink: 0;
  height: 100%; /* 高度占满 */
  overflow: hidden;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #f5f7fa;
}

/* 方案选择区域 */
.form-group[data-v-e47d774a] {
  padding: 8px 10px;
  border-bottom: 1px solid #ebeef5;
  flex-shrink: 0;
}
.form-group .label[data-v-e47d774a] {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #606266;
  margin-bottom: 6px;
}
.form-group .select[data-v-e47d774a] {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
  color: #606266;
  background-color: #fff;
  cursor: pointer;
  outline: none;
}
.form-group .select[data-v-e47d774a]:focus {
  border-color: #409eff;
}

/* 尺码选择区域 */
.size-selector[data-v-e47d774a] {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.selector-header[data-v-e47d774a] {
  padding: 8px 10px;
  border-bottom: 1px solid #ebeef5;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 工序方案下拉框 */
.process-selector[data-v-e47d774a] {
  padding: 8px 10px;
  border-bottom: 1px solid #ebeef5;
  flex-shrink: 0;
}
.process-select[data-v-e47d774a] {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
  color: #606266;
  background-color: #fff;
  cursor: pointer;
  outline: none;
}
.process-select[data-v-e47d774a]:focus {
  border-color: #409eff;
}

/* 列表头部 */
.size-list-header[data-v-e47d774a] {
  padding: 8px 10px;
  border-bottom: 1px solid #ebeef5;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.list-title[data-v-e47d774a] {
  font-size: 13px;
  font-weight: 600;
  color: #606266;
}

/* 新增尺码按钮 */
.add-size-btn[data-v-e47d774a] {
  width: 24px;
  height: 24px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #fff;
  color: #3d78e6;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  padding: 0;
  line-height: 1;
}
.add-size-btn[data-v-e47d774a]:hover {
  background-color: #3d78e6;
  border-color: #3d78e6;
  color: #fff;
}
.add-size-btn[data-v-e47d774a]:active {
  background-color: #66b1ff;
  border-color: #66b1ff;
  color: #fff;
}

/* 复选框列表 */
.size-checkbox-list[data-v-e47d774a] {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.size-checkbox-item[data-v-e47d774a] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 3px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.size-checkbox-item[data-v-e47d774a]:hover {
  background-color: #ecf5ff;
}
.size-checkbox-input[data-v-e47d774a] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
}
.size-checkbox-label[data-v-e47d774a] {
  flex: 1;
  font-size: 13px;
  color: #606266;
  font-weight: 500;
  text-align: left;
}

/* ========== 右侧：部位尺码表格 ========== */
.right-panel[data-v-e47d774a] {
  display: flex;
  flex-direction: column;
  flex: 1; /* 占据剩余宽度 */
  min-width: 0;
  height: 100%; /* 高度占满 */
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #f5f7fa;
  overflow: hidden;
}

/* 表格容器 */
.table-container[data-v-e47d774a] {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 8px;
}

/* 部位尺码表格 */
.size-table[data-v-e47d774a] {
  width: auto;
  border-collapse: collapse;
  background-color: #fff;
  font-size: 13px;
  table-layout: fixed;
}
.size-table thead[data-v-e47d774a] {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #f5f7fa;
}
.size-table th[data-v-e47d774a] {
  padding: 10px 8px;
  border: 1px solid #e4e7ed;
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}
.size-table td[data-v-e47d774a] {
  padding: 8px;
  border: 1px solid #ebeef5;
  text-align: center;
  line-height: 1.3;
}
.part-row[data-v-e47d774a]:hover {
  background-color: #ecf5ff;
}
.part-name[data-v-e47d774a] {
  font-weight: 600;
  color: #606266;
  text-align: left;
  padding: 12px;
}
.col-part[data-v-e47d774a] {
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
}
.col-size[data-v-e47d774a] {
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
}
.col-remark[data-v-e47d774a] {
  width: 200px !important;
  min-width: 200px !important;
  max-width: 200px !important;
}
.col-action[data-v-e47d774a] {
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
  text-align: center;
}
.size-table thead th.col-action[data-v-e47d774a] {
  position: sticky;
  right: 0;
  z-index: 20;
  background-color: #f5f7fa;
}
.action-cell[data-v-e47d774a] {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 4px;
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
}
.size-table tbody td.action-cell[data-v-e47d774a] {
  position: sticky;
  right: 0;
  background-color: #fff;
}
.part-row:hover .action-cell[data-v-e47d774a] {
  background-color: #ecf5ff;
}
.action-icon-btn[data-v-e47d774a] {
  width: 20px;
  height: 20px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #fff;
  color: #3d78e6;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  padding: 0;
  line-height: 1;
}

/* 禁用状态 */
.action-icon-btn.disabled[data-v-e47d774a] {
  color: #c0c4cc;
  border-color: #e4e7ed;
  background-color: #f5f7fa;
  cursor: not-allowed;
}
.action-icon-btn.disabled[data-v-e47d774a]:hover {
  color: #c0c4cc;
  border-color: #e4e7ed;
  background-color: #f5f7fa;
}
.action-icon-btn[data-v-e47d774a]:disabled {
  color: #c0c4cc;
  border-color: #e4e7ed;
  background-color: #f5f7fa;
  cursor: not-allowed;
}
.action-icon-btn[data-v-e47d774a]:disabled:hover {
  color: #c0c4cc;
  border-color: #e4e7ed;
  background-color: #f5f7fa;
}
.action-icon-btn[data-v-e47d774a]:hover {
  background-color: #3d78e6;
  border-color: #3d78e6;
  color: #fff;
}
.action-icon-btn[data-v-e47d774a]:active {
  background-color: #66b1ff;
  border-color: #66b1ff;
  color: #fff;
}
.action-icon-btn.delete[data-v-e47d774a] {
  color: #f56c6c;
  border-color: #f56c6c;
}
.action-icon-btn.delete[data-v-e47d774a]:hover {
  background-color: #f56c6c;
  border-color: #f56c6c;
  color: #fff;
}
.action-icon-btn.delete[data-v-e47d774a]:active {
  background-color: #f78989;
  border-color: #f78989;
  color: #fff;
}
.size-value[data-v-e47d774a] {
  padding: 0 !important;
  outline: none;
  cursor: text;
  caret-color: #409eff;
  min-height: 20px;
}
.size-value[data-v-e47d774a]:focus {
  background-color: #ecf5ff;
}
.size-value[data-v-e47d774a]:empty::before {
  content: attr(data-placeholder);
  color: #c0c4cc;
  pointer-events: none;
}
.part-remark[data-v-e47d774a] {
  text-align: left;
  padding: 0 !important;
  outline: none;
  cursor: text;
  caret-color: #409eff;
  min-height: 20px;
}
.part-remark[data-v-e47d774a]:focus {
  background-color: #ecf5ff;
}
.part-remark[data-v-e47d774a]:empty::before {
  content: attr(data-placeholder);
  color: #c0c4cc;
  pointer-events: none;
}
.empty-panel[data-v-e47d774a] {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
  font-size: 14px;
}

.style-color-info[data-v-0b0cacac] {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.top-section[data-v-0b0cacac] {
  height: 40px;
  flex-shrink: 0;
  background-color: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
  padding: 0 15px;
  gap: 10px;
}
.button-group[data-v-0b0cacac] {
  display: flex;
  gap: 8px;
  align-items: center;
}
.action-btn {
&[data-v-0b0cacac] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  color: #606266;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  white-space: nowrap;
  height: 28px;
  }
&[data-v-0b0cacac]:hover {
    border-color: #409eff;
    color: #409eff;
    background-color: #f5f7fa;
}
&[data-v-0b0cacac]:active {
    transform: scale(0.98);
}
&.danger {
&[data-v-0b0cacac] {
    color: #f56c6c;
    border-color: #fbc4c4;
    }
&[data-v-0b0cacac]:hover {
      background-color: #fef0f0;
      border-color: #f56c6c;
}
}
}
.btn-icon[data-v-0b0cacac] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
}
.middle-section[data-v-0b0cacac] {
  flex: 1;
  overflow: auto;
  background-color: #fff;
  padding: 0;
}
.color-table {
&[data-v-0b0cacac] {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
  }
thead {
&[data-v-0b0cacac] {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #f5f7fa;
    }
th {
&[data-v-0b0cacac] {
      padding: 10px 8px;
      border: 1px solid #e4e7ed;
      color: #606266;
      font-weight: 600;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      }
&.seq-col[data-v-0b0cacac] {
        width: 50px !important;
        min-width: 50px !important;
        max-width: 50px !important;
        text-align: center;
}
&.color-position-col[data-v-0b0cacac] {
        width: 40px;
}
&.remark-col[data-v-0b0cacac] {
        width: 200px;
}
&.size-col[data-v-0b0cacac] {
        width: 80px;
}
}
}
tbody {
tr {
&[data-v-0b0cacac] {
      cursor: pointer;
      }
&[data-v-0b0cacac]:hover {
        background-color: #ecf5ff;
}
&.group-color-1 {
&[data-v-0b0cacac] {
        background-color: #f5faff !important;
        }
&[data-v-0b0cacac]:hover {
          background-color: #ebf5ff !important;
}
&.selected-row[data-v-0b0cacac] {
          background-color: #d9ecff !important;
}
}
&.group-color-2 {
&[data-v-0b0cacac] {
        background-color: #f5fffa !important;
        }
&[data-v-0b0cacac]:hover {
          background-color: #ebffef !important;
}
&.selected-row[data-v-0b0cacac] {
          background-color: #d9ffd9 !important;
}
}
&.group-color-3 {
&[data-v-0b0cacac] {
        background-color: #fffbf5 !important;
        }
&[data-v-0b0cacac]:hover {
          background-color: #fff7eb !important;
}
&.selected-row[data-v-0b0cacac] {
          background-color: #ffedd9 !important;
}
}
&.group-color-4 {
&[data-v-0b0cacac] {
        background-color: #fdf5ff !important;
        }
&[data-v-0b0cacac]:hover {
          background-color: #faebff !important;
}
&.selected-row[data-v-0b0cacac] {
          background-color: #f5d9ff !important;
}
}
&.group-color-5 {
&[data-v-0b0cacac] {
        background-color: #fff5f8 !important;
        }
&[data-v-0b0cacac]:hover {
          background-color: #ffebf1 !important;
}
&.selected-row[data-v-0b0cacac] {
          background-color: #ffd9e6 !important;
}
}
&.selected-row {
&[data-v-0b0cacac] {
        background-color: #d9ecff;
        }
&[data-v-0b0cacac]:hover {
          background-color: #d9ecff;
}
td[data-v-0b0cacac] {
          border-color: #7ebaff;
}
}
&.merged-row {
&[data-v-0b0cacac] {
        background-color: #fff;
        }
&[data-v-0b0cacac]:hover {
          background-color: #ecf5ff;
}
&.selected-row {
&[data-v-0b0cacac] {
          background-color: #d9ecff;
          }
&[data-v-0b0cacac]:hover {
            background-color: #d9ecff;
}
td[data-v-0b0cacac] {
            border-color: #7ebaff;
}
}
td[data-v-0b0cacac] {
          padding: 2px 8px;
          border-top: 1px solid #909399;
}
}
td {
&[data-v-0b0cacac] {
        padding: 8px;
        border: 1px solid #ebeef5;
        overflow: hidden;
        min-height: 20px;
        outline: none;
        }
&.seq-col[data-v-0b0cacac] {
          width: 50px !important;
          min-width: 50px !important;
          max-width: 50px !important;
          text-align: center;
          color: #909399;
          font-weight: 500;
          -webkit-user-select: none;
             -moz-user-select: none;
                  user-select: none;
}
&.color-position-cell[data-v-0b0cacac] {
          width: 40px;
          cursor: default;
          -webkit-user-select: none;
             -moz-user-select: none;
                  user-select: none;
          color: #606266;
          font-weight: 500;
          text-align: left;
}
&.color-code-cell {
&[data-v-0b0cacac] {
          width: 120px;
          padding: 0;
          height: 100%;
          position: relative;
          overflow: visible;
          }
input {
&[data-v-0b0cacac] {
            width: 100%;
            height: 100%;
            min-height: 32px;
            border: none;
            padding: 0 8px;
            font-size: 13px;
            outline: none;
            background-color: transparent;
            box-sizing: border-box;
            }
&[data-v-0b0cacac]:focus {
              background-color: #f5f7fa;
}
}
.color-code-wrapper[data-v-0b0cacac] {
            position: relative;
            width: 100%;
            height: 100%;
}
.color-code-dropdown {
&[data-v-0b0cacac] {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            z-index: 1000;
            background: #fff;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
            max-height: 200px;
            overflow-y: auto;
            margin: 0;
            padding: 6px 0;
            list-style: none;
            }
.dropdown-item {
&[data-v-0b0cacac] {
              padding: 6px 10px;
              font-size: 13px;
              cursor: pointer;
              white-space: nowrap;
              color: #606266;
              }
&[data-v-0b0cacac]:hover {
                background-color: #f5f7fa;
                color: #409eff;
}
}
}
}
&.readonly-cell[data-v-0b0cacac] {
          width: 100px;
          cursor: text;
}
&.editable-cell {
&[data-v-0b0cacac] {
          cursor: text;
          caret-color: #409eff;
          }
&[data-v-0b0cacac]:focus {
            background-color: #ecf5ff;
}
&[data-v-0b0cacac]:empty:before {
            content: attr(data-placeholder);
            color: #c0c4cc;
            font-style: italic;
}
}
&.remark-cell[data-v-0b0cacac] {
          width: 200px;
}
&.size-cell[data-v-0b0cacac] {
          width: 80px;
}
}
}
}
}

.style-weight-ratio[data-v-24940300] {
  width: 100%;
  height: 100%;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* 色组表格容器 */
.color-table-container[data-v-24940300] {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background-color: #fff;
  border-radius: 4px;
}

/* 色组表格 */
.color-group-table[data-v-24940300] {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}
.color-group-table th[data-v-24940300] {
  background-color: #fafafa;
  border: 1px solid #e4e7ed;
  padding: 8px 12px;
  text-align: center;  /* 表头居中 */
  font-weight: 600;
  color: #606266;
  position: sticky;
  top: 0;
  z-index: 10;
}
.color-group-table td[data-v-24940300] {
  border: 1px solid #e4e7ed;
  padding: 8px 12px;
  color: #606266;
  text-align: left;  /* 所有单元格默认左对齐 */
}

/* 列宽设置 */
.seq-col[data-v-24940300] {
  width: 74px !important;
  text-align: center;
  min-width: 74px !important;
  max-width: 74px !important;
  padding: 8px 12px !important;
}
.main-color-col[data-v-24940300] {
  width: 130px;  /* 主色 */
  text-align: left;
  min-width: 130px;
  max-width: 150px;
}
.color-position-col[data-v-24940300] {
  width: 65px;  /* 色位 */
  text-align: left;
  min-width: 70px;
  max-width: 70px;
}
.color-code-col[data-v-24940300] {
  width: 140px;  /* 色号 */
  text-align: left;
  min-width: 140px;
  max-width: 150px;
}
.loss-ratio-col[data-v-24940300] {
  width: 100px;  /* 损耗比例 */
  text-align: center;
  min-width: 100px;
  max-width: 100px;
}
.weight-col[data-v-24940300] {
  width: auto;  /* 重量 - 自动占满剩余空间 */
  text-align: center;
  min-width: 100px;
}
.weight-size-col[data-v-24940300] {
  width: 80px;  /* 每个尺码列的宽度 */
  text-align: center;
  min-width: 80px;
  max-width: 80px;
  padding: 8px 4px;
}

/* 行样式 */
.color-row[data-v-24940300] {
  background-color: #fff;
}
.merged-row[data-v-24940300] {
  background-color: #fafafa;
}

/* 组颜色区分 */
.group-color-1[data-v-24940300] {
  background-color: rgba(64, 158, 255, 0.05);
}
.group-color-2[data-v-24940300] {
  background-color: rgba(103, 194, 58, 0.05);
}
.group-color-3[data-v-24940300] {
  background-color: rgba(230, 162, 60, 0.05);
}
.group-color-4[data-v-24940300] {
  background-color: rgba(245, 108, 108, 0.05);
}
.group-color-5[data-v-24940300] {
  background-color: rgba(152, 121, 226, 0.05);
}

/* 下部区域 */
.bottom-section[data-v-24940300] {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 4px;
  overflow: hidden;
}
.weight-ratio-container[data-v-24940300] {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  background-color: #f9f9f9;
}
.empty-tip[data-v-24940300] {
  color: #999;
  font-size: 14px;
  text-align: center;
}

/* 款式工序信息管理 */
.style-process-info[data-v-2de02fc8] {
  width: 100%;
  height: 100%;
  background: #fff;
  overflow: auto;
}

/* 表格样式 */
.process-table[data-v-2de02fc8] {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}
.process-table thead[data-v-2de02fc8] {
  background: #fafafa;
  position: sticky;
  top: 0;
  z-index: 10;
}
.process-table th[data-v-2de02fc8] {
  padding: 10px 12px;
  text-align: center;
  font-weight: 600;
  font-size: 13px;
  color: #333;
  border-bottom: 2px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  white-space: nowrap;
}
.process-table td[data-v-2de02fc8] {
  padding: 8px 12px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
}
.process-table tbody tr[data-v-2de02fc8]:hover {
  background: #f5f5f5;
}
.process-table tbody tr.selected[data-v-2de02fc8] {
  background: #e6f7ff;
}

/* 列宽设置 */
.col-index[data-v-2de02fc8] {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  text-align: center;
}
.col-check[data-v-2de02fc8] {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  text-align: center;
}
.col-process-name[data-v-2de02fc8] {
  width: 100px;
}
.col-assignee[data-v-2de02fc8] {
  width: 80px;
}
.col-labor-cost[data-v-2de02fc8] {
  width: 50px;
  text-align: center;
}
.col-description[data-v-2de02fc8] {
  width: 200px;
}
.col-work-hours[data-v-2de02fc8] {
  width: 50px;
  text-align: center;
}

/* 输入框样式 */
.process-table input[type="text"][data-v-2de02fc8],
.process-table input[type="number"][data-v-2de02fc8] {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-size: 13px;
  transition: all 0.3s;
  box-sizing: border-box;
}

/* 下拉框样式 */
.process-table select[data-v-2de02fc8] {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  font-size: 13px;
  background: #fff;
  cursor: pointer;
  transition: all 0.3s;
  box-sizing: border-box;
  outline: none;
}
.process-table select[data-v-2de02fc8]:hover {
  border-color: #40a9ff;
}
.process-table select[data-v-2de02fc8]:focus {
  border-color: #40a9ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
.process-table select option[data-v-2de02fc8] {
  padding: 8px;
}

/* 禁用态下拉框（创款/完工工序） */
.process-table select[data-v-2de02fc8]:disabled {
  background: #f5f5f5;
  color: #909399;
  cursor: not-allowed;
}

/* 禁用态勾选框（创款/完工工序） */
.process-table input[type="checkbox"][data-v-2de02fc8]:disabled {
  cursor: not-allowed;
}

/* 输入框交互 */
.process-table input[type="text"][data-v-2de02fc8]:hover,
.process-table input[type="number"][data-v-2de02fc8]:hover {
  border-color: #d9d9d9;
}
.process-table input[type="text"][data-v-2de02fc8]:focus,
.process-table input[type="number"][data-v-2de02fc8]:focus {
  border-color: #40a9ff;
  outline: none;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
.process-table input[type="checkbox"][data-v-2de02fc8] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* 可编辑单元格样式 */
.editable-cell[data-v-2de02fc8] {
  cursor: text;
  min-height: 20px;
  position: relative;
  text-align: center;
  vertical-align: middle;
}
.editable-cell[data-v-2de02fc8]:hover {
  background: #f0f0f0;
}
.editable-cell[data-v-2de02fc8]:focus {
  background: #fff;
  outline: 2px solid #40a9ff;
  outline-offset: -2px;
  position: relative;
  z-index: 1;
}
.editable-cell[data-v-2de02fc8]:empty::before {
  content: attr(data-placeholder);
  color: #999;
  opacity: 0.5;
}

/* 序号列样式 */
.col-index[data-v-2de02fc8] {
  color: #666;
  font-weight: 500;
  text-align: center;
}


.style-process-record-container[data-v-4dd5926e] {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.table-container[data-v-4dd5926e] {
  flex: 1;
  overflow: auto;
  background-color: #fff;
}
.process-record-table[data-v-4dd5926e] {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}
.process-record-table th[data-v-4dd5926e],
.process-record-table td[data-v-4dd5926e] {
  padding: 8px;
  border: 1px solid #ebeef5;
  text-align: center;
  word-wrap: break-word;
  word-break: break-all;
}
.process-record-table th[data-v-4dd5926e] {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 600;
}

/* 序号列固定宽度 */
.process-record-table .col-index[data-v-4dd5926e] {
  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;
}

/* 其他列宽度 */
.process-record-table .col-process[data-v-4dd5926e] {
  width: 120px;
}
.process-record-table .col-sample[data-v-4dd5926e] {
  width: 200px;
}
.process-record-table .col-status[data-v-4dd5926e] {
  width: 80px;
}
.process-record-table .col-operator[data-v-4dd5926e] {
  width: 160px;
}
.process-record-table .col-time[data-v-4dd5926e] {
  width: 180px;
}
.process-record-table .col-remark[data-v-4dd5926e] {
  width: auto;
}
.empty-data[data-v-4dd5926e] {
  text-align: center;
  color: #909399;
  padding: 40px 0;
}

/* 状态标签样式 */
.status-badge[data-v-4dd5926e] {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.status-done[data-v-4dd5926e] {
  background-color: #f0f9eb;
  color: #67c23a;
  border: 1px solid #e1f3d8;
}
.status-doing[data-v-4dd5926e] {
  background-color: #ecf5ff;
  color: #409eff;
  border: 1px solid #d9ecff;
}
.status-pending[data-v-4dd5926e] {
  background-color: #fdf6ec;
  color: #e6a23c;
  border: 1px solid #faecd8;
}
.status-transfer[data-v-4dd5926e] {
  background-color: #f0f9ff;
  color: #909399;
  border: 1px solid #e4e7ed;
}
.status-cancel[data-v-4dd5926e] {
  background-color: #fef0f0;
  color: #f56c6c;
  border: 1px solid #fde2e2;
}
.status-default[data-v-4dd5926e] {
  background-color: #f5f7fa;
  color: #909399;
  border: 1px solid #e4e7ed;
}


.confirm-dialog-overlay[data-v-78f9e2b2] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn-78f9e2b2 0.2s ease;
}
@keyframes fadeIn-78f9e2b2 {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}
.confirm-dialog[data-v-78f9e2b2] {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  width: 90%;
  max-width: 420px;
  animation: slideDown-78f9e2b2 0.3s ease;
  overflow: hidden;
}
@keyframes slideDown-78f9e2b2 {
from {
    opacity: 0;
    transform: translateY(-30px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/* 标题栏 */
.dialog-header[data-v-78f9e2b2] {
  background: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}
.header-icon[data-v-78f9e2b2] {
  width: 28px;
  height: 28px;
  background: #f56c6c;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}
.header-icon svg[data-v-78f9e2b2] {
  width: 16px;
  height: 16px;
}
.dialog-title[data-v-78f9e2b2] {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #303133;
  flex: 1;
}
.close-btn[data-v-78f9e2b2] {
  background: transparent;
  border: none;
  color: #909399;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  line-height: 1;
}
.close-btn[data-v-78f9e2b2]:hover {
  background: #e4e7ed;
  color: #606266;
  transform: rotate(90deg);
}

/* 内容区 */
.dialog-body[data-v-78f9e2b2] {
  padding: 20px 24px;
  background: white;
}
.message[data-v-78f9e2b2] {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #303133;
  line-height: 1.6;
}
.subtitle[data-v-78f9e2b2] {
  margin: 0;
  font-size: 13px;
  color: #f56c6c;
  line-height: 1.5;
  font-weight: 500;
}

/* 按钮区 */
.dialog-footer[data-v-78f9e2b2] {
  padding: 12px 24px 20px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  background: white;
}
.btn[data-v-78f9e2b2] {
  padding: 8px 20px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 80px;
}
.btn[data-v-78f9e2b2]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-cancel[data-v-78f9e2b2] {
  background: #f5f7fa;
  color: #606266;
  border: 1px solid #dcdfe6;
}
.btn-cancel[data-v-78f9e2b2]:hover:not(:disabled) {
  background: #e8eaed;
  border-color: #c0c4cc;
  color: #303133;
}
.btn-confirm[data-v-78f9e2b2] {
  background: #f56c6c;
  color: white;
  border: none;
}
.btn-confirm[data-v-78f9e2b2]:hover:not(:disabled) {
  background: #f78989;
}
.btn-confirm[data-v-78f9e2b2]:active:not(:disabled) {
  background: #d63030;
}


.style-files-info[data-v-ef3e2588] {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
}

/* 顶部按钮栏 */
.button-bar[data-v-ef3e2588] {
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  background: #f5f7fa;
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;
}
.button-group[data-v-ef3e2588] {
  display: flex;
  gap: 8px;
}
.action-btn[data-v-ef3e2588] {
  padding: 4px 12px;
  font-size: 13px;
  border: 1px solid #dcdfe6;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 4px;
}
.action-btn[data-v-ef3e2588]:hover {
  background: #ecf5ff;
  border-color: #409eff;
  color: #409eff;
}
.action-btn.danger[data-v-ef3e2588]:hover {
  background: #fef0f0;
  border-color: #f56c6c;
  color: #f56c6c;
}

/* 内容区域 */
.content-area[data-v-ef3e2588] {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 中部和下部平分高度 */
.image-section[data-v-ef3e2588],
.file-section[data-v-ef3e2588] {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-bottom: 1px solid #e0e0e0;
}
.file-section[data-v-ef3e2588] {
  border-bottom: none;
}

/* 区域标题 */
.section-header[data-v-ef3e2588] {
  height: 35px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: #fafafa;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.section-title[data-v-ef3e2588] {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}
.section-count[data-v-ef3e2588] {
  font-size: 12px;
  color: #999;
  margin-left: 8px;
}

/* 列表区域 */
.image-list[data-v-ef3e2588],
.file-list[data-v-ef3e2588] {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

/* 图片列表容器：左右分栏 */
.image-list-container[data-v-ef3e2588] {
  flex: 1;
  display: flex;
  gap: 10px;
  padding: 10px;
  overflow: hidden;
}

/* 左侧：图片表格列表 */
.image-table-list[data-v-ef3e2588] {
  flex: 1;
  min-width: 300px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
}

/* 图片表格 */
.image-table[data-v-ef3e2588] {
  width: 100%;
  border-collapse: collapse;
}
.image-table thead[data-v-ef3e2588] {
  position: sticky;
  top: 0;
  background: #fafafa;
  z-index: 1;
}
.image-table th[data-v-ef3e2588] {
  padding: 10px 12px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  border-bottom: 2px solid #e0e0e0;
}
.image-table td[data-v-ef3e2588] {
  padding: 10px 12px;
  font-size: 13px;
  border-bottom: 1px solid #f0f0f0;
}
.image-table .col-name[data-v-ef3e2588] {
  width: 60%;
  text-align: left;
}
.image-table .col-size[data-v-ef3e2588] {
  width: 25%;
  color: #999;
  text-align: left;
}
.image-table .col-action[data-v-ef3e2588] {
  width: 15%;
  text-align: center;
}

/* 表格行 */
.image-row[data-v-ef3e2588] {
  cursor: pointer;
  transition: all 0.3s;
}
.image-row[data-v-ef3e2588]:hover {
  background: #f5f7fa;
}
.image-row.active[data-v-ef3e2588] {
  background: #e6f7ff;
  border-left: 3px solid #409eff;
}
.image-row td[data-v-ef3e2588] {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* 文件名链接样式 */
.file-name-link[data-v-ef3e2588] {
  color: #333;
  font-weight: 500;
  transition: color 0.3s;
}
.image-row:hover .file-name-link[data-v-ef3e2588] {
  color: #409eff;
}
.image-row.active .file-name-link[data-v-ef3e2588] {
  color: #409eff;
}

/* 删除按钮（小） */
.remove-btn-small[data-v-ef3e2588] {
  background: #f56c6c;
  color: white;
  border: none;
  border-radius: 4px;
  width: 24px;
  height: 24px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.remove-btn-small[data-v-ef3e2588]:hover {
  background: #f78989;
}
.remove-btn-small[data-v-ef3e2588]:active {
  background: #d63030;
}

/* 🆕 设置主图按钮 */
.set-main-btn[data-v-ef3e2588] {
  background: #e6a23c;
  color: white;
  border: none;
  outline: none;
  border-radius: 4px;
  width: 24px;
  height: 24px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.set-main-btn[data-v-ef3e2588]:hover {
  background: #d49030;
  outline: none;
}
.set-main-btn[data-v-ef3e2588]:active {
  background: #c08020;
  outline: none;
}

/* 🆕 主图标记 */
.main-image-badge[data-v-ef3e2588] {
  display: inline-block;
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  color: #856404;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  margin-right: 8px;
  box-shadow: 0 1px 3px rgba(255, 215, 0, 0.3);
}

/* 操作按钮容器 */
.action-buttons[data-v-ef3e2588] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* 操作按钮（小） */
.action-btn-small[data-v-ef3e2588] {
  background: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  width: 24px;
  height: 24px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.action-btn-small[data-v-ef3e2588]:hover {
  background: #66b1ff;
}
.action-btn-small[data-v-ef3e2588]:active {
  background: #3a8ee6;
}

/* 右侧：图片预览面板 */
.image-preview-panel[data-v-ef3e2588] {
  flex: 1;
  min-width: 300px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.preview-content[data-v-ef3e2588] {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px;
}
.preview-image[data-v-ef3e2588] {
  flex: 1;
  width: 100%;
  height: calc(100% - 50px);
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 4px;
  background: #f5f7fa;
}
.preview-info[data-v-ef3e2588] {
  height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding-top: 10px;
  border-top: 1px solid #f0f0f0;
}
.preview-name[data-v-ef3e2588] {
  font-size: 13px;
  font-weight: 600;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.preview-size[data-v-ef3e2588] {
  font-size: 12px;
  color: #999;
}

/* 空预览状态 */
.empty-preview[data-v-ef3e2588] {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.preview-placeholder[data-v-ef3e2588] {
  text-align: center;
  color: #999;
}
.placeholder-icon[data-v-ef3e2588] {
  font-size: 48px;
  display: block;
  margin-bottom: 10px;
}
.preview-placeholder p[data-v-ef3e2588] {
  font-size: 14px;
  margin: 0;
}

/* 图片项 */
.image-item[data-v-ef3e2588] {
  display: flex;
  align-items: center;
  padding: 8px;
  background: #f9f9f9;
  border-radius: 6px;
  transition: all 0.3s;
  gap: 10px;
  margin-bottom: 8px;
}
.image-item[data-v-ef3e2588]:hover {
  background: #e8f3ff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
}
.image-preview[data-v-ef3e2588] {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.image-preview img[data-v-ef3e2588] {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.image-placeholder[data-v-ef3e2588] {
  font-size: 12px;
  color: #999;
}
.image-info[data-v-ef3e2588] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}
.image-info .file-name[data-v-ef3e2588] {
  font-size: 13px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.image-info .file-size[data-v-ef3e2588] {
  font-size: 11px;
  color: #999;
}

/* 文件列表容器 */
.file-list-container[data-v-ef3e2588] {
  flex: 1;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
}

/* 文件表格 */
.file-table[data-v-ef3e2588] {
  width: 100%;
  border-collapse: collapse;
}
.file-table thead[data-v-ef3e2588] {
  position: sticky;
  top: 0;
  background: #fafafa;
  z-index: 1;
}
.file-table th[data-v-ef3e2588] {
  padding: 10px 12px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  border-bottom: 2px solid #e0e0e0;
}
.file-table td[data-v-ef3e2588] {
  padding: 10px 12px;
  font-size: 13px;
  border-bottom: 1px solid #f0f0f0;
}
.file-table .col-name[data-v-ef3e2588] {
  width: 60%;
  text-align: left;
}
.file-table .col-size[data-v-ef3e2588] {
  width: 25%;
  color: #999;
  text-align: left;
}
.file-table .col-action[data-v-ef3e2588] {
  width: 15%;
  text-align: center;
}

/* 文件行 */
.file-row[data-v-ef3e2588] {
  transition: all 0.3s;
}
.file-row[data-v-ef3e2588]:hover {
  background: #f5f7fa;
}
.file-row td[data-v-ef3e2588] {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* 文件图标 */
.file-icon[data-v-ef3e2588] {
  font-size: 16px;
  margin-right: 6px;
}

/* 文件名链接样式 */
.file-row .file-name-link[data-v-ef3e2588] {
  color: #333;
  font-weight: 500;
  transition: color 0.3s;
}
.file-row:hover .file-name-link[data-v-ef3e2588] {
  color: #409eff;
}

/* 删除按钮 */
.remove-btn[data-v-ef3e2588] {
  background: #f56c6c;
  color: white;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.remove-btn[data-v-ef3e2588]:hover {
  background: #f78989;
}
.remove-btn[data-v-ef3e2588]:active {
  background: #d63030;
}

/* 空提示 */
.empty-hint[data-v-ef3e2588] {
  text-align: center;
  color: #999;
  font-size: 13px;
  padding: 40px 20px;
}

/* 上传进度遮罩 */
.upload-overlay[data-v-ef3e2588] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.upload-modal[data-v-ef3e2588] {
  background: white;
  border-radius: 10px;
  padding: 30px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-width: 320px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}
.upload-spinner[data-v-ef3e2588] {
  width: 36px;
  height: 36px;
  border: 3px solid #e0e0e0;
  border-top-color: #409eff;
  border-radius: 50%;
  animation: upload-spin-ef3e2588 0.8s linear infinite;
}
@keyframes upload-spin-ef3e2588 {
to { transform: rotate(360deg);
}
}
.upload-text[data-v-ef3e2588] {
  font-size: 14px;
  color: #333;
  text-align: center;
  word-break: break-all;
  max-width: 300px;
}
.upload-progress-bar[data-v-ef3e2588] {
  width: 100%;
  height: 8px;
  background: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}
.upload-progress-fill[data-v-ef3e2588] {
  height: 100%;
  background: linear-gradient(90deg, #409eff, #66b1ff);
  border-radius: 4px;
  transition: width 0.2s ease;
}
.upload-progress-text[data-v-ef3e2588] {
  font-size: 13px;
  color: #666;
  font-weight: 600;
}

/* 滚动条样式 */
.image-list[data-v-ef3e2588]::-webkit-scrollbar,
.file-list[data-v-ef3e2588]::-webkit-scrollbar {
  width: 6px;
}
.image-list[data-v-ef3e2588]::-webkit-scrollbar:hover,
.file-list[data-v-ef3e2588]::-webkit-scrollbar:hover {
  background: #f0f0f0;
}
.image-list[data-v-ef3e2588]::-webkit-scrollbar-thumb,
.file-list[data-v-ef3e2588]::-webkit-scrollbar-thumb {
  background: #c0c0c0;
  border-radius: 3px;
}
.image-list[data-v-ef3e2588]::-webkit-scrollbar-thumb:hover,
.file-list[data-v-ef3e2588]::-webkit-scrollbar-thumb:hover {
  background: #a0a0a0;
}

.style-sample-container[data-v-4f80d466] {
  width: 100% !important;
  height: 100%;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
}

/* 上部区域 */
.top-section[data-v-4f80d466] {
  height: 40px !important;
  flex-shrink: 0 !important;
  background-color: #fff !important;
  border-bottom: 1px solid #e4e7ed !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 15px !important;
}
.button-group[data-v-4f80d466] {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}
.btn[data-v-4f80d466] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 16px !important;
  background-color: #fff !important;
  border: 1px solid #409eff !important;
  border-radius: 4px !important;
  color: #409eff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.3s !important;
  white-space: nowrap !important;
  height: 28px !important;
}
.btn[data-v-4f80d466]:hover:not(:disabled) {
  background-color: #409eff !important;
  color: #fff !important;
}
.btn[data-v-4f80d466]:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  border-color: #dcdfe6 !important;
  color: #c0c4cc !important;
}
.btn-add[data-v-4f80d466] {
  color: #409eff !important;
  border-color: #409eff !important;
}
.btn-add[data-v-4f80d466]:hover:not(:disabled) {
  background-color: #409eff !important;
  color: #fff !important;
}
.btn-delete[data-v-4f80d466] {
  color: #409eff !important;
  border-color: #409eff !important;
}
.btn-delete[data-v-4f80d466]:hover:not(:disabled) {
  background-color: #409eff !important;
  color: #fff !important;
}
.btn-edit[data-v-4f80d466] {
  color: #409eff !important;
  border-color: #409eff !important;
}
.btn-edit[data-v-4f80d466]:hover:not(:disabled) {
  background-color: #409eff !important;
  color: #fff !important;
}
.btn-transfer[data-v-4f80d466] {
  color: #409eff !important;
  border-color: #409eff !important;
}
.btn-transfer[data-v-4f80d466]:hover:not(:disabled) {
  background-color: #409eff !important;
  color: #fff !important;
}
.btn-stock-in[data-v-4f80d466] {
  color: #52c41a !important;
  border-color: #52c41a !important;
}
.btn-stock-in[data-v-4f80d466]:hover:not(:disabled) {
  background-color: #52c41a !important;
  color: #fff !important;
}
.btn-stock-out[data-v-4f80d466] {
  color: #ff4d4f !important;
  border-color: #ff4d4f !important;
}
.btn-stock-out[data-v-4f80d466]:hover:not(:disabled) {
  background-color: #ff4d4f !important;
  color: #fff !important;
}
.btn-print[data-v-4f80d466] {
  color: #409eff !important;
  border-color: #409eff !important;
}
.btn-print[data-v-4f80d466]:hover:not(:disabled) {
  background-color: #409eff !important;
  color: #fff !important;
}
.separator[data-v-4f80d466] {
  width: 1px;
  height: 20px;
  background-color: #dcdfe6 !important;
  margin: 0 8px !important;
}
.template-selector[data-v-4f80d466] {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.template-label[data-v-4f80d466] {
  font-size: 13px !important;
  color: #606266 !important;
  white-space: nowrap !important;
}
.template-select[data-v-4f80d466] {
  height: 28px !important;
  padding: 0 8px !important;
  border: 1px solid #409eff !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  color: #409eff !important;
  background-color: #fff !important;
  cursor: pointer !important;
  outline: none !important;
}
.template-select[data-v-4f80d466]:hover {
  border-color: #66b1ff !important;
}

/* 模态对话框 */
.modal-overlay[data-v-4f80d466] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal-dialog[data-v-4f80d466] {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  width: 800px;
  height: 500px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-header[data-v-4f80d466] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e4e7ed;
}
.modal-header h3[data-v-4f80d466] {
  margin: 0;
  font-size: 16px;
  color: #303133;
}
.close-btn[data-v-4f80d466] {
  background: none;
  border: none;
  font-size: 20px;
  color: #909399;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.close-btn[data-v-4f80d466]:hover {
  color: #409eff;
}
.modal-body[data-v-4f80d466] {
  padding: 20px;
  overflow: auto;
  flex: 1;
}
.modal-footer[data-v-4f80d466] {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid #e4e7ed;
}

/* 新增样衣矩阵表格 */
.add-sample-matrix[data-v-4f80d466] {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
}
.add-sample-matrix th[data-v-4f80d466],
.add-sample-matrix td[data-v-4f80d466] {
  padding: 10px 12px;
  border: 1px solid #ebeef5;
  text-align: center;
}
.add-sample-matrix th[data-v-4f80d466] {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 600;
  font-size: 13px;
}
.color-col[data-v-4f80d466] {
  width: 120px;
  text-align: left !important;
  padding-left: 16px !important;
}
.size-col[data-v-4f80d466] {
  min-width: 60px;
}
.color-cell[data-v-4f80d466] {
  text-align: left !important;
  padding-left: 16px !important;
  font-weight: 500;
  color: #303133;
}
.input-cell[data-v-4f80d466] {
  cursor: pointer;
  padding: 0 !important;
}
.cell-input[data-v-4f80d466] {
  width: 100%;
  height: 100%;
  padding: 10px 12px;
  border: none;
  outline: none;
  text-align: center;
  font-size: 13px;
  color: #606266;
  background: transparent;
}
.cell-input[data-v-4f80d466]:focus {
  background-color: #ecf5ff;
}
.cell-input[data-v-4f80d466]:hover:not(:focus) {
  background-color: #f5f7fa;
}
.selected-count[data-v-4f80d466] {
  text-align: center;
  padding: 8px;
  background-color: #f0f9ff;
  border: 1px solid #b3d8ff;
  border-radius: 4px;
  color: #409eff;
  font-size: 13px;
  font-weight: 500;
}
.btn-cancel[data-v-4f80d466] {
  padding: 6px 16px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  color: #606266;
  font-size: 13px;
  cursor: pointer;
}
.btn-cancel[data-v-4f80d466]:hover {
  border-color: #409eff;
  color: #409eff;
}
.btn-submit[data-v-4f80d466] {
  padding: 6px 16px;
  background-color: #409eff;
  border: 1px solid #409eff;
  border-radius: 4px;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}
.btn-submit[data-v-4f80d466]:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}
.template-select[data-v-4f80d466]:focus {
  border-color: #409eff !important;
}

/* 表格容器 */
.table-container[data-v-4f80d466] {
  flex: 1;
  overflow: auto;
  background-color: #fff;
  padding: 0;
}
.sample-table[data-v-4f80d466] {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
  min-width: 950px; /* 所有列宽总和 */
}
.sample-table th[data-v-4f80d466],
.sample-table td[data-v-4f80d466] {
  padding: 8px;
  border: 1px solid #ebeef5;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
}
.sample-table th[data-v-4f80d466] {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 600;
  border-bottom: 1px solid #e4e7ed;
}
.sample-table tbody tr[data-v-4f80d466] {
  cursor: pointer;
  transition: background 0.2s;
}
.sample-table tbody tr[data-v-4f80d466]:hover {
  background-color: #ecf5ff;
}
.sample-table tbody tr.selected[data-v-4f80d466] {
  background-color: #d9ecff;
}
.sample-table tbody tr.selected td[data-v-4f80d466] {
  border-color: #7ebaff;
}
.sample-table tbody tr.row-highlight[data-v-4f80d466] {
  background-color: #fef0f0;
}
.sample-table tbody tr.row-highlight td[data-v-4f80d466] {
  border-color: #fbc4c4;
}
.sample-table tbody tr.row-highlight.selected[data-v-4f80d466] {
  background-color: #d9ecff;
}
.sample-table tbody tr.row-highlight[data-v-4f80d466]:not(.selected):hover {
  background-color: #fde2e2;
}
.checkbox-col[data-v-4f80d466] {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  text-align: center;
  padding: 8px 4px !important;
}
.col-sample-no[data-v-4f80d466] {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  text-align: center;
  padding: 8px 6px !important;
}
.sample-no-cell[data-v-4f80d466] {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sample-no-copy-btn[data-v-4f80d466] {
  border: 1px solid #dcdfe6;
  background: #f5f7fa;
  color: #909399;
  cursor: pointer;
  border-radius: 3px;
  padding: 0 4px;
  font-size: 12px;
  line-height: 18px;
  transition: all 0.2s;
}
.sample-no-copy-btn[data-v-4f80d466]:hover {
  border-color: #f56c6c;
  color: #f56c6c;
  background: #fef0f0;
}
.checkbox-col input[type="checkbox"][data-v-4f80d466] {
  cursor: pointer;
  margin: 0;
  vertical-align: middle;
}
.empty-data[data-v-4f80d466] {
  text-align: center;
  color: #909399;
  padding: 40px 0;
  font-size: 14px;
}

/* 列宽控制 */
.sample-table th[data-v-4f80d466]:nth-child(1),
.sample-table td[data-v-4f80d466]:nth-child(1) {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  padding: 8px 4px !important;
}
.sample-table th[data-v-4f80d466]:nth-child(2),
.sample-table td[data-v-4f80d466]:nth-child(2) {
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
  padding: 8px 4px !important;
}
.sample-table th[data-v-4f80d466]:nth-child(3),
.sample-table td[data-v-4f80d466]:nth-child(3) {
  width: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
}
.sample-table th[data-v-4f80d466]:nth-child(4),
.sample-table td[data-v-4f80d466]:nth-child(4) {
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
}
.sample-table th[data-v-4f80d466]:nth-child(5),
.sample-table td[data-v-4f80d466]:nth-child(5) {
  width: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
}
.sample-table th[data-v-4f80d466]:nth-child(6),
.sample-table td[data-v-4f80d466]:nth-child(6) {
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
  padding: 8px 4px !important;
}
.sample-table th[data-v-4f80d466]:nth-child(7),
.sample-table td[data-v-4f80d466]:nth-child(7) {
  width: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
}
.sample-table th[data-v-4f80d466]:nth-child(8),
.sample-table td[data-v-4f80d466]:nth-child(8) {
  /* 备注列自适应 */
}

/* 版本下拉框样式 */
.version-select[data-v-4f80d466] {
  width: 100%;
  height: 28px;
  padding: 0 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
  color: #606266;
  background-color: #fff;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}
.version-select[data-v-4f80d466]:hover {
  border-color: #409eff;
}
.version-select[data-v-4f80d466]:focus {
  border-color: #409eff;
}

/* 备注单元格样式 */
.remark-cell[data-v-4f80d466] {
  padding: 4px !important;
}

/* 备注输入框样式 */
.remark-input[data-v-4f80d466] {
  width: 100%;
  height: 100%;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 13px;
  color: #606266;
  background-color: transparent;
  outline: none;
  transition: all 0.2s;
  box-sizing: border-box;
}
.remark-input[data-v-4f80d466]:hover {
  border-color: #dcdfe6;
  background-color: #f5f7fa;
}
.remark-input[data-v-4f80d466]:focus {
  border-color: #409eff;
  background-color: #fff;
}
.remark-input[data-v-4f80d466]::-moz-placeholder {
  color: #c0c4cc;
}
.remark-input[data-v-4f80d466]::placeholder {
  color: #c0c4cc;
}
.sample-table th[data-v-4f80d466]:nth-child(9),
.sample-table td[data-v-4f80d466]:nth-child(9) {
  width: 150px; /* 备注 */
}

.style-accessory-info[data-v-3bfa1e69] {
  width: 100%;
  height: 100%;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* 上部区域 */
.top-section[data-v-3bfa1e69] {
  height: 40px;
  flex-shrink: 0;
  background-color: #fff;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
  padding: 0 15px;
}
.button-group[data-v-3bfa1e69] {
  display: flex;
  gap: 8px;
  align-items: center;
}
.acc-btn[data-v-3bfa1e69] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  background-color: #fff;
  border: 1px solid #409eff;
  border-radius: 4px;
  color: #409eff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  white-space: nowrap;
  height: 28px;
}
.acc-btn[data-v-3bfa1e69]:hover:not(:disabled) {
  background-color: #409eff;
  color: #fff;
}
.acc-btn[data-v-3bfa1e69]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  border-color: #dcdfe6;
  color: #c0c4cc;
}
.acc-btn-add[data-v-3bfa1e69] {
  color: #409eff;
  border-color: #409eff;
}
.acc-btn-add[data-v-3bfa1e69]:hover:not(:disabled) {
  background-color: #409eff;
  color: #fff;
}
.acc-btn-delete[data-v-3bfa1e69] {
  color: #f56c6c;
  border-color: #f56c6c;
}
.acc-btn-delete[data-v-3bfa1e69]:hover:not(:disabled) {
  background-color: #f56c6c;
  color: #fff;
}

/* 表格容器 */
.table-container[data-v-3bfa1e69] {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background-color: #fff;
  border-radius: 4px;
}

/* 表格 */
.accessory-table[data-v-3bfa1e69] {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}
.accessory-table th[data-v-3bfa1e69] {
  background-color: #fafafa;
  border: 1px solid #e4e7ed;
  padding: 8px 12px;
  text-align: center;
  font-weight: 600;
  color: #606266;
  position: sticky;
  top: 0;
  z-index: 10;
}
.accessory-table td[data-v-3bfa1e69] {
  border: 1px solid #e4e7ed;
  padding: 6px 10px;
  color: #606266;
  text-align: center;
}

/* 列宽 */
.seq-col[data-v-3bfa1e69] { width: 50px; min-width: 50px; max-width: 50px;
}
.code-col[data-v-3bfa1e69] { width: 150px; min-width: 150px;
}
.name-col[data-v-3bfa1e69] { width: 140px; min-width: 140px;
}
.cat-col[data-v-3bfa1e69] { width: 100px; min-width: 100px;
}
.subcat-col[data-v-3bfa1e69] { width: 100px; min-width: 100px;
}
.brand-col[data-v-3bfa1e69] { width: 100px; min-width: 100px;
}
.unit-col[data-v-3bfa1e69] { width: 80px; min-width: 80px;
}
.qty-col[data-v-3bfa1e69] { width: 80px; min-width: 80px;
}
.loss-col[data-v-3bfa1e69] { width: 80px; min-width: 80px;
}
.remark-col[data-v-3bfa1e69] { width: 120px; min-width: 120px;
}

/* 行样式 */
.accessory-row[data-v-3bfa1e69] {
  background-color: #fff;
  cursor: pointer;
}
.accessory-row[data-v-3bfa1e69]:hover {
  background-color: #f5f7fa;
}
.selected-row[data-v-3bfa1e69] {
  background-color: #ecf5ff !important;
}

/* 只读单元格 */
.readonly-cell[data-v-3bfa1e69] {
  background-color: #fafafa;
  color: #909399;
}

/* 可编辑单元格 */
.editable-cell[data-v-3bfa1e69] {
  background-color: #fff;
  cursor: text;
  outline: none;
}
.editable-cell[data-v-3bfa1e69]:focus {
  background-color: #fff;
  box-shadow: inset 0 0 0 1px #409eff;
}

/* 下拉框 */
.cell-select[data-v-3bfa1e69] {
  width: 100%;
  border: 1px solid #dcdfe6;
  border-radius: 3px;
  padding: 4px 6px;
  font-size: 13px;
  color: #606266;
  background: #fff;
  outline: none;
  box-sizing: border-box;
}
.cell-select[data-v-3bfa1e69]:focus {
  border-color: #409eff;
}

/* 空提示 */
.empty-tip[data-v-3bfa1e69] {
  text-align: center;
  color: #999;
  padding: 20px !important;
  font-size: 13px;
}


.field-config-overlay[data-v-2f4bbf85] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}
#field-config-modal[data-v-2f4bbf85] {
  background: white;
  border-radius: 8px;
  /* width: 1040px; */
  /* height: 700px; */
  width: 65%; /* 70% of the screen width */
  height: 90%; /* 90% of the screen height */
  max-width: none;
  max-height: none;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  box-sizing: border-box;
}
.modal-header[data-v-2f4bbf85] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid #eee;
}
.modal-header h3[data-v-2f4bbf85] {
  margin: 0;
  color: #333;
  font-size: 16px;
}
.close-btn[data-v-2f4bbf85] {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: #999;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.close-btn[data-v-2f4bbf85]:hover {
  color: #666;
}
#field-config-content[data-v-2f4bbf85] {
  flex: 1;
  overflow: hidden; /* 不再整体滚动，由 table-scroll-container 内部滚动 */
  padding: 0;
  background: white;
  width: 100%;
  max-width: none;
  max-height: none;
  height: auto;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
}

/* 工具栏 - 固定在顶部，不随表格滚动 */
.toolbar[data-v-2f4bbf85] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid #ebeef5;
  background: #fafbfc;
  flex-wrap: wrap;
  flex-shrink: 0; /* 不被压缩 */
}

/* 表格滚动容器 - 只有这里滚动 */
.table-scroll-container[data-v-2f4bbf85] {
  flex: 1;
  overflow: auto;
  min-height: 0;
}

/* 表格头部固定 */
#field-config-table thead th[data-v-2f4bbf85] {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: #f5f7fa;
}
.toolbar-divider[data-v-2f4bbf85] {
  width: 1px;
  height: 20px;
  background: #dcdfe6;
  flex-shrink: 0;
}
.toolbar .search-input[data-v-2f4bbf85] {
  flex: 1;
  min-width: 160px;
  padding: 7px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
  transition: border-color 0.3s;
  outline: none;
}
.toolbar .search-input[data-v-2f4bbf85]:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.15);
}
.toolbar .search-input[data-v-2f4bbf85]::-moz-placeholder {
  color: #c0c4cc;
}
.toolbar .search-input[data-v-2f4bbf85]::placeholder {
  color: #c0c4cc;
}
.toolbar .search-clear[data-v-2f4bbf85] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e0e0e0;
  color: #666;
  font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s;
}
.toolbar .search-clear[data-v-2f4bbf85]:hover {
  background: #c0c4cc;
  color: #fff;
}
.toolbar .search-count[data-v-2f4bbf85] {
  font-size: 13px;
  color: #909399;
  white-space: nowrap;
  flex-shrink: 0;
}
#field-config-table[data-v-2f4bbf85] {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: white;
  table-layout: fixed;
  margin: 0;
  box-sizing: border-box;
}
#field-config-table th[data-v-2f4bbf85],
#field-config-table td[data-v-2f4bbf85] {
  padding: 12px 8px;
  border: 1px solid #ebeef5;
  text-align: center;
  vertical-align: middle;
  box-sizing: border-box;
  height: 50px;
}
.field-config-table th[data-v-2f4bbf85] {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 600;
}
.field-config-table tbody tr[data-v-2f4bbf85]:hover {
  background-color: #f5f7fa;
}
.field-config-table tbody tr.field-row-selected[data-v-2f4bbf85] {
  background-color: #ecf5ff;
}
.field-name-cell[data-v-2f4bbf85] {
  color: #909399;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  background-color: #fafafa;
}
.label-input[data-v-2f4bbf85] {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
  transition: border-color 0.3s;
}
.label-input[data-v-2f4bbf85]:focus {
  outline: none;
  border-color: #409eff;
}
.dictionary-select[data-v-2f4bbf85] {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
  background-color: white;
  cursor: pointer;
  transition: border-color 0.3s;
}
.dictionary-select[data-v-2f4bbf85]:focus {
  outline: none;
  border-color: #409eff;
}
.switch-label[data-v-2f4bbf85] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  width: 100%;
}
.switch-label input[type="checkbox"][data-v-2f4bbf85] {
  cursor: pointer;
}
#field-config-table .dictionary-select[data-v-2f4bbf85] {
  width: 100% !important;
  padding: 6px 10px !important;
  border: 1px solid #dcdfe6 !important;
  border-radius: 4px !important;
  background-color: white !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: border-color 0.2s !important;
}
#field-config-table .dictionary-select[data-v-2f4bbf85]:hover:not(:disabled) {
  border-color: #c0c4cc !important;
}
#field-config-table .dictionary-select[data-v-2f4bbf85]:focus {
  outline: none !important;
  border-color: #409eff !important;
}
#field-config-table .dictionary-select[data-v-2f4bbf85]:disabled {
  background-color: #f5f7fa !important;
  color: #c0c4cc !important;
  cursor: not-allowed !important;
  border-color: #e4e7ed !important;
}
.sort-buttons[data-v-2f4bbf85] {
  display: flex;
  gap: 4px;
  justify-content: center;
}
.sort-btn[data-v-2f4bbf85] {
  width: 28px;
  height: 28px;
  border: 1px solid #dcdfe6;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}
.sort-btn[data-v-2f4bbf85]:hover:not(:disabled) {
  color: #409eff;
  border-color: #409eff;
}
.sort-btn[data-v-2f4bbf85]:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
.modal-footer[data-v-2f4bbf85] {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid #eee;
}
.footer-right[data-v-2f4bbf85] {
  display: flex;
  gap: 12px;
}
.btn-quick[data-v-2f4bbf85] {
  padding: 6px 16px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  background: white;
  color: #606266;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.3s;
}
.btn-quick[data-v-2f4bbf85]:hover {
  color: #409eff;
  border-color: #409eff;
  background: #ecf5ff;
}
.btn-cancel[data-v-2f4bbf85],
.btn-submit[data-v-2f4bbf85] {
  padding: 8px 24px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-size: 14px;
}
.btn-cancel[data-v-2f4bbf85] {
  background: #f0f0f0;
  color: #666;
}
.btn-cancel[data-v-2f4bbf85]:hover {
  background: #e0e0e0;
}
.btn-submit[data-v-2f4bbf85] {
  background: #409eff;
  color: white;
}
.btn-submit[data-v-2f4bbf85]:hover {
  background: #66b1ff;
}

.style-form-overlay[data-v-32321d69] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.style-form-modal[data-v-32321d69] {
  background: white;
  border-radius: 8px;
  width: 1400px;
  max-width: 95vw;
  max-height: 95vh;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  flex: 1;
  max-height: calc(95vh - 10px);
}
.form-header[data-v-32321d69] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 24px;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}
.form-header h3[data-v-32321d69] {
  margin: 0;
  color: #333;
  /* font-size: 15px; */
}
.close-btn[data-v-32321d69] {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.close-btn[data-v-32321d69]:hover {
  color: #666;
}
.tab-container[data-v-32321d69] {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
}
.tab-nav[data-v-32321d69] {
  display: flex;
  border-bottom: 1px solid #ddd;
  background-color: #f9f9f9;
  flex-shrink: 0;
}
.tab-button[data-v-32321d69] {
  padding: 1px 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  color: #666;
  font-size: 14px;
  transition: all 0.3s;
  flex: 1;
  text-align: center;
}
.tab-button[data-v-32321d69]:hover {
  color: #409eff;
  background-color: #eee;
}
.tab-button.active[data-v-32321d69] {
  color: #409eff;
  border-bottom: 2px solid #409eff;
  background-color: white;
}
.tab-content[data-v-32321d69] {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  display: flex;
  width: 100%;
}
.tab-pane[data-v-32321d69] {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%; /* 确保占满所有高度 */
}

/* 表单容器占满整个 tab-pane */
.style-form[data-v-32321d69] {
  width: 100%;
  height: 100%;
}

/* 确保表格占满整个表单容器 */
.info-table[data-v-32321d69] {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  table-layout: fixed;
}
.form-table[data-v-32321d69] {
  display: grid;
  grid-template-columns: 20% 35% 45%; /* 字段名 20%，值 35%，可选标签 45% */
  gap: 12px 20px;
  align-items: center;
}
.form-row[data-v-32321d69] {
  display: contents;
}
.form-label[data-v-32321d69] {
  grid-column: 1;
  font-weight: 500;
  color: #333;
  font-size: 14px;
  text-align: right;
  padding: 8px 0;
}
.form-input[data-v-32321d69] {
  grid-column: 2;
  padding: 8px 0;
}
.form-hint[data-v-32321d69] {
  grid-column: 3;
  padding: 8px 0;
  color: #999;
  font-size: 13px;
  text-align: left;
}
.form-input input[data-v-32321d69],
.form-input select[data-v-32321d69] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}
.form-section[data-v-32321d69] {
  margin-bottom: 20px;
}
.form-section h4[data-v-32321d69] {
  margin-top: 0;
  margin-bottom: 15px;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}
.form-row[data-v-32321d69] {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}
.form-group[data-v-32321d69] {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.form-group.full-width[data-v-32321d69] {
  flex: none;
  width: 100%;
}
.form-group label[data-v-32321d69] {
  margin-bottom: 6px;
  font-weight: 500;
  color: #333;
  font-size: 14px;
}
.form-group input[data-v-32321d69],
.form-group select[data-v-32321d69] {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}
.image-upload-area[data-v-32321d69] {
  border: 2px dashed #ddd;
  border-radius: 4px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.3s;
}
.image-upload-area[data-v-32321d69]:hover {
  border-color: #409eff;
}
.upload-placeholder p[data-v-32321d69] {
  margin: 0;
  color: #999;
}
.image-preview[data-v-32321d69] {
  position: relative;
  display: inline-block;
}
.image-preview img[data-v-32321d69] {
  max-width: 100%;
  max-height: 200px;
  -o-object-fit: contain;
     object-fit: contain;
}
.remove-image[data-v-32321d69] {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #f56c6c;
  color: white;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.status-options[data-v-32321d69] {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.status-option[data-v-32321d69] {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.form-actions[data-v-32321d69] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid #eee;
  background: white;
  margin-top: auto;
  position: sticky;
  bottom: 0;
  z-index: 1001;
}
.form-actions-left[data-v-32321d69] {
  display: flex;
  gap: 12px;
}
.form-actions-right[data-v-32321d69] {
  display: flex;
  gap: 12px;
}
.btn-cancel[data-v-32321d69],
.btn-submit[data-v-32321d69],
.btn-field-config[data-v-32321d69] {
  padding: 8px 20px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-size: 14px;
}
.btn-cancel[data-v-32321d69] {
  background: #f0f0f0;
  color: #666;
}
.btn-cancel[data-v-32321d69]:hover {
  background: #e0e0e0;
}
.btn-field-config[data-v-32321d69] {
  background: #67c23a;
  color: white;
}
.btn-field-config[data-v-32321d69]:hover {
  background: #85ce61;
}
.btn-submit[data-v-32321d69] {
  background: #409eff;
  color: white;
}
.btn-submit[data-v-32321d69]:hover {
  background: #66b1ff;
}
.expand-btn i[data-v-32321d69] {
  margin-right: 2px;
  font-size: 10px;
}
.empty-hint[data-v-32321d69] {
  flex: 1;
}

/* ===== 样衣流转弹窗 ===== */
.sample-transfer-modal[data-v-32321d69] {
  background: white;
  border-radius: 8px;
  width: 600px;
  max-width: 90vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.sample-transfer-modal .modal-header[data-v-32321d69] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #ebeef5;
}
.sample-transfer-modal .modal-header h3[data-v-32321d69] {
  margin: 0;
  font-size: 18px;
  color: #303133;
}
.sample-transfer-modal .close-btn[data-v-32321d69] {
  background: none;
  border: none;
  font-size: 24px;
  color: #909399;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.sample-transfer-modal .close-btn[data-v-32321d69]:hover {
  color: #303133;
}
.sample-transfer-modal .modal-body[data-v-32321d69] {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}
.transfer-sample-info[data-v-32321d69] {
  padding: 12px 16px;
  background: #f5f7fa;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 14px;
}
.transfer-sample-info .info-label[data-v-32321d69] {
  color: #909399;
}
.transfer-sample-info .info-value[data-v-32321d69] {
  color: #303133;
  font-weight: 500;
}
.transfer-sample-tags[data-v-32321d69] {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.transfer-sample-tag[data-v-32321d69] {
  display: inline-block;
  padding: 3px 8px;
  background: #ecf5ff;
  color: #409eff;
  border: 1px solid #d9ecff;
  border-radius: 3px;
  font-size: 12px;
}
.transfer-container[data-v-32321d69] {
  display: flex;
  gap: 16px;
}
.transfer-left[data-v-32321d69],
.transfer-right[data-v-32321d69] {
  flex: 1;
  border: 1px solid #ebeef5;
  border-radius: 6px;
  overflow: hidden;
}
.transfer-section-title[data-v-32321d69] {
  padding: 10px 14px;
  background: #fafafa;
  font-size: 14px;
  font-weight: 500;
  color: #606266;
  border-bottom: 1px solid #ebeef5;
}
.transfer-process-list[data-v-32321d69],
.transfer-member-list[data-v-32321d69] {
  max-height: 280px;
  overflow-y: auto;
  padding: 8px;
}
.transfer-process-item[data-v-32321d69],
.transfer-member-item[data-v-32321d69] {
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  color: #606266;
  transition: all 0.2s;
  margin-bottom: 4px;
}
.transfer-process-item[data-v-32321d69]:hover,
.transfer-member-item[data-v-32321d69]:hover {
  background: #ecf5ff;
  color: #409eff;
}
.transfer-process-item.selected[data-v-32321d69],
.transfer-member-item.selected[data-v-32321d69] {
  background: #409eff;
  color: white;
}
.transfer-empty[data-v-32321d69] {
  text-align: center;
  padding: 20px;
  color: #c0c4cc;
  font-size: 13px;
}
.sample-transfer-modal .modal-footer[data-v-32321d69] {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid #ebeef5;
}
.sample-transfer-modal .btn-cancel[data-v-32321d69],
.sample-transfer-modal .btn-submit[data-v-32321d69] {
  padding: 8px 24px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  border: none;
  transition: all 0.3s;
}
.sample-transfer-modal .btn-cancel[data-v-32321d69] {
  background: #f5f7fa;
  color: #606266;
  border: 1px solid #dcdfe6;
}
.sample-transfer-modal .btn-cancel[data-v-32321d69]:hover {
  background: #ecf5ff;
  color: #409eff;
}
.sample-transfer-modal .btn-submit[data-v-32321d69] {
  background: #409eff;
  color: white;
}
.sample-transfer-modal .btn-submit[data-v-32321d69]:hover {
  background: #66b1ff;
}
.sample-transfer-modal .btn-submit[data-v-32321d69]:disabled {
  background: #a0cfff;
  cursor: not-allowed;
}


.print-designer-overlay[data-v-b4dff808] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.print-designer-modal[data-v-b4dff808] {
  width: 95vw;
  height: 95vh;
  background-color: #fff;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.designer-header[data-v-b4dff808] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 30px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  flex-shrink: 0;
}
.designer-header h3[data-v-b4dff808] {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}
.btn-close[data-v-b4dff808] {
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  transition: all 0.3s;
}
.btn-close[data-v-b4dff808]:hover {
  background-color: #f56c6c;
}
.designer-body[data-v-b4dff808] {
  flex: 1;
  overflow: hidden;
}
.designer-body[data-v-b4dff808] .full-designer {
  height: 100%;
}

/* 隐藏默认 Footer 内容 */
.custom-footer[data-v-b4dff808] {
  height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.designer-body[data-v-b4dff808] .designer-footer-inner {
  display: none !important;
}

/* 工序管理容器 */
.process-management-container[data-v-3a1d2bb9] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* 工序管理弹窗 */
.process-modal[data-v-3a1d2bb9] {
  background: white;
  border-radius: 8px;
  width: 80%; /* 增大宽度 */
  max-width: 800px; /* 增大最大宽度 */
  height: 90vh; /* 固定高度 */
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* 弹窗头部 */
.modal-header[data-v-3a1d2bb9] {
  padding: 20px;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-header h2[data-v-3a1d2bb9] {
  margin: 0;
  font-size: 18px;
  color: #303133;
  font-weight: 600;
}
.close-btn[data-v-3a1d2bb9] {
  background: none;
  border: none;
  font-size: 28px;
  color: #909399;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s;
}
.close-btn[data-v-3a1d2bb9]:hover {
  background-color: #f5f7fa;
  color: #606266;
}

/* 弹窗主体 */
.modal-body[data-v-3a1d2bb9] {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 工序列表 */
.process-list[data-v-3a1d2bb9] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  overflow: hidden;
}
.process-items[data-v-3a1d2bb9] {
  display: flex;
  flex-direction: column;
  gap: 6px; /* 缩小行间距 */
  overflow-y: auto;
  flex: 1;
}

/* 工序项 */
.process-item[data-v-3a1d2bb9] {
  background: #f5f7fa;
  border-radius: 6px;
  padding: 8px 16px; /* 缩小内边距 */
  cursor: pointer;
  transition: all 0.2s;
  border: 2px solid transparent;
}
.process-item[data-v-3a1d2bb9]:hover {
  background: #ecf5ff;
}
.process-item.selected[data-v-3a1d2bb9] {
  border-color: #409eff;
  background: #ecf5ff;
}
.process-item-content[data-v-3a1d2bb9] {
  display: flex;
  align-items: center;
  gap: 10px; /* 调整间距 */
  flex-wrap: wrap; /* 允许换行 */
}

/* 工序名称 */
.process-item-name[data-v-3a1d2bb9] {
  flex: 1;
  font-size: 14px;
  color: #303133;
  font-weight: 500;
  text-align: left;
}

/* 模式标签 */
.process-mode-tag[data-v-3a1d2bb9] {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  display: inline-block;
  text-align: center;
  min-width: 50px; /* 固定宽度，使其居中 */
}
.process-mode-tag.piece-work[data-v-3a1d2bb9] {
  background-color: #e6f7ff;
  color: #1890ff;
}
.process-mode-tag.send-receive[data-v-3a1d2bb9] {
  background-color: #fff7e6;
  color: #faad14;
}

/* 权限标签 - 圆形文字样式 */
.permission-tags[data-v-3a1d2bb9] {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.permission-tag[data-v-3a1d2bb9] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  background: #1890ff;
  color: white;
  border-radius: 16px; /* 圆形效果 */
  font-size: 12px;
  font-weight: 500;
  max-width: 60px; /* 限制宽度，大约 2 个汉字 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
  transition: all 0.2s;
}

/* 默认指派人标签 - 红色背景 */
.permission-tag.default-assignee[data-v-3a1d2bb9] {
  background: linear-gradient(135deg, #f56c6c 0%, #e74c3c 100%);
  box-shadow: 0 2px 4px rgba(245, 108, 108, 0.4);
}
.permission-tag[data-v-3a1d2bb9]:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(102, 126, 234, 0.4);
  cursor: default;
}

/* 操作按钮 */
.process-item-actions[data-v-3a1d2bb9] {
  display: flex;
  gap: 8px;
  opacity: 1; /* 始终显示 */
}
.text-action-btn[data-v-3a1d2bb9] {
  background: none;
  border: none;
  color: #409eff;
  font-size: 13px;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s;
}
.text-action-btn[data-v-3a1d2bb9]:hover {
  background-color: #ecf5ff;
}
.text-action-btn.delete[data-v-3a1d2bb9] {
  color: #f56c6c;
}
.text-action-btn.delete[data-v-3a1d2bb9]:hover {
  background-color: #fef0f0;
}
.text-action-btn[data-v-3a1d2bb9]:disabled {
  color: #c0c4cc;
  cursor: not-allowed;
}
.text-action-btn[data-v-3a1d2bb9]:disabled:hover {
  background-color: transparent;
}

/* 底部操作栏 */
.process-footer[data-v-3a1d2bb9] {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e8e8e8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0; /* 防止被压缩 */
}
.add-btn[data-v-3a1d2bb9] {
  background-color: #f0f9ff;
  color: #409eff;
  border: 1px dashed #409eff;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.add-btn[data-v-3a1d2bb9]:hover {
  background-color: #ecf5ff;
  border-color: #66b1ff;
}
.footer-actions[data-v-3a1d2bb9] {
  display: flex;
  gap: 12px;
}
.cancel-btn[data-v-3a1d2bb9],
.save-btn[data-v-3a1d2bb9] {
  padding: 8px 20px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}
.cancel-btn[data-v-3a1d2bb9] {
  background-color: #f5f7fa;
  color: #606266;
}
.cancel-btn[data-v-3a1d2bb9]:hover {
  background-color: #e8e8e8;
}
.save-btn[data-v-3a1d2bb9] {
  background-color: #409eff;
  color: white;
}
.save-btn[data-v-3a1d2bb9]:hover {
  background-color: #66b1ff;
}
.save-btn[data-v-3a1d2bb9]:disabled {
  background-color: #a0cfff;
  cursor: not-allowed;
}
.save-btn[data-v-3a1d2bb9]:disabled:hover {
  background-color: #a0cfff;
}

/* 表单覆盖层 */
.process-form-overlay[data-v-3a1d2bb9] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001;
}

/* 表单样式 */
.process-form[data-v-3a1d2bb9] {
  background: white;
  border-radius: 8px;
  padding: 24px;
  width: 90%;
  max-width: 400px; /* 调整宽度 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.process-form h3[data-v-3a1d2bb9] {
  margin: 0 0 20px 0;
  font-size: 16px;
  color: #303133;
  font-weight: 600;
  text-align: center;
}
.form-group[data-v-3a1d2bb9] {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

/* 权限成员区域保持上下布局 */
.form-group-block[data-v-3a1d2bb9] {
  display: block;
}
.form-group-block label[data-v-3a1d2bb9] {
  display: block;
  margin-bottom: 8px;
}

/* 行内表单组（用于同一行显示多个字段） */
.form-row[data-v-3a1d2bb9] {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}
.form-group-inline[data-v-3a1d2bb9] {
  flex: 1;
  margin-bottom: 0;
}
.form-group-inline label[data-v-3a1d2bb9] {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
  display: block;
  margin-bottom: 8px;
  text-align: left;
  white-space: nowrap;
}
.form-group-inline .form-input[data-v-3a1d2bb9],
.form-group-inline .form-select[data-v-3a1d2bb9] {
  width: 100%;
}

/* 移除数字输入框的上下箭头 */
.form-group-inline input[type="number"][data-v-3a1d2bb9]::-webkit-outer-spin-button,
.form-group-inline input[type="number"][data-v-3a1d2bb9]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.form-group-inline input[type="number"][data-v-3a1d2bb9] {
  -moz-appearance: textfield;
}
.form-group label[data-v-3a1d2bb9] {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
  display: inline-block;
  margin-bottom: 0;
  text-align: left;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 80px;
}

/* 权限成员的 label 保持独占一行 */
.form-group-block label[data-v-3a1d2bb9] {
  display: block;
  margin-bottom: 8px;
}
.form-group .form-input[data-v-3a1d2bb9],
.form-group .form-select[data-v-3a1d2bb9] {
  flex: 1;
}
.form-input[data-v-3a1d2bb9],
.form-select[data-v-3a1d2bb9] {
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  font-size: 14px;
  color: #303133;
  transition: all 0.2s;
  width: 100%; /* 确保占满父容器 */
  box-sizing: border-box; /* 包含内边距 */
}
.form-input[data-v-3a1d2bb9]:focus,
.form-select[data-v-3a1d2bb9]:focus {
  border-color: #409eff;
  outline: none;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}
.form-select[data-v-3a1d2bb9] {
  cursor: pointer;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  font-size: 14px;
  color: #303133;
  background-color: white;
  outline: none;
  transition: border-color 0.2s;
}

/* 成员选择器 */
.member-selector[data-v-3a1d2bb9] {
  width: 100%;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  padding: 8px;
  max-height: 200px;
  overflow-y: auto;
  background-color: white;
}
.member-label-row[data-v-3a1d2bb9] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.member-label-row label[data-v-3a1d2bb9] {
  margin-bottom: 0;
}
.member-action-btn[data-v-3a1d2bb9] {
  padding: 3px 14px;
  font-size: 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background: #fff;
  color: #606266;
  cursor: pointer;
  transition: all 0.2s;
}
.member-action-btn[data-v-3a1d2bb9]:hover {
  border-color: #409eff;
  color: #409eff;
}
.member-item[data-v-3a1d2bb9] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s;
}
.member-item[data-v-3a1d2bb9]:hover {
  background-color: #f5f7fa;
}
.member-item input[type="checkbox"][data-v-3a1d2bb9] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  margin: 0;
}
.member-item span[data-v-3a1d2bb9] {
  flex: 1;
  font-size: 14px;
  color: #303133;
}
.form-select-multiple[data-v-3a1d2bb9] {
  min-height: 100px;
  cursor: pointer;
}
.form-tip[data-v-3a1d2bb9] {
  display: block;
  margin-top: 6px;
  color: #f06856;
  font-size: 13px;
  line-height: 1.5;
}
.form-actions[data-v-3a1d2bb9] {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}
.form-actions .cancel-btn[data-v-3a1d2bb9],
.form-actions .save-btn[data-v-3a1d2bb9] {
  min-width: 80px;
}

/* 关闭确认弹窗 */
.confirm-dialog[data-v-3a1d2bb9] {
  background: white;
  border-radius: 8px;
  padding: 24px;
  width: 90%;
  max-width: 350px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.confirm-dialog h4[data-v-3a1d2bb9] {
  margin: 0 0 16px 0;
  font-size: 16px;
  color: #303133;
  font-weight: 600;
}
.confirm-dialog p[data-v-3a1d2bb9] {
  margin: 0 0 20px 0;
  font-size: 14px;
  color: #606266;
  line-height: 1.5;
}
.confirm-actions[data-v-3a1d2bb9] {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
.confirm-actions .cancel-btn[data-v-3a1d2bb9],
.confirm-actions .save-btn[data-v-3a1d2bb9] {
  min-width: 80px;
}

/* 删除确认按钮红色样式 */
.delete-confirm-btn[data-v-3a1d2bb9] {
  background-color: #f56c6c !important;
  color: white !important;
}
.delete-confirm-btn[data-v-3a1d2bb9]:hover {
  background-color: #f78989 !important;
}

/* 成员管理弹窗样式 */
.member-management-modal[data-v-2c1756c6] {
  background: white;
  border-radius: 12px;
  width: 600px;
  height: 85vh;
  min-height: 500px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  animation: slideUpModal-2c1756c6 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes slideUpModal-2c1756c6 {
from {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
}
to {
    opacity: 1;
    transform: translateY(0) scale(1);
}
}
.modal-header[data-v-2c1756c6] {
  padding: 16px 20px;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fafafa;
}
.modal-header h2[data-v-2c1756c6] {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}
.close-btn[data-v-2c1756c6] {
  background: none;
  border: none;
  font-size: 28px;
  color: #999;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.3s;
}
.close-btn[data-v-2c1756c6]:hover {
  background-color: #f5f5f5;
  color: #333;
}
.modal-body[data-v-2c1756c6] {
  padding: 10px;
  overflow-y: auto;
  flex: 1;
}

/* 成员选择器容器 */
.member-selector-container[data-v-2c1756c6] {
  display: flex;
  gap: 12px;
  padding: 0;
  flex: 1;
  min-height: 0;
}

/* 成员列 */
.member-column[data-v-2c1756c6] {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  overflow: hidden;
  min-height: 0;
}
.member-column h3[data-v-2c1756c6] {
  margin: 0;
  padding: 5px 12px;
  background: #fff;
  color: #333;
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px solid #e8e8e8;
}

/* 成员列表 */
.member-list[data-v-2c1756c6] {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  background-color: #fafafa;
  min-height: 0;
}

/* 成员项 */
.member-item[data-v-2c1756c6] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin-bottom: 4px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  background-color: white;
  min-width: 0;
}
.member-item[data-v-2c1756c6]:hover {
  border-color: #d9d9d9;
  background-color: #f5f5f5;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}
.member-item.selected[data-v-2c1756c6] {
  background-color: #fafafa;
  border-color: #d9d9d9;
  border-left: 3px solid #666;
}
.member-item.selected[data-v-2c1756c6]:hover {
  background-color: #f0f0f0;
}

/* 成员信息 */
.member-info[data-v-2c1756c6] {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  flex: 1;
}
.member-name[data-v-2c1756c6] {
  font-size: 13px;
  font-weight: 500;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}
.member-id[data-v-2c1756c6] {
  font-size: 12px;
  color: #999;
  font-family: monospace;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 添加/移除按钮 */
.add-btn[data-v-2c1756c6],
.remove-btn[data-v-2c1756c6] {
  background: #fff;
  border: 1px solid #dcdfe6;
  font-size: 14px;
  color: #606266;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s;
  flex-shrink: 0;
  margin-left: 6px;
}
.add-btn[data-v-2c1756c6]:hover,
.remove-btn[data-v-2c1756c6]:hover {
  color: #1890ff;
  border-color: #1890ff;
  background: #f0f5ff;
}
.add-btn[data-v-2c1756c6]:active,
.remove-btn[data-v-2c1756c6]:active {
  transform: scale(0.95);
}

/* 空消息 */
.empty-message[data-v-2c1756c6] {
  text-align: center;
  padding: 40px 20px;
  color: #999;
  font-size: 14px;
}

/* 弹窗底部 */
.modal-footer[data-v-2c1756c6] {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid #e8e8e8;
  background-color: #fafafa;
}
.cancel-btn[data-v-2c1756c6],
.save-btn[data-v-2c1756c6] {
  padding: 6px 18px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s;
  font-weight: 500;
}
.cancel-btn[data-v-2c1756c6] {
  background-color: #fff;
  border: 1px solid #d9d9d9;
  color: #666;
}
.cancel-btn[data-v-2c1756c6]:hover {
  border-color: #999;
  color: #333;
  background-color: #f5f5f5;
}
.save-btn[data-v-2c1756c6] {
  background: #1890ff;
  border: none;
  color: white;
  box-shadow: 0 2px 6px rgba(24, 144, 255, 0.3);
}
.save-btn[data-v-2c1756c6]:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 10px rgba(102, 126, 234, 0.4);
}
.save-btn[data-v-2c1756c6]:active {
  transform: translateY(0);
}

/* 滚动条样式 */
.member-list[data-v-2c1756c6]::-webkit-scrollbar {
  width: 6px;
}
.member-list[data-v-2c1756c6]::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}
.member-list[data-v-2c1756c6]::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}
.member-list[data-v-2c1756c6]::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 响应式设计 */
@media (max-width: 768px) {
.member-management-modal[data-v-2c1756c6] {
    padding: 25px;
    max-width: 95%;
}
.member-selector-container[data-v-2c1756c6] {
    flex-direction: column;
}
.member-column[data-v-2c1756c6] {
    width: 100%;
}
.member-item[data-v-2c1756c6] {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}
.add-btn[data-v-2c1756c6],
  .remove-btn[data-v-2c1756c6] {
    width: 100%;
    margin-top: 8px;
}
}


.modal-overlay[data-v-1ed64b12] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
.modal-dialog[data-v-1ed64b12] {
  background: #fff;
  border-radius: 8px;
  width: 700px;
  max-width: 90%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.modal-header[data-v-1ed64b12] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e4e7ed;
  background: #fff;
  color: #333;
  border-radius: 8px 8px 0 0;
}
.modal-header h3[data-v-1ed64b12] {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}
.close-btn[data-v-1ed64b12] {
  background: none;
  border: none;
  color: #666;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.2s;
}
.close-btn[data-v-1ed64b12]:hover {
  background-color: #f5f5f5;
}
.modal-body[data-v-1ed64b12] {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}
.template-list[data-v-1ed64b12] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.template-item[data-v-1ed64b12] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f5f7fa;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  transition: all 0.2s;
}
.template-item[data-v-1ed64b12]:hover {
  background: #f5f5f5;
  border-color: #d9d9d9;
}
.template-info[data-v-1ed64b12] {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.template-name[data-v-1ed64b12] {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
}
.template-actions[data-v-1ed64b12] {
  display: flex;
  gap: 8px;
}
.action-btn[data-v-1ed64b12] {
  padding: 6px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  background: #fff;
}
.rename-btn[data-v-1ed64b12] {
  color: #1890ff;
  border-color: #1890ff;
}
.rename-btn[data-v-1ed64b12]:hover {
  background: #1890ff;
  color: #fff;
}
.delete-btn[data-v-1ed64b12] {
  color: #f56c6c;
  border-color: #f56c6c;
}
.delete-btn[data-v-1ed64b12]:hover {
  background: #f56c6c;
  color: #fff;
}
.empty-state[data-v-1ed64b12] {
  text-align: center;
  padding: 40px;
  color: #909399;
}
.modal-footer[data-v-1ed64b12] {
  display: flex;
  justify-content: flex-end;
  padding: 16px 20px;
  border-top: 1px solid #e4e7ed;
  background: #f5f7fa;
}
.btn[data-v-1ed64b12] {
  padding: 8px 20px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
}
.btn-close[data-v-1ed64b12] {
  background-color: #fff;
  border-color: #dcdfe6;
  color: #606266;
}
.btn-close[data-v-1ed64b12]:hover {
  background-color: #f5f7fa;
  border-color: #c0c4cc;
}

/* 重命名弹窗 */
.rename-overlay[data-v-1ed64b12] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2100;
}
.rename-dialog[data-v-1ed64b12] {
  background: #fff;
  border-radius: 8px;
  width: 450px;
  max-width: 90%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
.rename-header[data-v-1ed64b12] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e4e7ed;
  background: #fff;
  color: #333;
  border-radius: 8px 8px 0 0;
}
.rename-header h4[data-v-1ed64b12] {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}
.rename-body[data-v-1ed64b12] {
  padding: 24px 20px;
}
.form-item[data-v-1ed64b12] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-label[data-v-1ed64b12] {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}
.form-input[data-v-1ed64b12] {
  height: 36px;
  padding: 0 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  color: #606266;
  transition: border-color 0.2s;
}
.form-input[data-v-1ed64b12]:focus {
  outline: none;
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
}
.rename-footer[data-v-1ed64b12] {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid #e4e7ed;
  background-color: #f5f7fa;
}
.btn-cancel[data-v-1ed64b12] {
  background-color: #fff;
  border-color: #dcdfe6;
  color: #606266;
}
.btn-cancel[data-v-1ed64b12]:hover {
  background-color: #f5f7fa;
  border-color: #c0c4cc;
}
.btn-confirm[data-v-1ed64b12] {
  background: #1890ff;
  color: #fff;
  border: none;
}
.btn-confirm[data-v-1ed64b12]:hover {
  background: #40a9ff;
}

/* ========================================
   工序看板容器
   ======================================== */
.process-board-content[data-v-5f9b2282] {
  width: 100%;
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 工序容器 */
.processes-container[data-v-5f9b2282] {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1;
  padding-bottom: 8px;
  min-height: 0;
  touch-action: pan-x;
}

/* 工序列 */
.process-column[data-v-5f9b2282] {
  flex: 0 0 auto;
  width: 280px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 120px);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* 工序头部 */
.process-header[data-v-5f9b2282] {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 8px 16px;
  border-radius: 4px 4px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.process-title[data-v-5f9b2282] {
  margin: 0;
  font-size: 14px;
  font-weight: bold;
}
.process-count[data-v-5f9b2282] {
  background-color: rgba(0, 0, 0, 0.1);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  color: #606266;
}

/* 款式列表 */
.styles-list[data-v-5f9b2282] {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 9px;
  min-height: 0;
  box-sizing: border-box;
}

/* 款式卡片 */
.style-card[data-v-5f9b2282] {
  background-color: #fff;
  border-radius: 3px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* 注意：不能使用 overflow: hidden，会裁剪 tooltip */
  display: flex;
  flex-direction: column;
  border: 1px solid #e0e0e0;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}
.style-card[data-v-5f9b2282]:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 选中状态的卡片 */
.style-card.selected[data-v-5f9b2282] {
  border: 1px solid #409eff;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
  transform: translateY(-2px);
}
.style-card.selected[data-v-5f9b2282]:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

/* 操作人按钮 - 定位在卡片右上角 */
.operator-btn[data-v-5f9b2282] {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  padding: 4px 8px;
  font-size: 12px;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  color: #171e25;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.operator-btn[data-v-5f9b2282]:hover {
  background-color: rgba(243, 171, 171, 0.8);
}
.operator-btn.operator-unassigned[data-v-5f9b2282] {
  background-color: #f56c6c;
  color: #fff;
}
.operator-btn.operator-unassigned[data-v-5f9b2282]:hover {
  background-color: #e04040;
}

/* 内容区域：图片 + 文本信息 */
.style-content[data-v-5f9b2282] {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* 左侧区域：图片 */
.style-left-section[data-v-5f9b2282] {
  width: 105px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  background-color: #fff;
  position: relative;
  z-index: 1;
}

/* 图片区域 - 竖屏 16:9 */
.style-image[data-v-5f9b2282] {
  width: 105px;
  height: 160px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  z-index: 1;
}

/* 紧急程度指示条 */
.urgent-indicator[data-v-5f9b2282] {
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  z-index: 1;
}
.urgent-indicator.urgent-1[data-v-5f9b2282] {
  background-color: #ffd700;
}
.urgent-indicator.urgent-2[data-v-5f9b2282] {
  background-color: #fa8c16;
}
.urgent-indicator.urgent-3[data-v-5f9b2282] {
  background-color: #f56c6c;
}
.style-image img[data-v-5f9b2282] {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.3s ease;
}
.no-image[data-v-5f9b2282] {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;
  color: #909399;
  font-size: 13px;
  text-align: center;
}
.style-card:hover .style-image img[data-v-5f9b2282] {
  transform: scale(1.05);
}

/* 底部按钮区域 */
.style-actions[data-v-5f9b2282] {
  display: flex;
  gap: 1px;
  padding: 6px 8px;
  border-top: 1px solid #e0e0e0;
  background-color: #fff;
  justify-content: space-between;
  flex-wrap: nowrap;
  flex-shrink: 0;
  position: relative;
  z-index: 20;
}
.action-btn[data-v-5f9b2282] {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 4px;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 1;
  min-width: 18px;
  position: relative;
  z-index: 10;
}

/* 禁用状态的按钮 */
.disabled-btn[data-v-5f9b2282] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 自定义 tooltip */
.action-btn[data-v-5f9b2282]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  /* 悬停 0.5 秒后显示 */
  transition-delay: 0.5s;
  z-index: 9999;
}
.action-btn[data-v-5f9b2282]::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-5px);
  border: 5px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.85);
  opacity: 0;
  transition: opacity 0.2s ease;
  transition-delay: 0.5s;
  pointer-events: none;
  z-index: 1000;
}
.action-btn[data-v-5f9b2282]:hover::after,
.action-btn[data-v-5f9b2282]:hover::before {
  opacity: 1;
}
.action-btn[data-v-5f9b2282]:hover {
  background-color: #ecf5ff;
  transform: scale(1.05);
}
.action-btn img[data-v-5f9b2282] {
  width: 18px;
  height: 18px;
  -o-object-fit: contain;
     object-fit: contain;
}

/* 激活状态时隐藏原图 */
.action-btn.active img[data-v-5f9b2282] {
  display: none !important;
}
.action-btn.active.launch-active[data-v-5f9b2282] {
  background-image: url('https://qiliosstest.oss-cn-shanghai.aliyuncs.com/BFWEB/resource/launch-active.png');
  background-size: 18px 18px;
  background-repeat: no-repeat;
  background-position: center;
}
.action-btn.active.collection-active[data-v-5f9b2282] {
  background-image: url('https://qiliosstest.oss-cn-shanghai.aliyuncs.com/BFWEB/resource/collection-active.png');
  background-size: 18px 18px;
  background-repeat: no-repeat;
  background-position: center;
}
.action-btn.active.urgent-active[data-v-5f9b2282] {
  background-image: url('https://qiliosstest.oss-cn-shanghai.aliyuncs.com/BFWEB/resource/ergent-active.png');
  background-size: 18px 18px;
  background-repeat: no-repeat;
  background-position: center;
}
.action-btn.active.lock-active[data-v-5f9b2282] {
  background-image: url('https://qiliosstest.oss-cn-shanghai.aliyuncs.com/BFWEB/resource/lock-active.png');
  background-size: 18px 18px;
  background-repeat: no-repeat;
  background-position: center;
}

/* 右侧文本信息 */
.style-info[data-v-5f9b2282] {
  flex: 1;
  padding: 10px;
  padding-bottom: 25px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
  overflow: hidden;
  background-color: #fff;
  position: relative;
}

/* 款名标题 - 独立样式 */
.style-name[data-v-5f9b2282] {
  margin: 0 0 2px 0;
  font-size: 15px;
  font-weight: bold;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  line-height: 1.4;
  text-align: left;
}

/* 详细信息行 - 统一样式 */
.style-detail[data-v-5f9b2282],
.style-category[data-v-5f9b2282] {
  margin: 2px 3px;
  font-size: 13px;
  color: #606266;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  line-height: 1.5;
}
.dot[data-v-5f9b2282] {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  flex-shrink: 0;
}

/* 样衣数量 - 右下角绝对定位 */
.style-sample-count[data-v-5f9b2282] {
  position: absolute;
  bottom: 5px;
  right: 10px;
  font-size: 15px;
  color: #909399;
  font-weight: bold;
}

/* 款式信息中的彩色圆点 */
.dot-red[data-v-5f9b2282] {
  background-color: #FF6B6B;
}
.dot-blue[data-v-5f9b2282] {
  background-color: #45B7D1;
}
.dot-orange[data-v-5f9b2282] {
  background-color: #FFA07A;
}
.dot-green[data-v-5f9b2282] {
  background-color: #98D8C8;
}
.dot-yellow[data-v-5f9b2282] {
  background-color: #F7DC6F;
}
.dot-purple[data-v-5f9b2282] {
  background-color: #BB8FCE;
}
.dot-pink[data-v-5f9b2282] {
  background-color: #F1948A;
}
.dot-cyan[data-v-5f9b2282] {
  background-color: #76D7C4;
}
.dot-indigo[data-v-5f9b2282] {
  background-color: #6C7AE0;
}
.dot-teal[data-v-5f9b2282] {
  background-color: #73C6B6;
}

/* ========================================
   加载更多提示样式
   ======================================== */
.loading-more[data-v-5f9b2282],
.load-more-tip[data-v-5f9b2282],
.no-more-tip[data-v-5f9b2282] {
  text-align: center;
  padding: 12px;
  font-size: 12px;
  color: #999;
}
.loading-spinner[data-v-5f9b2282] {
  display: inline-block;
  color: #409EFF;
  font-weight: 500;
}
.load-more-tip[data-v-5f9b2282] {
  color: #909399;
}
.no-more-tip[data-v-5f9b2282] {
  color: #C0C4CC;
}

/* ========================================
   滚动条样式
   ======================================== */
.processes-container[data-v-5f9b2282]::-webkit-scrollbar {
  height: 8px;
}
.processes-container[data-v-5f9b2282]::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}
.processes-container[data-v-5f9b2282]::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}
.processes-container[data-v-5f9b2282]::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
.styles-list[data-v-5f9b2282]::-webkit-scrollbar {
  width: 6px;
}
.styles-list[data-v-5f9b2282]::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}
.styles-list[data-v-5f9b2282]::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}
.styles-list[data-v-5f9b2282]::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 加急弹窗样式 */
.modal-overlay[data-v-5f9b2282] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.urgent-modal[data-v-5f9b2282] {
  background: white;
  border-radius: 8px;
  width: 320px;
  max-width: 90%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.urgent-modal .modal-header[data-v-5f9b2282] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #ebeef5;
}
.urgent-modal .modal-header h3[data-v-5f9b2282] {
  margin: 0;
  font-size: 16px;
  color: #303133;
}
.urgent-modal .close-btn[data-v-5f9b2282] {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #909399;
  transition: color 0.3s;
}
.urgent-modal .close-btn[data-v-5f9b2282]:hover {
  color: #409eff;
}
.urgent-modal .modal-body[data-v-5f9b2282] {
  padding: 20px;
}
.urgent-options[data-v-5f9b2282] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.urgent-option[data-v-5f9b2282] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}
.urgent-option[data-v-5f9b2282]:hover {
  border-color: #409eff;
  background: #f5f7fa;
}
.urgent-option.selected[data-v-5f9b2282] {
  border-color: #409eff;
  background: #ecf5ff;
}
.urgent-level[data-v-5f9b2282] {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}
.urgent-level.urgent-0[data-v-5f9b2282] {
  background-color: #dcdfe6;
}
.urgent-level.urgent-1[data-v-5f9b2282] {
  background-color: #ffd700;
}
.urgent-level.urgent-2[data-v-5f9b2282] {
  background-color: #fa8c16;
}
.urgent-level.urgent-3[data-v-5f9b2282] {
  background-color: #f56c6c;
}
.urgent-label[data-v-5f9b2282] {
  font-size: 14px;
  color: #303133;
}
.urgent-modal .modal-footer[data-v-5f9b2282] {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid #ebeef5;
}
.urgent-modal .btn-cancel[data-v-5f9b2282],
.urgent-modal .btn-submit[data-v-5f9b2282] {
  padding: 8px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}
.urgent-modal .btn-cancel[data-v-5f9b2282] {
  border: 1px solid #dcdfe6;
  background: white;
  color: #606266;
}
.urgent-modal .btn-cancel[data-v-5f9b2282]:hover {
  color: #409eff;
  border-color: #409eff;
}
.urgent-modal .btn-submit[data-v-5f9b2282] {
  border: 1px solid #409eff;
  background: #409eff;
  color: white;
}
.urgent-modal .btn-submit[data-v-5f9b2282]:hover {
  background: #66b1ff;
  border-color: #66b1ff;
}
.urgent-modal .btn-submit[data-v-5f9b2282]:disabled {
  background: #a0cfff;
  border-color: #a0cfff;
  cursor: not-allowed;
}

/* 任务转移弹窗样式 */
.transfer-modal[data-v-5f9b2282] {
  background: white;
  border-radius: 8px;
  width: 1000px;
  height: 700px;
  max-width: none;
  max-height: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.transfer-modal .modal-header[data-v-5f9b2282] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #ebeef5;
}
.transfer-modal .modal-header h3[data-v-5f9b2282] {
  margin: 0;
  font-size: 16px;
  color: #303133;
}
.transfer-modal .close-btn[data-v-5f9b2282] {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #909399;
  transition: color 0.3s;
}
.transfer-modal .close-btn[data-v-5f9b2282]:hover {
  color: #409eff;
}
.transfer-modal .modal-body[data-v-5f9b2282] {
  padding: 0;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 样衣信息区域 */
.transfer-sample-section[data-v-5f9b2282] {
  border-bottom: 1px solid #ebeef5;
  flex-shrink: 0;
  max-height: 200px;
  display: flex;
  flex-direction: column;
}
.transfer-sample-table-wrapper[data-v-5f9b2282] {
  overflow-y: auto;
  padding: 8px;
}
.transfer-sample-table[data-v-5f9b2282] {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.transfer-sample-table th[data-v-5f9b2282],
.transfer-sample-table td[data-v-5f9b2282] {
  padding: 8px 10px;
  border: 1px solid #ebeef5;
  text-align: center;
  vertical-align: middle;
}
.transfer-sample-table th[data-v-5f9b2282] {
  background: #f5f7fa;
  color: #606266;
  font-weight: 500;
  position: sticky;
  top: 0;
  z-index: 1;
}
.transfer-sample-table td[data-v-5f9b2282] {
  color: #303133;
}
.transfer-sample-table .checkbox-col[data-v-5f9b2282] {
  text-align: center;
}
.transfer-sample-table .checkbox-col input[type="checkbox"][data-v-5f9b2282] {
  cursor: pointer;
}
.transfer-sample-table tbody tr[data-v-5f9b2282] {
  cursor: pointer;
  transition: background-color 0.2s;
}
.transfer-sample-table tbody tr[data-v-5f9b2282]:hover {
  background-color: #f5f7fa;
}
.transfer-sample-table tbody tr.selected[data-v-5f9b2282] {
  background-color: #ecf5ff;
}
.transfer-sample-table .remark-cell[data-v-5f9b2282] {
  text-align: left;
  color: #909399;
}
.transfer-sample-table .empty-data[data-v-5f9b2282] {
  color: #c0c4cc;
  padding: 20px;
}
.transfer-container[data-v-5f9b2282] {
  display: flex;
  height: 100%;
}

/* 左侧：工序列表 */
.transfer-left[data-v-5f9b2282] {
  width: 200px;
  border-right: 1px solid #ebeef5;
  display: flex;
  flex-direction: column;
}
.transfer-section-title[data-v-5f9b2282] {
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  background: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
}
.transfer-process-list[data-v-5f9b2282] {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}
.transfer-process-item[data-v-5f9b2282] {
  padding: 10px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  margin-bottom: 4px;
}
.transfer-process-item[data-v-5f9b2282]:hover {
  background: #f5f7fa;
}
.transfer-process-item.selected[data-v-5f9b2282] {
  background: #ecf5ff;
  color: #409eff;
}
.transfer-process-name[data-v-5f9b2282] {
  font-size: 14px;
  color: #606266;
}
.transfer-process-item.selected .transfer-process-name[data-v-5f9b2282] {
  color: #409eff;
  font-weight: 500;
}

/* 右侧：权限成员 */
.transfer-right[data-v-5f9b2282] {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.transfer-members-list[data-v-5f9b2282] {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
}
.transfer-member-item[data-v-5f9b2282] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background: white;
  transition: all 0.3s;
}
.transfer-member-item[data-v-5f9b2282]:hover {
  border-color: #409eff;
  background: #f5f7fa;
}
.transfer-member-item.selected[data-v-5f9b2282] {
  border-color: #409eff;
  background: #ecf5ff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
}
.transfer-member-item.default-assignee[data-v-5f9b2282] {
  border-color: #409eff;
  background: #ecf5ff;
}
.member-name[data-v-5f9b2282] {
  font-size: 14px;
  color: #303133;
}
.member-badge[data-v-5f9b2282] {
  padding: 2px 8px;
  background: #409eff;
  color: white;
  border-radius: 3px;
  font-size: 12px;
}
.transfer-no-members[data-v-5f9b2282],
.transfer-no-selection[data-v-5f9b2282] {
  padding: 40px 16px;
  text-align: center;
  color: #c0c4cc;
  font-size: 14px;
}
.transfer-modal .modal-footer[data-v-5f9b2282] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid #ebeef5;
}
.footer-options[data-v-5f9b2282] {
  flex: 1;
}
.footer-options .checkbox-label[data-v-5f9b2282] {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 14px;
  color: #606266;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.footer-options .checkbox-label input[type="checkbox"][data-v-5f9b2282] {
  cursor: pointer;
  width: 16px;
  height: 16px;
}
.footer-options .checkbox-label[data-v-5f9b2282]:hover {
  color: #409eff;
}
.footer-right[data-v-5f9b2282] {
  display: flex;
  gap: 12px;
}
.transfer-modal .btn-cancel[data-v-5f9b2282],
.transfer-modal .btn-submit[data-v-5f9b2282],
.transfer-modal .btn-reset[data-v-5f9b2282] {
  padding: 8px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}
.transfer-modal .btn-cancel[data-v-5f9b2282] {
  border: 1px solid #dcdfe6;
  background: white;
  color: #606266;
}
.transfer-modal .btn-cancel[data-v-5f9b2282]:hover {
  color: #409eff;
  border-color: #409eff;
}
.transfer-modal .btn-reset[data-v-5f9b2282] {
  border: 1px solid #e6a23c;
  background: #fdf6ec;
  color: #e6a23c;
}
.transfer-modal .btn-reset[data-v-5f9b2282]:hover {
  background: #e6a23c;
  color: white;
}
.transfer-modal .btn-submit[data-v-5f9b2282] {
  border: 1px solid #409eff;
  background: #409eff;
  color: white;
}
.transfer-modal .btn-submit[data-v-5f9b2282]:hover {
  background: #66b1ff;
  border-color: #66b1ff;
}
.transfer-modal .btn-submit[data-v-5f9b2282]:disabled {
  background: #a0cfff;
  border-color: #a0cfff;
  cursor: not-allowed;
}

/* 卡片设置菜单样式 */
.card-set-menu-overlay[data-v-5f9b2282] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
}
.card-set-menu[data-v-5f9b2282] {
  position: fixed;
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  min-width: 140px;
  z-index: 10001;
  padding: 8px 0;
}
.card-set-menu-item[data-v-5f9b2282] {
  padding: 10px 16px;
  cursor: pointer;
  font-size: 14px;
  color: #303133;
  transition: all 0.3s;
  white-space: nowrap;
}
.card-set-menu-item[data-v-5f9b2282]:hover {
  background: #f5f7fa;
  color: #409eff;
}

/* 卡片字段设置弹窗样式 */
.field-settings-modal[data-v-5f9b2282] {
  background: white;
  border-radius: 8px;
  width: 800px;
  height: 600px;
  max-width: 90%;
  max-height: 80vh;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.field-settings-modal .modal-header[data-v-5f9b2282] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #ebeef5;
}
.field-settings-modal .modal-header h3[data-v-5f9b2282] {
  margin: 0;
  font-size: 16px;
  color: #303133;
}
.field-settings-modal .close-btn[data-v-5f9b2282] {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #909399;
  transition: color 0.3s;
}
.field-settings-modal .close-btn[data-v-5f9b2282]:hover {
  color: #409eff;
}
.field-settings-modal .modal-body[data-v-5f9b2282] {
  padding: 0;
  flex: 1;
  overflow: hidden;
}
.field-settings-container[data-v-5f9b2282] {
  display: flex;
  height: 100%;
}
.field-column[data-v-5f9b2282] {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #ebeef5;
}
.field-column[data-v-5f9b2282]:last-child {
  border-right: none;
}
.field-column-title[data-v-5f9b2282] {
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  background: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
}
.field-list[data-v-5f9b2282] {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}
.field-item[data-v-5f9b2282] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background: white;
  transition: all 0.3s;
}
.field-item.visible-field-item[data-v-5f9b2282] {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
}
.action-buttons[data-v-5f9b2282] {
  display: flex;
  gap: 4px;
}
.sort-btn[data-v-5f9b2282] {
  padding: 4px 8px;
  font-size: 12px;
  min-width: 24px;
}
.sort-btn[data-v-5f9b2282]:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.sort-btn[data-v-5f9b2282]:hover:not(:disabled) {
  color: #409eff;
  border-color: #409eff;
}
.field-item[data-v-5f9b2282]:hover {
  border-color: #409eff;
  background: #f5f7fa;
}
.field-item-selected[data-v-5f9b2282] {
  border-color: #409eff;
  background: #ecf5ff;
}
.field-label[data-v-5f9b2282] {
  font-size: 14px;
  color: #303133;
}
.field-btn[data-v-5f9b2282] {
  padding: 4px 12px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.3s;
  border: 1px solid #dcdfe6;
  background: white;
  color: #606266;
}
.field-btn[data-v-5f9b2282]:hover {
  color: #409eff;
  border-color: #409eff;
}
.field-btn.add-btn[data-v-5f9b2282]:hover {
  color: #67c23a;
  border-color: #67c23a;
}
.field-btn.remove-btn[data-v-5f9b2282]:hover {
  color: #f56c6c;
  border-color: #f56c6c;
}
.field-empty[data-v-5f9b2282] {
  padding: 40px 16px;
  text-align: center;
  color: #c0c4cc;
  font-size: 14px;
}

/* 字段设置弹窗底部样式 */
.field-settings-modal .modal-footer[data-v-5f9b2282] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid #ebeef5;
  background: #fff;
}
.field-settings-modal .footer-options[data-v-5f9b2282] {
  flex: 1;
}
.field-settings-modal .footer-right[data-v-5f9b2282] {
  display: flex;
  gap: 12px;
}

/* 字段设置弹窗按钮统一样式 */
.field-settings-modal .btn-reset[data-v-5f9b2282],
.field-settings-modal .btn-cancel[data-v-5f9b2282],
.field-settings-modal .btn-submit[data-v-5f9b2282] {
  padding: 8px 20px !important;
  border-radius: 4px !important;
  cursor: pointer;
  font-size: 14px !important;
  font-weight: 400 !important;
  transition: all 0.3s;
  min-width: 70px !important;
  height: 36px !important;
  line-height: 20px !important;
  border: 1px solid;
  box-sizing: border-box;
}
.field-settings-modal .btn-cancel[data-v-5f9b2282] {
  border-color: #dcdfe6 !important;
  background: #fff !important;
  color: #606266 !important;
}
.field-settings-modal .btn-cancel[data-v-5f9b2282]:hover {
  color: #409eff !important;
  border-color: #409eff !important;
  background: #ecf5ff !important;
}
.field-settings-modal .btn-reset[data-v-5f9b2282] {
  border-color: #409eff !important;
  background: #fff !important;
  color: #409eff !important;
}
.field-settings-modal .btn-reset[data-v-5f9b2282]:hover {
  color: #66b1ff !important;
  border-color: #66b1ff !important;
  background: #ecf5ff !important;
}
.field-settings-modal .btn-submit[data-v-5f9b2282] {
  border-color: #409eff !important;
  background: #409eff !important;
  color: #fff !important;
}
.field-settings-modal .btn-submit[data-v-5f9b2282]:hover {
  background: #66b1ff !important;
  border-color: #66b1ff !important;
}


.delivery-board-content[data-v-39474224] {
  width: 100%;
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.delivery-columns-container[data-v-39474224] {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1;
  padding-bottom: 8px;
  min-height: 0;
}
.delivery-column[data-v-39474224] {
  flex: 0 0 auto;
  width: 260px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 120px);
  max-height: calc(100vh - 120px);
  overflow: hidden;
  box-sizing: border-box;
}
.delivery-column.is-today[data-v-39474224] {
  border-top: 3px solid #409eff;
}
.delivery-column.is-weekend[data-v-39474224] {
  background-color: #fafafa;
}
.delivery-header[data-v-39474224] {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 8px 12px;
  border-radius: 4px 4px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.is-weekend .delivery-header[data-v-39474224] {
  background: #f9f9f9;
}
.delivery-date[data-v-39474224] {
  font-size: 13px;
  font-weight: 600;
  color: #303133;
}
.is-today .delivery-date[data-v-39474224] {
  color: #409eff;
}
.delivery-count[data-v-39474224] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background-color: #f0f9ff;
  color: #409eff;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 600;
}
.delivery-styles-list[data-v-39474224] {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px;
}
.empty-day[data-v-39474224] {
  text-align: center;
  color: #c0c4cc;
  font-size: 12px;
  padding: 20px 0;
}
.loading-more[data-v-39474224] {
  text-align: center;
  padding: 10px 0;
  color: #909399;
  font-size: 12px;
}
.no-more-tip[data-v-39474224] {
  text-align: center;
  padding: 8px 0;
  color: #c0c4cc;
  font-size: 11px;
}

/* 卡片样式 */
.delivery-column .style-card[data-v-39474224] {
  position: relative;
  background: #fff;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  padding: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.3s;
}
.delivery-column .style-card[data-v-39474224]:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
  border-color: #409eff;
}

/* 逾期卡片左边框色 */
.delivery-column .style-card.overdue-red[data-v-39474224] {
  border-left: 4px solid #f56c6c;
}
.delivery-column .style-card.overdue-orange[data-v-39474224] {
  border-left: 4px solid #e6a23c;
}
.delivery-column .style-card.overdue-yellow[data-v-39474224] {
  border-left: 4px solid #d4c00e;
}
.delivery-column .style-content[data-v-39474224] {
  display: flex;
  gap: 8px;
}
.delivery-column .style-left-section[data-v-39474224] {
  flex-shrink: 0;
}
.delivery-column .style-image[data-v-39474224] {
  width: 50px;
  height: 50px;
  border-radius: 4px;
  overflow: hidden;
  background-color: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.delivery-column .style-image img[data-v-39474224] {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.delivery-column .no-image[data-v-39474224] {
  color: #c0c4cc;
  font-size: 10px;
  text-align: center;
}
.delivery-column .style-info[data-v-39474224] {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.delivery-column .style-field[data-v-39474224] {
  display: flex;
  align-items: baseline;
  font-size: 12px;
  line-height: 1.4;
}
.delivery-column .field-label[data-v-39474224] {
  flex-shrink: 0;
  color: #909399;
  white-space: nowrap;
}
.delivery-column .field-value[data-v-39474224] {
  color: #303133;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 超期/距交期字段样式 */
.delivery-column .overdue-field .field-value[data-v-39474224],
.delivery-column .remaining-field .field-value[data-v-39474224] {
  font-weight: 600;
}
.delivery-column .overdue-field.days-red .field-value[data-v-39474224] { color: #f56c6c;
}
.delivery-column .overdue-field.days-orange .field-value[data-v-39474224] { color: #e6a23c;
}
.delivery-column .overdue-field.days-yellow .field-value[data-v-39474224] { color: #c8c800;
}
.delivery-column .remaining-field .field-value[data-v-39474224] { color: #409eff;
}
.delivery-column .urgent-indicator[data-v-39474224] {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  z-index: 5;
}
.delivery-column .urgent-1[data-v-39474224] { background-color: #f56c6c;
}
.delivery-column .urgent-2[data-v-39474224] { background-color: #e6a23c;
}
.delivery-column .urgent-3[data-v-39474224] { background-color: #f56c6c; box-shadow: 0 0 6px #f56c6c;
}

/* ========================================
   款式资料库容器
   ======================================== */
.style-library-content[data-v-14e2d863] {
  width: 100%;
  padding: 1px; /* 从 20px 减小到 10px */
}
.style-library-container[data-v-14e2d863] {
  background: white;
  border-radius: 8px;
  padding: 3px; /* 从 20px 减小到 12px */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  height: calc(100vh - 110px); /* 固定高度 */
}
.library-header[data-v-14e2d863] {
  margin-bottom: 10px; /* 从 20px 减小到 10px */
}
.library-header h1[data-v-14e2d863] {
  color: #303133;
  font-size: 18px; /* 从 20px 减小到 18px */
  margin: 0;
}

/* 表格包装器 - 带独立滚动 */
.library-table-wrapper[data-v-14e2d863] {
  flex: 1; /* 占据剩余空间 */
  overflow-y: auto; /* 只有垂直方向滚动 */
  overflow-x: auto; /* 水平方向滚动 */
  border: 1px solid #ebeef5;
  border-radius: 4px;
  position: relative;
  min-height: 200px;
}
.library-table-wrapper[data-v-14e2d863]::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.library-table-wrapper[data-v-14e2d863]::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}
.library-table-wrapper[data-v-14e2d863]::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 4px;
}
.library-table-wrapper[data-v-14e2d863]::-webkit-scrollbar-thumb:hover {
  background: #909399;
}

/* ========================================
   款式表格样式
   ======================================== */
.style-table[data-v-14e2d863] {
  width: 100%;
  border-collapse: collapse;
  min-width: 800px;
  table-layout: fixed;
}
.style-table th[data-v-14e2d863] {
  position: sticky;
  top: 0;
  background-color: #f5f7fa;
  color: #606266;
  font-weight: bold;
  font-size: 14px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05);
  z-index: 10;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 序号列样式 - 固定显示 */
.col-index[data-v-14e2d863] {
  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;
  text-align: center !important;
  position: sticky;
  left: 0;
  background-color: #f5f7fa;
  z-index: 11;
  box-shadow: 2px 0 3px rgba(0, 0, 0, 0.05);
}
.style-table th[data-v-14e2d863],
.style-table td[data-v-14e2d863] {
  padding: 8px 6px; /* 从 12px 8px 减小到 8px 6px */
  text-align: left;
  border-bottom: 1px solid #ebeef5;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* 数据行序号单元格样式 */
.style-table td.col-index[data-v-14e2d863] {
  position: sticky;
  left: 0;
  background-color: #ffffff;
  z-index: 5;
  text-align: center;
  font-weight: 500;
  color: #606266;
}

/* 偶数行序号单元格背景色 */
.style-table tbody tr:nth-child(even) td.col-index[data-v-14e2d863] {
  background-color: #fafafa;
}

/* 悬停行序号单元格背景色 */
.style-table tbody tr:hover td.col-index[data-v-14e2d863] {
  background-color: #ecf5ff;
}
.style-table tbody tr[data-v-14e2d863]:nth-child(even) {
  background-color: #fafafa;
}
.style-table tbody tr[data-v-14e2d863]:hover {
  background-color: #ecf5ff;
}

/* 选中行高亮 */
.style-table tbody tr.row-selected[data-v-14e2d863],
.style-table tbody tr.row-selected td[data-v-14e2d863] {
  background-color: #d9ecff !important;
}
.style-table tbody tr.row-selected td.col-index[data-v-14e2d863] {
  background-color: #d9ecff !important;
}
.table-image[data-v-14e2d863] {
  width: 40px; /* 从 50px 减小到 40px */
  height: 40px; /* 从 50px 减小到 40px */
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 4px;
}
.no-image-text[data-v-14e2d863] {
  font-size: 12px;
  color: #909399;
}

/* ===== 图片缩略图列 ===== */
.col-thumb[data-v-14e2d863] {
  width: 60px;
  min-width: 60px;
  max-width: 60px;
  text-align: center;
}
.lib-thumb[data-v-14e2d863] {
  width: 30px;
  height: 30px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.2s;
}
.lib-thumb[data-v-14e2d863]:hover {
  transform: scale(1.5);
}
.no-thumb-text[data-v-14e2d863] {
  font-size: 12px;
  color: #909399;
}

/* 图片悬浮预览 */
.lib-image-preview-tooltip[data-v-14e2d863] {
  position: fixed;
  z-index: 99999;
  pointer-events: none;
}
.lib-image-preview-large[data-v-14e2d863] {
  width: 200px;
  height: 200px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.action-cell[data-v-14e2d863] {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}

/* 编辑按钮样式 */
.edit-btn[data-v-14e2d863] {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: white;
  background-color: #409eff;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}
.edit-btn[data-v-14e2d863]:hover {
  background-color: #66b1ff;
  transform: scale(1.05);
}
.status-tag[data-v-14e2d863] {
  padding: 2px 4px; /* 从 2px 6px 减小到 2px 4px */
  border-radius: 4px;
  font-size: 11px; /* 从 12px 减小到 11px */
  color: white;
  cursor: pointer;
  transition: all 0.3s;
}
.status-tag[data-v-14e2d863]:hover {
  opacity: 0.8;
  transform: scale(1.05);
}

/* 加急等级颜色 */
.status-tag.urgent-0[data-v-14e2d863] {
  background-color: #dcdfe6;
  color: #606266;
}
.status-tag.urgent-1[data-v-14e2d863] {
  background-color: #ffd700;
}
.status-tag.urgent-2[data-v-14e2d863] {
  background-color: #fa8c16;
}
.status-tag.urgent-3[data-v-14e2d863] {
  background-color: #f56c6c;
}

/* 锁定状态 */
.status-tag.locked[data-v-14e2d863] {
  background-color: #f56c6c;
}
.status-tag.normal[data-v-14e2d863] {
  background-color: #909399;
}

/* 归档状态 */
.status-tag.archived-0[data-v-14e2d863] {
  background-color: #909399;
  color: #ffffff;
}
.status-tag.archived-1[data-v-14e2d863] {
  background-color: #67c23a;
  color: #ffffff;
}

/* 作废状态 */
.status-tag.cancelled-0[data-v-14e2d863] {
  background-color: #dcdfe6;
  color: #606266;
}
.status-tag.cancelled-1[data-v-14e2d863] {
  background-color: #f56c6c;
  color: #ffffff;
}

/* ========================================
   滚动条样式
   ======================================== */
.library-table-content[data-v-14e2d863]::-webkit-scrollbar {
  width: 6px;
  height: 8px;
}
.library-table-content[data-v-14e2d863]::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}
.library-table-content[data-v-14e2d863]::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}
.library-table-content[data-v-14e2d863]::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* ========================================
   分页样式（参照账户管理）
   ======================================== */
.pagination[data-v-14e2d863] {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: auto; /* 推到底部 */
  background-color: #fff;
  padding: 10px 15px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  flex-shrink: 0; /* 不允许压缩 */
}

/* 每页显示条数选择器 */
.page-size-selector[data-v-14e2d863] {
  display: flex;
  align-items: center;
  gap: 6px;
}
.page-size-selector span[data-v-14e2d863] {
  color: #606266;
  font-size: 13px;
}
.page-size-select[data-v-14e2d863] {
  padding: 4px 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
  color: #606266;
  outline: none;
  cursor: pointer;
  background-color: #fff;
  transition: border-color 0.3s;
}
.page-size-select[data-v-14e2d863]:hover {
  border-color: #409eff;
}
.page-size-select[data-v-14e2d863]:focus {
  border-color: #409eff;
}
.pagination button[data-v-14e2d863] {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: background-color 0.3s;
}
.pagination button[data-v-14e2d863]:hover:not(:disabled) {
  background-color: #66b1ff;
}
.pagination button[data-v-14e2d863]:disabled {
  background-color: #c0c4cc;
  cursor: not-allowed;
}
.page-info[data-v-14e2d863] {
  color: #606266;
  font-size: 13px;
}

/* 页码跳转 */
.page-jumper[data-v-14e2d863] {
  display: flex;
  align-items: center;
  gap: 6px;
}
.page-jumper span[data-v-14e2d863] {
  color: #606266;
  font-size: 13px;
}
.page-input[data-v-14e2d863] {
  width: 50px;
  padding: 4px 6px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
  text-align: center;
  outline: none;
  transition: border-color 0.3s;
}
.page-input[data-v-14e2d863]:focus {
  border-color: #409eff;
}
.jump-btn[data-v-14e2d863] {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: background-color 0.3s;
}
.jump-btn[data-v-14e2d863]:hover {
  background-color: #66b1ff;
}

/* 字段显示设置按钮 */
.field-config-btn[data-v-14e2d863] {
  background-color: #67c23a;
  color: white;
  border: none;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: background-color 0.3s;
  margin-left: 12px;
}
.field-config-btn[data-v-14e2d863]:hover {
  background-color: #85ce61;
}

/* ========================================
   字段设置弹窗样式
   ======================================== */

/* 模态框遮罩层 */
.modal-overlay[data-v-14e2d863] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

/* 字段设置弹窗 */
.field-settings-modal[data-v-14e2d863] {
  background: white;
  border-radius: 8px;
  width: 800px;
  height: 600px;
  max-width: 90%;
  max-height: 80vh;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.field-settings-modal .modal-header[data-v-14e2d863] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #ebeef5;
}
.field-settings-modal .modal-header h3[data-v-14e2d863] {
  margin: 0;
  font-size: 16px;
  color: #303133;
}
.field-settings-modal .close-btn[data-v-14e2d863] {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #909399;
  transition: color 0.3s;
}
.field-settings-modal .close-btn[data-v-14e2d863]:hover {
  color: #409eff;
}
.field-settings-modal .modal-body[data-v-14e2d863] {
  padding: 0;
  flex: 1;
  overflow: hidden;
}
.field-settings-container[data-v-14e2d863] {
  display: flex;
  height: 100%;
}
.field-column[data-v-14e2d863] {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #ebeef5;
}
.field-column[data-v-14e2d863]:last-child {
  border-right: none;
}
.field-column-title[data-v-14e2d863] {
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  background: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
}
.field-list[data-v-14e2d863] {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}
.field-item[data-v-14e2d863] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background: white;
  transition: all 0.3s;
}
.field-item.visible-field-item[data-v-14e2d863] {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
}
.action-buttons[data-v-14e2d863] {
  display: flex;
  gap: 4px;
}
.sort-btn[data-v-14e2d863] {
  padding: 4px 8px;
  font-size: 12px;
  min-width: 24px;
}
.sort-btn[data-v-14e2d863]:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.sort-btn[data-v-14e2d863]:hover:not(:disabled) {
  color: #409eff;
  border-color: #409eff;
}
.field-item[data-v-14e2d863]:hover {
  border-color: #409eff;
  background: #f5f7fa;
}
.field-item-selected[data-v-14e2d863] {
  border-color: #409eff;
  background: #ecf5ff;
}
.field-label[data-v-14e2d863] {
  font-size: 14px;
  color: #303133;
}
.field-btn[data-v-14e2d863] {
  padding: 4px 12px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.3s;
  border: 1px solid #dcdfe6;
  background: white;
  color: #606266;
}
.field-btn[data-v-14e2d863]:hover {
  color: #409eff;
  border-color: #409eff;
}
.field-btn.add-btn[data-v-14e2d863]:hover {
  color: #67c23a;
  border-color: #67c23a;
}
.field-btn.remove-btn[data-v-14e2d863]:hover {
  color: #f56c6c;
  border-color: #f56c6c;
}
.field-empty[data-v-14e2d863] {
  padding: 40px 16px;
  text-align: center;
  color: #c0c4cc;
  font-size: 14px;
}

/* 弹窗底部 */
.field-settings-modal .modal-footer[data-v-14e2d863] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-top: 1px solid #ebeef5;
  background: #fafafa;
}
.footer-options[data-v-14e2d863] {
  display: flex;
  align-items: center;
}
.checkbox-label[data-v-14e2d863] {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 14px;
  color: #606266;
}
.checkbox-label input[type="checkbox"][data-v-14e2d863] {
  cursor: pointer;
}
.footer-right[data-v-14e2d863] {
  display: flex;
  gap: 8px;
}
.btn-reset[data-v-14e2d863],
.btn-cancel[data-v-14e2d863],
.btn-submit[data-v-14e2d863] {
  padding: 8px 16px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}
.btn-reset[data-v-14e2d863] {
  background: #fff;
  color: #606266;
  border-color: #e6a23c;
}
.btn-reset[data-v-14e2d863]:hover {
  background: #fdf6ec;
  color: #e6a23c;
}
.btn-cancel[data-v-14e2d863] {
  background: #fff;
  color: #606266;
}
.btn-cancel[data-v-14e2d863]:hover {
  color: #409eff;
  border-color: #409eff;
}
.btn-submit[data-v-14e2d863] {
  background: #409eff;
  color: white;
  border-color: #409eff;
}
.btn-submit[data-v-14e2d863]:hover {
  background: #66b1ff;
  border-color: #66b1ff;
}

/* ========================================
   加急弹窗样式
   ======================================== */
.urgent-modal[data-v-14e2d863] {
  background: white;
  border-radius: 8px;
  width: 320px;
  max-width: 90%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.urgent-modal .modal-header[data-v-14e2d863] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #ebeef5;
}
.urgent-modal .modal-header h3[data-v-14e2d863] {
  margin: 0;
  font-size: 16px;
  color: #303133;
}
.urgent-modal .close-btn[data-v-14e2d863] {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #909399;
  transition: color 0.3s;
}
.urgent-modal .close-btn[data-v-14e2d863]:hover {
  color: #409eff;
}
.urgent-modal .modal-body[data-v-14e2d863] {
  padding: 20px;
}
.urgent-options[data-v-14e2d863] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.urgent-option[data-v-14e2d863] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}
.urgent-option[data-v-14e2d863]:hover {
  border-color: #409eff;
  background: #f5f7fa;
}
.urgent-option.selected[data-v-14e2d863] {
  border-color: #409eff;
  background: #ecf5ff;
}
.urgent-level[data-v-14e2d863] {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}
.urgent-level.urgent-0[data-v-14e2d863] {
  background-color: #dcdfe6;
}
.urgent-level.urgent-1[data-v-14e2d863] {
  background-color: #ffd700;
}
.urgent-level.urgent-2[data-v-14e2d863] {
  background-color: #fa8c16;
}
.urgent-level.urgent-3[data-v-14e2d863] {
  background-color: #f56c6c;
}
.urgent-label[data-v-14e2d863] {
  font-size: 14px;
  color: #303133;
}
.urgent-modal .modal-footer[data-v-14e2d863] {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid #ebeef5;
}

/* ========================================
   尺寸部位管理容器
   ======================================== */
.size-management-container[data-v-d1797e72] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.size-modal[data-v-d1797e72] {
  background: white;
  border-radius: 8px;
  width: 80%;
  height: 90%;
  /* width: 1200px; 固定宽度 */
  /* height: 800px; 固定高度 */
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  overflow: hidden; /* 防止内容溢出 */
}

/* ========== 弹窗头部 ========== */
.modal-header[data-v-d1797e72] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #ebeef5;
}
.modal-header h2[data-v-d1797e72] {
  margin: 0;
  font-size: 20px;
  color: #303133;
}
.close-btn[data-v-d1797e72] {
  background: none;
  border: none;
  font-size: 28px;
  color: #909399;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.3s;
}
.close-btn[data-v-d1797e72]:hover {
  background-color: #f5f7fa;
  color: #606266;
}

/* ========== 弹窗主体 ========== */
.modal-body[data-v-d1797e72] {
  padding: 12px; /* 减小内边距 */
  display: flex;
  flex-direction: column;
  gap: 8px; /* 减小间隔：16px → 8px */
  flex: 1; /* 占据剩余空间 */
  min-height: 0; /* 允许 flex 子项缩小 */
}

/* ========== 上部分：尺寸列表 ========== */
.size-list-section[data-v-d1797e72] {
  /* 不再占据剩余空间，改为固定高度 */
  flex: 0 0 auto; /* 不伸缩，自适应内容高度 */
  min-height: 0; /* 允许缩小 */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px; /* 减小间隔：12px → 8px */
  max-height: 400px; /* 限制最大高度 */
}

/* 上部分操作按钮区域 */
.size-section-actions[data-v-d1797e72] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-shrink: 0; /* 不允许压缩 */
}
.action-left[data-v-d1797e72] {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

/* 方案选择器 */
.scheme-selector[data-v-d1797e72] {
  display: flex;
  align-items: center;
  gap: 6px;
}
.scheme-select[data-v-d1797e72] {
  padding: 6px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
  color: #606266;
  background-color: #fff;
  cursor: pointer;
  outline: none;
  min-width: 150px;
}
.scheme-select[data-v-d1797e72]:focus {
  border-color: #409eff;
}

/* 图标按钮 */
.icon-btn[data-v-d1797e72] {
  width: 28px;
  height: 30px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #fff;
  color: #3d78e6; /* 蓝色，与操作列一致 */
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}
.icon-btn[data-v-d1797e72]:hover {
  background-color: #3d78e6;
  border-color: #3d78e6;
  color: #fff;
}
.icon-btn[data-v-d1797e72]:active {
  background-color: #66b1ff;
  border-color: #66b1ff;
  color: #fff;
}

/* 删除方案按钮 - 红色 */
.icon-btn.delete[data-v-d1797e72] {
  color: #f56c6c;
  border-color: #f56c6c;
}
.icon-btn.delete[data-v-d1797e72]:hover {
  background-color: #f56c6c;
  border-color: #f56c6c;
  color: #fff;
}
.icon-btn.delete[data-v-d1797e72]:active {
  background-color: #f78989;
  border-color: #f78989;
  color: #fff;
}

/* 操作按钮 */
.action-btn[data-v-d1797e72] {
  background-color: #67c23a;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: background-color 0.3s;
}
.action-btn[data-v-d1797e72]:hover {
  background-color: #85ce61;
}

/* ========== 下部分：左右两栏 ========== */
.size-bottom-section[data-v-d1797e72] {
  display: flex;
  justify-content: space-between;
  align-items: stretch; /* 拉伸子项高度 */
  gap: 8px; /* 减小间隔：16px → 8px */
  flex: 1; /* 占据剩余空间 */
  flex-shrink: 0; /* 不允许压缩 */
}
.size-left-panel[data-v-d1797e72] {
  display: flex;
  flex-direction: column; /* 垂直排列 */
  width: 150px; /* 固定宽度 150px */
  flex-shrink: 0; /* 不允许压缩 */
  height: 100%; /* 高度占满 */
  overflow: hidden; /* 防止溢出 */
}

/* 列表头部 */
.size-list-header[data-v-d1797e72] {
  padding: 8px 10px;
  border-bottom: 1px solid #ebeef5;
  flex-shrink: 0; /* 不允许压缩 */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.list-title[data-v-d1797e72] {
  font-size: 13px;
  font-weight: 600;
  color: #606266;
}

/* 新增尺码按钮 */
.add-size-btn[data-v-d1797e72] {
  width: 24px;
  height: 24px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #fff;
  color: #3d78e6; /* 蓝色，与操作列一致 */
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  padding: 0;
  line-height: 1;
}
.add-size-btn[data-v-d1797e72]:hover {
  background-color: #3d78e6;
  border-color: #3d78e6;
  color: #fff;
}
.add-size-btn[data-v-d1797e72]:active {
  background-color: #66b1ff;
  border-color: #66b1ff;
  color: #fff;
}

/* 复选框列表 */
.size-checkbox-list[data-v-d1797e72] {
  flex: 1; /* 占据剩余空间 */
  overflow-y: auto; /* 垂直滚动 */
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.size-checkbox-item[data-v-d1797e72] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 3px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.size-checkbox-item[data-v-d1797e72]:hover {
  background-color: #ecf5ff;
}
.size-checkbox-input[data-v-d1797e72] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0; /* 不允许压缩 */
}
.size-checkbox-label[data-v-d1797e72] {
  flex: 1; /* 占据剩余空间 */
  font-size: 13px;
  color: #606266;
  font-weight: 500;
  text-align: left; /* 文本左对齐 */
}

/* 左下区域边框 */
.size-left-panel[data-v-d1797e72] {
  border: 1px solid #dcdfe6; /* 实线边框 */
  border-radius: 4px; /* 圆角 */
  background-color: #f5f7fa; /* 浅灰背景 */
}
.placeholder-text[data-v-d1797e72] {
  color: #909399;
  font-size: 13px;
  font-style: italic;
}
.size-right-panel[data-v-d1797e72] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1; /* 占据剩余空间 */
  min-width: 0; /* 允许缩小 */
  height: 100%; /* 高度占满 */
  border: 1px solid #dcdfe6; /* 实线边框 */
  border-radius: 4px; /* 圆角 */
  background-color: #f5f7fa; /* 浅灰背景 */
  overflow: hidden; /* 防止溢出 */
}

/* 表格容器 */
.table-container[data-v-d1797e72] {
  width: 100%;
  height: 100%;
  overflow: auto; /* 允许滚动 */
  padding: 8px;
}

/* 部位尺码表格 */
.size-table[data-v-d1797e72] {
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
  font-size: 13px;
  table-layout: fixed; /* 固定表格布局，精确控制列宽 */
}
.size-table thead[data-v-d1797e72] {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #f5f7fa;
}
.size-table th[data-v-d1797e72] {
  padding: 10px 8px;
  border: 1px solid #e4e7ed;
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}
.size-table td[data-v-d1797e72] {
  padding: 8px 0; /* 上下 8px 控制行高，左右 0 */
  border: 1px solid #ebeef5;
  text-align: center;
  line-height: 1.3; /* 行高倍数 */
}
.part-row[data-v-d1797e72]:hover {
  background-color: #ecf5ff;
}
.part-name[data-v-d1797e72] {
  font-weight: 600;
  color: #606266;
  width: 120px; /* 固定 4 个汉字宽度 (约 30px*4) */
  text-align: left;
  padding: 12px; /* 部位列保留 padding */
}
.col-part[data-v-d1797e72] {
  width: 120px; /* 固定 4 个汉字宽度 */
}
.col-size[data-v-d1797e72] {
  width: 90px; /* 固定 80px 宽度 */
}
.col-remark[data-v-d1797e72] {
  width: auto; /* 自动占据剩余宽度 */
}
.col-action[data-v-d1797e72] {
  width: 120px; /* 增加到原来的两倍，容纳 4 个按钮 */
  text-align: center;
}
.size-table thead th.col-action[data-v-d1797e72] {
  position: sticky;
  right: 0;
  z-index: 20;
  background-color: #f5f7fa;
}
.action-cell[data-v-d1797e72] {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 4px;
  width: 120px; /* 与表头宽度保持一致 */
}
.size-table tbody td.action-cell[data-v-d1797e72] {
  position: sticky;
  right: 0;
  background-color: #fff;
}
.part-row:hover .action-cell[data-v-d1797e72] {
  background-color: #ecf5ff;
}
.action-icon-btn[data-v-d1797e72] {
  width: 20px;
  height: 20px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #fff;
  color: #3d78e6; /* 绿色，更醒目 */
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  padding: 0;
  line-height: 1;
}
.action-icon-btn[data-v-d1797e72]:hover {
  background-color: #3d78e6;
  border-color: #3d78e6;
  color: #fff;
}
.action-icon-btn[data-v-d1797e72]:active {
  background-color: #66b1ff;
  border-color: #66b1ff;
  color: #fff;
}
.action-icon-btn.delete[data-v-d1797e72] {
  color: #f56c6c; /* 红色，删除操作 */
  border-color: #f56c6c;
}
.action-icon-btn.delete[data-v-d1797e72]:hover {
  background-color: #f56c6c;
  border-color: #f56c6c;
  color: #fff;
}
.action-icon-btn.delete[data-v-d1797e72]:active {
  background-color: #f78989; /* 浅红色 */
  border-color: #f78989;
  color: #fff;
}
.size-value[data-v-d1797e72] {
  padding: 0 !important; /* 强制移除 padding */
  outline: none; /* 移除聚焦时的轮廓线 */
  cursor: text; /* 文本光标 */
  caret-color: #409eff; /* 光标颜色 */
  min-height: 20px; /* 最小高度 */
}
.size-value[data-v-d1797e72]:focus {
  background-color: #ecf5ff; /* 聚焦时浅蓝背景 */
}
.size-value[data-v-d1797e72]:empty::before {
  content: attr(data-placeholder); /* 使用 data-placeholder 属性 */
  color: #c0c4cc;
  pointer-events: none;
}
.part-remark[data-v-d1797e72] {
  text-align: left;
  padding: 0 !important; /* 说明列单元格也移除 padding */
  outline: none; /* 移除聚焦时的轮廓线 */
  cursor: text; /* 文本光标 */
  caret-color: #409eff; /* 光标颜色 */
  min-height: 20px; /* 最小高度 */
}
.part-remark[data-v-d1797e72]:focus {
  background-color: #ecf5ff; /* 聚焦时浅蓝背景 */
}
.part-remark[data-v-d1797e72]:empty::before {
  content: attr(data-placeholder); /* 使用 data-placeholder 属性 */
  color: #c0c4cc;
  pointer-events: none;
}
.save-btn[data-v-d1797e72] {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}
.save-btn[data-v-d1797e72]:hover {
  background-color: #66b1ff;
}
.save-btn[data-v-d1797e72]:disabled {
  background-color: #c0c4cc;
  cursor: not-allowed;
}

.project-detail-container[data-v-328894f0] {
  height: 100vh;
  background-color: #f0f2f5;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.project-header[data-v-328894f0] {
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 100;
  flex-shrink: 0;
}
.header-content[data-v-328894f0] {
  max-width: 100%;
  margin: 0;
  padding: 6px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  width: 100%;
  background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);
  border-bottom: 1px solid #dcdfe6;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  flex-shrink: 0;  /* 防止被压缩 */
  min-width: 0;    /* 允许缩小 */
}

/* 菜单栏容器 */
.menu-bar[data-v-328894f0] {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: nowrap;  /* 禁止换行 */
  overflow-x: auto;   /* 超出时显示横向滚动条 */
  width: 100%;
  scrollbar-width: thin;  /* Firefox 细滚动条 */
}

/* Webkit 浏览器滚动条样式 */
.menu-bar[data-v-328894f0]::-webkit-scrollbar {
  height: 6px;
}
.menu-bar[data-v-328894f0]::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}
.menu-bar[data-v-328894f0]::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}
.menu-bar[data-v-328894f0]::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 菜单链接样式 - 纯文本无按钮外观 */
.menu-btn[data-v-328894f0] {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  background-color: transparent;
  border: none;
  border-radius: 3px;
  color: #606266;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.menu-btn[data-v-328894f0]:hover {
  color: #409eff;
  background-color: rgba(64, 158, 255, 0.08);
}

/* 选中状态高亮 */
.menu-btn.active[data-v-328894f0] {
  color: #409eff;
  background-color: rgba(64, 158, 255, 0.12);
  font-weight: 600;
}

/* 分隔符样式 */
.menu-separator[data-v-328894f0] {
  width: 1px;
  height: 16px;
  background-color: #dcdfe6;
  margin: 0 4px;
}

/* 打印下拉菜单 */
.print-dropdown-wrapper[data-v-328894f0] {
  position: relative;
  display: inline-flex;
}
.print-arrow[data-v-328894f0] {
  margin-left: 2px;
  font-size: 10px;
  transition: transform 0.2s;
}
.print-arrow.arrow-up[data-v-328894f0] {
  transform: rotate(180deg);
}
.print-dropdown-menu[data-v-328894f0] {
  position: fixed;
  background: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 9999;
  min-width: 100px;
  overflow: hidden;
}
.print-dropdown-item[data-v-328894f0] {
  padding: 8px 16px;
  cursor: pointer;
  white-space: nowrap;
  font-size: 13px;
  color: #333;
  transition: background-color 0.15s;
}
.print-dropdown-item[data-v-328894f0]:hover {
  background-color: #f0f7ff;
  color: #409eff;
}
.print-dropdown-divider[data-v-328894f0] {
  height: 1px;
  background-color: #e4e7ed;
  margin: 4px 0;
}

/* 搜索框样式 */
.search-box[data-v-328894f0] {
  display: flex;
  align-items: center;
  gap: 6px;
}
.search-input[data-v-328894f0] {
  width: 180px;
  padding: 4px 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 12px;
  color: #606266;
  background-color: #fff;
  transition: all 0.2s;
  height: 28px;
  box-sizing: border-box;
}
.search-input[data-v-328894f0]:focus {
  border-color: #1890ff;
  outline: none;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
}
.search-input[data-v-328894f0]::-moz-placeholder {
  color: #c0c4cc;
}
.search-input[data-v-328894f0]::placeholder {
  color: #c0c4cc;
}
.search-btn[data-v-328894f0] {
  padding: 4px 10px;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(24, 144, 255, 0.3);
  height: 28px;
  box-sizing: border-box;
  line-height: 1;
}
.search-btn[data-v-328894f0]:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(24, 144, 255, 0.3);
}
.search-btn[data-v-328894f0]:active {
  transform: translateY(0);
}

/* 成员管理区域 */
.member-management-section[data-v-328894f0] {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto; /* 推到最右侧 */
}
.member-tags-container[data-v-328894f0] {
  display: flex;
  align-items: center;
  gap: 0; /* 使用负边距控制重叠 */
}
.member-avatar[data-v-328894f0] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  color: white;
  cursor: default;
  transition: all 0.2s;
  position: relative;
  margin-left: -4px; /* 负边距实现重叠效果 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  border: 1px solid white; /* 白色边框增加间隔感 */
}
.member-avatar[data-v-328894f0]:first-child {
  margin-left: 0; /* 第一个元素不需要负边距 */
}
.member-avatar[data-v-328894f0]:hover {
  z-index: 10;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  /* 移除 transform: scale(1.1) 避免影响布局 */
}

/* 更多头像样式 */
.member-avatar.more-avatar[data-v-328894f0] {
  background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
  font-size: 16px;
  font-weight: bold;
}

/* 款式信息中的彩色圆点 */
.style-detail .dot[data-v-328894f0] {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  flex-shrink: 0;
}
.dot-red[data-v-328894f0] {
  background-color: #FF6B6B;
}
.dot-blue[data-v-328894f0] {
  background-color: #45B7D1;
}
.dot-orange[data-v-328894f0] {
  background-color: #FFA07A;
}
.dot-green[data-v-328894f0] {
  background-color: #98D8C8;
}
.dot-yellow[data-v-328894f0] {
  background-color: #F7DC6F;
}

/* 邀请按钮 */
.invite-member-btn[data-v-328894f0] {
  background: #1890ff;
  color: white;
  border: none;
  padding: 4px 14px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(24, 144, 255, 0.2);
}
.invite-member-btn[data-v-328894f0]:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(24, 144, 255, 0.3);
  background: #40a9ff;
}
.invite-member-btn[data-v-328894f0]:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(24, 144, 255, 0.2);
}
.search-box[data-v-328894f0]:focus-within {
  border-color: #409eff;
}
.search-input[data-v-328894f0] {
  width: 200px;
  padding: 6px 10px;
  border: none;
  outline: none;
  font-size: 13px;
  color: #606266;
}
.search-input[data-v-328894f0]::-moz-placeholder {
  color: #c0c4cc;
}
.search-input[data-v-328894f0]::placeholder {
  color: #c0c4cc;
}
.search-btn[data-v-328894f0] {
  padding: 6px 10px;
  background-color: #409eff;
  border: none;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.search-btn[data-v-328894f0]:hover {
  background-color: #66b1ff;
}
.search-btn i[data-v-328894f0] {
  font-size: 14px;
}
.back-btn[data-v-328894f0] {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 6px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  flex-shrink: 0;
}
.back-btn[data-v-328894f0]:hover {
  background-color: #66b1ff;
}
.title[data-v-328894f0] {
  color: #409eff;
  margin: 0 20px;
  font-size: 16px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-info[data-v-328894f0] {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-shrink: 0;
}

/* 打印模板选择器 */
.template-selector-wrapper[data-v-328894f0] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
}
.template-label[data-v-328894f0] {
  font-size: 13px;
  color: #606266;
  white-space: nowrap;
}
.template-select[data-v-328894f0] {
  height: 28px;
  padding: 0 8px;
  border: 1px solid #409eff;
  border-radius: 4px;
  font-size: 13px;
  color: #409eff;
  background-color: #fff;
  cursor: pointer;
  outline: none;
  transition: border-color 0.3s;
}
.template-select[data-v-328894f0]:hover {
  border-color: #66b1ff;
}
.template-select[data-v-328894f0]:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

/* 主内容区域 - 允许纵向滚动由子元素控制 */
.main-content[data-v-328894f0] {
  padding: 5px;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.process-board-content[data-v-328894f0] {
  width: 100%;
  height: 100%;
}







.print-designer-page[data-v-2fc95f91] {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #f0f2f5;
}
.designer-body[data-v-2fc95f91] {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.designer-body[data-v-2fc95f91] .full-designer {
  height: 100%;
}

/* 隐藏默认 Footer 内容 */
.custom-footer[data-v-2fc95f91] {
  height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.designer-body[data-v-2fc95f91] .designer-footer-inner {
  display: none !important;
}

/* 隐藏反馈按钮 */
.designer-body[data-v-2fc95f91] .btn-feedback {
  display: none !important;
}

/* 隐藏顶部模板切换标签栏 */
.designer-body[data-v-2fc95f91] .hiprint-pagination {
  display: none !important;
}

/* 模板名称弹窗样式 */
.dialog-overlay[data-v-2fc95f91] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.name-dialog[data-v-2fc95f91] {
  background: #fff;
  border-radius: 8px;
  width: 450px;
  max-width: 90%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
.dialog-header[data-v-2fc95f91] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e4e7ed;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
}
.dialog-header h3[data-v-2fc95f91] {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}
.close-btn[data-v-2fc95f91] {
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.2s;
}
.close-btn[data-v-2fc95f91]:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.dialog-body[data-v-2fc95f91] {
  padding: 24px 20px;
}
.form-item[data-v-2fc95f91] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-label[data-v-2fc95f91] {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}
.form-input[data-v-2fc95f91] {
  height: 36px;
  padding: 0 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  color: #606266;
  transition: border-color 0.2s;
}
.form-input[data-v-2fc95f91]:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}
.dialog-footer[data-v-2fc95f91] {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid #e4e7ed;
  background-color: #f5f7fa;
}
.btn[data-v-2fc95f91] {
  padding: 8px 20px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
}
.btn-cancel[data-v-2fc95f91] {
  background-color: #fff;
  border-color: #dcdfe6;
  color: #606266;
}
.btn-cancel[data-v-2fc95f91]:hover {
  background-color: #f5f7fa;
  border-color: #c0c4cc;
}
.btn-confirm[data-v-2fc95f91] {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border: none;
}
.btn-confirm[data-v-2fc95f91]:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

/* ==================== 综合看板 - 科技浅色主题 ==================== */
.dashboard-page[data-v-4837556c] {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf3 100%);
  display: flex;
  flex-direction: column;
}

/* ==================== 头部 ==================== */
.dash-header[data-v-4837556c] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 28px;
  background: #fff;
  border-bottom: 1px solid #e0e6ed;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.dash-header-left[data-v-4837556c] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.dash-title[data-v-4837556c] {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 2px;
}
.dash-date[data-v-4837556c] {
  font-size: 13px;
  color: #909399;
}
.dash-project-select[data-v-4837556c] {
  padding: 5px 12px;
  height: 32px;
  font-size: 13px;
  color: #303133;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}
.dash-project-select[data-v-4837556c]:focus {
  border-color: #667eea;
}
.dash-project-select option[data-v-4837556c] {
  font-size: 13px;
}
.dash-header-right[data-v-4837556c] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.dash-company[data-v-4837556c] {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}
.dash-back[data-v-4837556c] {
  background: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  padding: 4px 14px;
  height: 32px;
  color: #606266;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.dash-back[data-v-4837556c]:hover {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-color: transparent;
  color: #fff;
}

/* ==================== Body ==================== */
.dash-body[data-v-4837556c] {
  flex: 1;
  width: 1200px;
  max-width: 96%;
  margin: 0 auto;
  padding: 24px 0 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ==================== KPI 卡片 ==================== */
.kpi-row[data-v-4837556c] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.kpi-row-5[data-v-4837556c] {
  grid-template-columns: repeat(5, 1fr);
}
.kpi-row-7[data-v-4837556c] {
  grid-template-columns: repeat(7, 1fr);
}
.kpi-card[data-v-4837556c] {
  background: #fff;
  border: 1px solid #ebeef5;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.kpi-card[data-v-4837556c]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  opacity: 0.9;
}
.kpi-card.kpi-blue[data-v-4837556c]::before { background: linear-gradient(90deg, #667eea, #764ba2);
}
.kpi-card.kpi-green[data-v-4837556c]::before { background: linear-gradient(90deg, #11998e, #38ef7d);
}
.kpi-card.kpi-orange[data-v-4837556c]::before { background: linear-gradient(90deg, #f6d365, #fda085);
}
.kpi-card.kpi-red[data-v-4837556c]::before { background: linear-gradient(90deg, #eb3349, #f45c43);
}
.kpi-card.kpi-purple[data-v-4837556c]::before { background: linear-gradient(90deg, #667eea, #764ba2);
}
.kpi-card.kpi-cyan[data-v-4837556c]::before { background: linear-gradient(90deg, #00b4db, #0083b0);
}
.kpi-card.kpi-amber[data-v-4837556c]::before { background: linear-gradient(90deg, #f7971e, #ffd200);
}
.kpi-card[data-v-4837556c]:hover {
  border-color: #c0ccda;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.kpi-icon[data-v-4837556c] {
  font-size: 32px;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #f5f7fa;
}
.kpi-info[data-v-4837556c] {
  flex: 1;
}
.kpi-value[data-v-4837556c] {
  font-size: 28px;
  font-weight: 700;
  color: #303133;
  line-height: 1.2;
}
.kpi-label[data-v-4837556c] {
  font-size: 13px;
  color: #909399;
  margin-top: 2px;
}
.kpi-trend[data-v-4837556c] {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}
.kpi-trend.up[data-v-4837556c] {
  color: #11998e;
  background: rgba(17, 153, 142, 0.1);
}
.kpi-trend.down[data-v-4837556c] {
  color: #eb3349;
  background: rgba(235, 51, 73, 0.1);
}

/* ==================== 面板通用 ==================== */
.dash-row[data-v-4837556c] {
  display: flex;
  gap: 16px;
}
.dash-panel[data-v-4837556c] {
  background: #fff;
  border: 1px solid #ebeef5;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.flex-1[data-v-4837556c] { flex: 1;
}
.flex-2[data-v-4837556c] { flex: 2;
}
.full-width[data-v-4837556c] { width: 100%;
}
.panel-header[data-v-4837556c] {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f2f5;
}
.panel-title[data-v-4837556c] {
  font-size: 15px;
  font-weight: 600;
  color: #303133;
  letter-spacing: 1px;
}
.panel-subtitle[data-v-4837556c] {
  font-size: 12px;
  color: #c0c4cc;
}

/* ==================== 生产进度条 ==================== */
.progress-list[data-v-4837556c] {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.progress-item[data-v-4837556c] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.progress-label-row[data-v-4837556c] {
  width: 90px;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.progress-name[data-v-4837556c] {
  font-size: 13px;
  color: #606266;
}
.progress-percent[data-v-4837556c] {
  font-size: 13px;
  font-weight: 700;
  color: #303133;
}
.progress-bar-bg[data-v-4837556c] {
  flex: 1;
  height: 10px;
  background: #f5f7fa;
  border-radius: 5px;
  overflow: hidden;
}
.progress-bar-fill[data-v-4837556c] {
  height: 100%;
  border-radius: 5px;
  transition: width 0.8s ease;
}
.progress-bar-fill.is-success[data-v-4837556c] {
  background: linear-gradient(90deg, #11998e, #38ef7d);
}
.progress-bar-fill.is-warning[data-v-4837556c] {
  background: linear-gradient(90deg, #f6d365, #fda085);
}
.progress-bar-fill.is-urgent[data-v-4837556c] {
  background: linear-gradient(90deg, #eb3349, #f45c43);
}
.progress-meta[data-v-4837556c] {
  font-size: 12px;
  color: #909399;
  width: 60px;
  text-align: right;
}

/* ==================== 工序待处理 ==================== */
.pending-list[data-v-4837556c] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pending-item[data-v-4837556c] {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pending-name[data-v-4837556c] {
  font-size: 13px;
  color: #606266;
  width: 70px;
  flex-shrink: 0;
}
.pending-bar-bg[data-v-4837556c] {
  flex: 1;
  height: 8px;
  background: #f5f7fa;
  border-radius: 4px;
  overflow: hidden;
}
.pending-bar-fill[data-v-4837556c] {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s ease;
}
.pending-bar-fill.is-normal[data-v-4837556c] {
  background: linear-gradient(90deg, #667eea, #764ba2);
}
.pending-bar-fill.is-warning[data-v-4837556c] {
  background: linear-gradient(90deg, #f6d365, #fda085);
}
.pending-bar-fill.is-urgent[data-v-4837556c] {
  background: linear-gradient(90deg, #eb3349, #f45c43);
}
.pending-count[data-v-4837556c] {
  font-size: 14px;
  font-weight: 700;
  color: #303133;
  width: 32px;
  text-align: right;
}
.pending-count.text-urgent[data-v-4837556c] {
  color: #eb3349;
}
.pending-project-select[data-v-4837556c] {
  margin-left: auto;
  padding: 4px 10px;
  height: 28px;
  font-size: 12px;
  color: #303133;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}
.pending-project-select[data-v-4837556c]:focus {
  border-color: #667eea;
}
.pending-project-select option[data-v-4837556c] {
  font-size: 13px;
}
.pending-empty[data-v-4837556c] {
  text-align: center;
  padding: 24px 0;
  font-size: 13px;
  color: #c0c4cc;
}

/* ==================== 员工完成统计 ==================== */
.worker-stats-list[data-v-4837556c] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.worker-stats-item[data-v-4837556c] {
  display: flex;
  align-items: center;
  gap: 10px;
}
.worker-stats-rank[data-v-4837556c] {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.worker-stats-name[data-v-4837556c] {
  font-size: 13px;
  color: #303133;
  width: 56px;
  flex-shrink: 0;
}
.worker-stats-bar-bg[data-v-4837556c] {
  flex: 1;
  height: 6px;
  background: #f5f7fa;
  border-radius: 3px;
  overflow: hidden;
}
.worker-stats-bar-fill[data-v-4837556c] {
  height: 100%;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 3px;
  transition: width 0.6s ease;
}
.worker-stats-nums[data-v-4837556c] {
  display: flex;
  align-items: baseline;
  gap: 2px;
  flex-shrink: 0;
}
.num-today[data-v-4837556c] {
  font-size: 13px;
  font-weight: 700;
  color: #764ba2;
}
.num-sep[data-v-4837556c] {
  font-size: 12px;
  color: #c0c4cc;
}
.num-total[data-v-4837556c] {
  font-size: 13px;
  font-weight: 600;
  color: #303133;
}

/* ==================== 纱线库存预警 ==================== */
.warning-table[data-v-4837556c] {
  display: flex;
  flex-direction: column;
}
.warning-table-header[data-v-4837556c] {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 2px solid #f0f2f5;
}
.warning-table-header .wt-col[data-v-4837556c] {
  font-size: 12px;
  font-weight: 600;
  color: #909399;
}
.warning-table-row[data-v-4837556c] {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f5f7fa;
  transition: background 0.2s;
}
.warning-table-row[data-v-4837556c]:hover {
  background: #fafbfc;
}
.warning-table-row[data-v-4837556c]:last-child {
  border-bottom: none;
}
.warning-table-row .wt-col[data-v-4837556c] {
  font-size: 13px;
  color: #303133;
}
.wt-color[data-v-4837556c] {
  width: 22%;
  display: flex;
  align-items: center;
  gap: 8px;
}
.color-dot[data-v-4837556c] {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid #e0e0e0;
  flex-shrink: 0;
}
.wt-name[data-v-4837556c] { width: 16%;
}
.wt-stock[data-v-4837556c] { width: 18%;
}
.wt-safe[data-v-4837556c] { width: 16%; color: #909399;
}
.wt-status[data-v-4837556c] { width: 14%;
}
.warning-badge[data-v-4837556c] {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 10px;
}
.badge-danger[data-v-4837556c] {
  color: #fff;
  background: linear-gradient(135deg, #eb3349, #f45c43);
}
.badge-warning[data-v-4837556c] {
  color: #fff;
  background: linear-gradient(135deg, #f6d365, #fda085);
}
.badge-notice[data-v-4837556c] {
  color: #606266;
  background: #f0f2f5;
}

/* ==================== 纱线库存用量 ==================== */
.yarn-usage-list[data-v-4837556c] {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.yarn-usage-item[data-v-4837556c] {
  display: flex;
  align-items: center;
  gap: 10px;
}
.yarn-usage-info[data-v-4837556c] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.yarn-usage-row[data-v-4837556c] {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.yarn-usage-name[data-v-4837556c] {
  font-size: 13px;
  color: #303133;
  font-weight: 500;
}
.yarn-usage-code[data-v-4837556c] {
  font-size: 11px;
  color: #c0c4cc;
}
.yarn-usage-bar-bg[data-v-4837556c] {
  height: 6px;
  background: #f5f7fa;
  border-radius: 3px;
  overflow: hidden;
}
.yarn-usage-bar-fill[data-v-4837556c] {
  height: 100%;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 3px;
  transition: width 0.6s ease;
}
.yarn-usage-amount[data-v-4837556c] {
  font-size: 13px;
  font-weight: 700;
  color: #303133;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ==================== 趋势图 ==================== */

/* 图表切换按钮 */
.chart-toggle[data-v-4837556c] {
  margin-left: auto;
  display: flex;
  gap: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #dcdfe6;
}
.toggle-btn[data-v-4837556c] {
  padding: 3px 12px;
  font-size: 12px;
  color: #909399;
  background: #fff;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1.5;
}
.toggle-btn.active[data-v-4837556c] {
  color: #fff;
  background: linear-gradient(135deg, #667eea, #764ba2);
}
.toggle-btn[data-v-4837556c]:not(.active):hover {
  background: #f5f7fa;
}
.trend-chart[data-v-4837556c] {
  height: 200px;
  display: flex;
  align-items: flex-end;
}
.trend-bars[data-v-4837556c] {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  width: 100%;
  height: 100%;
  padding-bottom: 30px;
}
.trend-bar-col[data-v-4837556c] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  height: 100%;
  justify-content: flex-end;
}
.trend-bar-value[data-v-4837556c] {
  font-size: 12px;
  color: #606266;
  font-weight: 600;
}
.trend-bar[data-v-4837556c] {
  width: 32px;
  min-height: 4px;
  border-radius: 4px 4px 0 0;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.trend-bar-inner[data-v-4837556c] {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #764ba2, #667eea);
  border-radius: 4px 4px 0 0;
  animation: trendGrow-4837556c 0.8s ease both;
}
@keyframes trendGrow-4837556c {
from { height: 0;
}
}
.trend-bar-label[data-v-4837556c] {
  font-size: 12px;
  color: #909399;
}

/* ==================== 折线图 ==================== */
.trend-line-wrap[data-v-4837556c] {
  width: 100%;
  height: 100%;
}
.trend-line-svg[data-v-4837556c] {
  width: 100%;
  height: 200px;
  overflow: visible;
}
.trend-line-stroke[data-v-4837556c] {
  stroke: #764ba2;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trend-dot[data-v-4837556c] {
  fill: #fff;
  stroke: #764ba2;
  stroke-width: 2;
}
.trend-svg-label[data-v-4837556c] {
  fill: #909399;
  font-size: 12px;
  text-anchor: middle;
}
.trend-svg-value[data-v-4837556c] {
  fill: #606266;
  font-size: 12px;
  font-weight: 600;
  text-anchor: middle;
}

/* ==================== 排行榜 ==================== */
.rank-list[data-v-4837556c] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rank-item[data-v-4837556c] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rank-num[data-v-4837556c] {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.rank-1[data-v-4837556c] { background: linear-gradient(135deg, #ffd700, #ffb300); color: #fff;
}
.rank-2[data-v-4837556c] { background: linear-gradient(135deg, #c0c0c0, #999); color: #fff;
}
.rank-3[data-v-4837556c] { background: linear-gradient(135deg, #cd7f32, #b87333); color: #fff;
}
.rank-4[data-v-4837556c], .rank-5[data-v-4837556c] { background: #f5f7fa; color: #909399;
}
.rank-info[data-v-4837556c] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rank-name[data-v-4837556c] {
  font-size: 13px;
  color: #303133;
}
.rank-bar-bg[data-v-4837556c] {
  height: 6px;
  background: #f5f7fa;
  border-radius: 3px;
  overflow: hidden;
}
.rank-bar-fill[data-v-4837556c] {
  height: 100%;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 3px;
  transition: width 0.6s ease;
}
.rank-count[data-v-4837556c] {
  font-size: 14px;
  font-weight: 700;
  color: #303133;
  width: 32px;
  text-align: right;
}

/* ==================== 时间线 ==================== */
.timeline[data-v-4837556c] {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.timeline-item[data-v-4837556c] {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #f5f7fa;
}
.timeline-item[data-v-4837556c]:last-child {
  border-bottom: none;
}
.timeline-dot[data-v-4837556c] {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}
.dot-success[data-v-4837556c] { background: #11998e;
}
.dot-urgent[data-v-4837556c] { background: #eb3349;
}
.dot-info[data-v-4837556c] { background: #667eea;
}
.dot-warning[data-v-4837556c] { background: #fda085;
}
.timeline-content[data-v-4837556c] {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.timeline-text[data-v-4837556c] {
  font-size: 13px;
  color: #303133;
}
.timeline-time[data-v-4837556c] {
  font-size: 12px;
  color: #c0c4cc;
  flex-shrink: 0;
  margin-left: 12px;
}