:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --text: #1f2933;
  --muted: #5f6b7a;
  --line: #d9dee7;
  --primary: #14532d;
  --primary-hover: #0f3f22;
  --secondary: #334155;
  --success: #166534;
  --danger: #b42318;
  --soon-bg: #eef2f7;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  line-height: 1.5;
}

.page-shell {
  width: min(1120px, calc(100% - 80px));
  margin: 0 auto;
  padding: 48px 0 64px;
}
.page-shell.wide {
  width: min(1440px, calc(100% - 48px));
}

.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 64px;
  padding: 0 40px;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--line);
}

.site-brand {
  color: var(--text);
  text-decoration: none;
  font-weight: 800;
  white-space: nowrap;
}

.site-nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 6px;
  color: var(--secondary);
  text-decoration: none;
  font-weight: 700;
}

.site-nav-links a:hover,
.site-nav-links a.active {
  background: #e9f5ee;
  color: var(--primary);
}

.header-section {
  padding: 32px 0 28px;
  border-bottom: 1px solid var(--line);
}

.header-section.compact {
  padding-bottom: 22px;
}

.brand {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
}

h1 {
  margin: 0;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0;
}

.subtitle {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 18px;
}

.status-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 28px;
  padding: 24px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.create-panel {
  justify-content: flex-start;
}

.section-label {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 14px;
}

.status-text {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
}

.status-text.connected {
  color: var(--success);
}

.status-text.disconnected {
  color: var(--danger);
}

.status-text.pending {
  color: var(--secondary);
}

.version-text {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  white-space: nowrap;
}

.actions-row {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}

button {
  min-width: 132px;
  height: 44px;
  padding: 0 20px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.primary-button {
  background: var(--primary);
  color: #ffffff;
}

.primary-button:hover {
  background: var(--primary-hover);
}

.secondary-button {
  background: #ffffff;
  border-color: var(--line);
  color: var(--secondary);
}

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

.export-download-link {
  min-width: 132px;
  height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.export-download-link.is-busy {
  opacity: 0.65;
  pointer-events: none;
}

.danger-button {
  background: #fff7f7;
  border-color: #dc2626;
  color: #991b1b;
}

.danger-button:hover {
  background: #fee2e2;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 34px;
}

.module-card {
  min-height: 132px;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.module-card h2 {
  margin: 0 0 28px;
  font-size: 20px;
  font-weight: 700;
}

.module-card span {
  display: inline-block;
  padding: 5px 10px;
  background: var(--soon-bg);
  border-radius: 999px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.home-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 34px;
}

.home-card {
  min-height: 230px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.home-card h2 {
  margin: 0 0 12px;
  font-size: 26px;
}

.home-card p {
  margin: 0;
  color: var(--muted);
}

.link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 180px;
  height: 44px;
  padding: 0 20px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
}

.future-note {
  margin: 24px 0 0;
  color: var(--muted);
}
.text-input, input, select, textarea { min-height: 38px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; font: inherit; }
textarea { width: 100%; min-height: 96px; }
.product-toolbar { align-items: stretch; flex-wrap: wrap; }
.secondary-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 6px; color: var(--secondary); text-decoration: none; background: #fff; font-weight: 700; }
.table-panel { margin-top: 24px; background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th, .data-table td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.data-table tr { cursor: pointer; }
.table-wrap { overflow-x: auto; }
.section-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.inline-filter { display: inline-flex; align-items: center; gap: 8px; }
.inline-filter input { width: auto; }
.table-actions { display: flex; gap: 8px; }
.status-pill.ready { background: #dcfce7; color: #166534; }
.status-pill.muted { background: #e5e7eb; color: #4b5563; }
.contact-summary { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; color: var(--ink); }
.result-box { max-height: 260px; overflow: auto; background: #f8fafc; border: 1px solid var(--line); padding: 12px; white-space: pre-wrap; }
.import-panel, .import-panel > div { width: 100%; }
.import-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.import-result:empty { display: none; }
.import-result { max-height: none; margin-top: 16px; padding: 0; border: 0; background: transparent; white-space: normal; }
.import-result-summary { border: 2px solid #86efac; border-radius: 8px; padding: 18px; background: #f0fdf4; }
.import-result-summary.failed { border-color: #fca5a5; background: #fef2f2; }
.import-result-summary h2 { margin: 0 0 8px; font-size: 22px; color: #166534; }
.import-result-summary.failed h2 { color: #b91c1c; }
.import-result-summary p { margin: 0; line-height: 1.7; }
.import-metrics { display: grid; grid-template-columns: repeat(5, minmax(110px, 1fr)); gap: 10px; margin-top: 16px; }
.import-metric { padding: 10px 12px; border-radius: 6px; background: #e2e8f0; color: #334155; }
.import-metric span, .import-metric strong { display: block; }
.import-metric strong { margin-top: 4px; font-size: 24px; }
.import-metric.create { background: #dcfce7; color: #166534; }
.import-metric.update { background: #dbeafe; color: #1d4ed8; }
.import-metric.error { background: #fee2e2; color: #b91c1c; }
.import-metric.warning { background: #fef3c7; color: #a16207; }
.import-section { margin-top: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; }
.import-section > summary { cursor: pointer; padding: 13px 16px; font-weight: 700; background: #f8fafc; }
.error-section > summary { color: #b91c1c; background: #fef2f2; }
.warning-section > summary { color: #a16207; background: #fffbeb; }
.update-section > summary { color: #1d4ed8; }
.create-section > summary { color: #166534; }
.import-section-body { padding: 14px 16px; }
.import-issue { margin-bottom: 12px; padding: 14px 16px; border: 1px solid #fecaca; border-left: 5px solid #dc2626; border-radius: 6px; background: #fff7f7; }
.import-issue.warning { border-color: #fde68a; border-left-color: #f59e0b; background: #fffbeb; }
.import-issue.first-error { outline: 3px solid rgba(220, 38, 38, .25); }
.import-issue h4 { margin: 0 0 8px; font-size: 17px; }
.issue-product-name { margin: 0 0 10px; color: var(--muted); }
.import-issue dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; margin: 0; }
.import-issue dl div { display: grid; grid-template-columns: 88px 1fr; gap: 8px; }
.import-issue dt { font-weight: 700; color: var(--muted); }
.import-issue dd { margin: 0; overflow-wrap: anywhere; }
.import-preview-table th, .import-preview-table td { white-space: normal; vertical-align: top; }
.technical-details pre { max-height: 300px; margin: 0; overflow: auto; white-space: pre-wrap; }
.import-commit-note { font-size: 14px; color: var(--muted); }
.import-commit-note.error { color: #b91c1c; font-weight: 700; }
.import-commit-note.success { color: #166534; font-weight: 700; }
.import-commit-note.checking, .import-checking { color: #1d4ed8; font-weight: 700; }
.import-checking { padding: 18px; border: 1px solid #bfdbfe; border-radius: 8px; background: #eff6ff; }
.import-request-error { padding: 10px 12px; border-radius: 6px; background: #fee2e2; color: #b91c1c; font-weight: 700; }
@media (max-width: 800px) {
  .import-metrics { grid-template-columns: repeat(2, minmax(110px, 1fr)); }
  .import-issue dl { grid-template-columns: 1fr; }
}
.form-actions { display: flex; gap: 12px; margin-top: 24px; }
.form-section { margin-top: 22px; padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.form-section h2 { margin: 0 0 16px; font-size: 20px; }
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.form-grid label, .form-section label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 14px; }
.form-grid input, .form-grid select { width: 100%; }
.image-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.image-preview { display: block; width: 220px; height: 160px; object-fit: contain; border: 1px solid var(--line); background: #f8fafc; margin-bottom: 10px; }
.table-thumb { width: 64px; height: 48px; object-fit: contain; border: 1px solid var(--line); background: #fff; }
.desc-row { display: grid; grid-template-columns: minmax(260px, 1fr) 140px 72px 72px 72px; gap: 8px; margin-bottom: 8px; align-items: center; }
.audit-item { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.readiness-row span { display: inline-block; margin-right: 10px; padding: 4px 8px; border-radius: 999px; background: #eef2f7; font-weight: 700; }
.module-link { cursor: pointer; }
.q-tier-row,.q-item-row{display:grid;grid-template-columns:90px 120px 80px 80px 80px 80px;gap:8px;margin-bottom:8px;align-items:center}.q-item-card{border:1px solid var(--line);border-radius:8px;padding:14px;margin-bottom:12px;background:#fff}.q-price-grid{display:grid;grid-template-columns:repeat(5, minmax(100px,1fr));gap:8px}.preview-table{width:100%;border-collapse:collapse;margin-top:16px;background:#fff}.preview-table th,.preview-table td{border:1px solid var(--line);padding:8px;vertical-align:top}.preview-img{width:90px;height:70px;object-fit:contain}.group-title{margin-top:28px;font-size:22px}.small-button{min-width:72px;height:36px;padding:0 10px}.product-result{padding:8px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:12px}
.q-item-heading{display:flex;justify-content:space-between;gap:24px;align-items:flex-start}.q-item-heading h3{margin-top:4px}.quotation-image-editor{display:grid;grid-template-columns:132px minmax(210px,1fr);gap:14px;align-items:center;padding:12px;border:1px solid #dbe4ea;border-radius:12px;background:#f8fafc}.quotation-image-frame{width:132px;height:104px;display:flex;align-items:center;justify-content:center;border:1px solid #cbd5e1;border-radius:10px;background:#fff;color:var(--muted);font-size:12px;text-align:center;overflow:hidden}.quotation-image-frame img{width:100%;height:100%;object-fit:contain}.quotation-image-editor p{margin:4px 0 8px;color:var(--muted);font-size:12px}.quotation-image-editor .small-button{margin:0 6px 6px 0}.image-upload-button{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.image-upload-status{display:block;color:var(--muted);font-size:12px}
.marketing-badge{display:block;width:192px;height:60px;max-width:100%;margin-top:8px;object-fit:contain;object-position:left center}.marketing-badge--compact{width:160px;height:50px}.preview-table .marketing-badge{margin-top:8px}.q-item-tag-preview:empty{display:none}
.tag-picker-field{position:relative;display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:14px}.tag-picker{position:relative}.tag-picker-trigger{width:100%;min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border:1px solid #94a3b8;border-radius:10px;background:#fff;color:#172033;text-align:left}.tag-picker-trigger>span:first-child{display:flex;flex-direction:column;gap:3px}.tag-picker-trigger small{color:var(--muted);font-size:11px}.tag-picker-trigger>svg{width:20px;flex:0 0 20px;fill:none;stroke:currentColor;stroke-width:2}.tag-picker-menu{position:absolute;z-index:40;top:calc(100% + 6px);left:0;width:min(540px,calc(100vw - 44px));padding:7px;border:1px solid #cbd5e1;border-radius:13px;background:#fff;box-shadow:0 18px 38px rgba(15,23,42,.24)}.tag-picker-option{width:100%;min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 11px;border:0;border-radius:9px;background:#fff;color:#172033;text-align:left}.tag-picker-option:hover,.tag-picker-option:focus-visible{background:#f1f5f9;outline:2px solid #2563eb;outline-offset:-2px}.tag-picker-option[aria-selected="true"]{background:#eaf2ff}.tag-option-copy{display:flex;flex-direction:column;gap:3px;min-width:140px}.tag-option-copy small{color:#64748b}.tag-option-visual{display:flex;justify-content:flex-end;min-width:170px}.tag-option-visual .marketing-badge{width:160px;height:50px;margin:0}.tag-hidden-preview{color:#64748b;font-size:12px;font-weight:700}.required-marker{display:inline!important;margin-left:3px;color:#dc2626;font-weight:900;font-size:1.05em;line-height:1}.required-fields-note{margin:0 0 14px;padding:9px 12px;border-left:3px solid #dc2626;border-radius:4px;background:#fff7f7;color:#475569;font-size:13px}.required-field-error{display:block;color:#b91c1c;font-size:12px;font-weight:700}.required-field-error[hidden]{display:none!important}[aria-invalid="true"]{border-color:#dc2626!important;box-shadow:0 0 0 2px rgba(220,38,38,.12)!important}
.conditional-required{border-color:#dc2626!important;box-shadow:0 0 0 2px rgba(220,38,38,.12)!important}
.preflight-card{border:1px solid var(--line);border-radius:8px;padding:16px;margin-bottom:12px;background:#fff}.preflight-card h3{margin:0 0 8px}.preflight-card.blocked{border-color:#fecaca;background:#fef2f2;color:#7f1d1d}.preflight-card.ready{border-color:#bbf7d0;background:#f0fdf4;color:#14532d}.preflight-warnings,.preflight-warning-item{border-top:1px solid rgba(0,0,0,.08);margin-top:10px;padding-top:10px}.technical-details summary{cursor:pointer;font-weight:700;margin:10px 0}.ai-result{margin-top:14px}.ai-proposal{border:1px solid var(--line);border-radius:8px;background:#fff;padding:16px}.status-pill{display:inline-block;padding:3px 8px;border-radius:999px;background:#fef3c7;color:#92400e;font-size:12px;font-weight:700}.muted-text{color:var(--muted)}
.quotation-quick-actions{position:fixed;right:max(18px,calc((100vw - 1180px)/2));bottom:max(18px,env(safe-area-inset-bottom));z-index:55;display:flex;align-items:center;gap:12px;max-width:min(520px,calc(100vw - 36px));padding:10px 12px;border:1px solid #cbd5e1;border-radius:12px;background:rgba(255,255,255,.97);box-shadow:0 12px 32px rgba(15,23,42,.18);backdrop-filter:blur(8px)}
.quotation-quick-status{max-width:230px;color:#475569;font-size:12px;line-height:1.35}.quotation-quick-status.error{color:#b42318;font-weight:700}.quotation-quick-status.success{color:#166534;font-weight:700}.quotation-quick-buttons{display:flex;gap:8px}.quotation-quick-buttons>button{min-height:44px;white-space:nowrap}
body:has(#quotation-quick-actions) .page-shell{padding-bottom:110px}
.visually-disabled{opacity:.55;filter:grayscale(.25)}
.description-highlight { color: #b42318; font-weight: 600; }
#terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#terms > div { padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: #f8fafc; }
#terms p { margin: 6px 0 0; }

@media (max-width: 900px) {
  .quotation-quick-actions{left:14px;right:14px;bottom:max(10px,env(safe-area-inset-bottom));max-width:none;align-items:stretch;flex-direction:column;gap:7px;padding:9px 10px}.quotation-quick-status{max-width:none;text-align:center}.quotation-quick-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.quotation-quick-buttons>button{width:100%}
  body:has(#quotation-quick-actions) .page-shell{padding-bottom:150px}
  .site-nav {
    position: static;
    align-items: flex-start;
    flex-direction: column;
    padding: 14px 20px;
  }
  .site-nav-links {
    width: 100%;
    flex-wrap: wrap;
  }
  .page-shell,
  .page-shell.wide {
    width: min(100% - 28px, 1120px);
    padding-top: 28px;
  }
  .home-card-grid,
  .module-grid,
  .form-grid,
  .image-grid {
    grid-template-columns: 1fr;
  }
  .status-panel,
  .form-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .q-tier-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .q-item-heading,.quotation-image-editor{grid-template-columns:1fr;flex-direction:column}.quotation-image-editor{width:100%}.quotation-image-frame{width:100%;height:180px}.tag-picker-menu{position:fixed;left:14px;right:14px;top:auto;bottom:14px;width:auto;max-height:70vh;overflow:auto}.tag-picker-option{align-items:flex-start;flex-direction:column}.tag-option-visual{justify-content:flex-start;min-width:0}.marketing-badge{max-width:100%}
  .q-tier-row input {
    min-width: 0;
    width: 100%;
  }
  .q-tier-row .small-button {
    min-width: 0;
    height: 44px;
  }
  button,
  .secondary-link,
  .link-button {
    width: 100%;
    justify-content: center;
  }
}