:root {
  --fence-blue: #168ed4;
  --fence-blue-dark: #0878b4;
  --fence-ink: #1d2d36;
  --fence-muted: #6f7f88;
  --fence-border: #dce4e8;
  --fence-panel-width: 382px;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--fence-ink); background: #edf1f2; }
button, input, select { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.app-shell { position: fixed; inset: var(--shared-topbar-height, 47px) 0 0; display: grid; grid-template-columns: minmax(0, 1fr) var(--fence-panel-width); background: #eef2f3; }
.viewer-panel, .viewer-stage, #canvasHost { position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0; }
.viewer-stage { overflow: hidden; background: radial-gradient(circle at 45% 27%, #fbfcfc 0, #edf2f3 56%, #e4e9eb 100%); }
#canvasHost canvas { display: block; width: 100%; height: 100%; }
.fence-label-layer { z-index: 4; }
.sidebar { position: relative; z-index: 5; width: var(--fence-panel-width); height: 100%; overflow-y: auto; border-left: 1px solid #dde4e7; background: rgba(255,255,255,.985); box-shadow: -10px 0 30px rgba(32,52,61,.08); transition: transform .22s ease; scrollbar-width: thin; }
.sidebar.is-collapsed { transform: translateX(100%); }
#fenceSidebarToggle { position: fixed !important; z-index: 12 !important; top: calc(var(--shared-topbar-height, 47px) + 16px) !important; right: var(--fence-panel-width) !important; width: 35px !important; height: 46px !important; border: 1px solid var(--fence-border) !important; border-right: 0 !important; border-radius: 13px 0 0 13px !important; color: #31505e !important; background: rgba(255,255,255,.985) !important; box-shadow: -7px 4px 18px rgba(31,52,62,.10) !important; transition: right .22s ease !important; }
body.fence-sidebar-collapsed #fenceSidebarToggle { right: 0 !important; }
body.fence-sidebar-collapsed #fenceSidebarToggle svg { transform: rotate(180deg); }

.panel-section { padding: 25px 26px 22px; border-bottom: 1px solid #edf0f2; }
.intro-section { padding-top: 29px; }
.eyebrow { margin: 0 0 5px; color: var(--fence-blue-dark); font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 9px; font-size: 25px; line-height: 1.12; letter-spacing: -.03em; }
.section-copy { margin: 0; color: var(--fence-muted); font-size: 12px; line-height: 1.55; }
.accordion-section { border-bottom: 1px solid #edf0f2; }
.accordion-toggle { width: 100%; min-height: 53px; padding: 0 26px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 0; color: #263741; background: #fff; font-size: 12px; font-weight: 850; text-align: left; }
.accordion-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .16s ease; }
.accordion-section.is-open .accordion-toggle svg { transform: rotate(180deg); }
.accordion-panel { padding: 5px 26px 25px; background: #fff; }
.field-label { display: block; margin: 0 0 8px; color: #53636d; font-size: 10px; font-weight: 800; }
.top-gap { margin-top: 18px !important; }
.choice-grid { display: grid; gap: 8px; }
.layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice-card { min-height: 82px; padding: 10px 8px; display: grid; place-items: center; gap: 5px; border: 1px solid #dbe3e7; border-radius: 11px; color: #566772; background: #fbfcfc; font-size: 9px; font-weight: 800; text-align: center; transition: .15s ease; }
.choice-card:hover { border-color: #a8cfe3; background: #f3f9fc; }
.choice-card.selected { border-color: #63b7e5; color: #096fa9; background: #eef8fd; box-shadow: inset 0 0 0 1px rgba(22,142,212,.12); }
.choice-card svg { width: 58px; height: 35px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.panel-preview { width: 68px; height: 42px; border: 1px solid currentColor; border-radius: 3px; opacity: .9; }
.preview-vertical { background: repeating-linear-gradient(90deg, currentColor 0 5px, transparent 5px 9px); }
.preview-horizontal { background: repeating-linear-gradient(0deg, currentColor 0 5px, transparent 5px 9px); }
.preview-privacy { background: linear-gradient(currentColor,currentColor); }
.preview-mesh { background-image: linear-gradient(currentColor 1px, transparent 1px), linear-gradient(90deg,currentColor 1px,transparent 1px); background-size: 10px 10px; }
.control-list { display: grid; gap: 17px; }
.range-control { display: grid; gap: 8px; }
.compact-control { margin-top: 16px; }
.control-label { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #263741; font-size: 11px; }
.control-label b { font-size: 12px; }
.control-label output { color: var(--fence-blue-dark); font-weight: 850; }
.range-row { display: grid; grid-template-columns: minmax(0, 1fr) 75px; align-items: center; gap: 10px; }
.range-row--single { grid-template-columns: 1fr; }
input[type="range"] { width: 100%; accent-color: var(--fence-blue); }
.number-input { width: 75px; height: 35px; padding: 0 7px; border: 1px solid var(--fence-border); border-radius: 9px; color: #1d303a; background: #fff; text-align: center; font-size: 11px; font-weight: 750; }
.number-input:focus, select:focus { outline: 2px solid rgba(17,136,209,.18); border-color: var(--fence-blue); }
select { width: 100%; height: 40px; padding: 0 11px; border: 1px solid var(--fence-border); border-radius: 10px; color: #21323c; background: #fff; font-size: 11px; font-weight: 700; }
.info-card { display: grid; gap: 4px; margin-top: 15px; padding: 12px 13px; border: 1px solid #d7e5ed; border-radius: 11px; background: #f1f8fc; }
.info-card span { color: #627681; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.info-card strong { color: #1d4559; font-size: 11px; }
.calculated-side-card { margin-top: 0; }
.calculated-side-card strong { font-size: 16px; letter-spacing: -.02em; }
.calculated-side-card small { color: #70838d; font-size: 9px; line-height: 1.4; }
.finish-row { display: grid; gap: 7px; }
.finish-swatch { min-height: 42px; padding: 6px 9px; display: grid; grid-template-columns: 27px minmax(0,1fr); align-items: center; gap: 9px; border: 1px solid #dce3e6; border-radius: 9px; color: #455862; background: #fff; text-align: left; font-size: 10px; font-weight: 750; }
.finish-swatch i { width: 27px; height: 27px; border: 3px solid #fff; border-radius: 7px; background: var(--swatch); box-shadow: 0 0 0 1px #d0d9dd; }
.finish-swatch.selected { color: #076fa8; border-color: #71bde5; background: #eff8fd; }
.finish-swatch.selected i { box-shadow: 0 0 0 2px var(--fence-blue); }
.gate-options { display: grid; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid #edf0f2; }
.gate-options .field-label { margin-bottom: -4px; }

.gate-manager-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.gate-manager-head > div { min-width: 0; }
.gate-manager-head .field-label { margin-bottom: 3px; }
.gate-manager-head small { display: block; max-width: 220px; color: #75858e; font-size: 9px; line-height: 1.4; }
.gate-add-button { min-height: 34px; padding-inline: 11px; white-space: nowrap; }
.gate-add-button:disabled { cursor: not-allowed; opacity: .48; }
.gate-list { display: grid; gap: 10px; margin-top: 14px; }
.gate-card { display: grid; gap: 10px; padding: 12px; border: 1px solid #dce4e8; border-radius: 12px; background: #f9fbfc; }
.gate-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gate-card-head strong { color: #263741; font-size: 11px; }
.gate-card .field-label { margin: 0 0 -4px; }
.gate-card .compact-control { margin-top: 1px; }
.gate-remove { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 1px solid #d9e1e5; border-radius: 8px; color: #7a5555; background: #fff; font-size: 19px; line-height: 1; }
.gate-remove:hover { color: #a33b3b; border-color: #e0b7b7; background: #fff7f7; }
.gate-empty, .gate-capacity { margin: 12px 0 0; padding: 10px 11px; border-radius: 9px; color: #71828b; background: #f5f8f9; font-size: 9px; line-height: 1.4; }
.gate-capacity { color: #7d6541; background: #fff7e8; }
.toggle-row { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 44px; align-items: center; min-height: 62px; gap: 12px; padding: 11px 13px; border: 1px solid var(--fence-border); border-radius: 12px; background: #fff; cursor: pointer; }
.toggle-row span { display: grid; gap: 3px; }
.toggle-row b { font-size: 11px; }
.toggle-row small { color: #75858e; font-size: 9px; line-height: 1.35; }
.toggle-row input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-row i { position: relative; width: 42px; height: 24px; justify-self: end; border-radius: 999px; background: #d7dfe3; box-shadow: inset 0 0 0 1px #c8d2d7; transition: .16s ease; }
.toggle-row i::after { content: ""; position: absolute; width: 18px; height: 18px; top: 3px; left: 3px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.22); transition: transform .16s ease; }
.toggle-row input:checked + i { background: var(--fence-blue); box-shadow: inset 0 0 0 1px var(--fence-blue); }
.toggle-row input:checked + i::after { transform: translateX(18px); }
.dimension-label { padding: 3px 6px; border: 1px solid rgba(25,45,57,.12); border-radius: 6px; color: #15252e; background: rgba(255,255,255,.94); box-shadow: 0 3px 10px rgba(27,45,53,.08); font-size: 9px; font-weight: 850; white-space: nowrap; }
.corner-point-label { min-width: 18px; padding: 2px 6px; border-radius: 999px; text-align: center; font-size: 11px; font-weight: 900; color: #0c3f5b; background: rgba(233, 247, 255, 0.98); border-color: rgba(36,124,169,.32); box-shadow: 0 4px 12px rgba(21,42,58,.14); }
.compass-label { color: #076ea7; font-size: 10px; }

.summary-section .accordion-panel { padding-top: 7px; }
.summary-total-card { display: grid; gap: 4px; padding: 15px; border: 1px solid #b8dced; border-radius: 13px; background: linear-gradient(145deg,#edf8fd,#f8fcfe); }
.summary-total-card span { color: #526a78; font-size: 10px; font-weight: 750; }
.summary-total-card strong { color: #086fa9; font-size: 28px; letter-spacing: -.035em; }
.summary-total-card small { color: #788b95; font-size: 8px; line-height: 1.45; }
.summary-price-breakdown, .summary-bom-list { display: grid; gap: 0; margin-top: 12px; border: 1px solid #e0e7ea; border-radius: 10px; overflow: hidden; }
.summary-price-breakdown > div, .summary-bom-list > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 8px 9px; border-bottom: 1px solid #edf0f2; background: #fff; font-size: 9px; }
.summary-price-breakdown > div:last-child, .summary-bom-list > div:last-child { border-bottom: 0; }
.summary-price-breakdown span, .summary-bom-list span { color: #637680; }
.summary-price-breakdown strong, .summary-bom-list strong { color: #263b47; text-align: right; }
.summary-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin-top: 12px; }
.summary-metrics > div { display: grid; gap: 3px; padding: 9px; border: 1px solid #e0e7ea; border-radius: 9px; background: #fafcfc; }
.summary-metrics span { color: #72848e; font-size: 8px; }
.summary-metrics strong { color: #213642; font-size: 10px; }
.summary-bom-preview { margin-top: 17px; }
.summary-subheading { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #263b47; font-size: 11px; }
.summary-subheading span { color: #087bb9; font-size: 9px; font-weight: 850; }
.summary-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 13px; }
.primary-action, .secondary-action { min-height: 37px; padding: 0 13px; border-radius: 9px; font-size: 10px; font-weight: 850; }
.primary-action { border: 1px solid var(--fence-blue); color: #fff; background: var(--fence-blue); }
.secondary-action { border: 1px solid #cbd7dc; color: #35505e; background: #fff; }



.environment-panel { position: fixed; z-index: 30; top: calc(var(--shared-topbar-height, 47px) + 72px); left: 64px; width: min(360px, calc(100vw - 82px)); padding: 21px; border: 1px solid rgba(20,27,35,.1); border-radius: 15px; color: #243741; background: rgba(255,255,255,.985); box-shadow: 0 24px 65px rgba(10,20,28,.18); backdrop-filter: blur(12px); }
.environment-panel.is-open { display: block; }
.environment-panel__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 17px; }
.environment-panel__header strong { font-size: 18px; }
.environment-panel__header button { border: 0; color: #52636d; background: transparent; font-size: 26px; line-height: 1; }
.environment-control { display: grid; gap: 8px; margin-top: 15px; }
.environment-control > span { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; }
.environment-control output { color: #657b88; }
.environment-control input { accent-color: #168ed4; }
.environment-toggle { margin-top: 17px; color: #263741; background: #f7f9fa; border-color: #dfe6e9; }
.environment-toggle small { color: #748690; }

.bom-panel { width: min(820px, calc(100vw - 36px)); max-height: min(740px, calc(100vh - 46px)); padding: 0; border: 1px solid #d8e1e5; border-radius: 16px; color: var(--fence-ink); background: #fff; box-shadow: 0 30px 90px rgba(16,32,41,.22); }
.bom-panel::backdrop { background: rgba(20,32,38,.38); backdrop-filter: blur(3px); }
.bom-header, .bom-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #e4eaed; }
.bom-header h2 { margin: 0 0 3px; font-size: 19px; }
.bom-header p { margin: 0; color: #6f8089; font-size: 10px; }
.bom-close { width: 34px; height: 34px; border: 0; border-radius: 9px; color: #52636d; background: #f1f4f5; font-size: 21px; }
.bom-scroll-region { max-height: calc(100vh - 220px); overflow: auto; padding: 18px 20px; }
.bom-disclaimer { margin-bottom: 15px; padding: 12px 14px; border: 1px solid #d7e7ef; border-radius: 11px; color: #55707d; background: #f0f8fc; font-size: 10px; line-height: 1.5; }
.bom-table-wrap { overflow-x: auto; border: 1px solid #e0e7ea; border-radius: 11px; }
.bom-table { width: 100%; border-collapse: collapse; font-size: 10px; }
.bom-table th, .bom-table td { padding: 10px 11px; border-bottom: 1px solid #e8edef; text-align: left; }
.bom-table th { color: #677781; background: #f6f8f9; font-size: 8px; text-transform: uppercase; letter-spacing: .04em; }
.bom-table tr:last-child td { border-bottom: 0; }
.bom-table td strong { display: block; color: #20333e; }
.bom-total-row { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding: 13px 14px; border-radius: 10px; background: #eef8fd; color: #49636f; font-size: 10px; font-weight: 800; }
.bom-total-row strong { color: #087bb9; font-size: 19px; }
.bom-footer { border-top: 1px solid #e4eaed; border-bottom: 0; justify-content: flex-end; }

.app-shell.is-dark-mode, body.shared-ui-dark-mode .app-shell { color: #edf4f7; background: #0f1724; }
body.shared-ui-dark-mode .viewer-stage { background: radial-gradient(circle at 48% 28%, #26364a 0, #182538 48%, #101a28 100%); }
body.shared-ui-dark-mode .sidebar, body.shared-ui-dark-mode .accordion-toggle, body.shared-ui-dark-mode .accordion-panel { color: #edf4f7; background: #172235; border-color: #2a3a51; }
body.shared-ui-dark-mode .panel-section, body.shared-ui-dark-mode .accordion-section { border-color: #26374c; }
body.shared-ui-dark-mode .section-copy, body.shared-ui-dark-mode .field-label, body.shared-ui-dark-mode .control-label, body.shared-ui-dark-mode .toggle-row small { color: #a9bac7; }
body.shared-ui-dark-mode .choice-card, body.shared-ui-dark-mode .finish-swatch, body.shared-ui-dark-mode select, body.shared-ui-dark-mode .number-input, body.shared-ui-dark-mode .toggle-row { color: #dbe6ed; background: #1d2b41; border-color: #34455c; }

body.shared-ui-dark-mode .gate-manager-head small { color: #a9bac7; }
body.shared-ui-dark-mode .gate-card { background: #1b293d; border-color: #34455c; }
body.shared-ui-dark-mode .gate-card-head strong { color: #edf4f7; }
body.shared-ui-dark-mode .gate-remove { color: #e0b5b5; background: #24354b; border-color: #40516a; }
body.shared-ui-dark-mode .gate-remove:hover { color: #ffd0d0; background: #3a2934; border-color: #6d4952; }
body.shared-ui-dark-mode .gate-empty { color: #a9bac7; background: #1d2b41; }
body.shared-ui-dark-mode .gate-capacity { color: #e2c996; background: #3a3222; }
body.shared-ui-dark-mode .gate-add-button { color: #dbe6ed; background: #1d2b41; border-color: #34455c; }
body.shared-ui-dark-mode .choice-card.selected, body.shared-ui-dark-mode .finish-swatch.selected { color: #7ccdf7; background: #1b3449; border-color: #3f7795; }
body.shared-ui-dark-mode .info-card { background: #1d3448; border-color: #36526a; }
body.shared-ui-dark-mode .info-card span { color: #a9bac7; }
body.shared-ui-dark-mode .info-card strong { color: #dcecf6; }
body.shared-ui-dark-mode .calculated-side-card small { color: #a9bac7; }
body.shared-ui-dark-mode .summary-total-card { background: linear-gradient(145deg,#1b3349,#1c2d42); border-color: #365b75; }
body.shared-ui-dark-mode .summary-total-card span, body.shared-ui-dark-mode .summary-total-card small { color: #b0c0cb; }
body.shared-ui-dark-mode .summary-total-card strong { color: #79ccff; }
body.shared-ui-dark-mode .summary-price-breakdown, body.shared-ui-dark-mode .summary-bom-list { border-color: #34455c; }
body.shared-ui-dark-mode .summary-price-breakdown > div, body.shared-ui-dark-mode .summary-bom-list > div, body.shared-ui-dark-mode .summary-metrics > div { color: #edf4f7; background: #1d2b41; border-color: #2c3c51; }
body.shared-ui-dark-mode .summary-price-breakdown span, body.shared-ui-dark-mode .summary-bom-list span, body.shared-ui-dark-mode .summary-metrics span { color: #aec0cc; }
body.shared-ui-dark-mode .summary-price-breakdown strong, body.shared-ui-dark-mode .summary-bom-list strong, body.shared-ui-dark-mode .summary-metrics strong, body.shared-ui-dark-mode .summary-subheading { color: #edf4f7; }
body.shared-ui-dark-mode .dimension-label { color: #e9f5fb; background: rgba(22,34,51,.94); border-color: rgba(142,194,224,.25); }
body.shared-ui-dark-mode .corner-point-label { color: #eaf8ff; background: rgba(16,39,60,.96); border-color: rgba(134,196,233,.34); }
body.shared-ui-dark-mode .environment-panel { color: #edf5fa; background: rgba(21,34,48,.96); border-color: rgba(255,255,255,.12); box-shadow: 0 24px 65px rgba(10,20,28,.3); }
body.shared-ui-dark-mode .environment-panel__header button { color: #fff; }
body.shared-ui-dark-mode .environment-control output { color: #a9c4d5; }
body.shared-ui-dark-mode .environment-toggle { color: #edf5fa; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.13); }
body.shared-ui-dark-mode .environment-toggle small { color: #a7bac7; }
body.shared-ui-dark-mode #fenceSidebarToggle { color: #dce7ee !important; background: #172235 !important; border-color: #2a3a51 !important; }
body.shared-ui-dark-mode .bom-panel { color: #edf4f7; background: #172235; }
body.shared-ui-dark-mode .bom-header, body.shared-ui-dark-mode .bom-footer { border-color: #2b3c52; }
body.shared-ui-dark-mode .bom-header p { color: #a9bac7; }
body.shared-ui-dark-mode .bom-close { color: #dbe7ed; background: #24354b; }
body.shared-ui-dark-mode .bom-disclaimer { color: #c1d2de; background: #1d3448; border-color: #36526a; }
body.shared-ui-dark-mode .bom-table-wrap { border-color: #34455c; }
body.shared-ui-dark-mode .bom-table th { color: #aab9c5; background: #202e43; }
body.shared-ui-dark-mode .bom-table th, body.shared-ui-dark-mode .bom-table td { border-color: #2c3c51; }
body.shared-ui-dark-mode .bom-table td strong { color: #edf4f7; }
body.shared-ui-dark-mode .bom-total-row { color: #b6c8d4; background: #1d3448; }

@media (max-width: 900px) {
  :root { --fence-panel-width: min(365px, 92vw); }
  .app-shell { display: block; }
  .sidebar { position: fixed; top: 0; right: 0; bottom: 0; }
  .layout-grid { grid-template-columns: repeat(2, minmax(84px,1fr)); }
}
@media (max-width: 560px) {
  .panel-section, .accordion-panel { padding-left: 18px; padding-right: 18px; }
  .accordion-toggle { padding-left: 18px; padding-right: 18px; }
  .summary-actions { grid-template-columns: 1fr; }
  .bom-header { align-items: flex-start; }
}

/* Mobile-first fence workspace ------------------------------------------- */
#canvasHost,
#canvasHost canvas {
  overscroll-behavior: contain;
}
#canvasHost canvas { touch-action: none; }

@media (max-width: 900px) {
  :root { --fence-panel-width: min(390px, 94vw); }

  .sidebar {
    top: var(--shared-topbar-height, 47px);
    bottom: 0;
    height: auto;
    z-index: 910;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  #fenceSidebarToggle { z-index: 915 !important; }
}

@media (max-width: 760px) {
  body { overflow: hidden; }

  .app-shell {
    inset: var(--shared-topbar-height, 47px) 0 0;
    display: block;
  }

  .viewer-panel,
  .viewer-stage,
  #canvasHost { width: 100%; height: 100%; }

  .sidebar {
    width: var(--fence-panel-width);
    max-width: calc(100vw - 18px);
    border-left: 1px solid var(--fence-border);
    box-shadow: -14px 0 34px rgba(23, 43, 53, .16);
  }

  /* Keep the reveal handle well below the top-bar/tools cluster. */
  #fenceSidebarToggle {
    top: auto !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 118px) !important;
    transform: none !important;
    width: 40px !important;
    height: 52px !important;
    touch-action: manipulation;
  }

  .panel-section { padding: 20px 18px 18px; }
  .intro-section { padding-top: 22px; }
  h1 { font-size: 22px; }
  .section-copy { font-size: 11px; }

  .accordion-toggle {
    min-height: 52px;
    padding: 0 18px;
    font-size: 13px;
    touch-action: manipulation;
  }
  .accordion-panel { padding: 7px 18px 21px; }

  .layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choice-card {
    min-width: 0;
    min-height: 86px;
    padding: 9px 5px;
    touch-action: manipulation;
  }
  .choice-card svg { width: min(54px, 70%); }
  .panel-preview { width: min(68px, 84%); }

  .control-list { gap: 18px; }
  .range-control { gap: 9px; }
  .range-row { grid-template-columns: minmax(0, 1fr) 82px; gap: 10px; }
  input[type="range"] { min-height: 34px; }
  .number-input,
  select {
    height: 44px;
    font-size: 16px;
  }
  .number-input { width: 82px; }

  .finish-row { gap: 8px; }
  .finish-swatch {
    min-height: 48px;
    font-size: 11px;
    touch-action: manipulation;
  }

  .toggle-row {
    min-height: 66px;
    padding: 11px 13px;
    touch-action: manipulation;
  }
  .toggle-row b { font-size: 12px; }
  .toggle-row small { font-size: 10px; }

  .primary-action,
  .secondary-action {
    min-height: 44px;
    font-size: 11px;
    touch-action: manipulation;
  }

  .summary-total-card strong { font-size: 25px; }
  .summary-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summary-actions { grid-template-columns: 1fr; }

  /* The unified tool rail stays compact and disappears after a tool tap. */
  .shared-ui-host .tools-toolbar { gap: 8px; }
  .shared-ui-host .tool-launcher {
    min-width: 68px;
    height: 44px;
    padding: 0 15px;
    border-radius: 13px;
    touch-action: manipulation;
  }
  .shared-ui-host .tools-toolbar__panel { gap: 8px; }
  .shared-ui-host .round-tool {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    touch-action: manipulation;
  }

  /* Light/orientation becomes a bottom sheet instead of covering the tools. */
  .environment-panel {
    top: auto;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    left: 10px;
    z-index: 930;
    width: auto;
    max-height: min(68dvh, 440px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px;
    border-radius: 18px;
  }
  .environment-panel__header { margin-bottom: 15px; }
  .environment-panel__header strong { font-size: 18px; }
  .environment-panel__header button {
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 10px;
    font-size: 27px;
    touch-action: manipulation;
  }
  .environment-control { margin-top: 13px; }
  .environment-control > span { font-size: 12px; }
  .environment-control input[type="range"] { min-height: 36px; }

  /* BOM uses the entire phone viewport and keeps actions reachable. */
  .bom-panel[open] {
    inset: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
  .bom-header {
    align-items: center;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px 15px;
  }
  .bom-header h2 { font-size: 18px; }
  .bom-header p { font-size: 9px; line-height: 1.35; }
  .bom-close { width: 42px; height: 42px; flex: 0 0 42px; }
  .bom-scroll-region {
    min-height: 0;
    max-height: none;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 12px;
    -webkit-overflow-scrolling: touch;
  }
  .bom-disclaimer { margin-bottom: 10px; padding: 10px 11px; }
  .bom-table-wrap { -webkit-overflow-scrolling: touch; }
  .bom-table { min-width: 620px; }
  .bom-total-row { margin-top: 10px; }
  .bom-footer {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    gap: 8px;
  }
  .bom-footer .primary-action,
  .bom-footer .secondary-action { flex: 1; }
}

@media (max-width: 380px) {
  :root { --fence-panel-width: 95vw; }
  .panel-section,
  .accordion-panel { padding-left: 15px; padding-right: 15px; }
  .accordion-toggle { padding-left: 15px; padding-right: 15px; }
  .choice-grid { gap: 6px; }
  .choice-card { min-height: 82px; font-size: 8.5px; }
  .range-row { grid-template-columns: minmax(0, 1fr) 76px; gap: 8px; }
  .number-input { width: 76px; }
}

@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
  :root { --fence-panel-width: min(365px, 58vw); }
  #fenceSidebarToggle {
    top: auto !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 78px) !important;
    transform: none !important;
  }
  .intro-section { padding-top: 16px; padding-bottom: 14px; }
  .section-copy { display: none; }
  .environment-panel {
    right: 10px;
    bottom: 8px;
    left: 10px;
    max-height: calc(100dvh - var(--shared-topbar-height, 47px) - 16px);
    padding: 14px 16px;
  }
}

/* Keep the fifth layout mode balanced in the existing two-column selector. */
.layout-grid > .choice-card:last-child:nth-child(odd) { grid-column: 1 / -1; }