/* ========================================
   MBH Quotation - Modern Minimal Design
   现代简约精致的报价系统界面
   ======================================== */

/* ===== 设计理念 =====
   - 视觉风格：现代简约、精致优雅
   - 配色方案：柔白色背景 + 深灰文字 + 优雅蓝作为点缀
   - 字体：Inter + 细体无衬线
   - 动画：轻盈流畅、自然过渡
   - 特点：大量留白、细腻边框、柔和阴影
*/

/* ===== CSS变量定义 ===== */
:root {
  /* 主色调 - 简洁白色 */
  --bg-primary: #ffffff;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f5f5f5;
  --bg-hover: #f0f0f0;
  --color-bg-primary: var(--bg-primary);
  --color-bg-secondary: var(--bg-secondary);
  --color-bg-tertiary: var(--bg-tertiary);
  --color-bg-hover: var(--bg-hover);

  /* 强调色 - 蓝色 */
  --color-accent: #3b82f6;
  --color-accent-hover: #2563eb;
  --color-accent-light: #eff6ff;

  /* 成功/警告/危险色 */
  --color-success: #34c759;
  --color-success-bg: #e8f9ed;
  --color-warning: #ff9500;
  --color-warning-bg: #fff6e6;
  --color-danger: #ff3b30;
  --color-danger-bg: #feebe9;

  /* 文字颜色 */
  --text-primary: #1d1d1f;
  --text-secondary: #86868b;
  --text-tertiary: #a1a1a6;
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-tertiary: var(--text-tertiary);

  /* 边框和分隔 */
  --border-color: #e5e5e7;
  --border-light: #f0f0f2;
  --color-border: var(--border-color);
  --color-border-light: var(--border-light);

  /* 阴影 */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);

  /* 间距 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* 圆角 */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* 过渡 */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  /* 兼容旧CSS变量名 */
  --accent-blue: #3b82f6;
  --accent-red: #ff3b30;
  --accent-green: #34c759;
  --color-accent: #3b82f6;
  --color-accent-hover: #2563eb;
  --color-accent-light: rgba(59, 130, 246, 0.15);
}

/* ===== 深色主题 ===== */
.theme-dark {
  --color-bg-primary: #000000;
  --color-bg-secondary: #1c1c1e;
  --color-bg-tertiary: #2c2c2e;
  --color-bg-hover: #3a3a3c;

  --color-accent: #3b82f6;
  --color-accent-hover: #60a5fa;
  --color-accent-light: rgba(59, 130, 246, 0.15);

  --color-success-bg: rgba(48, 209, 88, 0.15);
  --color-warning-bg: rgba(255, 159, 10, 0.15);
  --color-danger-bg: rgba(255, 69, 58, 0.25);
  --color-danger: #ff453a;

  --color-text-primary: #ffffff;
  --color-text-secondary: #8e8e93;
  --color-text-tertiary: #6e6e73;

  --color-border: #38383a;
  --color-border-light: #2c2c2e;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);

  /* 深色主题兼容变量 */
  --accent-blue: #0a84ff;
  --accent-red: #ff453a;
  --accent-green: #30d158;
  --bg-primary: #000000;
  --bg-secondary: #1c1c1e;
  --bg-tertiary: #2c2c2e;
  --text-primary: #ffffff;
  --text-secondary: #8e8e93;
  --border-color: #38383a;
  --border-light: #2c2c2e;
}

/* ===== 护眼主题 ===== */
.theme-eye-care {
  --color-bg-primary: #f8f6f3;
  --color-bg-secondary: #ffffff;
  --color-bg-tertiary: #f0ede8;
  --color-bg-hover: #e8e4dc;

  --color-accent: #7c6f5a;
  --color-accent-hover: #5d5646;
  --color-accent-light: rgba(124, 111, 90, 0.1);

  --color-success-bg: rgba(120, 160, 90, 0.12);
  --color-warning-bg: rgba(200, 160, 90, 0.12);
  --color-danger-bg: rgba(190, 100, 90, 0.12);

  --color-text-primary: #3d3d3d;
  --color-text-secondary: #6b6b6b;
  --color-text-tertiary: #9a9a9a;

  --color-border: #ddd8d0;
  --color-border-light: #eee9e1;

  /* 护眼主题兼容变量 */
  --accent-blue: #7c6f5a;
  --accent-red: #b85450;
  --accent-green: #7c6f5a;
  --bg-primary: #f8f6f3;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f0ede8;
  --text-primary: #3d3d3d;
  --text-secondary: #6b6b6b;
  --border-color: #ddd8d0;
  --border-light: #eee9e1;
}

/* ===== 2026 新年主题 - 中国风 ===== */
.theme-christmas,
.theme-christmas.golden {
  --bg-primary: linear-gradient(135deg, #8B0000 0%, #B22222 50%, #CD5C5C 100%);
  --bg-secondary: #FFF5EE;
  --bg-tertiary: #FFFAF0;
  --bg-hover: #DEB887;

  --accent-blue: #B8860B;
  --accent-red: #B22222;
  --accent-green: #2E8B57;

  --color-accent: #B8860B;
  --color-accent-hover: #DAA520;
  --color-accent-light: rgba(184, 134, 11, 0.1);

  --color-success-bg: rgba(46, 139, 87, 0.1);
  --color-warning-bg: rgba(184, 134, 11, 0.1);
  --color-danger-bg: rgba(178, 34, 34, 0.1);

  --text-primary: #3D2914;
  --text-secondary: #5D3A1A;
  --text-tertiary: #8B4513;

  --border-color: #DEB887;
  --border-light: #D2B48C;
}

/* 2026新年主题背景样式 */
.theme-christmas {
  background:
    radial-gradient(ellipse at top, rgba(139, 0, 0, 0.4) 0%, transparent 50%),
    radial-gradient(ellipse at bottom, rgba(255, 215, 0, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 30% 70%, rgba(255, 99, 71, 0.1) 0%, transparent 40%),
    radial-gradient(circle at 70% 30%, rgba(255, 215, 0, 0.08) 0%, transparent 40%),
    linear-gradient(135deg, #8B0000 0%, #B22222 25%, #DC143C 50%, #8B0000 75%, #2D0A0A 100%);
  background-size: 100% 100%;
}

/* 酷炫2026大标题 - 左下角连体字体 */
.year-2026-title {
  position: fixed;
  bottom: 30px;
  left: 80px;
  font-family: 'Great Vibes', 'Playball', 'Yellowtail', cursive;
  font-size: 180px;
  font-weight: 400;
  color: transparent;
  background: linear-gradient(180deg,
    #FFD700 0%,
    #FFA500 30%,
    #FF6347 60%,
    #DC143C 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow:
    0 0 40px rgba(255, 215, 0, 0.9),
    0 0 80px rgba(255, 165, 0, 0.7),
    6px 6px 12px rgba(139, 0, 0, 0.5);
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
  transform: rotate(-8deg);
  transform-origin: left bottom;
  line-height: 0.85;
  letter-spacing: -8px;
}

/* ===== 基础重置 ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* 页面加载动画 */
body.loading .container {
  opacity: 0;
  transform: translateY(10px);
}

body:not(.loading) .container {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* ===== 提成计算器导航按钮 ===== */
.ai-quote-launcher-wrap {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 9999;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.ai-quote-launcher {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: var(--radius-full);
  color: #fff;
  background: linear-gradient(115deg, #1769ff 0%, #5b7cff 46%, #08a9ff 100%);
  background-size: 220% 220%;
  box-shadow: 0 8px 22px rgba(23, 105, 255, 0.3), 0 0 0 0 rgba(58, 132, 255, 0.3);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  white-space: nowrap;
  cursor: pointer;
  animation: aiQuoteGradient 3.2s ease-in-out infinite, aiQuotePulse 2.4s ease-out infinite;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ai-quote-launcher::before {
  content: '';
  position: absolute;
  inset: -2px auto -2px -45%;
  z-index: -1;
  width: 32%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.48), transparent);
  transform: skewX(-18deg);
  animation: aiQuoteShine 3s ease-in-out infinite;
}

.ai-quote-launcher:hover { transform: translateY(-1px); box-shadow: 0 11px 27px rgba(23, 105, 255, 0.38); }
.ai-quote-launcher:active { transform: translateY(0) scale(0.98); }
.ai-quote-launcher:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent-blue) 32%, transparent); outline-offset: 3px; }
.ai-quote-launcher[aria-expanded="true"] { background: linear-gradient(115deg, #075eea, #315fe9 55%, #008bcf); box-shadow: 0 8px 22px rgba(23, 105, 255, 0.24); animation: none; }

@keyframes aiQuoteGradient { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes aiQuotePulse { 0%,100% { box-shadow: 0 8px 22px rgba(23,105,255,.3), 0 0 0 0 rgba(58,132,255,.28); } 55% { box-shadow: 0 8px 25px rgba(23,105,255,.38), 0 0 0 8px rgba(58,132,255,0); } }
@keyframes aiQuoteShine { 0%,48% { left: -45%; } 78%,100% { left: 125%; } }

.commission-selector {
  position: fixed;
  top: 20px;
  right: 330px;
  z-index: 9999;
  display: flex;
  gap: 6px;
  background: var(--bg-secondary);
  padding: 4px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ===== 主题/语言选择器 ===== */
.theme-selector {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  gap: 6px;
  background: var(--bg-secondary);
  padding: 4px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.language-selector {
  position: fixed;
  top: 20px;
  right: 180px;
  z-index: 9999;
  display: flex;
  gap: 6px;
  background: var(--bg-secondary);
  padding: 4px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 向下滚动时隐藏 */
body.is-scrolling-down .commission-selector,
body.is-scrolling-down .language-selector,
body.is-scrolling-down .theme-selector,
body.is-scrolling-down .ai-quote-launcher-wrap {
  transform: translateY(-100px);
  opacity: 0;
}

@media (max-width: 640px) {
  .top-controls {
    position: fixed;
    top: 10px;
    left: 16px;
    right: 16px;
    transform: none;
    z-index: 9999;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    width: auto;
    max-width: none;
  }

  .ai-quote-launcher-wrap {
    position: fixed;
    top: 64px;
    left: 16px;
    z-index: 9998;
  }

  .ai-quote-launcher { min-height: 36px; padding: 8px 12px; font-size: 11px; }

  .commission-selector {
    order: 1;
    position: static;
    justify-self: start;
    width: auto;
    margin: 0;
    transform: none;
    transform-origin: center;
  }
  .language-selector {
    order: 2;
    position: static;
    justify-self: center;
    transform: none;
    transform-origin: center;
  }
  .theme-selector {
    order: 3;
    position: static;
    justify-self: end;
    transform: none;
    transform-origin: center;
    gap: 4px;
  }

  .commission-btn {
    width: 108px;
    white-space: nowrap;
    writing-mode: horizontal-tb;
  }

  body.is-scrolling-down .top-controls {
    transform: translateY(-80px);
    opacity: 0;
  }

  body.is-scrolling-down .commission-selector,
  body.is-scrolling-down .language-selector,
  body.is-scrolling-down .theme-selector,
  body.is-scrolling-down .ai-quote-launcher-wrap {
    transform: none;
  }
}

/* 手机端隐藏顶部辅助入口，给型号和报价留下完整空间。 */
@media (max-width: 1024px) {
  .commission-selector,
  .language-selector,
  .theme-selector {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-quote-launcher { animation: none; }
  .ai-quote-launcher::before { display: none; }
}

.lang-btn {
  padding: 6px 12px;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.lang-btn:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.lang-btn.active {
  background: var(--color-accent);
  color: white;
}

.theme-btn {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.theme-btn:hover {
  transform: scale(1.1);
}

.theme-btn.active {
  box-shadow: 0 0 0 2px var(--bg-secondary), 0 0 0 4px var(--color-accent);
}

.theme-btn .preview {
  width: 100%;
  height: 100%;
}

.theme-btn.theme-light .preview {
  background: linear-gradient(135deg, #f5f5f7 0%, #ffffff 100%);
}

.theme-btn.theme-eye-care .preview {
  background: linear-gradient(135deg, #f4f1e8 0%, #fffaf3 100%);
}

.theme-btn.theme-dark .preview {
  background: linear-gradient(135deg, #1c1c1e 0%, #2c2c2e 100%);
}

.theme-btn.theme-christmas .preview {
  background: linear-gradient(135deg, #8B0000 0%, #B8860B 50%, #B22222 100%);
}

.theme-btn.theme-christmas .preview.text {
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Microsoft YaHei', 'SimSun', serif;
  font-size: 14px;
  font-weight: bold;
  color: #FFD700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ===== 主容器 ===== */
.container {
  max-width: 680px;
  margin: 80px auto 60px;
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-color);
  transition: background-color var(--transition-normal);
}

@media (max-width: 640px) {
  .container {
    margin: 60px 16px 280px;
    padding: 24px 20px;
  }
}

/* ===== 标题 ===== */
h2 {
  text-align: center;
  margin: 0 0 var(--spacing-xl) 0;
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

/* ===== 搜索区域 ===== */
#section-search {
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
}

.search-wrapper {
  position: relative;
}

#modelSearch {
  width: 100%;
  padding: var(--spacing-md) var(--spacing-lg);
  padding-left: 44px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  font-size: 15px;
  transition: all var(--transition-fast);
}

#modelSearch:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-accent-light);
}

#modelSearch::placeholder {
  color: var(--text-tertiary);
}

/* 搜索区：上行输入+按钮，下行国家代理与「输入+搜索」同宽 */
.search-form-grid {
  --search-control-h: 42px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px 12px;
  align-items: stretch;
  margin-bottom: 8px;
}

.search-form-grid #modelSearch {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  height: var(--search-control-h);
  box-sizing: border-box;
  margin: 0;
  padding: 0 14px;
  padding-left: 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 15px;
  line-height: 1.4;
  background: var(--input-bg);
  color: var(--text-primary);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-form-grid #modelSearch:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

.search-form-grid .search-form-grid__search,
.search-form-grid .search-form-grid__field {
  grid-row: 1;
  height: var(--search-control-h);
  margin: 0;
  padding: 0 18px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  box-sizing: border-box;
}

.search-form-grid .search-form-grid__search {
  grid-column: 2;
}

.search-form-grid .search-form-grid__field {
  grid-column: 3;
  font-weight: 500;
  font-size: 13px;
  padding: 0 14px;
  gap: 6px;
}

.search-form-grid__country {
  grid-column: 1 / 3;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.search-form-grid__country-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.2;
}

.search-form-grid #countryAgentSelect {
  width: 100%;
  min-width: 0;
  max-width: none;
  height: var(--search-control-h);
  margin: 0;
  box-sizing: border-box;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0 36px 0 12px;
  font-size: 14px;
  line-height: 1.4;
  background: var(--input-bg);
  color: var(--text-primary);
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1.41 0 6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
}

.search-form-grid #countryAgentSelect:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

.search-form-grid__results {
  grid-column: 1 / 3;
  grid-row: 3;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.search-icon {
  position: absolute;
  left: var(--spacing-md);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  pointer-events: none;
}

/* ===== 系列/分类区域 ===== */
.series-section {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.category-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
}

.btn-category {
  padding: 6px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.btn-category:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.btn-category.active {
  background: var(--accent-blue);
  color: white;
  border-color: var(--accent-blue);
}

#seriesButtons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 6px;
  /* 与 gap 同步，供展开面板内缩进对齐「按钮行到面板顶」总高度 */
  --series-buttons-row-gap: 6px;
}

.series-section {
  padding: 16px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
}

.series-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.series-section-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.series-view-toggle {
  display: inline-flex;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--bg-secondary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.series-view-toggle__btn {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.series-view-toggle__btn:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.series-view-toggle__btn.active {
  background: var(--color-accent);
  color: #fff;
}

/* 图片模式：系列卡片网格固定高度，内部滚动浏览（--series-scroll-* 由 JS 按 3 行卡片实测高度设置） */
.series-buttons-scroll.series-buttons-scroll--active {
  max-height: var(--series-scroll-collapsed-max, min(400px, 44vh));
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  overflow-anchor: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  padding: 10px;
  margin-bottom: 0;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  transition: max-height 0.28s ease;
}

/* 展开型号面板时加高滚动区，便于同屏浏览系列行与型号列表 */
.series-buttons-scroll.series-buttons-scroll--active.series-buttons-scroll--expanded {
  max-height: var(--series-scroll-expanded-max, min(640px, 68vh));
}

#seriesDetails > .series-detail {
  margin-top: 10px;
}

#seriesButtons.series-buttons--image {
  /* 桌面：固定每行 5 个，等分宽度 */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  --series-buttons-row-gap: 10px;
}

@media (max-width: 1100px) {
  #seriesButtons.series-buttons--image {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  #seriesButtons.series-buttons--image {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.series-pick-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  cursor: pointer;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  min-height: 0;
}

.series-pick-card:hover:not(.disabled) {
  border-color: var(--accent-blue);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.series-pick-card.active {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35);
  background: rgba(59, 130, 246, 0.12);
}

.series-pick-card.active .series-pick-card__series {
  color: var(--accent-blue);
}

.series-pick-card.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.series-pick-card__thumb {
  aspect-ratio: 1;
  min-height: 0;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.series-pick-card__thumb img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.series-pick-card__thumb img.thumb-img--ready {
  opacity: 1;
}

.series-pick-card__thumb--empty::after {
  content: '无图';
  font-size: 12px;
  color: var(--text-secondary);
}

.series-pick-card__caption {
  padding: 8px 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.series-pick-card__model {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.25;
  word-break: break-all;
}

.series-pick-card__series {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.25;
}

.btn-series {
  position: relative;
  padding: 8px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 36px;
  display: flex;
  align-items: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  justify-content: center;
  line-height: 1.2;
}

.btn-series:hover {
  border-color: var(--accent-blue);
  background: var(--accent-blue);
  color: white;
}

.btn-series.active {
  background: var(--accent-blue) !important;
  border-color: var(--accent-blue) !important;
  color: white !important;
}

.btn-series .count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 14px;
  height: 14px;
  background: var(--color-accent);
  border-radius: var(--radius-full);
  font-size: 9px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  border: 1px solid var(--bg-secondary);
}

.btn-series.active .count {
  background: rgba(255, 255, 255, 0.3);
}

#seriesButtons.series-sort-active .btn-series {
  cursor: grabbing;
}

/* ===== 系列详情展开 ===== */
.series-detail {
  position: relative;
  margin-top: var(--spacing-lg);
  padding: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  animation: slideDown 0.2s ease;
}

/* 指向当前系列按钮/卡片的三角指示（--series-detail-caret-left 由 JS 按选中项对齐） */
.series-detail::before,
.series-detail::after {
  content: '';
  position: absolute;
  left: var(--series-detail-caret-left, 50%);
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-left-color: transparent;
  border-right-color: transparent;
  border-top: none;
  pointer-events: none;
}

.series-detail::before {
  top: -12px;
  z-index: 5;
  border-width: 0 12px 12px 12px;
  border-bottom-color: var(--border-color);
}

.series-detail::after {
  top: -10px;
  z-index: 6;
  border-width: 0 10px 10px 10px;
  border-bottom-color: var(--bg-secondary);
}

#seriesButtons > .series-detail {
  grid-column: 1 / -1;
  width: 100%;
  box-sizing: border-box;
}

/* 文本模式：型号面板紧跟当前系列按钮行下方 */
#seriesButtons:not(.series-buttons--image) > .series-detail-inline {
  margin-top: 6px;
  margin-bottom: 12px;
}

/* 图片模式：型号列表紧跟当前系列所在行下方 */
#seriesButtons.series-buttons--image > .series-detail-image-inline {
  grid-column: 1 / -1;
  margin-top: 6px;
  margin-bottom: 12px;
  /* 与上方「行间距 + 本块 margin-top」一致，供标题区 padding-bottom 对齐 */
  --series-detail-above-stack: calc(var(--series-buttons-row-gap) + 6px);
}

/* 图片模式展开：限高 + 内部滚动（方案一）；外层 overflow 可见以便三角箭头不被裁切 */
.series-detail--image-mode {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: visible;
  max-height: min(68vh, 720px);
  min-height: 280px;
}

.series-detail-image-mode__shell {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border-radius: inherit;
}

.series-detail-image-mode__header {
  flex-shrink: 0;
  padding: 10px 12px;
  /* 标题下缘到分隔线底 ≈ 按钮行底到面板顶（--series-detail-above-stack），再减 1px 底边框 */
  padding-bottom: calc(var(--series-detail-above-stack, 16px) - 1px);
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
  z-index: 2;
}

.series-detail-image-mode__header h4 {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}

.series-detail-image-mode__header .series-close-btn {
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 18px;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
  line-height: 1;
}

.series-detail-image-mode__header .series-close-btn:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.series-detail-image-mode__model-info {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  animation: slideDown 0.2s ease-out;
}

.series-detail-image-mode__model-info[hidden] {
  display: none !important;
}

.series-image-mode-info__thumb {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.series-image-mode-info__thumb img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.series-image-mode-info__thumb img.thumb-img--ready {
  opacity: 1;
}

.series-image-mode-info__thumb--empty::after {
  content: '无图';
  font-size: 11px;
  color: var(--text-secondary);
}

.series-image-mode-info__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.series-image-mode-info__code {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  word-break: break-all;
}

.series-image-mode-info__name {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.series-image-mode-info__price {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.3;
}

.series-image-mode-info__price-label {
  color: var(--text-secondary);
  margin-right: 4px;
}

.series-image-mode-info__price-value {
  font-weight: 700;
  color: var(--text-primary);
}

.series-detail-image-mode__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* 与标题栏 padding-top 一致，分隔线到首排卡片留出呼吸感 */
  padding: 10px 12px 10px;
  -webkit-overflow-scrolling: touch;
}

.series-detail-image-mode__footer {
  flex-shrink: 0;
  padding: 8px 12px 10px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-secondary);
  z-index: 2;
}

.series-detail--image-mode .all-btn {
  margin-top: 0;
  grid-column: unset;
  width: 100%;
}

/* 须高于后方 .model-list 的优先级（同元素双 class） */
.model-list.model-list--image-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  align-items: stretch;
}

.model-pick-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  cursor: pointer;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.model-pick-card:hover:not(.restricted) {
  border-color: var(--accent-blue);
}

.model-pick-card.selected,
.model-pick-card.field-quote-active {
  border: 2px solid var(--color-accent);
  z-index: 1;
}

.model-pick-card.selected:hover:not(.restricted),
.model-pick-card.field-quote-active:hover:not(.restricted) {
  border-color: var(--color-accent-hover);
}

.model-pick-card.selected::after,
.model-pick-card.field-quote-active::after {
  content: '✓';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  z-index: 2;
}

.model-pick-card.restricted {
  opacity: 0.45;
  cursor: not-allowed;
}

/* 现场报价使用独立的单选高亮；普通报价的历史选中状态暂时不展示，
   退出现场报价后会自动恢复，避免用户误以为同时选中了多个型号。 */
.field-quote-mode .model-pick-card.selected:not(.field-quote-active) {
  border: 1px solid var(--border-color);
  z-index: auto;
}

.field-quote-mode .model-pick-card.selected:not(.field-quote-active)::after {
  display: none;
}

.model-pick-card__thumb {
  aspect-ratio: 1;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.model-pick-card__thumb img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.model-pick-card__thumb img.thumb-img--ready {
  opacity: 1;
}

.model-pick-card__thumb--empty::after {
  content: '无图';
  font-size: 11px;
  color: var(--text-secondary);
}

.model-pick-card__caption {
  padding: 4px 3px 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.model-pick-card__code {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.15;
  word-break: break-all;
}

.model-pick-card__name {
  font-size: 9px;
  color: var(--text-secondary);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.series-detail-inline {
  margin-top: 4px;
  margin-bottom: 8px;
}

.series-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  margin-bottom: 8px;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.series-detail h4 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 var(--spacing-md) 0;
  color: var(--text-primary);
}

/* 图片模式标题 h4 与上一规则特异性冲突时由后者覆盖，会多出 16px 下边距；强制清零 */
.series-detail--image-mode .series-detail-image-mode__header h4 {
  margin: 0;
}

.model-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(70px, 1fr));
  gap: 4px;
  width: 100%;
  align-items: stretch;
}

/* 现场报价卡作为型号网格中的整行项目，直接插在当前型号上方。 */
.model-list > #fixedPreviewArea.fixed-preview-inline {
  grid-column: 1 / -1;
  width: 100% !important;
  margin: 4px 0 8px !important;
}

.model-btn {
  position: relative;
  padding: 4px 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: center;
  height: 42px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  box-sizing: border-box;
}

.model-btn .model-code {
  font-weight: 600;
  display: block;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.2;
  text-align: center;
  width: 100%;
}

.model-btn .model-name {
  display: block;
  text-align: center;
  width: 100%;
}

.model-btn:hover {
  border-color: var(--color-accent) !important;
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

.model-btn:hover,
.model-btn.selected:hover {
  height: 42px;
  white-space: normal;
}

.model-btn:hover {
  background: var(--bg-tertiary) !important;
}

.model-btn.selected:hover,
.model-btn.field-quote-active:hover {
  background: var(--color-accent) !important;
  filter: brightness(1.1);
}

.model-btn.selected,
.model-btn.field-quote-active {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: white !important;
}

.model-btn .model-code {
  font-weight: 500;
  margin-bottom: 2px;
  display: block;
}

.model-btn .model-name {
  color: #777777;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.model-btn.selected .model-name,
.model-btn.field-quote-active .model-name {
  color: rgba(255, 255, 255, 0.8);
}

.field-quote-mode .model-btn.selected:not(.field-quote-active) {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

.field-quote-mode .model-btn.selected:not(.field-quote-active) .model-name {
  color: #777777;
}

.all-btn {
  padding: 8px 12px;
  border: 1px solid var(--color-accent);
  background: transparent;
  color: var(--color-accent);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  width: 100%;
  grid-column: 1 / -1;
  box-sizing: border-box;
  text-align: center;
  display: block;
  margin-top: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.all-btn:hover {
  background: var(--color-accent);
  color: white;
}

.all-btn.selected {
  background: var(--color-accent);
  color: white;
  border-color: var(--color-accent);
}

.all-btn.selected:hover {
  background: var(--color-danger);
  border-color: var(--color-danger);
}

/* ===== 表单/输入区域 ===== */
.form-section {
  background: var(--bg-tertiary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.form-section h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 var(--spacing-md) 0;
  color: var(--text-primary);
}

.selected-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-md);
}

.selected-count {
  font-size: 13px;
  color: var(--text-secondary);
}

.input-section-delete-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.btn-delete-selected,
.btn-delete-all {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--accent-red);
  border-radius: 6px;
  color: var(--accent-red);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-delete-selected:hover:not(:disabled),
.btn-delete-all:hover {
  background: var(--color-danger-bg, rgba(239, 68, 68, 0.08));
  filter: brightness(0.95);
}

.btn-delete-selected:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  border-color: var(--border-color);
  color: var(--text-tertiary);
}

/* ===== 产品行列表 ===== */
#rows {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  /* 长按卡片排序时，iPhone 不应把型号名称当作可复制文字。 */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.row input,
.row textarea {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

.row:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
}

.row.dragging {
  opacity: 0.65;
  transform: scale(1.01);
  border-color: var(--color-accent);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.25);
}

.row.row--page-hint {
  animation: row-page-hint 1.1s ease;
}

@keyframes row-page-hint {
  0%, 100% { box-shadow: none; }
  30%, 70% { box-shadow: 0 0 0 3px var(--color-accent); }
}

.row.row--batch-selected {
  border-color: var(--color-accent);
  background: var(--color-accent-light);
}

#rows.rows--drag-active {
  outline: 2px dashed transparent;
  outline-offset: 2px;
  transition: outline-color 0.15s ease;
}

#rows.rows--drag-prev-hint {
  outline-color: var(--color-accent);
}

#rows.rows--drag-next-hint {
  outline-color: var(--color-accent);
}

.row-batch-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 13px;
}

.row-batch-toolbar__select-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--text-primary);
  user-select: none;
}

.row-batch-toolbar__count {
  color: var(--text-secondary);
  min-width: 72px;
}

.row-batch-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}

.btn-row-batch {
  padding: 5px 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.btn-row-batch:hover:not(:disabled) {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn-row-batch:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-row-batch.btn-row-batch--active {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-light);
}

.row-select-cb {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--color-accent);
}

/* 控制行：拖拽、眼睛、型号+单价、数量、± 同一水平线垂直居中 */
.row-controls {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 64px 34px 34px;
  align-items: center;
  justify-items: start;
  column-gap: 12px;
  min-height: 36px;
}

.row-controls > .model-input-wrapper {
  justify-self: stretch;
  width: 100%;
  min-width: 0;
}

.row-controls > .drag-handle {
  justify-self: center;
}

.row-controls > .btn-success,
.row-controls > .btn-danger {
  justify-self: center;
}

.drag-handle {
  display: none;
  color: var(--text-tertiary);
  font-size: 13px;
  text-align: center;
  transition: color var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 34px;
  user-select: none;
  line-height: 1;
}

.drag-handle {
  touch-action: none;
}

.drag-handle:active {
  cursor: grabbing;
  color: var(--color-accent);
}

.row.row--dragging-group {
  opacity: 0.55;
  border: 2px solid var(--color-accent);
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.2);
  pointer-events: none;
}

body.quotation-pointer-dragging {
  user-select: none;
  cursor: grabbing;
}

body.quotation-pointer-dragging * {
  cursor: grabbing !important;
}

.quotation-drag-ghost {
  position: fixed;
  z-index: 10050;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  transform: translate(-50%, -120%);
  white-space: nowrap;
}

#pagination.pagination--drag-target {
  outline: 2px dashed var(--color-accent);
  outline-offset: 4px;
  border-radius: var(--radius-md);
}

#prevPage.pagination-drop-hot,
#nextPage.pagination-drop-hot {
  border-color: var(--color-accent) !important;
  color: var(--color-accent) !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35);
}

.item-preview {
  width: 28px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 12px;
  color: var(--text-tertiary);
  align-self: center;
}

.item-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.model-row-header {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.model-row-header .model-name-display {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  padding: 0 2px;
  max-width: 100%;
  min-height: 16px;
  line-height: 1.35;
}

.model-row-header .btn-preview {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  cursor: pointer;
}

.model-row-header .btn-preview:active {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.model-header-price {
  display: none;
}

.row-inline-image-preview {
  display: grid;
  place-items: center;
  min-height: 124px;
  padding: 10px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-tertiary);
}

.row-inline-image-preview img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 220px;
  object-fit: contain;
}

.row-inline-image-preview__loading,
.row-inline-image-preview__empty {
  color: var(--text-secondary);
  font-size: 12px;
}

/* 型号输入与单价同一行；输入框随中间列变宽，单价紧跟其后 */
.model-input-price-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 34px;
}

.model-input-wrapper .model-input-price-row > .model-input--model-code {
  box-sizing: border-box;
  flex: 1 1 0;
  width: auto;
  min-width: 100px;
  max-width: none;
  min-height: 34px;
  text-align: left;
  line-height: 1.25;
}

.model-row-price {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  line-height: 1.2;
}

.qty-label-display {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.model-input-wrapper {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  min-width: 0;
}

.qty-input-wrapper {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}

.row-controls .qty-input-wrapper .model-input {
  min-height: 34px;
  box-sizing: border-box;
  line-height: 1.25;
}

.model-input {
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 13px;
  text-align: center;
  transition: all var(--transition-fast);
}

.model-input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.item-actions {
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
}

.row-controls .btn-preview,
.row-controls .btn-success,
.row-controls .btn-danger {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: transparent;
  padding: 0;
  box-sizing: border-box;
}

.btn-preview:hover {
  color: var(--color-accent);
}

.btn-success:hover {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.btn-danger:hover {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

/* 分页左侧：共 X 个产品 + 估算总额 */
#paginationSummary {
  max-width: 100%;
}

#quotationEstimatedTotalLabel,
.quotation-estimated-total-value,
.quotation-estimated-total-hint {
  color: var(--text-secondary);
  margin: 0;
}

#quotationEstimatedTotalLabel {
  font-size: 14px;
}

.quotation-estimated-total-value {
  font-weight: 600;
}

.quotation-estimated-total-hint {
  font-size: 12px;
}

/* ===== 分页 ===== */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.btn-pagination {
  padding: 6px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-pagination:hover:not(:disabled) {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

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

.page-info {
  font-size: 13px;
  color: var(--text-secondary);
}

/* ===== 空状态 ===== */
.empty-state {
  text-align: center;
  padding: var(--spacing-xl);
  color: var(--text-tertiary);
}

.empty-state .icon {
  font-size: 32px;
  margin-bottom: var(--spacing-sm);
  opacity: 0.5;
}

/* ===== 摘要区域 ===== */
.summary {
  background: var(--bg-tertiary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.summary h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 var(--spacing-md) 0;
  color: var(--text-primary);
}

.summary p {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ===== 按钮组 ===== */
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  justify-content: center;
  margin-top: var(--spacing-lg);
}

@media (max-width: 640px) {
  .btn-group {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
}

.btn {
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  border: none;
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-accent);
  color: white;
}

.btn-primary:hover {
  background: var(--color-accent-hover);
}

.btn-secondary {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

.btn-secondary:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn-success {
  background: transparent;
  color: var(--text-tertiary);
}

.btn-success:hover {
  background: var(--color-success);
  color: white;
}

/* ===== 点击下载按钮 ===== */
.btn-download {
  background: var(--color-success) !important;
  color: white !important;
}

.btn-download:hover {
  filter: brightness(0.9);
}

/* ===== 加载状态 ===== */
.loading {
  text-align: center;
  padding: var(--spacing-lg);
}

.spinner {
  width: 28px;
  height: 28px;
  border: 2px solid var(--border-color);
  border-top-color: var(--color-accent);
  border-radius: var(--radius-full);
  animation: spin 0.8s linear infinite;
  margin: 0 auto var(--spacing-sm);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Font Awesome 旋转图标 */
.fa-spin {
  animation: fa-spin 1s infinite linear;
}

@keyframes fa-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 同步按钮旋转图标 */
.spin-icon {
  display: inline-block;
  animation: spin-icon-rotate 0.8s linear infinite;
}

@keyframes spin-icon-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading p {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

.quote-download-hint {
  text-align: center;
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  min-height: 1.4em;
  line-height: 1.6;
}

/* ===== 消息提示 ===== */
.success-message,
.error-message {
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-md);
  font-size: 14px;
  margin-top: var(--spacing-lg);
  display: none;
  line-height: 1.6;
}

.success-message {
  background: var(--color-success-bg);
  border: 1px solid var(--color-success);
  color: var(--color-success);
}

.error-message {
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger);
  color: var(--color-danger);
}

/* ===== 固定预览区域 ===== */
#fixedPreviewArea {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  display: none;
}

/* 现场报价浮层右上角关闭按钮，仅在移动端报价浮层显示。 */
.field-quote-preview-close {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}

#fixedPreviewArea.fixed-preview-model-overlay .field-quote-preview-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.field-quote-preview-close:active {
  background: var(--border-color);
  transform: scale(0.94);
}

@media (max-width: 720px) {
  #fixedPreviewArea {
    display: none;
  }
}

.preview-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  width: 280px;
}

.preview-header {
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-color);
}

.preview-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.preview-image-container {
  aspect-ratio: 4/3;
  background: var(--bg-secondary); /* 与卡片背景一致 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
}

.preview-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* 固定预览图：在容器内 contain，具体缩放由 JS fitPreviewImageToContainer 按原图比例计算 */
#fixedPreviewArea #previewImage {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
}

/* 桌面固定预览：标题区/图片区固定，切换型号时视觉尺寸保持一致 */
#fixedPreviewArea {
  width: 300px !important;
  min-width: 300px !important;
  max-width: 300px !important;
  height: auto !important;
  justify-content: flex-start !important;
}

#fixedPreviewArea #previewTitle {
  width: 100%;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#fixedPreviewArea #previewImageContainer {
  width: 268px !important;
  min-width: 268px !important;
  max-width: 268px !important;
  height: 220px !important;
  min-height: 220px !important;
  max-height: 220px !important;
  flex: 0 0 220px !important;
  margin: 0 auto !important;
  overflow: hidden !important;
}

.preview-placeholder {
  color: var(--text-tertiary);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
}

.preview-placeholder .icon {
  font-size: 40px;
  opacity: 0.4;
}

.preview-info {
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid var(--border-color);
}

.preview-model {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.preview-name-text {
  font-size: 12px;
  color: var(--text-secondary);
}

.field-quote-panel {
  width: 100%;
  box-sizing: border-box;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--color-accent) 25%, var(--border-color));
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-accent) 5%, var(--bg-secondary));
  text-align: left;
}

.field-quote-summary {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.field-quote-metric {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: var(--bg-secondary);
}

.field-quote-metric > span {
  display: block;
  margin-bottom: 3px;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 650;
}

.field-quote-metric strong {
  display: block;
  overflow: hidden;
  color: var(--text-primary);
  font-size: clamp(17px, 5vw, 22px);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field-quote-metric--quote {
  border-color: color-mix(in srgb, var(--color-accent) 34%, var(--border-color));
  background: color-mix(in srgb, var(--color-accent) 8%, var(--bg-secondary));
}

.field-quote-metric--quote strong {
  color: var(--color-accent);
}

.field-quote-metric small {
  display: block;
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 10px;
}

/* 手机系列面板本身较窄：价格改为整行显示，避免 $1250.00 被省略。 */
.fixed-preview-inline .field-quote-summary {
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.fixed-preview-inline .field-quote-metric {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  padding: 8px 10px;
}

.fixed-preview-inline .field-quote-metric > span {
  margin-bottom: 0;
}

.fixed-preview-inline .field-quote-metric strong {
  overflow: visible;
  font-size: 20px;
  text-align: right;
  text-overflow: clip;
}

.fixed-preview-inline .field-quote-metric small {
  grid-column: 1 / -1;
  text-align: right;
}

.field-quote-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.field-quote-label {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
}

.field-quote-hint {
  color: var(--text-tertiary);
  font-size: 10px;
  text-align: right;
}

.field-quote-quick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.field-quote-quick-btn {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  min-height: 44px;
  padding: 0 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.field-quote-quick-btn:hover,
.field-quote-quick-btn.active {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #fff;
}

.field-quote-custom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--text-secondary);
  font-size: 12px;
}

.field-quote-add-model {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 0;
  border-radius: 11px;
  background: var(--color-accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.field-quote-add-model:active:not(:disabled) {
  transform: scale(0.98);
}

.field-quote-add-model:disabled {
  cursor: default;
  opacity: 0.55;
}

.field-quote-add-model.is-added {
  border: 1px solid color-mix(in srgb, var(--color-accent) 35%, var(--border-color));
  background: color-mix(in srgb, var(--color-accent) 14%, var(--bg-secondary));
  color: var(--color-accent);
}

.field-quote-input-wrap {
  display: flex;
  align-items: center;
  width: 118px;
  height: 44px;
  overflow: hidden;
  border: 2px solid var(--border-color);
  border-radius: 11px;
  background: var(--input-bg);
}

.field-quote-input-wrap:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 14%, transparent);
}

.field-quote-input {
  width: 86px;
  height: 100%;
  box-sizing: border-box;
  padding: 6px 4px 6px 10px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-primary);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
}

.field-quote-input-wrap b {
  padding-right: 10px;
  color: var(--text-secondary);
  font-size: 13px;
}

/* ===== 快速导航 ===== */
.quick-nav {
  position: fixed;
  top: 50%;
  /* 容器680px居中，右侧保持20px间距 */
  right: calc(50% - 340px - 20px);
  transform: translateY(-50%);
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

@media (max-width: 1024px) {
  .quick-nav {
    display: none;
  }
}

/* 当容器达到最大宽度680px时才显示在正确位置 */
@media (min-width: 721px) {
  .quick-nav {
    right: calc(50% - 340px - 66px);
  }
}

/* 小屏幕下隐藏导航栏 */
@media (max-width: 720px) {
  .quick-nav {
    display: none;
  }

  .search-form-grid {
    grid-template-columns: 1fr 1fr;
  }

  .search-form-grid #modelSearch {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .search-form-grid .search-form-grid__search {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
  }

  .search-form-grid .search-form-grid__field {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
  }

  .search-form-grid__country {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .search-form-grid__results {
    grid-column: 1 / -1;
    grid-row: 4;
  }
}

.quick-nav-item {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.quick-nav-item:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.quick-nav-item .icon {
  font-size: 18px;
}

.quick-nav-item .label {
  display: none !important;
}

.quick-nav-item.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: white;
}

.quick-nav-item.active .label {
  color: rgba(255, 255, 255, 0.8);
}

/* ===== 模态框 ===== */
.modal-overlay {
  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;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
}

.modal-overlay.show {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  max-width: 420px;
  width: 90%;
  box-shadow: var(--shadow-lg);
  transform: scale(0.95);
  transition: transform var(--transition-normal);
}

.modal-overlay.show .modal {
  transform: scale(1);
}

.modal-icon {
  font-size: 40px;
  text-align: center;
  margin-bottom: var(--spacing-md);
  color: var(--color-warning);
}

.modal-title {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  margin: 0 0 var(--spacing-sm) 0;
  color: var(--text-primary);
}

.modal-message {
  font-size: 14px;
  text-align: center;
  margin: 0 0 var(--spacing-lg) 0;
  color: var(--text-secondary);
  line-height: 1.6;
}

.modal-buttons {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
}

.modal-btn {
  padding: 8px 20px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: none;
  min-width: 80px;
}

.modal-btn-cancel {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.modal-btn-cancel:hover {
  background: var(--bg-hover);
}

.modal-btn-confirm {
  background: var(--color-danger);
  color: white;
}

.modal-btn-confirm:hover {
  background: #d73027;
}

/* ===== 移动端图片预览（容器内居中） ===== */
@media (max-width: 720px) {
  #imagePreviewModal {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    z-index: 1000 !important;
    display: none !important;
  }

  #imagePreviewModal.show {
    display: block !important;
  }

  #imagePreviewModal .modal {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    margin: 10px auto !important;
    padding: 12px !important;
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
  }

  #imagePreviewModal .modal-title {
    font-size: 14px !important;
    text-align: center !important;
  }

  #imagePreviewModal .preview-image-container {
    text-align: center !important;
    padding: 8px 0 !important;
  }

  #imagePreviewModal #previewImage {
    max-width: 100% !important;
    max-height: 40vh !important;
    width: auto !important;
  }

  #imagePreviewModal .modal-buttons {
    justify-content: center !important;
  }
}

/* ===== 动画增强 ===== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease forwards;
}

/* 悬停效果 */
.hover-lift {
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ===== 响应式调整 ===== */
@media (max-width: 640px) {
  /* 型号输入在手机上改为两层信息：型号/数量一行，单价紧跟型号下方。 */
  #section-input {
    padding: 16px !important;
  }

  #section-input > .input-section-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-bottom: 14px !important;
  }

  #section-input > .input-section-header h3 {
    white-space: nowrap;
  }

  #section-input .input-section-delete-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    width: 100%;
  }

  #section-input .input-section-delete-actions button {
    justify-content: center;
    min-width: 0;
    min-height: 40px;
    padding: 8px 10px;
    white-space: nowrap;
  }

  #section-input .row-batch-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 12px;
  }

  #section-input .row-batch-toolbar__count {
    min-width: 0;
    text-align: right;
  }

  #section-input .row-batch-toolbar__actions {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    margin-left: 0;
  }

  .row {
    padding: 8px 10px;
    gap: 5px;
  }

  .row-controls {
    grid-template-columns: 20px minmax(0, 1fr) 40px 28px 28px;
    column-gap: 5px;
    align-items: center;
    row-gap: 0;
    min-height: 34px;
  }

  .row-controls .drag-handle {
    display: none;
  }

  .item-preview {
    width: 24px;
    height: 24px;
  }

  .row .model-input {
    padding: 6px;
    font-size: 12px;
    text-align: left;
  }

  .row .model-input-wrapper {
    min-width: 0;
  }

  .row .qty-input-wrapper .model-input {
    padding: 6px 3px;
    text-align: center;
  }

  .model-row-header .model-name-display {
    font-size: 12px;
    line-height: 1.4;
  }

  .model-header-price {
    display: block;
    flex: 0 0 auto;
    min-width: 0;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
  }

  .model-row-header .btn-preview {
    width: 30px;
    height: 30px;
  }

  .row-inline-image-preview {
    min-height: 160px;
  }

  .row-inline-image-preview img {
    max-height: 250px;
  }

  .row .model-input-price-row {
    flex-direction: row;
    align-items: center;
    gap: 5px;
  }

  .row .model-input-wrapper .model-input-price-row > .model-input--model-code {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: none;
  }

  .row .model-row-price {
    /* 手机优先保证完整型号可见，单价不再占用型号输入框宽度。 */
    display: none;
  }

  .row .model-input-wrapper .model-input-price-row > .model-input--model-code {
    font-size: 13px;
    letter-spacing: -0.15px;
  }

  .row .qty-input-wrapper .model-input {
    min-height: 30px;
    padding: 4px 2px;
  }

  .row-controls .btn-success,
  .row-controls .btn-danger {
    align-self: start;
  }

  .row-controls .row-select-cb {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  .row-controls > .model-input-wrapper {
    grid-column: 2;
    grid-row: 1;
  }

  .row-controls > .qty-input-wrapper {
    grid-column: 3;
    grid-row: 1;
  }

  .row-controls .btn-success {
    grid-column: 4;
    grid-row: 1;
    justify-self: center;
  }

  .row-controls .btn-danger {
    grid-column: 5;
    grid-row: 1;
  }

  .row-controls .btn-success,
  .row-controls .btn-danger {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
}

/* ===== 提成计算器导航按钮 ===== */
.commission-selector {
  display: flex;
  gap: 6px;
  background: var(--bg-secondary);
  padding: 4px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
}

.commission-btn {
  padding: 6px 12px;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.commission-btn:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.commission-btn::before {
  content: '$';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
  border-radius: 50%;
  color: white;
  font-size: 11px;
  font-weight: 600;
}

/* ===== 手机内联：插入区块上方，参与文档流 ===== */
#fixedPreviewArea.fixed-preview-inline {
  display: flex !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  z-index: auto !important;
  /* 覆盖桌面端 #fixedPreviewArea 的 min/max-width:300px，避免撑破系列卡片 */
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto 14px !important;
  padding: 12px !important;
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  clear: both;
  flex-shrink: 0;
}

/* 内联模式下图片区随卡片宽度缩放，取消桌面固定 268px */
#fixedPreviewArea.fixed-preview-inline #previewImageContainer {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: min(34vw, 144px) !important;
  min-height: 108px !important;
  max-height: 160px !important;
  flex: 0 0 auto !important;
  margin: 0 auto !important;
}

#fixedPreviewArea.fixed-preview-inline #previewTitle {
  text-align: left !important;
}

#fixedPreviewArea.fixed-preview-inline .field-quote-panel {
  order: 2;
}

#fixedPreviewArea.fixed-preview-inline #previewImageContainer {
  order: 3;
}

.series-detail > #fixedPreviewArea.fixed-preview-inline + .model-list {
  margin-top: 0;
}

/* 现场报价：系列展开区禁止横向溢出（iPhone Safari） */
@media (max-width: 720px) {
  .series-detail,
  .series-detail-inline {
    overflow-x: hidden;
    max-width: 100%;
    box-sizing: border-box;
  }

  #seriesButtons > .series-detail-inline {
    max-width: 100%;
  }

  /* 图片模式有多层内边距，手机上报价卡会被压到约 150px。
     减少嵌套留白，并将控件重排，保证金额与百分比完整可见。 */
  .series-detail--image-mode .series-detail-image-mode__scroll {
    padding-inline: 6px;
  }

/* 现场报价浮在型号网格上方，不占据型号卡片的版面。 */
  body.field-quote-mode .series-detail--image-mode .model-list--image-cards {
    position: relative;
  }

  body.field-quote-mode #seriesButtonsScroll,
  body.field-quote-mode .series-detail-image-mode__scroll {
    overflow-anchor: none;
  }

  .series-detail--image-mode #fixedPreviewArea.fixed-preview-model-overlay {
    grid-column: auto;
    margin: 0 !important;
    box-shadow: var(--shadow-lg) !important;
  }

#fixedPreviewArea.fixed-preview-model-overlay #previewImageContainer,
.series-detail--image-mode #fixedPreviewArea.fixed-preview-inline #previewImageContainer {
  display: none !important;
}

#fixedPreviewArea.fixed-preview-model-overlay .field-quote-metric {
  padding: 8px;
}

#fixedPreviewArea.fixed-preview-model-overlay .field-quote-metric strong {
  overflow: visible;
  font-size: 17px;
  letter-spacing: -0.04em;
  text-overflow: clip;
}

/* 浮层报价顶部的底价与报价信息在各自卡片中居中呈现。 */
#fixedPreviewArea.fixed-preview-model-overlay .field-quote-metric,
#fixedPreviewArea.fixed-preview-model-overlay .field-quote-metric > span,
#fixedPreviewArea.fixed-preview-model-overlay .field-quote-metric strong,
#fixedPreviewArea.fixed-preview-model-overlay .field-quote-metric small {
  text-align: center;
}

  .series-detail--image-mode #fixedPreviewArea.fixed-preview-inline {
    padding: 8px !important;
    margin-bottom: 10px !important;
  }

  .series-detail--image-mode #fixedPreviewArea.fixed-preview-inline .field-quote-panel {
    padding: 10px;
    flex-direction: column;
  }

  .series-detail--image-mode .field-quote-label-row {
    order: 1;
  }

  .series-detail--image-mode .field-quote-quick {
    order: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .series-detail--image-mode .field-quote-custom {
    order: 3;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  /* 价格摘要放在报价卡最下方，紧贴当前型号，滚动到型号时先看到价格。 */
  .series-detail--image-mode .field-quote-summary {
    order: 4;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    margin: 10px 0 0;
  }

  .series-detail--image-mode .field-quote-metric {
    display: block;
    padding: 7px 6px;
  }

  .series-detail--image-mode .field-quote-metric > span {
    margin-bottom: 2px;
    font-size: 10px;
  }

  .series-detail--image-mode .field-quote-metric strong {
    font-size: 13px;
    letter-spacing: -0.02em;
    text-align: left;
  }

  .series-detail--image-mode .field-quote-metric small {
    margin-top: 2px;
    font-size: 9px;
    text-align: left;
  }

  .series-detail--image-mode .field-quote-input-wrap {
    width: 100%;
    box-sizing: border-box;
  }

  .series-detail--image-mode .field-quote-input {
    flex: 1 1 auto;
    width: auto;
  }

  /* 型号卡本身已有图片，报价卡内再次展示大图会挤走核心报价信息。 */
  .series-detail--image-mode #fixedPreviewArea.fixed-preview-inline #previewImageContainer {
    display: none !important;
  }

  .series-detail--image-mode #fixedPreviewArea.fixed-preview-inline #previewTitle {
    display: none;
  }
}

/* 手机端预览由 JS 居中定位；不再强制隐藏（与 index-mobile 一致） */

/* ===== 移动端全面适配 ===== */
@media (max-width: 640px) {
  /* 容器调整 */
  .container {
    margin: 60px 16px 280px;
    padding: 24px 20px;
  }
  
  /* 搜索框优化 */
  #modelSearch {
    padding: 12px 16px;
    padding-left: 44px;
    font-size: 15px;
  }
  
  .series-buttons-scroll.series-buttons-scroll--active {
    max-height: var(--series-scroll-collapsed-max, min(340px, 40vh));
    padding: 8px;
  }

  .series-buttons-scroll.series-buttons-scroll--active.series-buttons-scroll--expanded {
    max-height: var(--series-scroll-expanded-max, min(520px, 58vh));
  }

  /* 系列图片卡片：手机以 2 列为主，拇指区足够大、易点 */
  #seriesButtons.series-buttons--image {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    --series-buttons-row-gap: 8px;
  }

  .series-pick-card__caption {
    padding: 6px 4px 8px;
  }

  .series-pick-card__model {
    font-size: 12px;
  }

  .series-pick-card__series {
    font-size: 10px;
  }

  .model-list.model-list--image-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .series-detail--image-mode {
    max-height: min(65vh, 600px);
    min-height: 240px;
  }

  .series-view-toggle__btn {
    padding: 7px 12px;
    font-size: 12px;
  }

  /* 系列按钮移动端适配 */
  .btn-series {
    padding: 8px 10px;
    font-size: 12px;
    height: 34px;
  }
  
  /* 国家代理下拉框移动端 */
  #countryAgentSelect {
    max-width: 100%;
    height: 36px;
    font-size: 13px;
  }
  
  /* 模态框移动端适配 */
  .modal {
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
  }
  
  /* 图片预览移动端 */
  #imagePreviewModal {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    z-index: 1000 !important;
    display: none !important;
  }

  #imagePreviewModal.show {
    display: block !important;
  }

  #imagePreviewModal .modal {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    margin: 10px auto !important;
    padding: 12px !important;
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
  }

  #imagePreviewModal .modal-title {
    font-size: 14px !important;
    text-align: center !important;
  }

  #imagePreviewModal .preview-image-container {
    text-align: center !important;
    padding: 8px 0 !important;
  }

  #imagePreviewModal #previewImage {
    max-width: 100% !important;
    max-height: 40vh !important;
    width: auto !important;
  }

  #imagePreviewModal .modal-buttons {
    justify-content: center !important;
  }
}

/* 较宽手机：图片模式 3 列（在仍 ≤640px 的移动端样式之上略增密度） */
@media (min-width: 480px) and (max-width: 640px) {
  #seriesButtons.series-buttons--image {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ===== 移动端按钮组垂直排列 ===== */
@media (max-width: 640px) {
  .btn-group {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
  
  .btn-group .btn {
    width: 100%;
  }
}

/* ===== AI 自然语言报价 ===== */
.ai-quote-card { margin-bottom:24px; padding:26px; border:1px solid color-mix(in srgb,var(--accent-blue) 30%,var(--border-color)); border-radius:18px; background:linear-gradient(135deg,color-mix(in srgb,var(--accent-blue) 9%,var(--bg-secondary)),var(--bg-secondary) 58%); box-shadow:0 12px 34px rgba(15,84,170,.09); }
.ai-quote-card[hidden] { display:none; }
.ai-quote-card.ai-quote-card--opening { animation:aiQuoteReveal .34s ease-out both; }
@keyframes aiQuoteReveal { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:translateY(0); } }
.ai-quote-card__heading,.ai-quote-card__actions,.ai-quote-result__summary,.ai-quote-result__footer { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.ai-quote-card__eyebrow { color:var(--accent-blue); font-size:11px; font-weight:800; letter-spacing:.12em; }
.ai-quote-card h3 { margin:5px 0; font-size:20px; }.ai-quote-card p { margin:0; color:var(--text-secondary); font-size:13px; }
.ai-quote-card__local-badge { white-space:nowrap; padding:7px 10px; border-radius:999px; background:color-mix(in srgb,var(--accent-green) 12%,transparent); color:var(--accent-green); font-size:12px; }
.ai-quote-card__heading-actions { display:flex; align-items:center; gap:8px; }.ai-quote-reset { padding:7px 10px; border:1px solid var(--border-color); border-radius:999px; background:var(--bg-secondary); color:var(--text-secondary); cursor:pointer; font-size:12px; }.ai-quote-reset:hover { border-color:var(--accent-blue); color:var(--accent-blue); }
.ai-quote-card__label { display:block; margin:20px 0 8px; font-size:13px; font-weight:650; }
.ai-quote-card textarea { width:100%; box-sizing:border-box; resize:vertical; min-height:104px; padding:14px 16px; border:1px solid var(--border-color); border-radius:12px; background:var(--bg-secondary); color:var(--text-primary); font:inherit; line-height:1.6; }
.ai-quote-card textarea:focus { outline:0; border-color:var(--accent-blue); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-blue) 15%,transparent); }
.ai-quote-composer { position:relative; margin-top:12px; padding:4px; border:1px solid var(--border-color); border-radius:18px; background:var(--bg-secondary); box-shadow:0 8px 24px rgba(35,91,170,.08); transition:border-color .18s ease,box-shadow .18s ease,background .18s ease; }
.ai-quote-composer:focus-within { border-color:var(--accent-blue); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-blue) 15%,transparent),0 8px 24px rgba(35,91,170,.08); }
.ai-quote-composer.is-dragover { border-color:var(--accent-blue); background:color-mix(in srgb,var(--accent-blue) 8%,var(--bg-secondary)); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-blue) 16%,transparent); }
.ai-quote-composer textarea { display:block; min-height:92px; padding:12px; border:0; border-radius:14px; resize:none; box-shadow:none; background:transparent; }
.ai-quote-composer textarea:focus { box-shadow:none; }
.ai-quote-composer__toolbar { display:flex; align-items:center; gap:8px; min-height:42px; padding:2px 4px 4px; }
.ai-quote-composer__drop-hint { flex:1; color:var(--text-tertiary); font-size:11px; }
.ai-quote-progress { display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:48px; margin:9px 4px 0; padding:8px 11px; border:1px solid color-mix(in srgb,var(--accent-blue) 18%,var(--border-color)); border-radius:12px; background:color-mix(in srgb,var(--accent-blue) 4%,var(--bg-secondary)); box-shadow:0 6px 18px rgba(23,105,255,.05); transition:border-color .2s ease,background .2s ease; }
.ai-quote-progress[hidden] { display:none; }
.ai-quote-progress__signal { position:relative; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:color-mix(in srgb,var(--accent-blue) 11%,transparent); }
.ai-quote-progress__signal::before { content:''; position:absolute; inset:2px; border:2px solid color-mix(in srgb,var(--accent-blue) 22%,transparent); border-top-color:var(--accent-blue); border-radius:50%; animation:aiQuoteProgressSpin .9s linear infinite; }
.ai-quote-progress__copy { display:flex; min-width:0; flex-direction:column; gap:2px; }
.ai-quote-progress__copy strong { overflow:hidden; color:var(--text-primary); font-size:12px; font-weight:720; text-overflow:ellipsis; white-space:nowrap; }
.ai-quote-progress__copy span { overflow:hidden; color:var(--text-tertiary); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.ai-quote-progress__count { color:var(--accent-blue); font-size:10px; font-variant-numeric:tabular-nums; }
.ai-quote-progress.is-complete { border-color:color-mix(in srgb,#16a34a 28%,var(--border-color)); background:color-mix(in srgb,#16a34a 6%,var(--bg-secondary)); }
.ai-quote-progress.is-complete .ai-quote-progress__signal::before { border:0; animation:none; }
.ai-quote-progress.is-complete .ai-quote-progress__signal::after { content:'✓'; color:#16a34a; font-size:15px; font-weight:800; }
.ai-quote-progress.is-complete .ai-quote-progress__count { color:#16803a; }
.ai-quote-progress.is-error { border-color:color-mix(in srgb,#dc2626 25%,var(--border-color)); background:color-mix(in srgb,#dc2626 5%,var(--bg-secondary)); }
.ai-quote-progress.is-error .ai-quote-progress__signal::before { border:0; animation:none; }
.ai-quote-progress.is-error .ai-quote-progress__signal::after { content:'!'; color:#dc2626; font-size:15px; font-weight:800; }
@keyframes aiQuoteProgressSpin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce){.ai-quote-progress__signal::before{animation:none}}
.ai-quote-attach { display:grid; place-items:center; flex:0 0 36px; height:36px; border:1px solid var(--border-color); border-radius:50%; color:var(--text-primary); background:var(--bg-primary); cursor:pointer; transition:border-color .18s ease,color .18s ease,background .18s ease; }
.ai-quote-attach:hover { border-color:var(--accent-blue); color:var(--accent-blue); background:color-mix(in srgb,var(--accent-blue) 6%,var(--bg-primary)); }
.ai-quote-attach:focus-within { outline:3px solid color-mix(in srgb,var(--accent-blue) 22%,transparent); outline-offset:2px; }
.ai-quote-attach input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.ai-quote-send { display:grid; place-items:center; flex:0 0 38px; width:38px; height:38px; padding:0; border:0; border-radius:50%; background:linear-gradient(135deg,#1769ff,#2f8cff); color:#fff; box-shadow:0 7px 18px rgba(23,105,255,.3); cursor:pointer; transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease; }
.ai-quote-send:hover { transform:translateY(-1px); box-shadow:0 9px 22px rgba(23,105,255,.38); }
.ai-quote-send:focus-visible { outline:3px solid color-mix(in srgb,var(--accent-blue) 25%,transparent); outline-offset:3px; }
.ai-quote-send:disabled { cursor:wait; opacity:.6; transform:none; box-shadow:none; }
.ai-quote-card__examples { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 16px; }.ai-quote-card__examples button { border:1px solid var(--border-color); border-radius:999px; padding:6px 10px; background:var(--bg-secondary); color:var(--text-secondary); cursor:pointer; font-size:12px; }.ai-quote-card__examples button:hover { border-color:var(--accent-blue); color:var(--accent-blue); }
.ai-quote-card__privacy,.ai-quote-result__summary span,.ai-quote-result__note { color:var(--text-tertiary); font-size:12px; }
.ai-quote-conversation { display:flex; flex-direction:column; gap:8px; max-height:260px; overflow:auto; margin:12px 0; padding:12px; border-radius:12px; background:color-mix(in srgb,var(--bg-tertiary) 78%,transparent); }.ai-quote-message { max-width:88%; padding:9px 12px; border-radius:12px; color:var(--text-primary); font-size:13px; line-height:1.5; white-space:pre-wrap; }.ai-quote-message--assistant { align-self:flex-start; background:var(--bg-secondary); border:1px solid var(--border-light); }.ai-quote-message--user { align-self:flex-end; color:white; background:var(--accent-blue); }
.ai-quote-conversation[hidden] { display:none; }
.ai-quote-image-preview { display:flex; align-items:center; gap:8px; margin:0 8px 6px; padding:8px; border-radius:10px; color:var(--text-secondary); background:var(--bg-tertiary); font-size:12px; }.ai-quote-image-preview[hidden] { display:none; }.ai-quote-image-preview img { width:48px; height:48px; border-radius:8px; object-fit:cover; vertical-align:middle; }.ai-quote-image-preview__pdf { display:grid; place-items:center; width:40px; height:48px; border-radius:8px; background:#fff1f1; color:#e04444; font-size:20px; border:1px solid #ffd4d4; }
.ai-quote-download-panel { position:relative; display:flex; align-items:center; gap:16px; margin:28px 0 18px; padding:20px 54px 20px 20px; border:1px solid color-mix(in srgb,#16a34a 35%,var(--border-color)); border-radius:16px; background:linear-gradient(135deg,color-mix(in srgb,#16a34a 8%,var(--bg-secondary)),var(--bg-secondary)); box-shadow:0 10px 28px rgba(22,163,74,.08); }.ai-quote-download-panel[hidden] { display:none; }.ai-quote-download-panel__icon { display:grid; place-items:center; flex:0 0 48px; height:48px; border-radius:12px; color:white; background:#16a34a; font-size:24px; }.ai-quote-download-panel__content { flex:1; }.ai-quote-download-panel h3 { margin:3px 0; font-size:17px; }.ai-quote-download-panel p { margin:0; color:var(--text-secondary); font-size:12px; }.ai-quote-download-panel .btn { white-space:nowrap; text-decoration:none; }
.ai-quote-download-panel__close { position:absolute; top:10px; right:10px; display:grid; place-items:center; width:32px; height:32px; padding:0; border:1px solid transparent; border-radius:50%; color:var(--text-tertiary); background:transparent; cursor:pointer; font-size:15px; transition:color .18s ease,background .18s ease,border-color .18s ease,transform .18s ease; }
.ai-quote-download-panel__close:hover { color:#b42318; border-color:color-mix(in srgb,#dc2626 18%,var(--border-color)); background:color-mix(in srgb,#dc2626 8%,var(--bg-secondary)); transform:scale(1.04); }
.ai-quote-download-panel__close:focus-visible { outline:3px solid color-mix(in srgb,#dc2626 20%,transparent); outline-offset:2px; }
@media(max-width:640px){.ai-quote-download-panel{align-items:flex-start;flex-direction:column}.ai-quote-download-panel .btn{width:100%}}
.ai-quote-result { margin-top:20px; overflow:hidden; border:1px solid color-mix(in srgb,var(--accent-blue) 12%,var(--border-color)); border-radius:18px; background:var(--bg-secondary); box-shadow:0 16px 40px rgba(28,68,135,.08); }
.ai-quote-result__summary { min-height:70px; padding:16px 18px; border-bottom:1px solid var(--border-light); background:linear-gradient(135deg,color-mix(in srgb,var(--accent-blue) 5%,var(--bg-secondary)),var(--bg-secondary)); }
.ai-quote-result__summary>div { display:flex; flex-direction:column; gap:3px; }
.ai-quote-result__summary strong { font-size:18px; letter-spacing:-.02em; }
.ai-quote-result__eyebrow { color:var(--accent-blue)!important; font-size:9px!important; font-weight:800; letter-spacing:.16em; }
.ai-quote-finance { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:12px 16px; border-bottom:1px solid var(--border-light); background:color-mix(in srgb,var(--bg-tertiary) 34%,var(--bg-secondary)); }
.ai-quote-finance>div { min-width:0; padding:10px 12px; border:1px solid var(--border-light); border-radius:10px; background:var(--bg-secondary); }
.ai-quote-finance span { display:block; overflow:hidden; color:var(--text-tertiary); font-size:10px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.ai-quote-finance strong { display:block; margin-top:3px; color:var(--text-primary); font-size:15px; font-variant-numeric:tabular-nums; }
.ai-quote-finance .is-over strong { color:#dc2626; }
.ai-quote-result__table-wrap { overflow-x:auto; margin:0; }
.ai-quote-result table { width:100%; border-collapse:separate; border-spacing:0; font-size:12px; }
.ai-quote-result th,.ai-quote-result td { height:54px; padding:10px 12px; border-bottom:1px solid var(--border-light); text-align:left; white-space:nowrap; vertical-align:middle; }
.ai-quote-result th { height:40px; color:var(--text-tertiary); background:color-mix(in srgb,var(--bg-tertiary) 62%,var(--bg-secondary)); font-size:10px; font-weight:750; letter-spacing:.04em; text-transform:uppercase; }
.ai-quote-result tbody>tr:not(.ai-quote-inline-row):hover { background:color-mix(in srgb,var(--accent-blue) 2.8%,var(--bg-secondary)); }
.ai-quote-result tbody>tr.is-updating { opacity:.55; }
.ai-quote-model,.ai-quote-price { color:var(--text-primary); font-variant-numeric:tabular-nums; }
.ai-quote-product-name { max-width:220px; overflow:hidden; text-overflow:ellipsis; }
.ai-quote-series-badge { display:inline-flex; padding:4px 8px; border-radius:999px; color:var(--text-secondary); background:var(--bg-tertiary); font-size:10px; font-weight:700; }
.ai-quote-status { display:inline-flex; align-items:center; gap:5px; padding:4px 8px; border-radius:999px; font-size:10px; font-weight:700; }
.ai-quote-status.is-ready { color:#08783e; background:rgba(22,163,74,.1); }
.ai-quote-status.is-blocked { color:#b42318; background:rgba(220,38,38,.09); }
.ai-quote-qty { display:inline-grid; grid-template-columns:28px 30px 28px; align-items:center; overflow:hidden; border:1px solid var(--border-color); border-radius:9px; background:var(--bg-primary); }
.ai-quote-qty strong { text-align:center; font-size:12px; font-variant-numeric:tabular-nums; }
.ai-quote-row-edit__btn { display:grid; place-items:center; width:28px; height:28px; padding:0; border:0; color:var(--text-secondary); background:transparent; cursor:pointer; font-size:9px; }
.ai-quote-row-edit__btn:hover { color:var(--accent-blue); background:color-mix(in srgb,var(--accent-blue) 9%,transparent); }
.ai-quote-row-edit__btn:focus-visible,.ai-quote-row-action:focus-visible,.ai-quote-inline-panel button:focus-visible,.ai-quote-inline-panel input:focus-visible { outline:2px solid var(--accent-blue); outline-offset:2px; }
.ai-quote-row-edit { display:flex; align-items:center; gap:4px; }
.ai-quote-row-action { display:inline-flex; align-items:center; gap:5px; min-height:30px; padding:0 9px; border:1px solid var(--border-color); border-radius:8px; color:var(--text-secondary); background:var(--bg-primary); cursor:pointer; font:inherit; font-size:10px; font-weight:700; transition:color .16s ease,border-color .16s ease,background .16s ease,transform .16s ease; }
.ai-quote-row-action:hover { transform:translateY(-1px); border-color:color-mix(in srgb,var(--accent-blue) 45%,var(--border-color)); color:var(--accent-blue); background:color-mix(in srgb,var(--accent-blue) 5%,var(--bg-primary)); }
.ai-quote-row-action--danger { width:30px; padding:0; justify-content:center; color:var(--text-tertiary); }
.ai-quote-row-action--danger:hover { border-color:rgba(220,38,38,.25); color:#dc2626; background:rgba(220,38,38,.06); }
.ai-quote-row-locked { display:inline-flex; align-items:center; gap:5px; color:var(--text-tertiary); font-size:10px; }
.ai-quote-inline-row td { height:auto; padding:0 12px 12px!important; background:color-mix(in srgb,var(--accent-blue) 2.5%,var(--bg-secondary)); }
.ai-quote-inline-panel { padding:14px; border:1px solid color-mix(in srgb,var(--accent-blue) 22%,var(--border-color)); border-radius:12px; background:var(--bg-primary); box-shadow:0 10px 26px rgba(28,68,135,.08); }
.ai-quote-inline-panel header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.ai-quote-inline-panel header>div { display:flex; align-items:center; gap:8px; min-width:0; }
.ai-quote-inline-panel header>div>i { color:var(--accent-blue); }
.ai-quote-inline-panel header strong { font-size:12px; }
.ai-quote-inline-panel header span { color:var(--text-tertiary); font-size:10px; }
.ai-quote-inline-panel header>button { display:grid; place-items:center; width:28px; height:28px; padding:0; border:0; border-radius:50%; color:var(--text-tertiary); background:transparent; cursor:pointer; }
.ai-quote-inline-panel header>button:hover { color:var(--text-primary); background:var(--bg-tertiary); }
.ai-quote-replace-form { display:grid; grid-template-columns:minmax(180px,1fr) 100px auto; align-items:end; gap:10px; }
.ai-quote-replace-form label { display:flex; flex-direction:column; gap:5px; color:var(--text-tertiary); font-size:10px; font-weight:700; }
.ai-quote-replace-form input { height:38px; box-sizing:border-box; padding:0 11px; border:1px solid var(--border-color); border-radius:9px; color:var(--text-primary); background:var(--bg-secondary); font:inherit; font-size:12px; }
.ai-quote-replace-form .btn { height:38px; margin:0; padding:0 16px; }
.ai-quote-alternatives { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:8px; }
.ai-quote-alternative { display:grid; grid-template-columns:minmax(0,1fr) auto 14px; align-items:center; gap:10px; padding:11px; border:1px solid var(--border-light); border-radius:10px; color:var(--text-primary); background:var(--bg-secondary); cursor:pointer; text-align:left; }
.ai-quote-alternative:hover { border-color:color-mix(in srgb,var(--accent-blue) 38%,var(--border-color)); background:color-mix(in srgb,var(--accent-blue) 4%,var(--bg-secondary)); }
.ai-quote-alternative span { display:flex; min-width:0; flex-direction:column; gap:2px; }
.ai-quote-alternative strong { font-size:11px; }.ai-quote-alternative small { overflow:hidden; color:var(--text-tertiary); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }.ai-quote-alternative b { color:var(--accent-blue); font-size:11px; }
.ai-quote-inline-loading,.ai-quote-inline-empty,.ai-quote-inline-error { padding:14px; border-radius:9px; color:var(--text-secondary); background:var(--bg-tertiary); font-size:11px; text-align:center; }.ai-quote-inline-error{color:#b42318;background:rgba(220,38,38,.06)}
.ai-quote-result__warning { margin:10px 16px; padding:9px 11px; border-radius:8px; color:#a35a00; background:rgba(245,158,11,.1); font-size:12px; }
.ai-quote-result__warning--dismissible { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ai-quote-result__warning--dismissible>span { min-width:0; }
.ai-quote-warning-dismiss { display:grid; place-items:center; flex:0 0 28px; width:28px; height:28px; padding:0; border:0; border-radius:50%; color:#a35a00; background:transparent; cursor:pointer; }
.ai-quote-warning-dismiss:hover { color:#7a4300; background:rgba(245,158,11,.16); }
.ai-quote-warning-dismiss:focus-visible { outline:2px solid currentColor; outline-offset:2px; }
.ai-quote-review { margin:12px 16px; overflow:hidden; border:1px solid color-mix(in srgb,#d97706 22%,var(--border-color)); border-radius:12px; background:color-mix(in srgb,#f59e0b 5%,var(--bg-secondary)); }
.ai-quote-review__header { display:flex; align-items:center; min-height:42px; padding:0 8px 0 4px; border-bottom:1px solid color-mix(in srgb,#d97706 16%,var(--border-light)); }
.ai-quote-review__toggle { display:flex; flex:1; align-items:center; gap:8px; min-width:0; padding:10px 8px; border:0; color:var(--text-primary); background:transparent; cursor:pointer; text-align:left; font:inherit; font-size:12px; font-weight:700; }
.ai-quote-review__toggle i { color:#b76a08; font-size:10px; transition:transform .18s ease; }
.ai-quote-review__toggle b { display:grid; place-items:center; min-width:20px; height:20px; margin-left:2px; padding:0 6px; border-radius:999px; color:#9a5600; background:rgba(245,158,11,.14); font-size:10px; }
.ai-quote-review__clear { padding:6px 9px; border:0; border-radius:7px; color:var(--text-tertiary); background:transparent; cursor:pointer; font:inherit; font-size:11px; }
.ai-quote-review__clear:hover { color:#9a5600; background:rgba(245,158,11,.12); }
.ai-quote-review__list { display:grid; gap:1px; padding:5px; }
.ai-quote-review__item { display:grid; grid-template-columns:16px minmax(0,1fr) 28px; align-items:start; gap:8px; padding:8px 7px 8px 10px; border-radius:8px; color:#925700; font-size:12px; line-height:1.55; }
.ai-quote-review__item:hover { background:rgba(245,158,11,.08); }
.ai-quote-review__item>i { margin-top:3px; color:#c27610; }
.ai-quote-review__item .ai-quote-warning-dismiss { margin-top:-4px; }
.ai-quote-review.is-collapsed .ai-quote-review__header { border-bottom:0; }
.ai-quote-review.is-collapsed .ai-quote-review__list { display:none; }
.ai-quote-review.is-collapsed .ai-quote-review__toggle i { transform:rotate(-90deg); }
.ai-quote-result__footer { align-items:center; padding:14px 16px 16px; background:color-mix(in srgb,var(--bg-tertiary) 40%,var(--bg-secondary)); }
.ai-quote-result__note { flex:1 1 240px; min-width:0; line-height:1.5; }
.ai-quote-result__note i { margin-right:7px; color:var(--accent-blue); }
.ai-quote-result__actions { display:flex; flex:0 0 auto; align-items:center; gap:10px; white-space:nowrap; }
.ai-quote-result__actions .btn { min-width:148px; margin:0; }
@media(max-width:820px){.ai-quote-result__footer{align-items:stretch;flex-direction:column}.ai-quote-result__note{flex:auto}.ai-quote-result__actions{width:100%}.ai-quote-result__actions .btn{flex:1 1 0;min-width:0}}
@media(max-width:640px){.ai-quote-card{padding:20px}.ai-quote-card__heading,.ai-quote-card__actions,.ai-quote-result__footer{align-items:flex-start;flex-direction:column}.ai-quote-card__local-badge{display:none}.ai-quote-card__actions .btn{width:100%}}
@media(max-width:420px){.ai-quote-result__actions{align-items:stretch;flex-direction:column}.ai-quote-result__actions .btn{width:100%}}
@media(max-width:720px){.ai-quote-result__summary{align-items:flex-start;flex-direction:column}.ai-quote-replace-form{grid-template-columns:1fr 90px}.ai-quote-replace-form .btn{grid-column:1/-1}.ai-quote-row-action span{display:none}.ai-quote-row-action{width:32px;padding:0;justify-content:center}}
@media(max-width:640px){.ai-quote-finance{grid-template-columns:1fr}}
@media(max-width:480px){.ai-quote-composer__drop-hint{font-size:0}.ai-quote-composer__drop-hint::after{content:'图片 / PDF · 20MB';font-size:11px}}

/* ===== 插片器械子分组 ===== */
.plate-subgroup-bar {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.plate-subgroup-bar.plate-subgroup-bar--visible {
  display: flex;
}

.plate-subgroup-bar .btn-plate-subgroup {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.plate-subgroup-bar .btn-plate-subgroup:hover {
  border-color: var(--accent-blue);
  color: var(--accent-blue);
}

.plate-subgroup-bar .btn-plate-subgroup.active {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: #fff;
}

/* ===== 移动端快速导航隐藏 ===== */
@media (max-width: 720px) {
  .quick-nav {
    display: none;
  }
}

/* ===== 移动端选择器缩小 ===== */
@media (max-width: 640px) {
  .commission-selector,
  .language-selector,
  .theme-selector {
    transform: none;
  }
  
  body.is-scrolling-down .commission-selector,
  body.is-scrolling-down .language-selector,
  body.is-scrolling-down .theme-selector {
    transform: none;
  }
}

/* 手机端小眼睛预览：固定于屏幕正中，不参与页面布局。 */
@media (max-width: 720px) {
  #imagePreviewModal.modal-overlay,
  #imagePreviewModal.modal-overlay.show {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    padding: 16px !important;
    background: rgba(15, 23, 42, 0.56) !important;
    z-index: 10050 !important;
  }

  #imagePreviewModal.modal-overlay .modal {
    position: relative !important;
    width: min(92vw, 420px) !important;
    max-height: calc(100dvh - 32px) !important;
    margin: 0 !important;
    padding: 16px !important;
    overflow: auto !important;
    transform: scale(0.96) !important;
  }

  #imagePreviewModal.modal-overlay.show .modal {
    transform: scale(1) !important;
  }

  #imagePreviewModal .modal-icon,
  #imagePreviewModal #accelerationInfo {
    display: none !important;
  }

  #imagePreviewModal #previewImage {
    max-width: 100% !important;
    max-height: 62dvh !important;
  }
}