:root {
      color-scheme: light;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
      --bg: #eef3f6;
      --surface: #ffffff;
      --surface-soft: #f8fafb;
      --ink: #17212b;
      --muted: #657282;
      --line: #d8e0e7;
      --line-strong: #b7c4cf;
      --teal: #c83737;
      --teal-dark: #9f2727;
      --teal-soft: #fff2f2;
      --navy: #102a43;
      --amber: #b7791f;
      --amber-soft: #fff7df;
      --bad: #b42318;
      --ok: #123c69;
      --shadow: 0 18px 42px rgba(16, 42, 67, 0.075);
      --radius: 6px;
      background: var(--bg);
      color: var(--ink);
    }
    * { box-sizing: border-box; }
    [hidden] { display: none !important; }
    html { scroll-behavior: smooth; }
    body { margin: 0; background: var(--bg); }
    header {
      position: sticky;
      top: 0;
      z-index: 20;
      background: rgba(255, 255, 255, 0.96);
      border-bottom: 1px solid var(--line);
      backdrop-filter: blur(12px);
    }
    .topbar {
      max-width: 1320px;
      margin: 0 auto;
      padding: 14px 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 9px;
      min-width: 0;
    }
    .brand-mark {
      width: 42px;
      height: 42px;
      flex: 0 0 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .brand-mark img {
      width: 42px;
      height: 42px;
      display: block;
      object-fit: contain;
    }
    button svg,
    .summary-icon svg,
    .metric-icon svg {
      width: 18px;
      height: 18px;
      display: block;
      stroke: currentColor;
      stroke-width: 2;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    h1 { margin: 0; letter-spacing: 0; color: var(--ink); }
    .brand-title { font-size: 18px; font-weight: 800; color: var(--ink); white-space: nowrap; }
    .topbar-note { color: var(--muted); font-size: 13px; white-space: nowrap; }
    main { max-width: 1320px; margin: 0 auto; padding: 22px; }
    .quote-intro {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
      gap: 28px;
      align-items: end;
      margin: 2px 0 18px;
      padding: 24px 28px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background:
        linear-gradient(135deg, rgba(200, 55, 55, 0.12), rgba(200, 55, 55, 0) 42%),
        var(--surface);
      box-shadow: 0 14px 32px rgba(16, 42, 67, 0.055);
    }
    .quote-intro h1 {
      max-width: 760px;
      margin-bottom: 10px;
      color: var(--navy);
      font-size: clamp(34px, 4vw, 50px);
      line-height: 1.02;
      letter-spacing: 0;
    }
    .quote-intro p {
      max-width: 780px;
      margin: 0;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.6;
    }
    .quote-intro-facts {
      display: grid;
      gap: 9px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .quote-intro-facts li {
      display: flex;
      align-items: center;
      gap: 9px;
      min-height: 38px;
      padding: 9px 11px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.78);
      color: var(--ink);
      font-size: 13px;
      font-weight: 750;
    }
    .quote-intro-facts li::before {
      width: 8px;
      height: 8px;
      content: "";
      border-radius: 50%;
      background: var(--teal);
      box-shadow: 0 0 0 4px rgba(200, 55, 55, 0.12);
    }
    .quote-section-label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin: 20px 0 8px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 750;
    }
    .quote-section-label strong {
      color: var(--navy);
      font-size: 16px;
    }
    .book-art {
      width: 310px;
      max-width: 88%;
      height: auto;
      display: block;
      filter: drop-shadow(0 20px 24px rgba(0, 0, 0, 0.18));
    }
    .product-tabs {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin: 8px 0 16px;
    }
    .product-tab {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--surface);
      min-height: 104px;
      padding: 12px;
      display: grid;
      grid-template-columns: 116px minmax(0, 1fr);
      gap: 12px;
      align-items: center;
      overflow: hidden;
      color: var(--ink);
      font: inherit;
      text-align: left;
      text-decoration: none;
      cursor: pointer;
      box-shadow: 0 8px 18px rgba(16, 42, 67, 0.035);
      transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease;
    }
    .product-tab img {
      width: 116px;
      height: 78px;
      border-radius: 4px;
      object-fit: cover;
      border: 1px solid var(--line);
      background: var(--surface-soft);
    }
    .product-tab-text { display: grid; gap: 4px; min-width: 0; }
    .product-tab strong { font-size: 14px; color: var(--ink); }
    .product-tab span { font-size: 12px; color: var(--muted); }
    .product-tab.active {
      border-color: var(--teal);
      background: var(--teal-soft);
      box-shadow: inset 3px 0 0 var(--teal), 0 12px 24px rgba(200, 55, 55, 0.08);
    }
    .product-tab:hover {
      border-color: var(--teal);
      background: var(--surface-soft);
      transform: translateY(-1px);
      box-shadow: 0 10px 22px rgba(16, 42, 67, 0.06);
    }
    .product-tab.locked { opacity: 0.62; }
    .flow-rail {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 8px;
      margin: -4px 0 18px;
    }
    .flow-step {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--surface);
      color: var(--ink);
      min-height: 44px;
      padding: 8px 10px;
      justify-content: flex-start;
      box-shadow: 0 7px 16px rgba(16, 42, 67, 0.03);
    }
    .flow-step:hover {
      border-color: var(--teal);
      background: var(--teal-soft);
      color: var(--teal-dark);
      box-shadow: none;
      transform: none;
    }
    .flow-step span {
      color: var(--teal);
      font-size: 12px;
      font-weight: 800;
    }
    .layout {
      display: grid;
      grid-template-columns: minmax(560px, 760px) minmax(340px, 1fr);
      gap: 20px;
      align-items: start;
      min-width: 0;
    }
    .panel {
      min-width: 0;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 20px;
      box-shadow: var(--shadow);
    }
    .panel-title {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 16px;
    }
    .panel-title h2 { margin: 0; }
    .panel-title p {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
      text-align: right;
    }
    .quote-panel {
      position: sticky;
      top: 78px;
      max-height: calc(100vh - 94px);
      overflow-y: auto;
      scrollbar-gutter: stable;
      padding: 22px;
    }
    .lead-inline {
      display: grid;
      gap: 9px;
      margin-top: 8px;
      border-top: 1px solid var(--line);
      padding-top: 10px;
      scroll-margin-top: 12px;
      animation: leadReveal .18s ease-out;
    }
    .lead-inline[hidden] { display: none; }
    .quote-panel.lead-form-open .lead-actions,
    .quote-panel.lead-form-open .lead-email-action {
      display: none;
    }
    .lead-inline-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .lead-inline-head h3 {
      margin: 0;
      color: var(--navy);
      font-size: 15px;
      line-height: 1.15;
    }
    .lead-inline-head p {
      margin: 2px 0 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.25;
    }
    .lead-inline-close {
      width: 30px;
      min-width: 30px;
      min-height: 30px;
      padding: 0;
      background: var(--surface-soft);
      color: var(--ink);
      border: 1px solid var(--line);
      box-shadow: none;
    }
    .lead-inline-close:hover {
      background: var(--teal-soft);
      color: var(--teal-dark);
      box-shadow: none;
      transform: none;
    }
    @keyframes leadReveal {
      from { opacity: 0; transform: translateY(-6px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
    label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 600; }
    input, select, textarea {
      width: 100%;
      border: 1px solid var(--line-strong);
      border-radius: 4px;
      padding: 9px 10px;
      font: inherit;
      background: var(--surface);
      color: var(--ink);
      min-height: 40px;
      outline: none;
      transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    }
    textarea { resize: vertical; line-height: 1.45; }
    input:focus, select:focus, textarea:focus {
      border-color: var(--teal);
      box-shadow: 0 0 0 3px rgba(200, 55, 55, 0.12);
    }
    .full { grid-column: 1 / -1; }
    .row-title {
      grid-column: 1 / -1;
      margin-top: 10px;
      padding: 14px 0 3px;
      border-top: 1px solid var(--line);
      font-weight: 800;
      color: var(--navy);
      display: flex;
      align-items: center;
      gap: 9px;
    }
    .row-title::before {
      content: "";
      width: 22px;
      height: 22px;
      border-radius: 4px;
      background: var(--teal-soft);
      border: 1px solid #efb8b8;
    }
    .readonly {
      background: var(--surface-soft);
      color: var(--muted);
    }
    .spec-control {
      grid-column: 1 / -1;
      display: grid;
      gap: 10px;
    }
    .spec-main {
      display: grid;
      grid-template-columns: 240px minmax(0, 1fr);
      gap: 14px;
      align-items: start;
    }
    .quantity-block,
    .size-block {
      display: grid;
      gap: 8px;
      min-width: 0;
    }
    .field-head {
      min-height: 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
    }
    .field-head label {
      display: inline;
      gap: 0;
      color: inherit;
      font-size: inherit;
      font-weight: inherit;
    }
    .stepper-input {
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr) 38px;
      min-height: 44px;
      overflow: hidden;
      border: 1px solid var(--line-strong);
      border-radius: 6px;
      background: var(--surface);
      transition: border-color .15s ease, box-shadow .15s ease;
    }
    .stepper-input:focus-within {
      border-color: var(--teal);
      box-shadow: 0 0 0 3px rgba(200, 55, 55, 0.12);
    }
    .stepper-input input {
      min-height: 42px;
      border: 0;
      border-radius: 0;
      text-align: center;
      font-weight: 700;
      box-shadow: none;
    }
    .stepper-input input:focus {
      box-shadow: none;
    }
    .stepper-button {
      min-height: 42px;
      padding: 0;
      border-radius: 0;
      border: 0;
      background: var(--surface);
      color: var(--ink);
      font-size: 20px;
      font-weight: 800;
      box-shadow: none;
    }
    .stepper-button:hover {
      transform: none;
      background: var(--surface-soft);
      box-shadow: none;
    }
    .stepper-button:first-child { border-right: 1px solid var(--line); }
    .stepper-button:last-child { border-left: 1px solid var(--line); }
    .stepper-button:disabled {
      cursor: not-allowed;
      color: #b9c4d1;
      background: var(--surface-soft);
    }
    .text-button {
      justify-self: start;
      min-height: 28px;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--teal-dark);
      box-shadow: none;
      font-size: 13px;
      font-weight: 800;
    }
    .text-button:hover {
      transform: none;
      background: transparent;
      color: var(--navy);
      box-shadow: none;
    }
    .actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; align-items: center; }
    .check-grid {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 8px;
    }
    .binding-card-grid {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
      gap: 8px;
    }
    body[data-quote-mode="softcover"] .binding-card-grid {
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 9px;
    }
    .visual-card-grid {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 10px;
    }
    .visual-card-grid.compact {
      grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    }
    .visual-card {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--surface);
      padding: 9px;
      display: grid;
      gap: 8px;
      text-align: left;
      color: var(--ink);
      cursor: pointer;
      min-height: 142px;
      transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease, transform .15s ease;
    }
    .binding-card {
      border: 1px solid var(--line);
      border-radius: 6px;
      background: var(--surface);
      padding: 8px;
      display: grid;
      grid-template-columns: 82px minmax(0, 1fr);
      grid-template-rows: auto auto;
      gap: 4px 10px;
      align-items: center;
      text-align: left;
      color: var(--ink);
      cursor: pointer;
      min-height: 72px;
      transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease, transform .15s ease;
    }
    .binding-card:hover,
    .visual-card:hover {
      border-color: var(--line-strong);
      background: var(--surface-soft);
      transform: translateY(-1px);
    }
    .binding-card.active,
    .visual-card.active {
      border-color: var(--teal);
      background: var(--teal-soft);
      box-shadow: inset 0 0 0 1px rgba(200, 55, 55, .16), 0 10px 20px rgba(200, 55, 55, 0.08);
    }
    .visual-card img {
      width: 100%;
      aspect-ratio: 16 / 10;
      object-fit: cover;
      border-radius: 4px;
      border: 1px solid var(--line);
      background: var(--surface-soft);
    }
    .visual-card-grid.compact .visual-card {
      min-height: 128px;
    }
    .visual-card-grid.compact .visual-card img {
      aspect-ratio: 3 / 2;
      object-fit: contain;
      padding: 6px;
      background: linear-gradient(135deg, #ffffff, #f3f7fa);
    }
    .binding-card img {
      grid-row: 1 / 3;
      width: 82px;
      height: 54px;
      object-fit: cover;
      border-radius: 4px;
      border: 1px solid var(--line);
      background: var(--surface-soft);
    }
    .binding-card strong,
    .visual-card strong {
      font-size: 13px;
      line-height: 1.2;
    }
    .binding-card strong { align-self: end; }
    .binding-card span,
    .visual-card span {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.35;
    }
    .visual-card span {
      min-height: 32px;
    }
    .binding-card span { align-self: start; }
    body[data-quote-mode="softcover"] .binding-card {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto auto;
      gap: 7px;
      min-height: 148px;
      padding: 8px;
      align-items: stretch;
    }
    body[data-quote-mode="softcover"] .binding-card img {
      grid-row: auto;
      width: 100%;
      height: auto;
      aspect-ratio: 4 / 3;
    }
    body[data-quote-mode="softcover"] .binding-card strong,
    body[data-quote-mode="softcover"] .binding-card span {
      align-self: auto;
    }
    .thickness-grid {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
      gap: 8px;
    }
    .thickness-option {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--surface);
      color: var(--ink);
      min-height: 76px;
      padding: 12px;
      text-align: left;
      display: grid;
      gap: 6px;
      cursor: pointer;
      transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease, transform .15s ease;
    }
    .thickness-option:hover {
      border-color: var(--line-strong);
      background: var(--surface-soft);
      transform: translateY(-1px);
    }
    .thickness-option.active {
      border-color: var(--teal);
      background: var(--teal-soft);
      box-shadow: inset 0 0 0 1px rgba(200, 55, 55, .16);
    }
    .thickness-option strong {
      font-size: 18px;
      line-height: 1.1;
    }
    .thickness-option span {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }
    .range-control {
      grid-column: 1 / -1;
      display: grid;
      gap: 8px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--surface-soft);
      padding: 10px;
    }
    .range-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      color: var(--muted);
      font-size: 12px;
    }
    input[type="range"] {
      min-height: 24px;
      padding: 0;
      border: 0;
      accent-color: var(--teal);
      background: transparent;
      box-shadow: none;
    }
    .check-item {
      display: flex;
      align-items: center;
      gap: 7px;
      min-height: 40px;
      border: 1px solid var(--line);
      border-radius: 4px;
      padding: 8px 9px;
      color: var(--ink);
      background: var(--surface);
      cursor: pointer;
      transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
    }
    .check-item img {
      width: 58px;
      height: 44px;
      border-radius: 4px;
      object-fit: cover;
      border: 1px solid var(--line);
      background: var(--surface-soft);
      flex: 0 0 auto;
    }
    .check-item:hover {
      border-color: var(--line-strong);
      background: var(--surface-soft);
    }
    .check-item.selected {
      border-color: var(--teal);
      background: var(--teal-soft);
      box-shadow: 0 0 0 1px rgba(200, 55, 55, 0.12);
    }
    .check-item input {
      width: auto;
      min-height: 0;
      margin: 0;
      accent-color: #c83737;
    }
    .check-item span {
      display: grid;
      gap: 3px;
      line-height: 1.25;
    }
    .check-item strong {
      font-size: 14px;
      font-weight: 800;
    }
    .check-item small { color: var(--muted); }
    #extra_finishing {
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 9px;
    }
    #extra_finishing .check-item {
      position: relative;
      display: grid;
      grid-template-columns: 18px minmax(0, 1fr);
      align-items: start;
      gap: 8px 9px;
      min-height: 168px;
      padding: 9px;
    }
    #extra_finishing .check-item img {
      grid-column: 1 / -1;
      width: 100%;
      height: 78px;
      object-fit: cover;
    }
    #extra_finishing .check-item input {
      grid-column: 1;
      margin-top: 1px;
    }
    #extra_finishing .check-item span {
      grid-column: 2;
    }
    .plate-fields {
      grid-column: 1 / -1;
      display: grid;
      gap: 10px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--surface-soft);
      padding: 12px;
    }
    .plate-fields[hidden] { display: none; }
    .custom-size-fields {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px 12px;
      padding: 12px;
      border: 1px solid #efb8b8;
      border-radius: var(--radius);
      background: rgba(204, 251, 241, 0.34);
    }
    .custom-size-fields[hidden] { display: none; }
    .finish-detail-group {
      display: grid;
      gap: 10px;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--surface);
    }
    .finish-detail-title {
      font-weight: 700;
      color: var(--navy);
      font-size: 13px;
    }
    .finish-detail-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 10px 12px;
    }
    button {
      border: 0;
      border-radius: 4px;
      background: var(--teal);
      color: #fff;
      padding: 10px 14px;
      font: inherit;
      font-weight: 700;
      cursor: pointer;
      min-height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
    }
    button:hover {
      background: var(--teal-dark);
      box-shadow: 0 10px 20px rgba(200, 55, 55, 0.18);
      transform: translateY(-1px);
    }
    button.secondary { background: var(--navy); }
    .price {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 14px;
    }
    .metric { background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
    .metric-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .metric span { color: var(--muted); font-size: 13px; }
    .metric strong { display: block; margin-top: 4px; font-size: 24px; }
    .metric-icon {
      color: var(--teal);
      opacity: .92;
    }
    .metric.primary {
      grid-column: 1 / -1;
      background:
        linear-gradient(135deg, rgba(200, 55, 55, 0.22), rgba(200, 55, 55, 0) 42%),
        var(--navy);
      color: #fff;
      border-color: var(--navy);
      padding: 20px;
      overflow: hidden;
      position: relative;
    }
    .metric.primary::after {
      position: absolute;
      right: -34px;
      top: -42px;
      width: 120px;
      height: 120px;
      content: "";
      border-radius: 50%;
      border: 1px solid rgba(255, 215, 215, 0.22);
      background: rgba(255, 215, 215, 0.08);
    }
    .metric.primary span { color: #dce7ee; }
    .metric.primary strong { font-size: 38px; letter-spacing: 0; }
    .metric.primary .metric-icon { color: #ffd7d7; }
    .usd-price {
      display: block;
      margin-top: 10px;
      color: #ffd7d7;
      font-size: 16px;
      font-weight: 800;
      line-height: 1.15;
    }
    .quote-detail-row {
      display: grid;
      grid-column: 1 / -1;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .quote-detail-row .metric strong {
      font-size: 20px;
      line-height: 1.15;
    }
    .quote-note {
      grid-column: 1 / -1;
      border: 1px solid var(--line);
      border-left: 3px solid var(--teal);
      border-radius: var(--radius);
      background: var(--surface-soft);
      padding: 10px 12px;
      color: var(--ink);
      font-size: 13px;
      line-height: 1.5;
    }
    .quote-note strong {
      display: block;
      margin-bottom: 2px;
      color: var(--navy);
    }
    .lead-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin: 12px 0 14px;
    }
    .lead-action {
      min-height: 44px;
      border: 1px solid var(--line-strong);
      background: var(--surface);
      color: var(--ink);
      box-shadow: none;
    }
    .lead-action svg { color: var(--teal); }
    .lead-action:hover {
      transform: none;
      box-shadow: none;
      background: var(--surface-soft);
    }
    .lead-action.active {
      border-color: var(--teal);
      background: var(--teal-soft);
      color: var(--teal-dark);
      box-shadow: inset 0 0 0 1px rgba(200, 55, 55, 0.12);
    }
    .lead-email-action {
      width: 100%;
      min-height: 46px;
      margin-bottom: 14px;
      background: var(--teal);
    }
    .lead-email-action.active { background: var(--teal-dark); }
    .lead-form {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px 10px;
    }
    .lead-field {
      display: grid;
      grid-template-columns: 1fr;
      align-items: start;
      gap: 5px;
      color: #25303b;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.2;
      min-width: 0;
    }
    .lead-caption {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      white-space: nowrap;
    }
    .lead-field b {
      color: var(--bad);
      font-weight: 800;
    }
    .lead-form input,
    .lead-form select,
    .lead-form textarea {
      min-height: 38px;
      border-radius: 4px;
      border-color: #c8d3dc;
      background: #fbfdfe;
      padding: 8px 9px;
      font-size: 13px;
    }
    .lead-form input:focus,
    .lead-form select:focus,
    .lead-form textarea:focus {
      background: #fff;
    }
    .lead-form textarea {
      min-height: 66px;
      resize: vertical;
    }
    .lead-detail-fields {
      display: grid;
      grid-column: 1 / -1;
      grid-template-columns: 1fr 0.68fr 0.78fr;
      gap: 10px 10px;
    }
    .lead-choice-grid {
      display: none;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .lead-choice {
      position: relative;
      display: block;
      cursor: pointer;
    }
    .lead-choice input {
      position: absolute;
      inset: 0;
      opacity: 0;
      pointer-events: none;
    }
    .lead-choice span {
      min-height: 38px;
      border: 1px solid #cfd8df;
      border-radius: 3px;
      background: #fff;
      color: var(--ink);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 800;
      transition: border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease;
    }
    .lead-choice input:checked + span {
      border-color: var(--teal);
      background: var(--teal-soft);
      color: var(--teal-dark);
      box-shadow: inset 0 0 0 1px rgba(200, 55, 55, 0.12);
    }
    .lead-inline[data-lead-mode="email"] .lead-detail-fields,
    .lead-inline[data-lead-mode="email"] .lead-contact-field,
    .lead-inline[data-lead-mode="email"] .lead-message-field {
      display: none;
    }
    .lead-inline[data-lead-mode="question"] .lead-detail-fields {
      display: none;
    }
    .lead-form button {
      grid-column: 1 / -1;
      min-height: 42px;
      border-radius: 4px;
      margin-top: 0;
      box-shadow: 0 10px 18px rgba(200, 55, 55, 0.16);
    }
    .lead-status {
      grid-column: 1 / -1;
      min-height: 15px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.25;
    }
    .lead-status:empty {
      display: none;
      min-height: 0;
    }
    .lead-status.ok { color: var(--ok); }
    .lead-status.bad { color: var(--bad); }
    .summary-list {
      display: grid;
      gap: 8px;
      margin: 14px 0;
    }
    .summary-item {
      display: grid;
      grid-template-columns: 22px 76px minmax(0, 1fr);
      gap: 10px;
      border-bottom: 1px solid var(--line);
      padding-bottom: 8px;
      font-size: 13px;
      align-items: center;
    }
    .summary-icon { color: var(--teal); }
    .summary-item span { color: var(--muted); }
    .summary-item strong { color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
    .hidden-output { display: none; }
    .ok { color: var(--ok); }
    .warn { color: var(--amber); }
    .bad { color: var(--bad); }
    h2 { margin: 0 0 12px; font-size: 18px; }
    h3 { margin: 18px 0 9px; font-size: 15px; color: var(--navy); }
    table { width: 100%; border-collapse: collapse; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
    th, td { text-align: left; border-bottom: 1px solid #edf2f7; padding: 8px 9px; font-size: 13px; vertical-align: top; }
    th { background: #eef3f6; color: var(--navy); }
    tr:last-child td { border-bottom: 0; }
    .note { color: var(--muted); font-size: 13px; line-height: 1.45; }
    .status { margin-top: 12px; padding: 10px 12px; border-radius: 4px; background: var(--amber-soft); color: #7c5a00; border: 1px solid #f0d58c; }
    .status.okbox { background: var(--teal-soft); color: var(--ok); border-color: #efb8b8; }
    .mobile-quote-bar {
      display: none;
      position: fixed;
      left: 10px;
      right: 10px;
      bottom: 10px;
      z-index: 30;
      background: var(--navy);
      color: #fff;
      border-radius: var(--radius);
      box-shadow: 0 18px 38px rgba(16, 42, 67, 0.28);
      padding: 10px;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
    }
    .mobile-quote-bar span { display: block; font-size: 12px; color: #dce7ee; }
    .mobile-usd-price {
      display: block;
      margin-top: 2px;
      color: #ffd7d7;
      font-size: 12px;
      font-style: normal;
      font-weight: 800;
      line-height: 1.15;
    }
    .mobile-quote-bar strong { display: block; font-size: 18px; }
    .mobile-quote-bar button { min-height: 36px; padding: 8px 12px; }
    body.lead-inline-open .mobile-quote-bar {
      opacity: 0;
      pointer-events: none;
      transform: translateY(12px);
    }
    pre { background: var(--navy); color: #d9e2ec; border-radius: var(--radius); padding: 12px; overflow: auto; max-height: 320px; }
    @media (max-width: 900px) {
      header { position: static; }
      .topbar { padding: 12px; }
      .topbar-note { display: none; }
      main { padding: 10px 10px 84px; overflow-x: hidden; }
      .quote-intro {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 20px;
      }
      .quote-intro h1 {
        font-size: 34px;
      }
      .quote-section-label {
        display: grid;
        gap: 4px;
      }
      .layout { grid-template-columns: 1fr; }
      .product-tabs { grid-template-columns: 1fr 1fr; }
      .flow-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .panel { padding: 15px; }
      .panel-title { display: grid; }
      .panel-title p { text-align: left; }
      .quote-panel .panel-title {
        display: flex;
        align-items: flex-start;
      }
      .form-grid,
      .spec-main,
      .lead-form,
      .lead-detail-fields,
      .custom-size-fields,
      .plate-fields,
      .finish-detail-grid {
        grid-template-columns: 1fr;
      }
      .lead-field {
        grid-template-columns: 1fr;
        gap: 3px;
      }
      table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
      }
      .metric.primary strong { font-size: 28px; }
      .quote-panel {
        position: static;
        max-height: none;
        overflow: visible;
      }
      .mobile-quote-bar { display: grid; }
    }
    @media (max-width: 560px) {
      .product-tabs,
      .lead-actions,
      .price { grid-template-columns: 1fr; }
      .quote-intro h1 { font-size: 30px; }
      .flow-rail { grid-template-columns: 1fr 1fr; }
      .product-tab { grid-template-columns: 92px minmax(0, 1fr); }
      .product-tab img { width: 92px; height: 62px; }
      .visual-card-grid,
      .visual-card-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .metric.primary { grid-column: auto; }
    }

    /* Keep the global quote page's legacy layout while matching the shared inquiry form. */
    .lead-actions {
      grid-template-columns: 1fr;
    }
    .lead-action {
      width: 100%;
      white-space: normal;
      line-height: 1.25;
      text-align: center;
      flex-wrap: wrap;
    }
    .lead-action svg { flex: 0 0 auto; }
    .lead-contact-field,
    .lead-message-field {
      grid-column: 1 / -1;
    }
    .lead-caption {
      min-width: 0;
      white-space: normal;
    }
    .lead-detail-fields {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .lead-address-field {
      grid-column: 1 / -1;
    }
    @media (max-width: 900px) {
      .lead-detail-fields { grid-template-columns: 1fr; }
    }