[v-cloak] { display: none; }

html {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden !important;
  overflow-y: auto;
  max-width: 100vw;
  /* 防止动画导致高度变化触发滚动条 */
  height: 100%;
}

body {
  width: 100%;
  margin: 0;
  padding: 0;
  max-width: 100vw;
  overflow-x: hidden !important;
  /* 防止动画导致高度变化触发滚动条 */
  min-height: 100vh;
  height: auto;
}

/* 科技风格渐变背景 - 与其他系统保持一致，固定到视口，避免滚动时上下分离 */
body {
  background: 
    radial-gradient(ellipse at 20% 30%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(168, 85, 247, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 70%),
    linear-gradient(180deg, #0f172a 0%, #1e293b 25%, #312e81 50%, #1e293b 75%, #0f172a 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-position: 0% 50%, 0% 0%, 0% 0%, 0% 50%;
  background-attachment: fixed, fixed, fixed, fixed;
  position: relative;
  min-height: 100vh;
  height: auto;
  overflow-y: auto;
  /* 与其他系统统一的字体和渲染设置 */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
  will-change: auto;
  transform: translateZ(0);
}

/* 移除 gradientShift 和 backgroundPulse 动画，避免触发滚动条 */
/* @keyframes backgroundPulse {
  0%, 100% { filter: brightness(1) contrast(1); }
  50% { filter: brightness(1.05) contrast(1.02); }
} */

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* 网格 + 光晕叠加层，与库存/成交等页面一致，保证视觉统一 */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  overflow: hidden;
  background-image: 
    linear-gradient(rgba(99, 102, 241, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 102, 241, 0.12) 1px, transparent 1px),
    linear-gradient(rgba(168, 85, 247, 0.08) 2px, transparent 2px),
    linear-gradient(90deg, rgba(168, 85, 247, 0.08) 2px, transparent 2px),
    radial-gradient(circle at 15% 25%, rgba(99, 102, 241, 0.2) 0%, transparent 40%),
    radial-gradient(circle at 85% 75%, rgba(168, 85, 247, 0.2) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.15) 0%, transparent 60%);
  background-size: 40px 40px, 40px 40px, 200px 200px, 200px 200px,
                   min(600px, 50vw) min(600px, 50vh),
                   min(600px, 50vw) min(600px, 50vh),
                   min(1000px, 80vw) min(1000px, 80vh);
  pointer-events: none;
  z-index: 0;
  opacity: 0.9;
}

body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  overflow: hidden;
  background: 
    radial-gradient(ellipse 60vw 40vh at 10% 20%, rgba(99, 102, 241, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 50vw 35vh at 90% 80%, rgba(168, 85, 247, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 40vw 30vh at 50% 50%, rgba(59, 130, 246, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* 轻微的星点装饰层，与其他页面统一 */
#app::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  overflow: hidden;
  background-image: 
    radial-gradient(2px 2px at 20% 30%, rgba(99, 102, 241, 0.6), transparent),
    radial-gradient(2px 2px at 60% 70%, rgba(168, 85, 247, 0.6), transparent),
    radial-gradient(1px 1px at 50% 50%, rgba(59, 130, 246, 0.8), transparent),
    radial-gradient(1px 1px at 80% 20%, rgba(99, 102, 241, 0.5), transparent),
    radial-gradient(2px 2px at 30% 80%, rgba(168, 85, 247, 0.5), transparent);
  background-repeat: repeat;
  background-size: 200px 200px, 300px 300px, 150px 150px, 250px 250px, 180px 180px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}

/* 移除 sparkle 动画，避免 transform 触发滚动条 */
/* @keyframes sparkle {
  0%, 100% { 
    opacity: 0.4;
    transform: translate(0, 0);
  }
  25% {
    opacity: 0.8;
    transform: translate(10px, -10px);
  }
  50% {
    opacity: 0.6;
    transform: translate(-10px, 10px);
  }
  75% {
    opacity: 0.9;
    transform: translate(5px, 5px);
  }
} */

/* 整体界面100%大小，跟随网页缩放 */
#app {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* 桌面中间断点：窗口缩窄时自动改单栏，避免报价表被 7/5 布局挤压 */
@media (max-width: 1400px) and (min-width: 1024px) {
  .quote-layout-grid {
    grid-template-columns: 1fr !important;
  }
  .quote-main-panel,
  .quote-side-panel {
    grid-column: 1 / -1 !important;
  }
}

/* 科技风格玻璃态卡片效果 */
.quote-card {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(59, 130, 246, 0.3);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(59, 130, 246, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 20px rgba(59, 130, 246, 0.1);
  backdrop-filter: blur(12px);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  min-width: 720px; /* 窄屏时整页横向滚动，表格不挤成一条线 */
}

.quote-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
  animation: shine 3s infinite;
}

@keyframes shine {
  0% { left: -100%; }
  100% { left: 100%; }
}

.quote-card:hover {
  box-shadow: 
    0 12px 48px rgba(59, 130, 246, 0.4),
    0 0 0 1px rgba(59, 130, 246, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 30px rgba(59, 130, 246, 0.2);
  transform: translateY(-2px);
}

/* 科技风表格 */
.quote-table {
  border-collapse: collapse;
  width: 100%;
  font-weight: 700;
  color: #111827;
  table-layout: auto;
  font-size: 14px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.95));
  min-width: 0;
}

/* 第一列（类别列）字体加大一号并居中显示 */
.quote-table td:first-child {
  font-size: 16px;
  text-align: center;
}

.quote-table td {
  border-bottom: 1px solid rgba(59, 130, 246, 0.15);
  vertical-align: middle;
  padding: 6px 10px;
  transition: background-color 0.2s ease;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* 第三列价格：固定 110px，容纳 7 位数 + 货币符号与空隙 */
.quote-table td:nth-child(3) {
  width: 110px;
  min-width: 110px;
  max-width: 110px;
}

.quote-table th {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(147, 51, 234, 0.1) 100%);
  border-bottom: 2px solid rgba(59, 130, 246, 0.3);
  padding: 10px;
  font-weight: 700;
  color: #1e293b;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

/* 条纹只画在前三列，第四列竖排不被盖住；行悬停同理 */
.quote-row td:nth-child(1),
.quote-row td:nth-child(2),
.quote-row td:nth-child(3) {
  background-color: var(--quotation-row-bg, transparent);
}
.quote-row.strip-0 td:nth-child(1),
.quote-row.strip-0 td:nth-child(2),
.quote-row.strip-0 td:nth-child(3) {
  --quotation-row-bg: var(--quotation-row-bg-even, rgba(255, 255, 255, 0.6));
}

.quote-row.strip-1 td:nth-child(1),
.quote-row.strip-1 td:nth-child(2),
.quote-row.strip-1 td:nth-child(3) {
  --quotation-row-bg: var(--quotation-row-bg-odd, rgba(219, 234, 254, 0.4));
}

.quote-row:hover td:nth-child(1),
.quote-row:hover td:nth-child(2),
.quote-row:hover td:nth-child(3) {
  background-color: rgba(59, 130, 246, 0.1) !important;
}

/* 报价表个人标签（第四列第一格的小胶囊） */
.quote-table-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3em;
  max-width: 100%;
  padding: 5px 18px;
  border-radius: 9999px;
  font-size: 13px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #1f2933;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(147, 51, 234, 0.15));
  border: 1px solid rgba(59, 130, 246, 0.3);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* 报价表表格式：选中格高亮、遮罩不挡编辑 */
.quote-cell-wrap {
  position: relative;
  min-height: 100%;
}
.quote-cell-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  cursor: cell;
}
.quote-cell-selected {
  outline: 2px solid rgba(59, 130, 246, 0.8);
  outline-offset: -1px;
  border-radius: 4px;
}

/* 报价表多行选区（Shift+方向键）：浅色高亮整行产品+价格两列 */
.quote-cell-range {
  background-color: rgba(59, 130, 246, 0.12);
}
/* 粘贴后短暂高亮目标区域，提升可感知性 */
.quote-cell-paste-flash {
  background-color: rgba(16, 185, 129, 0.2) !important;
  transition: background-color 0.25s ease;
}
/* 报价表矩形选区边框（更像 Excel/WPS） */
.quote-cell-range-top {
  box-shadow: inset 0 2px 0 rgba(59, 130, 246, 0.85);
}
.quote-cell-range-bottom {
  box-shadow: inset 0 -2px 0 rgba(59, 130, 246, 0.85);
}
.quote-cell-range-left {
  box-shadow: inset 2px 0 0 rgba(59, 130, 246, 0.85);
}
.quote-cell-range-right {
  box-shadow: inset -2px 0 0 rgba(59, 130, 246, 0.85);
}
/* 叠加多个边框阴影 */
.quote-cell-range-top.quote-cell-range-left {
  box-shadow: inset 0 2px 0 rgba(59, 130, 246, 0.85), inset 2px 0 0 rgba(59, 130, 246, 0.85);
}
.quote-cell-range-top.quote-cell-range-right {
  box-shadow: inset 0 2px 0 rgba(59, 130, 246, 0.85), inset -2px 0 0 rgba(59, 130, 246, 0.85);
}
.quote-cell-range-bottom.quote-cell-range-left {
  box-shadow: inset 0 -2px 0 rgba(59, 130, 246, 0.85), inset 2px 0 0 rgba(59, 130, 246, 0.85);
}
.quote-cell-range-bottom.quote-cell-range-right {
  box-shadow: inset 0 -2px 0 rgba(59, 130, 246, 0.85), inset -2px 0 0 rgba(59, 130, 246, 0.85);
}
.quote-cell-range-top.quote-cell-range-bottom {
  box-shadow: inset 0 2px 0 rgba(59, 130, 246, 0.85), inset 0 -2px 0 rgba(59, 130, 246, 0.85);
}
.quote-cell-range-left.quote-cell-range-right {
  box-shadow: inset 2px 0 0 rgba(59, 130, 246, 0.85), inset -2px 0 0 rgba(59, 130, 246, 0.85);
}
.quote-cell-range-top.quote-cell-range-bottom.quote-cell-range-left {
  box-shadow: inset 0 2px 0 rgba(59, 130, 246, 0.85), inset 0 -2px 0 rgba(59, 130, 246, 0.85), inset 2px 0 0 rgba(59, 130, 246, 0.85);
}
.quote-cell-range-top.quote-cell-range-bottom.quote-cell-range-right {
  box-shadow: inset 0 2px 0 rgba(59, 130, 246, 0.85), inset 0 -2px 0 rgba(59, 130, 246, 0.85), inset -2px 0 0 rgba(59, 130, 246, 0.85);
}
.quote-cell-range-top.quote-cell-range-left.quote-cell-range-right {
  box-shadow: inset 0 2px 0 rgba(59, 130, 246, 0.85), inset 2px 0 0 rgba(59, 130, 246, 0.85), inset -2px 0 0 rgba(59, 130, 246, 0.85);
}
.quote-cell-range-bottom.quote-cell-range-left.quote-cell-range-right {
  box-shadow: inset 0 -2px 0 rgba(59, 130, 246, 0.85), inset 2px 0 0 rgba(59, 130, 246, 0.85), inset -2px 0 0 rgba(59, 130, 246, 0.85);
}
.quote-cell-range-top.quote-cell-range-bottom.quote-cell-range-left.quote-cell-range-right {
  box-shadow: inset 0 2px 0 rgba(59, 130, 246, 0.85), inset 0 -2px 0 rgba(59, 130, 246, 0.85), inset 2px 0 0 rgba(59, 130, 246, 0.85), inset -2px 0 0 rgba(59, 130, 246, 0.85);
}

/* 回车“仅选中”时隐藏光标，首键可正常输入，用户一输入即显光标 */
.quote-input-cursor-hidden {
  caret-color: transparent !important;
}

/* 报价表价格栏、利润成本计算表：数字框不显示上下加减按钮 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* 现代化输入框 */
input[type="text"],
input[type="number"],
select,
textarea {
  transition: all 0.3s ease;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

input[type="text"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  background-color: rgba(255, 255, 255, 0.95);
}

/* 科技风按钮 */
.tech-button {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.9) 0%, rgba(147, 51, 234, 0.9) 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 
    0 4px 15px rgba(59, 130, 246, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.tech-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

.tech-button:hover::before {
  left: 100%;
}

.tech-button:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 6px 20px rgba(59, 130, 246, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.tech-button:active {
  transform: translateY(0);
}

/* 自动补全列表 */
.autocomplete-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-top: none;
  /* 约 8 行可见，减少频繁滚动 */
  max-height: 360px;
  overflow-y: auto;
  /* 避免滚动链影响页面，滚动手感更直接 */
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(59, 130, 246, 0.85) rgba(15, 23, 42, 0.35);
  z-index: 1000;
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(59, 130, 246, 0.1);
  border-radius: 0 0 8px 8px;
}

.autocomplete-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid rgba(59, 130, 246, 0.1);
  /* 下拉建议列表字体偏小：与报价表输入框/表格字号保持一致 */
  font-size: 16px;
  line-height: 1.3;
  /* 保持响应“快”，只保留极轻量视觉过渡 */
  transition: background-color 0.08s linear, color 0.08s linear;
}

.autocomplete-item:hover, 
.autocomplete-item.selected {
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 51, 234, 0.1) 100%);
}

.autocomplete-list::-webkit-scrollbar {
  width: 10px;
}
.autocomplete-list::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.35);
}
.autocomplete-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.88) 0%, rgba(99, 102, 241, 0.88) 100%);
  border-radius: 6px;
  border: 2px solid rgba(15, 23, 42, 0.35);
}
.autocomplete-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(59, 130, 246, 1) 0%, rgba(99, 102, 241, 1) 100%);
}

/* 信息卡片 */
.info-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(59, 130, 246, 0.2);
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: all 0.3s ease;
}

.info-card:hover {
  box-shadow: 
    0 8px 30px rgba(59, 130, 246, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
}

/* 利润表样式 - 参考产品价格库风格 */
.profit-table {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(99, 102, 241, 0.4);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(99, 102, 241, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 30px rgba(99, 102, 241, 0.2);
  backdrop-filter: blur(12px);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.profit-table::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent);
  animation: shine 3s infinite;
}

.profit-table:hover {
  box-shadow: 
    0 12px 48px rgba(99, 102, 241, 0.5),
    0 0 0 1px rgba(99, 102, 241, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 0 40px rgba(99, 102, 241, 0.3);
  transform: translateY(-2px);
}

/* 利润表头部“隐藏”按钮：替代模板内联 mouseover/mouseout */
.profit-hide-btn:hover {
  background: rgba(30, 41, 59, 0.8) !important;
}

.profit-table-row {
  transition: all 0.2s ease;
}

.profit-table-row:hover {
  background: rgba(99, 102, 241, 0.2) !important;
  transform: scale(1.01);
}

/* 利润表：四个“其他”可编辑成本栏 - 与系统匹配、突出背景 */
.profit-cost-input-other {
  background: rgba(99, 102, 241, 0.25) !important;
  border: 2px solid rgba(99, 102, 241, 0.6) !important;
  color: #e0e7ff !important;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.profit-cost-input-other:focus {
  outline: none;
  background: rgba(99, 102, 241, 0.35) !important;
  border-color: rgba(129, 140, 248, 0.8) !important;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}
.profit-cost-input-other.profit-cost-input-empty {
  background: rgba(234, 179, 8, 0.18) !important;
  border-color: rgba(234, 179, 8, 0.55) !important;
  color: #fef3c7 !important;
}
.profit-cost-input-other.profit-cost-input-empty:focus {
  background: rgba(234, 179, 8, 0.25) !important;
  border-color: rgba(251, 191, 36, 0.7) !important;
}

/* 利润成本表顶部参数：默认保持桌面 5 列，仅移动端改为 2 列 */
.profit-top-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (max-width: 1024px) {
  .profit-top-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
  }
}

/* 记录卡片 - 科技风格（深色主题） */
.record-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(99, 102, 241, 0.4);
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(99, 102, 241, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  cursor: pointer;
  backdrop-filter: blur(12px);
}

.record-card:hover {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(99, 102, 241, 0.6);
  transform: translateY(-2px);
  box-shadow: 
    0 8px 32px rgba(99, 102, 241, 0.4),
    0 0 30px rgba(99, 102, 241, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.record-card.active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.3) 0%, rgba(168, 85, 247, 0.3) 100%);
  border-color: rgba(99, 102, 241, 0.8);
  box-shadow: 
    0 6px 24px rgba(99, 102, 241, 0.5),
    0 0 25px rgba(99, 102, 241, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* 输入组样式 */
.input-group {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.input-group:focus-within {
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  background: rgba(255, 255, 255, 0.95);
}

/* 标题样式 - 科技风格 */
.tech-title {
  background: linear-gradient(135deg, #3b82f6 0%, #9333ea 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
  filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.3));
}

/* 垂直文字 */
.writing-vertical {
  /* 移动端内核兼容：统一使用竖排显示店铺文案 */
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  text-orientation: upright;
  -webkit-text-orientation: upright;
  white-space: nowrap;
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 51, 234, 0.1) 100%);
  padding: 20px 8px;
  border-radius: 8px;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

/* 滚动条样式 - 科技风格 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.6) 0%, rgba(147, 51, 234, 0.6) 100%);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.8) 0%, rgba(147, 51, 234, 0.8) 100%);
}

/* 报价保存状态角标：保证深色背景上可读（不依赖 Tailwind emerald/amber） */
.quote-save-status {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid;
}
.quote-save-status.saved {
  background: rgba(34, 197, 94, 0.25);
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.5);
}
.quote-save-status.unsaved {
  background: rgba(234, 179, 8, 0.25);
  color: #fde047;
  border-color: rgba(234, 179, 8, 0.5);
}

.no-print { }
@media print {
  .no-print { display: none !important; }
  
  /* 页面设置 - A4 纸张 */
  @page {
    size: A4;
    margin: 10mm;
  }
  
  body {
    background: white !important;
    margin: 0;
    padding: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    color-adjust: exact;
    font-size: 12pt;
  }
  
  #app {
    transform: none !important;
    width: 100% !important;
    min-height: auto !important;
    background: white !important;
  }
  
  /* 报价卡片打印优化 - 确保一页显示 */
  .quote-card {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    border: 2px solid #3b82f6 !important;
    background: white !important;
    backdrop-filter: none !important;
    page-break-inside: avoid;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 15px !important;
    transform: none !important;
    min-width: auto !important;
    width: 100% !important;
    border-radius: 8px !important;
  }
  
  .quote-card::before,
  .quote-card::after {
    display: none !important;
  }
  
  /* 标题优化 */
  .tech-title,
  .tech-title span {
    color: #3b82f6 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    font-size: 18pt !important;
    font-weight: 800 !important;
    text-shadow: none !important;
    margin-bottom: 10px !important;
    letter-spacing: 1px !important;
  }
  
  .tech-title span {
    font-size: 16pt !important;
    font-weight: 600 !important;
  }
  
  /* 日期时间优化 */
  .tech-title + div {
    font-size: 10pt !important;
    color: #374151 !important;
    font-weight: 600 !important;
  }
  
  /* 表格优化 */
  .quote-table {
    width: 100% !important;
    font-size: 9pt !important;
    border-collapse: collapse !important;
    table-layout: fixed !important;
    margin-top: 8px !important;
  }
  
  /* 隐藏最后一列（竖排文字列） */
  .quote-table colgroup col:nth-child(4),
  .quote-table th:nth-child(4),
  .quote-table td:nth-child(4) {
    display: none !important;
  }
  
  /* 重新分配列宽 */
  .quote-table colgroup col:nth-child(1) {
    width: 11% !important;
  }
  
  .quote-table colgroup col:nth-child(2) {
    width: 64% !important;
  }
  
  .quote-table colgroup col:nth-child(3) {
    width: 25% !important;
  }
  
  /* 表头优化 */
  .quote-table th {
    background: linear-gradient(180deg, #dbeafe 0%, #bfdbfe 100%) !important;
    color: #1e40af !important;
    font-weight: 800 !important;
    font-size: 9pt !important;
    border: 1.5px solid #3b82f6 !important;
    padding: 8px 6px !important;
    text-align: center !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  
  /* 单元格优化 */
  .quote-table td {
    background-color: white !important;
    color: #000 !important;
    font-size: 9pt !important;
    border: 1px solid #93c5fd !important;
    padding: 6px 8px !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.4 !important;
    vertical-align: middle !important;
  }
  
  /* 单数行背景 */
  .strip-0 {
    background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%) !important;
  }
  
  /* 双数行背景 */
  .strip-1 {
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%) !important;
  }
  
  /* 类别列优化 */
  .quote-table td:first-child {
    font-weight: 700 !important;
    background: linear-gradient(180deg, #dbeafe 0%, #bfdbfe 100%) !important;
    text-align: center !important;
    border: 1.5px solid #3b82f6 !important;
    color: #1e40af !important;
    font-size: 9pt !important;
  }
  
  /* 输入框显示优化 */
  .quote-table input,
  .quote-table select {
    border: none !important;
    background: transparent !important;
    appearance: none !important;
    font-size: 9pt !important;
    color: #000 !important;
    width: 100% !important;
    padding: 0 !important;
    font-weight: 600 !important;
  }
  
  /* 客户 ID 和备注显示 */
  .mb-3.no-print {
    display: flex !important;
    margin-bottom: 10px !important;
    gap: 1.5rem !important;
  }
  
  .mb-3.no-print .flex {
    display: flex !important;
    gap: 0.5rem !important;
    align-items: center !important;
  }
  
  .mb-3.no-print label {
    font-weight: 700 !important;
    color: #374151 !important;
    font-size: 9pt !important;
  }
  
  .mb-3.no-print input {
    border: none !important;
    background: transparent !important;
    font-size: 9pt !important;
    color: #000 !important;
    font-weight: 600 !important;
  }
  
  /* 质保行优化 */
  .quote-table tr:first-child td {
    font-weight: 700 !important;
    background: linear-gradient(180deg, #dbeafe 0%, #bfdbfe 100%) !important;
    border-top: 1.5px solid #3b82f6 !important;
  }
  
  /* 诚信和经营行优化 */
  .quote-table td[rowspan] {
    font-weight: 700 !important;
    font-size: 11pt !important;
    line-height: 2 !important;
    background: linear-gradient(180deg, #dbeafe 0%, #bfdbfe 100%) !important;
    vertical-align: middle !important;
    text-align: center !important;
    color: #1e40af !important;
    border: 1.5px solid #3b82f6 !important;
  }
  
  /* 总价行优化 */
  .quote-table tr:last-child {
    background: linear-gradient(180deg, #fef2f2 0%, #fee2e2 100%) !important;
  }
  
  .quote-table tr:last-child td:first-child {
    font-weight: 800 !important;
    font-size: 12pt !important;
    color: #dc2626 !important;
    background: linear-gradient(180deg, #fee2e2 0%, #fecaca 100%) !important;
    border: 1.5px solid #dc2626 !important;
  }
  
  .quote-table tr:last-child td:nth-child(2) {
    font-weight: 700 !important;
    font-size: 10pt !important;
    color: #dc2626 !important;
  }
  
  .quote-table tr:last-child td:nth-child(3) {
    font-weight: 800 !important;
    font-size: 14pt !important;
    color: #dc2626 !important;
    font-family: 'Arial', sans-serif !important;
  }
  
  /* 空行优化 */
  .quote-table tr:has(input[placeholder*="输入搜索"]) {
    background: linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%) !important;
  }
  
  .quote-table tr:has(input[placeholder*="输入搜索"]) td {
    color: #9ca3af !important;
    font-style: italic !important;
  }
  
  /* 确保内容紧凑，一页显示 */
  .quote-header,
  .quote-body,
  .quote-footer {
    page-break-inside: avoid;
  }
  
  /* 隐藏不必要的元素 */
  .quote-save-status,
  .toast,
  .loading,
  .quote-cell-overlay,
  .quote-cell-paste-flash,
  .autocomplete-list {
    display: none !important;
  }
}

/* ========== 移动端：汉堡菜单、安全区、减弱动效 ========== */
@media (max-width: 768px) {
  .max-w-\[1600px\].mx-auto.p-4 {
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  }
  nav h1 { white-space: nowrap; }
}
/* C: 移动端弱化重特效，降低合成和重绘压力 */
@media (max-width: 768px) {
  body::before,
  body::after,
  #app::before {
    opacity: 0.35;
  }
  .quote-card,
  .profit-table,
  .record-card,
  .input-group {
    backdrop-filter: none;
  }
  .quote-card,
  .profit-table,
  .record-card {
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.28);
  }
  .quote-card::before,
  .profit-table::before {
    animation: none;
  }
  .nav-drawer-overlay {
    backdrop-filter: none;
  }
}
@media (max-width: 768px) and (orientation: portrait) {
  html,
  body,
  #app {
    overflow-x: auto !important;
  }
}
.hamburger-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  padding: 0;
  background: rgba(59, 130, 246, 0.2);
  border: 1px solid rgba(59, 130, 246, 0.4);
  border-radius: 8px;
  color: #e0e7ff;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.hamburger-btn:hover { background: rgba(59, 130, 246, 0.35); border-color: rgba(59, 130, 246, 0.6); }
.hamburger-btn svg { width: 24px; height: 24px; }
.nav-drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 1000;
  animation: nav-overlay-in 0.25s ease;
}
@keyframes nav-overlay-in { from { opacity: 0; } to { opacity: 1; } }
.nav-drawer-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 75%; max-width: 320px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(30, 41, 59, 0.98) 100%);
  border-left: 1px solid rgba(59, 130, 246, 0.4);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.4);
  z-index: 1001;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.nav-drawer-panel .nav-drawer-links {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.nav-drawer-panel.open { transform: translateX(0); }
.nav-drawer-panel .nav-drawer-user {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  font-size: 14px;
}
.nav-drawer-panel .nav-drawer-user strong { color: #e0e7ff; }
.nav-drawer-panel a {
  display: block;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #e0e7ff;
  font-size: 16px;
  text-decoration: none;
  min-height: 44px;
  box-sizing: border-box;
  transition: background 0.2s;
}
.nav-drawer-panel a:hover { background: rgba(59, 130, 246, 0.15); }
.nav-drawer-panel a.active { background: rgba(59, 130, 246, 0.25); color: #93c5fd; font-weight: 600; border-left: 3px solid #60a5fa; }
.nav-drawer-panel .nav-drawer-logout {
  display: block; width: 100%;
  padding: 14px 20px;
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: none;
  background: transparent;
  color: #f87171;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
  min-height: 44px;
  box-sizing: border-box;
  transition: background 0.2s;
}
.nav-drawer-panel .nav-drawer-logout:hover { background: rgba(248, 113, 113, 0.15); }
@media (max-width: 768px) {
  .hamburger-btn { display: flex; }
  .nav-links-desktop { display: none !important; }
}
@media (min-width: 769px) {
  .nav-drawer-overlay,
  .nav-drawer-panel { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-drawer-panel,
  .nav-drawer-overlay,
  .toast { transition: none; }
  .nav-drawer-overlay { animation: none; }
}

/* 移动端：下拉不触发整页刷新 */
html, body { overscroll-behavior-y: contain; }

/* 移动端：输入框至少 16px 避免 iOS 聚焦放大 */
@media (max-width: 768px) {
  input[type="text"],
  input[type="number"],
  select,
  textarea { font-size: 16px; }
  /* 主操作按钮最小触控区域约 44px */
  .tech-button {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 16px;
  }
  .quote-card .no-print button:not([type="checkbox"]),
  .info-card button,
  .record-card button,
  .bg-slate-900\/80 button {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* 若 Toast 在底部时，可加 class="toast" 并配合此规则避免被手势条/键盘遮挡 */
.toast {
  bottom: max(1rem, env(safe-area-inset-bottom));
}

/* 客户ID提醒弹窗：入场动画与样式 */
.customer-id-modal-overlay {
  animation: customer-id-modal-overlay-in 0.2s ease-out;
  position: fixed;
  inset: 0;
  z-index: 10000;
}
@keyframes customer-id-modal-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.customer-id-modal-backdrop {
  animation: customer-id-modal-backdrop-in 0.2s ease-out;
  z-index: 10001;
}
@keyframes customer-id-modal-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.customer-id-modal-box {
  animation: customer-id-modal-box-in 0.25s ease-out;
  z-index: 10002;
}
@keyframes customer-id-modal-box-in {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* 提示文案：纯白 + 轻微阴影，确保在深色背景上清晰可见 */
.customer-id-modal-hint {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #ffffff !important;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
}

/* 「取消」「仍要保存」：纯白文字 + 明确背景/边框，保证任何环境下都看得清 */
.customer-id-modal-btn-cancel {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(148, 163, 184, 0.8);
  background: rgba(51, 65, 85, 0.9);
  color: #ffffff !important;
  transition: background-color 0.2s, border-color 0.2s;
}
.customer-id-modal-btn-cancel:hover {
  background: rgba(71, 85, 105, 0.95);
  border-color: rgba(203, 213, 225, 0.8);
}
.customer-id-modal-btn-secondary {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(100, 116, 139, 0.6);
  background: rgba(51, 65, 85, 0.85);
  color: #ffffff !important;
  transition: background-color 0.2s, border-color 0.2s;
}
.customer-id-modal-btn-secondary:hover {
  background: rgba(71, 85, 105, 0.95);
  border-color: rgba(148, 163, 184, 0.8);
}

.customer-id-modal-input:hover {
  border-color: rgba(34, 211, 238, 0.6);
}
/* 输入框聚焦/输入时保持深色背景与浅色文字，避免浏览器默认白底导致看不清 */
.customer-id-modal-input:focus {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
}
.customer-id-modal-input::placeholder {
  color: #94a3b8;
}
/* 覆盖部分浏览器自动填充时的白底 */
.customer-id-modal-input:-webkit-autofill,
.customer-id-modal-input:-webkit-autofill:hover,
.customer-id-modal-input:-webkit-autofill:focus,
.customer-id-modal-input:-webkit-autofill:active {
  -webkit-text-fill-color: #f1f5f9 !important;
  -webkit-box-shadow: 0 0 0 1000px #1e293b inset !important;
  box-shadow: 0 0 0 1000px #1e293b inset !important;
  transition: background-color 5000s ease-in-out 0s;
}
.customer-id-modal-btn {
  min-height: 40px;
  min-width: 44px;
}
@media (max-width: 768px) {
  .customer-id-modal-btn { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .customer-id-modal-overlay,
  .customer-id-modal-backdrop,
  .customer-id-modal-box { animation: none; }
}

/* 移动端横屏引导与快捷操作 */
.mobile-landscape-tip {
  margin-bottom: 12px;
  border: 1px solid rgba(59, 130, 246, 0.45);
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.92));
  color: #dbeafe;
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.35);
}

.mobile-landscape-tip .tip-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.mobile-landscape-tip .tip-btn {
  border: 1px solid rgba(59, 130, 246, 0.45);
  background: rgba(59, 130, 246, 0.18);
  color: #e0f2fe;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.2;
}

.mobile-landscape-tip .tip-btn.secondary {
  border-color: rgba(148, 163, 184, 0.45);
  background: rgba(51, 65, 85, 0.35);
  color: #cbd5e1;
}

.quote-actions-sticky {
  position: sticky;
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 30;
  padding: 10px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(59, 130, 246, 0.35);
  backdrop-filter: blur(8px);
}

@media (min-width: 769px) {
  .quote-actions-sticky {
    position: static;
    padding: 0;
    border: 0;
    background: transparent;
    backdrop-filter: none;
  }
}