/* =====================================================
   Exhibition CRM V2.0 — Theme & Styles
   Dark + Light + Auto themes via CSS custom properties
===================================================== */

/* ── DARK THEME (default) ── */
:root, [data-theme="dark"] {
  --bg0: #070e16;
  --bg1: #0f1923;
  --bg2: #162230;
  --bg3: #1a2a3a;
  --card: #15202b;
  --card-hover: #1a2c3b;
  --border: #263850;
  --text: #e0e0e0;
  --text-secondary: #b0b8c1;
  --text-muted: #6b7c90;
  --primary: #007bc6;
  --primary-light: #4da8e8;
  --primary-bg: rgba(0,123,198,0.12);
  --danger: #e74c3c;
  --danger-bg: rgba(231,76,60,0.12);
  --success: #27ae60;
  --warning: #f39c12;
  --input-bg: #1c2a3a;
  --input-border: #364458;
  --input-focus: #007bc6;
  --overlay-bg: rgba(0,0,0,0.6);
  --shadow: 0 4px 20px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.6);
}

/* ── LIGHT THEME ── */
[data-theme="light"] {
  --bg0: #f0f2f5;
  --bg1: #ffffff;
  --bg2: #f5f7fa;
  --bg3: #eef1f5;
  --card: #ffffff;
  --card-hover: #f5f8fb;
  --border: #dce3e8;
  --text: #1a1a2e;
  --text-secondary: #4a5568;
  --text-muted: #8e9aab;
  --primary: #007bc6;
  --primary-light: #005a94;
  --primary-bg: rgba(0,123,198,0.08);
  --danger: #c0392b;
  --danger-bg: rgba(192,57,43,0.08);
  --success: #219a52;
  --warning: #d68910;
  --input-bg: #ffffff;
  --input-border: #c9d4df;
  --input-focus: #007bc6;
  --overlay-bg: rgba(0,0,0,0.3);
  --shadow: 0 2px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 24px rgba(0,0,0,0.12);
}

/* ── BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
body {
  font-family: 'Microsoft YaHei', 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 15px; line-height: 1.5;
  color: var(--text); background: var(--bg0);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overflow-x: hidden;
}
body, select, option { font-family: 'Microsoft YaHei', 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; }

/* ── SPLASH ── */
.splash { position: fixed; inset: 0; background: linear-gradient(135deg, #012240 0%, #004d7a 50%, #007bc6 100%); z-index: 99999;
  display: flex; align-items: center; justify-content: center; transition: opacity 0.5s; }
.splash.fade-out { opacity: 0; pointer-events: none; }
.splash-inner { text-align: center; color: #fff; }
.splash-logo { width: 120px; height: auto; margin-bottom: 20px; filter: brightness(0) invert(1); }
.splash h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: 1px; }
.splash p { font-size: 1rem; opacity: 0.8; margin-top: 6px; }
.splash-sub { font-size: 0.85rem; opacity: 0.6; margin-top: 16px; }
.splash-loading { margin-top: 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.splash-spinner { width: 28px; height: 28px; border: 3px solid rgba(255,255,255,0.2); border-top-color: #fff; border-radius: 50%; animation: splash-spin 0.8s linear infinite; }
@keyframes splash-spin { to { transform: rotate(360deg); } }
.splash-loading-text { font-size: 0.8rem; opacity: 0.7; margin: 0; }

/* ── APP ── */
.app { max-width: 640px; margin: 0 auto; min-height: 100vh; }
.hidden { display: none !important; }

/* ── TOP NAV ── */
.top-nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: var(--bg1);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
}
.nav-back { font-size: 1.3rem; background: none; border: none; color: var(--text); cursor: pointer; padding: 4px 8px; }
.nav-brand { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.nav-logo { width: 28px; height: 28px; object-fit: contain; }
.nav-brand h2 { font-size: 1rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--primary); }
.nav-action { background: var(--primary); color: #fff; border: none; padding: 7px 12px; border-radius: 6px;
  font-size: 0.85rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
#btnSettingsNav { background: transparent; color: var(--text-muted); padding: 4px; }

/* ── SEARCH BAR ── */
.search-bar { display: flex; gap: 6px; padding: 10px 14px; background: var(--bg1); border-bottom: 1px solid var(--border); }
.search-bar input { flex: 1; background: var(--input-bg); border: 1px solid var(--input-border); color: var(--text);
  padding: 8px 12px; border-radius: 8px; font-size: 0.9rem; min-width: 0; }
.search-bar input::placeholder { color: var(--text-muted); }

/* ── BUTTONS ── */
.btn-primary {
  background: var(--primary); color: #fff; border: none; padding: 10px 20px; border-radius: 8px;
  font-size: 0.95rem; font-weight: 600; cursor: pointer; }
.btn-outline {
  background: var(--bg3); color: var(--text); border: 1px solid var(--border); padding: 7px 14px; border-radius: 6px;
  font-size: 0.85rem; cursor: pointer; white-space: nowrap; }
.btn-danger { background: var(--danger); color: #fff; border: none; padding: 7px 14px; border-radius: 6px; font-size: 0.85rem; cursor: pointer; }
.btn-primary.full-width { width: 100%; padding: 14px; font-size: 1rem; }

/* ── STATS ── */
.stats-row { display: flex; gap: 8px; padding: 10px 14px; overflow-x: auto; background: var(--bg1); border-bottom: 1px solid var(--border); }
.stat-chip { background: var(--bg3); color: var(--text-secondary); padding: 5px 12px; border-radius: 16px;
  font-size: 0.8rem; white-space: nowrap; }
.stat-chip span { font-weight: 700; color: var(--primary); margin-left: 4px; }

/* ── EXHIBITION GROUP LIST ── */
.group-list { padding: 12px 14px; }
.group-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px; margin-bottom: 10px; cursor: pointer;
  display: flex; align-items: center; gap: 14px;
  transition: background 0.15s, box-shadow 0.15s; }
.group-card:hover, .group-card:active { background: var(--card-hover); box-shadow: var(--shadow); }
.group-icon { font-size: 2rem; flex-shrink: 0; }
.group-info { flex: 1; min-width: 0; }
.group-name { font-size: 1rem; font-weight: 700; color: var(--primary); }
.group-desc { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }
.group-count { font-size: 0.9rem; font-weight: 600; color: var(--text); white-space: nowrap; }
.group-count span { font-size: 1.2rem; color: var(--primary); }
.group-ungrouped { border-left: 3px solid var(--text-muted); }
.group-ungrouped .group-name { color: var(--text-secondary); }

/* ── CUSTOMER LIST ── */
.customer-list { padding: 12px 14px; }
.customer-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 8px; cursor: pointer;
  transition: background 0.15s; }
.customer-card:hover, .customer-card:active { background: var(--card-hover); }
.card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.card-name { font-weight: 700; color: var(--primary); font-size: 0.95rem; flex: 1; }
.card-stars { font-size: 0.85rem; }
.card-company { font-size: 0.85rem; color: var(--text-secondary); }
.card-meta { display: flex; gap: 10px; margin: 4px 0; font-size: 0.78rem; color: var(--text-muted); flex-wrap: wrap; }
.card-meta span { display: inline; }
.card-products { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; }
.card-products span { background: var(--primary-bg); color: var(--primary-light); padding: 2px 8px;
  border-radius: 10px; font-size: 0.73rem; font-weight: 500; }

.star-5 { border-left: 3px solid #f1c40f; }
.star-4 { border-left: 3px solid #e67e22; }
.star-3 { border-left: 3px solid #3498db; }

/* ── EMPTY STATE ── */
.empty-state { text-align: center; padding: 48px 20px; color: var(--text-muted); }
.empty-state p { margin: 12px 0 18px; font-size: 1rem; }
.empty-state .btn-primary { padding: 10px 24px; }

/* ── APP FOOTER ── */
.app-footer {
  text-align: center; padding: 20px 16px 30px; color: var(--text-muted); font-size: 0.75rem;
  display: flex; align-items: center; justify-content: center; gap: 8px; }
.footer-logo { width: 20px; height: 20px; object-fit: contain; opacity: 0.5; }

/* ── PAGES ── */
.page { display: none; }
.page.active { display: block; }

/* ── FORM ── */
.form-scroll { padding: 12px 0 80px 0; }
.form-section { background: var(--card); margin: 12px 16px; border-radius: var(--radius); border: 1px solid var(--border); }
.section-title { background: var(--bg3); padding: 10px 16px; font-size: 0.85rem; font-weight: 700; color: var(--primary-light); letter-spacing: 0.5px; text-transform: uppercase; }
.form-row { display: flex; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--border); }
.form-row:last-child { border-bottom: none; }
.form-row label { width: 110px; flex-shrink: 0; font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); }
.form-row input, .form-row select {
  flex: 1; min-width: 0; background: var(--input-bg); border: 1px solid var(--input-border); color: var(--text);
  padding: 8px 10px; border-radius: 6px; font-size: 0.88rem; font-family: inherit; }
.form-row input:focus, .form-row select:focus { outline: none; border-color: var(--input-focus); }
textarea { width: 100%; background: var(--input-bg); border: none; color: var(--text);
  padding: 12px 16px; font-size: 0.88rem; resize: vertical; font-family: inherit; }
textarea:focus { outline: none; }

/* ── PRODUCT ROW (inline grid) ── */
.product-row-header { display: flex; padding: 8px 16px; font-size: 0.73rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.3px; border-bottom: 1px solid var(--border); }
.product-row-header .ph-name { flex: 3; }
.product-row-header .ph-model { flex: 2; }
.product-row-header .ph-price { flex: 2; }
.product-row-header .ph-currency { flex: 1; }
.product-row-header .ph-del { flex: 0 0 30px; }
.product-row { display: flex; gap: 4px; padding: 6px 16px; border-bottom: 1px solid var(--border); align-items: center; }
.product-row input { flex: 1; min-width: 0; background: var(--input-bg); border: 1px solid var(--input-border); color: var(--text); padding: 7px 6px; border-radius: 5px; font-size: 0.82rem; }
.product-row .p-name { flex: 3; }
.product-row .p-model { flex: 2; }
.product-row .p-price { flex: 2; }
.product-row .p-currency { flex: 1; min-width: 0; background: var(--input-bg); border: 1px solid var(--input-border); color: var(--text); padding: 7px 4px; border-radius: 5px; font-size: 0.8rem; }
.product-row .p-del { flex: 0 0 28px; background: none; border: none; color: var(--text-muted); font-size: 1rem; cursor: pointer; padding: 4px; }

/* Price Slider (Log + Presets) */
.p-slider-row { display: none; padding: 6px 16px 8px; background: var(--bg2); border-bottom: 1px solid var(--border); }
.p-presets { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.p-preset-chip { padding: 5px 12px; border: 1px solid var(--input-border); border-radius: 16px; background: var(--input-bg);
  color: var(--text); font-size: 0.78rem; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: all 0.15s; }
.p-preset-chip:hover { border-color: var(--primary); color: var(--primary); }
.p-preset-chip.active { background: var(--primary); color: var(--bg); border-color: var(--primary); }
.p-slider-line { display: flex; align-items: center; gap: 8px; }
.p-slider-minmax { font-size: 0.7rem; color: var(--text-muted); flex: 0 0 auto; }
.p-slider { flex: 1; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 3px; background: var(--border); outline: none; }
.p-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; border-radius: 50%; background: var(--primary); cursor: pointer; border: 3px solid var(--bg); box-shadow: 0 2px 6px rgba(0,0,0,0.25); }
.p-slider::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: var(--primary); cursor: pointer; border: 3px solid var(--bg); box-shadow: 0 2px 6px rgba(0,0,0,0.25); }

.btn-add-row { display: block; width: 100%; padding: 10px; background: transparent; border: none; color: var(--primary);
  font-size: 0.88rem; cursor: pointer; font-weight: 600; }

/* ── CUSTOM DROPDOWN (Portal mode on body) ── */
.ac-dropdown {
  position: fixed; z-index: 999999;
  background: var(--bg1); border: 1px solid var(--primary); border-radius: 6px;
  max-height: 350px; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  box-shadow: var(--shadow-lg);
}
.ac-dropdown.flip-up { border-radius: 6px; }
.ac-item { padding: 12px 14px; border-bottom: 1px solid var(--border); cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 0.88rem; }
.ac-item:last-child { border-bottom: none; }
.ac-item.ac-active, .ac-item:active { background: var(--primary-bg); }
.ac-en { flex: 1; color: var(--text); }
.ac-cn { color: var(--text-muted); font-size: 0.78rem; }
.ac-code { color: var(--primary); font-size: 0.78rem; font-weight: 600; background: var(--primary-bg); padding: 2px 6px; border-radius: 4px; }

.pd-wrap { display: flex; flex-grow: 1; min-width: 0; }

/* ── PHOTOS ── */
.photo-grid { display: flex; gap: 8px; padding: 12px 16px; flex-wrap: wrap; }
.photo-thumb { position: relative; }
.photo-thumb img { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); cursor: pointer; }
.photo-label { font-size: 0.68rem; color: var(--text-muted); text-align: center; margin-top: 2px; }
.photo-del { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--danger); color: #fff; border: none; font-size: 0.7rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.photo-actions { display: flex; gap: 6px; padding: 8px 16px 12px; }
.btn-photo { flex: 1; background: var(--bg3); border: 1px solid var(--border); color: var(--text);
  padding: 10px 8px; border-radius: 8px; font-size: 0.8rem; cursor: pointer; text-align: center; }
.form-actions { padding: 16px; }

/* ── DETAIL ── */
.detail-section { padding: 12px 0; }
.detail-section-title { font-size: 0.85rem; font-weight: 700; color: var(--primary-light); padding: 0 16px 8px; }
.detail-row { display: flex; padding: 6px 16px; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
.detail-label { width: 110px; flex-shrink: 0; color: var(--text-muted); font-weight: 500; }
.detail-value { flex: 1; color: var(--text); }
.detail-products table { width: 100%; border-collapse: collapse; margin: 0 16px; }
.detail-products th { background: var(--bg3); color: var(--text-muted); padding: 6px 10px; text-align: left; font-size: 0.78rem; }
.detail-products td { padding: 6px 10px; border-bottom: 1px solid var(--border); font-size: 0.82rem; }
.detail-products { width: calc(100% - 32px); margin: 0 16px; }
.detail-photos { display: flex; gap: 8px; padding: 0 16px; flex-wrap: wrap; }
.detail-photo { text-align: center; cursor: pointer; }
.detail-photo img { width: 100px; height: 75px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
.detail-actions { display: flex; gap: 8px; padding: 16px; position: sticky; bottom: 0; background: var(--bg1); border-top: 1px solid var(--border); }

/* ── LIGHTBOX ── */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.9); z-index: 99999; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.lightbox img { max-width: 95%; max-height: 90%; border-radius: 4px; }

/* ── TOAST ── */
.toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); z-index: 99998;
  background: var(--card); color: var(--text); padding: 12px 24px; border-radius: 8px;
  box-shadow: var(--shadow-lg); font-size: 0.9rem; pointer-events: none; opacity: 0; transition: opacity 0.3s; }
.toast.show { opacity: 1; }
.toast-success {
  background: #1a7f4b; color: #fff; font-size: 1.02rem; font-weight: 600;
  padding: 15px 30px; border-radius: 10px; bottom: 45%;
}

/* ── EXPORT / DATA PANEL ── */
.export-panel { padding: 20px 16px 40px; }
.export-icon { text-align: center; font-size: 2.5rem; margin-bottom: 8px; }
.export-panel h3 { text-align: center; font-size: 1.15rem; color: var(--primary); margin-bottom: 4px; }
.export-panel > p { text-align: center; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 16px; }
.export-filter { margin-bottom: 12px; }
.export-filter label { display: block; font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 4px; font-weight: 600; }
.export-filter select, .export-filter input {
  width: 100%; background: var(--input-bg); border: 1px solid var(--input-border); color: var(--text); padding: 9px 12px; border-radius: 8px; font-size: 0.88rem; }
.export-buttons { display: flex; gap: 10px; margin: 16px 0; }
.btn-export { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 16px 12px; border-radius: 12px;
  border: 2px solid var(--border); background: var(--card); color: var(--text); cursor: pointer; text-align: center; }
.btn-export.excel { border-color: #27ae60; }
.btn-export.pdf { border-color: #e74c3c; }
.btn-export.backup { border-color: var(--primary); margin: 0 auto; max-width: 320px; }
.btn-export.import { border-color: var(--warning); margin: 0 auto; max-width: 320px; }
.export-btn-icon { font-size: 1.6rem; margin-bottom: 4px; }
.btn-export small { font-size: 0.7rem; color: var(--text-muted); margin-top: 4px; }
.export-note { font-size: 0.78rem; color: var(--text-muted); line-height: 1.6; margin-top: 20px; }

.backup-section { margin: 16px 0; }
.backup-section-title { font-size: 0.95rem; font-weight: 700; color: var(--primary); margin-bottom: 8px; }
.backup-desc { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 12px; line-height: 1.5; }
.backup-divider { height: 1px; background: var(--border); margin: 16px 0; }

/* Backup mode tabs */
.backup-mode-tabs { display: flex; gap: 0; margin-bottom: 14px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.backup-mode-tab { flex: 1; padding: 8px 12px; border: none; background: var(--bg3); color: var(--text-muted); font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.backup-mode-tab.active { background: var(--primary); color: #fff; }
.backup-mode-tab:not(.active):hover { background: var(--bg2); }

.backup-mode-content { animation: fadeIn 0.2s; }
.backup-filter-row { display: flex; gap: 10px; margin-bottom: 10px; }
.backup-filter { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.backup-filter label { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; }
.backup-filter select, .backup-filter input { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg2); color: var(--text); font-size: 0.82rem; }

.backup-preview { background: var(--bg3); border-radius: 8px; padding: 10px 14px; margin: 10px 0; font-size: 0.8rem; line-height: 1.8; }
.backup-preview-item { display: flex; align-items: center; gap: 6px; }
.backup-preview-item .bp-icon { font-size: 0.9rem; }
.backup-preview-item .bp-num { font-weight: 700; color: var(--primary); }
.backup-preview-empty { color: var(--text-muted); font-style: italic; }

.backup-actions { display: flex; gap: 10px; }
.backup-actions .btn-export { flex: 1; }

/* ── IMPORT ── */
.import-summary { display: flex; gap: 12px; background: var(--bg3); padding: 14px; border-radius: 10px; margin-bottom: 12px; }
.import-summary-icon { font-size: 2rem; flex-shrink: 0; }
.import-summary-info { flex: 1; }
.import-summary-title { font-weight: 700; font-size: 0.9rem; margin-bottom: 4px; }
.import-summary-meta { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 6px; }
.import-summary-stats { display: flex; gap: 10px; }
.import-stat { font-size: 0.8rem; }
.import-stat.new { color: var(--success); }
.import-stat.update { color: var(--warning); }
.import-buttons { display: flex; gap: 8px; }
.import-error { text-align: center; padding: 20px; color: var(--danger); }
.import-error-icon { font-size: 2rem; margin-bottom: 8px; }
.import-hint { font-size: 0.75rem; color: var(--text-muted); margin-top: 8px; text-align: center; }

/* ── SETTINGS PAGE ── */
.sett-group { margin-bottom: 14px; }
.sett-group-title { font-size: 0.85rem; font-weight: 700; color: var(--primary-light); margin-bottom: 6px; }
.sett-group select, .sett-group input {
  width: 100%; background: var(--input-bg); border: 1px solid var(--input-border); color: var(--text); padding: 10px 12px; border-radius: 8px; font-size: 0.9rem; }
.sett-small { display: block; margin-top: 4px; font-size: 0.75rem; color: var(--text-muted); }
.sett-actions { display: flex; gap: 10px; margin-top: 24px; }
.sett-actions .btn-primary { flex: 2; }
.sett-actions .btn-outline { flex: 1; }

/* ── DIALOG ── */
.dialog-overlay { position: fixed; inset: 0; background: var(--overlay-bg); z-index: 99999;
  display: flex; align-items: center; justify-content: center; }
.dialog-box { background: var(--card); padding: 24px; border-radius: 14px; width: 320px; max-width: 90vw; box-shadow: var(--shadow-lg); }
.dialog-title { font-size: 1.1rem; font-weight: 700; color: var(--primary); margin-bottom: 10px; }
.dialog-msg { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 18px; line-height: 1.5; }
.dialog-actions { display: flex; gap: 8px; }
.dialog-actions .btn-primary { flex: 1; }
.dialog-actions .btn-outline { flex: 1; }

/* ── PHOTO SOURCE DIALOG ── */
.photo-src-actions { flex-direction: column; }
.photo-src-actions button { padding: 14px 20px; font-size: 1rem; border-radius: 10px; }

/* ── UTILITIES ── */
:root { --radius: 10px; --radius-sm: 8px; }

/* ════════════════════════════════════════
   V2.2 NEW MODULES
════════════════════════════════════════ */

/* ── BOTTOM NAV ── */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
  display: flex; background: var(--card); border-top: 1px solid var(--input-border);
  box-shadow: 0 -2px 12px rgba(0,0,0,0.08); height: 56px;
}
.bn-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; padding: 4px 0;
  color: var(--text-muted); font-size: 0.7rem; transition: color 0.2s;
}
.bn-item.active { color: var(--primary); }
.bn-icon { font-size: 1.3rem; line-height: 1; margin-bottom: 2px; }
.bn-label { font-size: 0.68rem; }

/* Add bottom padding for bottom nav */
.page.active { padding-bottom: 60px; }

/* ── FILTER CHIPS ── */
.filter-chips {
  display: flex; gap: 6px; padding: 0 16px 8px; overflow-x: auto; flex-wrap: wrap;
}
.filter-select {
  background: var(--input-bg); border: 1px solid var(--input-border); color: var(--text);
  padding: 6px 10px; border-radius: 20px; font-size: 0.8rem; white-space: nowrap; cursor: pointer;
  max-width: 160px;
}
.filter-select option { max-width: 200px; }

/* ── CARD QUOTE BADGE ── */
.card-quote-badge {
  font-size: 0.7rem; background: var(--primary); color: #fff;
  padding: 2px 8px; border-radius: 10px; margin-left: auto;
}
.card-name-sub { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 4px; }

/* ── HIERARCHICAL GROUPING ── */
.hierarchy-group { margin-bottom: 2px; }
.hierarchy-header {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; cursor: pointer; user-select: none;
  border-radius: 8px; transition: background 0.15s;
}
.hierarchy-header:hover { background: var(--bg-hover, rgba(0,112,192,0.08)); }
.hierarchy-l1 {
  font-weight: 700; font-size: 0.95rem; color: var(--primary);
  background: var(--bg2, #162230); margin-bottom: 2px;
}
.hierarchy-l2 {
  font-weight: 600; font-size: 0.88rem; color: var(--text-primary, #333);
  padding-left: 24px; background: var(--bg1, #0f1923);
}
.hierarchy-toggle { font-size: 0.7rem; width: 14px; color: var(--text-muted, #888); }
.hierarchy-flag { display: inline-flex; align-items: center; }
.hierarchy-flag .flag-icon, .flag-icon { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; vertical-align: middle; }
.hierarchy-title { flex: 1; }
.hierarchy-subtitle { font-size: 0.78rem; color: var(--text-muted, #888); font-weight: normal; }
.hierarchy-count {
  font-size: 0.75rem; background: var(--bg3, rgba(255,255,255,0.1));
  padding: 2px 8px; border-radius: 10px; color: var(--text-muted, #888);
}
.hierarchy-children { padding-left: 0; }

/* ── QUOTE LIST ── */
.quote-list { padding: 0 16px; }
.quote-card {
  background: var(--card); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px;
  border-left: 3px solid var(--primary); cursor: pointer; transition: box-shadow 0.2s;
}
.quote-card:active { box-shadow: var(--shadow-sm); }
.quote-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.quote-card-num { font-size: 1rem; font-weight: 700; color: var(--primary); }
.quote-version-badge {
  font-size: 0.65rem; background: var(--input-bg); color: var(--text-muted);
  padding: 1px 6px; border-radius: 8px; margin-left: 6px;
}
.quote-card-customer { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 4px; }
.quote-card-meta { display: flex; gap: 12px; font-size: 0.78rem; color: var(--text-muted); }
.quote-card-total { font-weight: 600; color: var(--primary); }

/* ── QUOTE STATUS BADGES ── */
.quote-status-badge {
  font-size: 0.7rem; padding: 2px 10px; border-radius: 12px; font-weight: 600; white-space: nowrap;
}
/* Status colors only apply to badge, not card background */
.quote-status-badge.quote-status-draft     { background: #e0e0e0; color: #555; }
.quote-status-badge.quote-status-sent      { background: #cce5ff; color: #004085; }
.quote-status-badge.quote-status-confirmed { background: #d4edda; color: #155724; }
.quote-status-badge.quote-status-ordered   { background: #fff3cd; color: #856404; }
.quote-status-badge.quote-status-expired   { background: #f8d7da; color: #721c24; }
.quote-status-badge.quote-status-cancelled { background: #e2e3e5; color: #6c757d; }

/* Clickable status button + custom dropdown menu (quote detail header) */
.quote-status-btn { border: none; cursor: pointer; font-size: 0.78rem; padding: 6px 14px; border-radius: 14px; font-family: inherit; }
.quote-status-btn:active { opacity: 0.85; }
.quote-status-menu {
  position: fixed; z-index: 9999; min-width: 160px; overflow: hidden;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.4);
}
.qsm-item { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; cursor: pointer; font-size: 0.88rem; color: var(--text); }
.qsm-item:hover { background: var(--card-hover); }
.qsm-item .qsm-dot { font-size: 0.75rem; padding: 4px 12px; }
.qsm-item .qsm-check { color: var(--primary); font-weight: 700; margin-left: 12px; }

/* ── QUOTE FORM ── */
.quote-cust-card {
  background: var(--input-bg); border-radius: 8px; padding: 12px;
}
.quote-cust-name { font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
.quote-cust-info { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 2px; }
.quote-cust-input { margin-bottom: 6px; }
.quote-cust-picker { text-align: center; }
.quote-info-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.quote-info-grid .form-field { margin-bottom: 0; }
.form-field { margin-bottom: 10px; }
.form-field label { font-size: 0.8rem; color: var(--text-muted); display: block; margin-bottom: 4px; }
.form-field.full-width { grid-column: 1 / -1; }
.form-input { width: 100%; background: var(--input-bg); border: 1px solid var(--input-border); color: var(--text); padding: 8px 10px; border-radius: 6px; font-size: 0.9rem; box-sizing: border-box; }

.quote-items-list { overflow-x: auto; }
.quote-items-header {
  display: grid; grid-template-columns: 2fr 1.5fr 1fr 0.5fr 1fr 0.3fr;
  gap: 4px; padding: 8px 12px; font-size: 0.75rem; font-weight: 700;
  color: var(--text-muted); border-bottom: 1px solid var(--input-border);
}
.quote-item-row {
  display: grid; grid-template-columns: 24px 2fr 1.5fr 1fr 0.5fr 1fr 0.3fr;
  gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--input-border);
  align-items: center; font-size: 0.85rem; position: relative;
}
.quote-item-row[draggable="true"]:hover { cursor: grab; }
.quote-item-row.dragging { cursor: grabbing; }
.qi-drag-handle { color: var(--text-muted); font-size: 1.2rem; cursor: grab; user-select: none; text-align: center; }
.qi-drag-handle:active { cursor: grabbing; }
.qi-product { display: flex; align-items: center; gap: 6px; }
.qi-thumb { width: 36px; height: 36px; object-fit: contain; border-radius: 4px; cursor: pointer; }
.qi-noimg { width: 36px; height: 36px; background: var(--input-bg); border-radius: 4px; }
.qi-line { font-size: 0.75rem; color: var(--text-muted); }
.qi-model { font-weight: 600; }
.qi-input { padding: 4px 6px; font-size: 0.8rem; min-width: 60px; }
.qi-input-sm { padding: 3px 5px; font-size: 0.75rem; max-width: 120px; }
.qi-subtotal { text-align: right; font-weight: 600; color: var(--primary); }
.qi-actions { text-align: center; }
.btn-icon { background: none; border: none; color: #e74c3c; cursor: pointer; font-size: 1rem; padding: 4px; }
.qi-remark { grid-column: 1 / -1; font-size: 0.75rem; color: var(--text-muted); padding-top: 4px; }
.qi-extras { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
.qi-extras label { font-size: 0.72rem; color: var(--text-muted); display: flex; align-items: center; gap: 3px; }
.quote-empty-items { padding: 20px; text-align: center; color: var(--text-muted); font-size: 0.9rem; }

.quote-terms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quote-total-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; font-size: 1.1rem; font-weight: 700;
}
.quote-total-amount { color: var(--primary); font-size: 1.3rem; }

/* ── QUOTE DETAIL ── */
.quote-detail-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.quote-detail-table th { background: var(--primary); color: #fff; padding: 6px 4px; text-align: center; font-size: 0.72rem; }
.quote-detail-table td { padding: 6px 4px; border: 1px solid var(--input-border); text-align: center; }
.qd-thumb { max-width: 50px; max-height: 50px; object-fit: contain; }
.quote-ps {
  padding: 12px 16px; font-size: 0.8rem; line-height: 1.7; white-space: pre-wrap;
  color: var(--text-secondary); border-top: 1px solid var(--input-border); margin-top: 8px;
}
.quote-version-row {
  display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--input-border);
  cursor: pointer; font-size: 0.85rem; align-items: center;
}
.quote-version-row.current { font-weight: 700; color: var(--primary); }
.qv-version { background: var(--input-bg); padding: 2px 8px; border-radius: 8px; }
.qv-date { color: var(--text-muted); }
.qv-current { margin-left: auto; font-size: 0.75rem; }

/* ── PICKER MODALS ── */
.picker-dialog { width: 400px; max-width: 95vw; max-height: 80vh; display: flex; flex-direction: column; }
.picker-dialog-wide { width: 500px; }
.picker-list { overflow-y: auto; max-height: 50vh; }
.picker-item {
  padding: 10px 12px; border-bottom: 1px solid var(--input-border); cursor: pointer;
}
.picker-item:active { background: var(--input-bg); }
.picker-item-name { font-weight: 600; font-size: 0.9rem; }
.picker-item-info { font-size: 0.8rem; color: var(--text-muted); }

/* Product picker */
.pp-category { margin-bottom: 8px; }
.pp-cat-title {
  font-size: 0.85rem; font-weight: 700; color: var(--primary); padding: 8px 12px;
  background: var(--input-bg); border-radius: 6px; cursor: pointer; user-select: none;
}
.pp-cat-count { font-weight: 400; color: var(--text-muted); font-size: 0.8rem; }
.pp-category.collapsed .pp-cat-models { display: none; }
.pp-cat-models {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px; padding: 8px 4px;
}
.pp-model {
  display: flex; flex-direction: column; align-items: center; padding: 8px; border: 1px solid var(--input-border);
  border-radius: 8px; cursor: pointer; position: relative; text-align: center;
}
.pp-model:active { background: var(--input-bg); }
.pp-model.added { opacity: 0.5; pointer-events: none; }
.pp-model-img { width: 60px; height: 60px; object-fit: contain; margin-bottom: 4px; }
.pp-noimg { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 4px; }
.pp-model-name { font-size: 0.72rem; font-weight: 600; word-break: break-all; }
.pp-added-badge { position: absolute; top: 2px; right: 4px; color: #27ae60; font-size: 0.8rem; }
.pp-model-price { font-size: 0.65rem; color: var(--primary); font-weight: 500; margin-top: 2px; }

/* ── PRODUCT PICKER TABS ── */
.pp-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.pp-tab {
  flex: 1; padding: 6px 8px; font-size: 0.8rem; font-weight: 600;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--card-bg); color: var(--text-muted); cursor: pointer;
  text-align: center; transition: all 0.15s;
}
.pp-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.pp-tab:active { opacity: 0.85; }

/* ── EVENT CATEGORIES ── */
.evt-categories { display: flex; flex-direction: column; gap: 8px; }
.evt-cat-card {
  display: flex; align-items: center; gap: 12px; padding: 16px;
  background: var(--card-bg); border: 0.5px solid var(--border);
  border-radius: 12px; cursor: pointer; transition: all 0.15s;
}
.evt-cat-card:active { opacity: 0.85; }
.evt-cat-icon { font-size: 2rem; flex-shrink: 0; }
.evt-cat-info { flex: 1; }
.evt-cat-name { font-size: 1rem; font-weight: 600; }
.evt-cat-label { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }
.evt-cat-count { font-size: 0.75rem; color: var(--primary); margin-top: 4px; }

/* ── BTN SM ── */
.btn-sm { padding: 4px 12px; font-size: 0.8rem; border-radius: 6px; }

/* ── EVENT ITEM CARDS (business group lists) ── */
.cust-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 10px; cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}
.cust-card:hover, .cust-card:active { background: var(--card-hover); box-shadow: var(--shadow); }
.cust-card-body { min-width: 0; }
.cust-name { font-weight: 700; color: var(--primary); font-size: 0.95rem; }
.cust-company { font-size: 0.85rem; color: var(--text); margin-top: 2px; }
.cust-meta { display: flex; gap: 14px; margin-top: 6px; font-size: 0.78rem; color: var(--text-muted); flex-wrap: wrap; }
.cust-notes { margin-top: 6px; padding-top: 6px; font-size: 0.8rem; color: var(--text-secondary); border-top: 1px dashed var(--border); }
.btn-block { display: block; width: 100%; }
.btn-primary { background: var(--primary); color: #fff; border: none; padding: 8px 16px; border-radius: 8px; font-size: 0.9rem; cursor: pointer; }
.btn-primary:active { opacity: 0.85; }
.btn-outline { background: none; border: 1px solid var(--input-border); color: var(--text); padding: 8px 16px; border-radius: 8px; font-size: 0.9rem; cursor: pointer; }
.btn-outline:active { background: var(--input-bg); }
.btn-danger { background: none; border: 1px solid #e74c3c; color: #e74c3c; padding: 8px 16px; border-radius: 8px; font-size: 0.9rem; cursor: pointer; }
.full-width { width: 100%; box-sizing: border-box; }

/* =====================================================
   V3.2 EXECUTIVE NAVY — 商务深蓝覆盖层
   藏青 #0B1F3A + 香槟金 #D4B36A（只改视觉，不动布局）
===================================================== */
:root, [data-theme="dark"] {
  --gold: #d4b36a;
  --gold-dim: rgba(212,179,106,0.14);
  --gold-border: rgba(212,179,106,0.35);
  --navy-1: #0b1f3a;
  --navy-2: #14335e;
  --navy-3: #1d4e89;
}

/* ── Splash：藏青放射渐变 + 反白Logo + 金线 ── */
.splash {
  background: radial-gradient(120% 90% at 50% 0%, #1d4e89 0%, #14335e 40%, #0b1f3a 78%, #081222 100%);
}
.splash::before {
  content: ''; position: absolute; width: 300px; height: 300px;
  border: 1px solid rgba(212,179,106,0.16); border-radius: 50%;
  top: -90px; right: -90px;
}
.splash::after {
  content: ''; position: absolute; width: 200px; height: 200px;
  border: 1px solid rgba(255,255,255,0.06); border-radius: 50%;
  bottom: -60px; left: -60px;
}
.splash-logo { width: 210px; height: auto; filter: none; margin-bottom: 22px; }
.splash h1 { letter-spacing: 2px; font-size: 1.5rem; }
.splash .splash-en { font-size: 0.75rem; color: #a9c4e8; letter-spacing: 3.5px; margin-top: 8px; }
.splash .splash-rule {
  width: 130px; height: 1.5px; margin: 16px auto 10px;
  background: linear-gradient(90deg, transparent, #d4b36a, transparent);
}
.splash .splash-sub { font-size: 0.68rem; color: #d4b36a; opacity: 0.95; letter-spacing: 2.5px; margin-top: 0; }
.splash p { color: #a9c4e8; }

/* ── 顶栏：藏青渐变 + 金线收边 ── */
.top-nav {
  background: linear-gradient(135deg, #0b1f3a 0%, #14335e 55%, #1d4e89 100%) !important;
  border-bottom: 1px solid rgba(212,179,106,0.25) !important;
}
.nav-logo { width: auto; height: 18px; object-fit: contain; }
.top-nav #pageTitle { color: #fff; letter-spacing: 0.3px; }
.nav-action {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 9px; color: #cfe0f5;
}
/* 顶栏右侧按钮统一高度+内容居中（🔔/⚙/+新客户 视觉对齐） */
.top-nav .nav-action {
  height: 36px; min-width: 40px; padding: 0 10px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.top-nav .notif-bell, .top-nav #btnSettingsNav { width: 40px; padding: 0; font-size: 1.15rem; }
.top-nav #btnSettingsNav { background: transparent; border-color: transparent; }

/* ── 底部导航：藏青底 + 金色激活药丸 ── */
.bottom-nav { background: #0c1b31; border-top: 1px solid #1c3a66; }
.bn-item { color: #6f8bb5; }
.bn-icon svg { width: 21px; height: 21px; display: block; margin: 0 auto; }
.bn-item.active { color: #d4b36a; }
.bn-item.active .bn-icon {
  background: rgba(212,179,106,0.14);
  border: 1px solid rgba(212,179,106,0.3);
  border-radius: 99px; padding: 3px 13px;
}

/* ── 统计 chips：微金点缀 ── */
.stat-chip { background: linear-gradient(160deg, #12294a, #0e1f38); border: 1px solid #1e3a63; }
.stat-chip span { color: #d4b36a; }

/* ── 客户卡片：金色左缘 ── */
.customer-card {
  background: #10213c; border: 1px solid #1c3a66; border-left: 3px solid #d4b36a;
  border-radius: 11px;
}
.customer-card:hover, .customer-card:active { background: #12294a; }
.card-name { color: #fff; }
.card-stars { color: #d4b36a; }
.card-company { color: #9db8dd; }
.card-meta { color: #6f8bb5; }

/* ── 事件卡片图标底色 ── */
.evt-cat-icon {
  background: rgba(212,179,106,0.13); color: #e2c98a;
  border: 1px solid rgba(212,179,106,0.3); border-radius: 10px;
}

/* ── 金色主按钮（新类，供关键操作使用）── */
.btn-gold, button.btn-gold {
  background: linear-gradient(135deg, #d4b36a, #c19a4d) !important;
  color: #0b1f3a !important; border: none !important;
  box-shadow: 0 4px 14px rgba(212,179,106,0.25);
  font-weight: 700;
}

/* ── 报价单号/金额金色强调 ── */
.q-number, .quote-number { color: #d4b36a; font-family: Consolas, monospace; }

/* ── 浅色主题适配（深色专用样式不生效区域保底）── */
[data-theme="light"] .customer-card {
  background: #fff; border: 1px solid #dce3e8; border-left: 3px solid #d4b36a;
}
[data-theme="light"] .card-name { color: #1a1a2e; }
[data-theme="light"] .card-company { color: #4a5568; }
[data-theme="light"] .stat-chip { background: #f0f3f7; border: 1px solid #dce3e8; }
[data-theme="light"] .stat-chip span { color: #b8934a; }

/* ── V3.2 BUG修复包 ── */
/* BUG2: 顶栏文字强制浅色（藏青渐变顶栏在浅色主题下文字隐形） */
.top-nav, .top-nav .nav-back, .top-nav #pageTitle, .top-nav .nav-brand h2 {
  color: #fff !important;
}
.top-nav .nav-back {
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 9px; width: 34px; height: 34px; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.top-nav .nav-back:active { background: rgba(212,179,106,0.2); }

/* BUG3: 事件图标改圆形+居中 */
.evt-cat-icon {
  width: 44px; height: 44px; border-radius: 50% !important;
  display: flex !important; align-items: center; justify-content: center;
  font-size: 1.25rem; flex-shrink: 0;
  background: rgba(212,179,106,0.13); color: #e2c98a;
  border: 1px solid rgba(212,179,106,0.3);
}
.evt-cat-icon svg { width: 20px; height: 20px; display: block; }
.group-icon svg { width: 1em; height: 1em; vertical-align: -0.15em; }

/* ── V3.2 细节优化段：详情头/照片区/表单/按钮体系 ── */
.detail-head-flex { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; padding: 0 16px; }
.detail-avatar {
  width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
  background: linear-gradient(135deg, #d4b36a, #b8934a);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 800; color: #0b1f3a;
  box-shadow: 0 4px 14px rgba(212,179,106,0.25);
}
.detail-name { font-size: 1.2rem; font-weight: 700; color: #fff; }
.detail-company { color: #9db8dd; font-size: 0.9rem; margin-top: 2px; }
.detail-stars { display: inline-block; margin-top: 4px; font-size: 1.1rem; color: #d4b36a; letter-spacing: 1px; }

/* 分区标题：金色+金线 */
.detail-section-title {
  color: #d4b36a; letter-spacing: 1.2px; font-size: 0.78rem;
  display: flex; align-items: center; gap: 8px;
}
.detail-section-title::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(212,179,106,0.4), transparent);
}

/* 照片区 */
.detail-photo img { border-radius: 10px; border: 1px solid #1c3a66; }
.photo-thumb img { border-radius: 10px; border: 1px solid #1c3a66; }
.btn-photo {
  border: 1.5px dashed rgba(212,179,106,0.45); color: #e2c98a;
  background: rgba(212,179,106,0.06); border-radius: 10px;
}
.btn-photo:active { background: rgba(212,179,106,0.14); }

/* 表单聚焦金边 */
.form-row input:focus, .form-row select:focus, .form-input:focus, textarea:focus {
  border-color: #d4b36a !important;
  box-shadow: 0 0 0 2px rgba(212,179,106,0.15);
}

/* 主按钮金色化 */
.btn-primary {
  background: linear-gradient(135deg, #d4b36a, #c19a4d) !important;
  color: #0b1f3a !important; border: none !important; font-weight: 700;
  box-shadow: 0 4px 14px rgba(212,179,106,0.25);
}
.btn-primary:active { filter: brightness(0.92); }

/* 操作按钮排布与图标对齐 */
.detail-actions { gap: 9px; }
.detail-actions button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn-outline { border-radius: 10px; }
.btn-danger { border-radius: 10px; }

/* 浅色主题保底 */
[data-theme="light"] .detail-name { color: #1a1a2e; }
[data-theme="light"] .detail-company { color: #4a5568; }
[data-theme="light"] .detail-photo img,
[data-theme="light"] .photo-thumb img { border-color: #dce3e8; }

/* =====================================================
   V3.2 PC 宽屏适配（EXE/便携版，桌面与笔记本）
   手机竖屏布局 → 宽屏响应式（≥900px 双列 / ≥1400px 三列）
===================================================== */
@media (min-width: 900px) {
  /* 应用容器放宽，利用宽屏（原手机比例 640px） */
  .app { max-width: 1200px; }

  /* 三个卡片列表 → 双列网格（卡片均为容器直接子元素，安全） */
  #customerList, #quoteList, #groupList {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 12px; align-items: start;
  }
  #customerList .customer-card,
  #quoteList .quote-card,
  #groupList .group-card { margin-bottom: 0; }

  /* 底部主导航居中（fixed 定位） */
  .bottom-nav {
    max-width: 1200px; width: 100%;
    left: 50%; right: auto; transform: translateX(-50%);
  }

  /* 顶栏内容居中 */
  .top-nav { padding-left: 16px; padding-right: 16px; }

  /* 详情页照片网格自适应更宽 */
  .photo-grid { gap: 12px; }
  .photo-thumb { width: 140px; height: 140px; }
  .btn-photo { width: 140px; height: 140px; }

  /* 表单/详情内容适度限宽，避免输入框过度拉伸 */
  #pageForm .form-section, #pageForm .form-row { max-width: 860px; margin-left: auto; margin-right: auto; }

  /* 对话框适度加宽 */
  .dialog-box { width: 420px; }
}

@media (min-width: 1400px) {
  .app { max-width: 1400px; }
  #customerList, #quoteList, #groupList { grid-template-columns: repeat(3, 1fr); }
  .bottom-nav { max-width: 1400px; }
}

/* 总览页分组展开容器（hierarchy-children）宽屏网格化 */
@media (min-width: 900px) {
  .hierarchy-children {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 12px; align-items: start;
  }
  .hierarchy-children .customer-card { margin-bottom: 0; }
}
@media (min-width: 1400px) {
  .hierarchy-children { grid-template-columns: repeat(3, 1fr); }
}

/* =====================================================
   V3.2 PC DESKTOP REDESIGN (≥1024px)
   左侧边栏导航 + 宽屏内容区重构（非简单拉宽）
===================================================== */
.pc-sidebar { display: none; }

@media (min-width: 1024px) {
  /* ── 左侧固定侧边栏 ── */
  .pc-sidebar {
    display: flex; flex-direction: column;
    position: fixed; left: 0; top: 0; bottom: 0; width: 224px; z-index: 1001;
    background: linear-gradient(180deg, #0b1f3a 0%, #14335e 55%, #0e1f38 100%);
    border-right: 1px solid rgba(212,179,106,0.2);
  }
  .pc-side-brand { padding: 26px 18px 20px; border-bottom: 1px solid rgba(212,179,106,0.18); }
  .pc-side-logo { width: 150px; height: auto; display: block; }
  .pc-side-name { color: #fff; font-size: 0.8rem; font-weight: 700; margin-top: 13px; letter-spacing: 0.5px; line-height: 1.35; }
  .pc-side-en { color: #d4b36a; font-size: 0.6rem; letter-spacing: 2.2px; margin-top: 4px; }
  .pc-side-nav { flex: 1; padding: 16px 0; display: flex; flex-direction: column; gap: 2px; }
  .sn-item {
    display: flex; align-items: center; gap: 13px;
    padding: 12px 20px; background: none; border: none; cursor: pointer;
    color: #8fa9cf; font-size: 0.92rem; font-weight: 600; text-align: left;
    border-right: 3px solid transparent; transition: background 0.15s, color 0.15s;
  }
  .sn-item svg { width: 20px; height: 20px; flex-shrink: 0; }
  .sn-item:hover { color: #dcebff; background: rgba(255,255,255,0.05); }
  .sn-item.active { color: #d4b36a; background: rgba(212,179,106,0.12); border-right-color: #d4b36a; }
  .pc-side-foot { padding: 12px 20px; color: #5a7199; font-size: 0.66rem; letter-spacing: 1.2px; }

  /* ── 布局让位侧边栏 ── */
  .app { max-width: none; margin: 0 0 0 224px; min-height: 100vh; }
  .bottom-nav { display: none; }
  body { padding-bottom: 0; }
  .top-nav { position: sticky; top: 0; z-index: 100; }

  /* ── 内容区居中 ── */
  .page { max-width: 1280px; margin: 0 auto; padding: 22px 30px 48px; box-sizing: border-box; }

  /* ── 列表真网格（3列，覆盖900段的双列）── */
  #customerList, #quoteList, #groupList { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .hierarchy-children { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  #customerList .customer-card, #quoteList .quote-card, #groupList .group-card,
  .hierarchy-children .customer-card { margin-bottom: 0; }

  /* ── 卡片 hover 提升 ── */
  .customer-card, .quote-card, .group-card { transition: transform 0.15s ease, box-shadow 0.15s ease; }
  .customer-card:hover, .quote-card:hover, .group-card:hover {
    transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,0.38);
  }

  /* ── 详情/表单/设置等内容限宽居中（避免拉满1280）── */
  #page-detail .detail-head-flex,
  #page-detail .detail-section-title,
  #page-detail .detail-photos,
  #page-detail .detail-products,
  #page-detail .detail-actions { max-width: 980px; margin-left: auto; margin-right: auto; }
  #pageForm .form-section, #pageForm .form-row { max-width: 900px; }
  #pageQuoteForm .form-section { max-width: 980px; }
  #page-settings > *, #page-data > *, #page-export > *, #page-summary > * { max-width: 860px; margin-left: auto; margin-right: auto; }

  /* ── 照片网格 ── */
  #page-detail .photo-grid { gap: 14px; justify-content: flex-start; max-width: 980px; margin-left: auto; margin-right: auto; }
  #page-detail .photo-thumb { width: 150px; height: 150px; }
  #page-detail .btn-photo { width: 150px; height: 150px; }

  /* ── 对话框 PC 尺寸 ── */
  .dialog-box { width: 460px; }
}

/* 超宽屏（≥1600px）4列 */
@media (min-width: 1600px) {
  .page { max-width: 1500px; }
  #customerList, #quoteList, #groupList, .hierarchy-children { grid-template-columns: repeat(4, 1fr); }
}

/* ── V3.2 PC 细化：客户表单基本信息 2 列（纯表单项，特殊控件 section 保持单列）── */
@media (min-width: 1024px) {
  #page-form .form-section:has(> #secBasicInfo) {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px 28px;
    max-width: 980px; margin-left: auto; margin-right: auto;
  }
  #page-form .form-section:has(> #secBasicInfo) .section-title { grid-column: 1 / -1; }
  #page-form .form-section:has(> #secBasicInfo) .form-row { max-width: none; }
  /* 其他 section 限宽居中（产品/备注/照片等） */
  #page-form .form-section:not(:has(> #secBasicInfo)) { max-width: 980px; margin-left: auto; margin-right: auto; }
  #page-form .form-section:not(:has(> #secBasicInfo)) .form-row { max-width: none; }

  /* ── 详情页左右分栏 ── */
  .detail-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px; max-width: 1180px; margin: 0 auto; align-items: start; }
  .detail-cols .detail-col-l, .detail-cols .detail-col-r { min-width: 0; }
  /* 分栏时取消各元素独立限宽，由栏容器控制 */
  #page-detail .detail-cols .detail-head-flex,
  #page-detail .detail-cols .detail-section-title,
  #page-detail .detail-cols .detail-photos,
  #page-detail .detail-cols .detail-products,
  #page-detail .detail-cols .photo-grid { max-width: none; margin-left: 0; margin-right: 0; }
  /* 详情底部操作按钮仍居中 */
  #page-detail .detail-actions { max-width: 980px; margin-left: auto; margin-right: auto; }
}

/* ── V3.4 登录页（账号密码）── */
.login-screen {
  display: none;
  position: fixed; inset: 0; z-index: 100000;
  background: linear-gradient(135deg, #14315e 0%, #0b1f3a 60%, #091a30 100%);
  align-items: center; justify-content: center;
  padding: 20px; box-sizing: border-box;
}
.login-card {
  width: 100%; max-width: 380px;
  background: var(--card, #ffffff);
  border-radius: 16px; padding: 36px 32px 26px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
  text-align: center; box-sizing: border-box;
}
.login-logo img { height: 44px; margin-bottom: 12px; }
.login-title { font-size: 1.28rem; font-weight: 800; color: var(--text, #0b1f3a); letter-spacing: 1px; }
.login-sub { font-size: 0.85rem; color: var(--muted, #8a97a8); margin: 4px 0 24px; }
.login-field { text-align: left; margin-bottom: 15px; }
.login-field label { display: block; font-size: 0.8rem; color: var(--muted, #8a97a8); margin-bottom: 6px; font-weight: 600; }
.login-field input {
  width: 100%; padding: 12px 14px; font-size: 0.95rem; box-sizing: border-box;
  border: 1.5px solid var(--border, #dde3ea); border-radius: 8px;
  background: var(--bg, #fff); color: var(--text, #0b1f3a);
}
.login-field input:focus { outline: none; border-color: #d4b36a; }
.login-error { color: #e05a5a; font-size: 0.82rem; min-height: 20px; margin-bottom: 8px; line-height: 1.4; }
.login-btn {
  width: 100%; padding: 13px; font-size: 1rem; font-weight: 700; letter-spacing: 2px;
  background: linear-gradient(135deg, #d4b36a, #c9a24f); color: #0b1f3a;
  border: none; border-radius: 8px; cursor: pointer;
}
.login-btn:hover { filter: brightness(1.06); }
.login-hint { font-size: 0.75rem; color: var(--muted, #8a97a8); margin-top: 16px; line-height: 1.5; }

/* ── V3.4 通用表单 Modal + 用户管理 ── */
.form-modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 90000;
  background: rgba(6,15,30,0.6); backdrop-filter: blur(2px);
  align-items: center; justify-content: center; padding: 20px; box-sizing: border-box;
}
.form-modal {
  width: 100%; max-width: 420px; background: var(--card, #fff);
  border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  overflow: hidden;
}
.form-modal-title {
  padding: 16px 20px; font-size: 1.05rem; font-weight: 700;
  color: var(--text, #0b1f3a); border-bottom: 1px solid var(--border, #e3e8ef);
}
.form-modal-body { padding: 18px 20px; max-height: 60vh; overflow-y: auto; }
.fm-field { margin-bottom: 14px; }
.fm-field label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--muted, #8a97a8); margin-bottom: 5px; }
.fm-field input, .fm-field select {
  width: 100%; padding: 10px 12px; font-size: 0.92rem; box-sizing: border-box;
  border: 1.5px solid var(--border, #dde3ea); border-radius: 7px;
  background: var(--bg, #fff); color: var(--text, #0b1f3a);
}
.fm-field input:focus, .fm-field select:focus { outline: none; border-color: #d4b36a; }
.fm-error { color: #e05a5a; font-size: 0.82rem; min-height: 18px; margin-top: 4px; }
.form-modal-actions {
  display: flex; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border, #e3e8ef);
}
.fm-cancel, .fm-ok {
  flex: 1; padding: 11px; font-size: 0.95rem; font-weight: 600; border-radius: 7px; cursor: pointer; border: none;
}
.fm-cancel { background: var(--bg, #f0f2f5); color: var(--text, #5a6a7d); border: 1px solid var(--border, #dde3ea); }
.fm-ok { background: linear-gradient(135deg, #d4b36a, #c9a24f); color: #0b1f3a; }

/* 用户管理列表 */
.user-mgmt-row {
  display: flex; align-items: center; gap: 10px; padding: 11px 4px;
  border-bottom: 1px solid var(--border, #eef1f5);
}
.user-mgmt-row:last-child { border-bottom: none; }
.user-mgmt-info { flex: 1; min-width: 0; }
.user-mgmt-name { font-weight: 700; font-size: 0.92rem; color: var(--text, #0b1f3a); }
.user-mgmt-meta { font-size: 0.78rem; color: var(--muted, #8a97a8); margin-top: 2px; }
.user-role-badge {
  font-size: 0.72rem; font-weight: 700; padding: 3px 9px; border-radius: 20px;
  background: rgba(212,179,106,0.15); color: #8a6d2f; flex-shrink: 0;
}
.user-role-badge.admin { background: rgba(11,31,58,0.12); color: #0b1f3a; }
.user-role-badge.disabled { background: rgba(200,200,200,0.2); color: #999; text-decoration: line-through; }
.user-mgmt-actions { display: flex; gap: 6px; flex-shrink: 0; }
.user-mgmt-actions button {
  font-size: 0.75rem; padding: 5px 10px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border, #dde3ea); background: var(--bg, #fff); color: var(--text, #0b1f3a);
}
.user-mgmt-actions button:hover { border-color: #d4b36a; }
.acct-info-row { display: flex; align-items: center; gap: 12px; padding: 6px 0 14px; }
.acct-avatar {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #d4b36a, #c9a24f); color: #0b1f3a;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem;
}
.acct-name { font-weight: 700; font-size: 1.05rem; color: var(--text, #0b1f3a); }
.acct-role { font-size: 0.8rem; color: var(--muted, #8a97a8); margin-top: 2px; }

/* ═══ 通知中心 ═══ */
.notif-bell { position: relative; }
.notif-badge {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px;
  background: #e05a5a; color: #fff; border-radius: 9px; font-size: 11px; font-weight: 700;
  line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--card, #fff);
}
.notif-badge.hidden { display: none; }
.notif-item { padding: 10px 12px; border: 0.5px solid var(--border); border-radius: 8px; margin-bottom: 8px; cursor: pointer; transition: background 0.15s; }
.notif-item:hover { background: var(--bg-secondary, rgba(128,128,128,0.08)); }
.notif-item.unread { border-left: 3px solid #D4B36A; background: rgba(212,179,106,0.06); }
.notif-msg { font-size: 0.88rem; line-height: 1.4; }
.notif-meta { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; }
.notif-actions { margin-top: 8px; display: flex; justify-content: flex-end; }
.notif-approved-tag {
  display: inline-block; padding: 3px 10px; border-radius: 10px; font-size: 0.76rem; font-weight: 600;
  color: #2a9d5c; background: rgba(42,157,92,0.12); border: 0.5px solid rgba(42,157,92,0.35);
}

/* 客户阶段徽章：潜在(待审批)=橙，正式(已审批)=绿 */
.stage-badge {
  display: inline-block; padding: 2px 8px; border-radius: 9px; font-size: 0.7rem; font-weight: 600;
  line-height: 1.5; vertical-align: middle; white-space: nowrap;
}
.stage-potential { color: #e09a3c; background: rgba(224,154,60,0.12); border: 0.5px solid rgba(224,154,60,0.4); }
.stage-formal { color: #2a9d5c; background: rgba(42,157,92,0.12); border: 0.5px solid rgba(42,157,92,0.35); }

/* 操作记录 */
.audit-item { padding: 9px 12px; border: 0.5px solid var(--border); border-radius: 8px; margin-bottom: 8px; }
.audit-head { font-size: 0.86rem; }
.audit-time { font-size: 0.74rem; color: var(--text-muted); margin-top: 3px; }


/* ═══ 任务模块（第二十六轮）═══ */
.task-badge {
  position: absolute; top: 4px; right: 8px; min-width: 17px; height: 17px; line-height: 17px;
  border-radius: 9px; background: #e24b4a; color: #fff; font-size: 0.68rem; font-weight: 600;
  text-align: center; padding: 0 4px; z-index: 2;
}
.sn-item, .bn-item { position: relative; }
.task-tab-on { border-color: var(--accent, #D4B36A) !important; color: var(--accent, #D4B36A) !important; }
.task-st {
  display: inline-block; padding: 2px 8px; border-radius: 9px; font-size: 0.7rem; font-weight: 600;
  line-height: 1.5; vertical-align: middle; white-space: nowrap;
}
.task-st-run { color: #4a9edd; background: rgba(74,158,221,0.12); border: 0.5px solid rgba(74,158,221,0.4); }
.task-st-ok { color: #2a9d5c; background: rgba(42,157,92,0.12); border: 0.5px solid rgba(42,157,92,0.35); }
.task-st-bad { color: #e24b4a; background: rgba(226,75,74,0.12); border: 0.5px solid rgba(226,75,74,0.4); }
.task-st-pending { color: #e09a3c; background: rgba(224,154,60,0.12); border: 0.5px solid rgba(224,154,60,0.4); }
.task-due-red { color: #e24b4a !important; font-weight: 600; }
.task-due-amber { color: #e09a3c !important; font-weight: 600; }
.task-node { border: 0.5px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.task-node-cur { border-color: rgba(74,158,221,0.5); background: rgba(74,158,221,0.06); }
.task-node-head { font-size: 0.92rem; font-weight: 600; }
.task-node-meta { font-size: 0.76rem; color: var(--text-muted); margin-top: 4px; }
.task-node-note { font-size: 0.84rem; margin-top: 6px; }
.task-node-ops { margin-top: 10px; }
.task-inherit { font-size: 0.72rem; color: var(--text-muted); font-weight: 400; }
.task-ev-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.task-ev-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 0.5px solid var(--border); cursor: pointer; }
.task-ev-wrap { position: relative; display: inline-block; }
.task-ev-wrap .photo-del { position: absolute; top: -6px; right: -6px; }
.task-banner { border: 0.5px solid rgba(224,154,60,0.5); background: rgba(224,154,60,0.08); }
.task-ast-panel { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 6px 0; }
.task-ast-item { font-size: 0.86rem; display: inline-flex; align-items: center; gap: 5px; }
.task-kpi-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.task-kpi-table th, .task-kpi-table td { padding: 6px 8px; border-bottom: 0.5px solid var(--border); text-align: left; }
.task-kpi-table th { color: var(--text-muted); font-weight: 500; font-size: 0.78rem; }
.f-label { display: block; font-size: 0.82rem; color: var(--text-muted); margin: 10px 0 5px; }
.f-hint { font-size: 0.78rem; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }


/* ═══ 任务模块美化（第二十七轮：卡片状态条/头卡/时间线/组合框）═══ */
/* Tab 栏：胶囊容器 */
#taskTabsBar {
  background: var(--input-bg); border: 1px solid var(--input-border);
  border-radius: 22px; padding: 4px !important; margin: 0 16px 10px;
  display: flex; gap: 4px !important; flex-wrap: nowrap !important; overflow-x: auto;
}
#taskTabsBar .btn-outline {
  border: none; border-radius: 18px; padding: 5px 14px; font-size: 0.8rem;
  white-space: nowrap; flex: 1; min-width: fit-content;
}
#taskTabsBar .task-tab-on {
  background: var(--primary) !important; color: #fff !important;
  border: none !important; box-shadow: 0 2px 6px rgba(11,31,58,0.25);
}
/* 任务卡片：左侧状态色条 */
.task-card { position: relative; padding-left: 18px; }
.task-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  border-radius: 10px 0 0 10px; background: #4a9edd;
}
.task-card-active::before { background: #4a9edd; }
.task-card-achieved::before { background: #2a9d5c; }
.task-card-failed::before { background: #e24b4a; }
.task-card-event { color: var(--primary); font-size: 0.8rem; }
.task-card .cust-card-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* 详情头卡：藏青渐变 */
.task-head {
  background: linear-gradient(135deg, #14335e 0%, #0b1f3a 100%) !important;
  border: 1px solid rgba(212,179,106,0.25) !important; color: #fff;
}
.task-head .cust-card-sub, .task-head .cust-card-sub a { color: rgba(255,255,255,0.75); }
.task-head .cust-card-sub a { text-decoration: underline; text-underline-offset: 2px; }
.task-head-no { font-size: 1.05rem; font-weight: 700; color: var(--gold, #d4b36a); letter-spacing: 0.5px; }
.task-head-badges { margin: 6px 0; display: flex; gap: 6px; }
.task-head-content { font-size: 0.92rem; font-weight: 600; margin-bottom: 8px; }
/* 节点时间线：竖线串联 */
.task-timeline { position: relative; padding-left: 16px; }
.task-timeline::before {
  content: ''; position: absolute; left: 3px; top: 14px; bottom: 14px; width: 2px;
  background: var(--border); border-radius: 1px;
}
.task-node { position: relative; background: var(--input-bg); }
.task-node::before {
  content: ''; position: absolute; left: -17px; top: 14px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--border); border: 2px solid var(--card);
}
.task-node-done::before { background: #2a9d5c; }
.task-node-cur { border-color: rgba(74,158,221,0.6) !important; background: rgba(74,158,221,0.08) !important; box-shadow: 0 2px 8px rgba(74,158,221,0.15); }
.task-node-cur::before { background: #4a9edd; box-shadow: 0 0 0 3px rgba(74,158,221,0.25); }
/* 操作区按钮布局 */
.task-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.task-actions .btn-outline, .task-actions .btn-danger, .task-actions .btn-primary { flex: 1 1 calc(50% - 8px); text-align: center; }
@media (min-width: 1024px) { .task-actions .btn-outline, .task-actions .btn-danger, .task-actions .btn-primary { flex: 0 1 auto; } }
/* 客户模糊搜索组合框 */
.tf-cust-results {
  border: 1px solid var(--input-border); border-radius: 8px; margin-top: 4px;
  background: var(--card); max-height: 220px; overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.tf-cust-results:empty { display: none; }
.tf-cust-item {
  padding: 9px 12px; cursor: pointer; border-bottom: 0.5px solid var(--border);
  display: flex; align-items: center; gap: 8px;
}
.tf-cust-item:last-child { border-bottom: none; }
.tf-cust-item:hover, .tf-cust-item:active { background: var(--card-hover); }
.tf-cust-name { font-weight: 600; font-size: 0.86rem; }
.tf-cust-sub { font-size: 0.74rem; color: var(--text-muted); margin-top: 1px; }
.tf-cust-selected { cursor: default; background: var(--input-bg); }
.tf-cust-selected .tf-cust-sub { color: var(--primary); }
.tf-cust-empty { padding: 10px 12px; color: var(--text-muted); font-size: 0.84rem; }
/* 任务主页 KPI 卡 */
.task-kpi-table th { border-bottom: 1px solid var(--border); }
/* 详情页信息行内链接 */
.task-head a, .form-section a { color: var(--primary); }


/* ═══ 任务详情页 v2 全面美化 + 相关任务标签（第二十八轮）═══ */
/* ── Hero 头卡 ── */
.td-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, #17396b 0%, #0d2447 55%, #0b1f3a 100%);
  border: 1px solid rgba(212,179,106,0.28); border-radius: 14px;
  padding: 18px 18px 14px; margin: 0 16px 14px; color: #fff;
  box-shadow: 0 6px 20px rgba(11,31,58,0.35);
}
.td-hero::after {
  content: ''; position: absolute; right: -60px; top: -80px; width: 220px; height: 220px;
  border-radius: 50%; background: radial-gradient(circle, rgba(212,179,106,0.14) 0%, transparent 70%);
  pointer-events: none;
}
.td-hero-top { display: flex; align-items: flex-start; gap: 12px; }
.td-hero-icon {
  flex: 0 0 46px; width: 46px; height: 46px; border-radius: 12px;
  background: rgba(212,179,106,0.14); border: 1px solid rgba(212,179,106,0.4);
  display: flex; align-items: center; justify-content: center; color: #d4b36a;
}
.td-hero-icon svg { width: 26px; height: 26px; }
.td-hero-headline { flex: 1; min-width: 0; }
.td-hero-no { font-size: 0.82rem; font-weight: 700; color: #d4b36a; letter-spacing: 1px; }
.td-hero-title { font-size: 1.02rem; font-weight: 700; margin-top: 3px; line-height: 1.4; word-break: break-all; }
.td-hero-pills { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; flex: 0 0 auto; }
.td-pill {
  display: inline-block; padding: 3px 11px; border-radius: 11px; font-size: 0.72rem; font-weight: 700;
  white-space: nowrap;
}
.td-pill-run { background: rgba(74,158,221,0.22); color: #8fc4ee; border: 1px solid rgba(74,158,221,0.55); }
.td-pill-ok { background: rgba(42,157,92,0.22); color: #6fd3a0; border: 1px solid rgba(42,157,92,0.55); }
.td-pill-bad { background: rgba(226,75,74,0.22); color: #f09392; border: 1px solid rgba(226,75,74,0.55); }
.td-pill-pending { background: rgba(224,154,60,0.22); color: #f0c37f; border: 1px solid rgba(224,154,60,0.55); }
/* ── 进度条 ── */
.td-progress { margin-top: 14px; }
.td-progress-track {
  height: 6px; border-radius: 3px; background: rgba(255,255,255,0.12); overflow: hidden;
}
.td-progress-fill { height: 100%; border-radius: 3px; transition: width 0.4s ease; }
.td-pf-run { background: linear-gradient(90deg, #4a9edd, #7cc0f5); }
.td-pf-ok { background: linear-gradient(90deg, #2a9d5c, #5ed295); }
.td-pf-bad { background: linear-gradient(90deg, #e24b4a, #f08080); }
.td-progress-text { font-size: 0.74rem; color: rgba(255,255,255,0.65); margin-top: 5px; }
/* ── 元信息网格 ── */
.td-meta-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 14px;
}
@media (min-width: 1024px) { .td-meta-grid { grid-template-columns: repeat(3, 1fr); } }
.td-meta-item {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 9px; padding: 7px 10px; min-width: 0;
}
.td-meta-label { font-size: 0.68rem; color: rgba(255,255,255,0.5); margin-bottom: 2px; }
.td-meta-val { font-size: 0.84rem; font-weight: 600; color: #fff; word-break: break-all; }
.td-meta-val a { color: #9ec9ec; text-decoration: underline; text-underline-offset: 2px; }
.td-meta-alert { border-color: rgba(226,75,74,0.55); background: rgba(226,75,74,0.12); }
.td-meta-alert .td-meta-val { color: #f09392; }
.td-hero-warn {
  margin-top: 10px; padding: 7px 10px; border-radius: 8px; font-size: 0.8rem;
  background: rgba(226,75,74,0.12); border: 1px solid rgba(226,75,74,0.4); color: #f0a3a2;
}
.td-hero-info { background: rgba(74,158,221,0.12); border-color: rgba(74,158,221,0.4); color: #9ec9ec; }
.td-hero-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.td-link-chip {
  padding: 4px 12px; border-radius: 12px; font-size: 0.76rem; cursor: pointer;
  background: rgba(212,179,106,0.12); border: 1px solid rgba(212,179,106,0.45); color: #e3c98c;
}
.td-link-chip:active { background: rgba(212,179,106,0.25); }
/* ── 节点时间线 v2 ── */
.td-sec { margin: 0 16px 14px; }
.td-timeline { padding: 4px 2px; }
.td-node { display: flex; gap: 12px; }
.td-node-rail { display: flex; flex-direction: column; align-items: center; flex: 0 0 26px; }
.td-node-dot {
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 700; flex: 0 0 26px;
  background: var(--input-bg); border: 2px solid var(--border); color: var(--text-muted);
}
.td-node-dot svg { width: 14px; height: 14px; }
.td-node-done .td-node-dot { background: #2a9d5c; border-color: #2a9d5c; color: #fff; }
.td-node-cur .td-node-dot {
  background: #4a9edd; border-color: #4a9edd; color: #fff;
  box-shadow: 0 0 0 4px rgba(74,158,221,0.22);
}
.td-node-line { flex: 1; width: 2px; min-height: 12px; background: var(--border); margin: 3px 0; }
.td-node-done .td-node-line { background: rgba(42,157,92,0.45); }
.td-node-card {
  flex: 1; min-width: 0; margin-bottom: 12px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 11px; background: var(--input-bg);
}
.td-node-done .td-node-card { border-color: rgba(42,157,92,0.35); background: rgba(42,157,92,0.05); }
.td-node-cur .td-node-card {
  border-color: rgba(74,158,221,0.55); background: rgba(74,158,221,0.07);
  box-shadow: 0 3px 10px rgba(74,158,221,0.14);
}
.td-node-todo .td-node-card { opacity: 0.62; }
.td-node-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.td-node-name { font-size: 0.92rem; font-weight: 700; }
.td-curtag {
  font-size: 0.68rem; font-weight: 700; padding: 2px 9px; border-radius: 9px;
  background: rgba(74,158,221,0.18); color: #4a9edd; border: 1px solid rgba(74,158,221,0.45);
}
/* ── 当前节点操作区 ── */
.td-hint {
  font-size: 0.78rem; color: var(--text-muted); line-height: 1.5;
  background: rgba(212,179,106,0.08); border-left: 3px solid rgba(212,179,106,0.5);
  padding: 6px 10px; border-radius: 0 7px 7px 0; margin-bottom: 10px;
}
.td-uploadzone {
  border: 1.5px dashed rgba(74,158,221,0.55); border-radius: 10px;
  padding: 14px 10px; text-align: center; font-size: 0.84rem; color: #4a9edd;
  background: rgba(74,158,221,0.05); cursor: pointer; margin-bottom: 10px;
}
.td-uploadzone:active { background: rgba(74,158,221,0.14); }
.td-note {
  width: 100%; border: 1px solid var(--input-border); border-radius: 9px;
  background: var(--card); color: var(--text); padding: 9px 11px; font-size: 0.86rem;
  resize: vertical; font-family: inherit; box-sizing: border-box;
}
.td-submit { width: 100%; margin-top: 10px; padding: 10px; font-size: 0.9rem; border-radius: 10px; }
.td-pending-bar {
  margin-top: 8px; padding: 8px 11px; border-radius: 8px; font-size: 0.82rem;
  background: rgba(224,154,60,0.1); border: 1px solid rgba(224,154,60,0.4); color: #e09a3c;
}
.td-approve-row { display: flex; gap: 8px; margin-top: 10px; }
.td-approve-row .btn-primary, .td-approve-row .btn-outline { flex: 1; }
/* ── 操作区网格 ── */
.td-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 4px 0 6px; }
@media (min-width: 1024px) { .td-actions { grid-template-columns: repeat(4, 1fr); } }
.td-actions .btn-outline, .td-actions .btn-danger, .td-actions .btn-primary { text-align: center; }
/* ── 相关任务标签（客户/事件详情页）── */
.rel-task-wrap { padding: 6px 12px 12px; display: flex; flex-direction: column; gap: 7px; }
.rel-task-chip {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 10px; background: var(--input-bg);
  transition: border-color 0.15s ease;
}
.rel-task-chip:hover, .rel-task-chip:active { border-color: var(--primary); }
.rel-task-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; }
.rel-dot-active { background: #4a9edd; box-shadow: 0 0 0 3px rgba(74,158,221,0.2); }
.rel-dot-achieved { background: #2a9d5c; }
.rel-dot-failed { background: #e24b4a; }
.rel-task-main { flex: 1; min-width: 0; }
.rel-task-line1 { display: flex; align-items: center; gap: 7px; }
.rel-task-no { font-size: 0.8rem; font-weight: 700; color: var(--primary); letter-spacing: 0.3px; }
.rel-task-line2 {
  font-size: 0.8rem; color: var(--text-muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rel-task-node { color: #4a9edd; }
.rel-task-arrow { color: var(--text-muted); font-size: 1.1rem; flex: 0 0 auto; }


/* ═══ 新建任务表单全面美化（第二十九轮：Hero头卡/SVG分区/胶囊多选/图标输入框）═══ */
/* ── Hero 头卡（与任务详情 td-hero 同族设计语言）── */
.tf-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, #17396b 0%, #0d2447 55%, #0b1f3a 100%);
  border: 1px solid rgba(212,179,106,0.28); border-radius: 14px;
  padding: 16px 18px; margin: 0 16px 14px; color: #fff;
  display: flex; align-items: center; gap: 13px;
  box-shadow: 0 6px 20px rgba(11,31,58,0.35);
}
.tf-hero::after {
  content: ''; position: absolute; right: -60px; top: -80px; width: 220px; height: 220px;
  border-radius: 50%; background: radial-gradient(circle, rgba(212,179,106,0.14) 0%, transparent 70%);
  pointer-events: none;
}
.tf-hero-icon {
  flex: 0 0 46px; width: 46px; height: 46px; border-radius: 12px;
  background: rgba(212,179,106,0.14); border: 1px solid rgba(212,179,106,0.4);
  display: flex; align-items: center; justify-content: center; color: #d4b36a;
}
.tf-hero-icon svg { width: 25px; height: 25px; }
.tf-hero-text { flex: 1; min-width: 0; position: relative; z-index: 1; }
.tf-hero-title { font-size: 1.05rem; font-weight: 700; letter-spacing: 0.3px; }
.tf-hero-sub { font-size: 0.76rem; color: rgba(255,255,255,0.66); margin-top: 4px; line-height: 1.55; }
/* ── 分区卡片与分区头 ── */
.tf-sec { padding-bottom: 14px; }
.tf-sec-head {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 14px 4px;
}
.tf-sec-icon {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: 8px;
  background: rgba(212,179,106,0.12); border: 1px solid rgba(212,179,106,0.38);
  color: var(--gold, #d4b36a); display: flex; align-items: center; justify-content: center;
}
.tf-sec-icon svg { width: 16px; height: 16px; }
.tf-sec-title { font-size: 0.9rem; font-weight: 700; letter-spacing: 0.4px; }
.tf-sec-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); }
.tf-sec .f-label { margin: 12px 14px 5px; }
.tf-sec input[type="text"], .tf-sec select {
  width: calc(100% - 28px); margin-left: 14px; margin-right: 14px; box-sizing: border-box;
  background: var(--input-bg); border: 1px solid var(--input-border); color: var(--text);
  padding: 9px 12px; border-radius: 9px; font-size: 0.9rem;
}
.tf-sec input[type="text"]:focus, .tf-sec select:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,123,198,0.18);
}
.tf-req { color: #e2795b; font-weight: 700; }
/* ── 图标内嵌输入框 ── */
.tf-input-icon { position: relative; margin: 0 14px; }
.tf-input-icon input, .tf-input-icon select { width: 100% !important; margin: 0 !important; padding-left: 38px !important; box-sizing: border-box; }
.tf-input-ic {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none; display: flex; align-items: center;
}
.tf-input-ic svg { width: 16px; height: 16px; }
.tf-input-icon select.tf-has-ic {
  appearance: none; -webkit-appearance: none; padding-right: 34px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a9bb0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
}
/* 模糊搜索结果与图标输入框的层级配合 */
.tf-sec .tf-cust-results { margin: 4px 14px 0; }
/* ── 锁定锚定展示条 ── */
.tf-locked {
  display: flex; align-items: center; gap: 9px; margin: 0 14px;
  background: var(--input-bg); border: 1px solid var(--input-border);
  border-left: 3px solid var(--gold, #d4b36a); border-radius: 10px; padding: 10px 12px;
}
.tf-locked-icon { color: var(--gold, #d4b36a); display: flex; align-items: center; flex: 0 0 auto; }
.tf-locked-icon svg { width: 17px; height: 17px; }
.tf-locked-name { font-weight: 600; font-size: 0.9rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-locked-tag {
  flex: 0 0 auto; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.5px;
  color: var(--gold, #d4b36a); border: 1px solid rgba(212,179,106,0.45);
  border-radius: 10px; padding: 2px 8px; background: rgba(212,179,106,0.08);
}
/* ── 辅助人员胶囊多选 ── */
.tf-sec .task-ast-panel { padding: 2px 14px 0; gap: 8px; }
.tf-ast-chip { display: inline-flex; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tf-ast-chip input { display: none; }
.tf-ast-chip span {
  font-size: 0.8rem; padding: 5px 13px; border-radius: 16px;
  border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text-muted);
  transition: all 0.15s ease; user-select: none;
}
.tf-ast-chip input:checked + span {
  background: var(--primary); border-color: var(--primary); color: #fff;
  box-shadow: 0 2px 6px rgba(11,31,58,0.25);
}
.tf-ast-chip:active span { transform: scale(0.96); }
/* ── 提示卡 ── */
.tf-hint-card {
  margin: 8px 14px 0; padding: 9px 12px; border-radius: 9px;
  background: var(--input-bg); border: 1px dashed var(--input-border);
}
/* ── 操作区 ── */
.tf-actions { display: flex; gap: 10px; padding: 6px 16px 16px; }
.tf-actions .tf-btn-create {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.5px;
  border-radius: 12px; box-shadow: 0 4px 12px rgba(11,31,58,0.3);
}
.tf-btn-create svg { width: 18px; height: 18px; }
.tf-actions .btn-outline { flex: 0 0 auto; border-radius: 12px; padding: 12px 20px; }
/* ── PC 端双列网格 ── */
@media (min-width: 1024px) {
  #page-task-form .form-scroll { max-width: 1040px; margin: 0 auto; }
  .tf-hero { margin: 0 16px 16px; }
  .tf-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .tf-grid .form-section { margin: 0 8px 14px; }
  .tf-grid .form-section:nth-child(odd) { margin-left: 16px; }
  .tf-grid .form-section:nth-child(even) { margin-right: 16px; }
}
@media (max-width: 1023px) {
  .tf-grid .form-section { margin: 0 16px 12px; }
}

/* ═══ V3.7 第三十三轮：客户国家卡片网格 + 下钻（方案A） ═══ */
.cust-country-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.cust-country-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 10px 14px; cursor: pointer; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  transition: background .15s, box-shadow .15s, transform .15s;
}
.cust-country-card:hover, .cust-country-card:active {
  background: var(--card-hover); box-shadow: var(--shadow); transform: translateY(-1px);
}
.cust-country-flag { font-size: 2rem; line-height: 1.25; }
.cust-country-name { font-weight: 700; font-size: 0.92rem; color: var(--text); word-break: break-word; }
.cust-country-count { font-size: 1.5rem; font-weight: 800; color: var(--primary); line-height: 1.25; }
.cust-country-count span { font-size: 0.72rem; font-weight: 400; color: var(--text-muted); margin-left: 4px; }
.cust-country-sub { display: flex; gap: 10px; font-size: 0.78rem; color: var(--text-muted); min-height: 1.1em; }
.cust-crumb { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cust-crumb-back {
  background: var(--bg3); color: var(--text); border: 1px solid var(--border);
  padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 0.85rem; white-space: nowrap;
}
.cust-crumb-back:hover { background: var(--card-hover); }
.cust-crumb-current { font-weight: 700; color: var(--text); font-size: 0.95rem; }
.cust-crumb-current b { color: var(--primary); margin-left: 2px; }

/* ── 富文本事件备注编辑器（第53轮） ── */
.rt-wrap { border: 1px solid var(--border); border-radius: 8px; background: var(--card, #fff); overflow: hidden; }
.rt-toolbar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 6px 8px; border-bottom: 1px solid var(--border); background: var(--bg, #f8fafc); }
.rt-btn { min-width: 30px; height: 28px; padding: 0 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--card, #fff); cursor: pointer; font-size: 0.82rem; color: var(--text); display: inline-flex; align-items: center; justify-content: center; }
.rt-btn:hover { background: var(--bg, #eef2f7); border-color: var(--primary); }
.rt-btn:active { background: var(--border); }
.rt-btn.rt-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.rt-sel { height: 28px; border: 1px solid var(--border); border-radius: 6px; font-size: 0.78rem; background: var(--card, #fff); color: var(--text); max-width: 108px; padding: 0 4px; }
.rt-sel option { background: var(--card, #fff); color: var(--text); }
.rt-sel-size { max-width: 64px; }
.rt-sep { width: 1px; height: 18px; background: var(--border); margin: 0 2px; flex: 0 0 auto; }
.rt-color { display: inline-flex; align-items: center; gap: 3px; height: 28px; padding: 0 5px; border: 1px solid var(--border); border-radius: 6px; background: var(--card, #fff); font-size: 0.8rem; font-weight: 700; color: var(--text); cursor: pointer; }
.rt-color:hover { background: var(--bg, #eef2f7); }
.rt-color input[type="color"] { width: 20px; height: 20px; padding: 0; border: none; background: none; cursor: pointer; }
.rt-editor { min-height: 96px; max-height: none; overflow-y: auto; padding: 10px 12px; font-size: 0.88rem; line-height: 1.6; outline: none; word-break: break-word; resize: vertical; }
.rt-editor:empty::before { content: attr(data-ph); color: var(--text-muted); pointer-events: none; }
.rt-editor ul, .rt-editor ol { padding-left: 22px; margin: 4px 0; }
.rt-resize { height: 12px; cursor: ns-resize; border-top: 1px solid var(--border); background: var(--bg, #f8fafc); display: flex; align-items: center; justify-content: center; touch-action: none; user-select: none; }
.rt-resize::before { content: ''; width: 44px; height: 4px; border-radius: 2px; background: var(--text-muted); opacity: 0.55; }
.rt-resize:hover::before { opacity: 1; background: var(--primary); }
.evt-notes-rich ul, .evt-notes-rich ol { padding-left: 22px; margin: 4px 0; }
.notes-box ul, .notes-box ol { padding-left: 20px; margin: 4px 0; }

/* 【第五十二轮】客户国家列表 + A-Z 索引条（替代原国家卡片网格） */
.cust-az-wrap { position: relative; }
.cust-country-list { display: flex; flex-direction: column; gap: 6px; padding-right: 24px; }
.cust-az-letter { font-size: 0.78rem; font-weight: 700; color: var(--primary); margin: 12px 2px 2px; letter-spacing: 1px; }
.cust-country-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  cursor: pointer; transition: background 0.15s;
}
.cust-country-row:hover, .cust-country-row:active { background: var(--card-hover); }
.cust-country-row-flag { font-size: 1.2rem; flex-shrink: 0; }
.cust-country-row-name { font-weight: 600; color: var(--text); }
.cust-country-row-sub { margin-left: auto; font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }
.cust-country-row-sub b { color: var(--primary); }
.cust-country-row-chev { color: var(--text-muted); font-size: 1.1rem; flex-shrink: 0; }
.cust-az-bar {
  position: fixed; right: 4px; top: 50%; transform: translateY(-50%); z-index: 60;
  display: flex; flex-direction: column; align-items: center;
  padding: 4px 2px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; opacity: 0.94;
}
.cust-az-item { font-size: 0.62rem; font-weight: 700; color: var(--primary); padding: 1.5px 6px; cursor: pointer; user-select: none; }
.cust-az-item.disabled { color: var(--text-muted); opacity: 0.35; cursor: default; }
@media (min-width: 768px) {
  .cust-country-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}
@media (min-width: 1024px) {
  .cust-country-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .cust-country-card { padding: 20px 14px 16px; }
}
@media (min-width: 1600px) {
  .cust-country-grid { grid-template-columns: repeat(6, 1fr); }
}

/* ═══ V3.7 第三十四轮：报价状态Tab+平铺 / 业务模块美化 ═══ */
/* 报价状态 Tab 管道（横向滚动，移动端友好） */
.quote-tabs {
  display: flex; gap: 8px; padding: 8px 14px 10px; overflow-x: auto;
  background: var(--bg1); border-bottom: 1px solid var(--border);
  scrollbar-width: none;
}
.quote-tabs::-webkit-scrollbar { display: none; }
.quote-tab {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg3); color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: 16px;
  padding: 5px 12px; font-size: 0.82rem; cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.quote-tab:hover { background: var(--card-hover); }
.quote-tab.active {
  background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600;
}
.quote-tab-count {
  background: rgba(127,127,127,0.18); border-radius: 10px;
  padding: 0 7px; font-size: 0.75rem; font-weight: 700; line-height: 1.5;
}
.quote-tab.active .quote-tab-count { background: rgba(255,255,255,0.25); color: #fff; }

/* 平铺报价卡：左侧状态色条 */
.quote-card-flat { border-left: 3px solid transparent; }
.quote-card-flat.quote-status-draft     { border-left-color: #9e9e9e; }
.quote-card-flat.quote-status-approved  { border-left-color: #6f42c1; }
.quote-card-flat.quote-status-sent      { border-left-color: #2f81f7; }
.quote-card-flat.quote-status-confirmed { border-left-color: #28a745; }
.quote-card-flat.quote-status-ordered   { border-left-color: #d4b36a; }
.quote-card-flat.quote-status-expired   { border-left-color: #dc3545; }
.quote-card-flat.quote-status-cancelled { border-left-color: #6c757d; }
.quote-status-badge.quote-status-approved { background: #e2d9f3; color: #5a32a3; }

/* 业务页：进行中任务金徽标（五类卡/合集卡/事件卡共用） */
.evt-task-badge {
  display: inline-flex; align-items: center; gap: 3px;
  background: rgba(212,179,106,0.16); color: var(--primary);
  border: 1px solid rgba(212,179,106,0.45);
  border-radius: 10px; padding: 0 7px; margin-left: 8px;
  font-size: 0.72rem; font-weight: 700; line-height: 1.6; vertical-align: 0.08em;
}
.evt-task-badge svg { width: 11px; height: 11px; }
[data-theme="light"] .evt-task-badge { color: #8a6d2f; background: rgba(212,179,106,0.22); }

/* 业务页五类卡：右端导引箭头 */
.evt-cat-chevron {
  flex-shrink: 0; align-self: center;
  color: var(--text-muted); font-size: 1.3rem; font-weight: 300; padding-right: 2px;
}
.evt-cat-card { transition: background .15s, box-shadow .15s, transform .15s; }
.evt-cat-card:hover { background: var(--card-hover); box-shadow: var(--shadow); transform: translateY(-1px); }

/* 业务分类层面包屑：操作按钮右置 */
.biz-crumb { flex-wrap: wrap; row-gap: 8px; }
.biz-crumb-actions { margin-left: auto; display: flex; gap: 8px; }
.biz-crumb .cust-crumb-current { display: inline-flex; align-items: center; gap: 6px; }
.biz-crumb .cust-crumb-current svg { width: 1.1em; height: 1.1em; }

/* PC 端报价平铺双列 */
@media (min-width: 1024px) {
  #quoteList .quote-card-flat { max-width: none; }
  #quoteList.quote-grid-pc { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 14px; }
  .quote-tabs { padding-left: 20px; padding-right: 20px; }
}

/* ═══ V3.8 线索模块 ═══ */
.lead-funnel { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 16px 6px; }
.lead-tab { border: 0.5px solid var(--border); background: var(--card); color: var(--text); border-radius: 999px; padding: 5px 12px; font-size: 0.8rem; cursor: pointer; }
.lead-tab b { color: var(--primary); margin-left: 2px; }
.lead-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.lead-tab.active b { color: #fff; }
.lead-search { padding: 4px 16px 10px; }
.lead-empty { text-align: center; color: var(--text-muted); padding: 48px 20px; }
.lead-empty-sub { font-size: 0.82rem; margin-top: 8px; }
.lead-st { display: inline-block; font-size: 0.72rem; font-weight: 600; border-radius: 999px; padding: 1px 8px; }
.lead-st-new { background: rgba(59,130,246,.14); color: #3b82f6; }
.lead-st-following { background: rgba(245,158,11,.15); color: #d97706; }
.lead-st-responded { background: rgba(16,185,129,.14); color: #059669; }
.lead-st-converted { background: rgba(139,92,246,.14); color: #7c3aed; }
.lead-st-invalid { background: rgba(107,114,128,.16); color: #6b7280; }
.lead-heat { display: inline-block; font-size: 0.72rem; font-weight: 700; border-radius: 6px; padding: 0 6px; margin-left: 6px; }
.lead-heat-A { background: rgba(220,38,38,.16); color: #dc2626; }
.lead-heat-B { background: rgba(245,158,11,.15); color: #d97706; }
.lead-heat-C { background: rgba(59,130,246,.13); color: #3b82f6; }
.lead-hero { padding: 18px 16px 10px; }
.lead-hero-title { font-size: 1.25rem; font-weight: 700; }
.lead-hero-sub { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.lead-hero-no { font-size: 0.82rem; color: var(--text-muted); }
.lead-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 6px 16px; }
.lead-hint { margin: 4px 16px 8px; padding: 10px 12px; border-radius: 10px; background: rgba(16,185,129,.1); border: 0.5px solid rgba(16,185,129,.35); font-size: 0.84rem; line-height: 1.5; }
.lead-btn-danger { color: #dc2626; border-color: rgba(220,38,38,.4); }
.tf-locked-lead { background: rgba(139,92,246,.16); color: #7c3aed; }
[data-theme="dark"] .lead-st-new { background: rgba(59,130,246,.25); color: #93c5fd; }
[data-theme="dark"] .lead-st-following { background: rgba(245,158,11,.25); color: #fcd34d; }
[data-theme="dark"] .lead-st-responded { background: rgba(16,185,129,.25); color: #6ee7b7; }
[data-theme="dark"] .lead-st-converted { background: rgba(139,92,246,.28); color: #c4b5fd; }
[data-theme="dark"] .lead-st-invalid { background: rgba(156,163,175,.25); color: #9ca3af; }
[data-theme="dark"] .lead-heat-A { background: rgba(220,38,38,.3); color: #fca5a5; }
[data-theme="dark"] .lead-heat-B { background: rgba(245,158,11,.28); color: #fcd34d; }
[data-theme="dark"] .lead-heat-C { background: rgba(59,130,246,.25); color: #93c5fd; }
[data-theme="dark"] .lead-hint { background: rgba(16,185,129,.16); color: #a7f3d0; }

/* ═══ 第56轮：线索表单美化 / 报价表单列宽 / 任务卡片可视化 ═══ */
/* ① 线索表单：分节上下留白 + 内容内边距（修复标题与输入框贴边） */
.lead-form-sec { padding: 14px 0 6px; }
.lead-form-sec .detail-section-title { padding-bottom: 10px; }
.lead-form-pad { padding: 2px 16px 14px; }
.lead-form-pad .f-label:first-child { margin-top: 2px; }
.lead-form-pad .form-input { margin-bottom: 2px; }
.lead-form-pad .rt-toolbar { margin-top: 4px; }
.lead-notes-view { padding: 12px 16px; font-size: 0.88rem; line-height: 1.6; word-break: break-word; }
.lead-notes-view p, .lead-notes-view div { margin: 0 0 4px; }
.lead-notes-view ul, .lead-notes-view ol { margin: 4px 0; padding-left: 22px; }

/* ⑤ 报价表单：信息/条款网格列宽修复（"负责业务员"不再一字宽竖排） */
.quote-info-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.quote-info-grid .form-field { min-width: 0; }
.quote-info-grid .form-input { width: 100%; min-width: 0; text-overflow: ellipsis; }
.quote-terms-grid .form-field { min-width: 0; }
@media (max-width: 640px) {
  .quote-info-grid { grid-template-columns: 1fr 1fr; }
  .quote-info-grid .form-field.quote-field-sp { grid-column: 1 / -1; }
  .quote-terms-grid { grid-template-columns: 1fr; }
}

/* ⑥ 任务卡片：锚定对象行 + 信息芯片 */
.task-anchor-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.task-cust-hl { color: var(--primary); font-weight: 700; font-size: 0.92rem; }
.task-chip { display: inline-block; font-size: 0.72rem; border-radius: 6px; padding: 1px 7px; background: var(--input-bg); border: 0.5px solid var(--border); color: var(--text-secondary); }
.task-chip-star { background: rgba(212,179,106,.18); border-color: rgba(212,179,106,.45); color: #b8912f; font-weight: 600; }
.task-chip-type { background: rgba(47,129,247,.1); border-color: rgba(47,129,247,.3); color: #2f81f7; }
.task-chip-lead { background: rgba(139,92,246,.14); border-color: rgba(139,92,246,.35); color: #7c3aed; font-weight: 600; }
[data-theme="dark"] .task-chip-star { color: #e5cd8f; }
[data-theme="dark"] .task-chip-type { color: #93c5fd; }
[data-theme="dark"] .task-chip-lead { color: #c4b5fd; }

/* ═══ 第57轮 ═══ */
/* ④ PC宽屏：业务五类卡片改水平行排列（此前纵列堆在一个网格单元内） */
@media (min-width: 900px) {
  #groupList .evt-categories { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
  #groupList .evt-categories .evt-cat-card { margin-bottom: 0; }
}

/* ⑥ 任务页筛选栏换行：搜索框独占一行，类型/节点/负责人筛选第二行（此前 flex 不换行，节点筛选被挤出屏外） */
#page-tasks .search-bar { flex-wrap: wrap; }
#page-tasks .search-bar input#taskSearch { flex: 1 1 100%; }
#page-tasks .search-bar .filter-select { flex: 1 1 auto; min-width: 0; }

/* ⑦ 报价卡片 meta 行允许换行（此前 nowrap 挤压"负责业务员"成一字宽竖排） */
.quote-card-meta { flex-wrap: wrap; row-gap: 3px; }
.quote-card-meta span { white-space: nowrap; }

/* ⑨ 任务节点：进展更新模式 */
.td-update-only { display: flex; align-items: flex-start; gap: 7px; font-size: 0.8rem; color: var(--text-secondary); margin: 2px 0 8px; line-height: 1.45; cursor: pointer; }
.td-update-only input { margin-top: 2px; flex-shrink: 0; }
.task-node-entry { padding-top: 6px; }
.task-node-entry + .task-node-entry { border-top: 0.5px dashed var(--border); margin-top: 6px; }
.td-upd-tag { display: inline-block; font-size: 0.68rem; font-weight: 700; border-radius: 5px; padding: 0 6px; background: rgba(47,129,247,.12); border: 0.5px solid rgba(47,129,247,.35); color: #2f81f7; vertical-align: 1px; }
[data-theme="dark"] .td-upd-tag { background: rgba(47,129,247,.25); color: #93c5fd; }

/* ═══════════════════ 第58轮：任务界面浏览体验升级 ═══════════════════ */
/* 类型筛选 chips（图标+数量徽章，横向滑动） */
.task-type-chips { display: flex; gap: 7px; padding: 2px 4px 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.task-type-chips::-webkit-scrollbar { display: none; }
.task-type-chip { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--text-secondary); font-size: 0.8rem; cursor: pointer; transition: all .18s ease; }
.task-type-chip svg { width: 15px; height: 15px; }
.task-type-chip .ttc-num { font-size: 0.7rem; font-weight: 700; min-width: 18px; text-align: center; padding: 1px 5px; border-radius: 999px; background: rgba(128,140,160,.15); color: var(--text-muted); transition: all .18s ease; }
.task-type-chip:active { transform: scale(.95); }
.task-type-chip.on { color: #fff; border-color: transparent; box-shadow: 0 3px 10px rgba(0,0,0,.18); }
.task-type-chip.on .ttc-num { background: rgba(255,255,255,.25); color: #fff; }
.task-type-chip.on.task-type-all { background: linear-gradient(135deg,#5b6b82,#3d4b61); }
.task-type-chip.on.task-type-transaction { background: linear-gradient(135deg,#5aa9e6,#3578b8); }
.task-type-chip.on.task-type-quote { background: linear-gradient(135deg,#d4b36a,#b08d3f); }
.task-type-chip.on.task-type-sample { background: linear-gradient(135deg,#a78bfa,#7c5cd6); }
.task-type-chip.on.task-type-lead { background: linear-gradient(135deg,#4ecf8a,#2ea56a); }
/* 卡片：类型徽章（彩色+图标） */
.task-card-typerow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.task-type-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.7rem; font-weight: 700; border-radius: 6px; padding: 2px 7px; }
.task-type-badge svg { width: 12px; height: 12px; }
.task-type-badge.task-type-transaction { background: rgba(90,169,230,.13); color: #3578b8; border: 0.5px solid rgba(90,169,230,.4); }
.task-type-badge.task-type-quote { background: rgba(212,179,106,.15); color: #9a7a2e; border: 0.5px solid rgba(212,179,106,.45); }
.task-type-badge.task-type-sample { background: rgba(167,139,250,.13); color: #6d4fd0; border: 0.5px solid rgba(167,139,250,.4); }
.task-type-badge.task-type-lead { background: rgba(78,207,138,.13); color: #22855a; border: 0.5px solid rgba(78,207,138,.4); }
[data-theme="dark"] .task-type-badge.task-type-transaction { color: #93c5fd; }
[data-theme="dark"] .task-type-badge.task-type-quote { color: #e8cf9a; }
[data-theme="dark"] .task-type-badge.task-type-sample { color: #c4b5fd; }
[data-theme="dark"] .task-type-badge.task-type-lead { color: #86efac; }
/* 卡片：节点进度点条 */
.task-node-progress { display: inline-flex; align-items: center; gap: 3px; }
.tnp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); transition: background .2s; }
.tnp-dot.tnp-done { background: #4ecf8a; }
.tnp-dot.tnp-cur { background: #d4b36a; box-shadow: 0 0 0 3px rgba(212,179,106,.25); animation: tnpPulse 1.6s ease-in-out infinite; }
@keyframes tnpPulse { 0%,100% { box-shadow: 0 0 0 2px rgba(212,179,106,.35); } 50% { box-shadow: 0 0 0 5px rgba(212,179,106,.12); } }
.tnp-lab { font-size: 0.72rem; color: var(--text-muted); margin-left: 4px; }
/* 卡片入场 stagger 动画 + 待审批呼吸。
   【第60轮】动画限定 .task-list-anim 容器内才播放——此前 .task-card 无条件挂动画，
   进页后 SSE 二次渲染导致动画重复播放两次（且每次同步都重播） */
.task-list-anim .task-card { animation: taskCardIn .28s ease both; }
.task-list-anim .task-card:nth-child(2) { animation-delay: .04s; } .task-list-anim .task-card:nth-child(3) { animation-delay: .08s; }
.task-list-anim .task-card:nth-child(4) { animation-delay: .12s; } .task-list-anim .task-card:nth-child(5) { animation-delay: .16s; }
.task-list-anim .task-card:nth-child(n+6) { animation-delay: .2s; }
@keyframes taskCardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.task-st-pending { animation: pendingBreath 1.8s ease-in-out infinite; }
@keyframes pendingBreath { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
/* 节点操作区：双提交按钮（第58轮替代勾选框） */
.td-submit-row { display: flex; gap: 8px; margin-top: 8px; }
.td-submit-row .td-submit-upd, .td-submit-row .td-submit { flex: 1; padding: 10px 6px; font-size: 0.85rem; border-radius: 10px; }
.td-submit-upd { border: 1.5px dashed rgba(212,179,106,.6) !important; color: #9a7a2e; }
[data-theme="dark"] .td-submit-upd { color: #e8cf9a; }
.td-submit-hint { font-size: 0.72rem; color: var(--text-muted); line-height: 1.5; margin-top: 6px; }

/* ═══ 第六十一轮：首页仪表盘（按 mockup v3.1 落地）═══ */
.home-scroll { padding: 12px 12px 24px; }
.home-wrap { display: flex; flex-direction: column; }
.home-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.home-rail { display: none; }

/* 入场动画（动画闸：仅 .home-anim 容器内播放一次） */
.home-anim .hm-rise { animation: hmRise .38s cubic-bezier(.22,.9,.32,1) both; }
@keyframes hmRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* 顶部：问候 + 我的/团队切换 */
.hm-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 2px 0; }
.hm-hello b { font-size: 1.05rem; color: var(--text); margin-right: 8px; }
.hm-hello span { font-size: 0.78rem; color: var(--text-muted); }
.hm-scope { position: relative; display: flex; background: var(--bg2); border-radius: 99px; padding: 3px; }
.hm-scope-btn { position: relative; z-index: 1; border: none; background: none; padding: 5px 16px; font-size: 0.8rem; font-weight: 600; color: var(--text-muted); cursor: pointer; border-radius: 99px; transition: color .25s; }
.hm-scope-btn.on { color: var(--text); }
.hm-scope-slider { position: absolute; top: 3px; left: 3px; width: calc(50% - 3px); bottom: 3px; background: var(--card); border-radius: 99px; box-shadow: 0 2px 8px rgba(0,0,0,.18); transition: transform .3s cubic-bezier(.3,1.3,.5,1); }

/* KPI 条 */
.hm-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.hm-kpi { background: var(--card); border: 0.5px solid var(--border); border-radius: 14px; padding: 12px 14px; cursor: pointer; transition: transform .2s, box-shadow .2s; position: relative; overflow: hidden; }
.hm-kpi::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--kc); opacity: .85; }
.hm-kpi:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(11,31,58,.12); }
.hm-kpi-ic { width: 26px; height: 26px; border-radius: 8px; background: color-mix(in srgb, var(--kc) 14%, transparent); display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.hm-kpi-ic svg { width: 15px; height: 15px; stroke: var(--kc); }
.hm-kpi-num { font-size: 1.5rem; font-weight: 800; color: var(--text); line-height: 1.1; font-variant-numeric: tabular-nums; }
.hm-kpi-lb { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }

/* 通用卡片 */
.hm-card { background: var(--card); border: 0.5px solid var(--border); border-radius: 14px; padding: 12px 14px; }
.hm-card-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.hm-card-head b { font-size: 0.92rem; color: var(--text); }
.hm-card-head small { font-size: 0.72rem; color: var(--text-muted); }
.hm-card-head a { margin-left: auto; font-size: 0.75rem; color: #9a7a2e; text-decoration: none; }
[data-theme="dark"] .hm-card-head a { color: #e8cf9a; }
.hm-empty { text-align: center; color: var(--text-muted); font-size: 0.8rem; padding: 14px 0; }

/* 即时消息 */
.hm-notif-card { background: var(--card); border: 0.5px solid var(--border); border-radius: 14px; padding: 12px 14px; }
.hm-live { display: inline-flex; align-items: center; gap: 4px; font-size: 0.68rem; color: #7FA08C; font-weight: 700; }
.hm-live i { width: 7px; height: 7px; border-radius: 50%; background: #7FA08C; animation: hmLivePulse 1.6s ease-in-out infinite; }
@keyframes hmLivePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(127,160,140,.5); } 50% { box-shadow: 0 0 0 5px rgba(127,160,140,0); } }
.hm-notif-loading { color: var(--text-muted); font-size: 0.78rem; text-align: center; padding: 10px 0; }
.hm-msg { display: flex; gap: 9px; padding: 7px 8px; border-radius: 10px; cursor: pointer; transition: background .15s; }
.hm-msg:hover { background: var(--card-hover); }
.hm-msg.unread { background: linear-gradient(90deg, rgba(212,179,106,.14), transparent 70%); border-left: 2.5px solid #D4B36A; }
.hm-msg-ic { flex: none; width: 26px; height: 26px; border-radius: 8px; background: color-mix(in srgb, var(--mc) 14%, transparent); display: flex; align-items: center; justify-content: center; }
.hm-msg-ic svg { width: 14px; height: 14px; stroke: var(--mc); }
.hm-msg-body { min-width: 0; flex: 1; }
.hm-msg-body p { margin: 0; font-size: 0.78rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-msg-t { font-size: 0.66rem; color: var(--text-muted); margin-top: 1px; }

/* 临期任务：横向滚动日期卡片（第62轮对齐 mockup v3 .tl——每日期一张竖卡，条目主行客户名+副行节点） */
.hm-tl { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.hm-tl::-webkit-scrollbar { display: none; }
.hm-tl-day { flex: none; width: 132px; background: var(--bg2); border: 0.5px solid var(--border); border-radius: 12px; padding: 8px 9px; transition: transform .18s, box-shadow .18s; }
.hm-tl-day:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(11,31,58,.1); }
.hm-tl-day.od { border-color: rgba(192,91,77,.45); }
.hm-tl-date { display: flex; align-items: center; justify-content: space-between; font-size: 0.74rem; font-weight: 700; color: var(--text); }
.hm-tl-date em { font-style: normal; font-size: 0.64rem; padding: 0 6px; border-radius: 5px; background: rgba(212,179,106,.16); color: #9a7a2e; font-weight: 700; }
[data-theme="dark"] .hm-tl-date em { color: #e8cf9a; }
.hm-tl-day.od .hm-tl-date b { color: #C05B4D; }
.hm-tl-day.od .hm-tl-date em { background: rgba(192,91,77,.14); color: #C05B4D; animation: hmOverdueBreath 1.5s ease-in-out infinite; }
@keyframes hmOverdueBreath { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.hm-tl-it { margin-top: 6px; padding: 5px 7px; border-radius: 8px; background: var(--card); border-left: 2.5px solid var(--tc, #3D5A8F); cursor: pointer; transition: box-shadow .15s; }
.hm-tl-it:hover { box-shadow: 0 3px 10px rgba(11,31,58,.14); }
.hm-tl-it-t { display: block; font-size: 0.72rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-tl-it small { display: block; font-size: 0.62rem; color: var(--text-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 重点客户 */
.hm-custs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.hm-cust { border: 0.5px solid var(--border); border-radius: 10px; padding: 9px 11px; cursor: pointer; transition: transform .18s, box-shadow .18s; }
.hm-cust:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(11,31,58,.1); }
.hm-cust-main { font-size: 0.84rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-cust-sub { font-size: 0.7rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.hm-cust-star { font-size: 0.68rem; color: #B08A3E; margin-top: 3px; }

/* 图表 */
.hm-charts { display: grid; grid-template-columns: 1fr; gap: 12px; }
.hm-funnel { display: flex; flex-direction: column; gap: 7px; }
.hm-fn-row { display: flex; align-items: center; gap: 8px; }
.hm-fn-lb { flex: none; width: 58px; font-size: 0.72rem; color: var(--text-muted); }
.hm-fn-track { flex: 1; height: 14px; background: var(--bg2); border-radius: 99px; overflow: hidden; }
.hm-fn-bar { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--fc), color-mix(in srgb, var(--fc) 70%, #fff)); transition: width .7s cubic-bezier(.22,.9,.32,1); }
.hm-fn-n { flex: none; width: 22px; text-align: right; font-size: 0.78rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
/* 环形图（任务类型分布，第62轮对齐 mockup donut） */
.hm-donut-w { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.hm-donut { width: 76px; height: 76px; border-radius: 50%; flex: none; -webkit-mask: radial-gradient(circle, transparent 54%, #000 55%); mask: radial-gradient(circle, transparent 54%, #000 55%); }
.hm-lg { font-size: 0.7rem; color: var(--text-muted); line-height: 1.9; }
.hm-lg i { display: inline-block; width: 8px; height: 8px; border-radius: 3px; margin-right: 6px; }
/* 未读消息 NEW 标签（对齐 mockup） */
.hm-new { display: inline-block; font-size: 0.58rem; font-weight: 700; color: #9a7a2e; background: rgba(212,179,106,.18); border-radius: 4px; padding: 0 4px; vertical-align: 1px; }
[data-theme="dark"] .hm-new { color: #e8cf9a; }
.hm-bars { display: flex; align-items: flex-end; gap: 8px; height: 110px; padding-top: 6px; }
.hm-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; height: 100%; justify-content: flex-end; }
.hm-bar { width: 100%; max-width: 30px; background: linear-gradient(180deg, #D4B36A, #B08A3E); border-radius: 5px 5px 2px 2px; transition: height .7s cubic-bezier(.22,.9,.32,1); }
.hm-bar.dim { background: linear-gradient(180deg, #C9CFDB, #A9B2C4); }
[data-theme="dark"] .hm-bar.dim { background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.12)); }
.hm-bar-v { font-size: 0.66rem; font-weight: 700; color: #B08A3E; min-height: 14px; line-height: 14px; }
[data-theme="dark"] .hm-bar-v { color: #e8cf9a; }
.hm-bar-lb { font-size: 0.64rem; color: var(--text-muted); }

/* 快捷入口 */
.hm-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hm-q { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 11px 4px; border: 0.5px solid var(--border); border-radius: 12px; background: var(--card); cursor: pointer; transition: transform .18s, box-shadow .18s; }
.hm-q:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(11,31,58,.1); }
.hm-q svg { width: 20px; height: 20px; stroke: var(--qc); }
.hm-q span { font-size: 0.7rem; color: var(--text); }

/* 横屏（≥1024px EXE/网页版）：主区 + 右侧消息栏 */
@media (min-width: 1024px) {
  .home-scroll { padding: 18px 22px 30px; }
  .home-wrap { flex-direction: row; gap: 14px; align-items: flex-start; max-width: 1280px; margin: 0 auto; }
  .home-main { flex: 1; }
  .home-rail { display: block; flex: none; width: 310px; position: sticky; top: 12px; }
  .hm-notif-mobile { display: none; }
  .hm-kpis { grid-template-columns: repeat(4, 1fr); }
  .hm-charts { grid-template-columns: 1fr 1fr; }
  .hm-custs { grid-template-columns: repeat(3, 1fr); }
  .home-rail .hm-notif-card { max-height: calc(100vh - 120px); overflow-y: auto; }
}

/* ═══ 第63轮：自动更新弹窗 + 设置页版本区块 ═══ */
.upd-mask { position: fixed; inset: 0; background: rgba(11,31,58,.5); backdrop-filter: blur(3px); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; animation: updFadeIn .22s ease; }
@keyframes updFadeIn { from { opacity: 0; } to { opacity: 1; } }
.upd-box { background: var(--card); border: 0.5px solid var(--border); border-radius: 16px; padding: 20px 22px; width: 100%; max-width: 380px; box-shadow: 0 18px 50px rgba(11,31,58,.25); animation: updPop .28s cubic-bezier(.3,1.3,.5,1); }
@keyframes updPop { from { opacity: 0; transform: scale(.92) translateY(10px); } to { opacity: 1; transform: none; } }
.upd-head { display: flex; align-items: center; gap: 9px; color: var(--text); font-size: 1.02rem; }
.upd-head svg { width: 22px; height: 22px; stroke: #B08A3E; }
.upd-ver { margin-top: 10px; font-size: 1.3rem; font-weight: 800; color: #B08A3E; display: flex; align-items: baseline; gap: 10px; }
.upd-ver span { font-size: 0.72rem; font-weight: 500; color: var(--text-muted); }
.upd-date { font-size: 0.74rem; color: var(--text-muted); margin-top: 2px; }
.upd-notes { margin: 12px 0 4px; padding: 10px 12px; background: var(--bg2); border-radius: 10px; font-size: 0.78rem; color: var(--text); line-height: 1.7; max-height: 140px; overflow-y: auto; }
.upd-note-line { white-space: pre-wrap; }
.upd-btns { display: flex; gap: 10px; margin-top: 16px; }
.upd-btns.hidden { display: none; }
.upd-btn-later { flex: 1; padding: 10px 0; border-radius: 10px; border: 0.5px solid var(--border); background: none; color: var(--text-muted); font-size: 0.84rem; font-weight: 600; cursor: pointer; }
.upd-btn-now { flex: 1.4; padding: 10px 0; border-radius: 10px; border: none; background: linear-gradient(135deg, #D4B36A, #B08A3E); color: #fff; font-size: 0.84rem; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(176,138,62,.35); }
.upd-btn-now:active { transform: scale(.97); }
/* 第六十七轮：热更弹窗的完整安装包次级按钮 */
.upd-btn-full { flex: 1; padding: 10px 0; border-radius: 10px; border: 0.5px solid var(--border); background: none; color: var(--text); font-size: 0.84rem; font-weight: 600; cursor: pointer; }
/* 第六十七轮：设置页热更通道状态行 */
.upd-sett-sub { margin-top: 6px; font-size: 0.72rem; color: var(--text-muted); }
.upd-prog { margin-top: 16px; }
.upd-prog.hidden { display: none; }
.upd-prog-track { height: 8px; background: var(--bg2); border-radius: 99px; overflow: hidden; }
.upd-prog-bar { height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #D4B36A, #B08A3E); transition: width .3s ease; }
.upd-prog-t { font-size: 0.74rem; color: var(--text-muted); margin-top: 6px; text-align: center; font-variant-numeric: tabular-nums; }
/* 设置页版本区块 */
.upd-sett-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; }
.upd-sett-ver { font-size: 0.84rem; color: var(--text); font-weight: 600; }
.upd-check-btn { padding: 7px 14px; border-radius: 9px; border: 0.5px solid rgba(212,179,106,.5); background: rgba(212,179,106,.12); color: #9a7a2e; font-size: 0.78rem; font-weight: 700; cursor: pointer; }
[data-theme="dark"] .upd-check-btn { color: #e8cf9a; }
.upd-check-btn:active { transform: scale(.96); }

/* ═══ 第六十四轮①：首页逾期任务板块（红色系，与临期金/中性明确区分）═══ */
.hm-od-card { border: 0.5px solid rgba(192,57,43,.35); }
.hm-od-card .hm-card-head b { color: #B03A2E; }
.hm-od-badge { font-size: 0.66rem; font-weight: 700; color: #fff; background: linear-gradient(135deg,#D65A4E,#B03A2E); border-radius: 99px; padding: 1px 8px; }
.hm-od-list { display: flex; flex-direction: column; gap: 6px; }
.hm-od-list .hm-tl-it { --tc: #C0392B !important; }
.hm-od-more { margin-top: 7px; font-size: 0.74rem; font-weight: 600; color: #B03A2E; text-align: center; cursor: pointer; padding: 5px; border-radius: 8px; }
.hm-od-more:hover { background: rgba(192,57,43,.08); }
.hm-od-ok { color: #5F8F6A !important; }
[data-theme="dark"] .hm-od-card .hm-card-head b { color: #E08A80; }
[data-theme="dark"] .hm-od-more { color: #E08A80; }

/* ═══ 第六十四轮②：即时消息平滑更新——新消息单行淡入下滑（按键调和，不整列重排）═══ */
@keyframes hmMsgIn { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
.hm-msg-in { animation: hmMsgIn .38s cubic-bezier(.25,.9,.3,1); }
.hm-notif-list { scroll-behavior: smooth; }

/* ═══ 第六十四轮③：网页版浏览器缩放适配（Ctrl± 任意比例组件不重叠）═══
   原理：flex/grid 子项 min-width:0 + minmax(0,1fr) 防长内容撑破格子互相侵占；
   右栏 sticky 避开顶栏；中高缩放有效宽度段降列数；A-Z 索引条预留右缘 */
.home-main { min-width: 0; }
.hm-card, .hm-cust, .customer-card, .quote-card, .group-card { min-width: 0; }
#customerList { padding-right: 24px; box-sizing: border-box; }
@media (min-width: 1024px) {
  .hm-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hm-charts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hm-custs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #customerList, #quoteList, #groupList,
  .hierarchy-children { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-rail { top: 76px; } /* 原 top:12px 会滑入 sticky 顶栏底下造成干涉 */
}
@media (min-width: 1600px) {
  #customerList, #quoteList, #groupList,
  .hierarchy-children { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* 高缩放有效宽度段（1024–1360px 常见于 125%–175% 缩放）：降列防挤压 */
@media (min-width: 1024px) and (max-width: 1360px) {
  .home-rail { width: 264px; }
  .hm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-custs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #customerList, #quoteList, #groupList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ═══ 第六十四轮④：通知中心已读消息分级折叠 ═══ */
.notif-fold { border: 0.5px solid var(--border); border-radius: 10px; margin: 8px 0; overflow: hidden; }
.notif-fold-head { display: flex; align-items: center; gap: 7px; padding: 8px 12px; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); background: var(--bg2, rgba(128,128,128,.06)); cursor: pointer; user-select: none; }
.notif-fold-head:hover { color: var(--text); }
.notif-fold-head .nf-count { margin-left: auto; font-size: 0.68rem; background: var(--border); border-radius: 99px; padding: 0 7px; }
.notif-fold-head .nf-chev { transition: transform .2s; font-size: 0.7rem; }
.notif-fold.open .nf-chev { transform: rotate(90deg); }
.notif-fold-body { display: none; }
.notif-fold.open .notif-fold-body { display: block; }
.notif-archive-btn { width: 100%; margin-top: 10px; padding: 9px; border: 0.5px dashed var(--border); border-radius: 10px; background: none; color: var(--text-muted); font-size: 0.78rem; cursor: pointer; }
.notif-archive-btn:hover { color: var(--text); border-style: solid; }

/* ═══ 第六十五轮①：报价页国家A-Z分组视图（仿客户页布局）+ 列宽压缩根修 ═══
   根因：#quoteList 的 ≥900px 媒体网格把「分组容器」当成格子项挤压，组内卡片再被二次分割
   → 分组/国家视图整行铺开（display:block），卡片网格只作用最内层 .hierarchy-children */
#quoteList.quote-az-mode { display: block; padding-right: 24px; box-sizing: border-box; }
.hierarchy-children.quote-az-l1 { display: block; }
.quote-az-l1 > .hierarchy-group { margin-bottom: 6px; }
.quote-az-l1 .hierarchy-header.hierarchy-l2 { margin-top: 4px; }

/* ═══ 第六十五轮②：首页任务面板双标签（逾期/临期合一，标签带数量徽章） ═══ */
.hm-task-tabs { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.hm-task-tab { border: 1px solid var(--border); background: var(--bg2, rgba(128,128,128,.06)); color: var(--text-muted); border-radius: 99px; padding: 5px 12px; font-size: 0.78rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.hm-task-tab:hover { color: var(--text); }
.hm-task-tab.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.hm-tt-badge { min-width: 18px; height: 18px; border-radius: 99px; background: var(--border); color: var(--text); font-size: 0.66rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
.hm-task-tab.on .hm-tt-badge { background: rgba(255,255,255,.25); color: #fff; }
.hm-tt-badge.od { background: #C0392B; color: #fff; }
.hm-task-tab.on .hm-tt-badge.od { background: #fff; color: #C0392B; }
.hm-task-go { margin-left: auto; font-size: 0.76rem; color: var(--text-muted); text-decoration: none; white-space: nowrap; }
.hm-task-go:hover { color: var(--primary); }

/* ═══ 第六十八轮：手机竖屏顶栏长标题挤出设置键——标题省略截断保右侧按钮区 ═══
   flex 子项 h2 默认 min-width:auto 不可缩 → 长公司名/事件名把 🔔⚙ 顶出视口 */
.nav-brand h2#pageTitle { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 400px) {
  .top-nav { gap: 6px; padding-left: 8px; padding-right: 8px; }
  .nav-brand { gap: 6px; }
}
/* 第六十八轮：桌面端顶栏设置键隐藏（侧栏已覆盖），移动端显示（唯一设置入口） */
@media (min-width: 1024px) { #btnSettingsNav { display: none; } }