@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");:root {
  --sans: system-ui, "Segoe UI", Roboto, sans-serif;
  --heading: system-ui, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, Consolas, monospace;

  font: 16px/145% var(--sans);
  letter-spacing: 0.18px;

  color: #132318;
  background: #0f1411;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  box-sizing: border-box;
}

html,
body,
#root {
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

body {
  overflow: hidden;
  background: #0f1411;
}

#root {
  width: 100vw;
  max-width: none;
  min-height: 100vh;

  margin: 0;
  padding: 0;

  display: block;

  text-align: initial;
  border: 0;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}
/* =========================================================
   mythic-STYLE UI: App Bar + Left Rail + Context Drawer
   ✅ Rail has vertical buttons (Design/Geometry/...)
   ✅ Clicking a button opens the left drawer showing ONLY that panel
========================================================= */


/* hide shared layout heading ONLY on this page */
.nav { display: none !important; }
/* hide shared layout heading ONLY on this page */
.bd-topbar { display: none !important; }
.container{padding:0 !important;}
.bx-page{
  --red:#e3000f;
  --red2:#ff1a1a;
  --green:#1967C3;

  --ink:#0f172a;
  --muted:#64748b;

  --panel:#ffffff;
  --panel2:#f6f7fb;
  --stroke: rgba(15,23,42,.12);
  --stroke2: rgba(15,23,42,.08);

  --shadow: 0 18px 50px rgba(0,0,0,.18);
  --shadow2: 0 10px 26px rgba(0,0,0,.12);

  --radius: 14px;
  --radius2: 12px;

  /* pro form tokens */
  --field-bg: rgba(255,255,255,.92);
  --field-bd: rgba(15,23,42,.14);
  --field-bd2: rgba(15,23,42,.22);
  --field-fg: rgba(15,23,42,.92);
  --field-hint: rgba(100,116,139,.95);
  --focus: rgba(42,60,255,.28);

  width:100%;
  height:100vh;
  min-height:100dvh;
  position:relative;
  overflow:hidden;
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;

  background:
    radial-gradient(900px 600px at 20% 10%, rgba(255,80,80,.10), transparent 60%),
    radial-gradient(900px 600px at 80% 14%, rgba(0,120,255,.10), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(245,247,255,.92));
}

.bx-canvas{ position:absolute; inset:0; z-index:1; }

/* =========================================================
   APP BAR
========================================================= */
.bx-appbar{
  position:absolute; top:0; left:0; right:0;
  height: 64px;
  z-index: 40;
  display:flex;
  align-items:center;
  gap: 14px;
  padding: 0 16px;
  color: #fff;
  backdrop-filter:blur(16px) saturate(160%);
  
}
.bx-appbar__brand{ display:flex; align-items:center; gap: 12px; min-width: 280px; }
.bx-logo{
  width: 42px; height: 42px;
  border-radius: 10px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  display:grid;
  place-items:center;
  overflow: hidden;          /* ✅ clip image to rounded corners */
  user-select:none;
}

.bx-logoImg{
  width: 100%;
  height: 100%;
  object-fit: contain;       /* contain = show full logo */
  padding: 6px;              /* breathing room */
  display:block;
}

.bx-appbar__brandTxt{ line-height:1.05; }
.bx-appbar__title{ font-weight: 1000; letter-spacing:.3px; font-size: 14px; }
.bx-appbar__sub{ opacity:.88; font-size: 12px; margin-top: 2px; }

.bx-appbar__center{ flex:1; display:flex; align-items:center; justify-content:center; }
.bx-estimate{
  display:flex; align-items:center; gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
}
.bx-estimate__label{ opacity:.88; font-size: 12px; font-weight: 800; }
.bx-estimate__value{ font-size: 14px; font-weight: 1000; letter-spacing:.2px; }

.bx-appbar__actions{ display:flex; align-items:center; gap: 10px; justify-content:flex-end; min-width: 360px; }
.bx-quoteBtn{
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(25,195,125,.95), rgba(12,155,95,.98));
  color:#fff;
  font-weight: 1000;
  letter-spacing:.2px;
  cursor:pointer;
  box-shadow: 0 10px 20px rgba(0,0,0,.22);
}
.bx-quoteBtn:hover{ filter: brightness(1.05); }

/* =========================================================
   LEFT ICON RAIL (vertical)
========================================================= */
.bx-rail{
  position:absolute;
  top: 64px;
  left: 0;
  bottom: 0;
  width: 92px;
  z-index: 45;

  /* ✅ glass look */
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.22),
    rgba(255,255,255,.10)
  );
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);

  /* ✅ subtle glass edge + highlight */
  border-right: 1px solid rgba(255,255,255,.28);
  box-shadow:
    8px 0 24px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.35);

  display:flex;
  flex-direction:column;
  padding: 10px 8px;
  gap: 10px;

  overflow-y:auto;
  overflow-x:hidden;
}

/* optional: cleaner scrollbar that matches glass */
.bx-rail::-webkit-scrollbar{ width: 10px; }
.bx-rail::-webkit-scrollbar-thumb{
  background: rgba(15,23,42,.18);
  border-radius: 999px;
}
.bx-rail::-webkit-scrollbar-track{
  background: rgba(255,255,255,.08);
  border-radius: 999px;
}

.bx-railIco{
  background: rgb(27 63 30) !important;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}


.bx-railBtn{
  width: 100%;
  border: 1px solid var(--stroke2);
  background: transparent !important;
  border-radius: 12px;
  padding: 10px 8px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 6px;
  box-shadow: 0 8px 14px rgba(0,0,0,.06);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.bx-railBtn:hover{ border-color: rgba(227,0,15,.22); transform: translateY(-1px); }
.bx-railBtn.is-active{
  border-color: rgb(108 88 2);
    box-shadow: 0 10px 18px rgb(17 255 11 / 12%);
}
.bx-railIco{
  width: 40px; height: 40px;
  border-radius: 12px;
  display:grid; place-items:center;
  font-size: 18px;
}
.bx-railLbl{
  font-size: 11px;
  font-weight: 900;
  color: rgba(15,23,42,.82);
  user-select:none;
}

/* Smaller “category” buttons (still in the rail) */
.bx-railBtn--mini{
  padding: 10px 8px;
}
.bx-railBtn--mini .bx-railIco{
  width: 40px; height: 40px;
  font-size: 16px;
  border-radius:50%;
}
.bx-railBtn--mini .bx-railLbl{ font-size: 10.5px; }

/* =========================================================
   LEFT CONTEXT DRAWER (shows only active panel)
   ✅ outer overflow visible so selects/popovers can escape
   ✅ inner body scroll
========================================================= */
.bx-left{
  position:absolute;
  top: 72px;
  bottom: 16px;
  left: 104px;                /* rail width + gap */
  z-index: 55;
  width: 420px;
  max-width: calc(100vw - 140px);
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: visible;
  display:flex;
  flex-direction:column;
  transition: transform .22s ease, opacity .22s ease;
}
.bx-left--closed{
  transform: translateX(-18px);
  opacity: 0;
  pointer-events:none;
}

.bx-panelHead{
  padding: 14px 14px 12px 14px;
  border-bottom: 1px solid var(--stroke2);
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}
.bx-panelHeadRow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}
.bx-panelHead h2{
  margin:0;
  font-size: 15px;
  font-weight: 1000;
  letter-spacing: .2px;
}
.bx-panelHead .mini{
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.35;
}

.bx-panelBody{
  padding: 12px 14px 14px 14px;
  overflow:auto;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}
.bx-bodyPro{ display:grid; gap: 12px; }

/* Sticky footer inside left drawer */
.bx-footer{
  position: sticky;
  bottom: 0;
  z-index: 5;
  padding: 12px 14px 14px 14px;
  border-top: 1px solid var(--stroke2);
  background: linear-gradient(180deg, rgba(246,247,251,.80), rgba(255,255,255,.95));
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}

/* =========================================================
   RIGHT DRAWER (Outputs)
========================================================= */
.bx-right{
  position:absolute;
  top: 72px;
  bottom: 16px;
  z-index: 55;
  width: 460px;
  max-width: calc(100vw - 140px);
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: visible;
  display:flex;
  flex-direction:column;
  right: 16px;
  transition: transform .22s ease, opacity .22s ease;
}
.bx-right--closed{
  transform: translateX(18px);
  opacity: 0;
  pointer-events:none;
}
.bx-list{ padding: 12px 14px 14px 14px; overflow:auto; }
.bx-card{
  border-radius: 12px;
  border: 1px solid var(--stroke2);
  background: #fff;
  padding: 12px;
  margin-top: 10px;
  box-shadow: 0 10px 18px rgba(0,0,0,.06);
}
.bx-card:first-child{ margin-top: 0; }
.bx-cardTitle{ font-weight: 1000; font-size: 13px; margin: 0; }
.bx-cardMeta{ font-size: 11px; color: var(--muted); margin-top: 6px; line-height: 1.35; }
.bx-row{ display:flex; align-items:center; justify-content:space-between; gap: 10px; }
.bx-btnRow{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

/* Error */
.bx-error{
  margin-top: 10px;
  padding: 10px 10px;
  visibility:hidden !important;
  border-radius: 12px;
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.22);
  color: rgba(185,28,28,.95);
  font-size: 12px;
  white-space: pre-wrap;
}

/* Porch popup (kept) */
.bx-porchPop{
  position: fixed;
  transform: translate(-50%, -110%);
  z-index: 80;
  width: 320px;
  border-radius: 14px;
  border: 1px solid var(--stroke2);
  background: #fff;
  box-shadow: var(--shadow);
  padding: 10px;
}
.bx-porchPop__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.bx-porchPop__title{ font-weight: 1000; font-size: 12px; letter-spacing:.14px; }
.bx-porchPop__x{
  border: 1px solid var(--stroke2);
  background: #fff;
  border-radius: 10px;
  padding: 6px 9px;
  cursor: pointer;
  font-weight: 1000;
}
.bx-porchPop__grid{ display:grid; gap: 10px; }

/* =========================================================
   PRO FORM SYSTEM
========================================================= */
.ui-field{ display:grid; gap: 8px; }
.ui-field__top{ display:flex; align-items:baseline; justify-content:space-between; gap: 10px; }
.ui-label{ font-size: 11px; font-weight: 900; letter-spacing: .16px; color: rgba(15,23,42,.78); }
.ui-hint{ font-size: 11px; color: var(--field-hint); font-weight: 800; }

.bx-input,
.bx-select,
.bx-num,
.bx-panelBody input[type="text"],
.bx-panelBody input[type="number"],
.bx-panelBody input[type="email"],
.bx-panelBody input[type="search"],
.bx-panelBody select{
  width:100%;
  height: 42px;
  border-radius: 12px;
  padding: 0 12px;
  border: 1px solid var(--field-bd);
  background: var(--field-bg);
  color: var(--field-fg);
  font-weight: 850;
  letter-spacing: .1px;
  outline: none;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 8px 14px rgba(0,0,0,.05);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.bx-panelBody input:focus,
.bx-panelBody select:focus,
.bx-input:focus,
.bx-select:focus,
.bx-num:focus{
  border-color: var(--field-bd2);
  box-shadow: 0 0 0 4px var(--focus), 0 10px 18px rgba(0,0,0,.08);
}
.bx-panelBody input:disabled,
.bx-panelBody select:disabled{ opacity:.6; cursor:not-allowed; }

.bx-select,
.bx-panelBody select{
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(15,23,42,.55) 50%),
    linear-gradient(135deg, rgba(15,23,42,.55) 50%, transparent 50%);
  background-position: calc(100% - 18px) 18px, calc(100% - 12px) 18px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

.bx-range{ width:100%; height: 34px; accent-color: #2a3cff; }
.bx-color,
.bx-panelBody input[type="color"]{
  width:100%;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.75);
  padding: 4px;
  box-shadow: 0 10px 18px rgba(0,0,0,.04);
}

.bx-grid1{ display:grid; gap: 12px; }
.bx-grid2{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px){ .bx-grid2{ grid-template-columns: 1fr; } }

.bx-fieldBlock{
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
  box-shadow: 0 10px 18px rgba(0,0,0,.05);
  display:grid;
  gap: 10px;
}
.bx-fieldBlock__top{ display:flex; align-items:baseline; justify-content:space-between; gap: 10px; }
.bx-fieldBlock__label{ font-size: 11px; font-weight: 900; color: rgba(15,23,42,.70); }
.bx-fieldBlock__value{ font-size: 12px; font-weight: 1000; color: rgba(15,23,42,.92); }

.bx-check{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.72);
  box-shadow: 0 10px 18px rgba(0,0,0,.04);
}
.bx-check input[type="checkbox"]{ width: 18px; height: 18px; accent-color: #2a3cff; }
.bx-check span{ flex:1; font-weight: 900; font-size: 12px; color: rgba(15,23,42,.85); }

/* Responsive: hide estimate */
@media (max-width: 920px){
  .bx-appbar__center{ display:none; }
  .bx-appbar__actions{ min-width: auto; }
  .bx-left{ width: 380px; }
  .bx-right{ width: 420px; }
}

/* =========================================================
   STYLE special controls (range / checkbox / color)
========================================================= */

/* RANGE (slider) */
.bx-page .bx-left input[type="range"]{
  width: 100% !important;
  height: 34px !important;
  accent-color: #2a3cff !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Make the slider track/thumb look nicer on WebKit */
.bx-page .bx-left input[type="range"]::-webkit-slider-runnable-track{
  height: 10px !important;
  border-radius: 999px !important;
  background: rgba(15,23,42,.12) !important;
}
.bx-page .bx-left input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 999px !important;
  background: #2a3cff !important;
  margin-top: -4px !important;
  box-shadow: 0 8px 16px rgba(0,0,0,.18) !important;
}

/* Checkbox: modern toggle-like sizing */
.bx-page .bx-left input[type="checkbox"]{
  width: 18px !important;
  height: 18px !important;
  accent-color: #2a3cff !important;
  margin: 0 !important;
}

/* Make the checkbox row look like a premium card */
.bx-page .bx-left label:has(input[type="checkbox"]){
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap: 12px !important;

  padding: 12px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  background: rgba(255,255,255,.75) !important;
  box-shadow: 0 10px 18px rgba(0,0,0,.05) !important;
}

/* COLOR picker: give it a clean frame */
.bx-page .bx-left input[type="color"]{
  width: 100% !important;
  height: 46px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  background: rgba(255,255,255,.96) !important;
  padding: 6px !important;
  box-shadow: 0 10px 18px rgba(0,0,0,.06) !important;
  cursor: pointer !important;
}

/* Make the inner swatch rounded (Chrome/WebKit) */
.bx-page .bx-left input[type="color"]::-webkit-color-swatch-wrapper{
  padding: 0 !important;
}
.bx-page .bx-left input[type="color"]::-webkit-color-swatch{
  border: none !important;
  border-radius: 10px !important;
}

/* =========================================================
   UI INPUT (your custom <Input />) — make it premium
========================================================= */

/* 1) If your Input uses a class like "ui-input" */
.bx-page .ui-input{
  width: 100%;
  height: 46px;
  border-radius: 14px;
  padding: 0 14px;
  border: 1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.96);
  color: rgba(15,23,42,.92);
  font-size: 14px;
  font-weight: 850;
  letter-spacing: .1px;
  outline: none;

  box-shadow:
    0 1px 0 rgba(255,255,255,.85) inset,
    0 10px 18px rgba(0,0,0,.05);

  transition: border-color .15s ease, box-shadow .15s ease, transform .06s ease;
}

/* 2) Focus state */
.bx-page .ui-input:focus{
  border-color: rgba(42,60,255,.28);
  box-shadow:
    0 0 0 4px rgba(42,60,255,.18),
    0 12px 22px rgba(0,0,0,.08);
}

/* 3) Placeholder */
.bx-page .ui-input::placeholder{
  color: rgba(100,116,139,.9);
  font-weight: 700;
}

/* 4) Disabled */
.bx-page .ui-input:disabled{
  opacity: .6;
  cursor: not-allowed;
}

/* =========================================================
   Input wrapper spacing (fix the “no padding” look)
========================================================= */

/* If your Input component wraps with .ui-field */
.bx-page .ui-field{
  display: grid;
  gap: 8px;
  margin-bottom: 10px;   /* adds breathing room between fields */
}

/* label row */
.bx-page .ui-field__top{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 2px;
}

/* label */
.bx-page .ui-label{
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .16px;
  color: rgba(15,23,42,.78);
}

/* hint */
.bx-page .ui-hint{
  font-size: 11px;
  font-weight: 850;
  color: rgba(100,116,139,.95);
}

/* =========================================================
   Suffix / unit (ft, in, x/12) — make it look intentional
========================================================= */

/* common patterns: .ui-suffix / .ui-unit / .ui-field__suffix */
.bx-page :where(.ui-suffix, .ui-unit, .ui-field__suffix){
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.75);
  font-size: 12px;
  font-weight: 900;
  color: rgba(15,23,42,.72);
  width: fit-content;
}

/* if you do <input/><div class="suffix">ft</div> */
.bx-page :where(input + .suffix, input + .unit){
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.75);
  font-size: 12px;
  font-weight: 900;
  color: rgba(15,23,42,.72);
  width: fit-content;
}
  /* =========================================================
   UI BUTTONS (your custom buttons) — ui-btn
========================================================= */

/* Base button */
.bx-page .ui-btn{
  appearance: none;
  border: 1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.92);
  color: rgba(15,23,42,.92);

  height: 46px;
  padding: 0 14px;
  border-radius: 14px;

  font-size: 13px;
  font-weight: 950;
  letter-spacing: .12px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  cursor: pointer;
  user-select: none;

  box-shadow:
    0 1px 0 rgba(255,255,255,.85) inset,
    0 12px 22px rgba(0,0,0,.08);

  transition: transform .08s ease, box-shadow .15s ease, border-color .15s ease, filter .15s ease;
}

.bx-page .ui-btn:hover{
  border-color: rgba(15,23,42,.22);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 14px 26px rgba(0,0,0,.10);
  transform: translateY(-1px);
}

.bx-page .ui-btn:active{
  transform: translateY(0px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.85) inset,
    0 10px 18px rgba(0,0,0,.08);
}

.bx-page .ui-btn:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 4px rgba(42,60,255,.18),
    0 14px 26px rgba(0,0,0,.10);
  border-color: rgba(42,60,255,.28);
}

/* Disabled */
.bx-page .ui-btn:disabled,
.bx-page .ui-btn.is-disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow:
    0 1px 0 rgba(255,255,255,.85) inset,
    0 8px 14px rgba(0,0,0,.06);
}

/* =========================================================
   Variants — add these classes to your ui-btn as needed
   <button class="ui-btn is-primary">...</button>
========================================================= */

/* Primary */
.bx-page .ui-btn.is-primary{
  border-color: rgba(25,195,125,.35);
  color: #fff;
  background: linear-gradient(180deg, rgba(25,195,125,.96), rgba(12,155,95,.98));
}

/* Danger */
.bx-page .ui-btn.is-danger{
  border-color: rgba(239,68,68,.35);
  color: #fff;
  background: linear-gradient(180deg, rgba(239,68,68,.96), rgba(185,28,28,.98));
}

/* Ghost */
.bx-page .ui-btn.is-ghost{
  background: rgba(255,255,255,.72);
  border-color: rgba(15,23,42,.10);
  box-shadow:
    0 1px 0 rgba(255,255,255,.85) inset,
    0 10px 18px rgba(0,0,0,.06);
}

/* Small */
.bx-page .ui-btn.is-sm{
  height: 38px;
  border-radius: 12px;
  padding: 0 12px;
  font-size: 12px;
}

/* Full width helper */
.bx-page .ui-btn.is-block{
  width: 100%;
}

.bx-page .ui-btn__icon{ display:inline-grid; place-items:center; }
.bx-page .ui-btn__label{ line-height: 1; }

/* =========================
   PREMIUM HEADER ACTIONS
========================= */

.bx-page .bx-appbar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 6px;

  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 18px;

  background: rgba(255, 255, 255, 0.72);

  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 12px 32px rgba(15, 23, 42, 0.1);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}






/* =========================
   PREMIUM GREEN SCROLLBARS
========================= */

/* Firefox */

.bx-page,
.bx-page * {
  scrollbar-width: thin;
  scrollbar-color: #375c38 rgba(55, 92, 56, 0.08);
}


/* Chrome / Edge / Safari */

.bx-page::-webkit-scrollbar,
.bx-page *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}


.bx-page::-webkit-scrollbar-track,
.bx-page *::-webkit-scrollbar-track {
  background:
    linear-gradient(
      180deg,
      rgba(55, 92, 56, 0.04),
      rgba(15, 23, 42, 0.035)
    );

  border-radius: 999px;

  box-shadow:
    inset 0 0 0 1px rgba(55, 92, 56, 0.06);
}


/* Green inner scrollbar tab */

.bx-page::-webkit-scrollbar-thumb,
.bx-page *::-webkit-scrollbar-thumb {
  min-height: 42px;

  border: 2px solid transparent;
  border-radius: 999px;

  background:
    linear-gradient(
      180deg,
      #527953,
      #375c38
    );

  background-clip: padding-box;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 4px 10px rgba(55, 92, 56, 0.22);
}


/* Hover */

.bx-page::-webkit-scrollbar-thumb:hover,
.bx-page *::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(
      180deg,
      #628b63,
      #3f6841
    );

  background-clip: padding-box;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 5px 14px rgba(55, 92, 56, 0.35);
}


/* Active / dragging */

.bx-page::-webkit-scrollbar-thumb:active,
.bx-page *::-webkit-scrollbar-thumb:active {
  background:
    linear-gradient(
      180deg,
      #375c38,
      #29492d
    );

  background-clip: padding-box;
}


/* Hide scrollbar corner */

.bx-page::-webkit-scrollbar-corner,
.bx-page *::-webkit-scrollbar-corner {
  background: transparent;
}






/* Header buttons only */

.bx-page .bx-appbar__actions .ui-btn {
  position: relative;
  overflow: hidden;

  height: 42px;
  padding: 0 16px;

  border-radius: 12px;

  border: 1px solid rgba(15, 23, 42, 0.1);

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.98),
      rgba(246, 248, 247, 0.92)
    );

  color: #1b2920;

  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.15px;

  box-shadow:
    0 1px 0 rgba(255, 255, 255, 1) inset,
    0 5px 14px rgba(15, 23, 42, 0.07);

  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease;
}


/* subtle shine */

.bx-page .bx-appbar__actions .ui-btn::before {
  content: "";

  position: absolute;
  top: 0;
  left: -80%;

  width: 55%;
  height: 100%;

  background: linear-gradient(
    105deg,
    transparent,
    rgba(255, 255, 255, 0.65),
    transparent
  );

  transform: skewX(-18deg);

  transition: left 450ms ease;

  pointer-events: none;
}


.bx-page .bx-appbar__actions .ui-btn:hover::before {
  left: 130%;
}


/* hover */

.bx-page .bx-appbar__actions .ui-btn:hover {
  transform: translateY(-2px);

  border-color: rgba(55, 92, 56, 0.35);

  color: #29492d;

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #f0f5f1
    );

  box-shadow:
    0 1px 0 rgba(255, 255, 255, 1) inset,
    0 10px 24px rgba(55, 92, 56, 0.14);
}


.bx-page .bx-appbar__actions .ui-btn:active {
  transform: translateY(0) scale(0.97);

  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 3px 8px rgba(15, 23, 42, 0.1);
}


/* icon box */

.bx-page .bx-appbar__actions .ui-btn__icon {
  width: 27px;
  height: 27px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 8px;

  color: #375c38;

  background: rgba(55, 92, 56, 0.09);

  border: 1px solid rgba(55, 92, 56, 0.1);

  transition:
    transform 220ms ease,
    background 180ms ease,
    color 180ms ease;
}


.bx-page .bx-appbar__actions .ui-btn:hover .ui-btn__icon {
  transform: scale(1.08);

  color: #ffffff;

  background: #375c38;

  border-color: #375c38;
}


/* Refresh icon rotate */

.bx-page .bx-appbar__actions
.bx-quoteBtn:first-of-type:hover
.ui-btn__icon {
  transform: rotate(45deg) scale(1.08);
}


/* =========================
   STATUS PILL
========================= */

.bx-page .bx-appbar__actions .ui-pill {
  height: 42px;

  display: inline-flex;
  align-items: center;
  gap: 9px;

  padding: 0 15px;

  border-radius: 12px;

  font-size: 10px;
  font-weight: 950;

  letter-spacing: 0.9px;
  text-transform: uppercase;

  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.15) inset,
    0 6px 16px rgba(15, 23, 42, 0.08);
}


.bx-page .bx-appbar__actions .ui-pill::before {
  content: "";

  width: 7px;
  height: 7px;

  flex: 0 0 7px;

  border-radius: 999px;

  background: currentColor;

  box-shadow: 0 0 9px currentColor;
}


/* READY */

.bx-page .bx-appbar__actions .ui-pill--ok {
  color: #d8f3dc;

  border: 1px solid rgba(129, 199, 132, 0.22);

  background:
    linear-gradient(
      135deg,
      #375c38,
      #29482d
    );
}


/* GENERATING */

.bx-page .bx-appbar__actions .ui-pill--warn {
  color: #BFDCFF;

  border: 1px solid rgba(7, 121, 255, 0.25);

  background:
    linear-gradient(
      135deg,
      #1D4F8A,
      #113661
    );
}


/* ERROR */

.bx-page .bx-appbar__actions .ui-pill--danger {
  color: #ffe2df;

  border: 1px solid rgba(239, 83, 80, 0.25);

  background:
    linear-gradient(
      135deg,
      #9f3634,
      #702421
    );
}


/* Mobile */

@media (max-width: 900px) {
  .bx-page .bx-appbar__actions {
    gap: 5px;
    padding: 4px;
    border-radius: 14px;
  }

  .bx-page .bx-appbar__actions .ui-btn {
    height: 38px;
    padding: 0 10px;
  }

  .bx-page .bx-appbar__actions .ui-pill {
    height: 38px;
    padding: 0 11px;
  }

  .bx-page .bx-appbar__actions .ui-btn__icon {
    width: 25px;
    height: 25px;
  }
}
/* ================================
   GENERATE MODAL (Public MVP)
================================ */
.bx-modal{
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(2,6,23,.45);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}

.bx-modalCard{
  width: min(520px, 92vw);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(245,247,255,.92));
  box-shadow: 0 28px 80px rgba(0,0,0,.35);
  overflow: hidden;
  position: relative;
}

.bx-modalCard::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(600px 220px at 12% 0%, rgba(255,0,60,.18), transparent 60%),
    radial-gradient(520px 240px at 90% 10%, rgba(0,120,255,.20), transparent 55%),
    radial-gradient(520px 240px at 40% 110%, rgba(25,195,125,.16), transparent 60%);
  pointer-events:none;
}

.bx-modalHead{
  position: relative;
  z-index: 1;
  display:flex;
  align-items:flex-start;
  gap: 12px;
  padding: 16px 16px 12px 16px;
  border-bottom: 1px solid rgba(15,23,42,.10);
}

.bx-modalIcon{
  width: 42px; height: 42px;
  border-radius: 14px;
  display:grid; place-items:center;
  font-weight: 1000;
  color: #fff;
  background: linear-gradient(180deg, rgba(25,195,125,.95), rgba(12,155,95,.98));
  box-shadow: 0 14px 26px rgba(0,0,0,.18);
  flex: 0 0 auto;
}

.bx-modalTitle{
  font-weight: 1000;
  font-size: 14px;
  letter-spacing: .2px;
  color: rgba(15,23,42,.92);
}

.bx-modalSub{
  margin-top: 4px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(100,116,139,.95);
  line-height: 1.35;
}

.bx-modalX{
  margin-left: auto;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.75);
  border-radius: 12px;
  height: 36px;
  width: 38px;
  cursor: pointer;
  font-weight: 1000;
  box-shadow: 0 10px 18px rgba(0,0,0,.08);
}

.bx-modalBody{
  position: relative;
  z-index: 1;
  padding: 16px;
}

.bx-spinWrap{
  position: relative;
  width: 86px;
  height: 86px;
  margin: 6px auto 12px;
}

.bx-spinnerRing{
  position:absolute;
  inset: 0;
  border-radius: 999px;
  border: 6px solid rgba(15,23,42,.10);
  border-top-color: rgba(255,0,60,.85);
  border-right-color: rgba(0,120,255,.85);
  border-bottom-color: rgba(25,195,125,.85);
  animation: bxspin .62s linear infinite;
  box-shadow: 0 16px 30px rgba(0,0,0,.12);
}

.bx-spinnerRing--2{
  inset: 10px;
  border-width: 6px;
  border-top-color: rgba(0,120,255,.90);
  border-right-color: rgba(25,195,125,.90);
  border-bottom-color: rgba(255,0,60,.80);
  animation-duration: .48s;
}

.bx-spinnerDot{
  position:absolute;
  inset: 0;
  display:grid;
  place-items:center;
}
.bx-spinnerDot::after{
  content:"";
  width: 14px; height: 14px;
  border-radius: 999px;
  background: rgba(15,23,42,.85);
  box-shadow: 0 14px 24px rgba(0,0,0,.18);
}

@keyframes bxspin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

.bx-modalNote{
  text-align:center;
  font-size: 12px;
  font-weight: 850;
  color: rgba(100,116,139,.95);
}

.bx-readyRow{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.78);
  box-shadow: 0 12px 22px rgba(0,0,0,.06);
}

.bx-readyBadge{
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  font-size: 12px;
  font-weight: 1000;
  color: #fff;
  background: linear-gradient(180deg, rgba(25,195,125,.96), rgba(12,155,95,.98));
}

.bx-readyName{
  font-size: 12px;
  font-weight: 950;
  color: rgba(15,23,42,.90);
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bx-modalBtns{
  display:flex;
  gap: 10px;
  margin-top: 12px;
}

.bx-modalBtn{
  flex: 1 1 auto;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.80);
  font-weight: 1000;
  cursor: pointer;
  box-shadow: 0 12px 22px rgba(0,0,0,.08);
}

.bx-modalBtn--primary{
  border-color: rgba(25,195,125,.35);
  color: #fff;
  background: linear-gradient(180deg, rgba(25,195,125,.96), rgba(12,155,95,.98));
}

.bx-modalErr{
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(239,68,68,.22);
  background: rgba(239,68,68,.08);
  color: rgba(185,28,28,.95);
  font-size: 12px;
  font-weight: 850;
  white-space: pre-wrap;
}


  




/* =========================================================
   MXDESIGN ENGINEERING PACKAGE BOTTOM DOCK
========================================================= */

.mx-packageDock {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 52;

  width: min(1080px, calc(100vw - 48px));

  transform: translateX(-50%);

  pointer-events: none;
}

.mx-packageDock__glow {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -10px;

  height: 34px;

  border-radius: 999px;

  background: rgba(49, 93, 59, 0.28);
  filter: blur(26px);
}

.mx-packageDock__card {
  position: relative;

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;

  align-items: center;

  padding: 16px 18px;

  border-radius: 24px;

  pointer-events: auto;

  background:
    linear-gradient(135deg, rgba(255,255,255,0.96), rgba(246,249,244,0.92));

  border: 1px solid rgba(49, 93, 59, 0.18);

  box-shadow:
    0 24px 70px rgba(15, 23, 42, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.96);

  backdrop-filter: blur(18px);
}

.mx-packageDock__main {
  min-width: 0;

  display: flex;
  align-items: center;
  gap: 14px;
}

.mx-packageDock__icon {
  width: 46px;
  height: 46px;

  display: grid;
  place-items: center;

  flex: 0 0 46px;

  border-radius: 16px;

  color: #ffffff;
  background:
    linear-gradient(135deg, #315d3b, #1f3f28);

  font-size: 20px;
  font-weight: 1000;

  box-shadow: 0 14px 30px rgba(49, 93, 59, 0.26);
}

.mx-packageDock__copy {
  min-width: 0;
}

.mx-packageDock__copy span {
  display: block;

  color: rgba(20, 40, 26, 0.54);

  font-size: 10px;
  font-weight: 1000;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.mx-packageDock__copy strong {
  display: block;
  margin-top: 4px;

  color: #14281a;

  font-size: 18px;
  line-height: 1.15;
  font-weight: 1000;
  letter-spacing: -0.035em;
}

.mx-packageDock__copy p {
  max-width: 660px;
  margin: 5px 0 0;

  color: rgba(20, 40, 26, 0.62);

  font-size: 12px;
  line-height: 1.35;
  font-weight: 750;
}

.mx-genProgress {
  margin-top: 10px;
  max-width: 520px;
}

.mx-genProgress__bar {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(20, 40, 26, 0.14);
  overflow: hidden;
}

.mx-genProgress__fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #1b4f8c, #38bdf8);
  transition: width 0.2s linear;
}

.mx-genProgress__stages {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.mx-genProgress__stage {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: rgba(20, 40, 26, 0.45);
}

.mx-genProgress__stage.is-done {
  color: rgba(20, 40, 26, 0.78);
}

.mx-genProgress__stage.is-active {
  color: #1b4f8c;
}

.mx-genProgress__dot {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: rgba(20, 40, 26, 0.12);
  color: rgba(20, 40, 26, 0.6);
  font-size: 9px;
  font-weight: 1000;
  flex: 0 0 16px;
}

.mx-genProgress__stage.is-done .mx-genProgress__dot {
  background: #1b4f8c;
  color: #ffffff;
}

.mx-genProgress__stage.is-active .mx-genProgress__dot {
  background: #38bdf8;
  color: #0b1220;
}

.mx-packageDock__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.mx-packageDock__actions a {
  min-height: 38px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 13px;

  border-radius: 999px;

  color: #315d3b;
  background: rgba(49, 93, 59, 0.09);

  border: 1px solid rgba(49, 93, 59, 0.12);

  font-size: 12px;
  font-weight: 950;
  text-decoration: none;

  transition:
    transform 0.16s ease,
    background 0.16s ease,
    border-color 0.16s ease;
}

.mx-packageDock__actions a:hover {
  transform: translateY(-1px);
  background: rgba(49, 93, 59, 0.15);
  border-color: rgba(49, 93, 59, 0.22);
}

.mx-packageDock__preview {
  display: none;
}

.mx-generatePackageBtn {
  background:
    linear-gradient(135deg, #315d3b, #1f3f28) !important;

  color: #ffffff !important;

  border-color: rgba(255,255,255,0.20) !important;

  box-shadow:
    0 14px 30px rgba(49, 93, 59, 0.28),
    inset 0 1px 0 rgba(255,255,255,0.18);
}

.mx-generatePackageBtn:disabled {
  opacity: 0.68;
  cursor: wait;
}

@media (max-width: 900px) {
  .mx-packageDock {
    bottom: 14px;
    width: calc(100vw - 28px);
  }

  .mx-packageDock__card {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .mx-packageDock__actions {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .mx-packageDock__main {
    align-items: flex-start;
  }

  .mx-packageDock__icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .mx-packageDock__copy strong {
    font-size: 16px;
  }

  .mx-packageDock__actions a {
    flex: 1;
  }
}


.mx-packageDock__metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(110px, 1fr));
  gap: 8px;

  margin-top: 12px;
}

.mx-packageDock__metrics div {
  padding: 10px 11px;

  border-radius: 14px;

  background: rgba(49, 93, 59, 0.075);
  border: 1px solid rgba(49, 93, 59, 0.10);
}

.mx-packageDock__metrics span {
  display: block;

  color: rgba(20, 40, 26, 0.54);

  font-size: 9px;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mx-packageDock__metrics strong {
  display: block;
  margin-top: 4px;

  color: #14281a;

  font-size: 15px;
  font-weight: 1000;
}

@media (max-width: 760px) {
  .mx-packageDock__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}





/* =========================================================
   MXDESIGN QUOTE RESULT DOCK — GLASS STYLE
========================================================= */

.mx-packageDock {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 70;

  width: min(1180px, calc(100vw - 34px));

  transform: translateX(-50%);
  pointer-events: none;
}

.mx-packageDock__glow {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -18px;

  height: 46px;

  border-radius: 999px;

  background:
    radial-gradient(circle, rgba(27, 79, 140, 0.32), rgba(27, 79, 140, 0));

  filter: blur(26px);
}

.mx-packageDock__card {
  position: relative;

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;

  align-items: center;

  padding: 18px 22px;

  border-radius: 30px;

  pointer-events: auto;

  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.11));

  border: 1px solid rgba(255, 255, 255, 0.34);

  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);

  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
}

.mx-packageDock__main {
  min-width: 0;

  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 16px;

  align-items: center;
}

.mx-packageDock__icon {
  width: 56px;
  height: 56px;

  display: grid;
  place-items: center;

  border-radius: 18px;

  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(27, 79, 140, 0.96), rgba(18, 58, 104, 0.88));

  font-size: 25px;
  font-weight: 1000;

  box-shadow:
    0 16px 34px rgba(27, 79, 140, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.mx-packageDock__copy {
  min-width: 0;
}

.mx-packageDock__copy span {
  display: block;

  color: rgba(255, 255, 255, 0.72);

  font-size: 10px;
  font-weight: 1000;
  letter-spacing: 0.12em;
  text-transform: uppercase;

  text-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.mx-packageDock__copy strong {
  display: block;

  margin-top: 5px;

  color: #ffffff;

  font-size: 22px;
  line-height: 1.05;
  font-weight: 1000;
  letter-spacing: -0.045em;

  text-shadow:
    0 14px 32px rgba(0, 0, 0, 0.34),
    0 1px 0 rgba(0, 0, 0, 0.22);
}

.mx-packageDock__copy p {
  max-width: 720px;
  margin: 7px 0 0;

  color: rgba(255, 255, 255, 0.76);

  font-size: 13px;
  line-height: 1.42;
  font-weight: 760;

  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.26);
}

.mx-packageDock__metrics {
  grid-column: 1 / -1;

  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 10px;

  margin-top: 16px;
}

.mx-packageDock__metrics div {
  position: relative;
  overflow: hidden;

  padding: 14px 15px;

  border-radius: 18px;

  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.105));

  border: 1px solid rgba(255, 255, 255, 0.24);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 12px 30px rgba(0, 0, 0, 0.12);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.mx-packageDock__metrics div::before {
  content: "";

  position: absolute;
  inset: 0 auto 0 0;

  width: 4px;

  background: linear-gradient(180deg, #6AAFFF, #1B4F8C);
  opacity: 0.95;
}

.mx-packageDock__metrics span {
  display: block;

  color: rgba(255, 255, 255, 0.66);

  font-size: 9px;
  font-weight: 1000;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.mx-packageDock__metrics strong {
  display: block;

  margin-top: 7px;

  color: #ffffff;

  font-size: 18px;
  line-height: 1;
  font-weight: 1000;
  letter-spacing: -0.035em;

  text-shadow: 0 10px 24px rgba(0, 0, 0, 0.30);
}

.mx-packageDock__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.mx-packageDock__actions a {
  min-height: 46px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 18px;

  border-radius: 999px;

  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(27, 79, 140, 0.92), rgba(18, 58, 104, 0.86));

  border: 1px solid rgba(255, 255, 255, 0.24);

  font-size: 13px;
  font-weight: 1000;
  text-decoration: none;

  box-shadow:
    0 16px 34px rgba(27, 79, 140, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);

  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease;
}

.mx-packageDock__actions a:hover {
  transform: translateY(-1px);

  box-shadow:
    0 20px 42px rgba(27, 79, 140, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.mx-packageDock__preview {
  display: none !important;
}

@media (max-width: 900px) {
  .mx-packageDock {
    bottom: 14px;
    width: calc(100vw - 24px);
  }

  .mx-packageDock__card {
    grid-template-columns: 1fr;
    padding: 16px;
    border-radius: 24px;
  }

  .mx-packageDock__actions {
    justify-content: flex-start;
  }

  .mx-packageDock__actions a {
    width: 100%;
  }

  .mx-packageDock__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .mx-packageDock__main {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
  }

  .mx-packageDock__icon {
    width: 44px;
    height: 44px;
    border-radius: 15px;
    font-size: 20px;
  }

  .mx-packageDock__copy strong {
    font-size: 18px;
  }

  .mx-packageDock__metrics {
    grid-template-columns: 1fr;
  }
}



/* =========================================================
   MOBILE FIX — COMPACT QUOTE DOCK BESIDE LEFT RAIL
========================================================= */

@media (max-width: 760px) {
  .mx-packageDock {
    position: fixed;

    /* leave space for the left vertical rail */
    left: 92px;
    right: 10px;
    bottom: 12px;

    width: auto;
    max-width: none;

    transform: none;

    padding: 0;
    z-index: 120;

    pointer-events: none;
  }

  .mx-packageDock__glow {
    left: 10%;
    right: 10%;
    bottom: -8px;
    height: 24px;
    opacity: 0.65;
  }

  .mx-packageDock__card {
    width: 100%;

    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;

    max-height: none;
    min-height: 0;

    padding: 12px;

    border-radius: 18px;

    overflow: hidden;

    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.10));

    border: 1px solid rgba(255, 255, 255, 0.28);

    box-shadow:
      0 18px 44px rgba(0, 0, 0, 0.26),
      inset 0 1px 0 rgba(255, 255, 255, 0.22);

    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);

    pointer-events: auto;
  }

  .mx-packageDock__main {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 9px;

    align-items: center;
  }

  .mx-packageDock__icon {
    width: 34px;
    height: 34px;

    border-radius: 12px;

    font-size: 16px;

    box-shadow:
      0 10px 22px rgba(27, 79, 140, 0.32),
      inset 0 1px 0 rgba(255, 255, 255, 0.22);
  }

  .mx-packageDock__copy {
    min-width: 0;
  }

  .mx-packageDock__copy span {
    font-size: 8px;
    line-height: 1;
    letter-spacing: 0.09em;
  }

  .mx-packageDock__copy strong {
    margin-top: 4px;

    font-size: 15px;
    line-height: 1;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* hide long paragraph on mobile */
  .mx-packageDock__copy p {
    display: none;
  }

  .mx-packageDock__metrics {
    display: flex !important;
    grid-template-columns: none !important;

    gap: 8px;

    margin-top: 4px;
    padding: 0 0 4px;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
  }

  .mx-packageDock__metrics::-webkit-scrollbar {
    display: none;
  }

  .mx-packageDock__metrics div {
    flex: 0 0 136px;

    min-width: 136px;
    max-width: 136px;

    padding: 10px 11px;

    border-radius: 14px;

    scroll-snap-align: start;
  }

  .mx-packageDock__metrics div::before {
    width: 3px;
  }

  .mx-packageDock__metrics span {
    font-size: 7.5px;
    line-height: 1.15;
    letter-spacing: 0.08em;
  }

  .mx-packageDock__metrics strong {
    margin-top: 6px;

    font-size: 14px;
    line-height: 1;

    white-space: nowrap;
  }

  .mx-packageDock__actions {
    display: flex;
    justify-content: flex-start;

    margin-top: 0;

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: none;
  }

  .mx-packageDock__actions::-webkit-scrollbar {
    display: none;
  }

  .mx-packageDock__actions a {
    flex: 0 0 auto;

    width: auto !important;
    min-height: 34px;

    padding: 0 13px;

    border-radius: 999px;

    font-size: 11px;
    white-space: nowrap;
  }

  .mx-packageDock__preview {
    display: none !important;
  }
}

/* Extra-small phones */
@media (max-width: 430px) {
  .mx-packageDock {
    left: 97px;
    right: 8px;
    bottom: 10px;
  }

  .mx-packageDock__card {
    padding: 10px;
    border-radius: 16px;
  }

  .mx-packageDock__main {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px;
  }

  .mx-packageDock__icon {
    width: 30px;
    height: 30px;

    border-radius: 10px;

    font-size: 14px;
  }

  .mx-packageDock__copy strong {
    font-size: 14px;
  }

  .mx-packageDock__metrics div {
    flex-basis: 126px;
    min-width: 126px;
    max-width: 126px;
  }

  .mx-packageDock__metrics strong {
    font-size: 13px;
  }

  .mx-packageDock__actions a {
    min-height: 32px;
    padding: 0 12px;
    font-size: 10.5px;
  }
}


/* =========================================================
   MOBILE CONFIG SUMMARY FIX
   Keep summary compact + horizontally scrollable
========================================================= */

@media (max-width: 760px) {
  .mx-configSummary {
    position: fixed;

    /* leave space for left rail */
    top: 62px;
    left: 92px;
    right: 10px;

    width: auto;
    max-width: none;

    transform: none;

    display: flex !important;
    grid-template-columns: none !important;

    gap: 8px;

    padding: 8px;

    overflow-x: auto;
    overflow-y: hidden;

    border-radius: 18px;

    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.10));

    border: 1px solid rgba(255, 255, 255, 0.28);

    box-shadow:
      0 18px 44px rgba(0, 0, 0, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.22);

    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);

    z-index: 100;

    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
  }

  .mx-configSummary::-webkit-scrollbar {
    display: none;
  }

  .mx-summaryItem {
    flex: 0 0 118px;

    min-width: 118px;
    max-width: 118px;

    padding: 10px 11px;

    border-radius: 14px;

    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.10));

    border: 1px solid rgba(255, 255, 255, 0.22);

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      0 10px 24px rgba(0, 0, 0, 0.10);

    scroll-snap-align: start;
  }

  .mx-summaryItem--wide {
    flex-basis: 210px;
    min-width: 210px;
    max-width: 210px;
  }

  .mx-summaryItem--price {
    flex-basis: 132px;
    min-width: 132px;
    max-width: 132px;

    background:
      linear-gradient(135deg, rgba(27, 79, 140, 0.92), rgba(18, 58, 104, 0.82));

    border-color: rgba(255, 255, 255, 0.26);

    box-shadow:
      0 14px 30px rgba(27, 79, 140, 0.26),
      inset 0 1px 0 rgba(255, 255, 255, 0.22);
  }

  .mx-summaryItem span {
    display: block;

    color: rgba(255, 255, 255, 0.68);

    font-size: 7.5px;
    line-height: 1.15;
    font-weight: 1000;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .mx-summaryItem strong {
    display: block;

    margin-top: 6px;

    color: #ffffff;

    font-size: 12px;
    line-height: 1.12;
    font-weight: 1000;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
  }

  .mx-summaryItem--wide strong {
    font-size: 11.5px;
  }

  .mx-summaryItem--price strong {
    font-size: 14px;
  }
}

@media (max-width: 430px) {
  .mx-configSummary {
    top: 58px;
    left: 97px;
    right: 8px;

    padding: 7px;
    gap: 7px;

    border-radius: 16px;
  }

  .mx-summaryItem {
    flex-basis: 106px;
    min-width: 106px;
    max-width: 106px;

    padding: 9px 10px;
    border-radius: 13px;
  }

  .mx-summaryItem--wide {
    flex-basis: 188px;
    min-width: 188px;
    max-width: 188px;
  }

  .mx-summaryItem--price {
    flex-basis: 120px;
    min-width: 120px;
    max-width: 120px;
  }

  .mx-summaryItem span {
    font-size: 7px;
  }

  .mx-summaryItem strong {
    font-size: 11.5px;
  }

  .mx-summaryItem--price strong {
    font-size: 13px;
  }
}


/* =========================================================
   MXDESIGN RAIL + DRAWER FINAL OVERRIDE
   Paste at the VERY BOTTOM of mxdesignConfigurator.css
========================================================= */

.bx-page {
  --mx-accent: #1B4F8C;
  --mx-accent-dark: #123A68;
  --mx-glass: rgba(255, 255, 255, 0.16);
  --mx-glass-strong: rgba(255, 255, 255, 0.22);
  --mx-glass-soft: rgba(255, 255, 255, 0.10);
  --mx-glass-border: rgba(255, 255, 255, 0.26);
  --mx-text: #ffffff;
  --mx-text-muted: rgba(255, 255, 255, 0.68);
}

/* =========================================================
   LEFT RAIL
========================================================= */

.bx-rail {
  position: fixed !important;
  left: 12px !important;
  top: 74px !important;
  bottom: 18px !important;
  z-index: 95 !important;

  width: 72px !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;

  padding: 10px !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  border-radius: 24px !important;

  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.075)) !important;

  border: 1px solid rgba(255, 255, 255, 0.24) !important;

  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;

  backdrop-filter: blur(22px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(145%) !important;

  scrollbar-width: none !important;
}

.bx-rail::-webkit-scrollbar {
  display: none !important;
}

.bx-railBtn,
.bx-railBtn--mini {
  position: relative !important;

  width: 52px !important;
  min-height: 62px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;

  padding: 8px 5px !important;

  border-radius: 18px !important;

  color: rgba(255, 255, 255, 0.86) !important;

  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.075)) !important;

  border: 1px solid rgba(255, 255, 255, 0.18) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 10px 24px rgba(0, 0, 0, 0.10) !important;

  cursor: pointer !important;

  transition:
    transform 0.16s ease,
    background 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    color 0.16s ease !important;
}

.bx-railBtn:hover {
  transform: translateY(-1px) !important;

  color: #ffffff !important;

  background:
    linear-gradient(180deg, rgba(27, 79, 140, 0.22), rgba(27, 79, 140, 0.11)) !important;

  border-color: rgba(27, 79, 140, 0.34) !important;

  box-shadow:
    0 14px 32px rgba(27, 79, 140, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}

.bx-railBtn.is-active {
  color: #ffffff !important;

  background:
    linear-gradient(135deg, rgba(27, 79, 140, 0.96), rgba(18, 58, 104, 0.84)) !important;

  border-color: rgba(255, 255, 255, 0.30) !important;

  box-shadow:
    0 18px 38px rgba(27, 79, 140, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

.bx-railBtn.is-active::before {
  content: "";

  position: absolute;
  left: -10px;
  top: 50%;

  width: 4px;
  height: 26px;

  border-radius: 999px;

  background: #1B4F8C;

  transform: translateY(-50%);

  box-shadow: 0 0 18px rgba(27, 79, 140, 0.75);
}

.bx-railIco,
.bx-railBtn--mini .bx-railIco {
  width: 30px !important;
  height: 30px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 999px !important;

  color: #ffffff !important;
  background: rgba(0, 0, 0, 0.24) !important;

  border: 1px solid rgba(255, 255, 255, 0.14) !important;

  font-size: 15px !important;
  line-height: 1 !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 8px 18px rgba(0, 0, 0, 0.14) !important;
}

.bx-railBtn.is-active .bx-railIco {
  background: rgba(255, 255, 255, 0.20) !important;
}

.bx-railLbl,
.bx-railBtn--mini .bx-railLbl {
  display: block !important;

  max-width: 100% !important;

  color: currentColor !important;

  font-size: 9px !important;
  line-height: 1.05 !important;
  font-weight: 1000 !important;
  letter-spacing: -0.01em !important;

  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  text-shadow: 0 8px 20px rgba(0, 0, 0, 0.24) !important;
}

/* =========================================================
   LEFT DRAWER
========================================================= */

.bx-left {
  position: fixed !important;
  left: 96px !important;
  top: 74px !important;
  bottom: 18px !important;
  z-index: 199 !important;

  width: min(390px, calc(100vw - 118px)) !important;
  max-width: none !important;

  display: flex !important;
  flex-direction: column !important;

  overflow: hidden !important;

  border-radius: 28px !important;

  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.10)) !important;

  border: 1px solid rgba(255, 255, 255, 0.28) !important;

  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;

  backdrop-filter: blur(26px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(150%) !important;

  transform: translateX(0) !important;
  opacity: 1 !important;

  transition:
    transform 0.22s ease,
    opacity 0.22s ease,
    visibility 0.22s ease !important;
}

.bx-left--closed {
  transform: translateX(-18px) scale(0.98) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.bx-panelHead {
  flex: 0 0 auto !important;

  padding: 16px 16px 13px !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important;

  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06)) !important;

  border-top-left-radius: 28px !important;
  border-top-right-radius: 28px !important;
}

.bx-panelHeadRow {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.bx-panelHead h2 {
  margin: 0 !important;

  color: #ffffff !important;

  font-size: 18px !important;
  line-height: 1.05 !important;
  font-weight: 1000 !important;
  letter-spacing: -0.045em !important;

  text-shadow: 0 12px 28px rgba(0, 0, 0, 0.32) !important;
}

.bx-panelHead .mini,
.mini {
  margin-top: 5px !important;

  color: rgba(255, 255, 255, 0.66) !important;

  font-size: 11px !important;
  line-height: 1.28 !important;
  font-weight: 750 !important;
}

.bx-panelBody,
.bx-bodyPro {
  flex: 1 1 auto !important;

  padding: 14px !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  border-bottom-left-radius: 28px !important;
  border-bottom-right-radius: 28px !important;

  scrollbar-width: thin !important;
  scrollbar-color: rgba(27, 79, 140, 0.70) rgba(255, 255, 255, 0.08) !important;
}

.bx-panelBody::-webkit-scrollbar,
.bx-bodyPro::-webkit-scrollbar {
  width: 8px !important;
}

.bx-panelBody::-webkit-scrollbar-track,
.bx-bodyPro::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
}

.bx-panelBody::-webkit-scrollbar-thumb,
.bx-bodyPro::-webkit-scrollbar-thumb {
  background: rgba(27, 79, 140, 0.70) !important;
  border-radius: 999px !important;
}

/* =========================================================
   DRAWER FOOTER
========================================================= */

.bx-footer {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 5 !important;

  padding: 12px 14px 14px !important;

  border-top: 1px solid rgba(255, 255, 255, 0.16) !important;

  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.18)) !important;

  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;

  border-bottom-left-radius: 28px !important;
  border-bottom-right-radius: 28px !important;
}

/* =========================================================
   DRAWER FORMS
========================================================= */

.bx-grid1 {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

.bx-grid2 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.ui-field,
.bx-fieldBlock {
  min-width: 0 !important;

  padding: 12px !important;

  border-radius: 18px !important;

  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.075)) !important;

  border: 1px solid rgba(255, 255, 255, 0.18) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 10px 24px rgba(0, 0, 0, 0.10) !important;
}

.ui-field__top,
.bx-fieldBlock__top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;

  margin-bottom: 8px !important;
}

.ui-label,
.bx-fieldBlock__label {
  color: rgba(255, 255, 255, 0.70) !important;

  font-size: 9px !important;
  font-weight: 1000 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
}

.ui-hint,
.bx-fieldBlock__value {
  color: rgba(255, 255, 255, 0.58) !important;

  font-size: 10px !important;
  font-weight: 900 !important;
}

.ui-inputWrap {
  position: relative !important;
}

.ui-input,
.ui-select,
.bx-input,
.bx-select,
.bx-num,
.bx-panelBody input[type="text"],
.bx-panelBody input[type="number"],
.bx-panelBody input[type="email"],
.bx-panelBody input[type="search"],
.bx-panelBody select {
  width: 100% !important;
  height: 44px !important;

  padding: 0 12px !important;

  border-radius: 14px !important;

  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.12) !important;

  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  outline: 0 !important;

  font-size: 13px !important;
  font-weight: 850 !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 8px 18px rgba(0, 0, 0, 0.08) !important;

  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.ui-input::placeholder,
.bx-input::placeholder {
  color: rgba(255, 255, 255, 0.48) !important;
}

.ui-input:focus,
.ui-select:focus,
.bx-input:focus,
.bx-select:focus,
.bx-num:focus,
.bx-panelBody input:focus,
.bx-panelBody select:focus {
  border-color: rgba(27, 79, 140, 0.76) !important;

  box-shadow:
    0 0 0 4px rgba(27, 79, 140, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

.ui-suffix,
.ui-unit,
.ui-field__suffix {
  position: absolute !important;
  right: 11px !important;
  top: 50% !important;

  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  background: transparent !important;

  color: rgba(255, 255, 255, 0.58) !important;

  font-size: 10px !important;
  font-weight: 1000 !important;

  transform: translateY(-50%) !important;
}

.bx-range,
.ui-range,
.bx-page .bx-left input[type="range"] {
  width: 100% !important;
  accent-color: #1B4F8C !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.bx-color,
.bx-panelBody input[type="color"],
.bx-page .bx-left input[type="color"] {
  width: 100% !important;
  height: 44px !important;

  padding: 5px !important;

  border-radius: 14px !important;

  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 8px 18px rgba(0, 0, 0, 0.08) !important;

  cursor: pointer !important;
}

.bx-panelBody input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0 !important;
}

.bx-panelBody input[type="color"]::-webkit-color-swatch {
  border: none !important;
  border-radius: 10px !important;
}

/* =========================================================
   BUTTONS / TOGGLES
========================================================= */

.ui-btn,
.bx-quoteBtn,
.bx-modalBtn {
  min-height: 40px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  padding: 0 13px !important;

  border-radius: 999px !important;

  border: 1px solid rgba(255, 255, 255, 0.18) !important;

  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.10) !important;

  font-size: 12px !important;
  font-weight: 950 !important;

  cursor: pointer !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 24px rgba(0, 0, 0, 0.10) !important;

  transition:
    transform 0.16s ease,
    background 0.16s ease,
    border-color 0.16s ease !important;
}

.ui-btn:hover,
.bx-quoteBtn:hover,
.bx-modalBtn:hover {
  transform: translateY(-1px) !important;
  background: rgba(27, 79, 140, 0.22) !important;
  border-color: rgba(27, 79, 140, 0.35) !important;
}

.ui-btn--primary,
.ui-btn.is-primary,
.bx-generatePackageBtn,
.mx-generatePackageBtn,
.bx-modalBtn--primary {
  background:
    linear-gradient(135deg, rgba(27, 79, 140, 0.95), rgba(18, 58, 104, 0.84)) !important;

  border-color: rgba(255, 255, 255, 0.24) !important;

  box-shadow:
    0 16px 34px rgba(27, 79, 140, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

.ui-toggle,
.bx-check,
.bx-page .bx-left label:has(input[type="checkbox"]) {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;

  padding: 12px !important;

  border-radius: 18px !important;

  background: rgba(255, 255, 255, 0.11) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;

  color: #ffffff !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 8px 18px rgba(0, 0, 0, 0.08) !important;

  cursor: pointer !important;
}

.ui-toggle__label,
.bx-check span {
  color: #ffffff !important;

  font-size: 13px !important;
  font-weight: 950 !important;
}

.ui-toggle__sub {
  color: rgba(255, 255, 255, 0.58) !important;
}

.bx-page .bx-left input[type="checkbox"] {
  accent-color: #1B4F8C !important;
}

/* =========================================================
   PORCH POPUP — YOUR CLASS IS bx-porchPop
========================================================= */

.bx-porchPop {
  position: fixed !important;
  z-index: 150 !important;

  width: 320px !important;
  max-width: min(320px, calc(100vw - 24px)) !important;

  padding: 12px !important;

  border-radius: 22px !important;

  color: #ffffff !important;
  background:
    linear-gradient(180deg, rgba(20, 32, 22, 0.62), rgba(20, 32, 22, 0.34)) !important;

  border: 1px solid rgba(255, 255, 255, 0.24) !important;

  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;

  backdrop-filter: blur(22px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
}

.bx-porchPop__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;

  margin-bottom: 12px !important;
}

.bx-porchPop__title {
  color: #ffffff !important;

  font-size: 12px !important;
  font-weight: 1000 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.bx-porchPop__x {
  width: 34px !important;
  height: 34px !important;

  border-radius: 999px !important;

  border: 1px solid rgba(255, 255, 255, 0.18) !important;

  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.12) !important;

  font-weight: 1000 !important;
  cursor: pointer !important;
}

.bx-porchPop__grid {
  display: grid !important;
  gap: 10px !important;
}

/* =========================================================
   MOBILE RAIL / DRAWER / POPUP
========================================================= */

@media (max-width: 760px) {
  .bx-rail {
    left: 8px !important;
    top: 62px !important;
    bottom: 10px !important;

    width: 72px !important;

    padding: 8px !important;
    gap: 8px !important;

    border-radius: 20px !important;
  }

  .bx-railBtn,
  .bx-railBtn--mini {
    width: 56px !important;
    min-height: 62px !important;

    border-radius: 16px !important;
  }

  .bx-railIco,
  .bx-railBtn--mini .bx-railIco {
    width: 29px !important;
    height: 29px !important;

    font-size: 14px !important;
  }

  .bx-railLbl,
  .bx-railBtn--mini .bx-railLbl {
    font-size: 8.5px !important;
  }

  .bx-left {
    left: 88px !important;
    top: 62px !important;
    right: 8px !important;
    bottom: 10px !important;

    width: auto !important;

    border-radius: 22px !important;
  }

  .bx-panelHead {
    padding: 13px 13px 10px !important;

    border-top-left-radius: 22px !important;
    border-top-right-radius: 22px !important;
  }

  .bx-panelHead h2 {
    font-size: 16px !important;
  }

  .bx-panelHead .mini,
  .mini {
    font-size: 10px !important;
  }

  .bx-panelBody,
  .bx-bodyPro {
    padding: 11px !important;

    border-bottom-left-radius: 22px !important;
    border-bottom-right-radius: 22px !important;
  }

  .bx-grid2 {
    grid-template-columns: 1fr !important;
  }

  .ui-field,
  .bx-fieldBlock {
    padding: 10px !important;
    border-radius: 16px !important;
  }

  .ui-input,
  .ui-select,
  .bx-input,
  .bx-select,
  .bx-num {
    height: 42px !important;
    border-radius: 13px !important;
  }

  .bx-footer {
    border-bottom-left-radius: 22px !important;
    border-bottom-right-radius: 22px !important;
  }

  .bx-porchPop {
    left: 88px !important;
    right: 8px !important;
    top: auto !important;
    bottom: 96px !important;

    width: auto !important;
    max-width: none !important;

    transform: none !important;
  }
}

@media (max-width: 430px) {
  .bx-rail {
    left: 6px !important;
    width: 68px !important;
  }

  .bx-railBtn,
  .bx-railBtn--mini {
    width: 52px !important;
    min-height: 58px !important;
  }

  .bx-left {
    left: 82px !important;
    right: 6px !important;
  }

  .bx-porchPop {
    left: 82px !important;
    right: 6px !important;
  }
}


/* =========================================================
   FLOATING STEEL QUOTE BUTTON
   Shows before result, hides after packageResult
========================================================= */

.mx-floatingQuote {
  position: fixed;
  right: 22px;
  bottom: 24px;
  z-index: 118;

  pointer-events: none;
}

.mx-floatingQuote__btn {
  min-width: 230px;
  min-height: 64px;

  display: inline-flex;
  align-items: center;
  gap: 13px;

  padding: 10px 18px 10px 12px;

  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 999px;

  color: #ffffff;

  background:
    linear-gradient(135deg, rgba(27, 79, 140, 0.96), rgba(18, 58, 104, 0.86));

  box-shadow:
    0 22px 56px rgba(27, 79, 140, 0.34),
    0 18px 50px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);

  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);

  cursor: pointer;
  pointer-events: auto;

  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    filter 0.16s ease,
    opacity 0.16s ease;
}

.mx-floatingQuote__btn:hover {
  transform: translateY(-2px);

  box-shadow:
    0 26px 66px rgba(27, 79, 140, 0.42),
    0 22px 58px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
}

.mx-floatingQuote__btn:active {
  transform: translateY(0) scale(0.985);
}

.mx-floatingQuote__btn:disabled {
  cursor: wait;
  opacity: 0.82;
  transform: none;
}

.mx-floatingQuote__icon {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  flex: 0 0 42px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.22);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 10px 24px rgba(0, 0, 0, 0.14);
}

.mx-floatingQuote__text {
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  line-height: 1.05;
}

.mx-floatingQuote__text small {
  color: rgba(255, 255, 255, 0.76);

  font-size: 9px;
  font-weight: 1000;
  letter-spacing: 0.12em;
  text-transform: uppercase;

  text-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
}

.mx-floatingQuote__text strong {
  margin-top: 4px;

  color: #ffffff;

  font-size: 15px;
  font-weight: 1000;
  letter-spacing: -0.02em;

  text-shadow:
    0 12px 28px rgba(0, 0, 0, 0.28),
    0 1px 0 rgba(0, 0, 0, 0.16);
}

/* Leave room for left rail on mobile */
@media (max-width: 760px) {
  .mx-floatingQuote {
    left: 88px;
    right: 10px;
    bottom: 12px;
  }

  .mx-floatingQuote__btn {
    width: 100%;
    min-width: 0;
    min-height: 56px;

    padding: 9px 14px 9px 10px;
  }

  .mx-floatingQuote__icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .mx-floatingQuote__text small {
    font-size: 8px;
  }

  .mx-floatingQuote__text strong {
    font-size: 14px;
  }
}

@media (max-width: 430px) {
  .mx-floatingQuote {
    left: 82px;
    right: 8px;
    bottom: 10px;
  }

  .mx-floatingQuote__btn {
    min-height: 52px;
  }

  .mx-floatingQuote__icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }
}


.mx-summaryItem--quoteBtn {
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.mx-summaryItem--quoteBtn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.mx-summaryItem--quoteBtn:disabled {
  cursor: wait;
  opacity: 0.82;
  transform: none;
}

/* =========================================================
   MXDESIGN APP BAR - FLOATING LOGO + FLOATING CONTROLS
   No big header background
========================================================= */

.bx-appbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  min-height: 0;
  z-index: 112;

  display: block;
  padding: 0;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  pointer-events: none;
}

.bx-appbar::before,
.bx-appbar::after {
  display: none !important;
  content: none !important;
}

/* =========================================================
   FLOATING LOGO - OUTSIDE HEADER
========================================================= */

.bx-appbar__brand {
  position: fixed;
  top: 3px;
  left: 34px;
  z-index: 116;

  display: flex;
  align-items: center;

  width: auto;
  min-width: 0;

  pointer-events: none;
}

.bx-logo {
  width: 245px;
  height: 58px;

  display: flex;
  align-items: center;
  justify-content: flex-start;

  padding: 0;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.mx-wordmark--header {
  display: flex;
  align-items: baseline;
  gap: 0.35em;
  font-family: Georgia, "Times New Roman", Times, serif;
}

.mx-wordmark--header .mx-wordmark-a {
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.01em;
  color: #ffffff;
}

.mx-wordmark--header .mx-wordmark-b {
  font-style: italic;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: #9DC3EC;
}

.bx-logoImg {
  width: 100%;
  height: 100%;

  object-fit: contain;
  object-position: left center;

  user-select: none;
  -webkit-user-drag: none;

  filter:
    drop-shadow(0 12px 28px rgba(0, 0, 0, 0.34))
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.18));
}

/* Remove old title text */
.bx-appbar__brandTxt,
.bx-appbar__title,
.bx-appbar__sub {
  display: none !important;
}

/* Hide empty center white block */
.bx-appbar__center,
.bx-appbar__location,
.bx-estimate {
  display: none !important;
}

/* =========================================================
   FLOATING ACTION CONTROLS
========================================================= */

.bx-appbar__actions {
  position: fixed;
  top: 12px;
  right: 34px;
  z-index: 116;

  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;

  padding: 7px;
  color: black;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.26);

  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.10));

  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);

  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);

  pointer-events: auto;
}

/* Status pill - no heavy green block */
.bx-appbar__actions .ui-pill {
  min-height: 42px;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 0 17px;

  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24);

  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.08));

  font-size: 12px;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    0 10px 24px rgba(0, 0, 0, 0.10);
}

.bx-appbar__actions .ui-pill::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 999px;
  background: rgba(27, 79, 140, 0.95);
  box-shadow: 0 0 14px rgba(27, 79, 140, 0.85);
}

/* Refresh / Reset buttons */
.bx-appbar .ui-btn,
.bx-appbar .bx-quoteBtn {
  min-height: 42px;
  padding: 0 16px;

  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);

  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.075));

  font-weight: 1000;
  letter-spacing: -0.01em;
  white-space: nowrap;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 10px 24px rgba(0, 0, 0, 0.10);

  transition:
    transform 0.16s ease,
    background 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

.bx-appbar .ui-btn:hover,
.bx-appbar .bx-quoteBtn:hover {
  transform: translateY(-1px);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.11));
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.bx-appbar .ui-btn:active,
.bx-appbar .bx-quoteBtn:active {
  transform: translateY(0) scale(0.985);
}

/* Button icons - remove green look */
.bx-appbar .ui-btn__icon {
  width: 28px;
  height: 28px;

  display: grid;
  place-items: center;

  margin-left: -7px;

  border-radius: 999px;

  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.13) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.bx-appbar .ui-btn__icon svg {
  color: #ffffff !important;
  stroke: currentColor !important;
}

.bx-appbar .ui-btn__txt {
  color: rgba(255, 255, 255, 0.96);
}

/* =========================================================
   SUMMARY BAR POSITION
========================================================= */

.mx-configSummary {
  top: 104px !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 980px) {
  .bx-appbar__brand {
    top: 18px;
    left: 22px;
  }

  .bx-logo {
    width: 205px;
    height: 50px;
  }

  .bx-appbar__actions {
    top: 20px;
    right: 22px;
    gap: 6px;
    padding: 6px;
  }

  .bx-appbar__actions .ui-pill {
    min-height: 38px;
    padding: 0 14px;
    font-size: 11px;
  }

  .bx-appbar .ui-btn,
  .bx-appbar .bx-quoteBtn {
    min-height: 38px;
    padding: 0 13px;
  }

  .bx-appbar .ui-btn__icon {
    width: 26px;
    height: 26px;
  }

  .mx-configSummary {
    top: 86px !important;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {
  .bx-appbar__brand {
    top: 12px;
    left: 14px;
  }

  .bx-logo {
    width: 155px;
    height: 42px;
  }

  .bx-appbar__actions {
    top: 12px;
    right: 12px;
    gap: 5px;
    padding: 5px;
  }

  .bx-appbar__actions .ui-pill {
    min-height: 34px;
    padding: 0 10px;
    font-size: 10px;
  }

  .bx-appbar .ui-btn,
  .bx-appbar .bx-quoteBtn {
    min-width: 34px;
    min-height: 34px;
    padding: 0 9px;
    font-size: 0;
  }

  .bx-appbar .ui-btn__txt {
    display: none;
  }

  .bx-appbar .ui-btn__icon {
    width: 25px;
    height: 25px;
    margin: 0;
  }

  .mx-configSummary {
    top: 72px !important;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 430px) {
  .bx-appbar__brand {
    top: 10px;
    left: 10px;
  }

  .bx-logo {
    width: 128px;
    height: 36px;
  }

  .bx-appbar__actions {
    top: -4px;
    right: 8px;
    gap: 4px;
    padding: 4px;
  }

  .bx-appbar__actions .ui-pill {
    min-height: 31px;
    padding: 0 8px;
    font-size: 8px;
  }

  .bx-appbar .ui-btn,
  .bx-appbar .bx-quoteBtn {
    min-width: 31px;
    min-height: 31px;
    padding: 0 7px;
  }

  .bx-appbar .ui-btn__icon {
    width: 23px;
    height: 23px;
  }

  .mx-configSummary {
    top: 62px !important;
  }
}


/* Header action text black */
.bx-appbar .ui-btn,
.bx-appbar .bx-quoteBtn {
  color: #111827 !important;
}

.bx-appbar .ui-btn__txt {
  color: #111827 !important;
}

/* Header action icons black too */
.bx-appbar .ui-btn__icon {
  color: #111827 !important;
}

.bx-appbar .ui-btn__icon svg {
  color: #111827 !important;
  stroke: currentColor !important;
}

/* Keep READY white, because it sits on dark green */
.bx-appbar__actions .ui-pill {
  color: #ffffff !important;
}

.bx-appbar__actions .ui-pill .ui-pill__txt,
.bx-appbar__actions .ui-pill span {
  color: #ffffff !important;
}



/* Header action group - fit content */
.bx-appbar__actions {
  width: fit-content !important;
  min-width: 0 !important;

  display: inline-flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;

  padding: 6px !important;
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.70) !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;

  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.90);

  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

/* Status: white raised circle only */
.bx-appbar__actions .ui-pill {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;

  padding: 0 !important;
  margin: 0 !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.86) !important;

  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.72)) !important;

  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;

  font-size: 0 !important;
  color: transparent !important;
  overflow: visible !important;
}

/* Green dot inside the white circle */
.bx-appbar__actions .ui-pill::before {
  content: "";
  width: 18px !important;
  height: 18px !important;
  border-radius: 999px;

  background:
    radial-gradient(circle at 35% 30%, #74ff9a, #2f6f3e 58%, #245a35 100%) !important;

  box-shadow:
    0 0 0 4px rgba(48, 128, 70, 0.10),
    0 8px 18px rgba(0, 0, 0, 0.22),
    inset 0 1px 2px rgba(255, 255, 255, 0.42) !important;
}

/* Hide Ready text */
.bx-appbar__actions .ui-pill * {
  display: none !important;
}

/* Make Refresh / Reset fit tighter */
.bx-appbar .ui-btn,
.bx-appbar .bx-quoteBtn {
  min-height: 42px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;

  color: #111827 !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.45)) !important;

  border: 1px solid rgba(255, 255, 255, 0.68) !important;

  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

.bx-appbar .ui-btn__txt {
  color: #111827 !important;
}

.bx-appbar .ui-btn__icon {
  width: 27px !important;
  height: 27px !important;
  margin-left: -6px !important;

  color: #111827 !important;
  background: rgba(255, 255, 255, 0.58) !important;
  border: 1px solid rgba(17, 24, 39, 0.08) !important;
}

.bx-appbar .ui-btn__icon svg {
  color: #111827 !important;
  stroke: currentColor !important;
}



/* Small header toggle for walls + roof */
.bx-headerMiniToggle {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 0 13px;

  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.68);

  color: #111827;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.45));

  font-family: inherit;
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: -0.01em;
  white-space: nowrap;

  cursor: pointer;

  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);

  transition:
    transform 0.16s ease,
    background 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    opacity 0.16s ease;
}

.bx-headerMiniToggle:hover {
  transform: translateY(-1px);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.55));
  border-color: rgba(255, 255, 255, 0.82);
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.bx-headerMiniToggle:active {
  transform: translateY(0) scale(0.985);
}

.bx-headerMiniToggle__icon {
  width: 27px;
  height: 27px;

  display: grid;
  place-items: center;

  margin-left: -5px;

  border-radius: 999px;

  color: #111827;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(17, 24, 39, 0.08);

  font-size: 14px;
  line-height: 1;
}

.bx-headerMiniToggle__txt {
  color: #111827;
}

/* Off state */
.bx-headerMiniToggle.is-off {
  opacity: 0.78;
}

.bx-headerMiniToggle.is-off .bx-headerMiniToggle__icon {
  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(27, 79, 140, 0.95), rgba(18, 58, 104, 0.78));
  border-color: rgba(112, 178, 255, 0.55);
}

/* Transparent state (mid-cycle: shell built but see-through) */
.bx-headerMiniToggle.is-transparent {
  opacity: 0.9;
}

.bx-headerMiniToggle.is-transparent .bx-headerMiniToggle__icon {
  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(217, 119, 6, 0.95), rgba(180, 83, 9, 0.78));
  border-color: rgba(253, 186, 116, 0.55);
}

.bx-allBlackBtn {
  white-space: nowrap;
}

.bx-confirmBox {
  border: 1px solid rgba(217, 119, 6, 0.55);
  background: rgba(217, 119, 6, 0.08);
  border-radius: 12px;
  padding: 12px;
}

/* Mobile: icon only */
@media (max-width: 760px) {
  .bx-headerMiniToggle {
    min-width: 34px;
    min-height: 34px;
    padding: 0 9px;
    font-size: 0;
  }

  .bx-headerMiniToggle__txt {
    display: none;
  }

  .bx-headerMiniToggle__icon {
    width: 25px;
    height: 25px;
    margin: 0;
    font-size: 13px;
  }
}

@media (max-width: 430px) {
  .bx-headerMiniToggle {
    min-width: 31px;
    min-height: 31px;
    padding: 0 7px;
  }

  .bx-headerMiniToggle__icon {
    width: 23px;
    height: 23px;
    font-size: 12px;
  }
}






/* =========================================================
   FINAL DARK GLASS DRAWER OVERRIDE

========================================================= */


.bx-page {
  --mx-glass: rgba(255, 255, 255, 0.14);
  --mx-glass-2: rgb(90 77 67 / 9%);
  --mx-glass-3: rgba(255, 255, 255, 0.07);

  --mx-white: rgba(255, 255, 255, 0.96);
  --mx-white-soft: rgba(255, 255, 255, 0.76);
  --mx-white-muted: rgba(255, 255, 255, 0.58);

  --mx-line: rgba(255, 255, 255, 0.22);
  --mx-accent: #1B4F8C;
}

/* Main drawer: transparent blurred glass */
.bx-left {
  background: var(--mx-glass) !important;

  border: 1px solid var(--mx-line) !important;

  box-shadow:
    0 28px 80px rgba(31, 41, 55, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;

  backdrop-filter: blur(30px) saturate(155%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(155%) !important;
}

/* Drawer header */
.bx-panelHead {
  background: var(--mx-glass-2) !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important;

  backdrop-filter: blur(18px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
}

.bx-panelHead h2,
.bx-sectionTitle,
.bx-cardTitle,
.ui-section__title {
  color: var(--mx-white) !important;
  text-shadow: 0 8px 22px rgba(31, 41, 55, 0.20) !important;
}

.bx-panelHead .mini,
.bx-cardMeta,
.bx-cardSub,
.ui-section__sub,
.ui-hint {
  color: var(--mx-white-soft) !important;
}

/* Inner cards: transparent glass only */
.bx-card,
.ui-section,
.bx-fieldBlock,
.ui-field,
.bx-check,
.ui-toggle {
  background: var(--mx-glass-2) !important;

  border: 1px solid rgba(255, 255, 255, 0.18) !important;

  box-shadow:
    0 16px 36px rgba(31, 41, 55, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;

  backdrop-filter: blur(20px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(145%) !important;
}

/* Text inside cards */
.bx-card *,
.ui-section *,
.bx-fieldBlock *,
.ui-field *,
.ui-toggle *,
.bx-check * {
  color: inherit;
}

.ui-label,
.bx-fieldBlock__label {
  color: rgba(255, 255, 255, 0.72) !important;
}

.ui-toggle__label,
.bx-check span {
  color: var(--mx-white) !important;
}

.ui-toggle__sub {
  color: var(--mx-white-muted) !important;
}

/* Inputs and selects: transparent blurred glass */
.ui-input,
.ui-select,
.bx-input,
.bx-select,
.bx-num,
.bx-panelBody input[type="text"],
.bx-panelBody input[type="number"],
.bx-panelBody input[type="email"],
.bx-panelBody input[type="search"],
.bx-panelBody select {
  color: #ffffff !important;

  background: rgba(255, 255, 255, 0.12) !important;

  border: 1px solid rgba(255, 255, 255, 0.24) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 10px 24px rgba(31, 41, 55, 0.10) !important;

  backdrop-filter: blur(16px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(145%) !important;
}

.ui-input::placeholder,
.bx-input::placeholder {
  color: rgba(255, 255, 255, 0.52) !important;
}

/* Native dropdown options cannot blur reliably, so make text visible */
.ui-select option,
.bx-select option,
.bx-panelBody select option {
  color: #172033 !important;
  background: rgba(255, 255, 255, 0.96) !important;
}

/* Select arrow visible */
.ui-select,
.bx-select,
.bx-panelBody select {
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.90) 50%),
    linear-gradient(135deg, rgba(255,255,255,.90) 50%, transparent 50%) !important;

  background-position:
    calc(100% - 18px) 18px,
    calc(100% - 12px) 18px !important;

  background-size: 6px 6px, 6px 6px !important;
  background-repeat: no-repeat !important;
}

/* Focus state */
.ui-input:focus,
.ui-select:focus,
.bx-input:focus,
.bx-select:focus,
.bx-num:focus,
.bx-panelBody input:focus,
.bx-panelBody select:focus {
  border-color: rgba(27, 79, 140, 0.78) !important;

  box-shadow:
    0 0 0 4px rgba(27, 79, 140, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 12px 28px rgba(31, 41, 55, 0.14) !important;
}

/* Color picker transparent glass */
.bx-color,
.bx-panelBody input[type="color"],
.bx-page .bx-left input[type="color"] {
  background: rgba(255, 255, 255, 0.12) !important;

  border: 1px solid rgba(255, 255, 255, 0.24) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 10px 24px rgba(31, 41, 55, 0.10) !important;

  backdrop-filter: blur(16px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(145%) !important;
}

.bx-panelBody input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0 !important;
}

.bx-panelBody input[type="color"]::-webkit-color-swatch {
  border: 0 !important;
  border-radius: 10px !important;
}

/* Buttons in drawer: transparent glass */
.bx-panelBody .ui-btn,
.bx-panelBody .ui-btn--ghost,
.bx-panelBody .ui-btn--primary {
  color: #ffffff !important;

  background: rgba(255, 255, 255, 0.12) !important;

  border: 1px solid rgba(255, 255, 255, 0.20) !important;

  box-shadow:
    0 12px 28px rgba(31, 41, 55, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;

  backdrop-filter: blur(16px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(145%) !important;
}

.bx-panelBody .ui-btn:hover,
.bx-panelBody .ui-btn.is-active {
  background: rgba(27, 79, 140, 0.55) !important;
  border-color: rgba(255, 255, 255, 0.30) !important;
}

/* Main section/card spacing stays clean */
.bx-panelBody {
  background: transparent !important;
}

.bx-bodyPro {
  background: transparent !important;
}

/* Range slider */
.bx-range,
.ui-range,
.bx-page .bx-left input[type="range"] {
  accent-color: var(--mx-accent) !important;
}

.bx-page .bx-left input[type="range"]::-webkit-slider-runnable-track {
  background: rgba(255, 255, 255, 0.22) !important;
}

.bx-page .bx-left input[type="range"]::-webkit-slider-thumb {
  background: var(--mx-accent) !important;
}

/* Suffix text */
.ui-suffix,
.ui-unit,
.ui-field__suffix {
  color: rgba(255, 255, 255, 0.66) !important;
}

/* Error readable when visible */
.bx-error {
  visibility: visible !important;
  color: #ffffff !important;
  background: rgba(255, 80, 80, 0.20) !important;
  border-color: rgba(255, 255, 255, 0.20) !important;
  backdrop-filter: blur(16px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(145%) !important;
}




.dw-library {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.dw-card {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(16px);
  border-radius: 18px;
  padding: 12px;
  text-align: left;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.92);
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.dw-card:hover {
  transform: translateY(-2px);
  border-color: rgba(27, 79, 140, 0.7);
  background: rgba(255, 255, 255, 0.14);
}

.dw-preview {
  height: 86px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04)),
    rgba(20, 30, 45, 0.35);
  border: 1px solid rgba(255,255,255,0.18);
}

.dw-preview span {
  font-size: 34px;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.25));
}

.dw-preview--door_single::after,
.dw-preview--door_double::after {
  content: "";
  width: 34px;
  height: 58px;
  border-radius: 6px 6px 2px 2px;
  background: rgba(32, 45, 56, 0.92);
  border: 3px solid rgba(217,224,212,.9);
  position: absolute;
  bottom: 12px;
}

.dw-preview--door_double::after {
  width: 58px;
  background:
    linear-gradient(90deg, transparent 48%, rgba(217,224,212,.9) 49%, rgba(217,224,212,.9) 51%, transparent 52%),
    rgba(32, 45, 56, 0.92);
}

.dw-preview--window_fixed::after,
.dw-preview--window_slider::after,
.dw-preview--window_picture::after {
  content: "";
  width: 64px;
  height: 42px;
  border-radius: 8px;
  background: rgba(127, 199, 255, 0.58);
  border: 4px solid rgba(217,224,212,.95);
  position: absolute;
}

.dw-preview--window_slider::after {
  background:
    linear-gradient(90deg, transparent 48%, rgba(217,224,212,.95) 49%, rgba(217,224,212,.95) 51%, transparent 52%),
    rgba(127, 199, 255, 0.58);
}

.dw-preview--window_fixed::after {
  background:
    linear-gradient(90deg, transparent 48%, rgba(217,224,212,.95) 49%, rgba(217,224,212,.95) 51%, transparent 52%),
    linear-gradient(0deg, transparent 48%, rgba(217,224,212,.95) 49%, rgba(217,224,212,.95) 51%, transparent 52%),
    rgba(127, 199, 255, 0.58);
}

.dw-preview--void_rough_opening::after {
  content: "";
  width: 56px;
  height: 56px;
  border-radius: 4px;
  background: rgba(10, 14, 20, 0.55);
  border: 3px dashed rgba(217,224,212,.85);
  position: absolute;
}

.dw-cardTitle {
  font-weight: 950;
  font-size: 13px;
  margin-bottom: 4px;
}

.dw-cardMeta {
  font-size: 11px;
  line-height: 1.35;
  color: black;
}
.opening-nudge-grid
{
      display: flex;
    width: 100%;
    justify-content: space-around;
    flex-wrap: wrap;
}

.ui-toggle__label, .bx-check span
{
  color:black !important;
}
/* ==========================================================
   PAPER MODE — STRONG READABILITY + POP-UP DEPTH
   ========================================================== */

.bx-page--paper {
  --paper-bg: #E9EFF5;
  --paper-surface: rgba(255, 255, 255, 0.88);
  --paper-surface-strong: rgba(255, 255, 255, 0.96);
  --paper-surface-soft: rgba(242, 245, 248, 0.76);

  --paper-text: #17221a;
  --paper-text-2: #2f3b32;
  --paper-muted: #657068;
  --paper-border: rgba(32, 45, 36, 0.16);
  --paper-border-strong: rgba(32, 45, 36, 0.24);

  --paper-shadow:
    0 24px 70px rgba(31, 41, 35, 0.18),
    0 8px 24px rgba(31, 41, 35, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);

  color: var(--paper-text);
}

/* ----------------------------------------------------------
   LEFT POPUP PANEL
   ---------------------------------------------------------- */

.bx-page--paper .bx-left {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.96),
      rgba(239, 242, 246, 0.90)
    ) !important;

  border: 1px solid var(--paper-border-strong) !important;

  box-shadow:
    0 32px 90px rgba(25, 35, 29, 0.24),
    0 10px 28px rgba(25, 35, 29, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;

  color: var(--paper-text) !important;

  -webkit-backdrop-filter: blur(28px) saturate(125%) !important;
  backdrop-filter: blur(28px) saturate(125%) !important;
}

/* Popup header */
.bx-page--paper .bx-panelHead {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.98),
      rgba(241, 244, 247, 0.88)
    ) !important;

  border-bottom: 1px solid var(--paper-border) !important;
  color: var(--paper-text) !important;
}

/* Popup scroll body */
.bx-page--paper .bx-panelBody {
  background: rgba(239, 242, 246, 0.72) !important;
  color: var(--paper-text) !important;
}

/* ----------------------------------------------------------
   ALL SECTION CARDS
   ---------------------------------------------------------- */

.bx-page--paper .bx-card,
.bx-page--paper .bx-section,
.bx-page--paper .bx-sectionCard,
.bx-page--paper .bx-group,
.bx-page--paper .bx-fieldBlock,
.bx-page--paper .ui-field,
.bx-page--paper .ui-card,
.bx-page--paper .mx-colorCard,
.bx-page--paper .mx-optionCard,
.bx-page--paper .mx-panelCard {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.96),
      rgba(238, 241, 245, 0.90)
    ) !important;

  border: 1px solid var(--paper-border) !important;

  box-shadow:
    0 14px 34px rgba(31, 42, 35, 0.12),
    0 4px 12px rgba(31, 42, 35, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;

  color: var(--paper-text) !important;
}

/* Add stronger separation between major sections */
.bx-page--paper .bx-panelBody > section,
.bx-page--paper .bx-panelBody > .bx-section,
.bx-page--paper .bx-panelBody > .bx-card {
  margin-bottom: 18px;
}

.bx-page--paper .bx-panelBody > .bx-section
{
  border: none !important;
  background: transparent !important;
}

/* ----------------------------------------------------------
   HEADINGS AND TEXT
   ---------------------------------------------------------- */

.bx-page--paper h1,
.bx-page--paper h2,
.bx-page--paper h3,
.bx-page--paper h4,
.bx-page--paper h5,
.bx-page--paper h6,
.bx-page--paper .bx-title,
.bx-page--paper .bx-panelTitle,
.bx-page--paper .bx-sectionTitle,
.bx-page--paper .ui-label,
.bx-page--paper .mx-cardTitle,
.bx-page--paper .mx-sectionTitle {
  color: var(--paper-text) !important;
  text-shadow: none !important;
}

/* Normal paragraphs and descriptions */
.bx-page--paper p,
.bx-page--paper .bx-copy,
.bx-page--paper .bx-description,
.bx-page--paper .bx-subtitle,
.bx-page--paper .ui-hint,
.bx-page--paper .ui-toggle__sub,
.bx-page--paper .mx-cardDescription {
  color: var(--paper-muted) !important;
  text-shadow: none !important;
}

/* Labels that were previously white */
.bx-page--paper .ui-label,
.bx-page--paper .ui-toggle__label,
.bx-page--paper label,
.bx-page--paper .bx-label,
.bx-page--paper .bx-valueLabel,
.bx-page--paper .mx-label {
  color: var(--paper-text-2) !important;
}

/* Force inherited text inside light cards */
.bx-page--paper .bx-card *,
.bx-page--paper .bx-section *,
.bx-page--paper .bx-fieldBlock *,
.bx-page--paper .ui-field * {
  text-shadow: none;
}

/* Do not override icons or deliberately colored controls */
.bx-page--paper .ui-btn,
.bx-page--paper .bx-railItem,
.bx-page--paper .mx-summaryItem--price {
  color: inherit;
}

/* ----------------------------------------------------------
   INPUTS, SELECTS, SLIDERS
   ---------------------------------------------------------- */

.bx-page--paper input:not([type="range"]):not([type="color"]),
.bx-page--paper select,
.bx-page--paper textarea,
.bx-page--paper .ui-input,
.bx-page--paper .ui-select {
  background: rgba(255, 255, 255, 0.96) !important;
  color: #17221a !important;

  border: 1px solid rgba(31, 45, 35, 0.20) !important;

  box-shadow:
    inset 0 1px 2px rgba(25, 35, 29, 0.07),
    0 4px 12px rgba(25, 35, 29, 0.05) !important;
}

.bx-page--paper input::placeholder,
.bx-page--paper textarea::placeholder {
  color: #7b857e !important;
  opacity: 1;
}

.bx-page--paper input:focus,
.bx-page--paper select:focus,
.bx-page--paper textarea:focus {
  border-color: rgba(27, 79, 140, 0.72) !important;

  box-shadow:
    0 0 0 4px rgba(27, 79, 140, 0.13),
    inset 0 1px 2px rgba(25, 35, 29, 0.07) !important;

  outline: none !important;
}

/* Input suffixes */
.bx-page--paper .ui-suffix {
  color: var(--paper-muted) !important;
}

/* ----------------------------------------------------------
   COLOR CARDS
   ---------------------------------------------------------- */

.bx-page--paper .mx-colorCard,
.bx-page--paper .bx-colorCard {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.98),
      rgba(239, 238, 232, 0.94)
    ) !important;

  border: 1px solid rgba(31, 45, 35, 0.16) !important;

  box-shadow:
    0 12px 26px rgba(25, 35, 29, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

.bx-page--paper .mx-colorCard label,
.bx-page--paper .bx-colorCard label {
  color: #243128 !important;
}

.bx-page--paper input[type="color"] {
  border: 4px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow:
    0 0 0 1px rgba(31, 45, 35, 0.18),
    0 7px 18px rgba(25, 35, 29, 0.13) !important;
}

/* ----------------------------------------------------------
   BUTTONS
   ---------------------------------------------------------- */

.bx-page--paper .ui-btn,
.bx-page--paper .bx-btn {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.98),
      rgba(242, 241, 236, 0.94)
    );

  color: #18231b !important;
  border-color: rgba(31, 45, 35, 0.16) !important;

  box-shadow:
    0 8px 20px rgba(25, 35, 29, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.bx-page--paper .ui-btn:hover,
.bx-page--paper .bx-btn:hover {
  background: #ffffff;
  border-color: rgba(27, 79, 140, 0.42) !important;
  transform: translateY(-1px);
}

/* Preserve orange primary buttons */
.bx-page--paper .ui-btn--primary,
.bx-page--paper .ui-btn--danger,
.bx-page--paper .bx-btn--primary,
.bx-page--paper .mx-summaryItem--price,
.bx-page--paper .mx-quoteCta {
  background:
    linear-gradient(
      180deg,
      #4D9FFF,
      #2589FF
    ) !important;

  color: #ffffff !important;
  border-color: rgba(10, 109, 225, 0.42) !important;

  box-shadow:
    0 16px 34px rgba(33, 72, 128, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
}

/* ----------------------------------------------------------
   LEFT ICON RAIL
   ---------------------------------------------------------- */

.bx-page--paper .bx-rail {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.94),
      rgba(241, 240, 234, 0.90)
    ) !important;

  border: 1px solid var(--paper-border) !important;

  box-shadow:
    0 24px 60px rgba(25, 35, 29, 0.17),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

.bx-page--paper .bx-railItem,
.bx-page--paper .bx-rail button {
  color: #17221a !important;
}

.bx-page--paper .bx-railItem span,
.bx-page--paper .bx-rail button span {
  color: inherit !important;
  text-shadow: none !important;
}

/* Active rail button */
.bx-page--paper .bx-railItem.is-active,
.bx-page--paper .bx-railItem.active,
.bx-page--paper .bx-rail button.is-active,
.bx-page--paper .bx-rail button.active {
  background:
    linear-gradient(
      180deg,
      #4B9EFF,
      #2589FF
    ) !important;

  color: #ffffff !important;

  box-shadow:
    0 12px 28px rgba(33, 72, 128, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
}

/* ----------------------------------------------------------
   TOP PROJECT SUMMARY
   ---------------------------------------------------------- */

.bx-page--paper .mx-configSummary {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.96),
      rgba(244, 243, 237, 0.90)
    ) !important;

  border: 1px solid var(--paper-border) !important;

  box-shadow:
    0 20px 55px rgba(25, 35, 29, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

.bx-page--paper .mx-summaryItem:not(.mx-summaryItem--price) {
  background: rgba(255, 255, 255, 0.42) !important;
  border-color: rgba(31, 45, 35, 0.10) !important;
}

.bx-page--paper .mx-summaryLabel {
  color: #68736b !important;
}

.bx-page--paper .mx-summaryValue {
  color: #1a261d !important;
}

/* ----------------------------------------------------------
   CLOSE BUTTON
   ---------------------------------------------------------- */

.bx-page--paper .bx-panelHead .ui-btn,
.bx-page--paper .bx-close,
.bx-page--paper .bx-panelClose {
  background: rgba(255, 255, 255, 0.92) !important;
  color: #263229 !important;

  border: 1px solid rgba(31, 45, 35, 0.14) !important;

  box-shadow:
    0 8px 20px rgba(25, 35, 29, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* ----------------------------------------------------------
   TOGGLES
   ---------------------------------------------------------- */

.bx-page--paper .ui-toggle {
  color: var(--paper-text) !important;
}

.bx-page--paper .ui-toggle__pill {
  background: #d8ddd8 !important;
  border: 1px solid rgba(31, 45, 35, 0.15) !important;
}

.bx-page--paper .ui-toggle input:checked + .ui-toggle__pill {
  background: #1B4F8C !important;
}

/* ----------------------------------------------------------
   SCROLLBAR
   ---------------------------------------------------------- */

.bx-page--paper ::-webkit-scrollbar-thumb {
  background:
    linear-gradient(
      180deg,
      #69AEFF,
      #2589FF
    ) padding-box !important;

  border: 2px solid transparent !important;
}




/* ==========================================================
   FINAL PAPER MODE FIX
   Strong text contrast + cleaner cards + softer shadows
   ========================================================== */

.bx-page--paper {
  --paper-ink: #172018;
  --paper-ink-soft: #344037;
  --paper-muted: #6b756e;
  --paper-line: rgba(31, 43, 35, 0.14);
  --paper-line-strong: rgba(31, 43, 35, 0.22);
}

/* ----------------------------------------------------------
   MAIN LEFT PANEL
   ---------------------------------------------------------- */

.bx-page--paper .bx-left {
  background: rgba(245, 247, 250, 0.97) !important;

  border: 1px solid var(--paper-line-strong) !important;

  box-shadow:
    0 18px 42px rgba(24, 34, 28, 0.14),
    0 4px 14px rgba(24, 34, 28, 0.07) !important;

  color: var(--paper-ink) !important;
}

/* Header and body */
.bx-page--paper .bx-panelHead {
  background: #F7F9FB !important;
  border-bottom: 1px solid var(--paper-line) !important;
  box-shadow: none !important;
}

.bx-page--paper .bx-panelBody,
.bx-page--paper .bx-bodyPro {
  background: #EDF1F5 !important;
  color: var(--paper-ink) !important;
}

/* ----------------------------------------------------------
   EXACT DESIGN PANEL TEXT CLASSES
   ---------------------------------------------------------- */

.bx-page--paper .bx-sectionTitle {
  color: #1b241d !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  border: none !important;
  background: transparent !important;
}

.bx-page--paper .bx-cardTitle {
  color: #172018 !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

.bx-page--paper .bx-cardMeta {
  color: #667168 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

.bx-page--paper .bx-cardSub {
  color: #455048 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* Prevent nested rules from restoring white text */
.bx-page--paper .bx-card .bx-cardTitle,
.bx-page--paper .bx-card .bx-cardMeta,
.bx-page--paper .bx-card .bx-cardSub,
.bx-page--paper .bx-section .bx-sectionTitle {
  color: inherit;
}

.bx-page--paper .bx-card .bx-cardTitle {
  color: #172018 !important;
}

.bx-page--paper .bx-card .bx-cardMeta {
  color: #667168 !important;
}

.bx-page--paper .bx-card .bx-cardSub {
  color: #455048 !important;
}

/* ----------------------------------------------------------
   SECTION CARDS
   ---------------------------------------------------------- */

.bx-page--paper .bx-section {
  color: var(--paper-ink) !important;
}

.bx-page--paper .bx-card {
  background: #ffffff !important;

  border: 1px solid var(--paper-line) !important;
  border-radius: 16px !important;

  box-shadow:
    0 8px 22px rgba(26, 36, 30, 0.08),
    0 2px 6px rgba(26, 36, 30, 0.04) !important;

  color: var(--paper-ink) !important;
}

/* Cleaner spacing between cards */
.bx-page--paper .bx-section + .bx-section {
  margin-top: 18px;
}

/* Remove washed-out white overlay effects */
.bx-page--paper .bx-card::before,
.bx-page--paper .bx-card::after,
.bx-page--paper .bx-section::before,
.bx-page--paper .bx-section::after {
  display: none !important;
}

/* ----------------------------------------------------------
   INPUTS
   ---------------------------------------------------------- */

.bx-page--paper .ui-field {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.bx-page--paper .ui-label {
  color: #263129 !important;
  font-weight: 750 !important;
}

.bx-page--paper .ui-hint {
  color: #737d76 !important;
}

.bx-page--paper .ui-inputWrap {
      border: none !important;
    background: transparent !important;
}

.bx-page--paper .ui-input,
.bx-page--paper .ui-select {
  background: #ffffff !important;
  color: #172018 !important;
}

.bx-page--paper .ui-input::placeholder {
  color: #8a938d !important;
}

/* ----------------------------------------------------------
   TOP PROJECT SUMMARY
   ---------------------------------------------------------- */

.bx-page--paper .mx-configSummary {
  background: #F7F9FB !important;

  border: 1px solid var(--paper-line) !important;

  box-shadow:
    0 12px 28px rgba(25, 35, 29, 0.10),
    0 3px 8px rgba(25, 35, 29, 0.05) !important;
}

/* Normal summary cells */
.bx-page--paper .mx-summaryItem:not(.mx-summaryItem--price) {
  background: #ffffff !important;
  border-color: var(--paper-line) !important;
}

/* Force summary labels and values dark */
.bx-page--paper .mx-summaryItem:not(.mx-summaryItem--price),
.bx-page--paper .mx-summaryItem:not(.mx-summaryItem--price) * {
  color: #172018 !important;
  text-shadow: none !important;
}

.bx-page--paper .mx-summaryLabel {
  color: #6b756e !important;
  font-weight: 700 !important;
}

.bx-page--paper .mx-summaryValue {
  color: #172018 !important;
  font-weight: 850 !important;
}

/* Preserve orange price box */
.bx-page--paper .mx-summaryItem--price,
.bx-page--paper .mx-summaryItem--price * {
  color: #ffffff !important;
}

/* ----------------------------------------------------------
   PANEL TITLE AND SUBTITLE
   ---------------------------------------------------------- */

.bx-page--paper .bx-panelHead h1,
.bx-page--paper .bx-panelHead h2,
.bx-page--paper .bx-panelHead h3 {
  color: #172018 !important;
  text-shadow: none !important;
}

.bx-page--paper .bx-panelHead .mini {
  color: #6b756e !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* ----------------------------------------------------------
   CLOSE BUTTON
   ---------------------------------------------------------- */

.bx-page--paper .bx-panelHead .ui-btn {
  background: #ffffff !important;
  color: #1d2820 !important;

  border: 1px solid var(--paper-line) !important;

  box-shadow:
    0 5px 14px rgba(25, 35, 29, 0.07) !important;
}

.bx-page--paper .bx-panelHead .ui-btn * {
  color: #1d2820 !important;
}

/* ----------------------------------------------------------
   LEFT RAIL
   ---------------------------------------------------------- */

.bx-page--paper .bx-rail {
  background: rgba(245, 247, 250, 0.97) !important;

  border: 1px solid var(--paper-line) !important;

  box-shadow:
    0 14px 34px rgba(25, 35, 29, 0.12) !important;
}

.bx-page--paper .bx-rail button:not(.active):not(.is-active),
.bx-page--paper .bx-rail button:not(.active):not(.is-active) * {
  color: #172018 !important;
  text-shadow: none !important;
}

/* Active rail item remains orange and white */
.bx-page--paper .bx-rail button.active,
.bx-page--paper .bx-rail button.is-active,
.bx-page--paper .bx-rail button.active *,
.bx-page--paper .bx-rail button.is-active * {
  color: #ffffff !important;
}

/* ----------------------------------------------------------
   REMOVE EXCESSIVE GLASS SHADOWS
   ---------------------------------------------------------- */

.bx-page--paper .bx-section,
.bx-page--paper .ui-field,
.bx-page--paper .bx-grid1,
.bx-page--paper .bx-grid2 {
  box-shadow: none !important;
}

/* Keep only real cards raised */
.bx-page--paper .bx-card {
  box-shadow:
    0 8px 22px rgba(26, 36, 30, 0.08),
    0 2px 6px rgba(26, 36, 30, 0.04) !important;
}


.special
{
  color:white !important;
}



/* ==========================================================
   PAPER MODE — STEEL QUOTE / UNISYS RESULT CARD
   ========================================================== */

.bx-page--paper .mx-packageDock {
  color: #172018 !important;
}

/* Remove the oversized glow used for dark backgrounds */
.bx-page--paper .mx-packageDock__glow {
  display: none !important;
}

/* Main floating result card */
.bx-page--paper .mx-packageDock__card {
  background:
linear-gradient(180deg, rgb(255 255 255 / 0%), rgba(240, 243, 247, 0.96)) !important;

  border: 1px solid rgba(31, 43, 35, 0.18) !important;
  border-radius: 22px !important;

  box-shadow:
    0 18px 44px rgba(24, 34, 28, 0.14),
    0 4px 12px rgba(24, 34, 28, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;

  color: #172018 !important;

  -webkit-backdrop-filter: blur(22px) saturate(120%) !important;
  backdrop-filter: blur(22px) saturate(120%) !important;
}

/* Main content layout */
.bx-page--paper .mx-packageDock__main {
  color: #172018 !important;
}

/* Status icon */
.bx-page--paper .mx-packageDock__icon {
  background: #edf3ee !important;
  color: #287944 !important;

  border: 1px solid rgba(40, 121, 68, 0.22) !important;

  box-shadow:
    0 6px 16px rgba(40, 121, 68, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

/* Loading icon */
.bx-page--paper
  .mx-packageDock--loading
  .mx-packageDock__icon {
  background: #E7F2FF !important;
  color: #136ED9 !important;
  border-color: rgba(19, 110, 217, 0.24) !important;
}

/* Error icon */
.bx-page--paper
  .mx-packageDock--error
  .mx-packageDock__icon {
  background: #fff0ef !important;
  color: #c93832 !important;
  border-color: rgba(201, 56, 50, 0.24) !important;
}

/* Top status label:
   Steel quote generated / Unisys is running */
.bx-page--paper .mx-packageDock__copy > span {
  color: #5f6b63 !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

/* Package ID or loading message */
.bx-page--paper .mx-packageDock__copy > strong {
  color: #172018 !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

/* Description */
.bx-page--paper .mx-packageDock__copy > p {
  color: #667169 !important;
  opacity: 1 !important;
  text-shadow: none !important;
  line-height: 1.55 !important;
}

/* Error text */
.bx-page--paper
  .mx-packageDock--error
  .mx-packageDock__copy > p {
  color: #a52d29 !important;
}

/* ==========================================================
   QUOTE METRICS
   ========================================================== */

.bx-page--paper .mx-packageDock__metrics {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  gap: 10px !important;
}

/* Each metric card */
.bx-page--paper .mx-packageDock__metrics > div {
  background: #ffffff !important;

  border: 1px solid rgba(31, 43, 35, 0.14) !important;
  border-radius: 14px !important;

  box-shadow:
    0 6px 16px rgba(24, 34, 28, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;

  color: #172018 !important;
}

/* Steel Weight, Steel Material, etc. */
.bx-page--paper .mx-packageDock__metrics > div > span {
  color: #6b756e !important;
  font-weight: 750 !important;
  text-shadow: none !important;
}

/* 1,228.55 lb, $6,143, etc. */
.bx-page--paper .mx-packageDock__metrics > div > strong {
  color: #172018 !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

/* Slight green emphasis on generated values */
.bx-page--paper
  .mx-packageDock--success
  .mx-packageDock__metrics > div > strong {
  color: #245b35 !important;
}

/* Final Review card */
.bx-page--paper
  .mx-packageDock__metrics > div:last-child {
  background: #EAF4FF !important;
  border-color: rgba(34, 121, 224, 0.24) !important;
}

.bx-page--paper
  .mx-packageDock__metrics > div:last-child > strong {
  color: #0C5AB6 !important;
}

/* ==========================================================
   ACTIONS / OPEN REPORT
   ========================================================== */

.bx-page--paper .mx-packageDock__actions {
  border-left: 1px solid rgba(31, 43, 35, 0.12) !important;
}

/* Open Report button */
.bx-page--paper .mx-packageDock__actions a {
  background:
    linear-gradient(
      180deg,
      #4D9FFF,
      #2589FF
    ) !important;

  color: #ffffff !important;

  border: 1px solid rgba(11, 105, 215, 0.38) !important;
  border-radius: 12px !important;

  box-shadow:
    0 10px 24px rgba(33, 72, 128, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;

  text-decoration: none !important;
  font-weight: 850 !important;
}

.bx-page--paper .mx-packageDock__actions a:hover {
  transform: translateY(-1px);
  box-shadow:
    0 14px 30px rgba(33, 72, 128, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.36) !important;
}

/* ==========================================================
   LOADING ANIMATION
   ========================================================== */

.bx-page--paper
  .mx-packageDock--loading
  .mx-packageDock__card {
  border-color: rgba(27, 79, 140, 0.28) !important;
}

.bx-page--paper
  .mx-packageDock--loading
  .mx-packageDock__icon {
  animation: zkPaperLoadingPulse 1.3s ease-in-out infinite;
}

@keyframes zkPaperLoadingPulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow:
      0 6px 16px rgba(19, 110, 217, 0.10);
  }

  50% {
    transform: scale(1.06);
    box-shadow:
      0 8px 22px rgba(19, 110, 217, 0.22);
  }
}

/* Mobile */
@media (max-width: 780px) {
  .bx-page--paper .mx-packageDock__card {
    align-items: stretch !important;
  }

  .bx-page--paper .mx-packageDock__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .bx-page--paper .mx-packageDock__actions {
    border-left: 0 !important;
    border-top: 1px solid rgba(31, 43, 35, 0.12) !important;
    padding-top: 14px !important;
  }
}



/* ==========================================================
   MOBILE STEP 2 SCROLL FIX
   ========================================================== */

@media (max-width: 780px) {
  .bx-page--configure {
    height: auto !important;
    min-height: 100dvh !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    position: relative;
    -webkit-overflow-scrolling: touch;
  }

  /* The Step 2 wrapper must grow with its content */
  .bx-page--configure .mx-configure,
  .bx-page--configure .mx-buildingConfig,
  .bx-page--configure .mx-configStep,
  .bx-page--configure .mx-step2 {
    position: relative !important;
    inset: auto !important;

    width: 100% !important;
    min-height: 100dvh !important;
    height: auto !important;

    overflow: visible !important;

    padding-bottom:
      calc(40px + env(safe-area-inset-bottom)) !important;
  }

  /* Any two-column Step 2 layout should stack */
  .bx-page--configure .mx-configGrid,
  .bx-page--configure .mx-stepGrid,
  .bx-page--configure .mx-configureGrid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* Cards should never be clipped */
  .bx-page--configure .mx-configCard,
  .bx-page--configure .mx-currentSetup,
  .bx-page--configure .mx-summaryCard,
  .bx-page--configure .mx-formCard {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* The right/current setup card */
  .bx-page--configure .mx-currentSetup {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;

    width: 100% !important;
    margin-top: 18px !important;
    margin-bottom:
      calc(28px + env(safe-area-inset-bottom)) !important;
  }
}



/* Keep WebGL dragging responsive */
.bx-page--dragging .bx-left,
.bx-page--dragging .bx-rail,
.bx-page--dragging .bx-appbar,
.bx-page--dragging .mx-configSummary,
.bx-page--dragging .mx-packageDock__card {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.bx-page--dragging canvas {
  cursor: grabbing !important;
}


/* ==================================================
   MOBILE SCENE-SELECTION INDICATOR
   ================================================== */

.bx-railBtn {
  position: relative;
}

@media (max-width: 768px) {
  /*
   * An object was selected in the 3D viewer,
   * but the settings drawer remains closed.
   */
  .bx-railBtn.is-scene-selected {
    border-color: rgba(
      34,
      197,
      94,
      0.78
    ) !important;

    background:
      linear-gradient(
        145deg,
        rgba(34, 197, 94, 0.24),
        rgba(20, 83, 45, 0.18)
      ) !important;

    color: #dcfce7 !important;

    box-shadow:
      0 0 0 2px
        rgba(34, 197, 94, 0.16),
      0 8px 24px
        rgba(15, 23, 42, 0.2),
      inset 0 1px 0
        rgba(255, 255, 255, 0.16);
  }

  .bx-railBtn.is-scene-selected
    .bx-railIco {
    transform: scale(1.08);
    filter:
      drop-shadow(
        0 3px 8px
        rgba(34, 197, 94, 0.4)
      );
  }

  .bx-railBtn.is-scene-selected
    .bx-railLbl {
    color: #dcfce7;
    font-weight: 900;
  }

  /*
   * Arrow appears on the side facing
   * the settings drawer.
   */
  .bx-railSelectionArrow {
    position: absolute;

    top: 50%;
    right: -14px;

    width: 24px;
    height: 30px;

    display: grid;
    place-items: center;

    transform:
      translateY(-50%);

    border-radius: 999px;

    background: #22c55e;
    color: #052e16;

    border:
      2px solid
      rgba(255, 255, 255, 0.9);

    box-shadow:
      0 8px 20px
      rgba(22, 101, 52, 0.4);

    font-size: 25px;
    font-weight: 1000;
    line-height: 1;

    pointer-events: none;

    animation:
      bxRailArrowNudge
      1.15s ease-in-out infinite;

    z-index: 20;
  }

  @keyframes bxRailArrowNudge {
    0%,
    100% {
      transform:
        translateY(-50%)
        translateX(0);
    }

    50% {
      transform:
        translateY(-50%)
        translateX(4px);
    }
  }
}


/* =========================================================
   MOBILE — keep floating cards clear of the left icon rail
   ========================================================= */
@media (max-width: 768px) {
  :root {
    --bx-mobile-rail-width: 48px;
    --bx-mobile-side-gap: 8px;
  }

  /*
   * Top project/load summary.
   * Start after the rail and remain centered in the usable area.
   */
  .mx-configSummary {
    left: calc(
      var(--bx-mobile-rail-width) +
      var(--bx-mobile-side-gap)
    ) !important;

    right: var(--bx-mobile-side-gap) !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;

    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    padding: 6px !important;
    gap: 6px !important;

    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .mx-configSummary::-webkit-scrollbar {
    display: none;
  }

  /*
   * Do not allow the summary items to shrink.
   * This makes the row scroll instead of becoming cut off.
   */
  .mx-configSummary .mx-summaryItem {
    flex: 0 0 92px !important;
    min-width: 92px !important;
  }

  .mx-configSummary .mx-summaryItem--wide {
    flex-basis: 126px !important;
    min-width: 126px !important;
  }

  /*
   * Bottom generated quote dock.
   * Center it inside the area remaining after the rail.
   */
  .mx-packageDock {
    left: calc(
      var(--bx-mobile-rail-width) +
      var(--bx-mobile-side-gap)
    ) !important;

    right: var(--bx-mobile-side-gap) !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;

    overflow-x: hidden;
  }

  .mx-packageDock__card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /*
   * Quote metrics scroll horizontally when all columns
   * cannot fit on the phone.
   */
  .mx-packageDock__metrics {
    display: flex !important;
    flex-wrap: nowrap !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    gap: 8px !important;
    padding-bottom: 4px;

    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .mx-packageDock__metrics::-webkit-scrollbar {
    display: none;
  }

  .mx-packageDock__metrics > div {
    flex: 0 0 112px !important;
    min-width: 112px !important;
  }

  .mx-packageDock__actions {
    width: 100%;
  }

  .mx-packageDock__actions a {
    display: flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    justify-content: center;
  }
}



@media (max-width: 768px) {
  .bx-page:not(.bx-page--viewer) {
    background:
      radial-gradient(
        700px 420px at 50% 0%,
        rgba(255, 255, 255, 0.18),
        transparent 68%
      ),
      linear-gradient(
        180deg,
        #26372b,
        #142219
      );
  }
}


/* Three.js is not initialized during mobile Steps 1 and 2 */
@media (max-width: 768px) {
  .bx-canvas--disabled {
    display: none !important;
  }
}



.copy-permanent-link {
  border: 2px solid black !important;
}

.copy-permanent-link .ui-btn__txt {
  color: #3692FF !important;
}  /* =========================================================
    MXDESIGN LANDING / CONFIGURATOR UI
    Mythic Systems brand style (Ink/Accent)
  ========================================================= */

  :root {
    --mx-accent: #1B4F8C;
    --mx-accent-dark: #123A68;
    --mx-accent-soft: rgba(27, 79, 140, 0.13);

    --mx-ink: #1A1A1A;
    --mx-ink-2: #2B2B2B;
    --mx-muted: #5A6875;

    --mx-accent-dark: #123A68;
    --mx-accent-darker: #0D2A4D;

    --mx-paper: rgba(255, 255, 255, 0.94);
    --mx-paper-2: rgba(246, 248, 244, 0.90);

    --mx-border: rgba(26, 26, 26, 0.12);
    --mx-shadow: 0 34px 90px rgba(0, 0, 0, 0.28);
    --mx-radius: 2px;
  }

  /* =========================================================
    LANDING OVERLAY
  ========================================================= */

  .mx-landing {
    position: absolute;
    inset: 0;
    z-index: 80;

    display: flex;
    align-items: flex-start;
    justify-content: center;

    width: 100%;
    min-height: 100vh;

    padding: 34px 24px 28px;

    overflow-y: auto;
    overflow-x: hidden;

    background:
      radial-gradient(900px 520px at 50% 12%, rgba(255, 255, 255, 0.36), transparent 68%),
      linear-gradient(180deg, rgba(8, 12, 14, 0.34), rgba(8, 12, 14, 0.68));

    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  .mx-heroCard {
    position: relative;

    width: min(1040px, 100%);
    margin: 0 auto;
    padding: clamp(28px, 4.4vw, 52px);

    text-align: center;

    border-radius: 0;
  background: linear-gradient(180deg, rgb(59 52 52 / 18%), rgba(255, 255, 255, 0.09)) !important;
    border: 1px solid rgba(255, 255, 255, 0.62);

    box-shadow:
      var(--mx-shadow),
      inset 0 1px 0 rgba(255, 255, 255, 0.98);
  }

  .mx-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 30px;
    padding: 0 14px;
    margin-bottom: 18px;

    border-radius: 999px;

    color: var(--mx-accent);
    background: rgba(27, 79, 140, 0.12);
    border: 1px solid rgba(27, 79, 140, 0.26);

    font-size: 11px;
    font-weight: 1000;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .mx-title {
    max-width: 880px;
    margin: 0 auto;

    color: var(--mx-ink);

    font-size: clamp(34px, 5vw, 64px);
    line-height: 0.98;
    letter-spacing: -0.06em;
    font-weight: 700;
  }

  .mx-title--sm {
    font-size: clamp(30px, 4vw, 48px);
  }

  .mx-subtitle {
    max-width: 740px;
    margin: 18px auto 26px;

    color: var(--mx-muted);

    font-size: clamp(15px, 1.65vw, 19px);
    line-height: 1.55;
    font-weight: 500;
  }

  /* =========================================================
    ADDRESS START PANEL
  ========================================================= */

  .mx-addressBox,
  .mx-addressBox--mxdesign {
    position: relative;
    z-index: 90;

    width: min(1040px, 100%);
    max-width: 1040px;
    margin: 0 auto;
  }

  .mx-addressLogoWrap {
    display: flex;
    justify-content: center;

    margin: 4px auto 22px;
  }

  /* Mythic Systems wordmark -- MYTHIC (bold) + SYSTEMS (italic, accent), the
     house lockup shared/report_style/mythic_style.py defines for PDF sheets
     (BRAND_WORD_A "MYTHIC" + default BRAND_WORD_B "SYSTEMS", Ink/Accent
     colors), adapted here for a dark photo hero: a light accent tint stands
     in for the print Accent (#1B4F8C), which reads too dark on a photo. */
  .mx-wordmark {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.4em;

    font-family: Georgia, "Times New Roman", Times, serif;

    filter:
      drop-shadow(0 12px 22px rgba(0, 0, 0, 0.22))
      drop-shadow(0 1px 0 rgba(255, 255, 255, 0.16));
  }

  .mx-wordmark-a {
    font-weight: 700;
    font-size: clamp(28px, 4vw, 40px);
    letter-spacing: 0.02em;
    color: #ffffff;
  }

  .mx-wordmark-b {
    font-style: italic;
    font-weight: 500;
    font-size: clamp(18px, 2.6vw, 26px);
    letter-spacing: 0.04em;
    color: #9DC3EC;
  }

  .mx-quoteSearchPanel {
    position: relative;
    z-index: 95;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;

    padding: 12px;

    border-radius: var(--mx-radius);

    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(17, 24, 39, 0.10);

    box-shadow:
      0 30px 80px rgba(0, 0, 0, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.98);
  }

  .mx-quoteFields,
  .mx-quoteFields--mxdesign {
    display: grid;
    grid-template-columns: minmax(320px, 1.55fr) minmax(170px, 0.55fr);
    gap: 10px;
  }

  .mx-quoteField {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 7px;

    text-align: left;
  }

  .mx-quoteField label {
    padding-left: 2px;

    color: rgba(17, 24, 39, 0.62);

    font-size: 10px;
    font-weight: 1000;
    letter-spacing: 0.11em;
    text-transform: uppercase;
  }

  .mx-addressInputShell,
  .mx-fieldWithSuffix {
    height: 58px;

    border-radius: var(--mx-radius);

    background: #ffffff;
    border: 1px solid rgba(17, 24, 39, 0.13);

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.96),
      0 8px 18px rgba(17, 24, 39, 0.04);
  }

  .mx-addressInputShell {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 7px 13px 7px 7px;
  }

  .mx-addressIcon {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    flex: 0 0 44px;

    border-radius: var(--mx-radius);

    color: #ffffff;
    background: var(--mx-accent);

    font-size: 23px;
    font-weight: 1000;

    box-shadow:
      0 10px 20px rgba(27, 79, 140, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.20);
  }

  .mx-addressInput {
    flex: 1;
    min-width: 0;
    height: 100%;

    border: 0;
    outline: 0;

    color: #111827;
    background: transparent;

    font-size: 15px;
    font-weight: 850;
  }

  .mx-addressInput::placeholder {
    color: rgba(17, 24, 39, 0.42);
  }

  .mx-fieldWithSuffix {
    position: relative;

    display: flex;
    align-items: center;
  }

  .mx-quoteInput {
    width: 100%;
    height: 100%;

    padding: 0 58px 0 16px;

    border: 0;
    outline: 0;

    color: #111827;
    background: transparent;

    font-size: 15px;
    font-weight: 900;
  }

  .mx-fieldWithSuffix span {
    position: absolute;
    right: 14px;

    color: rgba(17, 24, 39, 0.50);

    font-size: 11px;
    font-weight: 1000;
  }

  .mx-addressInputShell:focus-within,
  .mx-fieldWithSuffix:focus-within {
    border-color: rgba(27, 79, 140, 0.76);
    box-shadow:
      0 0 0 4px rgba(27, 79, 140, 0.16),
      0 8px 18px rgba(17, 24, 39, 0.04);
  }

  .mx-addressBtn {
    height: 54px;
    padding: 0 22px;

    border: 0;
    border-radius: var(--mx-radius);

    color: #ffffff;
    background: var(--mx-accent);

    font-size: 14px;
    font-weight: 1000;
    letter-spacing: 0.015em;
    text-transform: uppercase;

    cursor: pointer;

    box-shadow:
      0 14px 28px rgba(27, 79, 140, 0.34),
      inset 0 1px 0 rgba(255, 255, 255, 0.20);

    transition:
      transform 0.16s ease,
      box-shadow 0.16s ease,
      background 0.16s ease,
      opacity 0.16s ease;
  }

  .mx-addressBtn:hover {
    transform: translateY(-1px);
    background: var(--mx-accent-dark);
    box-shadow:
      0 18px 34px rgba(27, 79, 140, 0.42),
      inset 0 1px 0 rgba(255, 255, 255, 0.20);
  }

  .mx-addressBtn--quote {
    align-self: end;

    height: 58px;
    min-width: 158px;
  }

  .mx-addressBtn:disabled,
  .mx-addressBtn--quote:disabled {
    opacity: 0.52;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }

  .mx-addressBtn--secondary {
    color: var(--mx-accent);
    background: rgba(27, 79, 140, 0.10);
    box-shadow: none;
  }

  .mx-addressBtn--secondary:hover {
    color: #ffffff;
    background: var(--mx-accent);
  }

  .mx-addressHelp {
    margin-top: 13px;

    color: #6AAFFF;

    font-size: 12px;
    font-weight: 900;

    text-align: center;

    text-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
  }

  /* =========================================================
    GOOGLE AUTOCOMPLETE DROPDOWN
    Google injects .pac-container into body.
  ========================================================= */

  .pac-container {
    z-index: 999999 !important;

    max-height: min(360px, 44vh) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;

    margin-top: 8px;

    border-radius: var(--mx-radius) !important;

    border: 1px solid rgba(17, 24, 39, 0.14) !important;
    background: #ffffff !important;

    box-shadow:
      0 28px 70px rgba(0, 0, 0, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;

    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  }

  .pac-item {
    min-height: 46px;
    padding: 8px 13px !important;

    display: flex;
    align-items: center;

    color: rgba(17, 24, 39, 0.72) !important;

    border-top: 1px solid rgba(17, 24, 39, 0.07) !important;

    font-size: 13px !important;
    line-height: 1.25 !important;

    cursor: pointer;
  }

  .pac-item:first-child {
    border-top: 0 !important;
  }

  .pac-item:hover,
  .pac-item-selected {
    background: rgba(27, 79, 140, 0.10) !important;
  }

  .pac-item-query {
    color: #111827 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
  }

  .pac-matched {
    color: var(--mx-accent-dark) !important;
    font-weight: 1000 !important;
  }

  .pac-icon {
    margin-right: 10px !important;
  }

  /* =========================================================
    FEATURE ROW
  ========================================================= */

  .mx-featureRow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;

    margin-top: 28px;
  }

  .mx-featureRow > div {
    padding: 16px;

    border-radius: 0;

    background: rgba(27, 79, 140, 0.07);
    border: 1px solid rgba(27, 79, 140, 0.14);

    text-align: left;
  }

  .mx-featureRow strong {
    display: block;

    color: var(--mx-ink);

    font-size: 13px;
    font-weight: 950;
  }

  .mx-featureRow span {
    display: block;

    margin-top: 5px;

    color: rgba(23, 38, 25, 0.62);

    font-size: 12px;
    line-height: 1.4;
    font-weight: 650;
  }

  /* =========================================================
    CONFIG SUMMARY BAR ON 3D VIEW
  ========================================================= */

  .mx-configSummary {
    position: absolute;
    top: 76px;
    left: 50%;
    z-index: 45;

    width: min(980px, calc(100% - 32px));

    transform: translateX(-50%);

    display: grid;
    grid-template-columns: 2fr repeat(3, 0.72fr) 1.1fr;
    gap: 8px;

    padding: 8px;

    border-radius: 0;

    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(17, 24, 39, 0.10);

    box-shadow:
      0 18px 42px rgba(15, 23, 42, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.92);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .mx-summaryItem {
    min-width: 0;

    padding: 10px 12px;

    border-radius: 0;

    background: rgba(27, 79, 140, 0.07);
    border: 1px solid rgba(27, 79, 140, 0.12);
  }

  .mx-summaryItem span {
    display: block;

    color: rgba(17, 24, 39, 0.52);

    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .mx-summaryItem strong {
    display: block;

    margin-top: 4px;

    color: var(--mx-ink);

    font-size: 13px;
    font-weight: 1000;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .mx-summaryItem--price {
    background: var(--mx-accent);
    border-color: rgba(27, 79, 140, 0.45);
  }

  .mx-summaryItem--price span {
    color: rgba(255, 255, 255, 0.74);
  }

  .mx-summaryItem--price strong {
    color: #ffffff;
    font-size: 15px;
  }

  /* Hide builder UI before viewer starts */

  .bx-page:not(.bx-page--started) .bx-appbar,
  .bx-page:not(.bx-page--started) .bx-rail,
  .bx-page:not(.bx-page--started) .bx-left,
  .bx-page:not(.bx-page--started) .bx-right {
    display: none !important;
  }

  /* =========================================================
    CONFIG FULL-PAGE WIZARD
  ========================================================= */

  .mx-configLanding {
    align-items: flex-start;
    justify-content: center;

    width: 100vw;
    min-height: 100vh;

    padding: 24px;

    overflow-y: auto;
    overflow-x: hidden;

    background:
      radial-gradient(980px 520px at 50% -8%, rgba(255, 255, 255, 0.88), transparent 68%),
      linear-gradient(180deg, rgba(246, 248, 242, 0.96), rgba(232, 239, 228, 0.96));
  }

  .mx-configCard {
    width: min(1380px, calc(100vw - 48px));
    min-height: calc(100vh - 48px);
    max-height: none;

    margin: 0 auto;
    padding: clamp(26px, 3.6vw, 54px);

    overflow: visible;

    border-radius: 0;

    text-align: left;

    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 249, 244, 0.91));

    border: 1px solid rgba(47, 80, 52, 0.12);

    box-shadow:
      0 34px 90px rgba(15, 23, 42, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.98);
  }

  .mx-configTop {
    max-width: 980px;
    margin: 0 auto 22px;

    text-align: center;
  }

  .mx-configCard .mx-eyebrow {
    width: max-content;
    margin: 0 auto 16px;
  }

  .mx-configCard .mx-title {
    max-width: 880px;
    margin: 0 auto;

    color: var(--mx-ink);

    text-align: center;

    font-size: clamp(34px, 4.5vw, 62px);
    line-height: 0.96;
    letter-spacing: -0.06em;
    font-weight: 1000;
  }

  .mx-configCard .mx-subtitle {
    max-width: 760px;
    margin: 18px auto 0;

    color: rgba(20, 40, 26, 0.66);

    text-align: center;

    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.55;
    font-weight: 650;
  }

  /* =========================================================
    SELECTED ADDRESS BAR
  ========================================================= */

  .mx-selectedAddress {
    max-width: 1160px;
    margin: 0 auto 24px;
    padding: 16px 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    border-radius: 0;

    background:
      linear-gradient(135deg, rgba(27, 79, 140, 0.10), rgba(27, 79, 140, 0.045));

    border: 1px solid rgba(27, 79, 140, 0.18);

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.80),
      0 10px 26px rgba(15, 23, 42, 0.055);
  }

  .mx-selectedAddress span {
    display: block;

    color: rgba(20, 40, 26, 0.52);

    font-size: 10px;
    font-weight: 1000;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .mx-selectedAddress strong {
    display: block;
    margin-top: 5px;

    color: var(--mx-ink);

    font-size: 15px;
    line-height: 1.35;
    font-weight: 950;
  }

  .mx-selectedAddress button {
    height: 38px;
    padding: 0 14px;

    border: 0;
    border-radius: 0;

    color: var(--mx-accent);
    background: rgba(27, 79, 140, 0.10);

    font-size: 12px;
    font-weight: 950;

    cursor: pointer;
  }

  .mx-selectedAddress button:hover {
    color: #ffffff;
    background: var(--mx-accent);
  }

  /* =========================================================
    CONFIG LAYOUT + CARDS
  ========================================================= */

  .mx-configLayout {
    max-width: 1160px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 18px;

    align-items: start;
  }

  .mx-configMain {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .mx-sectionBlock {
    max-width: none;
    margin: 0;
    padding: 20px;

    border-radius: 0;

    background: rgba(255, 255, 255, 0.80);
    border: 1px solid rgba(17, 24, 39, 0.085);

    box-shadow:
      0 14px 34px rgba(15, 23, 42, 0.07),
      inset 0 1px 0 rgba(255, 255, 255, 0.88);
  }

  .mx-sectionHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    margin-bottom: 18px;
  }

  .mx-sectionHead > div:first-child {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .mx-sectionHead > div:first-child > span {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    flex: 0 0 32px;

    border-radius: 0;

    color: #ffffff;
    background: var(--mx-accent);

    font-size: 11px;
    font-weight: 1000;

    box-shadow: 0 8px 18px rgba(27, 79, 140, 0.24);
  }

  .mx-sectionHead > div:first-child > strong {
    color: var(--mx-ink);

    font-size: 18px;
    line-height: 1;
    font-weight: 1000;
    letter-spacing: -0.025em;
  }

  /* =========================================================
    MODE TOGGLE
  ========================================================= */

  .mx-modeToggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    padding: 4px;

    border-radius: 999px;

    background: rgba(27, 79, 140, 0.10);
    border: 1px solid rgba(27, 79, 140, 0.16);
  }

  .mx-modeToggle button {
    height: 34px;
    padding: 0 14px;

    border: 0;
    border-radius: 999px;

    color: rgba(20, 40, 26, 0.62);
    background: transparent;

    font-size: 12px;
    font-weight: 950;

    cursor: pointer;
  }

  .mx-modeToggle button.is-active {
    color: #ffffff;
    background: var(--mx-accent);

    box-shadow: 0 8px 18px rgba(27, 79, 140, 0.26);
  }

  /* =========================================================
    FORMS
  ========================================================= */

  .mx-formGrid {
    max-width: none;
    margin: 0;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .mx-formGrid--porch {
    margin-top: 16px;
  }

  .mx-formGroup {
    position: relative;

    display: flex;
    flex-direction: column;
    gap: 8px;

    text-align: left;
  }

  .mx-formGroup label {
    color: rgba(20, 40, 26, 0.58);

    font-size: 10px;
    font-weight: 1000;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  .mx-formGroup input,
  .mx-formGroup select {
    width: 100%;
    height: 56px;

    padding: 0 16px;

    border-radius: 0;

    color: var(--mx-ink);
    background: #ffffff;

    border: 1px solid rgba(26, 26, 26, 0.12);
    outline: none;

    font-size: 15px;
    font-weight: 900;

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.96),
      0 8px 18px rgba(15, 23, 42, 0.04);
  }

  .mx-formGroup input:focus,
  .mx-formGroup select:focus {
    border-color: rgba(27, 79, 140, 0.58);
    box-shadow:
      0 0 0 4px rgba(27, 79, 140, 0.12),
      0 8px 18px rgba(15, 23, 42, 0.04);
  }

  .mx-formGroup input:disabled {
    opacity: 0.72;
    cursor: not-allowed;
    background: rgba(15, 23, 42, 0.045);
  }

  .mx-formGroup > span {
    position: absolute;
    right: 14px;
    bottom: 18px;

    color: rgba(20, 40, 26, 0.42);

    font-size: 11px;
    font-weight: 950;
  }

  .mx-formGroup--accent input,
  .mx-formGroup--accent select {
    border-color: rgba(27, 79, 140, 0.25);
    background:
      linear-gradient(180deg, #ffffff, #F4F9FF);
  }

  /* =========================================================
    STATS / OPTION CARDS
  ========================================================= */

  .mx-simpleStat {
    margin-top: 16px;
    padding: 17px 19px;

    border-radius: 0;

    background:
      linear-gradient(135deg, rgba(27, 79, 140, 0.13), rgba(27, 79, 140, 0.045));

    border: 1px solid rgba(27, 79, 140, 0.18);
  }

  .mx-simpleStat span {
    display: block;

    color: rgba(20, 40, 26, 0.52);

    font-size: 10px;
    font-weight: 1000;
    letter-spacing: 0.10em;
    text-transform: uppercase;
  }

  .mx-simpleStat strong {
    display: block;
    margin-top: 5px;

    color: var(--mx-ink);

    font-size: 26px;
    line-height: 1;
    font-weight: 1000;
    letter-spacing: -0.045em;
  }

  .mx-optionGrid,
  .mx-porchOptions {
    max-width: none;
    margin: 0;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  .mx-optionGrid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mx-optionGrid label,
  .mx-porchOptions label {
    min-height: 58px;

    display: flex;
    align-items: center;
    gap: 11px;

    padding: 14px 16px;

    border-radius: 0;

    color: var(--mx-ink);
    background: rgba(27, 79, 140, 0.065);
    border: 1px solid rgba(27, 79, 140, 0.13);

    font-size: 14px;
    font-weight: 950;

    cursor: pointer;

    transition:
      transform 0.16s ease,
      background 0.16s ease,
      border-color 0.16s ease,
      box-shadow 0.16s ease;
  }

  .mx-optionGrid label:hover,
  .mx-porchOptions label:hover {
    transform: translateY(-1px);
    background: rgba(27, 79, 140, 0.10);
    border-color: rgba(27, 79, 140, 0.22);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.055);
  }

  .mx-optionGrid label.is-active,
  .mx-porchOptions label.is-active {
    background:
      linear-gradient(135deg, rgba(27, 79, 140, 0.16), rgba(27, 79, 140, 0.075));

    border-color: rgba(27, 79, 140, 0.34);
    box-shadow: 0 12px 24px rgba(27, 79, 140, 0.10);
  }

  .mx-optionGrid input,
  .mx-porchOptions input {
    width: 17px;
    height: 17px;

    accent-color: var(--mx-accent);
  }

  /* =========================================================
    ADVANCED
  ========================================================= */

  .mx-advanced {
    border: 0;
  }

  .mx-advanced summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    cursor: pointer;
    list-style: none;
  }

  .mx-advanced summary::-webkit-details-marker {
    display: none;
  }

  .mx-advanced summary span {
    display: block;

    color: rgba(20, 40, 26, 0.52);

    font-size: 10px;
    font-weight: 1000;
    letter-spacing: 0.10em;
    text-transform: uppercase;
  }

  .mx-advanced summary strong {
    display: block;
    margin-top: 4px;

    color: var(--mx-ink);

    font-size: 18px;
    font-weight: 1000;
    letter-spacing: -0.025em;
  }

  .mx-advanced summary em {
    padding: 7px 10px;

    border-radius: 999px;

    color: var(--mx-accent);
    background: rgba(27, 79, 140, 0.10);

    font-size: 11px;
    font-style: normal;
    font-weight: 950;
  }

  .mx-advanced[open] summary {
    margin-bottom: 18px;
  }

  /* =========================================================
    ASIDE
  ========================================================= */

  .mx-configAside {
    position: sticky;
    top: 24px;
  }

  .mx-asideCard {
    padding: 22px;

    border-radius: 0;

    color: #ffffff;
    background:
      radial-gradient(420px 240px at 80% 0%, rgba(255, 255, 255, 0.16), transparent 60%),
      linear-gradient(135deg, var(--mx-accent), var(--mx-accent-dark));

    box-shadow:
      0 24px 54px rgba(27, 79, 140, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.16);
  }

  .mx-asideCard > span {
    display: block;

    color: rgba(255, 255, 255, 0.72);

    font-size: 10px;
    font-weight: 1000;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .mx-asideCard > strong {
    display: block;
    margin-top: 7px;

    color: #ffffff;

    font-size: 36px;
    line-height: 0.95;
    font-weight: 1000;
    letter-spacing: -0.06em;
  }

  .mx-asideRows {
    display: grid;
    gap: 10px;

    margin-top: 18px;
    padding-top: 18px;

    border-top: 1px solid rgba(255, 255, 255, 0.22);
  }

  .mx-asideRows div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    color: #ffffff;
  }

  .mx-asideRows small {
    color: rgba(255, 255, 255, 0.72);

    font-size: 11px;
    font-weight: 850;
  }

  .mx-asideRows b {
    color: #ffffff;

    font-size: 12px;
    font-weight: 950;

    text-align: right;
  }

  .mx-asideCta {
    width: 100%;
    margin-top: 22px;

    color: var(--mx-accent);
    background: #ffffff;

    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.16);
  }

  .mx-asideCta:hover {
    color: #ffffff;
    background: var(--mx-accent-dark);
  }

  .mx-asideLink {
    width: 100%;
    margin-top: 10px;

    border: 0;
    background: transparent;

    color: rgba(255, 255, 255, 0.78);

    font-size: 12px;
    font-weight: 900;

    cursor: pointer;
  }

  .mx-asideLink:hover {
    color: #ffffff;
  }

  /* =========================================================
    PREVIEW / ACTION ROW
  ========================================================= */

  .mx-previewStats {
    max-width: 860px;
    margin: 18px auto 0;

    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 10px;
  }

  .mx-previewStats div {
    padding: 14px;

    border-radius: 0;

    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(17, 24, 39, 0.10);

    text-align: left;
  }

  .mx-previewStats span {
    display: block;

    color: rgba(18, 33, 22, 0.50);

    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .mx-previewStats strong {
    display: block;
    margin-top: 4px;

    color: var(--mx-ink);

    font-size: 15px;
    font-weight: 1000;
  }

  .mx-actionRow {
    max-width: 960px;
    margin: 24px auto 0;

    display: flex;
    justify-content: flex-end;
    gap: 12px;
  }

  .mx-actionRow .mx-addressBtn {
    min-width: 180px;
  }

  /* =========================================================
    PACKAGE BOTTOM DOCK
  ========================================================= */

  .mx-packageDock {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 52;

    width: min(1080px, calc(100vw - 48px));

    transform: translateX(-50%);

    pointer-events: none;
  }

  .mx-packageDock__glow {
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: -10px;

    height: 34px;

    border-radius: 999px;

    background: rgba(27, 79, 140, 0.30);
    filter: blur(26px);
  }

  .mx-packageDock__card {
    position: relative;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;

    align-items: center;

    padding: 16px 18px;

    border-radius: 0;

    pointer-events: auto;

    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(246, 249, 244, 0.92));

    border: 1px solid rgba(27, 79, 140, 0.22);

    box-shadow:
      0 24px 70px rgba(15, 23, 42, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.96);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .mx-packageDock__main {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 14px;
  }

  .mx-packageDock__icon {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    flex: 0 0 46px;

    border-radius: 0;

    color: #ffffff;
    background: var(--mx-accent);

    font-size: 20px;
    font-weight: 1000;

    box-shadow: 0 14px 30px rgba(27, 79, 140, 0.30);
  }

  .mx-packageDock__copy {
    min-width: 0;
  }

  .mx-packageDock__copy span {
    display: block;

    color: rgba(20, 40, 26, 0.54);

    font-size: 10px;
    font-weight: 1000;
    letter-spacing: 0.10em;
    text-transform: uppercase;
  }

  .mx-packageDock__copy strong {
    display: block;
    margin-top: 4px;

    color: var(--mx-ink);

    font-size: 18px;
    line-height: 1.15;
    font-weight: 1000;
    letter-spacing: -0.035em;
  }

  .mx-packageDock__copy p {
    max-width: 660px;
    margin: 5px 0 0;

    color: rgba(20, 40, 26, 0.62);

    font-size: 12px;
    line-height: 1.35;
    font-weight: 750;
  }

  .mx-packageDock__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
  }

  .mx-packageDock__actions a {
    min-height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 13px;

    border-radius: 0;

    color: var(--mx-accent-dark);
    background: rgba(27, 79, 140, 0.09);

    border: 1px solid rgba(27, 79, 140, 0.18);

    font-size: 12px;
    font-weight: 950;
    text-decoration: none;

    transition:
      transform 0.16s ease,
      background 0.16s ease,
      border-color 0.16s ease,
      color 0.16s ease;
  }

  .mx-packageDock__actions a:hover {
    transform: translateY(-1px);
    color: #ffffff;
    background: var(--mx-accent);
    border-color: rgba(27, 79, 140, 0.30);
  }

  .mx-packageDock__metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(110px, 1fr));
    gap: 8px;

    margin-top: 12px;
  }

  .mx-packageDock__metrics div {
    padding: 10px 11px;

    border-radius: 0;

    background: rgba(27, 79, 140, 0.075);
    border: 1px solid rgba(27, 79, 140, 0.14);
  }

  .mx-packageDock__metrics span {
    display: block;

    color: rgba(20, 40, 26, 0.54);

    font-size: 9px;
    font-weight: 1000;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .mx-packageDock__metrics strong {
    display: block;
    margin-top: 4px;

    color: var(--mx-ink);

    font-size: 15px;
    font-weight: 1000;
  }

  .mx-packageError {
    margin-top: 12px;
    padding: 12px 14px;

    border-radius: 0;

    color: #8a2d2d;
    background: rgba(190, 54, 54, 0.09);
    border: 1px solid rgba(190, 54, 54, 0.20);

    font-size: 12px;
    font-weight: 850;
  }

  .mx-generatePackageBtn {
    color: #ffffff !important;
    background: var(--mx-accent) !important;
    border-color: rgba(255, 255, 255, 0.20) !important;

    box-shadow:
      0 14px 30px rgba(27, 79, 140, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }

  .mx-generatePackageBtn:disabled {
    opacity: 0.68;
    cursor: wait;
  }

  /* =========================================================
    RESPONSIVE
  ========================================================= */

  @media (max-width: 1120px) {
    .mx-configLayout {
      grid-template-columns: 1fr;
    }

    .mx-configAside {
      position: static;
      display: block;
      width: 100%;
      margin-top: 4px;
    }

    .mx-asideCard {
      display: block;
      width: 100%;
    }
  }

  @media (max-width: 980px) {
    .mx-landing {
      padding: 24px 16px;
    }

    .mx-heroCard {
      padding: 28px 22px;
    }

    .mx-quoteSearchPanel {
      grid-template-columns: 1fr;
    }

    .mx-quoteFields,
    .mx-quoteFields--mxdesign {
      grid-template-columns: 1fr 1fr;
    }

    .mx-quoteField--address {
      grid-column: 1 / -1;
    }

    .mx-addressBtn--quote {
      width: 100%;
    }
  }

  @media (max-width: 900px) {
    .mx-configSummary {
      top: 70px;
      grid-template-columns: 1fr 1fr;
    }

    .mx-summaryItem--wide,
    .mx-summaryItem--price {
      grid-column: 1 / -1;
    }

    .mx-configLanding {
      padding: 16px;
    }

    .mx-configCard {
      width: 100%;
      min-height: calc(100vh - 32px);
      padding: 24px;
    }

    .mx-formGrid,
    .mx-previewStats {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mx-optionGrid,
    .mx-porchOptions {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mx-selectedAddress {
      align-items: flex-start;
      flex-direction: column;
    }

    .mx-packageDock {
      bottom: 14px;
      width: calc(100vw - 28px);
    }

    .mx-packageDock__card {
      grid-template-columns: 1fr;
      gap: 14px;
    }

    .mx-packageDock__actions {
      justify-content: flex-start;
    }
  }

  @media (max-width: 760px) {
    .mx-landing {
      align-items: flex-start;
      padding: 18px 12px;
      overflow-y: auto;
    }

    .mx-featureRow {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 620px) {
    .mx-landing {
      padding: 16px 12px 18px;
    }

    .mx-heroCard {
      padding: 24px 16px;
    }

    .mx-title {
      font-size: clamp(30px, 11vw, 42px);
    }

    .mx-subtitle {
      margin-top: 14px;
      margin-bottom: 20px;

      font-size: 14px;
    }

    .mx-addressLogo {
      width: min(230px, 86%);
      max-height: 58px;
    }

    .mx-quoteFields,
    .mx-quoteFields--mxdesign,
    .mx-formGrid,
    .mx-optionGrid,
    .mx-optionGrid--two,
    .mx-porchOptions,
    .mx-previewStats {
      grid-template-columns: 1fr;
    }

    .mx-quoteSearchPanel {
      padding: 10px;
    }

    .mx-addressInputShell,
    .mx-fieldWithSuffix,
    .mx-addressBtn--quote {
      height: 54px;
    }

    .mx-addressIcon {
      width: 40px;
      height: 40px;
      flex-basis: 40px;
    }

    .mx-actionRow {
      flex-direction: column;
    }

    .mx-actionRow .mx-addressBtn {
      width: 100%;
    }

    .mx-packageDock__main {
      align-items: flex-start;
    }

    .mx-packageDock__icon {
      width: 40px;
      height: 40px;
      flex-basis: 40px;
    }

    .mx-packageDock__copy strong {
      font-size: 16px;
    }

    .mx-packageDock__actions a {
      flex: 1;
    }

    .mx-packageDock__metrics {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pac-container {
      max-height: 300px !important;
    }
  }



  /* =========================================================
    GLASS STYLE OVERRIDE
    Transparent / blurred / professional mxdesign look
  ========================================================= */

  :root {
    --mx-glass-bg: rgba(255, 255, 255, 0.13);
    --mx-glass-bg-strong: rgba(255, 255, 255, 0.18);
    --mx-glass-border: rgba(255, 255, 255, 0.28);
    --mx-glass-border-soft: rgba(255, 255, 255, 0.16);

    --mx-glass-text: #ffffff;
    --mx-glass-muted: rgba(255, 255, 255, 0.76);
    --mx-glass-soft: rgba(255, 255, 255, 0.58);

    --mx-dark-glass-text: #142116;
    --mx-accent: #1B4F8C;
    --mx-accent-dark: #123A68;
  }

  /* Landing background should show through */

  .mx-landing {
    background:
      radial-gradient(900px 520px at 50% 10%, rgba(255, 255, 255, 0.16), transparent 70%),
      linear-gradient(180deg, rgba(8, 12, 14, 0.38), rgba(8, 12, 14, 0.72));

    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
  }

  /* Main hero becomes glass instead of white card */

  .mx-heroCard {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.075));

    border: 1px solid var(--mx-glass-border);

    box-shadow:
      0 36px 110px rgba(0, 0, 0, 0.34),
      inset 0 1px 0 rgba(255, 255, 255, 0.22);

    backdrop-filter: blur(22px) saturate(135%);
    -webkit-backdrop-filter: blur(22px) saturate(135%);
  }

  /* Text becomes visible on glass */

  .mx-title {
    color: var(--mx-glass-text);

    text-shadow:
      0 18px 42px rgba(0, 0, 0, 0.42),
      0 2px 3px rgba(0, 0, 0, 0.20);
  }

  .mx-subtitle {
    color: var(--mx-glass-muted);

    text-shadow: 0 10px 26px rgba(0, 0, 0, 0.34);
  }

  .mx-eyebrow {
    color: #ffffff;
    background: rgba(27, 79, 140, 0.24);
    border-color: rgba(27, 79, 140, 0.42);

    box-shadow:
      0 12px 30px rgba(27, 79, 140, 0.20),
      inset 0 1px 0 rgba(255, 255, 255, 0.22);
  }

  /* Logo visibility */

  .mx-addressLogo {
    filter:
      drop-shadow(0 18px 30px rgba(0, 0, 0, 0.42))
      drop-shadow(0 1px 0 rgba(255, 255, 255, 0.16));
  }

  /* Address panel glass */

  .mx-quoteSearchPanel {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.12));

    border: 1px solid rgba(255, 255, 255, 0.28);

    box-shadow:
      0 30px 90px rgba(0, 0, 0, 0.34),
      inset 0 1px 0 rgba(255, 255, 255, 0.28);

    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
  }

  .mx-quoteField label {
    color: rgba(255, 255, 255, 0.78);

    text-shadow: 0 5px 14px rgba(0, 0, 0, 0.26);
  }

  /* Inputs become glass too */

  .mx-addressInputShell,
  .mx-fieldWithSuffix {
    background: rgba(255, 255, 255, 0.14);

    border: 1px solid rgba(255, 255, 255, 0.22);

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      0 10px 26px rgba(0, 0, 0, 0.10);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .mx-addressInput,
  .mx-quoteInput {
    color: #ffffff;
  }

  .mx-addressInput::placeholder,
  .mx-quoteInput::placeholder {
    color: rgba(255, 255, 255, 0.58);
  }

  .mx-fieldWithSuffix span {
    color: rgba(255, 255, 255, 0.68);
  }

  .mx-addressInputShell:focus-within,
  .mx-fieldWithSuffix:focus-within {
    border-color: rgba(27, 79, 140, 0.78);

    box-shadow:
      0 0 0 4px rgba(27, 79, 140, 0.16),
      0 14px 34px rgba(0, 0, 0, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.25);
  }

  /* Keep only icon/button as mxdesign accent */

  .mx-addressIcon,
  .mx-addressBtn,
  .mx-addressBtn--quote {
    background: var(--mx-accent);
  }

  .mx-addressBtn:hover,
  .mx-addressBtn--quote:hover {
    background: var(--mx-accent-dark);
  }

  .mx-addressHelp {
    color: rgba(255, 255, 255, 0.74);

    text-shadow: 0 8px 22px rgba(0, 0, 0, 0.34);
  }

  /* Feature cards glass */

  .mx-featureRow > div {
    background: rgba(255, 255, 255, 0.12);

    border: 1px solid rgba(255, 255, 255, 0.18);

    box-shadow:
      0 16px 38px rgba(0, 0, 0, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.18);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .mx-featureRow strong {
    color: #ffffff;

    text-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
  }

  .mx-featureRow span {
    color: rgba(255, 255, 255, 0.72);
  }

  /* =========================================================
    CONFIG WIZARD GLASS STYLE
  ========================================================= */

  .mx-configLanding {
    background:
      radial-gradient(980px 520px at 50% -8%, rgba(255, 255, 255, 0.16), transparent 68%),
      linear-gradient(180deg, rgba(15, 25, 18, 0.36), rgba(15, 25, 18, 0.72));
  }

  .mx-configCard {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.09));

    border: 1px solid rgba(255, 255, 255, 0.24);

    box-shadow:
      0 36px 100px rgba(0, 0, 0, 0.30),
      inset 0 1px 0 rgba(255, 255, 255, 0.22);

    backdrop-filter: blur(22px) saturate(135%);
    -webkit-backdrop-filter: blur(22px) saturate(135%);
  }

  .mx-configCard .mx-title {
    color: #ffffff;
  }

  .mx-configCard .mx-subtitle {
    color: rgba(255, 255, 255, 0.74);
  }

  .mx-selectedAddress,
  .mx-sectionBlock,
  .mx-simpleStat,
  .mx-previewStats div {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.10));

    border: 1px solid rgba(255, 255, 255, 0.22);

    box-shadow:
      0 18px 46px rgba(0, 0, 0, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.22);

    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
  }

  .mx-selectedAddress span,
  .mx-sectionHead > div:first-child > strong,
  .mx-simpleStat strong,
  .mx-previewStats strong,
  .mx-formGroup input,


  .mx-selectedAddress strong {
    color: #ffffff;
  }

  .mx-selectedAddress span,
  .mx-formGroup label,
  .mx-simpleStat span,
  .mx-previewStats span,
  .mx-advanced summary span {
    color: rgba(255, 255, 255, 0.70);
  }

  .mx-formGroup input,
  .mx-formGroup select {
    background: rgba(255, 255, 255, 0.13);

    border: 1px solid rgba(255, 255, 255, 0.22);

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      0 8px 20px rgba(0, 0, 0, 0.08);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .mx-formGroup input::placeholder {
    color: rgba(255, 255, 255, 0.54);
  }

  .mx-formGroup input:focus,
  .mx-formGroup select:focus {
    border-color: rgba(27, 79, 140, 0.72);

    box-shadow:
      0 0 0 4px rgba(27, 79, 140, 0.14),
      0 10px 26px rgba(0, 0, 0, 0.14);
  }

  .mx-formGroup > span {
    color: rgba(255, 255, 255, 0.62);
  }

  .mx-optionGrid label,
  .mx-porchOptions label {
    color: #ffffff;

    background: rgba(255, 255, 255, 0.12);

    border: 1px solid rgba(255, 255, 255, 0.20);

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.16),
      0 10px 28px rgba(0, 0, 0, 0.10);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .mx-optionGrid label:hover,
  .mx-porchOptions label:hover,
  .mx-optionGrid label.is-active,
  .mx-porchOptions label.is-active {
    background: rgba(27, 79, 140, 0.22);
    border-color: rgba(27, 79, 140, 0.42);
  }

  .mx-sectionHead > div:first-child > span {
    background: var(--mx-accent);
  }

  /* Aside glass dark-orange */

  .mx-asideCard {
    background:
      radial-gradient(420px 240px at 80% 0%, rgba(255, 255, 255, 0.20), transparent 60%),
      linear-gradient(135deg, rgba(27, 79, 140, 0.84), rgba(18, 58, 104, 0.76));

    border: 1px solid rgba(255, 255, 255, 0.22);

    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
  }

  /* Summary bar glass */

  .mx-configSummary {
    background: rgba(255, 255, 255, 0.16);

    border: 1px solid rgba(255, 255, 255, 0.22);

    box-shadow:
      0 18px 52px rgba(0, 0, 0, 0.20),
      inset 0 1px 0 rgba(255, 255, 255, 0.22);

    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
  }

  .mx-summaryItem {
    background: rgba(255, 255, 255, 0.12);

    border: 1px solid rgba(255, 255, 255, 0.18);
  }

  .mx-summaryItem span {
    color: rgba(255, 255, 255, 0.68);
  }

  .mx-summaryItem strong {
    color: #ffffff;
  }

  .mx-summaryItem--price {
    background: rgba(27, 79, 140, 0.82);
    border-color: rgba(27, 79, 140, 0.55);
  }

  /* Package dock glass */

  .mx-packageDock__card {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.13));

    border: 1px solid rgba(255, 255, 255, 0.26);

    box-shadow:
      0 26px 80px rgba(0, 0, 0, 0.30),
      inset 0 1px 0 rgba(255, 255, 255, 0.24);

    backdrop-filter: blur(24px) saturate(145%);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
  }

  .mx-packageDock__copy span,
  .mx-packageDock__copy p,
  .mx-packageDock__metrics span {
    color: rgba(255, 255, 255, 0.72);
  }

  .mx-packageDock__copy strong,
  .mx-packageDock__metrics strong {
    color: #ffffff;
  }

  .mx-packageDock__metrics div {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.18);
  }

  .mx-packageDock__actions a {
    color: #ffffff;

    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.20);
  }

  .mx-packageDock__actions a:hover {
    background: var(--mx-accent);
    border-color: rgba(27, 79, 140, 0.40);
  }

  /* Autocomplete stays readable */

  .pac-container {
    background: rgba(255, 255, 255, 0.96) !important;

    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  }




  /* =========================================================
    STEP 2 POPUP FIXES
    1. View 3D Configuration button text visible
    2. Dropdown text visible on white background
  ========================================================= */

  /* Fix CTA text not showing until hover */
  .mx-addressBtn.mx-addressBtn--quote.mx-asideCta,
  button.mx-addressBtn.mx-addressBtn--quote.mx-asideCta {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    background:
      linear-gradient(135deg, rgba(27, 79, 140, 0.98), rgba(18, 58, 104, 0.9)) !important;

    border: 1px solid rgba(122, 183, 255, 0.55) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .mx-addressBtn.mx-addressBtn--quote.mx-asideCta:hover,
  button.mx-addressBtn.mx-addressBtn--quote.mx-asideCta:hover {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  /* Fix text spans inside button */
  .mx-addressBtn.mx-addressBtn--quote.mx-asideCta *,
  button.mx-addressBtn.mx-addressBtn--quote.mx-asideCta * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  /* Fix dropdown/select text */
  .mx-addressModal select,
  .mx-addressModal option,
  .mx-addressPanel select,
  .mx-addressPanel option,
  .mx-configIntro select,
  .mx-configIntro option,
  .mx-asidePanel select,
  .mx-asidePanel option {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    background-color: #ffffff !important;
  }

  /* Fix selected value inside dropdown */
  .mx-addressModal select,
  .mx-addressPanel select,
  .mx-configIntro select,
  .mx-asidePanel select {
    appearance: auto;
    opacity: 1 !important;
    font-weight: 800;
  }

  /* Fix placeholders/inputs in same popup just in case */
  .mx-addressModal input,
  .mx-addressPanel input,
  .mx-configIntro input,
  .mx-asidePanel input {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
  }

  .mx-addressModal input::placeholder,
  .mx-addressPanel input::placeholder,
  .mx-configIntro input::placeholder,
  .mx-asidePanel input::placeholder {
    color: rgba(17, 24, 39, 0.48) !important;
    -webkit-text-fill-color: rgba(17, 24, 39, 0.48) !important;
  }

  .special
  {
    color:white !important;
  }

  /* Landing hero text must remain white */
  .mx-title.special,
  .mx-subtitle.special,
  .mx-quoteField label,
  .bx-page--paper .mx-title.special,
  .mx-configCard .mx-title,
  .mx-configCard .mx-subtitle,
  .bx-page--paper .mx-subtitle.special {
    color: #ffffff !important;
    text-shadow:
      0 2px 8px rgba(0, 0, 0, 0.32),
      0 1px 2px rgba(0, 0, 0, 0.22) !important;
  }






  /* =========================================================
    STEP 2 MOBILE — SHOW CURRENT SETUP CARD
  ========================================================= */

  @media (max-width: 900px) {
    .mx-configLanding {
      position: absolute;
      inset: 0;

      display: block;

      width: 100%;
      height: 100dvh;
      min-height: 100dvh;

      padding: 16px;

      overflow-x: hidden;
      overflow-y: auto;

      -webkit-overflow-scrolling: touch;
      overscroll-behavior-y: contain;
    }

    .mx-configCard {
      width: 100%;
      height: auto;
      min-height: auto;
      max-height: none;

      margin: 0;
      padding: 22px 16px
        calc(38px + env(safe-area-inset-bottom));

      overflow: visible;
    }

    .mx-configLayout {
      display: flex;
      flex-direction: column;
      gap: 18px;

      width: 100%;
      height: auto;
      min-height: 0;

      overflow: visible;
    }

    .mx-configMain {
      width: 100%;
      height: auto;
      min-height: 0;

      overflow: visible;
    }

    .mx-configAside {
      position: static !important;

      display: block !important;
      order: 2;

      width: 100%;
      height: auto;
      min-height: 0;

      margin: 0 0
        calc(24px + env(safe-area-inset-bottom));

      overflow: visible;
    }

    .mx-asideCard {
      display: block !important;

      width: 100%;
      height: auto;
      min-height: 0;
      max-height: none;

      overflow: visible;
    }
  }


  /* =========================================================
    FINAL MOBILE SUMMARY POSITION
    Must remain at the bottom of mxdesignLanding.css
  ========================================================= */

  @media (max-width: 760px) {
    .bx-page .mx-configSummary {
      position: fixed !important;

      /* rail starts at 8px and is 72px wide */
      left: 88px !important;
      right: 10px !important;
      top: 72px !important;

      width: auto !important;
      max-width: none !important;

      margin: 0 !important;
      transform: none !important;

      display: flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      grid-template-columns: none !important;

      justify-content: flex-start !important;
      align-items: stretch !important;

      gap: 8px !important;
      padding: 8px !important;

      overflow-x: auto !important;
      overflow-y: hidden !important;

      scroll-snap-type: x mandatory;
      scroll-padding-left: 8px;

      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;

      z-index: 110 !important;

      scrollbar-width: none !important;
    }

    .bx-page .mx-configSummary::-webkit-scrollbar {
      display: none !important;
    }

    .bx-page .mx-configSummary > .mx-summaryItem {
      flex: 0 0 118px !important;

      width: 118px !important;
      min-width: 118px !important;
      max-width: 118px !important;

      scroll-snap-align: start;
    }

    .bx-page .mx-configSummary > .mx-summaryItem--wide {
      flex-basis: 210px !important;

      width: 210px !important;
      min-width: 210px !important;
      max-width: 210px !important;
    }

    .bx-page .mx-configSummary > .mx-summaryItem--price,
    .bx-page .mx-configSummary > .mx-summaryItem--quoteBtn {
      flex-basis: 132px !important;

      width: 132px !important;
      min-width: 132px !important;
      max-width: 132px !important;
    }
  }

  @media (max-width: 430px) {
    .bx-page .mx-configSummary {
      /* rail starts at 6px and is 68px wide */
      left: 82px !important;
      right: 8px !important;
      top: 62px !important;

      gap: 7px !important;
      padding: 7px !important;
    }

    .bx-page .mx-configSummary > .mx-summaryItem {
      flex-basis: 106px !important;

      width: 106px !important;
      min-width: 106px !important;
      max-width: 106px !important;
    }

    .bx-page .mx-configSummary > .mx-summaryItem--wide {
      flex-basis: 188px !important;

      width: 188px !important;
      min-width: 188px !important;
      max-width: 188px !important;
    }

    .bx-page .mx-configSummary > .mx-summaryItem--price,
    .bx-page .mx-configSummary > .mx-summaryItem--quoteBtn {
      flex-basis: 120px !important;

      width: 120px !important;
      min-width: 120px !important;
      max-width: 120px !important;
    }
  }



  .bx-page--paper .ui-btn--primary,
  .bx-page--paper .ui-btn, .bx-page--paper .bx-btn
  {
    margin-top: 7px !important;
  }


  /* =========================================================
    GOOGLE AUTOCOMPLETE — MOBILE CENTER + FULL ADDRESS WIDTH
    Keep this at the very bottom of mxdesignLanding.css
  ========================================================= */

  @media (max-width: 760px) {
    .pac-container {
      position: fixed !important;

      left: 12px !important;
      right: 12px !important;

      width: auto !important;
      min-width: 0 !important;
      max-width: none !important;

      margin-left: 0 !important;
      margin-right: 0 !important;

      box-sizing: border-box !important;

      overflow-x: hidden !important;
      overflow-y: auto !important;

      border-radius: 14px !important;

      z-index: 9999999 !important;
    }

    .pac-item {
      width: 100% !important;
      min-width: 0 !important;

      box-sizing: border-box !important;

      display: block !important;

      padding: 11px 12px !important;

      overflow: hidden !important;

      white-space: normal !important;
      word-break: break-word !important;
      overflow-wrap: anywhere !important;

      line-height: 1.35 !important;
    }

    .pac-item-query {
      display: inline !important;

      white-space: normal !important;
      word-break: break-word !important;
      overflow-wrap: anywhere !important;
    }

    .pac-matched {
      white-space: normal !important;
    }

    .pac-icon {
      float: left !important;
      margin-top: 2px !important;
      margin-right: 9px !important;
    }

    .pac-logo::after {
      max-width: 100% !important;
    }
  }

  @media (max-width: 430px) {
    .pac-container {
      left: 8px !important;
      right: 8px !important;
    }

    .pac-item {
      padding: 10px !important;
      font-size: 12px !important;
    }

    .pac-item-query {
      font-size: 12px !important;
    }
  }


  .mx-quoteFields--mxdesign {
    grid-template-columns: minmax(0, 1fr);
  }

  .mx-quoteField--address {
    width: 100%;
  }


  @media (max-width: 768px) {
    .mx-quoteSearchPanel {
      grid-template-columns: 1fr;
    }

    .mx-addressBtn--quote {
      width: 100%;
    }
  }



  .mx-quoteSearchPanel {
  display: flex !important;
  flex-direction: column !important;

  width: 100% !important;

  gap: 18px !important;

  align-items: stretch !important;
}

.mx-quoteFields,
.mx-quoteFields--mxdesign,
.mx-quoteField,
.mx-quoteField--address {
  width: 100% !important;
  min-width: 0 !important;
}

.mx-addressInputShell {
  width: 100% !important;
}

.mx-addressQuoteActions {
  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 240px)) !important;

  justify-content: center !important;
  align-items: stretch !important;

  gap: 12px !important;

  width: 100% !important;
  min-width: 0 !important;

  margin: 0 auto !important;
}

.mx-addressQuoteActions .mx-addressBtn {
  width: 100% !important;

  min-width: 0 !important;
  min-height: 54px !important;

  margin: 0 !important;

  padding: 0 20px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 6px !important;

  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  text-align: center !important;
  white-space: nowrap !important;

  cursor: pointer !important;
}

.mx-addressBtn--engineering {
  border: 2px solid rgba(255, 255, 255, 0.9) !important;

  background: rgba(20, 20, 20, 0.82) !important;
  color: #ffffff !important;

  box-shadow: none !important;
}

.mx-addressBtn--engineering:hover:not(:disabled) {
  background: #000000 !important;
  border-color: #ffffff !important;
}

.mx-addressBtn--quote {
  border: 2px solid #1C84FF !important;

  background: #1C84FF !important;
  color: #ffffff !important;

  box-shadow: none !important;
}

.mx-addressBtn--quote:hover:not(:disabled) {
  background: #3D96FF !important;
  border-color: #3D96FF !important;
}

.mx-addressQuoteActions .mx-addressBtn:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

@media (max-width: 650px) {
  .mx-addressQuoteActions {
    grid-template-columns: 1fr !important;
  }

  .mx-addressQuoteActions .mx-addressBtn {
    min-height: 52px !important;
  }
}

/* =========================================================================
   mxdesign CAD-style docked shell (viewer mode, desktop)

   Every viewer element used to be absolutely/fixed-positioned OVER a
   full-bleed 3D canvas (toolbar, data strip, icon rail, drawer, quote
   result, floating quote pill -- see mxdesignConfigurator.css /
   mxdesignLanding.css). Per owner direction ("it should be more of a
   toolbar and window like every CAD program"), viewer mode is now a CSS
   grid app shell: toolbar row, data strip row, then rail | docked panel |
   3D viewport window | docked result inspector. Nothing floats over the
   viewport any more; the drawer and result panel take real columns and
   the canvas shrinks to fit (its ResizeObserver re-sizes the renderer).

   Loaded LAST and scoped to .bx-page--started, so the landing page and
   the mobile (<900px) layout keep their existing rules untouched. The
   older sheets position several of these elements with `!important`
   (.bx-rail is `position: fixed !important`; .bx-appbar is a zero-height
   fixed shell whose __brand and __actions are each independently fixed),
   so the same properties are forced here with !important as well.
   ========================================================================= */

/* ---- typeface ------------------------------------------------------------
   One UI family for the whole app (landing + viewer): Inter for chrome,
   controls and data -- a real professional grotesk instead of the
   ui-sans-serif/system-ui default that rendered differently on every
   machine. The brand wordmark keeps its serif (Georgia/Times) so the web
   UI still ties back to the firm's Times-Roman print identity at the one
   place it matters. Loaded here (not index.html) so the whole design-system
   layer stays in one file. */

.bx-page,
.bx-page input,
.bx-page select,
.bx-page textarea,
.bx-page button {
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

.bx-page .mx-wordmark,
.bx-page .mx-wordmark-a,
.bx-page .mx-wordmark-b {
  font-family: Georgia, "Times New Roman", Times, serif;
}

/* ---- rail icons: real stroke glyphs, one weight, ink + accent --------- */
.bx-page .bx-railIco {
  color: #ffffff !important;
  background: #1A1A1A !important;
  border: 1px solid rgba(0, 0, 0, 0.35) !important;
  box-shadow: none !important;
}

.bx-page .bx-railIco svg {
  width: 16px;
  height: 16px;
  display: block;
  color: #ffffff;
}

.bx-page .bx-railIco svg path {
  stroke: #ffffff;
}

.bx-page .bx-railBtn.is-active .bx-railIco,
.bx-page .bx-railBtn:hover .bx-railIco {
  background: #1B4F8C !important;
  border-color: #163F70 !important;
}

.bx-page .bx-railLbl {
  color: rgba(26, 26, 26, 0.86) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

/* =========================================================================
   BRAND TOKENS -- Mythic Systems (source of truth: shared/report_style/
   mythic_style.py: INK/SLATE/ACCENT/ACCENT_BG/OK/NG/OPEN/RULE_GREY,
   V6_HEAD_BG, one hairline weight, boxed tables, no zebra, no color in
   chrome, red reserved for NG/corrections). The older sheets carry
   ZipKit-era tokens (--red, a blue named --green, Tailwind-slate --ink,
   an indigo --focus, 14px radii, 50px shadows) plus ~130 gradient /
   backdrop-filter declarations; rather than rewrite 8k lines of CSS, the
   brand is applied here as (1) token overrides the old rules already
   consume and (2) flat overrides on the chrome classes they style.
   ========================================================================= */
.bx-page {
  --mx-ink: #1A1A1A;
  --mx-slate: #5A6875;
  --mx-accent: #1B4F8C;
  --mx-accent-dark: #163F70;
  --mx-accent-bg: #EAF0F8;
  --mx-ok: #1B6B4A;
  --mx-ok-bg: #E7F2EC;
  --mx-ng: #A3341F;
  --mx-ng-bg: #FAEAE6;
  --mx-open: #8A6014;
  --mx-open-bg: #FAF2E1;
  --mx-rule: #D8DEE4;
  --mx-head-bg: #ECEEF0;
  --mx-label: #6B7280;
  --mx-workspace: #E3E7EC;
  --mx-panel-bg: #F4F6F8;

  /* legacy token names the old sheets read -- pointed at the brand */
  --red: var(--mx-ng);
  --red2: var(--mx-ng);
  --green: var(--mx-accent);
  --ink: var(--mx-ink);
  --muted: var(--mx-slate);
  --stroke: var(--mx-rule);
  --stroke2: var(--mx-rule);
  --focus: rgba(27, 79, 140, 0.28);
  --shadow: none;
  --shadow2: none;
  --radius: 2px;
  --radius2: 2px;
  --field-bd: var(--mx-rule);
  --field-bd2: var(--mx-accent);
  --field-fg: var(--mx-ink);
  --field-hint: var(--mx-slate);

  color: var(--mx-ink);
  background: var(--mx-workspace) !important;
  background-image: none !important;
  accent-color: var(--mx-accent);
}

/* ---- controls: flat, hairline, 2px radius, no lift ------------------- */
.bx-page .ui-btn,
.bx-page .bx-quoteBtn,
.bx-page .bx-headerMiniToggle,
.bx-page .mx-floatingQuote__btn,
.bx-page .mx-summaryItem--quoteBtn,
.bx-page .copy-permanent-link,
.bx-page .mx-packageDock__actions a {
  border-radius: 2px !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-transform: none;
}

.bx-page .ui-btn--primary,
.bx-page .bx-quoteBtn,
.bx-page .mx-packageDock__actions a,
.bx-page .mx-floatingQuote__btn {
  background: var(--mx-accent) !important;
  border: 1px solid var(--mx-accent-dark) !important;
  color: #ffffff !important;
}

.bx-page .ui-btn--primary:hover,
.bx-page .bx-quoteBtn:hover,
.bx-page .mx-packageDock__actions a:hover,
.bx-page .mx-floatingQuote__btn:hover {
  background: var(--mx-accent-dark) !important;
  filter: none !important;
}

.bx-page .ui-btn--ghost,
.bx-page .copy-permanent-link {
  background: #ffffff !important;
  border: 1px solid var(--mx-rule) !important;
  color: var(--mx-ink) !important;
}

.bx-page .ui-btn--ghost:hover,
.bx-page .copy-permanent-link:hover {
  border-color: var(--mx-accent) !important;
  color: var(--mx-accent) !important;
}

/* app-bar buttons sit on the ink toolbar: light pill group -> flat white */
.bx-page .bx-appbar .ui-btn,
.bx-page .bx-appbar .bx-quoteBtn,
.bx-page .bx-headerMiniToggle {
  background: #ffffff !important;
  border: 1px solid var(--mx-rule) !important;
  color: var(--mx-ink) !important;
}

.bx-page .bx-headerMiniToggle.is-off {
  color: var(--mx-slate) !important;
}

.bx-page .bx-appbar__actions {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
}

/* .ui-input is included by class: the Design/Openings intake fields render
   <input class="ui-input"> with no type attribute, so the attribute
   selectors alone never reached them and they kept the legacy 14px pill,
   inset shadow and 850 weight (computed-style check, 2026-09-11). */
.bx-page input[type="text"],
.bx-page input[type="number"],
.bx-page input[type="email"],
.bx-page input[type="tel"],
.bx-page input[type="search"],
.bx-page input:not([type]),
.bx-page .ui-input,
.bx-page select,
.bx-page textarea,
/* The "paper" variant sheet re-styles every field with !important at
   (0,3,1) specificity (`.bx-page--paper input:not(...):not(...)`), so the
   brand rule is repeated at (0,4,x) to win on that variant too. */
.bx-page.bx-page--paper input:not([type="range"]):not([type="color"]),
.bx-page.bx-page--paper .ui-input,
.bx-page.bx-page--paper .ui-select,
.bx-page.bx-page--paper select,
.bx-page.bx-page--paper textarea {
  background: #ffffff !important;
  border: 1px solid var(--mx-rule) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  color: var(--mx-ink) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

.bx-page .ui-input::placeholder,
.bx-page textarea::placeholder,
.bx-page.bx-page--paper input::placeholder,
.bx-page.bx-page--paper textarea::placeholder {
  color: var(--mx-slate) !important;
  font-weight: 400 !important;
}

.bx-page input:focus,
.bx-page select:focus,
.bx-page textarea:focus,
.bx-page.bx-page--paper input:not([type="range"]):not([type="color"]):focus,
.bx-page.bx-page--paper .ui-input:focus,
.bx-page.bx-page--paper .ui-select:focus,
.bx-page.bx-page--paper select:focus,
.bx-page.bx-page--paper textarea:focus {
  outline: none !important;
  border-color: var(--mx-accent) !important;
  box-shadow: 0 0 0 3px var(--mx-accent-bg) !important;
}

.bx-page input[type="range"],
.bx-page input[type="checkbox"],
.bx-page input[type="radio"] {
  accent-color: var(--mx-accent) !important;
}

/* ---- surfaces: flat white, one hairline, no glass / gradients --------- */
.bx-page .bx-left,
.bx-page .bx-panelHead,
.bx-page .bx-panelBody,
.bx-page .bx-section,
.bx-page .mx-configSummary,
.bx-page .mx-summaryItem,
.bx-page .mx-packageDock__card,
.bx-page .mx-packageDock__metrics div,
.bx-page .mx-quoteSearchPanel,
.bx-page .mx-configCard,
.bx-page .bx-card,
.bx-page .bx-porchPop {
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-radius: 2px !important;
}

.bx-page .bx-panelHead {
  background: var(--mx-panel-bg) !important;
  border-bottom: 1px solid var(--mx-rule) !important;
}

.bx-page .bx-panelBody,
.bx-page .bx-left {
  background: #ffffff !important;
}

.bx-page .bx-sectionTitle {
  color: var(--mx-slate) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.bx-page .mx-packageDock__metrics div {
  background: var(--mx-panel-bg) !important;
  border: 1px solid var(--mx-rule) !important;
}

.bx-page .mx-packageDock__metrics span,
.bx-page .mx-summaryItem span,
.bx-page .mx-packageDock__copy span {
  color: var(--mx-label) !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
}

.bx-page .mx-packageDock__metrics strong,
.bx-page .mx-summaryItem strong,
.bx-page .mx-packageDock__copy strong {
  color: var(--mx-ink) !important;
  font-weight: 700 !important;
}

.bx-page .mx-packageDock__glow,
.bx-page .mx-packageDock__icon {
  background-image: none !important;
  box-shadow: none !important;
}

.bx-page .mx-packageDock__icon {
  background: var(--mx-accent-bg) !important;
  color: var(--mx-accent) !important;
  border-radius: 2px !important;
}

.bx-page .mx-packageDock--error .mx-packageDock__icon {
  background: var(--mx-ng-bg) !important;
  color: var(--mx-ng) !important;
}

/* ---- landing: keep the photo hero, square the chrome on it ------------ */
.bx-page .mx-eyebrow {
  border-radius: 2px !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
}

.bx-page .mx-quoteSearchPanel {
  background: #ffffff !important;
  border: 1px solid var(--mx-rule) !important;
}

.bx-page .mx-quoteSearchPanel label,
.bx-page .mx-quoteSearchPanel .mx-quoteFieldLabel {
  color: var(--mx-slate) !important;
}

/* ---- tables (web equivalent of v6_table): boxed grid, grey head band -- */
.bx-page table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12.5px;
}

.bx-page th,
.bx-page td {
  border: 1px solid var(--mx-rule);
  padding: 4px 6px;
  text-align: left;
}

.bx-page th {
  background: var(--mx-head-bg);
  color: var(--mx-ink);
  font-weight: 700;
}

@media (min-width: 900px) {
  .bx-page.bx-page--started {
    display: grid !important;
    grid-template-columns: 76px auto minmax(0, 1fr) auto;
    grid-template-rows: 54px auto minmax(0, 1fr);
    grid-template-areas:
      "appbar  appbar  appbar  appbar"
      "summary summary summary summary"
      "rail    left    canvas  dock";
    height: 100vh;
    overflow: hidden;
    background: #E3E7EC;
  }

  /* ---- toolbar ------------------------------------------------------ */
  .bx-page--started .bx-appbar {
    grid-area: appbar;
    position: static !important;
    height: 54px !important;
    min-height: 54px !important;
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: 0 14px !important;
    background: #1A1A1A !important;
    border: 0 !important;
    border-bottom: 1px solid #000 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: #fff;
  }

  .bx-page--started .bx-appbar__brand {
    position: static !important;
    top: auto !important;
    left: auto !important;
    pointer-events: auto !important;
    display: flex;
    align-items: center;
  }

  .bx-page--started .bx-appbar__actions {
    position: static !important;
    top: auto !important;
    right: auto !important;
    margin-left: auto;
  }

  /* ---- data strip (address / wind / snow / seismic / quote) ---------- */
  .bx-page--started .mx-configSummary {
    grid-area: summary;
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    gap: 6px;
    transform: none !important;
    background: #F4F6F8 !important;
    border: 0 !important;
    border-bottom: 1px solid #C4CBD4 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .bx-page--started .mx-summaryItem {
    background: #FFFFFF;
    border: 1px solid #D5DBE3;
    border-radius: 2px;
    padding: 6px 10px;
  }

  .bx-page--started .mx-summaryItem--price {
    background: #1B4F8C;
    border-color: #163F70;
  }

  /* ---- icon rail ---------------------------------------------------- */
  .bx-page--started .bx-rail {
    grid-area: rail;
    position: static !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    width: 76px !important;
    height: auto !important;
    padding: 8px 6px !important;
    gap: 6px !important;
    background: #F4F6F8 !important;
    border: 0 !important;
    border-right: 1px solid #C4CBD4 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* ---- docked options panel (was a floating drawer) ----------------- */
  .bx-page--started .bx-left {
    grid-area: left;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 380px !important;
    max-width: 380px !important;
    height: auto !important;
    min-height: 0;
    margin: 0 !important;
    border: 0 !important;
    border-right: 1px solid #C4CBD4 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .bx-page--started .bx-left--closed {
    display: none !important;
  }

  .bx-page--started .bx-panelHead {
    border-radius: 0 !important;
  }

  /* ---- 3D viewport window ------------------------------------------- */
  .bx-page--started .bx-canvas {
    grid-area: canvas;
    position: relative !important;
    inset: auto !important;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    background: #FFFFFF;
    border: 1px solid #C4CBD4;
    border-top: 0;
    overflow: hidden;
  }

  /* ---- docked result inspector (was a fixed bottom sheet) ----------- */
  .bx-page--started .mx-packageDock {
    grid-area: dock;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 360px !important;
    max-width: 360px !important;
    min-height: 0;
    padding: 0 !important;
    transform: none !important;
    pointer-events: auto !important;
    background: #FFFFFF;
    border-left: 1px solid #C4CBD4;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .bx-page--started .mx-packageDock__glow {
    display: none !important;
  }

  .bx-page--started .mx-packageDock__card {
    pointer-events: auto;
    grid-template-columns: 1fr !important;
    gap: 12px;
    padding: 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .bx-page--started .mx-packageDock__main {
    align-items: flex-start;
  }

  .bx-page--started .mx-packageDock__metrics {
    grid-template-columns: 1fr 1fr !important;
  }

  .bx-page--started .mx-packageDock__metrics div {
    min-width: 0;
  }

  .bx-page--started .mx-packageDock__metrics strong {
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .bx-page--started .mx-packageDock__actions {
    justify-content: flex-start !important;
  }

  /* The data strip already carries the Generate / Steel Quote control;
     the floating pill duplicated it and is exactly the kind of overlay
     the owner rejected. */
  .bx-page--started .mx-floatingQuote {
    display: none !important;
  }
}
.mx-adminPage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(circle at 20% 10%, rgba(27, 79, 140, 0.22), transparent 28%),
    linear-gradient(135deg, #14181f, #233047 55%, #12151a);
  color: #ffffff;
}

.mx-adminCard {
  width: min(920px, 100%);
  padding: 26px;
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08));
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow:
    0 28px 90px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.24);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}

.mx-adminHeader {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 22px;
}

.mx-adminHeader span,
.mx-adminGrid label span,
.mx-adminPreview span,
.mx-adminFooter span {
  display: block;
  color: rgba(255,255,255,0.66);
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mx-adminHeader h1 {
  margin: 6px 0 8px;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 0.95;
  letter-spacing: -0.06em;
}

.mx-adminHeader p {
  margin: 0;
  max-width: 560px;
  color: rgba(255,255,255,0.74);
  font-size: 14px;
  line-height: 1.45;
}

.mx-adminHeader button,
.mx-adminSave {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  color: #111827;
  background: rgba(255,255,255,0.86);
  font-weight: 1000;
  cursor: pointer;
}

.mx-adminGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.mx-adminGrid label {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 20px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
}

.mx-adminGrid input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.86);
  color: #111827;
  font-size: 18px;
  font-weight: 900;
  outline: none;
}

.mx-adminPreview {
  margin-top: 16px;
  padding: 16px;
  border-radius: 20px;
  background: rgba(27, 79, 140, 0.18);
  border: 1px solid rgba(131, 188, 255, 0.24);
}

.mx-adminPreview strong {
  display: block;
  margin-top: 6px;
  font-size: 20px;
}

.mx-adminFooter {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.mx-adminFooter strong {
  display: block;
  margin-top: 4px;
  color: rgba(255,255,255,0.86);
  font-size: 13px;
}

.mx-adminSave {
  background:
    linear-gradient(135deg, rgba(27, 79, 140, 0.98), rgba(18, 58, 104, 0.86));
  color: #ffffff;
  box-shadow: 0 16px 38px rgba(27, 79, 140, 0.24);
}

.mx-adminAlert {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  font-weight: 900;
}

.mx-adminAlert--error {
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(248, 113, 113, 0.28);
}

.mx-adminAlert--success {
  background: rgba(34, 197, 94, 0.18);
  border: 1px solid rgba(74, 222, 128, 0.28);
}

@media (max-width: 760px) {
  .mx-adminPage {
    padding: 14px;
    place-items: start center;
  }

  .mx-adminCard {
    padding: 18px;
    border-radius: 22px;
  }

  .mx-adminHeader,
  .mx-adminFooter {
    flex-direction: column;
    align-items: stretch;
  }

  .mx-adminGrid {
    grid-template-columns: 1fr;
  }
}



/* Mythic Systems wordmark, same treatment as the landing page -- duplicated here
   (not imported from mxdesignLanding.css) since this file is its own scoped
   stylesheet, same convention the rest of this area already uses. */
.mx-wordmark {
  display: flex;
  align-items: baseline;
  gap: 0.35em;
  font-family: Georgia, "Times New Roman", Times, serif;
}

.mx-wordmark-a {
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ffffff;
}

.mx-wordmark-b {
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #9DC3EC;
}

/* Big desktop side logo */
.mx-adminLogo--desktop {
  position: fixed;
  left: -142px;
  top: 50%;
  z-index: 0;

  width: 560px;
  height: 140px;

  justify-content: center;

  transform: translateY(-50%) rotate(-90deg);
  transform-origin: center;

  opacity: 0.95;
  pointer-events: none;
  user-select: none;

  filter:
    drop-shadow(0 26px 60px rgba(0, 0, 0, 0.32))
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.18));
}

.mx-adminLogo--desktop .mx-wordmark-a { font-size: 56px; }
.mx-adminLogo--desktop .mx-wordmark-b { font-size: 34px; }

/* Hidden on desktop, shown on mobile */
.mx-adminLogoMobile {
  display: none;
}

/* Make admin card sit above big logo */
.mx-adminCard {
  position: relative;
  z-index: 2;
}

/* Give desktop card breathing room away from left logo */
@media (min-width: 981px) {
  .mx-adminPage {
    padding-left: 190px;
  }
}

@media (max-width: 980px) {
  .mx-adminLogo--desktop {
    display: none;
  }

  .mx-adminLogoMobile {
    display: flex;
    position: fixed;
    top: 18px;
    left: 20px;
    z-index: 4;

    width: 170px;
    height: 48px;
    align-items: center;

    pointer-events: none;
    user-select: none;

    filter:
      drop-shadow(0 12px 28px rgba(0, 0, 0, 0.32))
      drop-shadow(0 1px 0 rgba(255, 255, 255, 0.18));
  }

  .mx-adminLogoMobile .mx-wordmark-a { font-size: 20px; }
  .mx-adminLogoMobile .mx-wordmark-b { font-size: 13px; }

  .mx-adminPage {
    padding-top: 88px;
  }
}

@media (max-width: 430px) {
  .mx-adminLogoMobile {
    top: 14px;
    left: 14px;
    width: 142px;
    height: 40px;
  }

  .mx-adminLogoMobile .mx-wordmark-a { font-size: 17px; }
  .mx-adminLogoMobile .mx-wordmark-b { font-size: 11px; }

  .mx-adminPage {
    padding-top: 74px;
  }
}.ht-page {
  min-height: 100vh;
  background:
    radial-gradient(
      circle at 85% -10%,
      rgba(204, 168, 74, 0.1),
      transparent 28rem
    ),
    #f4f5f7;
  color: #171717;
}

.ht-page *,
.ht-page *::before,
.ht-page *::after {
  box-sizing: border-box;
}

/* =========================================================
   TOP BAR
   ========================================================= */

.ht-topbar {
  height: 70px;
  background: #111214;
  border-top: 3px solid #4b8ea3;
  border-bottom: 1px solid #292b2f;
  color: #fff;
}

.ht-topbar-inner {
  width: min(1600px, calc(100% - 40px));
  height: 100%;
  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.ht-brand {
  display: flex;
  align-items: center;
  gap: 12px;

  color: inherit;
  text-decoration: none;
}

.ht-brand-mark {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border: 1px solid #c7a74b;

  background:
    linear-gradient(
      145deg,
      #282828,
      #111
    );

  color: #d7b95b;

  font-family: Georgia, serif;
  font-size: 24px;
  font-weight: 900;
}

.ht-brand-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ht-brand-copy > div {
  display: flex;
  align-items: baseline;
  gap: 5px;

  line-height: 1;
}

.ht-brand-copy strong {
  font-family: Georgia, serif;
  font-size: 17px;
  letter-spacing: 0.055em;
}

.ht-brand-copy em {
  font-family: Georgia, serif;
  font-size: 16px;
  font-weight: 400;
}

.ht-brand-copy span {
  color: #9ea1a6;

  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ht-topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ht-engine-badge {
  min-height: 34px;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 0 11px;

  border: 1px solid #303338;
  border-radius: 999px;

  color: #c8c9cc;

  font-size: 11px;
  font-weight: 700;
}

.ht-engine-dot {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #d4af37;

  box-shadow:
    0 0 0 3px rgba(212, 175, 55, 0.12);
}

.ht-back-link {
  min-height: 36px;

  display: inline-flex;
  align-items: center;

  padding: 0 13px;

  border: 1px solid #d4af37;
  border-radius: 6px;

  color: #e1c15c;
  text-decoration: none;

  font-size: 12px;
  font-weight: 800;

  transition:
    background 120ms ease,
    color 120ms ease;
}

.ht-back-link:hover {
  background: #d4af37;
  color: #111;
}

/* =========================================================
   MAIN / HERO
   ========================================================= */

.ht-main {
  width: min(1600px, calc(100% - 40px));
  margin: 0 auto;

  padding: 18px 0 22px;
}

.ht-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;

  gap: 28px;

  margin-bottom: 14px;
}

.ht-eyebrow,
.ht-panel-kicker {
  color: #9b7e2c;

  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.ht-hero h1 {
  margin: 6px 0 6px;

  font-size: clamp(28px, 2.5vw, 40px);
  line-height: 1.03;
  letter-spacing: -0.035em;
}

.ht-hero p {
  max-width: 720px;
  margin: 0;

  color: #686a6d;

  font-size: 13px;
  line-height: 1.5;
}

.ht-hero-meta {
  display: grid;
  grid-template-columns: repeat(3, auto);

  border: 1px solid #d9dadc;
  border-radius: 10px;

  background: #fff;

  overflow: hidden;

  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.035);
}

.ht-hero-meta > div {
  min-width: 130px;

  padding: 11px 16px;

  border-right: 1px solid #e4e4e4;
}

.ht-hero-meta > div:last-child {
  border-right: 0;
}

.ht-hero-meta span {
  display: block;

  margin-bottom: 3px;

  color: #999;

  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.ht-hero-meta strong {
  font-size: 11px;
}

/* =========================================================
   WORKSPACE
   ========================================================= */

.ht-workspace {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);

  height: calc(100vh - 245px);
  min-height: 510px;

  border: 1px solid #d9dadd;
  border-radius: 12px;

  background: #fff;

  overflow: hidden;

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.06);
}

/* =========================================================
   LEFT SIDEBAR
   ========================================================= */

.ht-sidebar {
  min-width: 0;
  min-height: 0;

  display: flex;
  flex-direction: column;

  border-right: 1px solid #dedfe1;

  background: #f8f8f8;

  overflow: hidden;
}

.ht-sidebar-header {
  flex: 0 0 auto;

  padding: 18px 18px 15px;

  border-bottom: 1px solid #dedfe1;

  background: #fff;
}

.ht-sidebar-header h2 {
  margin: 5px 0 0;

  font-size: 18px;
  line-height: 1.2;
}

/*
  Expected JSX:
  <form className="ht-form-shell">
    <div className="ht-form-scroll">...</div>
    <div className="ht-form-footer">...</div>
  </form>
*/

.ht-form-shell {
  flex: 1 1 auto;
  min-height: 0;

  display: flex;
  flex-direction: column;

  overflow: hidden;
}

.ht-form-scroll {
  flex: 1 1 auto;
  min-height: 0;

  overflow-y: auto;
  overflow-x: hidden;

  overscroll-behavior: contain;

  scrollbar-width: thin;
  scrollbar-color: #bdbdbd transparent;
}

.ht-form-scroll::-webkit-scrollbar {
  width: 6px;
}

.ht-form-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.ht-form-scroll::-webkit-scrollbar-thumb {
  background: #bdbdbd;
  border-radius: 999px;
}

.ht-form-section {
  padding: 18px;

  border-bottom: 1px solid #e5e5e5;
}

.ht-form-section h3 {
  margin: 0 0 14px;

  color: #2f2f2f;

  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ht-field {
  display: block;

  margin-bottom: 14px;
}

.ht-field:last-child {
  margin-bottom: 0;
}

.ht-field > span {
  display: block;

  margin-bottom: 6px;

  color: #4b4b4b;

  font-size: 11px;
  font-weight: 800;
}

.ht-field input,
.ht-field select {
  width: 100%;
  height: 42px;

  padding: 0 11px;

  border: 1px solid #c8c9cc;
  border-radius: 6px;

  background: #fff;
  color: #171717;

  font: inherit;
  font-size: 12px;

  transition:
    border-color 120ms ease,
    box-shadow 120ms ease;
}

.ht-field input:focus,
.ht-field select:focus {
  outline: none;

  border-color: #9d7b24;

  box-shadow:
    0 0 0 3px rgba(157, 123, 36, 0.1);
}

.ht-field small {
  display: block;

  margin-top: 5px;

  color: #979797;

  font-size: 9px;
}

.ht-input-unit {
  position: relative;
}

.ht-input-unit input {
  padding-right: 57px;
}

.ht-input-unit strong {
  position: absolute;
  top: 50%;
  right: 10px;

  transform: translateY(-50%);

  color: #888;

  font-size: 10px;

  pointer-events: none;
}

.ht-info-box {
  margin-top: 6px;

  padding: 10px 11px;

  border: 1px solid #ead79d;
  border-radius: 6px;

  background: #fffaf0;
}

.ht-info-box strong {
  display: block;

  margin-bottom: 3px;

  color: #765c17;

  font-size: 10px;
}

.ht-info-box p {
  margin: 0;

  color: #7e704a;

  font-size: 9px;
  line-height: 1.45;
}

.ht-chip-row {
  display: flex;
  flex-wrap: wrap;

  gap: 5px;

  margin: -4px 0 13px;
}

.ht-chip {
  min-height: 24px;

  display: inline-flex;
  align-items: center;

  padding: 0 8px;

  border: 1px solid #d4d4d4;
  border-radius: 999px;

  background: #fff;
  color: #4d4d4d;

  font-size: 9px;
  font-weight: 800;
}

.ht-chip-depth {
  border-color: #ddcb91;

  background: #fffaeb;
  color: #745d20;
}

/* =========================================================
   ERROR
   ========================================================= */

.ht-error-box {
  margin: 14px 18px;

  padding: 11px;

  border: 1px solid #e1a4a4;
  border-radius: 6px;

  background: #fff1f1;
  color: #952727;
}

.ht-error-box strong {
  display: block;

  margin-bottom: 4px;

  font-size: 10px;
}

.ht-error-box span {
  display: block;

  font-size: 9px;
  line-height: 1.45;
}

/* =========================================================
   FIXED ANALYZE FOOTER
   ========================================================= */

.ht-form-footer {
  flex: 0 0 auto;

  padding: 14px 18px;

  border-top: 1px solid #d9dadd;

  background: #fff;

  box-shadow:
    0 -6px 18px rgba(0, 0, 0, 0.04);
}

.ht-analyze-button {
  width: 100%;
  min-height: 46px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  border: 1px solid #111;
  border-radius: 7px;

  background: #111214;
  color: #d5b247;

  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.02em;

  cursor: pointer;

  transition:
    transform 120ms ease,
    background 120ms ease;
}

.ht-analyze-button:hover:not(:disabled) {
  background: #1c1d1f;

  transform: translateY(-1px);
}

.ht-analyze-button:disabled {
  opacity: 0.65;
  cursor: wait;
}

.ht-spinner {
  width: 13px;
  height: 13px;

  border: 2px solid rgba(212, 175, 55, 0.25);
  border-top-color: #d4af37;
  border-radius: 50%;

  animation:
    ht-spin 0.8s linear infinite;
}

@keyframes ht-spin {
  to {
    transform: rotate(360deg);
  }
}

/* =========================================================
   RIGHT CONTENT
   ========================================================= */

.ht-content {
  min-width: 0;
  min-height: 0;

  overflow-y: auto;
  overflow-x: hidden;

  background: #fff;

  scrollbar-width: thin;
  scrollbar-color: #a9a9a9 transparent;
}

.ht-content::-webkit-scrollbar {
  width: 7px;
}

.ht-content::-webkit-scrollbar-thumb {
  background: #aaa;
  border-radius: 999px;
}

.ht-results-header {
  position: sticky;
  top: 0;
  z-index: 8;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;

  padding: 17px 20px;

  border-bottom: 1px solid #e1e2e3;

  background: rgba(255, 255, 255, 0.97);

  backdrop-filter: blur(8px);
}

.ht-results-header h2 {
  margin: 3px 0 2px;

  font-size: 19px;
}

.ht-results-header p {
  margin: 0;

  color: #8a8a8a;

  font-size: 10px;
}

.ht-results-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ht-pdf-button {
  min-height: 38px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 13px;

  border: 1px solid #111;
  border-radius: 6px;

  background: #fff;
  color: #795f18;

  text-decoration: none;

  font-size: 10px;
  font-weight: 900;

  transition:
    background 120ms ease,
    color 120ms ease;
}

.ht-pdf-button:hover {
  background: #111;
  color: #d5b247;
}

/* =========================================================
   SUMMARY CARDS
   ========================================================= */

.ht-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  gap: 10px;

  padding: 15px 20px 7px;
}

.ht-summary-card {
  min-width: 0;

  padding: 12px 13px;

  border: 1px solid #e0e1e3;
  border-radius: 8px;

  background:
    linear-gradient(
      145deg,
      #fff,
      #fafafa
    );
}

.ht-summary-card span {
  display: block;

  color: #949494;

  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.11em;
}

.ht-summary-card strong {
  display: block;

  margin: 4px 0 1px;

  font-size: 22px;
}

.ht-summary-card small {
  color: #989898;

  font-size: 9px;
}

/* =========================================================
   TABS
   ========================================================= */

.ht-tabs {
  display: flex;

  gap: 4px;

  margin: 9px 20px 0;

  padding-bottom: 9px;

  border-bottom: 1px solid #dedfe1;

  overflow-x: auto;
}

.ht-tab {
  min-height: 36px;

  padding: 0 13px;

  border: 0;
  border-radius: 6px;

  background: transparent;
  color: #7e7e7e;

  font-size: 10px;
  font-weight: 900;

  white-space: nowrap;

  cursor: pointer;
}

.ht-tab span {
  min-width: 20px;
  height: 18px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-left: 6px;

  border-radius: 999px;

  background: #e9e9e9;

  font-size: 8px;
}

.ht-tab-active {
  background: #171819;
  color: #d7b64d;
}

.ht-tab-active span {
  background: #353535;
  color: #e5c45d;
}

/* =========================================================
   DRAWINGS DEFAULT VIEW
   ========================================================= */

.ht-drawings-section {
  padding: 14px 20px 26px;
}

.ht-section-heading {
  display: flex;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 13px;
}

.ht-section-heading h3 {
  margin: 0 0 3px;

  font-size: 14px;
}

.ht-section-heading p {
  max-width: 650px;

  margin: 0;

  color: #8e8e8e;

  font-size: 9px;
  line-height: 1.5;
}

.ht-drawing-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 14px;
}

.ht-drawing-card {
  min-width: 0;

  overflow: hidden;

  border: 1px solid #dcdddf;
  border-radius: 9px;

  background: #fff;

  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    border-color 140ms ease;
}

.ht-drawing-card:hover {
  transform: translateY(-2px);

  border-color: #c8b36d;

  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.09);
}

.ht-drawing-image-button {
  width: 100%;
  height: 225px;

  display: block;

  padding: 8px;

  border: 0;
  border-bottom: 1px solid #e4e4e4;

  background:
    linear-gradient(
      #f2f2f2 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      #f2f2f2 1px,
      transparent 1px
    ),
    #fbfbfb;

  background-size: 20px 20px;

  cursor: zoom-in;
}

.ht-drawing-image {
  width: 100%;
  height: 100%;

  object-fit: contain;

  background: rgba(255, 255, 255, 0.94);
}

.ht-drawing-card-body {
  padding: 11px 12px 12px;
}

.ht-drawing-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  gap: 10px;
}

.ht-drawing-mark {
  color: #6f5715;

  font-size: 11px;
  font-weight: 900;
}

.ht-drawing-subtitle {
  margin-top: 2px;

  color: #999;

  font-size: 9px;
}

.ht-drawing-stats {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 7px;

  margin-top: 10px;
}

.ht-drawing-stats > div {
  min-width: 0;

  padding: 7px;

  border: 1px solid #ececec;
  border-radius: 5px;

  background: #fafafa;
}

.ht-drawing-stats span {
  display: block;

  margin-bottom: 2px;

  color: #aaa;

  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase;
}

.ht-drawing-stats strong {
  display: block;

  overflow: hidden;

  font-size: 8px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   TABLE
   ========================================================= */

.ht-table-card {
  margin: 10px 20px 22px;

  border: 1px solid #dedfe1;
  border-radius: 8px;

  overflow: hidden;
}

.ht-table-scroll {
  width: 100%;

  overflow-x: auto;
}

.ht-table {
  width: 100%;

  border-collapse: collapse;

  font-size: 10px;
}

.ht-table th {
  padding: 10px;

  background: #202123;
  color: #eee;

  text-align: left;

  font-size: 8px;
  letter-spacing: 0.045em;

  white-space: nowrap;
}

.ht-table td {
  padding: 10px;

  border-bottom: 1px solid #ececec;

  vertical-align: middle;

  white-space: nowrap;
}

.ht-table tbody tr:nth-child(even) {
  background: #fafafa;
}

.ht-table tbody tr:hover {
  background: #fff9e9;
}

.ht-mark-link {
  padding: 0;

  border: 0;

  background: transparent;
  color: #80651d;

  font-size: inherit;
  font-weight: 900;

  cursor: pointer;
}

.ht-mark-link:hover {
  text-decoration: underline;
}

.ht-section-cell {
  font-weight: 800;
}

.ht-muted {
  color: #aaa;
}

.ht-reinforced {
  display: inline-flex;

  padding: 3px 6px;

  border-radius: 4px;

  background: #fff3cc;
  color: #765d15;

  font-size: 9px;
  font-weight: 800;
}

.ht-util-cell {
  min-width: 100px;
}

.ht-util-cell strong {
  font-size: 9px;
}

.ht-util-track {
  width: 70px;
  height: 3px;

  margin-top: 4px;

  overflow: hidden;

  border-radius: 999px;

  background: #e5e5e5;
}

.ht-util-track span {
  display: block;

  height: 100%;

  background: currentColor;
}

.ht-status {
  min-width: 48px;
  height: 23px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;

  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.ht-status-pass {
  border: 1px solid #b6d8bd;

  background: #edf7ef;
  color: #267239;
}

.ht-status-fail {
  border: 1px solid #e2b0b0;

  background: #fff0f0;
  color: #a62b2b;
}

/* =========================================================
   EMPTY / LOADING
   ========================================================= */

.ht-empty-state {
  min-height: 420px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 40px;

  text-align: center;
}

.ht-empty-symbol {
  width: 66px;
  height: 66px;

  display: grid;
  place-items: center;

  margin-bottom: 15px;

  border: 1px solid #d5ba68;

  background: #171819;
  color: #d7b64d;

  font-family: Georgia, serif;
  font-size: 32px;
  font-weight: 900;
}

.ht-empty-state h3 {
  margin: 0 0 7px;

  font-size: 19px;
}

.ht-empty-state > p {
  max-width: 480px;

  margin: 0;

  color: #888;

  font-size: 11px;
  line-height: 1.55;
}

.ht-empty-features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  gap: 6px;

  margin-top: 18px;
}

.ht-empty-features span {
  padding: 5px 8px;

  border: 1px solid #ddd;
  border-radius: 999px;

  background: #fafafa;
  color: #777;

  font-size: 8px;
  font-weight: 800;
}

.ht-loading-symbol {
  display: flex;

  gap: 6px;

  margin-bottom: 18px;
}

.ht-loading-symbol span {
  width: 8px;
  height: 30px;

  border-radius: 2px;

  background: #b48d27;

  animation:
    ht-loading-bars 1s
    ease-in-out infinite;
}

.ht-loading-symbol span:nth-child(2) {
  animation-delay: 0.14s;
}

.ht-loading-symbol span:nth-child(3) {
  animation-delay: 0.28s;
}

@keyframes ht-loading-bars {
  0%,
  100% {
    transform: scaleY(0.45);
    opacity: 0.45;
  }

  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}

/* =========================================================
   MODAL
   ========================================================= */

.ht-modal-backdrop {
  position: fixed;
  inset: 0;

  z-index: 1000;

  display: grid;
  place-items: center;

  padding: 24px;

  background: rgba(9, 10, 11, 0.86);

  backdrop-filter: blur(6px);
}

.ht-modal {
  width: min(1350px, 96vw);
  max-height: 94vh;

  overflow: hidden;

  border: 1px solid #444;
  border-radius: 11px;

  background: #fff;

  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.42);
}

.ht-modal-header {
  min-height: 59px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding: 10px 14px 10px 18px;

  background: #171819;
  color: #fff;
}

.ht-modal-header div {
  display: flex;
  flex-direction: column;

  gap: 2px;
}

.ht-modal-header span {
  color: #a6a6a6;

  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.ht-modal-header strong {
  color: #d9b74d;

  font-size: 12px;
}

.ht-modal-header button {
  width: 36px;
  height: 36px;

  border: 1px solid #4c4c4c;
  border-radius: 5px;

  background: #242527;
  color: #fff;

  font-size: 24px;
  line-height: 1;

  cursor: pointer;
}

.ht-modal-image-wrap {
  height: min(72vh, 760px);

  padding: 14px;

  overflow: auto;

  background:
    linear-gradient(
      #f0f0f0 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      #f0f0f0 1px,
      transparent 1px
    ),
    #fff;

  background-size: 20px 20px;
}

.ht-modal-image-wrap img {
  width: 100%;
  height: 100%;

  object-fit: contain;
}

.ht-modal-footer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  border-top: 1px solid #ddd;

  background: #fafafa;
}

.ht-modal-footer > div {
  padding: 10px 14px;

  border-right: 1px solid #ddd;
}

.ht-modal-footer > div:last-child {
  border-right: 0;
}

.ht-modal-footer span {
  display: block;

  margin-bottom: 2px;

  color: #999;

  font-size: 7px;
  font-weight: 900;
  text-transform: uppercase;
}

.ht-modal-footer strong {
  font-size: 10px;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {
  .ht-workspace {
    grid-template-columns:
      310px minmax(0, 1fr);
  }

  .ht-summary-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .ht-drawing-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   MOBILE / TABLET STACK
   ========================================================= */

@media (max-width: 850px) {
  .ht-page {
    min-height: 100dvh;
  }

  .ht-topbar {
    height: auto;
    min-height: 64px;
  }

  .ht-topbar-inner {
    min-height: 64px;

    padding: 8px 0;
  }

  .ht-main {
    padding-top: 15px;
  }

  .ht-hero {
    align-items: flex-start;
    flex-direction: column;

    gap: 14px;

    margin-bottom: 14px;
  }

  .ht-hero h1 {
    font-size: 31px;
  }

  .ht-hero-meta {
    width: 100%;

    grid-template-columns:
      repeat(3, 1fr);
  }

  .ht-hero-meta > div {
    min-width: 0;

    padding: 10px 11px;
  }

  .ht-workspace {
    display: block;

    height: auto;
    min-height: 0;

    overflow: visible;
  }

  .ht-sidebar {
    border-right: 0;
    border-bottom: 1px solid #ddd;

    overflow: hidden;
  }

  .ht-form-shell {
    height: min(68dvh, 650px);
    max-height: 650px;
  }

  .ht-form-scroll {
    flex: 1;
    min-height: 0;

    overflow-y: auto;
  }

  .ht-form-footer {
    flex: 0 0 auto;

    position: static;

    padding:
      12px
      16px
      calc(12px + env(safe-area-inset-bottom));
  }

  .ht-content {
    min-height: 480px;

    overflow: visible;
  }

  .ht-results-header {
    position: static;
  }

  .ht-empty-state {
    min-height: 390px;
  }

  .ht-modal-backdrop {
    padding: 10px;
  }

  .ht-modal {
    width: 100%;

    max-height: 96dvh;
  }

  .ht-modal-image-wrap {
    height: 62dvh;
  }
}

/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 600px) {
  .ht-topbar-inner,
  .ht-main {
    width: min(
      100% - 20px,
      1600px
    );
  }

  .ht-main {
    padding-top: 13px;
    padding-bottom: 16px;
  }

  .ht-engine-badge {
    display: none;
  }

  .ht-brand-mark {
    width: 38px;
    height: 38px;

    font-size: 21px;
  }

  .ht-brand-copy strong {
    font-size: 14px;
  }

  .ht-brand-copy em {
    font-size: 13px;
  }

  .ht-brand-copy span {
    display: none;
  }

  .ht-back-link {
    min-height: 34px;

    padding: 0 9px;

    font-size: 10px;
  }

  .ht-eyebrow {
    font-size: 9px;
  }

  .ht-hero h1 {
    font-size: 28px;
  }

  .ht-hero p {
    font-size: 12px;
  }

  .ht-hero-meta {
    grid-template-columns: 1fr;
  }

  .ht-hero-meta > div {
    border-right: 0;
    border-bottom: 1px solid #eee;
  }

  .ht-hero-meta > div:last-child {
    border-bottom: 0;
  }

  .ht-sidebar-header {
    padding: 14px 15px 12px;
  }

  .ht-form-shell {
    height: 64dvh;
    max-height: 560px;
  }

  .ht-form-section {
    padding: 15px;
  }

  .ht-form-footer {
    padding:
      10px
      14px
      calc(12px + env(safe-area-inset-bottom));
  }

  .ht-analyze-button {
    min-height: 48px;

    font-size: 10px;
  }

  .ht-summary-grid {
    grid-template-columns: 1fr 1fr;

    padding-left: 14px;
    padding-right: 14px;
  }

  .ht-tabs {
    margin-left: 14px;
    margin-right: 14px;
  }

  .ht-drawings-section {
    padding-left: 14px;
    padding-right: 14px;
  }

  .ht-table-card {
    margin-left: 14px;
    margin-right: 14px;
  }

  .ht-results-header {
    align-items: flex-start;
    flex-direction: column;

    padding: 15px;
  }

  .ht-results-actions {
    width: 100%;
  }

  .ht-pdf-button {
    width: 100%;

    justify-content: center;
  }

  .ht-drawing-image-button {
    height: 185px;
  }

  .ht-drawing-stats {
    grid-template-columns:
      1fr 1fr;
  }

  .ht-modal-footer {
    grid-template-columns:
      1fr 1fr;
  }
}

/* =========================================================
   SHORT DESKTOP SCREENS
   ========================================================= */

@media (max-height: 760px) and (min-width: 851px) {
  .ht-main {
    padding-top: 12px;
  }

  .ht-hero {
    margin-bottom: 10px;
  }

  .ht-hero h1 {
    font-size: 32px;
  }

  .ht-hero p {
    font-size: 11px;
  }

  .ht-workspace {
    height: calc(100vh - 215px);
    min-height: 420px;
  }

  .ht-sidebar-header {
    padding-top: 14px;
    padding-bottom: 12px;
  }
}




/* =========================================================
   HEADER TRUSS ROUTE — FORCE LAYOUT OVERRIDES
   Must remain at the VERY END of this CSS file.
   ========================================================= */

/*
 * Existing mxdesign styles can make body/root/app fixed-height
 * and overflow:hidden. On /headertruss we explicitly undo that.
 */

html:has(.ht-page),
body:has(.ht-page) {
  width: 100% !important;
  min-height: 100% !important;
  height: auto !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body:has(.ht-page) #root {
  width: 100% !important;

  min-height: 100vh !important;
  min-height: 100dvh !important;

  height: auto !important;
  max-height: none !important;

  overflow: visible !important;
}

body:has(.ht-page) .app {
  display: block !important;

  width: 100% !important;

  min-height: 100vh !important;
  min-height: 100dvh !important;

  height: auto !important;
  max-height: none !important;

  padding: 0 !important;
  margin: 0 !important;

  overflow: visible !important;
}

/* The Header Truss page itself must be page-scrollable. */
.ht-page {
  display: block !important;

  width: 100% !important;

  min-height: 100vh !important;
  min-height: 100dvh !important;

  height: auto !important;
  max-height: none !important;

  overflow: visible !important;
}

/* Main page is never allowed to become a clipped flex child. */
.ht-main {
  display: block !important;

  height: auto !important;
  max-height: none !important;

  overflow: visible !important;
}

/* =========================================================
   DESKTOP WORKSPACE
   ========================================================= */

.ht-workspace {
  display: grid !important;
  grid-template-columns: 340px minmax(0, 1fr) !important;

  /*
   * Desktop workspace gets its own usable height.
   * Both columns then scroll internally.
   */
  height: calc(100dvh - 245px) !important;

  min-height: 500px !important;
  max-height: none !important;

  overflow: hidden !important;
}

/* =========================================================
   SIDEBAR
   ========================================================= */

.ht-sidebar {
  display: flex !important;
  flex-direction: column !important;

  min-width: 0 !important;
  min-height: 0 !important;

  height: 100% !important;
  max-height: 100% !important;

  overflow: hidden !important;
}

/*
 * Form shell occupies all available height between
 * sidebar header and bottom.
 */
.ht-form-shell {
  display: flex !important;
  flex-direction: column !important;

  flex: 1 1 0 !important;

  min-height: 0 !important;
  height: 0 !important;

  overflow: hidden !important;

  margin: 0 !important;
  padding: 0 !important;
}

/*
 * ONLY THIS PART SCROLLS.
 */
.ht-form-scroll {
  display: block !important;

  flex: 1 1 auto !important;

  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;

  overscroll-behavior: contain !important;

  padding: 0 !important;

  scrollbar-width: thin;
  scrollbar-color: #aaa transparent;
}

.ht-form-scroll::-webkit-scrollbar {
  width: 7px !important;
}

.ht-form-scroll::-webkit-scrollbar-track {
  background: transparent !important;
}

.ht-form-scroll::-webkit-scrollbar-thumb {
  background: #aaa !important;
  border-radius: 999px !important;
}

/*
 * Button is NOT sticky.
 * It is a dedicated fixed footer below the scroll region.
 */
.ht-form-footer {
  position: relative !important;
  inset: auto !important;

  display: block !important;

  flex: 0 0 auto !important;

  width: 100% !important;
  height: auto !important;

  margin: 0 !important;

  padding:
    14px
    18px
    calc(14px + env(safe-area-inset-bottom))
    !important;

  border-top: 1px solid #d8d8d8 !important;

  background: #fff !important;

  box-shadow:
    0 -6px 18px rgba(0, 0, 0, 0.07)
    !important;

  z-index: 50 !important;

  overflow: visible !important;
}

.ht-analyze-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;

  min-height: 48px !important;
  height: 48px !important;

  margin: 0 !important;

  flex: none !important;

  visibility: visible !important;
  opacity: 1;
}

/* Right engineering area scrolls independently on desktop. */
.ht-content {
  min-width: 0 !important;
  min-height: 0 !important;

  height: 100% !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* =========================================================
   TABLET / PHONE
   ========================================================= */

@media (max-width: 850px) {

  /*
   * On mobile use NORMAL PAGE SCROLL.
   * Do not trap the whole application in a desktop-style box.
   */

  html:has(.ht-page),
  body:has(.ht-page),
  body:has(.ht-page) #root,
  body:has(.ht-page) .app,
  .ht-page,
  .ht-main {
    height: auto !important;
    max-height: none !important;

    min-height: 0 !important;

    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  .ht-page {
    min-height: 100dvh !important;
  }

  .ht-workspace {
    display: block !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: visible !important;
  }

  .ht-sidebar {
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: hidden !important;

    border-right: 0 !important;
    border-bottom: 1px solid #ddd !important;
  }

  /*
   * On a phone, give the input tool a controlled panel.
   * Header + scroll area + button all remain visible.
   */
  .ht-form-shell {
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;

    height: 65dvh !important;
    min-height: 460px !important;
    max-height: 620px !important;

    overflow: hidden !important;
  }

  .ht-form-scroll {
    flex: 1 1 0 !important;

    min-height: 0 !important;

    height: auto !important;
    max-height: none !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    -webkit-overflow-scrolling: touch !important;
  }

  .ht-form-footer {
    position: relative !important;
    inset: auto !important;

    flex: 0 0 auto !important;

    width: 100% !important;

    padding:
      12px
      15px
      calc(14px + env(safe-area-inset-bottom))
      !important;

    background: #fff !important;

    z-index: 100 !important;
  }

  .ht-analyze-button {
    width: 100% !important;

    height: 50px !important;
    min-height: 50px !important;

    display: flex !important;

    visibility: visible !important;
  }

  /*
   * Results become part of normal page flow on phones.
   */
  .ht-content {
    width: 100% !important;

    height: auto !important;
    min-height: 480px !important;
    max-height: none !important;

    overflow: visible !important;
  }

  .ht-results-header {
    position: static !important;
  }
}

/* =========================================================
   SMALL PHONE
   ========================================================= */

@media (max-width: 600px) {

  .ht-main {
    width: calc(100% - 16px) !important;
  }

  .ht-form-shell {
    /*
     * Enough room for inputs but always leaves the
     * Analyze button outside the scrolling section.
     */
    height: 68dvh !important;

    min-height: 430px !important;
    max-height: 590px !important;
  }

  .ht-form-footer {
    padding:
      10px
      12px
      calc(12px + env(safe-area-inset-bottom))
      !important;
  }

  .ht-analyze-button {
    height: 52px !important;
    min-height: 52px !important;

    font-size: 10px !important;
  }
}.counter {
  font-size: 16px;
  padding: 5px 10px;
  border-radius: 5px;
  color: var(--accent);
  background: var(--accent-bg);
  border: 2px solid transparent;
  transition: border-color 0.3s;
  margin-bottom: 24px;

  &:hover {
    border-color: var(--accent-border);
  }
  &:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
}

.hero {
  position: relative;

  .base,
  .framework,
  .vite {
    inset-inline: 0;
    margin: 0 auto;
  }

  .base {
    width: 170px;
    position: relative;
    z-index: 0;
  }

  .framework,
  .vite {
    position: absolute;
  }

  .framework {
    z-index: 1;
    top: 34px;
    height: 28px;
    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
      scale(1.4);
  }

  .vite {
    z-index: 0;
    top: 107px;
    height: 26px;
    width: auto;
    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
      scale(0.8);
  }
}

#center {
  display: flex;
  flex-direction: column;
  gap: 25px;
  place-content: center;
  place-items: center;
  flex-grow: 1;

  @media (max-width: 1024px) {
    padding: 32px 20px 24px;
    gap: 18px;
  }
}

#next-steps {
  display: flex;
  border-top: 1px solid var(--border);
  text-align: left;

  & > div {
    flex: 1 1 0;
    padding: 32px;
    @media (max-width: 1024px) {
      padding: 24px 20px;
    }
  }

  .icon {
    margin-bottom: 16px;
    width: 22px;
    height: 22px;
  }

  @media (max-width: 1024px) {
    flex-direction: column;
    text-align: center;
  }
}

#docs {
  border-right: 1px solid var(--border);

  @media (max-width: 1024px) {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}

#next-steps ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 8px;
  margin: 32px 0 0;

  .logo {
    height: 18px;
  }

  a {
    color: var(--text-h);
    font-size: 16px;
    border-radius: 6px;
    background: var(--social-bg);
    display: flex;
    padding: 6px 12px;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: box-shadow 0.3s;

    &:hover {
      box-shadow: var(--shadow);
    }
    .button-icon {
      height: 18px;
      width: 18px;
    }
  }

  @media (max-width: 1024px) {
    margin-top: 20px;
    flex-wrap: wrap;
    justify-content: center;

    li {
      flex: 1 1 calc(50% - 8px);
    }

    a {
      width: 100%;
      justify-content: center;
      box-sizing: border-box;
    }
  }
}

#spacer {
  height: 88px;
  border-top: 1px solid var(--border);
  @media (max-width: 1024px) {
    height: 48px;
  }
}

.ticks {
  position: relative;
  width: 100%;

  &::before,
  &::after {
    content: '';
    position: absolute;
    top: -4.5px;
    border: 5px solid transparent;
  }

  &::before {
    left: 0;
    border-left-color: var(--border);
  }
  &::after {
    right: 0;
    border-right-color: var(--border);
  }
}