.quote-app{
      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);
    }.quote-app{ box-sizing: border-box; }.quote-app [hidden]{ display: none !important; }.quote-app{ scroll-behavior: smooth; }.quote-app{ margin: 0; background: var(--bg); }.quote-app 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);
    }.quote-app .topbar{
      max-width: 1320px;
      margin: 0 auto;
      padding: 14px 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }.quote-app .brand{
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }.quote-app .brand-mark{
      width: 34px;
      height: 34px;
      border-radius: 5px;
      background: var(--navy);
      color: #fff;
      display: grid;
      place-items: center;
      font-weight: 800;
      letter-spacing: 0;
    }.quote-app .brand-mark svg, .quote-app button svg, .quote-app .summary-icon svg, .quote-app .metric-icon svg{
      width: 18px;
      height: 18px;
      display: block;
      stroke: currentColor;
      stroke-width: 2;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }.quote-app h1, .quote-app h2{ margin: 0; letter-spacing: 0; color: var(--ink); }.quote-app .brand-title{ font-size: 18px; font-weight: 800; color: var(--ink); }.quote-app .topbar-note{ color: var(--muted); font-size: 13px; white-space: nowrap; }.quote-app main, .quote-app .quote-app-main{ max-width: 1320px; margin: 0 auto; padding: 22px; }.quote-app .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-app .quote-intro h1, .quote-app .quote-intro h2{
      max-width: 760px;
      margin-bottom: 10px;
      color: var(--navy);
      font-size: clamp(34px, 4vw, 50px);
      line-height: 1.02;
      letter-spacing: 0;
    }.quote-app .quote-intro p{
      max-width: 780px;
      margin: 0;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.6;
    }.quote-app .quote-intro-facts{
      display: grid;
      gap: 9px;
      margin: 0;
      padding: 0;
      list-style: none;
    }.quote-app .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-app .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-app .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-app .quote-section-label strong{
      color: var(--navy);
      font-size: 16px;
    }.quote-app .book-art{
      width: 310px;
      max-width: 88%;
      height: auto;
      display: block;
      filter: drop-shadow(0 20px 24px rgba(0, 0, 0, 0.18));
    }.quote-app .product-tabs{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin: 8px 0 16px;
    }.quote-app .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;
    }.quote-app .product-tab img{
      width: 116px;
      height: 78px;
      border-radius: 4px;
      object-fit: cover;
      border: 1px solid var(--line);
      background: var(--surface-soft);
    }.quote-app .product-tab-text{ display: grid; gap: 4px; min-width: 0; }.quote-app .product-tab strong{ font-size: 14px; color: var(--ink); }.quote-app .product-tab span{ font-size: 12px; color: var(--muted); }.quote-app .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);
    }.quote-app .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);
    }.quote-app .product-tab.locked{ opacity: 0.62; }.quote-app .flow-rail{
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 8px;
      margin: -4px 0 18px;
    }.quote-app .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);
    }.quote-app .flow-step:hover{
      border-color: var(--teal);
      background: var(--teal-soft);
      color: var(--teal-dark);
      box-shadow: none;
      transform: none;
    }.quote-app .flow-step span{
      color: var(--teal);
      font-size: 12px;
      font-weight: 800;
    }.quote-app .layout{
      display: grid;
      grid-template-columns: minmax(560px, 760px) minmax(340px, 1fr);
      gap: 20px;
      align-items: start;
      min-width: 0;
    }.quote-app .panel{
      min-width: 0;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 20px;
      box-shadow: var(--shadow);
    }.quote-app .panel-title{
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 16px;
    }.quote-app .panel-title h2{ margin: 0; }.quote-app .panel-title p{
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
      text-align: right;
    }.quote-app .quote-panel{
      position: sticky;
      top: 78px;
      max-height: calc(100vh - 94px);
      overflow-y: auto;
      scrollbar-gutter: stable;
      padding: 22px;
    }.quote-app .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;
    }.quote-app .lead-inline[hidden]{ display: none; }.quote-app .quote-panel.lead-form-open .lead-actions, .quote-app .quote-panel.lead-form-open .lead-email-action{
      display: none;
    }.quote-app .lead-inline-head{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }.quote-app .lead-inline-head h3{
      margin: 0;
      color: var(--navy);
      font-size: 15px;
      line-height: 1.15;
    }.quote-app .lead-inline-head p{
      margin: 2px 0 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.25;
    }.quote-app .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;
    }.quote-app .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); }
    }.quote-app .form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }.quote-app label{ display: grid; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 600; }.quote-app input, .quote-app select, .quote-app 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;
    }.quote-app textarea{ resize: vertical; line-height: 1.45; }.quote-app input:focus, .quote-app select:focus, .quote-app textarea:focus{
      border-color: var(--teal);
      box-shadow: 0 0 0 3px rgba(200, 55, 55, 0.12);
    }.quote-app .full{ grid-column: 1 / -1; }.quote-app .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;
    }.quote-app .row-title::before{
      content: "";
      width: 22px;
      height: 22px;
      border-radius: 4px;
      background: var(--teal-soft);
      border: 1px solid #efb8b8;
    }.quote-app .readonly{
      background: var(--surface-soft);
      color: var(--muted);
    }.quote-app .spec-control{
      grid-column: 1 / -1;
      display: grid;
      gap: 10px;
    }.quote-app .spec-main{
      display: grid;
      grid-template-columns: 240px minmax(0, 1fr);
      gap: 14px;
      align-items: start;
    }.quote-app .quantity-block, .quote-app .size-block{
      display: grid;
      gap: 8px;
      min-width: 0;
    }.quote-app .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;
    }.quote-app .field-head label{
      display: inline;
      gap: 0;
      color: inherit;
      font-size: inherit;
      font-weight: inherit;
    }.quote-app .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;
    }.quote-app .stepper-input:focus-within{
      border-color: var(--teal);
      box-shadow: 0 0 0 3px rgba(200, 55, 55, 0.12);
    }.quote-app .stepper-input input{
      min-height: 42px;
      border: 0;
      border-radius: 0;
      text-align: center;
      font-weight: 700;
      box-shadow: none;
    }.quote-app .stepper-input input:focus{
      box-shadow: none;
    }.quote-app .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;
    }.quote-app .stepper-button:hover{
      transform: none;
      background: var(--surface-soft);
      box-shadow: none;
    }.quote-app .stepper-button:first-child{ border-right: 1px solid var(--line); }.quote-app .stepper-button:last-child{ border-left: 1px solid var(--line); }.quote-app .stepper-button:disabled{
      cursor: not-allowed;
      color: #b9c4d1;
      background: var(--surface-soft);
    }.quote-app .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;
    }.quote-app .text-button:hover{
      transform: none;
      background: transparent;
      color: var(--navy);
      box-shadow: none;
    }.quote-app .actions{ display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; align-items: center; }.quote-app .check-grid{
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 8px;
    }.quote-app .binding-card-grid{
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
      gap: 8px;
    }.quote-app[data-quote-mode="softcover"] .binding-card-grid{
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 9px;
    }.quote-app .visual-card-grid{
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 10px;
    }.quote-app .visual-card-grid.compact{
      grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    }.quote-app .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;
    }.quote-app .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;
    }.quote-app .binding-card:hover, .quote-app .visual-card:hover{
      border-color: var(--line-strong);
      background: var(--surface-soft);
      transform: translateY(-1px);
    }.quote-app .binding-card.active, .quote-app .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);
    }.quote-app .visual-card img{
      width: 100%;
      aspect-ratio: 16 / 10;
      object-fit: cover;
      border-radius: 4px;
      border: 1px solid var(--line);
      background: var(--surface-soft);
    }.quote-app .visual-card-grid.compact .visual-card{
      min-height: 128px;
    }.quote-app .visual-card-grid.compact .visual-card img{
      aspect-ratio: 3 / 2;
      object-fit: contain;
      padding: 6px;
      background: linear-gradient(135deg, #ffffff, #f3f7fa);
    }.quote-app .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);
    }.quote-app .binding-card strong, .quote-app .visual-card strong{
      font-size: 13px;
      line-height: 1.2;
    }.quote-app .binding-card strong{ align-self: end; }.quote-app .binding-card span, .quote-app .visual-card span{
      font-size: 12px;
      color: var(--muted);
      line-height: 1.35;
    }.quote-app .visual-card span{
      min-height: 32px;
    }.quote-app .binding-card span{ align-self: start; }.quote-app[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;
    }.quote-app[data-quote-mode="softcover"] .binding-card img{
      grid-row: auto;
      width: 100%;
      height: auto;
      aspect-ratio: 4 / 3;
    }.quote-app[data-quote-mode="softcover"] .binding-card strong, .quote-app[data-quote-mode="softcover"] .binding-card span{
      align-self: auto;
    }.quote-app .thickness-grid{
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
      gap: 8px;
    }.quote-app .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;
    }.quote-app .thickness-option:hover{
      border-color: var(--line-strong);
      background: var(--surface-soft);
      transform: translateY(-1px);
    }.quote-app .thickness-option.active{
      border-color: var(--teal);
      background: var(--teal-soft);
      box-shadow: inset 0 0 0 1px rgba(200, 55, 55, .16);
    }.quote-app .thickness-option strong{
      font-size: 18px;
      line-height: 1.1;
    }.quote-app .thickness-option span{
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }.quote-app .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;
    }.quote-app .range-head{
      display: flex;
      justify-content: space-between;
      gap: 12px;
      color: var(--muted);
      font-size: 12px;
    }.quote-app input[type="range"]{
      min-height: 24px;
      padding: 0;
      border: 0;
      accent-color: var(--teal);
      background: transparent;
      box-shadow: none;
    }.quote-app .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;
    }.quote-app .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;
    }.quote-app .check-item:hover{
      border-color: var(--line-strong);
      background: var(--surface-soft);
    }.quote-app .check-item.selected{
      border-color: var(--teal);
      background: var(--teal-soft);
      box-shadow: 0 0 0 1px rgba(200, 55, 55, 0.12);
    }.quote-app .check-item input{
      width: auto;
      min-height: 0;
      margin: 0;
      accent-color: #c83737;
    }.quote-app .check-item span{
      display: grid;
      gap: 3px;
      line-height: 1.25;
    }.quote-app .check-item strong{
      font-size: 14px;
      font-weight: 800;
    }.quote-app .check-item small{ color: var(--muted); }.quote-app #extra_finishing{
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 9px;
    }.quote-app #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;
    }.quote-app #extra_finishing .check-item img{
      grid-column: 1 / -1;
      width: 100%;
      height: 78px;
      object-fit: cover;
    }.quote-app #extra_finishing .check-item input{
      grid-column: 1;
      margin-top: 1px;
    }.quote-app #extra_finishing .check-item span{
      grid-column: 2;
    }.quote-app .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;
    }.quote-app .plate-fields[hidden]{ display: none; }.quote-app .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);
    }.quote-app .custom-size-fields[hidden]{ display: none; }.quote-app .finish-detail-group{
      display: grid;
      gap: 10px;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--surface);
    }.quote-app .finish-detail-title{
      font-weight: 700;
      color: var(--navy);
      font-size: 13px;
    }.quote-app .finish-detail-grid{
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 10px 12px;
    }.quote-app 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;
    }.quote-app button:hover{
      background: var(--teal-dark);
      box-shadow: 0 10px 20px rgba(200, 55, 55, 0.18);
      transform: translateY(-1px);
    }.quote-app button.secondary{ background: var(--navy); }.quote-app .price{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 14px;
    }.quote-app .metric{ background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }.quote-app .metric-head{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }.quote-app .metric span{ color: var(--muted); font-size: 13px; }.quote-app .metric strong{ display: block; margin-top: 4px; font-size: 24px; }.quote-app .metric-icon{
      color: var(--teal);
      opacity: .92;
    }.quote-app .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;
    }.quote-app .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);
    }.quote-app .metric.primary span{ color: #dce7ee; }.quote-app .metric.primary strong{ font-size: 38px; letter-spacing: 0; }.quote-app .metric.primary .metric-icon{ color: #ffd7d7; }.quote-app .usd-price{
      display: block;
      margin-top: 10px;
      color: #ffd7d7;
      font-size: 16px;
      font-weight: 800;
      line-height: 1.15;
    }.quote-app .quote-detail-row{
      display: grid;
      grid-column: 1 / -1;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }.quote-app .quote-detail-row .metric strong{
      font-size: 20px;
      line-height: 1.15;
    }.quote-app .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-app .quote-note strong{
      display: block;
      margin-bottom: 2px;
      color: var(--navy);
    }.quote-app .lead-actions{
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      margin: 12px 0 14px;
    }.quote-app .lead-action{
      min-height: 44px;
      border: 1px solid var(--line-strong);
      background: var(--surface);
      color: var(--ink);
      box-shadow: none;
      white-space: normal;
      line-height: 1.25;
      text-align: center;
      flex-wrap: wrap;
    }.quote-app .lead-action svg{
      flex: 0 0 auto;
      color: var(--teal);
    }.quote-app .lead-action:hover{
      transform: none;
      box-shadow: none;
      background: var(--surface-soft);
    }.quote-app .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);
    }.quote-app .lead-email-action{
      width: 100%;
      min-height: 46px;
      margin-bottom: 14px;
      background: var(--teal);
    }.quote-app .lead-email-action.active{ background: var(--teal-dark); }.quote-app .lead-form{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px 10px;
    }.quote-app .lead-contact-field, .quote-app .lead-message-field{
      grid-column: 1 / -1;
    }.quote-app .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;
    }.quote-app .lead-caption{
      display: inline-flex;
      align-items: center;
      gap: 3px;
      min-width: 0;
      white-space: normal;
    }.quote-app .lead-field b{
      color: var(--bad);
      font-weight: 800;
    }.quote-app .lead-form input, .quote-app .lead-form select, .quote-app .lead-form textarea{
      min-height: 38px;
      border-radius: 4px;
      border-color: #c8d3dc;
      background: #fbfdfe;
      padding: 8px 9px;
      font-size: 13px;
    }.quote-app .lead-form input:focus, .quote-app .lead-form select:focus, .quote-app .lead-form textarea:focus{
      background: #fff;
    }.quote-app .lead-form textarea{
      min-height: 66px;
      resize: vertical;
    }.quote-app .lead-detail-fields{
      display: grid;
      grid-column: 1 / -1;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px 10px;
    }.quote-app .lead-address-field{
      grid-column: 1 / -1;
    }.quote-app .lead-inline[data-lead-mode="email"] .lead-detail-fields, .quote-app .lead-inline[data-lead-mode="email"] .lead-contact-field, .quote-app .lead-inline[data-lead-mode="email"] .lead-message-field{
      display: none;
    }.quote-app .lead-inline[data-lead-mode="question"] .lead-detail-fields{
      display: none;
    }.quote-app .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);
    }.quote-app .lead-status{
      grid-column: 1 / -1;
      min-height: 15px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.25;
    }.quote-app .lead-status:empty{
      display: none;
      min-height: 0;
    }.quote-app .lead-status.ok{ color: var(--ok); }.quote-app .lead-status.bad{ color: var(--bad); }.quote-app .summary-list{
      display: grid;
      gap: 8px;
      margin: 14px 0;
    }.quote-app .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;
    }.quote-app .summary-icon{ color: var(--teal); }.quote-app .summary-item span{ color: var(--muted); }.quote-app .summary-item strong{ color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }.quote-app .hidden-output{ display: none; }.quote-app .ok{ color: var(--ok); }.quote-app .warn{ color: var(--amber); }.quote-app .bad{ color: var(--bad); }.quote-app h2{ margin: 0 0 12px; font-size: 18px; }.quote-app h3{ margin: 18px 0 9px; font-size: 15px; color: var(--navy); }.quote-app table{ width: 100%; border-collapse: collapse; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }.quote-app th, .quote-app td{ text-align: left; border-bottom: 1px solid #edf2f7; padding: 8px 9px; font-size: 13px; vertical-align: top; }.quote-app th{ background: #eef3f6; color: var(--navy); }.quote-app tr:last-child td{ border-bottom: 0; }.quote-app .note{ color: var(--muted); font-size: 13px; line-height: 1.45; }.quote-app .status{ margin-top: 12px; padding: 10px 12px; border-radius: 4px; background: var(--amber-soft); color: #7c5a00; border: 1px solid #f0d58c; }.quote-app .status.okbox{ background: var(--teal-soft); color: var(--ok); border-color: #efb8b8; }.quote-app .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;
    }.quote-app .mobile-quote-bar span{ display: block; font-size: 12px; color: #dce7ee; }.quote-app .mobile-usd-price{
      display: block;
      margin-top: 2px;
      color: #ffd7d7;
      font-size: 12px;
      font-style: normal;
      font-weight: 800;
      line-height: 1.15;
    }.quote-app .mobile-quote-bar strong{ display: block; font-size: 18px; }.quote-app .mobile-quote-bar button{ min-height: 36px; padding: 8px 12px; }.quote-app body.lead-inline-open .mobile-quote-bar{
      opacity: 0;
      pointer-events: none;
      transform: translateY(12px);
    }.quote-app pre{ background: var(--navy); color: #d9e2ec; border-radius: var(--radius); padding: 12px; overflow: auto; max-height: 320px; }
    @media (max-width: 900px) {.quote-app header{ position: static; }.quote-app .topbar{ padding: 12px; }.quote-app .topbar-note{ display: none; }.quote-app main, .quote-app .quote-app-main{ padding: 10px 10px 84px; overflow-x: hidden; }.quote-app .quote-intro{
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 20px;
      }.quote-app .quote-intro h1, .quote-app .quote-intro h2{
        font-size: 34px;
      }.quote-app .quote-section-label{
        display: grid;
        gap: 4px;
      }.quote-app .layout{ grid-template-columns: 1fr; }.quote-app .product-tabs{ grid-template-columns: 1fr 1fr; }.quote-app .flow-rail{ grid-template-columns: repeat(3, minmax(0, 1fr)); }.quote-app .panel{ padding: 15px; }.quote-app .panel-title{ display: grid; }.quote-app .panel-title p{ text-align: left; }.quote-app .quote-panel .panel-title{
        display: flex;
        align-items: flex-start;
      }.quote-app .form-grid, .quote-app .spec-main, .quote-app .lead-form, .quote-app .lead-detail-fields, .quote-app .custom-size-fields, .quote-app .plate-fields, .quote-app .finish-detail-grid{
        grid-template-columns: 1fr;
      }.quote-app .lead-field{
        grid-template-columns: 1fr;
        gap: 3px;
      }.quote-app table{
        display: block;
        overflow-x: auto;
        white-space: nowrap;
      }.quote-app .metric.primary strong{ font-size: 28px; }.quote-app .quote-panel{
        position: static;
        max-height: none;
        overflow: visible;
      }.quote-app .mobile-quote-bar{ display: grid; }
    }
    @media (max-width: 560px) {.quote-app .product-tabs, .quote-app .lead-actions, .quote-app .price{ grid-template-columns: 1fr; }.quote-app .quote-intro h1, .quote-app .quote-intro h2{ font-size: 30px; }.quote-app .flow-rail{ grid-template-columns: 1fr 1fr; }.quote-app .product-tab{ grid-template-columns: 92px minmax(0, 1fr); }.quote-app .product-tab img{ width: 92px; height: 62px; }.quote-app .visual-card-grid, .quote-app .visual-card-grid.compact{ grid-template-columns: repeat(2, minmax(0, 1fr)); }.quote-app .metric.primary{ grid-column: auto; }
    }.quote-app.quote-page-integrated{
      background: transparent;
    }.quote-app.quote-page-integrated header, .quote-app.quote-page-integrated .flow-rail, .quote-app.quote-page-integrated .mobile-quote-bar{
      display: none !important;
    }.quote-app.quote-page-integrated main{
      width: 100%;
      margin: 0;
      padding: 0;
    }.quote-app.quote-page-integrated .layout{
      grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
      gap: 18px;
      align-items: start;
    }.quote-app.quote-page-integrated .panel{
      box-shadow: none;
    }
    @media (max-width: 980px) {.quote-app.quote-page-integrated .layout{
        grid-template-columns: 1fr;
      }
    }
  

.quote-app.quote-page-integrated .quote-intro,
.quote-app.quote-page-integrated > main > .quote-section-label:first-of-type,
.quote-app.quote-page-integrated > main > .quote-section-label:nth-of-type(2),
.quote-app.quote-page-integrated .flow-rail,
.quote-app.quote-page-integrated .mobile-quote-bar {
  display: none !important;
}
.quote-app.quote-mode-locked .product-tabs {
  display: none !important;
}
.quote-app.quote-page-integrated > main {
  padding: 0;
}
.quote-app.quote-page-integrated .layout {
  margin-top: 0;
}

/* The all-products calculator has inline baseline styles; this ID selector keeps
   its right quote panel sticky after the shared stylesheet is loaded. */
@media (min-width: 981px) {
  .quote-page-global .layout > #quote-panel {
    position: sticky;
    top: 84px;
    align-self: start;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}