/* =====================================================================
   Draco Grills Customiser CSS (v1.25 tidy)
   ---------------------------------------------------------------------
   1) Root & base
   2) Canvas
   3) Bottom bar (blackbox)
   4) Top toolbar
   5) GFX toggle
   6) Modals (generic, cards)
   7) Buttons
   8) Info box (dockable) + content columns
   9) Unit cards (tiles), actions, DnD, fine-tune
  10) Corner limit modal
  11) Busy overlay
  12) Splash
  13) Mobile HUD (<=1100px)
  14) Responsive (tablet 768-1100)
  15) Responsive (mobile <=767) + small tweaks
  16) Mobile tabs (<=900) with single-pane info
  17) Keyframes
   ===================================================================== */

/* ========================= 1) Root & base ========================= */
:root{
  --bg:#e9f3eb;
  --scene-floor-fallback:#dbe0e6; /* matches Babylon floor base tone to hide subpixel seams */
  --panel:#25998b;            /* garden green */
  --panel-border:#1e7c71;     /* darker green */
  --panel-muted:#dfe3e6;      /* soft grey for bottom bar */
  --ink:#0f1115;
  --text:#111;
  --muted:#4b5a4f;
  --accent:#25998b;
  --accent-hover:#1e7c71;
  --ok:#16a34a;
  --bbh:96px;

  /* Tile typography (desktop defaults) */
  --unit-title: 0.95rem;
  --unit-price: 0.90rem;
  --unit-btn:   0.90rem;
}

html,body{
  width:100%; height:100%;
  margin:0; padding:0; overflow:hidden;
  font-family:'Nunito Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial;
  font-size:17px;
  line-height:1.35;
  background:var(--scene-floor-fallback);
}

/* Prevent tap highlight/text selection chrome on touch UIs */
html, body,
#renderCanvas,
.blackbox, .blackbox *,
.toolbar, .toolbar *,
.info-box, .info-box *,
#mobileHUD, #mobileHUD *,
.modal, .modal *,
.unit-card, .unit-card *,
.modal-radio-option, .modal-radio-option *,
img{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}
input, textarea, select, [contenteditable="true"]{
  -webkit-user-select:text;
  user-select:text;
  -webkit-touch-callout:default;
}

/* Small helpers */
#infoBox,.info-box{ overflow-x:hidden; }        /* no stray x-scroll on drawer */
.unit-actions button,.row-actions button{ cursor:pointer; }

/* ========================= 2) Canvas ========================= */
#renderCanvas{
  width:100%;
  height:calc(100vh - 90px);
  touch-action:none;
  outline:none;
}

:root{
  /* dynamic offsets we'll set from JS */
  --ui-top: 0px;           /* height of top toolbar */
  --ui-bottom: 0px;        /* height of bottom bar (blackbox/HUD) */
  --ui-bottom-total: 0px;  /* bottom bar + any docked info box */
  --app-vh: 100dvh;        /* visual viewport height (JS-updated on iPad/Safari) */
}

/* Use JS-updated visual viewport height for iPad/Safari correctness */
#renderCanvas{
  width: 100%;
  height: calc(var(--app-vh, 100dvh) - var(--ui-top) - var(--ui-bottom-total));
  touch-action: none;
  outline: none;
}
/* Keep GT world/background dark behind the transparent Babylon scene. */
body:not(.draco-theme) #renderCanvas{
  background:
    radial-gradient(120% 90% at 50% 48%, #2a3440 0%, #131b24 54%, #070c13 100%);
}
/* On phones, keep the 3D canvas roughly square so it doesn't look
   vertically squashed as bottom UI (blackbox/HUD) grows. */
@media (max-width:1100px){
  #renderCanvas{
    height: min(calc(var(--app-vh, 100dvh) - var(--ui-top) - var(--ui-bottom)), 100vw);
    min-height:300px;
  }
}

/* Let the bottom bars be interactive but not block the rest */
#mobileHUD, .blackbox { pointer-events: none; }
#mobileHUD *, .blackbox * { pointer-events: auto; }


/* ========================= 3) Bottom bar (blackbox) ========================= */
.blackbox{
  position:fixed; inset:auto 0 0 0; min-height:48px;
  display:flex; align-items:center; justify-content:space-around; gap:12px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom)) 12px;
  background:var(--panel-muted);
  border-top:1px solid #c4c9cc;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  z-index:50; overflow-x:auto; overflow-y:visible; white-space:nowrap;
  -webkit-overflow-scrolling:touch;
}
.blackbox img{ width:110px; opacity:.94; flex:0 0 auto; filter: brightness(1.05); }
.blackbox span{ font-size:14px; color:#0f1a0f; margin-right:10px; }
#totalWidthText,#totalDepthText,#totalCostText,#totalSavingsText{ margin-left:6px; }
.blackbox .money{ font-weight:700; color:#0f1a0f; }
.blackbox .savings{
  color:#0d441a; background:#d5ffc0; border:1px dashed #9ad067;
  padding:4px 8px; border-radius:8px;
}
.blackbox button{
  font-size:14px; min-height:44px; min-width:44px; padding:10px 14px; flex:0 0 auto;
  border-radius:12px;
  border:1px solid #bfc5c8;
  background:linear-gradient(145deg,#f6f8f7,#e4e8e6);
  color:#0f1a0f;
  transition:transform .06s ease, background .15s ease, border-color .15s ease, color .15s ease;
  cursor:pointer;
}
.blackbox button:hover{ background:var(--panel); border-color:var(--panel-border); color:#fff; }
.blackbox button:active{ transform:translateY(1px) scale(.98); }
.blackbox .is-disabled{ opacity:.5; cursor:not-allowed; filter:grayscale(.3); }

@media (min-width:1100px) and (max-width:1430px){
  .blackbox{
    flex-wrap:wrap; gap:10px; padding-block:8px;
    white-space:normal; /* allow content to wrap to a second row */
  }
  .blackbox img{ width:100px; }
  .blackbox button{ flex:1 1 calc(33.333% - 12px); text-align:center; }
}

/* ========================= 4) Top toolbar ========================= */
.toolbar{
  position:fixed; top:10px; left:10px; z-index:60;
  display:flex; gap:10px; align-items:center;
  padding:6px 8px;
  background:#ffffffd9; border:1px solid #e5e7eb; border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.toolbar.is-hidden{ display:none !important; }
.toolbar .group{ display:flex; gap:6px; align-items:center; }
.seg{ display:inline-flex; border:1px solid #e5e7eb; border-radius:8px; overflow:hidden; }
.seg button{
  padding:6px 10px; min-height:38px; border:0; background:#fff; cursor:pointer;
  font-size:12px; line-height:1;
}
.seg button.active{ background:var(--accent); color:#fff; }
.toolbar label{ font-size:12px; color:#111; font-weight:600; margin-right:4px; }
.toolbar select{
  font-size:12px; padding:6px 10px; min-height:38px;
  border:1px solid #e5e7eb; border-radius:8px; background:#fff; cursor:pointer;
}
.toolbar .btn{ font-size:12px; min-height:38px; border-radius:10px; }

/* ========================= 5) GFX toggle + camera + measure + birdview ========================= */
.gfx-toggle{
  position:fixed; left:14px; top:10px; z-index:70;
  width:38px; height:38px; border-radius:10px;
  border:1px solid var(--panel-border); background:var(--panel);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  transition:transform .12s ease, background .15s ease, border-color .15s ease;
}
.gfx-toggle:hover{ background:var(--accent-hover); border-color:var(--panel-border); }
.gfx-toggle svg{ width:18px; height:18px; transition:transform .25s ease; color:#f8fff1; filter:brightness(1.1); }
.gfx-toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }
.gfx-toggle svg,
.camera-toggle svg,
.print-toggle svg,
.measure-toggle svg,
.bird-toggle svg,
.share-toggle svg,
.info-toggle svg{
  stroke-width:1.5;
}

.camera-toggle{
  position:fixed; left:14px; top:10px; z-index:70;
  width:38px; height:38px; border-radius:10px;
  border:1px solid var(--panel-border); background:var(--panel);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  transition:transform .12s ease, background .15s ease, border-color .15s ease;
}
.camera-toggle:hover{ background:var(--accent-hover); border-color:var(--panel-border); }
.camera-toggle svg{ width:18px; height:18px; color:#f8fff1; filter:brightness(1.3); }

.print-toggle{
  position:fixed; left:14px; top:58px; z-index:70;
  width:38px; height:38px; border-radius:10px;
  border:1px solid var(--panel-border); background:var(--panel);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  transition:transform .12s ease, background .15s ease, border-color .15s ease;
}
.print-toggle:hover{ background:var(--accent-hover); border-color:var(--panel-border); }
.print-toggle svg{ width:18px; height:18px; color:#f8fff1; filter:brightness(1.3); }

.measure-toggle{
  position:fixed; left:14px; top:106px; z-index:70;
  width:38px; height:38px; border-radius:10px;
  border:1px solid var(--panel-border); background:var(--panel);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  transition:transform .12s ease, background .15s ease, border-color .15s ease;
}
.measure-toggle:hover{ background:var(--accent-hover); border-color:var(--panel-border); }
.measure-toggle svg{ width:18px; height:18px; color:#f8fff1; filter:brightness(1.3); }

.bird-toggle{
  position:fixed; left:14px; top:154px; z-index:70;
  width:38px; height:38px; border-radius:10px;
  border:1px solid var(--panel-border); background:var(--panel);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  transition:transform .12s ease, background .15s ease, border-color .15s ease;
}
.bird-toggle:hover{ background:var(--accent-hover); border-color:var(--panel-border); }
.bird-toggle svg{ width:18px; height:18px; color:#f8fff1; filter:brightness(1.3); }

.share-toggle{
  position:fixed; left:14px; top:202px; z-index:70;
  width:38px; height:38px; border-radius:10px;
  border:1px solid var(--panel-border); background:var(--panel);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  transition:transform .12s ease, background .15s ease, border-color .15s ease;
}
.share-toggle:hover{ background:var(--accent-hover); border-color:var(--panel-border); }
.share-toggle svg{ width:18px; height:18px; color:#f8fff1; filter:brightness(1.3); }

.zoom-controls{
  position:fixed;
  right:14px;
  bottom:43vh;
  left:auto;
  top:auto;
  z-index:70;
  display:flex; flex-direction:column; gap:8px;
}
.zoom-toggle{
  width:32px; height:32px; border-radius:9px;
  border:1px solid var(--panel-border); background:var(--panel);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  transition:transform .12s ease, background .15s ease, border-color .15s ease;
  font-size:15px; font-weight:500; line-height:1; color:#f8fff1;
  position:relative;
}
.zoom-toggle:hover{ background:var(--accent-hover); border-color:var(--panel-border); }

/* Hover labels for 3D environment controls */
.gfx-toggle::after,
.camera-toggle::after,
.print-toggle::after,
.measure-toggle::after,
.bird-toggle::after,
.share-toggle::after,
.info-toggle::after,
.zoom-toggle::after{
  content:attr(title);
  position:absolute;
  top:50%;
  white-space:nowrap;
  padding:5px 8px;
  border-radius:8px;
  font-size:11px;
  font-weight:500;
  line-height:1.05;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .14s ease, transform .14s ease, visibility .14s ease;
  z-index:2;
}
.gfx-toggle::after,
.camera-toggle::after,
.print-toggle::after,
.measure-toggle::after,
.bird-toggle::after,
.share-toggle::after{
  left:calc(100% + 10px);
  transform:translate(-4px,-50%);
}
.info-toggle::after,
.zoom-toggle::after{
  right:calc(100% + 10px);
  transform:translate(4px,-50%);
}
.gfx-toggle:hover::after,
.camera-toggle:hover::after,
.print-toggle:hover::after,
.measure-toggle:hover::after,
.bird-toggle:hover::after,
.share-toggle:hover::after,
.info-toggle:hover::after,
.zoom-toggle:hover::after,
.gfx-toggle:focus-visible::after,
.camera-toggle:focus-visible::after,
.print-toggle:focus-visible::after,
.measure-toggle:focus-visible::after,
.bird-toggle:focus-visible::after,
.share-toggle:focus-visible::after,
.info-toggle:focus-visible::after,
.zoom-toggle:focus-visible::after{
  opacity:1;
  visibility:visible;
}
.gfx-toggle:hover::after,
.camera-toggle:hover::after,
.print-toggle:hover::after,
.measure-toggle:hover::after,
.bird-toggle:hover::after,
.share-toggle:hover::after,
.gfx-toggle:focus-visible::after,
.camera-toggle:focus-visible::after,
.print-toggle:focus-visible::after,
.measure-toggle:focus-visible::after,
.bird-toggle:focus-visible::after,
.share-toggle:focus-visible::after{
  transform:translate(0,-50%);
}
.info-toggle:hover::after,
.zoom-toggle:hover::after,
.info-toggle:focus-visible::after,
.zoom-toggle:focus-visible::after{
  transform:translate(0,-50%);
}

/* Top-right interaction hint rail (slides out from tutorial button) */
#contextHintRail{
  position:fixed;
  top:10px;
  right:58px;
  z-index:72;
  max-width:min(44vw, 460px);
  pointer-events:none;
}
#contextHintBubble{
  padding:7px 10px;
  border-radius:10px;
  font-size:11px;
  font-weight:500;
  line-height:1.2;
  color:#10201d;
  border:1px solid rgba(117, 154, 149, 0.55);
  background:rgba(244, 248, 247, 0.96);
  opacity:0;
  transform:translateX(10px);
  transition:opacity .18s ease, transform .18s ease;
}
#contextHintRail.is-visible #contextHintBubble{
  opacity:1;
  transform:translateX(0);
}

@media (max-width:1100px){
  #contextHintRail{ display:none !important; }
}

@media (max-width:1100px){
  .zoom-controls{
    bottom:calc(var(--ui-bottom) + clamp(44px, 7vh, 84px));
  }
}

.info-toggle{
  position:fixed; right:14px; top:10px; z-index:70;
  width:38px; height:38px; border-radius:10px;
  border:1px solid var(--panel-border); background:var(--panel);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  transition:transform .12s ease, background .15s ease, border-color .15s ease;
}
.info-toggle:hover{ background:var(--accent-hover); border-color:var(--panel-border); }
.info-toggle svg{ width:18px; height:18px; color:#f8fff1; filter:brightness(1.3); }

.modal-radio-option .unit-dims{
  margin-top:4px;
  font-size:14px;
  color:#111;
  opacity:.8;
}

.measure-hud{
  position:fixed; top:10px; right:14px; z-index:65;
  padding:8px 12px;
  border-radius:10px;
  background:rgba(255,255,255,0.96);
  border:1px solid #e5e7eb;
  box-shadow:0 8px 24px rgba(0,0,0,.10);
  font-size:14px;
  color:#111;
  display:none;
  gap:8px;
  align-items:center;
}

/* ========================= 6) Modals ========================= */
.modal{
  display:none; position:fixed; inset:0; z-index:1000;
  overflow:hidden; overflow-x:hidden; background:rgba(0,0,0,.35);
}
.modal-content{
  font-size:18px; background:#fff; margin:0; padding:0; border:0;
  width:100%; max-width:100vw; min-height:100dvh; height:100dvh;
  text-align:left; border-radius:0; overflow:hidden; overflow-x:hidden;
  box-sizing:border-box;
  box-shadow:none;
  /* make footer sticky by turning the content into a column layout */
  display:flex; flex-direction:column; max-height:100dvh;
}
.modal-header{
  padding:18px 22px; border-bottom:1px solid #e5e7eb;
  display:flex; align-items:center; justify-content:space-between;
}
.modal-header h2{ margin:0; font-size:26px; }
.modal-body{
  padding:18px 22px;
  font-size:18px;
  line-height:1.5;
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
}
.modal-footer{
  padding:14px 22px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid #e5e7eb;
  display:flex; justify-content:center; gap:10px;
  position:sticky; bottom:4px; z-index:3;
  background:#fff;
}
.modal-footer .btn{ font-size:17px; }
.modal-footer.add-buttons{
  flex-wrap:wrap;
  row-gap:8px;
}

#rangeModal #confirmRangeButton,
#bbqModal #confirmBBQChangeButton{
  background:#fff;
  border-color:#e5e7eb;
  color:#111;
}
#rangeModal #confirmRangeButton.is-next-step,
#bbqModal #confirmBBQChangeButton.is-next-step{
  background:var(--accent) !important;
  border-color:var(--accent) !important;
  color:#fff !important;
  text-shadow:0 1px 0 rgba(0,0,0,.15);
  box-shadow:0 8px 22px rgba(37,153,139,.28);
}
#rangeModal #confirmRangeButton.is-next-step:hover,
#bbqModal #confirmBBQChangeButton.is-next-step:hover{
  background:var(--accent-hover) !important;
  border-color:var(--accent-hover) !important;
}

/* Tutorial modal tweaks */
.tutorial-modal-content {
  max-width: none;
}
.tutorial-slide {
  min-height: 180px;
}
.tutorial-footer {
  justify-content: space-between;
  align-items: center;
}
.tutorial-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}
.tutorial-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #d1d5db;
}
.tutorial-dots .dot.is-active {
  background: #111827;
}
.tutorial-actions-right{
  display:flex;
  gap:8px;
  align-items:center;
}
.faq-body h3{
  margin:14px 0 6px;
  font-size:19px;
}
.faq-body p{
  margin:0 0 12px;
  font-size:17px;
  line-height:1.55;
  color:#111;
}
.closeButton{
  color:#9ca3af; font-size:26px; font-weight:bold; line-height:1; cursor:pointer;
}
.closeButton:hover{ color:#111; }

/* Share QR modal */
#shareQrModal .share-qr-modal-content{
  align-items:stretch;
}
#shareQrModal .share-qr-body{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
  padding-top:24px;
}
#shareQrModal .share-qr-copy{
  margin:0;
  font-size:18px;
  font-weight:600;
}
#shareQrModal #shareQrImage{
  width:min(56vw, 320px);
  min-width:180px;
  aspect-ratio:1 / 1;
  object-fit:contain;
  padding:10px;
  border-radius:12px;
  border:1px solid #d2d9e3;
  background:#fff;
}
#shareQrModal .share-qr-link{
  display:block;
  max-width:min(960px, 96vw);
  padding:8px 10px;
  border-radius:10px;
  border:1px solid #dde4ee;
  background:#f8fafc;
  color:#1f2937;
  font-size:12px;
  line-height:1.35;
  text-decoration:none;
  word-break:break-all;
}
#shareQrModal .share-qr-link:hover{
  border-color:#bec9d8;
  background:#f4f7fb;
}
#shareQrModal .share-qr-help{
  margin:0;
  font-size:14px;
  opacity:.82;
}
#shareQrModal .share-qr-footer{
  justify-content:center;
  flex-wrap:wrap;
}
#shareQrModal .share-qr-footer .btn{
  min-width:172px;
}

/* Modal option grid */
.modal-radio{
  display:grid; gap:22px; align-items:stretch;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}
.modal-radio-option{
  position:relative; display:flex; flex-direction:column; align-items:stretch;
  min-width:200px;
  min-height:300px;
  padding:10px 10px 12px;
  border:1px solid #e2e5ea; border-radius:10px; background:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.04) inset;
  transition:box-shadow .15s ease, transform .12s ease; text-align:center; transform:scale(0.96);
}
.modal-radio-option:hover{ box-shadow:0 8px 24px rgba(0,0,0,.08); transform:translateY(-1px) scale(0.98); background:#fafafa; cursor:pointer; }
.modal-radio-option.selected{ box-shadow:0 0 0 2px var(--accent) inset; border-color:transparent; transform:scale(0.99); z-index:1; }
.modal-radio-option.selected::before{
  content:"Selected";
  position:absolute;
  top:-10px;
  left:50%;
  transform:translateX(-50%);
  width:auto;
  min-width:92px;
  padding:0 10px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:var(--accent);
  color:#fff;
  font-size:12px;
  font-weight:800;
  line-height:1;
  z-index:2;
  pointer-events:none;
  box-shadow:0 4px 10px rgba(0,0,0,.16);
}
.modal-radio-option.selected[data-order]:not([data-order=""])::before{
  content:"Selected " attr(data-order);
}
.modal-radio-option.is-locked{ opacity:.55; filter:grayscale(.3); cursor:not-allowed; }
.modal-radio-option .img{
  width:100%; aspect-ratio:1/1; object-fit:contain; margin:0 0 10px; border-radius:10px;
  flex:0 0 auto;
}
.modal-radio-option .click{
  display:flex; gap:6px; align-items:flex-start; justify-content:center;
  min-height:3.75em;
  padding-inline:8px;
}
.modal-radio-option .click label{
  display:block;
  font-size:17px;
  font-weight:700;
  line-height:1.25;
  min-height:3.75em; /* reserve room for up to three title lines */
  max-height:3.75em;
  overflow:hidden;
}
.modal-radio-option .unit-dims{
  margin-top:6px;
  padding-inline:8px;
  font-size:12px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.modal-radio-option .price-line{
  margin-top:auto;
  padding-inline:8px;
  font-size:14px;
  line-height:1.3;
  min-height:2.6em;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.modal-radio-option .price-line .savings{
  color:var(--accent);
}
.price-line{ margin-top:6px; font-size:13px; }

/* ========================= 7) Buttons ========================= */
.btn{
  padding:8px 12px; border-radius:10px; font-weight:600;
  border:1px solid #e5e7eb; background:#fff; color:#111; cursor:pointer;
  transition:transform .06s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{ background:#f8fafc; }
.btn:active{ transform:translateY(1px) scale(.98); }
.btn-primary{
  background:var(--accent); color:#fff; border:1px solid var(--accent);
  text-shadow:0 1px 0 rgba(0,0,0,.15);
}
.btn-primary:hover{ background:var(--accent-hover); border-color:var(--accent-hover); }
.btn-danger{ background:#fee2e2; color:#b91c1c; border-color:#fecaca; }
button:disabled,.btn:disabled,.is-disabled{ opacity:.45; cursor:not-allowed; filter:grayscale(.3); }

/* ========================= 8) Info box (dockable) + content ========================= */
.info-box{
  position:fixed; right:0; top:8vh; bottom:120px; width:420px;
  display:flex; flex-direction:column; text-align:left;
  padding:0 6px 16px;
  overflow-y:auto; overscroll-behavior:contain;
  background:#fff; border-radius:12px 0 0 12px;
  box-shadow:-8px 16px 32px rgba(0,0,0,.12);
  z-index:40;
}
.info-box.hidden{ right:-250px; display:none; }

.hide-button,.dock-button{
  position:absolute; top:8px; width:32px; height:32px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid #d1d5db; border-radius:8px; cursor:pointer; font-size:0; z-index:2;
}
.hide-button{ right:35px; }
.dock-button{ right:75px; }
.hide-button::before{ content:"\1F441"; font-size:18px; }
.dock-button::before{ content:"\2014"; font-size:18px; }

.info-content{
  display:flex; gap:8px; justify-content:stretch; align-items:stretch; margin-bottom:-18px;
}
.info-content h3, #hideButton, #dockToggle{ display:none; }

#leftUnits,#rightUnits,#bbqInfo{ min-width:0; }
#leftUnits{  flex:1 1 0; max-width:none; display:flex; justify-content:flex-end; }
#rightUnits{ flex:1 1 0; max-width:none; }
#bbqInfo{   flex:0 0 clamp(148px, 13vw, 210px); max-width:clamp(148px, 13vw, 210px); }

.info-section{
  margin:10px 0 12px; padding:10px 12px 8px;
  background:#fff; border:1px solid #e2e5ea; border-radius:12px;
  box-shadow:0 1px 0 rgba(0,0,0,.04) inset, 0 6px 18px rgba(0,0,0,.04);
}
.info-section h3{ margin:0 0 8px; font-size:15px; font-weight:800; color:var(--ink); }

/* Remove lane "container" chrome so card strips use the available width */
#leftUnits.info-section,
#rightUnits.info-section,
#bbqInfo.info-section{
  margin:6px 0 8px;
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}

/* List container vs. inner scroller */
#leftUnitsList,#rightUnitsList,#bbqModel{
  overflow:hidden; padding-left:0; margin-block:0;
}
#leftUnitsList .columns-scroller,
#rightUnitsList .columns-scroller,
  #bbqModel .columns-scroller{
    width:100%;
    display:flex; gap:10px; overflow-x:auto; overflow-y:hidden; padding-bottom:6px;
    scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
  }
  #rightUnitsList .unit-card,
  #leftUnitsList .unit-card{
    padding-bottom:25px;
  }
#bbqModel .columns-scroller{ justify-content:center; }

/* Slimmer "Add to Left/Right" cards in kitchen info strip */
#leftUnitsList .unit-card.add-card:not(.missing-swap-card),
#rightUnitsList .unit-card.add-card:not(.missing-swap-card){
  width:96px;
  min-width:90px;
  max-width:100px;
  min-height:146px;
  padding:4px 3px;
  gap:6px;
}
#leftUnitsList .unit-card.add-card:not(.missing-swap-card) .add-plus,
#rightUnitsList .unit-card.add-card:not(.missing-swap-card) .add-plus{
  font-size:24px;
  line-height:1;
}
#leftUnitsList .unit-card.add-card:not(.missing-swap-card) .add-label,
#rightUnitsList .unit-card.add-card:not(.missing-swap-card) .add-label{
  font-size:11px;
  line-height:1.2;
  white-space:normal;
  text-align:center;
}

/* Card-strip scrollbar polish (desktop + mobile HUD) */
body:not(.draco-theme){
  --card-scroll-track: transparent;
  --card-scroll-thumb: rgba(170,176,184,0.78);
  --card-scroll-thumb-hover: rgba(188,194,202,0.96);
  --card-scroll-arrow-bg: rgba(232,235,240,0.92);
  --card-scroll-arrow-fg: rgba(128,136,145,0.96);
}
body.draco-theme{
  --card-scroll-track: transparent;
  --card-scroll-thumb: rgba(180,186,198,0.62);
  --card-scroll-thumb-hover: rgba(202,208,220,0.86);
  --card-scroll-arrow-bg: rgba(32,40,54,0.92);
  --card-scroll-arrow-fg: rgba(206,214,230,0.94);
}
#leftUnitsList .columns-scroller,
#rightUnitsList .columns-scroller,
#bbqModel .columns-scroller,
#mobileHUD .columns-scroller{
  scrollbar-width: thin;
  scrollbar-color: var(--card-scroll-thumb) var(--card-scroll-track);
  scrollbar-gutter: stable both-edges;
  padding-bottom:12px;
}
#leftUnitsList .columns-scroller::-webkit-scrollbar,
#rightUnitsList .columns-scroller::-webkit-scrollbar,
#bbqModel .columns-scroller::-webkit-scrollbar,
#mobileHUD .columns-scroller::-webkit-scrollbar{
  height:12px;
}
#leftUnitsList .columns-scroller::-webkit-scrollbar-track,
#rightUnitsList .columns-scroller::-webkit-scrollbar-track,
#bbqModel .columns-scroller::-webkit-scrollbar-track,
#mobileHUD .columns-scroller::-webkit-scrollbar-track{
  background:var(--card-scroll-track);
  border-radius:999px;
}
#leftUnitsList .columns-scroller::-webkit-scrollbar-thumb,
#rightUnitsList .columns-scroller::-webkit-scrollbar-thumb,
#bbqModel .columns-scroller::-webkit-scrollbar-thumb,
#mobileHUD .columns-scroller::-webkit-scrollbar-thumb{
  background:var(--card-scroll-thumb);
  border-radius:999px;
  border:3px solid transparent;
  background-clip:padding-box;
}
#leftUnitsList .columns-scroller:hover::-webkit-scrollbar-thumb,
#rightUnitsList .columns-scroller:hover::-webkit-scrollbar-thumb,
#bbqModel .columns-scroller:hover::-webkit-scrollbar-thumb,
#mobileHUD .columns-scroller:hover::-webkit-scrollbar-thumb{
  background:var(--card-scroll-thumb-hover);
}
#leftUnitsList .columns-scroller::-webkit-scrollbar-button:horizontal:decrement,
#rightUnitsList .columns-scroller::-webkit-scrollbar-button:horizontal:decrement,
#bbqModel .columns-scroller::-webkit-scrollbar-button:horizontal:decrement,
#mobileHUD .columns-scroller::-webkit-scrollbar-button:horizontal:decrement,
#leftUnitsList .columns-scroller::-webkit-scrollbar-button:horizontal:increment,
#rightUnitsList .columns-scroller::-webkit-scrollbar-button:horizontal:increment,
#bbqModel .columns-scroller::-webkit-scrollbar-button:horizontal:increment,
#mobileHUD .columns-scroller::-webkit-scrollbar-button:horizontal:increment{
  width:16px;
  height:12px;
  background-color:var(--card-scroll-arrow-bg);
  border-radius:10px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:9px 9px;
}
#leftUnitsList .columns-scroller::-webkit-scrollbar-button:horizontal:decrement,
#rightUnitsList .columns-scroller::-webkit-scrollbar-button:horizontal:decrement,
#bbqModel .columns-scroller::-webkit-scrollbar-button:horizontal:decrement,
#mobileHUD .columns-scroller::-webkit-scrollbar-button:horizontal:decrement{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M9.2 2.6 4.8 7l4.4 4.4' fill='none' stroke='%23808891' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
#leftUnitsList .columns-scroller::-webkit-scrollbar-button:horizontal:increment,
#rightUnitsList .columns-scroller::-webkit-scrollbar-button:horizontal:increment,
#bbqModel .columns-scroller::-webkit-scrollbar-button:horizontal:increment,
#mobileHUD .columns-scroller::-webkit-scrollbar-button:horizontal:increment{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M4.8 2.6 9.2 7l-4.4 4.4' fill='none' stroke='%23808891' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.draco-theme #leftUnitsList .columns-scroller::-webkit-scrollbar-button:horizontal:decrement,
body.draco-theme #rightUnitsList .columns-scroller::-webkit-scrollbar-button:horizontal:decrement,
body.draco-theme #bbqModel .columns-scroller::-webkit-scrollbar-button:horizontal:decrement,
body.draco-theme #mobileHUD .columns-scroller::-webkit-scrollbar-button:horizontal:decrement{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M9.2 2.6 4.8 7l4.4 4.4' fill='none' stroke='%23ced6e6' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.draco-theme #leftUnitsList .columns-scroller::-webkit-scrollbar-button:horizontal:increment,
body.draco-theme #rightUnitsList .columns-scroller::-webkit-scrollbar-button:horizontal:increment,
body.draco-theme #bbqModel .columns-scroller::-webkit-scrollbar-button:horizontal:increment,
body.draco-theme #mobileHUD .columns-scroller::-webkit-scrollbar-button:horizontal:increment{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M4.8 2.6 9.2 7l-4.4 4.4' fill='none' stroke='%23ced6e6' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ========================= 9) Unit cards, actions, DnD, fine-tune ========================= */
.unit-card{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  width:180px; min-width:180px; max-width:180px; min-height:195px;
  padding:5px; text-align:center;
  border:1px solid #e5e7eb; border-radius:14px; background:#fff;
  transition:box-shadow .2s ease; cursor:grab;
}
.unit-card:hover{ box-shadow:0 3px 12px rgba(0,0,0,.08); }
.unit-card:active{ cursor:grabbing; }

.unit-thumb{
  width:120px; height:120px; object-fit:contain;
  border-radius:10px; background:#f7f7f7; border:1px solid rgba(0,0,0,.05);
}

.unit-title{ font-weight:600; font-size:14px; line-height:1.2; min-height:2.2em; }
.unit-title a{ color:inherit; text-decoration:none; }
.unit-badge{ font-size:12px; font-weight:400; color:#777; display:none; }

.unit-actions{
  height:32px; min-height:32px;
  display:none; gap:6px; justify-content:center; align-items:center;
  margin-top:auto;
  opacity:1; transition:opacity .18s ease;
}
.unit-actions button{
  height:32px; min-height:32px; min-width:32px;
  padding:0 8px;
  display:inline-flex; align-items:center; justify-content:center;
  line-height:1;
  border-radius:8px; border:1px solid rgba(0,0,0,.08);
  background:#fafafa;
}
.unit-actions button:not(.icon-only){ font-size:16px; }
.unit-actions button:hover{ filter:brightness(0.98); }
.unit-actions button:disabled{ opacity:.4; }

.price-line{
  min-height:32px; font-size:13px; margin-top:auto;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  opacity:1; transition:opacity .18s ease;
}
.price-line .compare{
  color:#dc2626; text-decoration:line-through; opacity:.8; font-weight:500;
}
.price-line .sale{ font-weight:700; font-size:14px; }
.price-line .savings{ color:#16a34a; font-weight:600; font-size:12px; }
.unit-card .price-line .savings{ display:none; } /* keep savings in modals, hide in strip cards */

@media (hover:hover){
  .unit-card:hover .unit-actions{ display:flex; visibility:visible; opacity:1; }
  .unit-card:hover .price-line{ display:none; visibility:hidden; opacity:0; }
}
.unit-card.is-expanded .unit-actions{ display:flex; visibility:visible; opacity:1; }
.unit-card.is-expanded .price-line{ display:none; visibility:hidden; opacity:0; }

/* Make BBQ card follow same sizing */
.unit-card.bbq-card,
.unit-card.bbq-card:active{
  cursor:default;
}
.bbq-card .unit-thumb{ width:120px; height:120px; }
.bbq-card .unit-thumb{ cursor:pointer; }
.bbq-card .unit-actions{ display:none !important; }
.bbq-card .price-line{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
}
@media (hover:hover){
  .bbq-card:hover .unit-actions{ display:none !important; }
  .bbq-card:hover .price-line{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
  }
}

.bbq-card .unit-title{
    padding-inline:4px;
    min-height:3.2em;            /* allow 2 lines without crowding */
  }
.bbq-card .price-line{
    margin-top:6px;              /* align below multi-line titles */
    height:auto;                 /* avoid clipping BBQ titles/prices */
  }

/* Drag state + ghost + placeholder */
body.is-dnd .unit-card{ box-shadow:none !important; transform:none !important; }
body.is-dnd *{ user-select:none; cursor:grabbing !important; }

.dnd-ghost{
  position:fixed; left:0; top:0; transform:translate(-50%,-50%);
  pointer-events:none; z-index:9999; opacity:.98;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  border-radius:14px; background:#fff;
}
.unit-card.placeholder{
  border:2px dashed #0b6ecb;
  background:#e8f4ff;
  opacity:0.6;
  box-shadow:none !important; min-height:120px;
  box-sizing:border-box; flex:0 0 auto !important;
}
/* (When used as a true ghost element) */
.unit-card.dnd-ghost{
  position:fixed !important; z-index:4000 !important; pointer-events:none !important;
  transform:translate(-50%,-30%) scale(1.02) !important;
  box-shadow:0 12px 30px rgba(0,0,0,.25) !important; opacity:.98; cursor:grabbing;
}

/* Fine-tune row */
.tune-row{ display:none; grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr) auto; gap:8px; align-items:center; }
body.show-tunes .tune-row{ display:grid; }
.tune-cell{ display:grid; grid-template-columns:auto 1fr auto; gap:6px; align-items:center; }
.tune-cell input{
  width:100%; padding:8px 10px; border:1px solid #e5e7eb; border-radius:10px; font-size:14px;
}
.tune-cell .step{
  width:38px; height:38px; border:1px solid #e5e7eb; border-radius:10px;
  background:#fff; cursor:pointer; font-size:18px; line-height:1;
}
.tune-cell .step:hover{ background:#f3f4f6; }
.btn-treset{
  margin-left:auto; border:1px dashed #e5e7eb; background:#fff; color:#444;
  font-size:12px; padding:6px 10px; border-radius:10px; cursor:pointer;
}
.btn-treset:hover{ background:#f3f4f6; }

/* ========================= 10) Corner limit modal ========================= */
#cornerLimitModal .modal-content{ width:100%; max-width:none; }

/* ========================= 11) Busy overlay ========================= */
#busyOverlay{
  position:fixed; inset:0; z-index:9999; display:none;
  align-items:center; justify-content:center;
  background:rgba(255,255,255,0.6); backdrop-filter:blur(2px);
}
#busyOverlay .busy-box{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:16px 20px; border-radius:12px; background:#ffffffd9;
  box-shadow:0 10px 30px rgba(0,0,0,.15); border:1px solid #e5e7eb;
}
#busyOverlay .spinner{
  width:28px; height:28px; border-radius:50%;
  border:3px solid #cbd5e1; border-top-color:var(--accent); animation:spin .8s linear infinite;
}
#busyOverlay .busy-text{ font-size:14px; color:#111827; }

.model-load-hint{
  position:fixed;
  top:calc(env(safe-area-inset-top) + 10px);
  left:50%;
  transform:translateX(-50%);
  z-index:1600;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:118px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.45);
  background:rgba(248,250,252,0.92);
  color:#1f2937;
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.model-load-hint.is-visible{
  opacity:1;
  animation:modelLoadPulse 1.35s ease-in-out infinite;
}

/* ========================= 12) Splash ========================= */
#splash{
  position:fixed; inset:0; z-index:1200; display:flex;
  align-items:stretch; justify-content:stretch; padding:0; background:#0b1220;
  overflow:hidden;
  overscroll-behavior:none;
}
#splash::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 20% 20%, rgba(14,177,172,.18), rgba(14,177,172,0) 36%),
    linear-gradient(180deg, #0b1220, #101827 54%, #0f1a2d);
}
#splash::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 82% 18%, rgba(59,130,246,.12), rgba(59,130,246,0) 28%),
    linear-gradient(180deg, rgba(8,15,24,.12), rgba(8,15,24,.28));
}
.splash-card{
  position:relative;
  z-index:1;
  width:100vw;
  height:100dvh;
  max-width:none;
  max-height:none;
  padding:clamp(22px, 3vw, 34px);
  box-sizing:border-box;
  border-radius:0;
  overflow:auto;
  overflow-x:hidden;
  border:0;
  background:#0f172a;
  box-shadow:0 26px 66px rgba(0,0,0,.42);
}
.splash-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:url('/DracoImages/DracoSplashBackground.jpg') center/cover no-repeat;
  opacity:.98;
}
.splash-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(7,13,20,.44) 0%, rgba(7,13,20,.24) 46%, rgba(7,13,20,.52) 100%),
    radial-gradient(circle at 18% 22%, rgba(14,177,172,.18), rgba(14,177,172,0) 36%);
}
.splash-layout{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  width:100%;
  min-height:100%;
}
.splash-copy{
  width:min(100%, 760px);
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-start;
  gap:16px;
  color:#f8fafc;
  text-align:left;
  padding:clamp(22px, 2.8vw, 30px);
  border-radius:22px;
  background:linear-gradient(180deg, rgba(7,13,20,.52), rgba(7,13,20,.28));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 20px 44px rgba(0,0,0,.24);
  margin:clamp(54px, 9vh, 110px) 0 clamp(16px, 4vh, 34px) clamp(8px, 1vw, 18px);
}
.splash-brand-row{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.splash-brand-logo{
  width:auto;
  max-width:46%;
  max-height:clamp(34px, 5vw, 58px);
  height:auto;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.3));
}
.splash-kicker{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#d9fff6;
  background:rgba(14,177,172,.16);
  border:1px solid rgba(94,234,212,.28);
}
.splash-title{
  margin:0;
  font-family:'Montserrat','Nunito Sans',sans-serif;
  font-size:clamp(34px, 5.8vw, 72px);
  line-height:.96;
  letter-spacing:-.04em;
  font-weight:800;
  text-wrap:balance;
}
.splash-sub{
  max-width:42ch;
  font-size:clamp(15px, 1.7vw, 21px);
  line-height:1.45;
  color:rgba(241,245,249,.94);
}
.splash-welcome{
  max-width:56ch;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.3);
  background:linear-gradient(160deg, rgba(15,23,42,.5), rgba(8,15,24,.72));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  font-size:15px;
  line-height:1.6;
  color:#e5eefb;
}
.splash-points{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.splash-point{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.03em;
  color:#e8f5ff;
  background:rgba(12,22,36,.46);
  border:1px solid rgba(148,163,184,.24);
}
.splash-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 14px;
}
.splash-ver{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
  color:rgba(241,245,249,.92);
}
.splash-copyright{
  font-size:11px;
  letter-spacing:.06em;
  color:rgba(226,232,240,.86);
}
.splash-panel{
  width:100%;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
  margin-top:auto;
  padding:18px 0 0;
  border-top:1px solid rgba(148,163,184,.26);
  display:flex;
  flex-direction:column;
  gap:12px;
  color:#f8fafc;
  text-align:left;
}
.splash-panel-title{
  font-family:'Montserrat','Nunito Sans',sans-serif;
  font-size:clamp(22px, 2.3vw, 30px);
  line-height:1.05;
  font-weight:800;
  letter-spacing:-.03em;
}
.splash-panel-copy{
  font-size:14px;
  line-height:1.55;
  color:rgba(226,232,240,.9);
}
.splash-panel-copy-ready{ display:none; }
.splash-panel-copy-needs{ display:block; }
.splash-lead{
  width:100%;
  box-sizing:border-box;
  margin:0;
  text-align:left;
  font-size:13px;
  padding:0;
  border-radius:0;
  border:0;
  background:none;
}
.splash-lead-copy{ margin:0 0 10px; color:#e5e7eb; line-height:1.55; }
.splash-lead-copy a{
  color:#f8fafc;
  text-decoration:underline;
  text-underline-offset:2px;
}
.splash-lead-copy a:hover{ opacity:.88; }
.splash-lead-fields{ display:flex; flex-direction:column; gap:10px; width:100%; min-width:0; }
.splash-lead-fields input{
  width:100%; max-width:100%; min-width:0; box-sizing:border-box;
  min-height:46px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(148,163,184,.9);
  background:rgba(255,255,255,.96);
  color:#0f172a;
  font-size:14px;
}
.splash-actions{
  margin-top:auto;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}
.splash-actions .btn{
  width:100%;
  justify-content:center;
}
.splash-actions .btn-primary{
  font-size:15px;
  padding:11px 14px;
}
#splash:not(.has-lead) .splash-panel{
  justify-content:flex-end;
}
#splash.has-lead .splash-panel-copy-ready{ display:none; }
#splash.has-lead .splash-panel-copy-needs{ display:block; }
#splash:not(.has-lead) .splash-panel-copy-ready{ display:block; }
#splash:not(.has-lead) .splash-panel-copy-needs{ display:none; }
@media (max-width:960px){
  .splash-card{
    padding:16px;
  }
  .splash-card::after{
    background:
      linear-gradient(180deg, rgba(7,13,20,.46), rgba(7,13,20,.42)),
      radial-gradient(circle at 20% 18%, rgba(14,177,172,.16), rgba(14,177,172,0) 40%);
  }
  .splash-layout{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100%;
  }
  .splash-copy{
    align-items:center;
    text-align:center;
    width:min(100%, 620px);
    margin:auto;
  }
  .splash-copy{
    background:linear-gradient(180deg, rgba(7,13,20,.44), rgba(7,13,20,.22));
  }
  .splash-sub,
  .splash-welcome{
    max-width:100%;
    text-align:center;
  }
  .splash-points,
  .splash-meta,
  .splash-brand-row{
    justify-content:center;
  }
  .splash-panel{
    width:100%;
  }
}
@media (max-width:640px){
  #splash{
    padding:0;
  }
  .splash-card{
    padding:14px;
  }
  .splash-copy{
    width:min(100%, 560px);
    padding:12px;
    margin:auto;
    border-radius:16px;
  }
  .splash-brand-row{
    gap:12px;
  }
  .splash-brand-logo{
    max-width:44%;
    max-height:30px;
  }
  .splash-title{
    font-size:clamp(30px, 10vw, 48px);
  }
  .splash-sub{
    font-size:14px;
  }
  .splash-welcome{
    padding:12px 14px;
    font-size:14px;
  }
  .splash-panel{
    padding:14px 0 0;
  }
  .splash-panel-title{
    font-size:24px;
  }
  .splash-actions{
    grid-template-columns:1fr;
  }
}
@media (max-width:480px){
  .splash-card{
    padding:12px;
  }
  .splash-copy{
    width:100%;
    margin:auto;
    padding:10px;
    gap:12px;
  }
  .splash-kicker{
    min-height:28px;
    padding:0 10px;
    font-size:10px;
    letter-spacing:.14em;
  }
  .splash-title{
    font-size:clamp(26px, 9vw, 38px);
  }
  .splash-sub,
  .splash-panel-copy,
  .splash-lead-copy{
    font-size:12px;
    line-height:1.45;
  }
  .splash-welcome{
    padding:10px 12px;
    font-size:12px;
    line-height:1.45;
  }
  .splash-points{
    gap:6px;
  }
  .splash-point{
    min-height:28px;
    padding:0 10px;
    font-size:10px;
  }
  .splash-meta{
    gap:6px 10px;
  }
  .splash-ver{
    font-size:10px;
    letter-spacing:.12em;
  }
  .splash-copyright{
    font-size:9px;
  }
  .splash-panel{
    padding:12px 0 0;
    gap:10px;
  }
  .splash-panel-title{
    font-size:20px;
  }
  .splash-lead-fields{
    gap:6px;
  }
  .splash-lead-fields input{
    min-height:38px;
    padding:8px 10px;
    font-size:13px;
  }
}
@media (max-width:960px) and (orientation:landscape){
  .splash-card{
    padding:12px 14px;
  }
  .splash-copy{
    width:min(100%, 980px);
    margin:34px 0 0;
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(280px, 320px);
    align-items:start;
    gap:10px 18px;
  }
  .splash-brand-row,
  .splash-kicker,
  .splash-title,
  .splash-sub,
  .splash-welcome,
  .splash-points,
  .splash-meta{
    grid-column:1;
    text-align:left;
    justify-content:flex-start;
  }
  .splash-panel{
    grid-column:2;
    grid-row:2 / span 6;
    margin-top:0;
    padding:0 0 0 18px;
    border-top:0;
    border-left:1px solid rgba(148,163,184,.26);
  }
  .splash-title{
    font-size:clamp(28px, 4.4vw, 42px);
  }
  .splash-sub,
  .splash-panel-copy,
  .splash-lead-copy{
    font-size:13px;
  }
  .splash-welcome{
    font-size:13px;
    line-height:1.5;
    padding:10px 12px;
  }
  .splash-points{
    gap:8px;
  }
  .splash-point{
    min-height:30px;
    font-size:11px;
  }
  .splash-brand-logo{
    height:38px;
    max-width:44%;
  }
  .splash-lead-fields{
    gap:8px;
  }
  .splash-lead-fields input{
    min-height:40px;
    padding:8px 10px;
  }
}
@media (max-height:880px){
  .splash-card{ padding:16px; }
  .splash-welcome{ font-size:14px; }
}
@media (max-height:760px){
  .splash-card{ padding:14px; }
  .splash-brand-logo{ height:34px; max-width:44%; }
  .splash-title{ font-size:clamp(28px, 5vw, 56px); }
  .splash-point{ min-height:30px; font-size:11px; }
  .splash-panel-copy,
  .splash-lead-copy{ font-size:13px; }
  .splash-lead-fields{ gap:8px; }
  .splash-lead-fields input{ min-height:42px; padding:8px 10px; }
}
@media (max-height:680px){
  .splash-card{ padding:12px; }
  .splash-kicker{ min-height:28px; font-size:11px; }
  .splash-title{ font-size:clamp(26px, 4.5vw, 46px); }
  .splash-sub,
  .splash-panel-copy{ font-size:13px; }
  .splash-welcome{ font-size:13px; line-height:1.5; }
  .splash-meta{ gap:6px 12px; }
  .splash-ver{ font-size:11px; }
  .splash-copyright{ font-size:10px; }
}

/* ========================= 13) Mobile HUD (<=1100px) ========================= */
@media (max-width:1100px){
  /* Tablet/mobile layout: keep canvas fit driven by --ui-top/--ui-bottom
     and use mobile HUD as the only Kitchen Info surface. */
  #renderCanvas{
      transform: none;
  }
  /* When the mobile Kitchen Info HUD is hidden, let the 3D scene use the
     full available height above the bottom action bar (don't cap to square). */
  body.mobile-info-hidden #renderCanvas{
      height: calc(var(--app-vh, 100dvh) - var(--ui-top) - var(--ui-bottom));
      min-height:300px;
  }
  /* On tablet/mobile, use the mobile HUD only for Kitchen Info.
     Prevent desktop and mobile info panels showing together. */
  #infoBox,
  .info-box{
    display:none !important;
  }
  /* If/when #mobileHUD exists in the DOM, you can opt-in to showing it here:
     #mobileHUD{ display:flex !important; } */

  /* Bottom bar on tablet/mobile: keep only the primary actions visible */
  .blackbox #changeBBQButton,
  .blackbox #addUnitButton,
  .blackbox #rangeButton,
  .blackbox #undoButton{
    display:none !important;
  }
  .blackbox #addToBasketButton,
  .blackbox #showInfoButton{
    display:inline-flex !important;
    flex:1 1 calc(50% - 8px);
  }
  /* Keep Show/Hide Info left and Basket right consistently */
  .blackbox #showInfoButton{ order:1; }
  .blackbox #addToBasketButton{ order:2; }

  /* Mobile HUD actions row: show only Hide/Show Info + Basket.
     Secondary actions move to the fullscreen hamburger menu. */
  #mobileHUD #mhChangeRange,
  #mobileHUD #mhAddUnit,
  #mobileHUD #mhMenuToggle,
  #mobileHUD #mhMenu{
    display:none !important;
  }
  #mobileHUD #mhInfoMain,
  #mobileHUD #mhBasketMain{
    display:inline-flex !important;
  }
  #mobileHUD .mh-actions{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
  #mobileHUD #mhBasketMain{
    grid-column:auto;
  }
}

/* Keep HUD hidden on desktop */
@media (min-width:1101px){
  #mobileHUD{ display:none !important; }
}

#mobileHUD{
  position:fixed; inset:auto 0 0 0; z-index:80; display:none;
  flex-direction:column; gap:8px;
  padding:10px 12px calc(12px + env(safe-area-inset-bottom));
  background:var(--panel-muted); border-top:1px solid #c4c9cc;
  box-shadow:0 -12px 30px rgba(0,0,0,.12);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-size:26px; color:#0f1a0f;
}

#mobileHUD .mh-summary{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px 10px; align-items:center; text-align:center; font-size:0.8rem;color:#0f1a0f;
}
#mobileHUD .mh-summary .money{ font-weight:800; }
#mobileHUD .mh-summary .savings{
  color:#0d441a; background:#d5ffc0; border:1px dashed #9ad067;
  padding:4px 8px; border-radius:8px;
}
#mobileHUD .mh-tabs{ display:grid; grid-auto-flow:column; gap:8px; justify-content: space-evenly;}
#mobileHUD .mh-tabs button{
  border-radius:5px; border:1px solid #bfc5c8;
  background:#e7ebed; font-weight:600; cursor:pointer; font-size:18px;padding: 5px 10vw;color:#0f1a0f;
}
#mobileHUD .mh-tabs button[aria-selected="true"]{
  background:var(--panel); color:#fff; border:1px solid var(--panel-border);
}
#mobileHUD .mh-content{
  max-height:42vh; overflow:hidden; position:relative;
  border:1px solid #c4c9cc; border-radius:12px; background:#fff;
}
#mobileHUD .mh-pane{
  position:absolute; inset:0; overflow:auto; padding:10px;
  visibility:hidden; opacity:0; pointer-events:none;display:flex;justify-content:center;
}

#mobileHUD .unit-title{
    min-height: 0;
}

#mobileHUD .mh-pane.active{
  position:static; visibility:visible; opacity:1; pointer-events:auto;
}
#mobileHUD .columns-scroller{
  display:flex; gap:10px; overflow-x:auto; padding-bottom:6px;
}
#mobileHUD .unit-card{ width:200px; min-width:160px; max-width:220px; min-height:185px; }
#mobileHUD .unit-thumb{ width:80px; height:80px; }
#mobileHUD .unit-actions{ display:none !important; gap:8px; }
#mobileHUD .price-line{ display:flex !important; font-size:16px; }
#mobileHUD .unit-card.is-expanded .unit-actions{ display:flex !important; }
#mobileHUD .unit-card.is-expanded .price-line{ display:none !important; }
#mobileHUD .mh-actions{
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px; align-items:center;
}
#mobileHUD #mhBasketMain{
  grid-column:1 / -1;
}
#mobileHUD .mh-actions .btn{
  border-radius:5px; font-size:18px; font-weight:600;
  border:1px solid #bfc5c8; background:#e7ebed; cursor:pointer;color:#0f1a0f;
}
#mobileHUD .mh-actions .btn.icon-only{
  min-width:44px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
}
#mobileHUD .hamburger{
  width:16px;
  height:2px;
  background:#0f1a0f;
  position:relative;
  display:block;
}
#mobileHUD .hamburger:before,
#mobileHUD .hamburger:after{
  content:'';
  position:absolute;
  left:0;
  width:16px;
  height:2px;
  background:#0f1a0f;
}
#mobileHUD .hamburger:before{ top:-5px; }
#mobileHUD .hamburger:after{  top: 5px; }
#mobileHUD .mh-actions .btn-primary{
  background:var(--panel); color:#fff;border:1px solid var(--panel-border);
}
#mobileMegaMenuToggle{
  position:fixed;
  top:10px; left:10px;
  z-index:120;
  background:#e7ebed;
  border:1px solid #bfc5c8;
  border-radius:8px;
  width:44px;
  height:44px;
  padding:0;
  display:none;
  align-items:center;
  justify-content:center;
}
#mobileMegaMenuToggle .hamburger,
#mobileMegaMenu .hamburger{
  width:18px; height:2px; background:#0f1a0f; position:relative; display:block;
}
#mobileMegaMenuToggle .hamburger:before,
#mobileMegaMenuToggle .hamburger:after{
  content:''; position:absolute; left:0; width:18px; height:2px; background:#0f1a0f;
}
#mobileMegaMenuToggle .hamburger:before{ top:-6px; }
#mobileMegaMenuToggle .hamburger:after{  top: 6px; }
#mobileMegaMenu{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  z-index:130;
  display:none;
  align-items:flex-start;
  justify-content:flex-start;
}
#mobileMegaMenu.open{ display:flex; }
#mobileMegaMenu .mm-sheet{
  margin:0;
  width:100%;
  background:#f7faf9;
  padding:18px;
  box-sizing:border-box;
  max-height:100%;
  overflow-y:auto;
}
#mobileMegaMenu .mm-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px;
}
#mobileMegaMenu .mm-close{
  background:none; border:none; font-size:26px; line-height:1; cursor:pointer;
}
#mobileMegaMenu .mm-actions{
  display:grid;
  gap:10px;
}
#mobileMegaMenu .mm-actions .btn{
  width:100%;
  font-size:18px;
  text-align:left;
}
#mobileMegaMenu .mm-actions .btn.btn-primary{
  background:#25998b; color:#fff; border:1px solid #25998b;
}
#mobileHUD .mh-menu{
  display:none;
  position:absolute;
  right:10px;
  bottom:76px;
  background:#fff;
  color:#111;
  border:1px solid #d9d9d9;
  border-radius:10px;
  box-shadow:0 8px 20px rgba(0,0,0,0.18);
  padding:10px;
  gap:8px;
  flex-direction:column;
  min-width:180px;
  z-index:10000;
}
#mobileHUD .mh-menu.open{
  display:flex;
}
#mobileHUD .mh-menu .btn{
  width:100%;
  text-align:left;
  margin:0;
}
#mhMenuToggle{
  display:none !important;
}
#gfxToggle{
  display:none !important;
}


/* ========================= 14) Responsive (tablet 768-1100) ========================= */
@media (min-width:768px) and (max-width:1100px){
  /* Tablet: use the burger menu for scene actions instead of showing both
     the left action stack and the menu toggle together. Keep the top-right
     help button available. */
  #cameraShot,
  #printViews,
  #measureToggle,
  #birdViewToggle,
  #shareButton,
  #shareIcon,
  #zoomControls{
    display:none !important;
  }
  .info-box{
    left:0; right:0; top:auto; bottom:calc(env(safe-area-inset-bottom) + var(--bbh));
    height:38vh; width:100%; border-radius:12px 12px 0 0;
    box-shadow:0 -10px 24px rgba(0,0,0,.12);
    padding:0 12px 16px;
  }
  .info-content{ grid-template-columns:1fr .7fr 1fr; }
  .blackbox{
    flex-wrap:wrap; gap:10px; padding-block:8px;
    white-space:normal;
  }
  /* Keep the burger menu available on small iPads/tablets (Change Range and
     other secondary actions are hidden from the bottom bar at these sizes). */
  #mobileMegaMenuToggle{
    display:flex;
    top:10px;
    left:14px;
  }
  /* On tablet widths use the burger for scene utilities, but keep the
     dedicated help button visible in the top-right. */
  #cameraShot, #printViews, #measureToggle, #birdViewToggle, #shareButton, #shareIcon, #zoomControls{
    display:none !important;
  }
  /* Use the hidden gfx button slot so the burger does not overlap the left
     vertical action stack. */
  .camera-toggle{ top:58px; }
  .print-toggle{ top:106px; }
  .measure-toggle{ top:154px; }
  .bird-toggle{ top:202px; }
  .share-toggle{ top:250px; }
  .blackbox img{ width:100px; }
  .blackbox button{ flex:1 1 calc(33.333% - 12px); text-align:center; }
    /* keep canvas positioned purely via --ui-top/--ui-bottom */
    #renderCanvas{
      transform: none;
    }
}

/* ========================= 15) Responsive (mobile <=767) ========================= */
@media (max-width:767px){
  html,body{ font-size:16px; line-height:1.35; }
  :root{
    --unit-title: 0.75rem;
    --unit-price:  0.60rem;
    --unit-btn:    0.75rem;
  }
  
  /* let JS-driven --ui-top/--ui-bottom control vertical fit */
  #renderCanvas{
    transform: none;
  }

  /* Info drawer text a bit smaller on phones */
  .info-box,.info-content{ font-size:16px; }
  /* Hide the desktop info drawer entirely on small phones - we use the
     mobile HUD (Left / BBQ / Right tabs) instead. */
  #infoBox{ display:none !important; }

  /* Modals: full-screen on mobile for easier tapping */
  .modal{
    display:none;
    position:fixed;
    inset:0;
    z-index:1000;
    overflow:hidden;
    overflow-x:hidden;
    background:rgba(0,0,0,.55);
  }
  .modal-content{
    width:100%;
    max-width:none;
    margin:0;
    min-height:100dvh;
    height:100dvh;
    max-height:100dvh;
    border-radius:0;
    box-shadow:none;
    /* keep column layout so footer stays pinned to the bottom edge */
    display:flex;
    flex-direction:column;
  }
  .modal-body{
    max-height:none;
  }

  /* Compact unit tiles inside mobile HUD */
  .unit-card{
    width:190px; min-width:160px; max-width:200px;
    min-height:190px; padding:5px;
  }
  .unit-thumb{ width:120px; height:120px; }
  .unit-title{ font-size:16px; line-height:1.2; min-height:auto; }
  .unit-badge{ font-size:12px; }
  .unit-actions{ height:auto; gap:6px; }
  .unit-actions button{ font-size:11px; padding:6px 10px; }
  .price-line{ font-size:14px; }
  .price-line .savings{ font-size:12px; }

  /* Modal typography + 2-across grids */
  .modal-content{ font-size:18px; }
  .modal-header h2{ font-size:24px; }
  .modal-body{ font-size:18px; }
  .modal-radio{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:14px;
  }
  .modal-radio-option .img{ margin-bottom:8px; }

  /* Bottom bar: smaller text/buttons so everything fits */
  .blackbox span{ font-size:13px; }
  .blackbox button{
    font-size:14px;
    padding:8px 10px;
    min-height:40px;
    flex:1 1 calc(50% - 8px);
    text-align:center;
  }
  .blackbox img{ width:80px; }

  /* Mobile HUD typography */
  #mobileHUD{ font-size:16px; }
  #mobileHUD .mh-summary{ font-size:0.75rem; }
  #mobileHUD .mh-tabs button{
    font-size:14px;
    padding:4px 6vw;
  }
  #mobileHUD .mh-actions .btn{
    font-size:14px;
  }
  #mobileMegaMenuToggle{
    display:flex;
  }
  /* Hide individual toolbar buttons on mobile (moved into hamburger) */
  #cameraShot, #printViews, #measureToggle, #birdViewToggle, #shareButton, #shareIcon, #zoomControls, #infoTutorialToggle{
    display:none !important;
  }

}
@media (max-width:420px){
  #mobileHUD .mh-summary{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .info-box{ height:50vh; }
  /* smallest phones: no manual Y offset either */
  #renderCanvas{
    transform: none;
  }

  /* Tighter modals on very small phones */
  .modal-content{ font-size:17px; }
  .modal-header h2{ font-size:22px; }
  .modal-body{ font-size:17px; padding:12px 14px; }
  .modal-radio{
    grid-template-columns:1fr;   /* single-column list for BBQ/unit cards */
    gap:10px;
  }

  /* Bottom bar: stack buttons full-width for readability */
  .blackbox span{ font-size:12px; }
  .blackbox button{
    font-size:13px;
    padding:8px 10px;
    min-height:36px;
    flex:1 1 100%;
  }
}

/* Icon-only action buttons */
.unit-actions .icon-only{
  width:32px; height:32px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
}
.unit-actions .icon-only svg,
.unit-actions .icon-only img{ width:16px; height:16px; pointer-events:none; }

/* Make the trash icon truly red via currentColor */
.unit-actions .btn-danger.icon-only{
  color:#e11d48; background:#fee2e2; border-color:#fecaca;
}
.unit-actions .btn-danger.icon-only:hover{
  color:#be123c; background:#ffe4e6;
}

/* Dock-bottom variant (forced) */
#dockToggle{ display:none !important; }
.info-box{
  left:unset;
}
body.dock-bottom .info-box,
body:not(.dock-bottom) .info-box.docked-bottom{
  left:0; right:0; top:auto;
  /* sit just above whatever bottom UI we have (blackbox/HUD) */
  bottom:calc(var(--ui-bottom) + 0px);
  width:100%; border-radius:12px 12px 0 0;
  box-shadow:0 -10px 24px rgba(0,0,0,.12);
  padding:0 6px 16px;
}
body.dock-bottom .dock-button::before{ content:"||"; }

/* ========================= 17) Keyframes ========================= */
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes modelLoadPulse{
  0%, 100% { opacity:.45; }
  50% { opacity:1; }
}

input[type="radio"]{
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

#leftUnitsList .columns-scroller{
  flex-direction: row-reverse;
}


/* Tablet/desktop >=768px: keep the bottom bar as one row */
@media (min-width:768px){
  .blackbox{
    flex-wrap: nowrap;
    height: auto;
  }
  .blackbox button{ flex: 0 0 auto; } /* undo the tablet three-up buttons */
}

/* Mobile <=767px: allow the compact wrap (your current layout) */
@media (max-width:767px){
  .blackbox{
    flex-wrap: wrap;
    gap: 10px;
    padding-block: 8px;
    height: auto;          /* let content define height */
  }
  .blackbox button{ flex:1 1 calc(50% - 12px); } /* 2x2 feel */
}

#mobileHUD #mhPaneLeft .columns-scroller {
    flex-direction:row-reverse;
}

/* Prevent UI bars from swallowing touches outside their interactive bits */
#mobileHUD,
.blackbox {
  pointer-events: none;
}
#mobileHUD * ,
.blackbox * {
  pointer-events: auto; /* buttons, tabs, links still work */
}


@media (max-width:767px){
  /* Keep consistent left/right ordering on phones too */
  .blackbox #showInfoButton{ order:1; }
  .blackbox #addToBasketButton{ order:2; }
  .blackbox #changeBBQButton{ order:3; }
  .blackbox #addUnitButton{ order:4; }
  .blackbox #rangeButton{ order:5; }
  .blackbox #undoButton{ order:6; }
}

/* ========================= 18) Liquid Glass Polish (GT) ========================= */
body:not(.draco-theme){
  --panel:#b5d1ce;
  --panel-border:#88aaa6;
  --panel-muted: rgba(232, 236, 241, 0.92);
  --gt-glass-bg: rgba(239, 242, 246, 0.72);
  --gt-glass-bg-soft: rgba(245, 247, 250, 0.64);
  --gt-glass-border: rgba(136, 145, 156, 0.34);
  --gt-lit-edge: rgba(255, 255, 255, 0.78);
  --gt-dark-edge: rgba(56, 66, 78, 0.24);
  --gt-shadow: rgba(20, 28, 38, 0.14);
  font-size:16px;
  line-height:1.35;
}

body:not(.draco-theme) .blackbox,
body:not(.draco-theme) .toolbar,
body:not(.draco-theme) .modal-content,
body:not(.draco-theme) .info-box,
body:not(.draco-theme) .info-section,
body:not(.draco-theme) .unit-card,
body:not(.draco-theme) #mobileHUD,
body:not(.draco-theme) #mobileMegaMenu .mm-sheet,
body:not(.draco-theme) #mobileHUD .mh-menu,
body:not(.draco-theme) .measure-hud{
  background:
    linear-gradient(150deg, rgba(255,255,255,0.58) 0%, rgba(255,255,255,0.34) 36%, rgba(228,233,239,0.24) 72%, rgba(197,205,214,0.28) 100%),
    var(--gt-glass-bg);
  border:1px solid var(--gt-glass-border);
  box-shadow:none;
  backdrop-filter: blur(16px) saturate(126%);
  -webkit-backdrop-filter: blur(16px) saturate(126%);
}

body:not(.draco-theme) .modal-content{
  background:
    linear-gradient(150deg, rgba(255,255,255,0.64) 0%, rgba(255,255,255,0.36) 34%, rgba(233,238,244,0.22) 100%),
    var(--gt-glass-bg-soft);
}

body:not(.draco-theme) .gfx-toggle,
body:not(.draco-theme) .camera-toggle,
body:not(.draco-theme) .print-toggle,
body:not(.draco-theme) .measure-toggle,
body:not(.draco-theme) .bird-toggle,
body:not(.draco-theme) .share-toggle,
body:not(.draco-theme) .zoom-toggle,
body:not(.draco-theme) .info-toggle{
  border:1px solid rgba(206, 214, 224, 0.92);
  background:linear-gradient(150deg, rgba(246,248,251,0.98), rgba(232,237,243,0.92));
  box-shadow:none;
  backdrop-filter: blur(12px) saturate(122%);
  -webkit-backdrop-filter: blur(12px) saturate(122%);
}
body:not(.draco-theme) .gfx-toggle svg,
body:not(.draco-theme) .camera-toggle svg,
body:not(.draco-theme) .print-toggle svg,
body:not(.draco-theme) .measure-toggle svg,
body:not(.draco-theme) .bird-toggle svg,
body:not(.draco-theme) .share-toggle svg,
body:not(.draco-theme) .info-toggle svg{
  color:#0f1a0f;
  stroke:#0f1a0f;
  filter:none;
}
body:not(.draco-theme) .zoom-toggle{
  color:#0f1a0f;
  text-shadow:none;
}

body:not(.draco-theme) .gfx-toggle:hover,
body:not(.draco-theme) .camera-toggle:hover,
body:not(.draco-theme) .print-toggle:hover,
body:not(.draco-theme) .measure-toggle:hover,
body:not(.draco-theme) .bird-toggle:hover,
body:not(.draco-theme) .share-toggle:hover,
body:not(.draco-theme) .zoom-toggle:hover,
body:not(.draco-theme) .info-toggle:hover{
  border-color:var(--accent);
  background:linear-gradient(150deg, rgba(246,248,251,0.98), rgba(232,237,243,0.92));
  color:var(--accent);
  box-shadow:none;
}
body:not(.draco-theme) .gfx-toggle:hover svg,
body:not(.draco-theme) .camera-toggle:hover svg,
body:not(.draco-theme) .print-toggle:hover svg,
body:not(.draco-theme) .measure-toggle:hover svg,
body:not(.draco-theme) .bird-toggle:hover svg,
body:not(.draco-theme) .share-toggle:hover svg,
body:not(.draco-theme) .info-toggle:hover svg{
  color:var(--accent);
  stroke:var(--accent);
}

body:not(.draco-theme) .unit-card:hover{
  box-shadow:none !important;
  transform:translateY(-1px);
}
body:not(.draco-theme) .unit-card.is-highlighted{
  box-shadow:none !important;
}

body:not(.draco-theme) .modal-header,
body:not(.draco-theme) .modal-footer{
  background:linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0.18));
}
body:not(.draco-theme) #shareQrModal .share-qr-link{
  background:rgba(248,250,252,0.86);
}

/* GT: keep neutrals for most UI; reserve accent color for key CTAs. */
body:not(.draco-theme) .blackbox span,
body:not(.draco-theme) .blackbox .money{
  color:#1f2937;
}
body:not(.draco-theme) .blackbox .savings{
  color:#1f2937;
  background:#eef2f7;
  border-color:#cbd5e1;
}
body:not(.draco-theme) .blackbox button,
body:not(.draco-theme) .btn,
body:not(.draco-theme) #mobileHUD .mh-actions .btn,
body:not(.draco-theme) #mobileHUD .mh-menu .btn,
body:not(.draco-theme) #mobileMegaMenu .mm-actions .btn{
  background:linear-gradient(150deg, rgba(246,248,251,0.98), rgba(232,237,243,0.92));
  border-color:#bcc6d3;
  color:#0f1a0f;
  font-weight:500;
  box-shadow:none;
}
body:not(.draco-theme) .blackbox button:hover{
  background:linear-gradient(150deg, rgba(246,248,251,0.98), rgba(232,237,243,0.92));
  border-color:var(--accent);
  color:var(--accent);
  box-shadow:none;
}
body:not(.draco-theme) .blackbox #addUnitButton:not(:disabled),
body:not(.draco-theme) .blackbox #changeBBQButton:not(:disabled),
body:not(.draco-theme) .blackbox #addToBasketButton:not(:disabled),
body:not(.draco-theme) #mobileHUD #mhAdd:not(:disabled),
body:not(.draco-theme) #mobileHUD #mhBBQ:not(:disabled),
body:not(.draco-theme) #mobileHUD #mhBasket:not(:disabled),
body:not(.draco-theme) .btn-primary{
  background:linear-gradient(150deg, rgba(246,248,251,0.98), rgba(232,237,243,0.92));
  border-color:#bcc6d3;
  color:#0f1a0f;
  text-shadow:none;
  box-shadow:none;
}
body:not(.draco-theme) .blackbox #addUnitButton:not(:disabled):hover,
body:not(.draco-theme) .blackbox #changeBBQButton:not(:disabled):hover,
body:not(.draco-theme) .blackbox #addToBasketButton:not(:disabled):hover,
body:not(.draco-theme) #mobileHUD #mhAdd:not(:disabled):hover,
body:not(.draco-theme) #mobileHUD #mhBBQ:not(:disabled):hover,
body:not(.draco-theme) #mobileHUD #mhBasket:not(:disabled):hover,
body:not(.draco-theme) .btn-primary:hover{
  background:linear-gradient(150deg, rgba(246,248,251,0.98), rgba(232,237,243,0.92));
  border-color:var(--accent);
  color:var(--accent);
  box-shadow:none;
}

body:not(.draco-theme) .gfx-toggle::after,
body:not(.draco-theme) .camera-toggle::after,
body:not(.draco-theme) .print-toggle::after,
body:not(.draco-theme) .measure-toggle::after,
body:not(.draco-theme) .bird-toggle::after,
body:not(.draco-theme) .share-toggle::after,
body:not(.draco-theme) .info-toggle::after,
body:not(.draco-theme) .zoom-toggle::after{
  background:rgba(244, 248, 247, 0.96);
  border:1px solid rgba(117, 154, 149, 0.55);
  color:#10201d;
  box-shadow:none;
}

/* Range chooser helper copy */
.range-intro{
  font-size:18px !important;
  line-height:1.5 !important;
}
.range-note{
  font-size:16px !important;
  line-height:1.45 !important;
}

/* ========================= 19) Mobile/Tablet Density Pass ========================= */
@media (min-width:560px) and (max-width:1100px){
  #mobileHUD .mh-actions{
    grid-template-columns:repeat(3, minmax(0,1fr)) auto;
    gap:7px;
  }
  #mobileHUD #mhBasketMain{
    grid-column:auto;
  }
  #mobileHUD .mh-actions .btn{
    white-space:nowrap;
  }
  #mobileHUD #mhBasketMain{
    font-size:12px;
  }
}

@media (min-width:768px) and (max-width:1100px){
  .blackbox{
    gap:8px;
    padding:6px 10px calc(8px + env(safe-area-inset-bottom));
  }
  .blackbox span{
    font-size:12px;
    margin-right:6px;
  }
  .blackbox img{ width:86px; }
  .blackbox button{
    font-size:13px;
    min-height:38px;
    padding:7px 10px;
  }

  #mobileHUD{
    gap:6px;
    padding:8px 10px calc(10px + env(safe-area-inset-bottom));
  }
  #mobileHUD .mh-summary{
    gap:4px 8px;
    font-size:0.72rem;
  }
  #mobileHUD .mh-summary > div{
    min-width:0;
    overflow-wrap:anywhere;
  }
  #mobileHUD #mhSavings{
    font-size:0.68rem;
    line-height:1.15;
    white-space:normal;
    text-wrap:balance;
  }
  #mobileHUD .mh-tabs{ gap:6px; }
  #mobileHUD .mh-tabs button{
    font-size:13px;
    padding:4px 6vw;
  }
  #mobileHUD .mh-content{ max-height:34vh; }
  #mobileHUD .mh-pane{ padding:8px; }
  #mobileHUD .columns-scroller{
    gap:8px;
    padding-bottom:5px;
  }
  #mobileHUD .unit-card{
    width:170px;
    min-width:150px;
    max-width:178px;
    min-height:170px;
    padding:4px;
    gap:4px;
  }
  #mobileHUD .unit-card.add-card:not(.missing-swap-card){
    width:148px;
    min-width:132px;
    max-width:154px;
    min-height:148px;
  }
  #mobileHUD .add-plus{
    font-size:24px;
    line-height:1;
  }
  #mobileHUD .add-label{
    font-size:11px;
    line-height:1.2;
    white-space:normal;
    overflow-wrap:anywhere;
    text-align:center;
  }
  #mobileHUD .unit-thumb{
    width:68px;
    height:68px;
  }
  #mobileHUD .unit-title{
    font-size:13px;
    line-height:1.2;
    min-height:2.4em;
  }
  #mobileHUD .unit-actions{ gap:6px !important; }
  #mobileHUD .unit-actions button{
    font-size:10px;
    padding:4px 6px;
  }
  #mobileHUD .price-line{ font-size:12px !important; }
  #mobileHUD .price-line{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
    white-space:normal;
    display:block !important;
    line-height:1.15;
    text-align:center;
  }
  #mobileHUD .price-line-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1px;
    width:100%;
  }
  #mobileHUD .price-line .compare,
  #mobileHUD .price-line .sale,
  #mobileHUD .price-line .savings{
    max-width:100%;
    overflow-wrap:anywhere;
  }
  #mobileHUD .price-line .savings{
    display:block;
    max-width:100%;
    white-space:normal;
    overflow-wrap:anywhere;
    line-height:1.15;
    text-align:center;
  }
  #mobileHUD .mh-actions{ gap:8px; }
  #mobileHUD .mh-actions .btn{
    font-size:13px;
    padding:8px 10px;
  }
}

@media (max-width:767px){
  .blackbox{
    gap:8px;
    padding:6px 8px calc(8px + env(safe-area-inset-bottom));
  }
  .blackbox span{
    font-size:12px;
    margin-right:4px;
  }
  .blackbox img{ width:70px; }
  .blackbox button{
    font-size:12px;
    min-height:34px;
    padding:7px 8px;
    border-radius:10px;
  }

  #mobileHUD{
    gap:6px;
    padding:8px 9px calc(10px + env(safe-area-inset-bottom));
    font-size:15px;
  }
  #mobileHUD .mh-summary{
    font-size:0.7rem;
    gap:4px 6px;
  }
  #mobileHUD .mh-summary > div{
    min-width:0;
    overflow-wrap:anywhere;
  }
  #mobileHUD #mhSavings{
    font-size:0.64rem;
    line-height:1.15;
    white-space:normal;
    text-wrap:balance;
  }
  #mobileHUD .mh-tabs{ gap:6px; }
  #mobileHUD .mh-tabs button{
    font-size:12px;
    padding:4px 4.5vw;
  }
  #mobileHUD .mh-content{ max-height:36vh; }
  #mobileHUD .mh-pane{ padding:7px; }
  #mobileHUD .columns-scroller{
    gap:7px;
    padding-bottom:4px;
  }
  #mobileHUD .unit-card{
    width:150px;
    min-width:132px;
    max-width:156px;
    min-height:160px;
    padding:3px;
    gap:4px;
  }
  #mobileHUD .unit-card.add-card:not(.missing-swap-card){
    width:126px;
    min-width:114px;
    max-width:132px;
    min-height:126px;
  }
  #mobileHUD .add-plus{
    font-size:21px;
    line-height:1;
  }
  #mobileHUD .add-label{
    font-size:10px;
    line-height:1.2;
    white-space:normal;
    overflow-wrap:anywhere;
    text-align:center;
  }
  #mobileHUD .unit-thumb{
    width:60px;
    height:60px;
  }
  #mobileHUD .unit-title{
    font-size:12px;
    line-height:1.2;
    min-height:2.4em;
  }
  #mobileHUD .unit-actions{ gap:5px !important; }
  #mobileHUD .unit-actions button{
    font-size:9.5px;
    padding:3px 5px;
    border-radius:7px;
  }
  #mobileHUD .price-line{ font-size:11px !important; }
  #mobileHUD .price-line{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
    white-space:normal;
    display:block !important;
    line-height:1.15;
    text-align:center;
  }
  #mobileHUD .price-line-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1px;
    width:100%;
  }
  #mobileHUD .price-line .compare,
  #mobileHUD .price-line .sale,
  #mobileHUD .price-line .savings{
    max-width:100%;
    overflow-wrap:anywhere;
  }
  #mobileHUD .price-line .sale{ font-size:12px; }
  #mobileHUD .price-line .savings{ font-size:10px; }
  #mobileHUD .price-line .savings{
    display:block;
    max-width:100%;
    white-space:normal;
    overflow-wrap:anywhere;
    line-height:1.15;
    text-align:center;
  }
  #mobileHUD .mh-actions{ gap:7px; }
  #mobileHUD .mh-actions .btn{
    font-size:12px;
    padding:8px 8px;
    border-radius:8px;
  }
  #mobileHUD .mh-menu{
    min-width:160px;
    right:8px;
    bottom:70px;
    padding:8px;
  }
  #mobileHUD .mh-menu .btn{
    font-size:12px;
    padding:7px 8px;
  }

  .modal-header{ padding:14px 16px; }
  .modal-body{ padding:14px 16px; }
  .modal-footer{
    padding:12px 16px;
    gap:8px;
  }
  .modal-radio{ gap:12px; }
  .modal-radio-option{
    min-width:0;
    min-height:260px;
    padding:8px 8px 10px;
  }
  .modal-radio-option .click{
    min-height:3.6em;
    padding-inline:4px;
  }
  .modal-radio-option .click label{
    font-size:14px;
    min-height:3.6em;
    max-height:3.6em;
  }
  .modal-radio-option .unit-dims{
    font-size:11px;
    padding-inline:4px;
  }
  .modal-radio-option .price-line{
    font-size:12px;
    min-height:2.4em;
    padding-inline:4px;
  }
  .modal-radio-option .img{ margin-bottom:6px; }
}

@media (max-width:420px){
  #mobileHUD #mhSavings{
    font-size:0.62rem;
  }
  #mobileHUD .unit-card{
    width:136px;
    min-width:120px;
    max-width:144px;
    min-height:150px;
    padding:3px;
  }
  #mobileHUD .unit-card.add-card:not(.missing-swap-card){
    width:116px;
    min-width:106px;
    max-width:122px;
    min-height:116px;
  }
  #mobileHUD .unit-thumb{
    width:54px;
    height:54px;
  }
  #mobileHUD .mh-tabs button{
    font-size:11px;
    padding:4px 3.5vw;
  }
}

/* ---------- camera pad + mobile HUD final overrides ---------- */
.zoom-toggle{
  display:none !important;
}

#dracoCameraPad{
  position:fixed;
  left:50%;
  bottom:calc(var(--ui-bottom, 56px) + 10px);
  transform:translateX(-50%);
  width:min(92vw, 520px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  z-index:900;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .14s ease;
}

#dracoCameraPad.is-visible{
  pointer-events:auto;
  opacity:1;
  visibility:visible;
}

#dracoCameraPad .draco-cam-pad-btn{
  width:44px;
  height:44px;
  border-radius:999px;
  border:1.5px solid rgba(15,23,42,.46);
  background:rgba(255,255,255,.92);
  color:#0f172a;
  box-shadow:0 8px 18px rgba(15,23,42,.16);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  font-weight:800;
  letter-spacing:.04em;
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
  transition:background-color .12s ease, border-color .12s ease, transform .08s ease, box-shadow .12s ease;
}

#dracoCameraPad .draco-cam-pad-btn:hover,
#dracoCameraPad .draco-cam-pad-btn:focus-visible{
  border-color:rgba(15,23,42,.72);
  color:#0f172a;
  background:rgba(255,255,255,.98);
  outline:none;
}

#dracoCameraPad .draco-cam-pad-btn.is-active,
#dracoCameraPad .draco-cam-pad-btn:active{
  cursor:grabbing;
  transform:translateY(1px) scale(.98);
  border-color:rgba(37,153,139,1);
  color:#0f172a;
  background:rgba(37,153,139,.16);
  box-shadow:0 8px 18px rgba(15,23,42,.12);
}

#dracoCameraPad .draco-cam-pad-btn.is-disabled,
#dracoCameraPad .draco-cam-pad-btn:disabled{
  opacity:.45;
  cursor:default;
}

@media (max-width:1100px){
  #dracoCameraPad{
    width:min(90vw, 420px);
    bottom:calc(var(--ui-bottom, 56px) + 8px);
    gap:10px;
  }
  #dracoCameraPad .draco-cam-pad-btn{
    width:40px;
    height:40px;
    font-size:15px;
  }

  #mobileHUD .mh-actions{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow:row !important;
    align-items:stretch !important;
    gap:8px !important;
  }
  #mobileHUD #mhInfoMain,
  #mobileHUD #mhBasketMain{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    width:100% !important;
    min-width:0;
    grid-column:auto !important;
    margin:0 !important;
  }
  #mobileHUD #mhInfoMain{ order:1 !important; }
  #mobileHUD #mhBasketMain{ order:2 !important; }
  #mobileHUD #mhChangeRange,
  #mobileHUD #mhAddUnit,
  #mobileHUD #mhMenuToggle,
  #mobileHUD #mhMenu{
    display:none !important;
  }

  .blackbox #showInfoButton{
    order:1 !important;
  }
  .blackbox #addToBasketButton{
    order:2 !important;
    margin-left:auto !important;
  }
}

@media (max-width:767px){
  #dracoCameraPad{
    width:min(92vw, 340px);
    gap:8px;
    bottom:calc(var(--ui-bottom, 56px) + 8px);
  }
  #dracoCameraPad .draco-cam-pad-btn{
    width:38px;
    height:38px;
    font-size:14px;
  }
}