:root {
  --ink: #0d2345;
  --muted: #64748b;
  --line: #dbe5ef;
  --soft: #f5f8fb;
  --blue: #0f6fdc;
  --blue-soft: #eef6ff;
  --red: #cf2036;
  --white: #fff;
  --shadow: 0 10px 28px rgba(13, 35, 69, .08);
  --radius: 16px;
}

* { box-sizing: border-box; }
html { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: #edf3f8; }
body { margin: 0; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.topbar {
  min-height: 58px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 8px clamp(14px, 3vw, 34px);
  background: linear-gradient(90deg, #ffffff 0%, #f5faff 72%, #eef6ff 100%);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark { width: 27px; height: 27px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; flex: 0 0 auto; }
.brand-mark span { display: block; }
.brand-mark .red { background: #d72d3f; }
.brand-mark .blue { background: #224d7a; }
.brand-mark .light { background: #d9e3ec; }
.brand-mark .dark { background: #173960; }
.brand-copy { display: flex; flex-direction: column; line-height: 1; }
.brand-copy strong { font-size: 21px; letter-spacing: -.5px; }
.brand-copy span { margin-top: 4px; font-size: 9px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.tagline { justify-self: center; font-size: 14px; color: #29425f; white-space: nowrap; }
.account-btn { border: 0; border-radius: 12px; background: var(--ink); color: #fff; display: flex; align-items: center; gap: 8px; padding: 8px 11px; cursor: pointer; }
.account-dot { width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; font-size: 10px; font-weight: 800; }
.account-name { font-size: 12px; }

.app-shell { max-width: 1220px; margin: 0 auto; padding: 24px 18px 104px; }
.page-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 16px; }
.eyebrow { margin: 0 0 5px; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--blue); }
h1 { margin: 0; font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -.04em; }
.subtext { margin: 7px 0 0; color: var(--muted); max-width: 680px; font-size: 14px; }
.stepper { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.step { display: inline-flex; align-items: center; gap: 6px; min-width: 32px; height: 32px; padding: 0 11px; border-radius: 999px; background: #e9eff5; color: #708094; font-size: 12px; font-weight: 800; }
.step small { font-size: 11px; font-weight: 700; }
.step.active { background: var(--blue); color: #fff; }

.panel { background: var(--white); border: 1px solid #e1e9f1; border-radius: var(--radius); box-shadow: var(--shadow); }
.panel:not(.option-section) { padding: 18px; }
.field-label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 800; }
.text-input, .search-box input { width: 100%; border: 1px solid #cad7e4; border-radius: 10px; background: #fff; outline: none; transition: .2s ease; }
.text-input { padding: 13px 14px; font-size: 15px; }
.text-input:focus, .search-box:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(15,111,220,.11); }
.grid-main { display: grid; grid-template-columns: 1.05fr 1.25fr; gap: 16px; margin-top: 16px; }
.option-section { padding: 18px; }
.section-heading { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 14px; }
.section-heading .number { width: 27px; height: 27px; border-radius: 8px; background: var(--blue); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 900; flex: 0 0 auto; }
.section-heading h2 { margin: 0; font-size: 17px; }
.section-heading p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.choice-grid { display: grid; gap: 9px; }
.choice-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice-grid.two-mobile-four-desktop { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.choice-card, .choice-pill { border: 1px solid #cedae6; background: #fff; color: var(--ink); border-radius: 12px; cursor: pointer; text-align: left; transition: .18s ease; }
.choice-card:hover, .choice-pill:hover { border-color: #91bff2; background: #fafdff; }
.choice-card.selected, .choice-pill.selected { border-color: var(--blue); background: var(--blue-soft); box-shadow: inset 0 0 0 1px rgba(15,111,220,.08); }
.choice-card { min-height: 72px; padding: 13px; display: flex; align-items: center; gap: 10px; }
.choice-card strong, .choice-card small { display: block; }
.choice-card small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.choice-pill { min-height: 48px; padding: 11px 12px; display: flex; align-items: center; gap: 8px; font-weight: 700; }
.radio-indicator { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #a8b8c9; display: inline-grid; place-items: center; flex: 0 0 auto; }
.selected .radio-indicator { border-color: var(--blue); box-shadow: inset 0 0 0 4px #fff; background: var(--blue); }
.subsection-title { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; color: #405a76; margin-bottom: 8px; }
.with-top-space { margin-top: 14px; }
.radio-list { border: 1px solid #d7e1eb; border-radius: 12px; overflow: hidden; background: #fff; }
.radio-list.scroll { max-height: 190px; overflow-y: auto; }
.radio-row { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 9px 11px; border-bottom: 1px solid #e8eef4; cursor: pointer; font-size: 13px; }
.radio-row:last-child { border-bottom: 0; }
.radio-row:hover { background: #f8fbfe; }
.radio-row.selected { background: var(--blue-soft); color: #0a4f9d; font-weight: 800; }
.radio-row input { accent-color: var(--blue); width: 17px; height: 17px; flex: 0 0 auto; }
.radio-row small { color: var(--muted); }
.search-box { min-height: 42px; display: flex; align-items: center; gap: 8px; border: 1px solid #cad7e4; border-radius: 10px; padding: 0 10px; margin-bottom: 8px; background: #fff; }
.search-box input { border: 0; padding: 9px 0; }
.search-box input:focus { box-shadow: none; }
.search-box span { color: #708094; font-size: 20px; line-height: 1; }

.sticky-summary { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(1180px, calc(100% - 28px)); min-height: 66px; border: 1px solid #d4e0ec; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-radius: 15px; box-shadow: 0 18px 44px rgba(13,35,69,.18); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px 10px 16px; z-index: 30; }
.summary-text { min-width: 0; display: flex; flex-direction: column; }
.summary-text strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.summary-text span { margin-top: 3px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.primary-btn { min-width: 150px; border: 0; border-radius: 11px; padding: 13px 18px; background: var(--blue); color: #fff; font-weight: 900; cursor: pointer; box-shadow: 0 8px 20px rgba(15,111,220,.2); }
.primary-btn:hover { filter: brightness(.96); }
.toast { position: fixed; right: 18px; bottom: 96px; background: var(--ink); color: #fff; padding: 11px 14px; border-radius: 10px; font-size: 13px; opacity: 0; transform: translateY(10px); pointer-events: none; transition: .2s ease; z-index: 50; }
.toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 900px) {
  .topbar { grid-template-columns: auto 1fr; }
  .tagline { display: none; }
  .account-btn { justify-self: end; }
  .page-head { align-items: flex-start; flex-direction: column; }
  .stepper { justify-content: flex-start; width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
  .step { flex: 0 0 auto; }
  .grid-main { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .topbar { min-height: 52px; padding: 7px 10px; gap: 8px; }
  .brand-copy strong { font-size: 18px; }
  .brand-copy span { font-size: 7px; }
  .account-name { display: none; }
  .account-btn { padding: 6px 8px; }
  .app-shell { padding: 17px 10px 96px; }
  .page-head { margin-bottom: 12px; gap: 14px; }
  h1 { font-size: 29px; }
  .subtext { font-size: 13px; }
  .step small { display: none; }
  .step { width: 30px; min-width: 30px; padding: 0; justify-content: center; }
  .panel:not(.option-section), .option-section { padding: 14px; border-radius: 14px; }
  .choice-grid.two { grid-template-columns: 1fr; }
  .choice-grid.two-mobile-four-desktop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choice-card { min-height: 62px; }
  .sticky-summary { bottom: 8px; width: calc(100% - 16px); padding: 9px; gap: 8px; }
  .summary-text { flex: 1; }
  .summary-text span { font-size: 10px; }
  .primary-btn { min-width: 112px; padding: 12px 12px; }
}

.step { border: 0; cursor: pointer; }
.step b { font-size: 11px; }
.step-view { display: none; }
.step-view.active { display: block; }
.page-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
.secondary-btn { border: 1px solid #bfd1e3; color: #315b85; background: #fff; border-radius: 11px; padding: 12px 15px; font-weight: 800; cursor: pointer; }
.category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.typology-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dimension-grid { display: grid; grid-template-columns: 1fr 1fr .55fr; gap: 10px; }
.dimension-grid label, .totals-card label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 800; color: #405a76; }
.dimension-grid input, .totals-card input, .cut-mm { min-height: 44px; width: 100%; border: 1px solid #cad7e4; border-radius: 10px; padding: 9px 11px; background: #fff; outline: none; color: var(--ink); }
.split-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.accessory-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.check-row { min-height: 46px; border: 1px solid #d5e0ea; border-radius: 11px; padding: 10px 12px; display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13px; }
.check-row:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); font-weight: 800; }
.check-row input, .cut-option input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--blue); }
.hidden { display: none !important; }
.cut-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cut-option { border: 1px solid #d5e0ea; border-radius: 11px; padding: 11px; display: grid; gap: 8px; }
.cut-option > span { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; }
.cut-option:has(input[type="checkbox"]:checked) { border-color: var(--blue); background: var(--blue-soft); }
.element-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.element-main { display: grid; gap: 16px; }
.live-card { position: sticky; top: 76px; padding: 16px; }
.status-badge { display: inline-block; border-radius: 999px; background: var(--blue-soft); color: #0b5cae; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; padding: 6px 8px; }
.live-card h3 { margin: 13px 0 10px; font-size: 18px; }
.live-card dl { margin: 0; }
.live-card dl div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #e6edf4; font-size: 12px; }
.live-card dt { color: var(--muted); }
.live-card dd { margin: 0; font-weight: 800; text-align: right; }
.mock-price { margin-top: 15px; border-radius: 12px; background: #f6f9fc; padding: 13px; display: flex; flex-direction: column; gap: 3px; }
.mock-price span { color: var(--muted); font-size: 11px; }
.mock-price strong { font-size: 25px; }
.mock-price small { color: #8a98a8; font-size: 10px; }
.full { width: 100%; margin-top: 12px; }
.full:disabled { opacity: .45; cursor: not-allowed; }
.empty-state { padding: 24px; text-align: center; color: var(--muted); background: #f7fafc; border-radius: 12px; }
.table-wrap { overflow-x: auto; }
.quote-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.quote-table th, .quote-table td { padding: 11px 9px; border-bottom: 1px solid #e5edf4; text-align: left; font-size: 12px; }
.quote-table th { color: #61758b; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.remove-btn { border: 0; background: #fff1f2; color: #b42335; border-radius: 8px; padding: 7px 9px; cursor: pointer; }
.totals-card { margin: 18px 0 0 auto; width: min(440px, 100%); background: #f7fafc; border: 1px solid #e0e9f1; border-radius: 14px; padding: 14px; display: grid; gap: 10px; }
.totals-card > div { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.totals-card label { display: grid; grid-template-columns: 1fr 120px; align-items: center; }
.net-total { border-top: 1px solid #d6e1eb; padding-top: 11px; font-size: 16px; }
.net-total strong { color: var(--blue); font-size: 21px; }
.document-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.document-card { min-height: 150px; border: 1px solid #d2deea; background: #fff; border-radius: 14px; padding: 16px; text-align: left; cursor: pointer; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.document-card:hover { border-color: var(--blue); background: var(--blue-soft); }
.document-card strong { font-size: 16px; color: var(--ink); }
.document-card span { color: var(--muted); font-size: 12px; line-height: 1.45; }

@media (max-width: 1000px) {
  .element-layout { grid-template-columns: 1fr; }
  .live-card { position: static; order: -1; }
  .live-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
}
@media (max-width: 760px) {
  .category-grid, .typology-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-panel { grid-template-columns: 1fr; }
  .dimension-grid { grid-template-columns: 1fr 1fr; }
  .dimension-grid label:last-child { grid-column: 1 / -1; }
  .accessory-grid, .cut-grid { grid-template-columns: 1fr 1fr; }
  .document-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .category-grid, .typology-grid, .accessory-grid, .cut-grid { grid-template-columns: 1fr; }
  .dimension-grid { grid-template-columns: 1fr 1fr; }
  .choice-pill { min-height: 46px; }
  .live-card dl { grid-template-columns: 1fr; }
  .page-actions { gap: 10px; }
  .page-actions > button { flex: 1; min-width: 0; }
}

.workspace-status{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:12px;color:var(--muted);margin-bottom:18px}.workspace-status strong{color:#945600}.notice{padding:14px;background:#fff5d9;border-radius:10px;font-size:13px}:focus-visible{outline:3px solid #0f6fdc;outline-offset:3px}button:disabled{opacity:.5;cursor:not-allowed}.radio-row{min-height:44px}.step{min-height:44px}.toast{max-width:calc(100vw - 36px)}
@media(max-width:640px){.live-card{order:0}.step{width:auto;padding:0 10px}.step small{display:inline}.quote-table{min-width:0}.quote-table thead{display:none}.quote-table tr{display:grid;grid-template-columns:1fr 1fr;padding:12px 0;border-bottom:1px solid var(--line)}.quote-table td{border:0;padding:6px}.quote-table td:nth-child(2),.quote-table td:last-child{grid-column:1/-1}.live-card dl{display:block}.dimension-grid input{font-size:16px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
@media(max-width:640px){.quote-table td{font-size:14px}.quote-table td[data-label]::before{content:attr(data-label);display:block;font-size:11px;color:var(--muted);margin-bottom:4px}}
/* Partner offer previews and explicit order approval. */
#document-preview{width:min(1100px,95vw);height:90vh;padding:0;border:1px solid #cad7e4;border-radius:8px;color:#17334e}
#document-preview::backdrop,#order-confirm::backdrop{background:rgba(16,35,54,.45)}
.document-dialog-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #dce5ec}
#document-frame{width:100%;height:calc(100% - 58px);border:0;background:white}
#order-confirm{max-width:560px;width:calc(100vw - 32px);padding:22px;border:1px solid #cad7e4;border-radius:8px;color:#17334e}
.order-confirm-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:18px;flex-wrap:wrap}
.document-dialog-bar button,.order-confirm-actions button{border:1px solid #07549a;border-radius:5px;padding:9px 14px;cursor:pointer}
#order-confirm-submit{background:#07549a;color:white}

.fixed-mullion-choice{display:flex;align-items:center;gap:8px;font-size:14px;margin-top:10px}.fixed-mullion-choice input{width:17px;min-width:17px;height:17px;margin:0}

.document-dialog-bar{flex-wrap:wrap;gap:8px}#document-markup-control:not([hidden]){display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:12px}#document-markup-control select{font:inherit;padding:6px;max-width:100%}#document-markup{width:100px}

#sottoluce-detail-gate{border:0;padding:0;margin:0;min-width:0}#sottoluce-detail-gate:disabled{opacity:.65}.editing-fixed-light .dimension-section{margin:12px 0}.editing-fixed-light #opening-options{position:relative}.sottoluce-zone-target{position:absolute!important;background:transparent!important;border:2px solid transparent!important;padding:0!important;margin:0!important;border-radius:2px!important;cursor:pointer}.sottoluce-zone-target:hover,.sottoluce-zone-target:focus-visible,.sottoluce-zone-target[aria-pressed=true]{border-color:#0869bd!important;box-shadow:inset 0 0 0 1px white}.sottoluce-zone-choices{display:flex;flex-wrap:wrap;gap:8px}.sottoluce-zone-choices [aria-pressed=true]{background:#e8f3ff;border-color:#0869bd}.sottoluce-pane-editor{display:grid;gap:5px;margin-top:8px}.sottoluce-pane-editor select{width:100%;max-width:100%}#sottoluce-dimension-first,#sottoluce-width-note{font-size:13px;color:#07549a}.editing-fixed-light .sottoluce-fields{grid-template-columns:repeat(3,minmax(0,1fr))}@media(max-width:640px){.editing-fixed-light .sottoluce-fields{grid-template-columns:1fr}}

.composition-fixed-light{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.composition-fixed-light p,.composition-fixed-light figure,.composition-fixed-light .fixed-mullion-choice{grid-column:1/-1}.composition-fixed-preview{position:relative;width:min(230px,100%);margin:5px auto}.composition-fixed-preview canvas{display:block;width:100%;height:auto}.composition-fixed-zone-target{position:absolute;background:transparent!important;border:2px solid transparent!important;margin:0!important;padding:0!important;min-height:0!important}.composition-fixed-zone-target:hover,.composition-fixed-zone-target:focus-visible{border-color:#0869bd!important}.composition-fields>[data-fixed-light-details]{display:contents}@media(max-width:500px){.composition-fixed-light{grid-template-columns:1fr}}