/* Estimate + invoice builder (portal/quote.js) */
/* rows */
#bpx .qb-rows{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
#bpx .qb-rh{display:grid;gap:8px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#98a2b3;padding:0 2px}
#bpx .qb-r{display:grid;gap:8px;align-items:center}
#bpx .qb-lab{grid-template-columns:minmax(0,2.4fr) 70px 90px 100px 90px 30px}
#bpx .qb-oth{grid-template-columns:minmax(0,2fr) minmax(0,1fr) 130px 30px}
#bpx .qb-il{grid-template-columns:minmax(0,2.6fr) 80px 110px 100px 30px}
#bpx .qb-r input,#bpx .qb-r select{padding:8px 9px !important;font-size:13px !important}
#bpx .qb-who{display:flex;gap:6px;min-width:0}#bpx .qb-who select{flex:0 0 42%;min-width:0}
#bpx .qb-lc,#bpx .qb-il b{font-size:13.5px;text-align:right;font-variant-numeric:tabular-nums}
#bpx .qb-money{display:flex;align-items:center;gap:4px;margin:0;font-size:13px;color:#6b7280}
#bpx .qb-x{all:unset;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:#98a2b3;font-size:20px;cursor:pointer}
#bpx .qb-x:hover{background:#fef2f2;color:#dc2626}
#bpx .qb-adds{display:flex;gap:6px;flex-wrap:wrap}
#bpx .qb-add{display:inline-flex;align-items:center;gap:5px;border:1px dashed #c9d3ea;background:#f8faff;color:#2457d6;border-radius:10px;padding:8px 13px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;width:auto;margin:0}
#bpx .qb-add .ms{font-size:18px}#bpx .qb-add:hover{background:#eef3ff}
#bpx .qb-chip{border:1px solid #e4e7ec;background:#fff;color:#344054;border-radius:999px;padding:6px 12px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;width:auto;margin:0}
#bpx .qb-chip:hover{border-color:#c9d3ea;background:#f8faff;color:#2457d6}
#bpx .qb-from{display:flex;align-items:center;gap:10px;background:#f8faff;border:1px solid #dbe5ff;border-radius:12px;padding:10px 12px;margin-top:4px}
#bpx .qb-from .ms{color:#2457d6}#bpx .qb-from div{flex:1;min-width:0;display:flex;flex-direction:column}#bpx .qb-from b{font-size:13.5px}#bpx .qb-from span{font-size:12px;color:#6b7280}
#bpx .qb-from a{font-size:12.5px;font-weight:600;color:#2457d6;cursor:pointer;white-space:nowrap}
/* segmented */
#bpx .qb-seg{display:inline-flex;background:#f1f3f7;border-radius:10px;padding:3px;gap:2px;margin-bottom:12px;flex-wrap:wrap}
#bpx .qb-seg button{all:unset;padding:7px 12px;border-radius:8px;font-size:12.5px;font-weight:600;color:#475467;cursor:pointer}
#bpx .qb-seg button.on{background:#fff;color:#101828;box-shadow:0 1px 2px rgba(16,24,40,.12)}
#bpx .qb-msg{font-size:12.5px;min-height:0;margin-top:10px}#bpx .qb-msg.err{color:#dc2626}#bpx .qb-msg.ok{color:#475467}
#bpx .qb-acts{display:flex;gap:8px;margin-top:12px}
#bpx .qb-b{all:unset;box-sizing:border-box;flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:42px;padding:0 12px;border-radius:11px;font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap}
#bpx .qb-b .ms{font-size:18px}
#bpx .qb-b.pri{background:#2457d6;color:#fff}#bpx .qb-b.pri:hover{filter:brightness(1.08)}#bpx .qb-b:disabled{opacity:.55;cursor:default}
#bpx .qb-b.ghost{border:1px solid #dfe3eb;background:#fff;color:#101828}#bpx .qb-b.ghost:hover{background:#f6f7fa}
#bpx .qb-b.wide{width:100%;margin-top:8px}
#bpx .qb-foot{display:flex;justify-content:space-between;gap:10px;margin-top:12px;font-size:12px;flex-wrap:wrap}
#bpx .qb-foot a{color:#2457d6;cursor:pointer;font-weight:600}#bpx .qb-foot a.del{color:#98a2b3}#bpx .qb-foot a.del:hover{color:#dc2626}
/* the materials editor inside a sheet */
#bpx #qb-mat .ml-ed{margin:0}
#bpx .qb-sheets{margin-bottom:14px}
/* the customer's document */
#bpx .qb-doc{background:#fff;border:1px solid #e7eaf1;box-shadow:0 10px 34px rgba(20,30,60,.10);padding:24px 26px;font-size:12px;color:#374151;border-radius:6px;margin:6px 0 4px}
#bpx .qb-dt{text-align:right;font-size:28px;font-weight:600;color:#111827;line-height:1}
#bpx .qb-dl{border-top:1.5px solid #111827;margin:10px 0 12px}
#bpx .qb-da{text-align:right;color:#4b5563;font-size:11.5px;line-height:1.7}
#bpx .qb-dm{display:flex;gap:24px;margin-top:20px;flex-wrap:wrap}#bpx .qb-dm div{flex:1;min-width:110px;display:flex;flex-direction:column;gap:4px}#bpx .qb-dm b{color:#111827}
#bpx .qb-dtt{font-size:15px;font-weight:700;color:#111827;margin-top:20px}
#bpx .qb-dds{color:#4b5563;margin-top:4px;line-height:1.55}
#bpx .qb-dtb{width:100%;border-collapse:collapse;margin-top:16px}
#bpx .qb-dtb th{text-align:left;font-size:10px;letter-spacing:.05em;text-transform:uppercase;padding:0 0 8px;border-bottom:2px solid #2f6bff}
#bpx .qb-dtb td{padding:9px 0;border-bottom:1px solid #eef1f7;vertical-align:top}#bpx .qb-dtb td b{color:#111827;display:block}#bpx .qb-dtb td small{color:#6b7280}
#bpx .qb-dtb .n{text-align:right;white-space:nowrap;padding-left:12px}#bpx .qb-dnone{color:#98a2b3;text-align:center}
#bpx .qb-dsum{margin:12px 0 0 auto;max-width:260px}#bpx .qb-dsum div{display:flex;justify-content:space-between;padding:5px 0}
#bpx .qb-dsum .t{font-weight:700;color:#111827;font-size:13px;border-top:1px solid #d7dbe4;padding-top:9px}
#bpx .qb-dfoot{color:#98a1b2;font-size:10px;text-align:center;margin-top:14px}
@media (max-width:700px){
  #bpx .qb-rh{display:none}
  #bpx .qb-lab{grid-template-columns:1fr 1fr 1fr;grid-template-areas:"who who who" "p h r" "c c x"}
  #bpx .qb-lab .qb-who{grid-column:1/-1}
  #bpx .qb-oth{grid-template-columns:1fr 110px 30px}#bpx .qb-oth select{grid-column:1/-1;grid-row:2}
  #bpx .qb-il{grid-template-columns:1fr 70px 30px}#bpx .qb-il>input:first-child{grid-column:1/-1}
}
#bpx.bpx-dark .qb-chip,#bpx.bpx-dark .qb-b.ghost{background:#141b2b;border-color:#262f45;color:#e6e9f0}
#bpx.bpx-dark .qx input,#bpx.bpx-dark .qx select,#bpx.bpx-dark .qx textarea{background:#10172a;border-color:#2b3550;color:#e6e9f0}
#bpx.bpx-dark .qb-seg{background:#10172a;border-color:#262f45}#bpx.bpx-dark .qb-seg button.on{background:#1f2a44;color:#fff}
#bpx.bpx-dark .qb-n{background:#e6e9f0;color:#0b1220}

/* ---- the builder page (estimate + invoice): the app's own panels, stats and tabs ---- */
#bpx .qx{max-width:1180px}
#bpx .qx-back{display:inline-block;font-size:13px;font-weight:600;color:var(--grey,#667085);cursor:pointer;margin-bottom:8px}
#bpx .qx-back:hover{color:var(--blue,#2457d6)}
#bpx .qx-h{display:flex;align-items:center;gap:10px;min-width:0}
#bpx .qx-h h2{margin:0;font-size:22px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bpx .qx-sent{color:#2457d6;border-color:currentColor}
#bpx .qx-acts{display:flex;gap:8px;flex-wrap:wrap}
#bpx .qx-acts .bpx-btn,#bpx .qx-acts .bpx-addbtn{width:auto;margin:0}
#bpx .qx .qb-msg{margin:-8px 0 12px;font-size:13px}
#bpx .qx .bpx-panel{margin-bottom:14px}
#bpx .qx-f3{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
#bpx .qx-f3 label,#bpx .qx-lab{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:600;color:var(--ink,#344054);margin:0}
#bpx .qx-f3 input,#bpx .qx-f3 select,#bpx .qx-lab textarea{width:100%;margin:0}
#bpx .qx-lab{margin-top:14px}#bpx .qx-lab small{font-weight:400;color:#98a2b3}
#bpx .qx-tabrow{margin:4px 0 10px}
#bpx .qx-tc{font-weight:500;opacity:.75;font-variant-numeric:tabular-nums}
#bpx .qx-ph{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:12px;flex-wrap:wrap}
#bpx .qx-ph .bpx-ptitle{margin:0 0 3px}#bpx .qx-ph p{margin:0;font-size:13px;color:var(--grey,#667085);max-width:600px;line-height:1.5}
#bpx .qx-mk{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink,#344054);margin:0}
#bpx .qx-in{display:flex;align-items:center;border:1px solid var(--line,#dfe3eb);border-radius:10px;background:var(--card,#fff);padding:0 10px}
#bpx .qx-in i{font-style:normal;color:#98a2b3;font-weight:600}
#bpx .qx-mk .qx-in{width:96px}#bpx .qx-in.sm{width:84px;margin-left:auto}
#bpx .qx-pg{display:grid;grid-template-columns:1.1fr 1fr;gap:28px}
#bpx .qx-mt td{vertical-align:middle}#bpx .qx-trow td{border-top:2px solid var(--line,#e4e7ec);font-weight:600}
#bpx .qx-trow b{font-size:17px}
#bpx .qx-seg{margin:6px 0 0}
#bpx .qx-seg button.on{border-color:var(--blue,#2457d6);color:var(--blue,#2457d6);background:#eef3ff}
#bpx .qx-hint{margin:10px 0 0;font-size:12.5px;color:var(--grey,#667085);line-height:1.5}
#bpx .qx-hint a,#bpx .qx-link{color:var(--blue,#2457d6);cursor:pointer;font-weight:600}
#bpx .qx-link{display:inline-block;margin-top:12px;font-size:12.5px}#bpx .qx-link.del{color:#98a2b3}#bpx .qx-link.del:hover{color:#dc2626}
#bpx .qx .qb-rows+.bpx-rowbtn{margin-top:2px}
/* the site's own input rules are strong; inputs sitting inside a % / $ box drop their frame */
#bpx#bpx#bpx#bpx .qx-in input{border:0 !important;box-shadow:none !important;background:transparent !important;padding:9px 4px !important;height:auto !important;min-height:0 !important;margin:0 !important;width:100% !important}
@media (max-width:900px){#bpx .qx-pg{grid-template-columns:1fr}}
@media (max-width:640px){#bpx .qx-acts{width:100%}#bpx .qx-acts .bpx-addbtn{flex:1}#bpx .qx-h h2{font-size:19px}}
#bpx.bpx-dark .qx-seg button.on{background:#16203a}
#bpx .qx-mt{width:100%;border-collapse:collapse;font-size:13.5px}
#bpx .qx-mt th{font-size:12px;font-weight:600;color:var(--grey,#667085);padding:0 8px 8px;text-align:left}
#bpx .qx-mt td{padding:10px 8px;border-top:1px solid var(--line,#eef0f4)}
#bpx .qx-mt .bpx-r{text-align:right}
#bpx .qx-mt+.qx-f3{margin-top:14px}
#bpx .qx-warn{background:#fffbeb;border:1px solid #fde68a;color:#92400e;border-radius:10px;padding:9px 12px;font-size:12.5px;line-height:1.5;margin-bottom:10px}
#bpx .qx-warn[hidden]{display:none}

/* ---- two columns: the work on the left, the summary on the right ---- */
#bpx .qx-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
#bpx .qx-main{min-width:0}
#bpx .qx-side{position:sticky;top:12px}
#bpx .qx .qx-sec{margin-bottom:14px}
#bpx .qx-sec .qx-ph{align-items:center}
#bpx .qx-n{width:26px;height:26px;border-radius:50%;background:#eef2f7;color:#344054;font-size:12.5px;font-weight:700;display:inline-grid;place-items:center;flex:0 0 26px}
#bpx .qx-pt{flex:1;min-width:0}
#bpx .qx-pt p a{color:var(--blue,#2457d6);cursor:pointer;font-weight:600}
#bpx .qx-f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#bpx .qx-f2 label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:600;color:var(--ink,#344054);margin:0;min-width:0}
#bpx .qx-f2 input,#bpx .qx-f2 select,#bpx .qx-lab input{width:100%;margin:0}
#bpx .qx-sum .bpx-ptitle{margin:0 0 10px}
#bpx .qx-st{width:100%;border-collapse:collapse;font-size:13px}
#bpx .qx-st th{font-size:11.5px;font-weight:600;color:#98a2b3;text-align:right;padding:0 0 6px}
#bpx .qx-st td{padding:6px 0;color:#344054;font-variant-numeric:tabular-nums}
#bpx .qx-st td:nth-child(2),#bpx .qx-st td:nth-child(3){text-align:right;white-space:nowrap}
#bpx .qx-st td:nth-child(2){color:#98a2b3;padding-right:14px}
#bpx .qx-st td:nth-child(3){font-weight:600;color:#101828}
#bpx .qx-st small{color:#98a2b3;font-weight:400;margin-left:4px}
#bpx .qx-st tr.sub td{border-top:1px solid var(--line,#eaecf0);padding-top:8px}
#bpx .qx-st2{margin-top:6px}
#bpx .qx-total{display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid #101828;margin-top:8px;padding-top:10px}
#bpx .qx-total span{font-size:13px;font-weight:600}#bpx .qx-total b{font-size:24px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
#bpx .qx-profit{display:flex;justify-content:space-between;font-size:12.5px;color:#475467;margin-top:6px;padding:8px 10px;border-radius:8px;background:#f9fafb}
#bpx .qx-profit.good b{color:#047857}#bpx .qx-profit.ok b{color:#b45309}#bpx .qx-profit.low b{color:#be123c}
#bpx .qx-sb{border-top:1px solid var(--line,#eaecf0);margin-top:14px;padding-top:14px}
#bpx .qx-sum .qx-acts{margin-top:14px}#bpx .qx-sum .qx-acts>*{flex:1}
#bpx .qx-wide{width:100% !important;margin-top:8px !important}
#bpx .qx-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;font-size:12.5px;flex-wrap:wrap}
#bpx .qx-foot a{color:var(--blue,#2457d6);cursor:pointer;font-weight:600}
#bpx .qx-tabs{margin-bottom:12px}
#bpx .qx-taxrow{margin-top:14px;align-items:end}#bpx .qx-taxrow .qx-hint{margin:0 0 10px}
#bpx .pjl-b.qx-del{color:#b42318;border-color:#fecdca}#bpx .pjl-b.qx-del:hover{background:#fef3f2}
@media (max-width:1100px){#bpx .qx-grid{grid-template-columns:1fr}#bpx .qx-side{position:static}}
@media (max-width:640px){#bpx .qx-f2{grid-template-columns:1fr}}
#bpx.bpx-dark .qx-n,#bpx.bpx-dark .qx-profit{background:#1a2234;color:#e6e9f0}#bpx.bpx-dark .qx-total{border-color:#e6e9f0}
#bpx.bpx-dark .qx-st td:nth-child(3){color:#f2f4f7}
/* ---- the estimate / invoice as the customer gets it, first ---- */
#bpx .qx-vgrid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
#bpx .qx-paper{min-width:0}
#bpx .qx-paper .qb-doc{margin:0;padding:34px 38px;font-size:12.5px;border-radius:12px;box-shadow:0 1px 2px rgba(16,24,40,.05);border-color:#eaecf0}
#bpx .qx-priv{position:sticky;top:12px}
#bpx .qx-priv .bpx-ptitle{margin:0 0 10px}
#bpx .qx-done{width:auto !important;margin:0 !important}
@media (max-width:1000px){#bpx .qx-vgrid{grid-template-columns:1fr}#bpx .qx-priv{position:static}}
@media (max-width:560px){#bpx .qx-paper .qb-doc{padding:20px 16px}}

/* fit: the summary goes under the work below 1280px, so the item table has room */
@media (max-width:1280px){#bpx .qx-grid{grid-template-columns:1fr}#bpx .qx-side{position:static}#bpx .qx-sum{max-width:none}}
#bpx .qb-lab{grid-template-columns:minmax(0,2.4fr) 64px 84px 96px minmax(70px,auto) 30px}
#bpx .qb-who{display:flex;gap:6px;min-width:0}#bpx .qb-who select{flex:0 0 46%;min-width:0}#bpx .qb-who.emp select{flex:1 1 100%}#bpx .qb-who input{flex:1;min-width:0}
#bpx .qb-lc,#bpx .qb-il b{white-space:nowrap}
#bpx .qb-il{grid-template-columns:minmax(0,3fr) 72px 104px minmax(84px,auto) 30px}
@media (max-width:700px){
  #bpx .qb-il{grid-template-columns:1fr 1fr auto 30px}#bpx .qb-il>input:first-child{grid-column:1/-1}
  #bpx .qb-lab{grid-template-columns:1fr 1fr 1fr 30px}#bpx .qb-lab .qb-who{grid-column:1/-1}#bpx .qb-lab .qb-lc{grid-column:1/3;text-align:left}
}

/* invoice lines: the unit sits beside the quantity; tabs wrap on phones */
#bpx .qb-qty{position:relative;display:block;min-width:0}#bpx .qb-qty input{width:100%}
#bpx .qb-qty i{position:absolute;right:9px;top:50%;transform:translateY(-50%);font-style:normal;font-size:12px;color:#98a2b3;pointer-events:none}
#bpx#bpx#bpx#bpx#bpx .qb-qty.has-u input{padding-right:36px !important}
#bpx .qx-tabs{flex-wrap:wrap;max-width:100%}
#bpx#bpx#bpx#bpx#bpx .qx-tabs{flex-wrap:wrap !important;max-width:100%}
#bpx .qb-il{grid-template-columns:minmax(0,3fr) 96px 108px minmax(96px,auto) 30px}
@media (max-width:700px){#bpx .qb-il{grid-template-columns:1fr 1fr auto 30px}}

/* Ready to invoice (Invoices page) */
#bpx .qb-shr.on{background:#f8f9fc}
#bpx .qb-ivx{border-top:1px solid #f0f2f6;background:#fbfcfe;padding:16px 18px 18px 70px}
#bpx .qb-ivx-h{display:flex;flex-wrap:wrap;gap:10px 28px;margin-bottom:12px}
#bpx .qb-ivx-h small{display:block;font-size:11px;color:#6b7280;text-transform:uppercase;letter-spacing:.04em}
#bpx .qb-ivx-h b{font-size:13.5px;white-space:nowrap}
#bpx .qb-ivt{width:100%;table-layout:fixed;border-collapse:collapse;font-size:13px;background:#fff;border:1px solid #e9ecf2;border-radius:10px;overflow:hidden}
#bpx .qb-ivt col.q{width:84px}#bpx .qb-ivt col.p{width:112px}#bpx .qb-ivt col.a{width:120px}
#bpx .qb-ivt th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#6b7280;font-weight:600;text-align:left;padding:9px 12px;border-bottom:1px solid #eef0f4}
#bpx .qb-ivt td{padding:9px 12px;border-top:1px solid #f2f4f7;vertical-align:top}
#bpx .qb-ivt td b{font-weight:600;display:block;overflow-wrap:anywhere}#bpx .qb-ivt td small{display:block;color:#6b7280;font-size:11.5px}
#bpx .qb-ivt th:not(:first-child),#bpx .qb-ivt td:not(:first-child){text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
#bpx .qb-ivx-t{margin:10px 0 0 auto;max-width:280px;font-size:13px}
#bpx .qb-ivx-t div{display:flex;justify-content:space-between;gap:16px;padding:4px 0;font-variant-numeric:tabular-nums;white-space:nowrap}
#bpx .qb-ivx-t .t{border-top:1px solid #d0d5dd;margin-top:4px;padding-top:8px;font-weight:700;font-size:14.5px}
#bpx .qb-ivx-a{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:12px}
#bpx .qb-wh{font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.04em;margin:18px 0 8px}
#bpx .qb-wh span{background:#f2f4f7;border-radius:999px;padding:1px 8px;margin-left:4px}
#bpx .qb-wait{opacity:.85}
@media (max-width:760px){#bpx .qb-ivx{padding:14px}#bpx .qb-ivt col.q{width:52px}#bpx .qb-ivt col.p{display:none}#bpx .qb-ivt th:nth-child(3),#bpx .qb-ivt td:nth-child(3){display:none}#bpx .qb-ivt col.a{width:96px}#bpx .qb-ivt th,#bpx .qb-ivt td{padding:8px 9px}#bpx .qb-ivx-t{max-width:none}#bpx .qb-ivx-a>*{flex:1}}
#bpx.bpx-dark .qb-ivx{background:#111827;border-color:#262f45}#bpx.bpx-dark .qb-ivt{background:#141b2b;border-color:#262f45}
#bpx .qb-ivx-rm{margin-right:auto;color:#b42318}
@media (max-width:760px){#bpx .qb-ivx-rm{flex-basis:100%}}
#bpx .qb-pvr{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:14px}
@media (max-width:600px){#bpx .qb-ivr{grid-template-columns:40px minmax(0,1fr)}#bpx .qb-ivr .pjl-a{grid-column:1/-1;justify-content:stretch}#bpx .qb-ivr .pjl-a .pjl-b{flex:1}#bpx .qb-pvr>*{flex:1 1 auto}}

/* ---------- Good / Better / Best (quote.js) ---------- */
#bpx .qg-sec[hidden]{display:none}
#bpx .qg-sec .qx-ph .qb-x{margin-left:auto}
#bpx .qg-empty{padding:4px 0 2px}
#bpx .qg-empty p{margin:0 0 14px;font-size:14px;line-height:1.55;color:var(--grey)}
#bpx .qg-empty p b{color:var(--ink)}
#bpx .qg-empty .ms,#bpx .qg-foot .ms{font-size:18px;vertical-align:-4px;margin-right:6px}
#bpx .qg-busy{display:flex;gap:14px;align-items:center;padding:18px;border-radius:14px;background:#faf8ff;border:1px dashed #c9b8ff}
#bpx .qg-busy b{display:block;font-size:14.5px;color:var(--ink)}
#bpx .qg-busy small{color:var(--grey);font-size:12.5px}
#bpx .qg-spin{width:24px;height:24px;border:3px solid #e2dbff;border-top-color:#7a4dff;border-radius:50%;animation:qgspin .8s linear infinite;flex:0 0 auto}
@keyframes qgspin{to{transform:rotate(360deg)}}
#bpx .qg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
#bpx .qg-card{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-radius:16px;padding:14px;background:var(--card);min-width:0}
#bpx .qg-card.rec{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-l,#e6f0ff)}
#bpx .qg-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
#bpx .qg-k{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:99px;background:#eef2f7;color:#475467}
#bpx .k-better .qg-k{background:#e6f0ff;color:#1d4ed8}
#bpx .k-best .qg-k{background:#f2ecff;color:#5b3fd6}
#bpx .qg-rec{display:inline-flex;gap:5px;align-items:center;font-size:12px;color:var(--grey);cursor:pointer;margin:0}
#bpx .qg-rec input{width:auto;margin:0}
#bpx .qg-card input,#bpx .qg-card textarea{width:100%;font:inherit;font-size:13.5px}
#bpx .qg-card .qg-title{font-weight:600;font-size:15px}
#bpx .qg-card .qg-sum{resize:vertical;min-height:44px}
#bpx .qg-price b{display:block;font-size:24px;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
#bpx .qg-price small{font-size:12px;color:var(--grey)}
#bpx .qg-lab{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--grey);margin:0}
#bpx .qg-lab small{font-weight:400}
#bpx .qg-lines{border-top:1px solid var(--line-2,var(--line));padding-top:8px;margin-top:2px}
#bpx .qg-lines summary{cursor:pointer;font-size:12.5px;color:var(--grey);font-weight:600}
#bpx .qg-ro div{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;padding:5px 0;border-bottom:1px dashed var(--line-2,var(--line))}
#bpx .qg-ro small{color:var(--grey)}
#bpx .qg-ed{display:flex;flex-direction:column;gap:6px;margin-top:8px}
#bpx .qg-l{display:grid;grid-template-columns:minmax(0,1fr) 54px 96px 26px;gap:6px;align-items:center}
#bpx .qg-l input{padding:6px 8px !important;font-size:12.5px !important}
#bpx .qg-l .qb-money{display:flex;align-items:center;gap:2px;font-size:12px;color:var(--grey)}
#bpx .qg-foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:10px;font-size:12.5px;color:var(--grey)}
#bpx .qg-foot a{color:var(--blue);cursor:pointer;font-weight:600}
#bpx .qg-foot .ms{color:#7a4dff}
#bpx .qg-st.ok{background:#e7f6ee !important;color:#0f7a43 !important}
#bpx .qg-st.bad{background:#fdecec !important;color:#b91c1c !important}
#bpx .qg-st.on{background:#e6f0ff !important;color:#1d4ed8 !important}
#bpx .qg-won{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;background:#e7f6ee;border:1px solid #b7e4c9;margin-bottom:14px}
#bpx .qg-won .ms{color:#0f7a43;font-size:26px}
#bpx .qg-won b{display:block;font-size:15px;color:#0f3d24}
#bpx .qg-won small{color:#2f5d43;font-size:13px}
#bpx .qg-link{display:flex;gap:8px;margin:12px 0}
#bpx .qg-link input{flex:1;font:inherit;font-size:13px}
/* the three cards as the customer sees them */
#bpx .qg-vgrid{grid-template-columns:minmax(0,1fr) 280px}
#bpx .qg-paper{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px}
#bpx .qg-pvt{font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--ink);margin:4px 0 4px}
#bpx .qg-pvd{font-size:13.5px;color:var(--grey);margin:0 0 14px;white-space:pre-line}
#bpx .qg-pv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}
#bpx .qg-pc{position:relative;border:1px solid var(--line);border-radius:16px;padding:18px 16px 16px;background:var(--card)}
#bpx .qg-pc.rec{border:2px solid var(--blue)}
#bpx .qg-pc.picked{border:2px solid #16a34a;background:#f4fbf7}
#bpx .qg-pc.dim{opacity:.55}
#bpx .qg-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--blue);color:#fff;font-size:11px;font-weight:700;padding:3px 10px;border-radius:99px;white-space:nowrap}
#bpx .qg-badge.pk{background:#16a34a}
#bpx .qg-pc .qg-pt{display:block;font-size:16px;margin:8px 0 2px;color:var(--ink)}
#bpx .qg-pc p{font-size:12.5px;color:var(--grey);margin:0}
#bpx .qg-pp{font-size:26px;font-weight:600;letter-spacing:-.03em;margin:10px 0;color:var(--ink)}
#bpx .qg-pc ul{margin:0 0 10px;padding:0;list-style:none}
#bpx .qg-pc li{position:relative;padding-left:20px;font-size:13px;margin:5px 0;color:var(--ink)}
#bpx .qg-pc li::before{content:"";position:absolute;left:3px;top:5px;width:8px;height:5px;border-left:2px solid #16a34a;border-bottom:2px solid #16a34a;transform:rotate(-45deg)}
#bpx .qg-w{display:flex;gap:6px;align-items:center;font-size:12.5px;color:var(--grey);margin-bottom:8px}
#bpx .qg-w .ms{font-size:16px;color:#16a34a}
#bpx .qg-pc details summary{cursor:pointer;font-size:12.5px;color:var(--blue);font-weight:600}
#bpx .qg-pl{display:flex;justify-content:space-between;gap:8px;font-size:12px;padding:4px 0;border-bottom:1px dashed var(--line-2,var(--line))}
@media (max-width:1100px){#bpx .qg-grid{grid-template-columns:1fr}}
@media (max-width:820px){#bpx .qg-pv{grid-template-columns:1fr;gap:16px}#bpx .qg-vgrid{grid-template-columns:1fr}}

/* ==================================================================
   Step-by-step builder (estimate and invoice): one screen per step,
   a step bar on top, the running total and Back / Next at the bottom.
   ================================================================== */
#bpx .qs{max-width:1180px;margin:0 auto}
#bpx .qs-head{margin-bottom:14px}
#bpx .qs-hrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
#bpx .qs-hrow .qx-back{margin:0}
#bpx .qs-count{font-size:12px;font-weight:600;color:var(--grey,#788493)}
#bpx .qs-head .qx-h{margin-bottom:12px}
#bpx .qs-head .qx-h h2{font-size:24px;letter-spacing:-.03em;margin:0}
#bpx .qs-steps{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0 4px;-webkit-overflow-scrolling:touch}
#bpx .qs-steps::-webkit-scrollbar{display:none}
#bpx .qs-st{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;padding:7px 14px 7px 7px;border-radius:99px;border:1px solid var(--line,#e3e8ef);background:var(--card,#fff);font-size:13px;font-weight:600;color:var(--grey,#667085);cursor:pointer;white-space:nowrap}
#bpx .qs-st i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--soft,#f1f4f8);font-style:normal;font-size:12px;font-weight:700;color:var(--grey,#667085)}
#bpx .qs-st i .ms{font-size:16px}
#bpx .qs-st.done{color:var(--ink,#101828)}
#bpx .qs-st.done i{background:#e7f6ee;color:#0f7a43}
#bpx .qs-st.on{border-color:var(--blue,#2563eb);color:var(--blue,#2563eb);box-shadow:0 0 0 3px var(--blue-l,#eaf1ff)}
#bpx .qs-st.on i{background:var(--blue,#2563eb);color:#fff}
#bpx .qs-body{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
#bpx .qs-body.wide{grid-template-columns:minmax(0,1fr)}
#bpx .qs-main{min-width:0;display:flex;flex-direction:column;gap:14px}
#bpx .qs-side{position:sticky;top:12px}
#bpx .qs-side .qx-sum{padding:18px}
#bpx .qs-card{padding:20px}
#bpx .qs-ch{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:14px}
#bpx .qs-ch h3{margin:0;font-size:18px;font-weight:600;letter-spacing:-.02em;color:var(--ink,#101828)}
#bpx .qs-ch p{margin:4px 0 0;font-size:13.5px;line-height:1.5;color:var(--grey,#667085)}
#bpx .qs-ch p a{color:var(--blue,#2563eb);cursor:pointer;font-weight:600}
#bpx .qs-ch .qx-mk{flex:0 0 auto}
#bpx .qs-f{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--ink,#344054);margin:0 0 14px}
#bpx .qs-f small{font-weight:400;color:var(--grey,#98a2b3)}
#bpx .qs-f input,#bpx .qs-f select,#bpx .qs-f textarea{width:100%;font:inherit;font-weight:400;font-size:15px}
#bpx .qs-f .qx-in{width:100%}
#bpx .qs-f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#bpx .qs-card .qx-hint{margin:-6px 0 14px}
#bpx .qs-card .qx-seg{margin-bottom:8px}
#bpx .qs-card .qx-seg+.qx-hint{margin-top:0}
/* the bottom bar */
#bpx .qs-bar{position:sticky;bottom:12px;z-index:5;display:flex;align-items:center;gap:10px;margin-top:16px;padding:10px 10px 10px 14px;background:var(--card,#fff);border:1px solid var(--line,#e3e8ef);border-radius:18px;box-shadow:0 10px 30px rgba(16,24,40,.12)}
#bpx .qs-back{all:unset;box-sizing:border-box;display:grid;place-items:center;width:46px;height:46px;flex:0 0 auto;border-radius:14px;border:1px solid var(--line,#e3e8ef);color:var(--ink,#101828);cursor:pointer}
#bpx .qs-back:hover{background:var(--soft,#f6f8fb)}
#bpx .qs-tot{all:unset;box-sizing:border-box;flex:1;min-width:0;display:flex;flex-direction:column;cursor:pointer;line-height:1.2}
#bpx .qs-tot small{font-size:11.5px;font-weight:600;color:var(--grey,#667085)}
#bpx .qs-tot b{font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--ink,#101828);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bpx .qs-tot em{font-style:normal;font-size:11.5px;font-weight:600}
#bpx .qs-tot em.good{color:#0f7a43}#bpx .qs-tot em.ok{color:#b45309}#bpx .qs-tot em.low{color:#b91c1c}
#bpx .qs-next{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:48px;padding:0 20px;border-radius:14px;background:var(--blue,#2563eb);color:#fff;font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap}
#bpx .qs-next .ms{font-size:20px}
#bpx .qs-next:hover{filter:brightness(1.07)}
#bpx .qs-next:disabled{opacity:.55;cursor:default}
/* Price: one price or three options */
#bpx .qs-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#bpx .qs-opt{all:unset;box-sizing:border-box;display:flex;gap:12px;align-items:flex-start;padding:14px;border:1.5px solid var(--line,#e3e8ef);border-radius:14px;cursor:pointer;background:var(--card,#fff)}
#bpx .qs-opt.on{border-color:var(--blue,#2563eb);background:var(--blue-l,#eaf1ff)}
#bpx .qs-radio{flex:0 0 auto;width:20px;height:20px;border-radius:50%;border:2px solid #c3cad6;margin-top:1px;box-sizing:border-box}
#bpx .qs-opt.on .qs-radio{border:6px solid var(--blue,#2563eb)}
#bpx .qs-ot b{display:block;font-size:14.5px;color:var(--ink,#101828)}
#bpx .qs-ot small{display:block;font-size:12.5px;line-height:1.45;color:var(--grey,#667085);margin-top:3px}
#bpx .qs-new{font-style:normal;font-size:10.5px;font-weight:700;color:#5b3fd6;background:#efe9ff;border-radius:99px;padding:2px 7px;margin-left:4px;vertical-align:2px}
/* invoice: what kind */
#bpx .qs-types{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
#bpx .qs-type{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:2px;padding:12px;border:1.5px solid var(--line,#e3e8ef);border-radius:12px;cursor:pointer;text-align:left}
#bpx .qs-type b{font-size:14px;color:var(--ink,#101828)}
#bpx .qs-type small{font-size:12px;color:var(--grey,#667085);min-height:15px}
#bpx .qs-type.on{border-color:var(--blue,#2563eb);background:var(--blue-l,#eaf1ff)}
/* review */
#bpx .qs-review{display:flex;flex-direction:column;gap:14px;max-width:880px;margin:0 auto;width:100%}
#bpx .qs-to{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--card,#fff);border:1px solid var(--line,#e3e8ef);border-radius:14px}
#bpx .qs-to>.ms{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--blue-l,#eaf1ff);color:var(--blue,#2563eb);flex:0 0 auto}
#bpx .qs-to div{flex:1;min-width:0}
#bpx .qs-to b{display:block;font-size:15px;color:var(--ink,#101828)}
#bpx .qs-to small{display:block;font-size:12.5px;color:var(--grey,#667085);overflow-wrap:anywhere}
#bpx .qs-to a{color:var(--blue,#2563eb);cursor:pointer;font-weight:600}
#bpx .qs-chg{font-size:13px}
#bpx .qs-paper .qb-doc{margin:0}
#bpx .qs-foot{display:flex;justify-content:flex-end}
#bpx .qs-review .qx-seg{margin-bottom:0}
#bpx .qs-review>.qs-f{margin:0}

/* ---------- Good / Better / Best, its own page ---------- */
#bpx .qg-page{display:flex;flex-direction:column;gap:14px}
#bpx .qg-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:20px;border-radius:18px;background:linear-gradient(135deg,#f3f0ff,#eaf1ff 60%,#f6f8fb);border:1px solid #e3e0fb}
#bpx .qg-hero h3{margin:0 0 4px;font-size:20px;letter-spacing:-.02em;color:#1d1a4d}
#bpx .qg-hero p{margin:0;font-size:13.5px;line-height:1.55;color:#4b4f6b;max-width:620px}
#bpx .qg-hacts{display:flex;gap:8px;flex:0 0 auto}
#bpx .qg-hacts .ms{font-size:18px;vertical-align:-4px;margin-right:4px}
#bpx .qg-empty{padding:28px;text-align:center;background:var(--card,#fff);border:1px dashed var(--line,#d0d7e2);border-radius:16px}
#bpx .qg-empty p{margin:0 0 12px;color:var(--grey,#667085)}
#bpx .qg-switch{display:none}
#bpx .qg-page .qg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#bpx .qg-page .qg-card{display:flex;flex-direction:column;gap:10px;padding:18px;border:1.5px solid var(--line,#e3e8ef);border-radius:18px;background:var(--card,#fff)}
#bpx .qg-page .qg-card.rec{border-color:var(--blue,#2563eb);box-shadow:0 0 0 3px var(--blue-l,#eaf1ff)}
#bpx .qg-star{all:unset;display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--grey,#667085);cursor:pointer;padding:4px 8px;border-radius:99px}
#bpx .qg-star .ms{font-size:17px}
#bpx .qg-star:hover{background:var(--soft,#f1f4f8)}
#bpx .qg-star.on{color:#b45309;background:#fff4e5}
#bpx#bpx#bpx#bpx#bpx .qg-page .qg-title{border:0 !important;background:transparent !important;box-shadow:none !important;padding:2px 0 !important;font-size:18px !important;font-weight:600;letter-spacing:-.02em;color:var(--ink,#101828);border-bottom:1px dashed transparent !important;border-radius:0 !important}
#bpx#bpx#bpx#bpx#bpx .qg-page .qg-title:focus{border-bottom-color:var(--blue,#2563eb) !important;outline:0}
#bpx .qg-page .qg-price b{font-size:30px;letter-spacing:-.04em}
#bpx .qg-page .qg-sum{border-radius:10px;font-size:13.5px !important;min-height:56px;resize:vertical}
#bpx .qg-sect{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--grey,#98a2b3);margin-top:2px}
#bpx .qg-buls{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
#bpx .qg-buls li{display:flex;align-items:flex-start;gap:6px}
#bpx .qg-buls li>.ms{font-size:18px;color:#16a34a;flex:0 0 auto;margin-top:8px}
#bpx#bpx#bpx#bpx#bpx .qg-buls textarea{resize:none;overflow:hidden;line-height:1.4;min-height:0 !important;flex:1;min-width:0;border:0 !important;background:transparent !important;box-shadow:none !important;padding:7px 4px !important;font-size:13.5px !important;border-radius:8px !important}
#bpx#bpx#bpx#bpx#bpx .qg-buls textarea:focus{background:var(--soft,#f6f8fb) !important;outline:0}
#bpx .qg-buls .qb-x{opacity:.45}
#bpx .qg-buls li:hover .qb-x{opacity:1}
#bpx .qg-addb{all:unset;font-size:13px;font-weight:600;color:var(--blue,#2563eb);cursor:pointer;padding:2px 4px}
#bpx .qg-war{display:flex;align-items:center;gap:8px;padding:4px 10px;border-radius:12px;background:var(--soft,#f6f8fb);margin:0}
#bpx .qg-war .ms{font-size:18px;color:#16a34a}
#bpx#bpx#bpx#bpx#bpx .qg-war input{flex:1;border:0 !important;background:transparent !important;box-shadow:none !important;padding:8px 0 !important;font-size:13.5px !important}
#bpx .qg-page .qg-lines summary{display:flex;justify-content:space-between;gap:8px;align-items:baseline;list-style:none;cursor:pointer;font-size:13px;font-weight:600;color:var(--ink,#101828)}
#bpx .qg-page .qg-lines summary::-webkit-details-marker{display:none}
#bpx .qg-page .qg-lines summary small{font-weight:500;color:var(--grey,#667085)}
#bpx .qg-page .qg-lines summary span::after{content:" ▾";color:var(--grey,#98a2b3)}
#bpx .qg-page .qg-foot{justify-content:center}
#bpx.bpx-dark .qg-hero{background:var(--card);border-color:var(--line)}
#bpx.bpx-dark .qg-hero h3{color:var(--ink)}#bpx.bpx-dark .qg-hero p{color:var(--grey)}

/* ---------- phone ---------- */
#bpx#bpx#bpx#bpx.bp-m.qs-focus .bpx-app.on .bp-tabbar{display:none}
@media (max-width:820px){
  #bpx .qs-body{grid-template-columns:minmax(0,1fr)}
  #bpx .qs-side{display:none}
  #bpx .qs-head .qx-h h2{font-size:21px}
  #bpx .qs-card{padding:16px}
  #bpx .qs-ch{flex-wrap:wrap}
  #bpx .qs-f input,#bpx .qs-f select,#bpx .qs-f textarea{font-size:16px}
  #bpx .qs-choice{grid-template-columns:1fr}
  #bpx .qs-types{grid-template-columns:1fr 1fr}
  #bpx .qs-bar{position:fixed;left:0;right:0;bottom:0;margin:0;border-radius:18px 18px 0 0;border-width:1px 0 0;padding:10px 12px calc(10px + env(safe-area-inset-bottom));z-index:40}
  #bpx .qs-next{padding:0 16px;font-size:14.5px}
  #bpx .qg-hero{flex-direction:column;align-items:stretch;padding:16px}
  #bpx .qg-hacts>*{flex:1}
  #bpx .qg-switch{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;position:sticky;top:0;z-index:4;background:var(--bg,#f4f6f9);padding:4px 0}
  #bpx .qg-switch button{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 4px;border-radius:14px;border:1.5px solid var(--line,#e3e8ef);background:var(--card,#fff);cursor:pointer}
  #bpx .qg-switch span{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--grey,#667085)}
  #bpx .qg-switch span .ms{font-size:13px;color:#b45309;vertical-align:-2px}
  #bpx .qg-switch b{font-size:15px;color:var(--ink,#101828)}
  #bpx .qg-switch button.on{border-color:var(--blue,#2563eb);background:var(--blue-l,#eaf1ff)}
  #bpx .qg-page .qg-grid{grid-template-columns:1fr}
  #bpx .qg-page .qg-card{display:none}
  #bpx .qg-page .qg-card.on{display:flex}
  #bpx .qs-review .qb-doc{padding:18px 14px}
}
#bpx #qs-price{margin-bottom:18px}
#bpx > .qs-bar{position:fixed;left:0;right:0;bottom:0;margin:0}
#bpx .qs-price .qs-main{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:14px;align-items:start}
#bpx .qs-price .qs-main>.qs-card{margin:0}
@media (max-width:980px){#bpx .qs-price .qs-main{grid-template-columns:minmax(0,1fr)}}
#bpx#bpx#bpx#bpx#bpx .qg-page .qg-sum{resize:none;overflow:hidden}
/* which options go out */
#bpx .qg-send{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-4px -4px 2px;padding:8px 10px;border-radius:12px;background:#e7f6ee;cursor:pointer}
#bpx .qg-send b{display:block;font-size:13px;color:#0f5132}
#bpx .qg-send small{display:block;font-size:11.5px;color:#3d6b52}
#bpx .qg-send input{position:absolute;opacity:0;width:1px;height:1px}
#bpx .qg-sw{position:relative;flex:0 0 auto;width:40px;height:24px;border-radius:99px;background:#16a34a;transition:background .15s}
#bpx .qg-sw::after{content:"";position:absolute;top:3px;left:19px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .15s}
#bpx .qg-card.off .qg-send{background:var(--soft,#f1f4f8)}
#bpx .qg-card.off .qg-send b{color:var(--grey,#667085)}#bpx .qg-card.off .qg-send small{color:var(--grey,#98a2b3)}
#bpx .qg-card.off .qg-sw{background:#c3cad6}
#bpx .qg-card.off .qg-sw::after{left:3px}
#bpx .qg-page .qg-card.off{border-style:dashed;box-shadow:none}
#bpx .qg-page .qg-card.off>*:not(.qg-send){opacity:.45}
#bpx .qg-switch button.off b{text-decoration:line-through;color:var(--grey,#98a2b3)}
#bpx .qg-pv.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
#bpx .qg-pv.n1{grid-template-columns:minmax(0,420px)}
#bpx .qs-solo{display:flex;gap:8px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--blue-l,#eaf1ff);font-size:13.5px;color:var(--ink,#101828)}
#bpx .qs-solo .ms{font-size:18px;color:var(--blue,#2563eb)}
#bpx .qs-solo a{color:var(--blue,#2563eb);font-weight:600;cursor:pointer;margin-left:4px}
@media (max-width:820px){#bpx .qg-pv.n2,#bpx .qg-pv.n1{grid-template-columns:1fr}}

/* how the options go out: Send my pick / Let them choose */
#bpx .qg-mode{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:2px 0 6px}
#bpx .qg-m{all:unset;box-sizing:border-box;display:flex;gap:12px;align-items:flex-start;padding:14px;border:1.5px solid var(--line,#e3e8ef);border-radius:14px;cursor:pointer;background:var(--card,#fff)}
#bpx .qg-m b{display:block;font-size:14.5px;color:var(--ink,#101828)}
#bpx .qg-m small{display:block;margin-top:2px;font-size:12.5px;line-height:1.35;color:var(--grey,#667085)}
#bpx .qg-m.on{border-color:var(--blue,#2563eb);background:var(--blue-l,#eaf1ff)}
#bpx .qg-m.on .qs-radio{border:6px solid var(--blue,#2563eb)}
#bpx .qg-m:focus-visible{outline:2px solid var(--blue,#2563eb);outline-offset:2px}
#bpx .qg-mhint{margin:0 0 12px;font-size:12.5px;color:var(--grey,#667085)}
#bpx .qg-rd{flex:0 0 auto;width:22px;height:22px;border-radius:50%;border:2px solid #c3cad6;box-sizing:border-box;background:#fff}
#bpx .qg-pick{background:var(--blue-l,#eaf1ff)}
#bpx .qg-pick b{color:var(--blue,#1d4ed8)}#bpx .qg-pick small{color:#3b5b9a}
#bpx .qg-card:not(.off) .qg-rd{border:7px solid var(--blue,#2563eb)}
#bpx .qg-page.pickm .qg-card.off .qg-pick{background:var(--soft,#f1f4f8)}
#bpx .qg-page.pickm .qg-card.off .qg-pick b{color:var(--ink,#344054)}
#bpx .qg-page.pickm .qg-card.off{border-style:solid}
#bpx .qg-page.pickm .qg-card.off>*:not(.qg-send){opacity:.7}
#bpx .qg-page.pickm .qg-switch button.off b{text-decoration:none;color:var(--grey,#667085)}
#bpx .qg-page.pickm .qg-card:not(.off){border-color:var(--blue,#2563eb)}
@media (max-width:560px){#bpx .qg-mode{grid-template-columns:1fr;gap:8px}#bpx .qg-m{padding:12px}}