:root {
  color-scheme: light;
  --ink: #1f2724;
  --muted: #68716d;
  --line: #dfe4e1;
  --panel: #ffffff;
  --canvas: #edf0ed;
  --accent: #286753;
  --accent-dark: #174939;
  --accent-soft: #e6f0eb;
  --warn: #8b4e15;
  --warn-bg: #fff5e7;
  --danger: #a23b36;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { color: var(--ink); background: #f4f5f3; }
button, input, select { font: inherit; }
button, summary, select, input[type="checkbox"] { cursor: pointer; }

.app-shell { min-height: 100%; display: flex; flex-direction: column; }
.topbar {
  min-height: 76px; padding: 14px 22px; background: var(--ink); color: white;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.topbar h1, .sidebar h2 { margin: 2px 0 0; font-size: clamp(1.15rem, 2vw, 1.45rem); letter-spacing: -.02em; }
.eyebrow { margin: 0; color: #91a59d; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.project-actions { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.button, .icon-button {
  border: 1px solid transparent; border-radius: 8px; padding: 9px 12px; font-weight: 720; font-size: .78rem;
  color: white; background: var(--accent); transition: background .16s, border-color .16s, transform .16s;
}
.button:hover, .icon-button:hover { background: var(--accent-dark); }
.button:active, .icon-button:active { transform: translateY(1px); }
.button.ghost { background: transparent; border-color: #53615c; }
.button.ghost:hover { background: #313c38; }
.button.light { background: rgba(255,255,255,.92); color: var(--ink); border-color: rgba(31,39,36,.12); }
.button.light:hover { background: white; }
.button.small { padding: 7px 9px; }
.button.danger { color: var(--danger); background: #fff; border-color: #e9c9c6; }
.button.danger:hover { background: #fff2f1; }
.button:disabled, .icon-button:disabled { opacity: .4; cursor: not-allowed; transform: none; }

.workspace { flex: 1; min-height: 0; display: grid; grid-template-columns: 480px minmax(0, 1fr); }
.viewer-panel { grid-column: 2; grid-row: 1; position: sticky; top: 0; height: calc(100vh - 76px); min-height: 520px; overflow: hidden; background: var(--canvas); }
.viewer-panel.bay-drop-target::before {
  content: "";
  position: absolute; inset: 14px; z-index: 9;
  border: 1px solid rgba(40,103,83,.5); border-radius: 12px;
  background: rgba(23,73,57,.025); pointer-events: none;
}
#viewer { width: 100%; height: 100%; outline: none; }
#viewer canvas { display: block; width: 100%; height: 100%; }
.bay-drop-preview {
  position: absolute; z-index: 10; pointer-events: none;
}
.bay-drop-preview[hidden] { display: none; }
.bay-drop-preview.front-drop-guide {
  top: 18%; bottom: 13%; width: 2px; transform: translateX(-1px);
  border-radius: 2px; background: #39ad82;
  box-shadow: 0 0 0 3px rgba(57,173,130,.16), 0 0 14px rgba(23,73,57,.36);
}
.bay-drop-preview.front-drop-guide::before {
  content: "Place bay";
  position: absolute; top: -24px; left: 50%; transform: translateX(-50%);
  padding: 4px 7px; border-radius: 6px; color: #fff; background: #174939;
  font-size: .65rem; font-weight: 800; white-space: nowrap;
}
.viewer-plan, .viewer-wall {
  position: absolute; inset: 0; z-index: 1; overflow: hidden; background: #f8f8f5;
  touch-action: none; user-select: none;
}
.viewer-plan[hidden], .viewer-wall[hidden] { display: none; }
.viewer-plan svg, .viewer-wall svg { display: block; width: 100%; height: 100%; }
.viewer-plan .plan-wall { fill: url(#wallHatch); stroke: #9ba29f; stroke-width: 1.5; transition: filter .12s, stroke .12s; }
.viewer-plan .plan-drag-wall { cursor: grab; }
.viewer-plan .plan-drag-wall:hover,
.viewer-plan .plan-drag-wall.active { stroke: #286753; stroke-width: 3; filter: drop-shadow(0 2px 4px rgba(40,103,83,.2)); }
.viewer-plan .plan-opening-handle { cursor: ew-resize; fill: #d8a13d; stroke: #fff; stroke-width: 3; filter: drop-shadow(0 2px 3px rgba(95,63,16,.28)); }
.viewer-plan .plan-dimension { stroke: #83694d; stroke-width: 2; fill: none; }
.viewer-plan .plan-dim-label rect { fill: rgba(255,255,255,.94); stroke: #ded8cf; stroke-width: 1; }
.viewer-plan .plan-dim-label text { fill: #46392e; font-size: 17px; font-weight: 750; }
.viewer-plan .plan-focus { cursor: pointer; }
.viewer-plan .plan-focus:hover rect { stroke: #286753; }
.viewer-plan .plan-dimension-control { cursor: text; }
.viewer-plan .plan-dimension-control:hover .plan-dimension { stroke: #286753; stroke-width: 3; }
.viewer-plan .plan-dimension-control:hover .plan-dim-label rect {
  stroke: #286753;
  filter: drop-shadow(0 2px 3px rgba(40,103,83,.18));
}
.plan-inline-input {
  position: absolute; z-index: 8; width: 126px; height: 40px; transform: translate(-50%, -50%);
  border: 2px solid #286753; border-radius: 8px; outline: none; background: #fff; color: #1f2724;
  box-shadow: 0 6px 20px rgba(31,39,36,.2); font: 750 1rem/1 system-ui, sans-serif; text-align: center;
}
.plan-inline-input:focus { box-shadow: 0 0 0 4px rgba(40,103,83,.16), 0 6px 20px rgba(31,39,36,.2); }
.plan-inline-input.invalid { border-color: #b44e3b; box-shadow: 0 0 0 4px rgba(180,78,59,.14); }
.viewer-plan .plan-note { fill: #68716d; font-size: 14px; font-weight: 650; letter-spacing: .02em; }
.viewer-plan .plan-title { fill: #1f2724; font-size: 24px; font-weight: 820; }
.viewer-plan .plan-wardrobe { fill: rgba(82,141,117,.2); stroke: #286753; stroke-width: 2; }
.viewer-plan .plan-section-line { stroke: rgba(40,103,83,.58); stroke-width: 1.5; }
.viewer-wall { background: #f1f3f0; }
.viewer-wall .wall-grid-minor { stroke: #e7eae6; stroke-width: 1; }
.viewer-wall .wall-grid-major { stroke: #d9ded9; stroke-width: 1.2; }
.viewer-wall .wall-surface { fill: #636363; stroke: #303633; stroke-width: 2; }
.viewer-wall .wall-floor { stroke: #2d3632; stroke-width: 5; }
.viewer-wall .wall-note { fill: #77817c; font-size: 11px; font-weight: 580; letter-spacing: .015em; }
.viewer-wall .wall-dimension { stroke: #3f806a; stroke-width: 1; opacity: .78; fill: none; }
.viewer-wall .wall-dimension-label { fill: #285d4c; font-size: 11.5px; font-weight: 650; paint-order: stroke; stroke: #f1f3f0; stroke-width: 2.5; stroke-linejoin: round; }
.viewer-wall .wall-bay-dimension .wall-dimension { opacity: .64; }
.viewer-wall .wall-bay-dimension .wall-dimension-label { font-size: 10.5px; font-weight: 620; }
.viewer-wall .wall-run-dimension .wall-dimension-label { font-size: 11px; }
.viewer-wall .wall-bay { cursor: grab; }
.viewer-wall .wall-bay:active { cursor: grabbing; }
.viewer-wall .wall-bay-hit { fill: transparent; stroke: transparent; stroke-width: 3; pointer-events: all; }
.viewer-wall .wall-bay:hover .wall-bay-hit { fill: transparent; stroke: rgba(144,213,184,.7); }
.viewer-wall .wall-bay.selected .wall-bay-hit { fill: transparent; stroke: #38b487; stroke-width: 1.5; }
.viewer-wall .wall-panel { fill: #f7f7f4; stroke: #d7dcd8; stroke-width: 1; }
.viewer-wall .wall-interior { stroke: #f7f7f4; stroke-width: 5; stroke-linecap: square; }
.viewer-wall .wall-rail { stroke: #171a19; stroke-width: 5; stroke-linecap: round; }
.viewer-wall .wall-stl-face { fill: #f7f7f4; stroke: #f7f7f4; stroke-width: 1; stroke-linejoin: round; pointer-events: none; }
.viewer-wall .wall-stl-rail { fill: #171a19; stroke: none; }
.viewer-wall .wall-stl-rail-solid { fill: none; stroke: #171a19; stroke-linecap: butt; pointer-events: none; }
.viewer-wall .wall-drawer-front {
  fill: #f7f7f4;
  stroke: #b7bfbb;
  stroke-width: .8;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.viewer-wall .wall-resize { cursor: ew-resize; }
.viewer-wall .wall-resize .handle-hit { fill: transparent; }
.viewer-wall .wall-resize .handle-mark {
  fill: none; stroke: #2d9a72; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.viewer-wall .wall-resize .handle-line { stroke: #2d9a72; stroke-width: 1.4; stroke-linecap: round; opacity: .86; }
.viewer-wall .wall-resize:hover .handle-mark,
.viewer-wall .wall-resize.active .handle-mark { stroke: #174939; }
.viewer-wall .wall-resize:hover .handle-line,
.viewer-wall .wall-resize.active .handle-line { stroke: #174939; opacity: 1; }
.viewer-wall .wall-height-resize { cursor: ns-resize; }
.viewer-wall .wall-height-resize .handle-hit { fill: transparent; }
.viewer-wall .wall-height-resize .handle-mark {
  fill: none; stroke: #2d9a72; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.viewer-wall .wall-height-resize .handle-line,
.viewer-wall .wall-height-resize .height-guide {
  stroke: #2d9a72; stroke-width: 1.3; stroke-linecap: round; opacity: .82;
}
.viewer-wall .wall-height-resize .height-guide { stroke-dasharray: 3 3; opacity: .52; }
.viewer-wall .wall-height-resize:hover .handle-mark,
.viewer-wall .wall-height-resize.active .handle-mark,
.viewer-wall .wall-height-resize:hover .handle-line,
.viewer-wall .wall-height-resize.active .handle-line { stroke: #174939; opacity: 1; }
.viewer-wall .height-input-object { overflow: visible; }
.viewer-wall .wall-height-input-wrap {
  box-sizing: border-box; display: flex; align-items: center; width: max-content; min-width: 62px;
  height: 26px; padding: 0 4px 0 2px; border: 1px solid transparent;
  border-radius: 6px; color: #285d4c; background: transparent;
  box-shadow: none; font: 650 10.5px/1 system-ui, sans-serif;
  text-shadow: -1px 0 #f1f3f0, 0 1px #f1f3f0, 1px 0 #f1f3f0, 0 -1px #f1f3f0;
}
.viewer-wall .wall-height-input-wrap:hover {
  border-color: rgba(40,93,76,.2); background: rgba(255,255,255,.84);
}
.viewer-wall .wall-height-input-wrap:focus-within {
  border-color: #2d9a72; background: #fff; text-shadow: none;
  box-shadow: 0 0 0 1px rgba(45,154,114,.16);
}
.viewer-wall .wall-height-input {
  width: 39px; min-width: 0; padding: 2px 2px 2px 0; border: 0; outline: 0;
  color: inherit; background: transparent; font: inherit; text-align: right;
  appearance: textfield; -moz-appearance: textfield;
}
.viewer-wall .wall-height-input::-webkit-inner-spin-button,
.viewer-wall .wall-height-input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.viewer-wall .wall-height-input-wrap span { white-space: nowrap; pointer-events: none; }
.viewer-wall .room-height-input-object { overflow: visible; }
.viewer-wall .wall-room-height-input-wrap {
  box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  width: 72px; height: 22px; padding: 0 3px; border: 1px solid transparent;
  border-radius: 5px; color: #285d4c; background: transparent;
  font: 650 11.5px/1 system-ui, sans-serif;
  text-shadow: -1px 0 #f1f3f0, 0 1px #f1f3f0, 1px 0 #f1f3f0, 0 -1px #f1f3f0;
}
.viewer-wall .wall-room-height-input-wrap:hover {
  border-color: rgba(40,93,76,.2); background: rgba(255,255,255,.84);
}
.viewer-wall .wall-room-height-input-wrap:focus-within {
  border-color: #2d9a72; background: #fff; text-shadow: none;
  box-shadow: 0 0 0 1px rgba(45,154,114,.16);
}
.viewer-wall .wall-room-height-input {
  width: 43px; min-width: 0; padding: 1px 3px 1px 0; border: 0; outline: 0;
  color: inherit; background: transparent; font: inherit; text-align: right;
  appearance: textfield; -moz-appearance: textfield;
}
.viewer-wall .wall-room-height-input::-webkit-inner-spin-button,
.viewer-wall .wall-room-height-input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.viewer-wall .wall-room-height-input-wrap span { white-space: nowrap; pointer-events: none; }
.viewer-wall .wall-snap-guide { stroke: #d7a23c; stroke-width: 2; stroke-dasharray: 7 6; }
.viewer-wall .wall-empty { fill: #fff; stroke: #d9dedb; stroke-width: 1.5; }
.viewer-help {
  position: absolute; z-index: 3; left: 16px; top: 14px; padding: 7px 10px; border-radius: 7px;
  color: #52605a; background: rgba(255,255,255,.82); backdrop-filter: blur(8px); font-size: .7rem;
}
.viewer-top-controls {
  position: absolute; z-index: 5; left: 16px; top: 14px; display: flex; align-items: center; gap: 8px;
}
.viewer-joint-switch {
  display: flex; align-items: center; gap: 3px;
  padding: 4px; border: 1px solid rgba(31,39,36,.12); border-radius: 9px;
  color: #52605a; background: rgba(255,255,255,.9); backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(31,39,36,.06);
}
.viewer-joint-switch > span { padding: 0 6px; font-size: .64rem; font-weight: 750; }
.viewer-joint-option {
  border: 0; border-radius: 6px; padding: 6px 9px; color: #52605a; background: transparent;
  font-size: .68rem; font-weight: 750; cursor: pointer;
}
.viewer-joint-option:hover { color: var(--accent-dark); background: #edf3f0; }
.viewer-joint-option.active { color: #fff; background: var(--accent); }
.viewer-transparency-toggle {
  display: grid; flex: 0 0 auto; place-items: center; width: 38px; height: 38px; padding: 0;
  border: 1px solid rgba(31,39,36,.12); border-radius: 9px;
  color: #52605a; background: rgba(255,255,255,.9); backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(31,39,36,.06); cursor: pointer;
  transition: color .16s, background .16s, border-color .16s, transform .16s;
}
.viewer-transparency-toggle:hover { color: var(--accent-dark); background: #fff; }
.viewer-transparency-toggle:active { transform: translateY(1px); }
.viewer-transparency-toggle.active { color: #fff; background: var(--accent); border-color: var(--accent); }
.viewer-transparency-toggle:focus-visible { outline: 3px solid rgba(40,103,83,.24); outline-offset: 2px; }
.viewer-transparency-toggle svg {
  width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; pointer-events: none;
}
.top-drag-hint, .front-drag-hint {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 4;
  max-width: min(520px, calc(100% - 300px)); padding: 8px 11px; border-radius: 8px;
  color: #fff; background: rgba(31,39,36,.9); font-size: .7rem; font-weight: 700; text-align: center;
  backdrop-filter: blur(8px); pointer-events: none;
}
.front-drag-hint { top: auto; bottom: 64px; background: rgba(40,103,83,.94); }
.view-controls { position: absolute; z-index: 3; display: flex; flex-wrap: wrap; gap: 6px; left: 16px; bottom: 16px; max-width: calc(100% - 32px); }
.icon-button { color: var(--ink); background: rgba(255,255,255,.88); border-color: rgba(31,39,36,.12); backdrop-filter: blur(8px); }
.icon-button:hover, .icon-button.active { color: #fff; background: var(--accent); }
.icon-button:disabled:hover { color: var(--ink); background: rgba(255,255,255,.88); }
.undo-button { border-color: rgba(40,103,83,.25); }
.viewer-brand {
  position: absolute; z-index: 3; right: 16px; bottom: 16px; width: 64px; height: auto;
  box-sizing: content-box; padding: 8px; border-radius: 10px; background: rgba(31,39,36,.9);
  box-shadow: 0 6px 18px rgba(31,39,36,.16); pointer-events: none; user-select: none;
}
.viewer-remove-bay {
  position: absolute; z-index: 7; display: grid; place-items: center; width: 29px; height: 29px;
  padding: 0; border: 2px solid rgba(255,255,255,.96); border-radius: 50%; color: #fff;
  background: #d84a4a; box-shadow: 0 4px 12px rgba(93,24,24,.28);
  transform: translate(-40%, -60%); cursor: pointer; touch-action: manipulation;
}
.viewer-remove-bay[hidden] { display: none; }
.viewer-remove-bay:hover { background: #b93434; transform: translate(-40%, -60%) scale(1.06); }
.viewer-remove-bay:focus-visible { outline: 3px solid rgba(216,74,74,.3); outline-offset: 2px; }
.viewer-remove-bay svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.selection-badge { position: absolute; z-index: 3; right: 16px; bottom: 116px; background: #1f2724; color: white; border-radius: 999px; padding: 8px 12px; font-size: .76rem; }
.viewer-panel.plan-mode .viewer-help,
.viewer-panel.plan-mode .viewer-joint-switch,
.viewer-panel.plan-mode .selection-badge,
.viewer-panel.plan-mode .top-drag-hint,
.viewer-panel.plan-mode .front-drag-hint { display: none; }
.viewer-panel.wall-mode .viewer-help,
.viewer-panel.wall-mode .front-drag-hint,
.viewer-panel.wall-mode .top-drag-hint { display: none; }

.sidebar {
  grid-column: 1; grid-row: 1; position: relative; z-index: 11; background: var(--panel); border-right: 1px solid var(--line);
  overflow-x: hidden; overflow-y: auto; height: calc(100vh - 76px); padding: 18px;
}
.sidebar-heading {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding-bottom: 12px;
}
.sidebar h2 { font-size: 1.12rem; }
.save-status { color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 4px 6px; font-size: .6rem; font-weight: 750; white-space: nowrap; }
.dashboard-tabs {
  position: relative; display: grid; grid-template-columns: 1.15fr .75fr .9fr 1.25fr .8fr; gap: 2px;
  align-items: stretch; border-bottom: 1px solid var(--line);
}
.dashboard-tabs details { grid-row: 1; min-width: 0; }
summary {
  grid-row: 1; list-style: none; min-width: 0; padding: 14px 8px; border-bottom: 2px solid transparent;
  color: var(--muted); background: #f5f7f5; font-size: .8rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap;
}
summary::-webkit-details-marker { display: none; }
summary::after { display: none; }
details[open] > summary {
  color: var(--accent-dark); background: var(--accent-soft); border-bottom-color: var(--accent);
}
.details-flyout {
  display: none; position: absolute; z-index: 2; top: 100%; left: 0; width: 100%;
  min-width: 0;
  padding: 16px 2px 18px; background: var(--panel);
}
details[open] > .details-flyout { display: block; }

.control-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.control-grid label, .section-field { color: #48524e; font-size: .74rem; font-weight: 720; }
.control-grid .full { grid-column: 1 / -1; }
.unit-input { display: flex; align-items: center; margin-top: 4px; border: 1px solid #ccd3cf; border-radius: 8px; overflow: hidden; background: #fff; }
.unit-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.unit-input input { min-width: 0; width: 100%; border: 0; padding: 8px 5px 8px 8px; outline: 0; color: var(--ink); }
.unit-input span { padding-right: 8px; color: #84908a; font-size: .67rem; font-weight: 650; }
.door-toggle { position: relative; display: flex; align-items: center; gap: 9px; width: fit-content; cursor: pointer; user-select: none; }
.door-toggle[hidden] { display: none; }
.door-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.door-toggle-track { position: relative; flex: 0 0 auto; width: 40px; height: 22px; border-radius: 999px; background: #c9cfcc; box-shadow: inset 0 0 0 1px rgba(31,39,36,.08); transition: background .2s ease; }
.door-toggle-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(31,39,36,.3); transition: transform .24s cubic-bezier(.2,.8,.2,1); }
.door-toggle input:checked + .door-toggle-track { background: var(--accent); }
.door-toggle input:checked + .door-toggle-track::after { transform: translateX(18px); }
.door-toggle input:focus-visible + .door-toggle-track { outline: 3px solid var(--accent-soft); outline-offset: 2px; }
select { width: 100%; margin-top: 6px; border: 1px solid #ccd3cf; border-radius: 8px; padding: 9px; background: #fff; color: var(--ink); }
.toggle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 11px; }
.toggle-grid label, .check-row { color: #4f5a55; font-size: .73rem; display: flex; gap: 7px; align-items: center; }
.check-row { margin-top: 14px; }
input[type="checkbox"] { accent-color: var(--accent); }
.return-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }
.return-summary span { background: #f3f5f3; border-radius: 7px; padding: 9px; color: var(--muted); font-size: .68rem; }
.return-summary strong { display: block; color: var(--ink); font-size: .8rem; margin-top: 2px; }

.entrance-style-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.entrance-style-field legend { color: #48524e; font-size: .74rem; font-weight: 720; }
.entrance-style-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.entrance-style-option {
  position: relative; display: grid; min-width: 0; gap: 6px; padding: 7px 6px 9px;
  border: 1px solid #d9dfdc; border-radius: 9px; color: #44504b; background: #fff;
  font-size: .7rem; font-weight: 780; text-align: center;
  transition: border-color .14s, box-shadow .14s, transform .14s, background .14s;
}
.entrance-style-option:hover { border-color: #8eb6a6; background: #fbfdfc; transform: translateY(-1px); }
.entrance-style-option:focus-visible { outline: 3px solid rgba(40,103,83,.18); outline-offset: 1px; }
.entrance-style-option.selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
.entrance-style-option.selected::after {
  content: "✓"; position: absolute; top: 6px; right: 6px; width: 17px; height: 17px;
  display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--accent);
  font-size: .62rem; box-shadow: 0 1px 4px rgba(31,39,36,.2);
}
.entrance-style-option svg { display: block; width: 100%; height: auto; border-radius: 6px; background: #f3f5f3; }
.entrance-art-wall { fill: #dde2df; }
.entrance-art-opening { fill: #7a837f; }
.entrance-art-frame, .entrance-art-floor { fill: none; stroke: #53605b; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.entrance-art-floor { stroke: #bac2be; stroke-width: 1.5; }
.entrance-art-panel { fill: #fafbf9; stroke: #aeb7b2; stroke-width: 1.2; }
.entrance-art-panel-alt { fill: #e8ece9; }
.entrance-art-track { fill: none; stroke: #53605b; stroke-width: 1.6; stroke-linecap: round; }

.section-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 10px; }
.section-toolbar > span { margin-right: auto; font-size: .75rem; color: var(--muted); }
.bay-visual-editor[hidden] { display: none; }
.bay-visual-editor {
  margin-bottom: 11px; padding: 10px; border: 1px solid var(--line); border-radius: 11px;
  background: #f8faf8;
}
.bay-editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.bay-editor-heading span { color: var(--muted); font-size: .67rem; font-weight: 700; }
.bay-editor-heading strong { color: var(--ink); font-size: .76rem; }
.bay-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.bay-choice {
  position: relative; min-width: 0; padding: 7px 7px 9px; border: 1px solid #d9dfdc;
  border-radius: 10px; color: #44504b; background: #fff; font-size: .72rem; font-weight: 760;
  transition: border-color .14s, box-shadow .14s, transform .14s, background .14s;
}
.bay-choice:hover { border-color: #8eb6a6; background: #fbfdfc; transform: translateY(-1px); }
.bay-choice[data-bay-preset] { cursor: grab; touch-action: none; }
.bay-choice.dragging { opacity: .5; transform: scale(.98); cursor: grabbing; }
.bay-choice:focus-visible { outline: 3px solid rgba(40,103,83,.18); outline-offset: 1px; }
.bay-choice img, .bay-remove-art {
  display: grid; width: 100%; aspect-ratio: 1; margin-bottom: 5px; border-radius: 6px;
  place-items: center; object-fit: contain; background: #f3f5f3;
}
.bay-choice img { height: auto; padding: 6px; image-rendering: auto; }
.bay-choice.selected {
  border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent);
}
.bay-choice.selected::after {
  content: "✓"; position: absolute; top: 7px; right: 7px; width: 18px; height: 18px;
  display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--accent);
  font-size: .65rem; box-shadow: 0 1px 4px rgba(31,39,36,.2);
}
.bay-choice.remove { color: var(--danger); border-color: #e8cecb; }
.bay-choice.remove:hover { border-color: #cf8d87; background: #fff4f3; }
.bay-choice:disabled { opacity: .42; cursor: not-allowed; transform: none; }
.shelves-drawer-options {
  margin: 10px 0 0;
  padding: 10px;
  border: 1px solid #d9dfdc;
  border-radius: 9px;
  background: #fff;
}
.shelves-drawer-options legend {
  padding: 0 5px;
  color: var(--ink);
  font-size: .72rem;
  font-weight: 800;
}
.shelves-drawer-options p,
.shelves-drawer-options small {
  display: block;
  margin: 0;
  color: var(--muted);
  font-size: .64rem;
  line-height: 1.4;
}
.drawer-slot-grid { display: grid; gap: 5px; margin: 8px 0; }
.drawer-slot-grid label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 8px;
  border: 1px solid #e0e5e2;
  border-radius: 7px;
  color: #44504b;
  background: #f8faf8;
  font-size: .68rem;
  font-weight: 720;
  cursor: pointer;
}
.drawer-slot-grid label:has(input:checked) {
  border-color: var(--accent);
  color: var(--accent-dark);
  background: var(--accent-soft);
}
.drawer-slot-grid input { accent-color: var(--accent); }
.bay-remove-art { color: var(--danger); background: #fff5f4; }
.bay-remove-art svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.section-list { display: grid; gap: 7px; }
.section-card { border: 1px solid var(--line); border-radius: 9px; padding: 9px; background: #fafbfa; display: grid; grid-template-columns: 32px minmax(82px, 1fr) auto; gap: 7px; align-items: end; cursor: pointer; }
.section-card.selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
.section-card button { width: 30px; height: 37px; border: 0; border-radius: 7px; background: #fff; color: var(--accent); font-weight: 800; }
.section-field input { width: 100%; margin-top: 4px; padding: 7px; height: 36px; border: 1px solid #ccd3cf; border-radius: 7px; color: var(--ink); background: #fff; }
.section-type-display { display: grid; gap: 4px; min-width: 70px; padding: 0 4px 4px; color: #65706b; font-size: .64rem; }
.section-type-display strong { color: var(--accent-dark); font-size: .72rem; }
.microcopy { margin: 9px 0 0; color: #7b8580; font-size: .66rem; line-height: 1.4; }

.validation { display: none; margin-bottom: 12px; padding: 10px 12px; border-left: 3px solid #d28833; border-radius: 7px; background: var(--warn-bg); color: var(--warn); font-size: .72rem; line-height: 1.45; }
.validation.visible { display: block; }
.validation ul { margin: 0; padding-left: 17px; }
.toast { position: fixed; z-index: 20; left: 50%; bottom: 22px; transform: translate(-50%, 18px); background: #1f2724; color: white; padding: 10px 14px; border-radius: 8px; opacity: 0; pointer-events: none; transition: .2s; font-size: .76rem; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 920px) {
  .topbar { align-items: flex-start; padding: 12px 14px; }
  .project-actions { max-width: 65%; }
  .workspace { display: block; }
  .viewer-panel { position: relative; height: 56vh; min-height: 420px; }
  .sidebar { z-index: auto; height: auto; overflow: visible; border-right: 0; border-top: 1px solid var(--line); max-width: none; }
  .dashboard-tabs { display: block; border-bottom: 0; }
  .dashboard-tabs details { display: block; border-top: 1px solid var(--line); }
  .dashboard-tabs details:last-of-type { border-bottom: 1px solid var(--line); }
  summary {
    padding: 12px 1px; border-bottom: 0; color: var(--ink); background: transparent;
    font-size: .8rem; justify-content: space-between; text-align: left;
  }
  summary::after { content: "+"; display: block; color: var(--muted); font-size: 1.1rem; }
  details[open] summary::after { content: "−"; }
  details[open] > summary { color: var(--accent-dark); background: transparent; }
  .details-flyout {
    position: static; width: auto; max-height: none; overflow: visible;
    padding: 0 0 17px; background: transparent;
  }
  .viewer-top-controls { top: 14px; left: 12px; }
}

@media (max-width: 600px) {
  .topbar { min-height: auto; display: block; }
  .project-actions { max-width: none; justify-content: flex-start; margin-top: 11px; }
  .project-actions .button { font-size: .68rem; padding: 7px 8px; }
  .viewer-panel { height: 58vh; min-height: 380px; }
  .viewer-help { display: none; }
  .top-drag-hint, .front-drag-hint { max-width: calc(100% - 20px); font-size: .64rem; }
  .top-drag-hint { top: 88px; }
  .front-drag-hint { bottom: 92px; }
  .viewer-top-controls { top: 10px; left: 10px; gap: 6px; }
  .viewer-transparency-toggle { width: 35px; height: 35px; }
  .view-controls { left: 10px; bottom: 10px; max-width: calc(100% - 20px); }
  .icon-button { padding: 7px 8px; font-size: .67rem; }
  .viewer-brand { right: 10px; bottom: 58px; width: 46px; padding: 6px; border-radius: 8px; }
  .viewer-remove-bay { width: 27px; height: 27px; }
  .selection-badge { bottom: 142px; right: 10px; }
  .sidebar { padding: 18px 14px; }
  .sidebar-heading { padding-bottom: 12px; }
  .control-grid { gap: 9px; }
  .bay-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-card { grid-template-columns: 30px 1fr auto; }
}