* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: "Inter", system-ui, -apple-system, sans-serif;
  background: #eef0f4; color: #23272e; display: flex; flex-direction: column;
  overflow: hidden;
}

/* top bar */
.rp-header {
  display: flex; align-items: center; gap: 14px; padding: 10px 18px;
  background: #ffffff; border-bottom: 1px solid #dde0e6; z-index: 10;
}
.rp-header a.rp-back { color: #6b7280; text-decoration: none; font-size: 14px; }
.rp-header a.rp-back:hover { color: #23272e; }
.rp-header h1 { font-size: 16px; margin: 0; font-weight: 600; }
.rp-header .rp-tag {
  font-size: 12px; color: #5b6470; background: #eef2f8;
  padding: 3px 10px; border-radius: 99px; white-space: nowrap;
}
@media (max-width: 1080px) { .rp-header .rp-tag { display: none; } }
.rp-header .rp-spacer { flex: 1; }

.rp-btn {
  font: inherit; font-size: 13px; padding: 7px 14px; border-radius: 8px;
  border: 1px solid #d4d8df; background: #fff; color: #23272e; cursor: pointer;
}
.rp-btn:hover { background: #f4f6f9; }
.rp-btn.primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.rp-btn.primary:hover { background: #1d4fd8; }
.rp-btn.active { background: #2563eb; border-color: #2563eb; color: #fff; }
.rp-btn:disabled { opacity: 0.45; cursor: default; }

/* main split */
.rp-main { flex: 1; display: flex; min-height: 0; }
.rp-side {
  width: 340px; min-width: 340px; background: #fff; border-right: 1px solid #dde0e6;
  padding: 18px; overflow-y: auto;
}
.rp-view { flex: 1; position: relative; min-width: 0; }
.rp-view canvas { display: block; }

/* forms */
.rp-side h2 { font-size: 14px; margin: 0 0 10px; }
.rp-side .hint { font-size: 12.5px; color: #6b7280; line-height: 1.5; }
.rp-field { margin: 10px 0; }
.rp-field label { display: block; font-size: 12px; color: #4b5563; margin-bottom: 4px; }
.rp-field input, .rp-field select {
  width: 100%; font: inherit; font-size: 14px; padding: 7px 9px;
  border: 1px solid #d4d8df; border-radius: 8px; background: #fff;
}
.rp-row { display: flex; gap: 10px; }
.rp-row .rp-field { flex: 1; }

/* selected-opening inspector (width / height / sill) */
.rp-inspector {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  background: #fff; border: 1px solid #dde0e6; border-radius: 10px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 6px;
  font-size: 12px; color: #4b5563; box-shadow: 0 2px 10px rgba(20, 24, 32, 0.06);
}
.rp-inspector .t { font-weight: 600; font-size: 12.5px; color: #23272e; }
.rp-inspector label { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rp-inspector input {
  width: 72px; font: inherit; padding: 3px 6px;
  border: 1px solid #d4d8df; border-radius: 6px;
}
.rp-inspector .btns { display: flex; gap: 6px; margin-top: 2px; }
.rp-inspector .btns .rp-btn { flex: 1; padding: 4px 8px; font-size: 12px; }

/* context menu (right-click / long-press) */
.rp-menu {
  position: absolute; z-index: 8; min-width: 160px; display: flex; flex-direction: column;
  background: #fff; border: 1px solid #dde0e6; border-radius: 10px; padding: 4px;
  box-shadow: 0 6px 24px rgba(20, 24, 32, 0.14);
}
.rp-menu button {
  font: inherit; font-size: 13px; text-align: left; padding: 8px 12px;
  border: none; background: none; border-radius: 7px; cursor: pointer; color: #23272e;
}
.rp-menu button:hover { background: #eef2f8; }

/* the Add menu: the furniture library, and the way into the creator */
.rp-lib { position: fixed; z-index: 30; min-width: 250px; max-height: min(72vh, 480px); overflow-y: auto; }
.rp-lib .hd {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: #8a93a1; padding: 8px 12px 4px;
}
.rp-lib button { display: flex; flex-direction: column; gap: 1px; }
.rp-lib .nm { color: #23272e; }
.rp-lib .dm { font-size: 11.5px; color: #8a93a1; font-variant-numeric: tabular-nums; }
.rp-lib .sep { height: 1px; background: #eceef2; margin: 4px 6px; }
.rp-lib .creator { font-weight: 600; color: #2563eb; }
.rp-lib button:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }
.rp-lib .lib-row { display: flex; align-items: stretch; gap: 2px; }
.rp-lib .lib-row > button:first-child { flex: 1; min-width: 0; }
.rp-lib .lib-edit {
  flex: none; width: 34px; align-items: center; justify-content: center; color: #8a93a1;
  font-size: 14px; border-radius: 7px;
}
.rp-lib .lib-edit:hover { background: #eef2f8; color: #2563eb; }


/* zoom / fit controls in the 2D pane */
.rp-zoombar {
  position: absolute; right: 12px; bottom: calc(12px + var(--bars, 0px)); display: flex; gap: 4px; z-index: 5;
  background: #fff; padding: 4px; border-radius: 10px; border: 1px solid #dde0e6;
  box-shadow: 0 2px 10px rgba(20, 24, 32, 0.06);
}
.rp-zoombar .rp-btn { padding: 4px 11px; font-size: 14px; border: none; }
.rp-zoombar .rp-btn:hover { background: #eef2f8; }

/* clickable dimension labels + inline length editor */
.rp-pane svg text.dim { cursor: pointer; }
.rp-pane svg text.dim:hover { fill: #2563eb; font-weight: 600; }
.rp-dim-input {
  position: absolute; width: 88px; z-index: 6; text-align: center;
  font: 13px "Inter", system-ui, sans-serif; padding: 4px 6px;
  border: 1.5px solid #2563eb; border-radius: 7px; background: #fff;
  box-shadow: 0 2px 10px rgba(20, 24, 32, 0.12);
}


/* floating HUD label in 3D views */
/* the session: Share, and who is here */
.rp-live { display: flex; align-items: center; gap: 8px; min-width: 0; flex-shrink: 1; overflow: hidden; }
.rp-header h1 { white-space: nowrap; }
/* the header's tagline gives way before anything that is used */
@media (max-width: 1380px) { .rp-header .rp-tag { display: none; } }
.rp-peers { flex-wrap: nowrap; overflow: hidden; }
.rp-peers { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.rp-peer-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #4b5563;
  background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 99px; padding: 2px 9px 2px 6px; white-space: nowrap; }
.rp-peer-chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--c, #888); display: inline-block; }
.rp-peer-chip.me { cursor: text; }
.rp-live.tabs-only #shareBtn { border-style: dashed; }
.rp-peer-chip.me:hover { border-color: #93a4c4; }
.rp-peer-name { font: inherit; font-size: 12px; width: 110px; padding: 2px 8px; border: 1px solid #93a4c4; border-radius: 99px; }
/* the others' pointers on the plan */
.rp-peerlayer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 6; }
.rp-peer { position: absolute; transform: translate(-50%, -50%); pointer-events: none; font-size: 11px; color: #fff;
  background: var(--c, #888); padding: 1px 7px 1px 14px; border-radius: 99px; white-space: nowrap; opacity: 0.92;
  transition: left 0.09s linear, top 0.09s linear; }
.rp-peer::before { content: ''; position: absolute; left: 4px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
  border-radius: 50%; background: #fff; }
.rp-peer.far { opacity: 0.55; }
@media (max-width: 820px) { .rp-live { display: none; } }

/* ---- the assistant: a button in the header, a panel sliding in from the right */
.rp-ai-btn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; font-weight: 600;
  color: #fff; background: linear-gradient(135deg, #2563eb, #7c3aed); border: none; border-radius: 999px;
  padding: 6px 13px 6px 10px; cursor: pointer; position: relative; box-shadow: 0 2px 8px rgba(37, 99, 235, .25); }
.rp-ai-btn:hover { filter: brightness(1.07); }
.rp-ai-btn:focus-visible { outline: 2px solid #93b6f2; outline-offset: 2px; }
.rp-ai-btn.busy svg { animation: rp-ai-pulse 1.2s ease-in-out infinite; }
.rp-ai-dot { position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%; background: #f97316; border: 2px solid #fff; }
@keyframes rp-ai-pulse { 50% { opacity: .35; transform: scale(.85); } }
.rp-ai { position: fixed; top: 58px; right: 0; bottom: 0; width: min(390px, 100vw); z-index: 40;
  display: flex; flex-direction: column; background: #fff; border-left: 1px solid #dde0e6;
  box-shadow: -8px 0 28px rgba(20, 24, 32, .10); animation: rp-ai-in .18s ease-out; }
.rp-ai[hidden] { display: none; }
@keyframes rp-ai-in { from { transform: translateX(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rp-ai { animation: none; } .rp-ai-btn.busy svg, .rp-ai-spin { animation: none; } }
.rp-ai-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid #eef0f3; }
.rp-ai-title { font-weight: 650; font-size: 15px; color: #23272e; }
.rp-ai-sub { font-size: 12px; color: #6b7280; margin-top: 2px; }
.rp-ai-x { border: none; background: none; font-size: 22px; line-height: 1; color: #6b7280; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.rp-ai-x:hover { background: #f3f4f6; color: #23272e; }
.rp-ai-log { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.rp-ai-msg { font-size: 13.5px; line-height: 1.5; color: #23272e; max-width: 92%; }
.rp-ai-msg p { margin: 0 0 6px; } .rp-ai-msg p:last-child { margin-bottom: 0; }
.rp-ai-msg .who { font-size: 11.5px; font-weight: 600; color: #6b7280; margin-bottom: 3px; display: flex; align-items: center; gap: 5px; }
.rp-ai-msg .who i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, #888); display: inline-block; }
.rp-ai-msg.user { align-self: flex-end; background: #eef3fe; border: 1px solid #dbe6fd; border-radius: 12px 12px 4px 12px; padding: 8px 11px; }
.rp-ai-msg.bot { align-self: flex-start; background: #f7f7f9; border: 1px solid #eceef2; border-radius: 12px 12px 12px 4px; padding: 8px 11px; }
.rp-ai-msg.bot .who { color: #7c3aed; }
.rp-ai-msg.acts { align-self: flex-start; font-size: 12px; color: #4b5563; padding: 2px 4px; }
.rp-ai-msg.acts ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.rp-ai-msg.acts li::before { content: '✓'; color: #16a34a; margin-right: 6px; }
.rp-ai-msg.acts li.bad { color: #b3261e; } .rp-ai-msg.acts li.bad::before { content: ''; margin: 0; }
.rp-ai-undo { margin-top: 6px; font: inherit; font-size: 12px; color: #2563eb; background: none; border: 1px solid #c9d7f7; border-radius: 8px; padding: 3px 9px; cursor: pointer; }
.rp-ai-undo:hover { background: #eef3fe; }
.rp-ai-msg.note { align-self: center; font-size: 12px; color: #6b7280; font-style: italic; text-align: center; max-width: 100%; }
.rp-ai-empty { color: #4b5563; font-size: 13px; line-height: 1.55; }
.rp-ai-empty p { margin: 0 0 10px; }
.rp-ai-sugg { display: flex; flex-direction: column; gap: 6px; }
.rp-ai-sugg button { text-align: left; font: inherit; font-size: 12.5px; color: #23272e; background: #fff; border: 1px solid #dde0e6; border-radius: 10px; padding: 7px 10px; cursor: pointer; }
.rp-ai-sugg button:hover { border-color: #93b6f2; background: #f7f9ff; }
.rp-ai-status { font-size: 12px; color: #4b5563; padding: 7px 16px; border-top: 1px solid #eef0f3; display: flex; align-items: center; gap: 8px; background: #fafbfc; }
.rp-ai-status[hidden] { display: none; }
.rp-ai-spin { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #c7d2fe; border-top-color: #7c3aed; animation: rp-ai-rot .8s linear infinite; display: inline-block; }
@keyframes rp-ai-rot { to { transform: rotate(360deg); } }
.rp-ai-form { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px 12px; border-top: 1px solid #eef0f3; }
.rp-ai-form textarea { flex: 1; resize: none; font: inherit; font-size: 13.5px; line-height: 1.4; padding: 8px 10px; border: 1px solid #d4d8df; border-radius: 10px; max-height: 140px; }
.rp-ai-form textarea:focus { outline: none; border-color: #93b6f2; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
@media (max-width: 820px) { .rp-ai { top: 0; width: 100vw; } .rp-ai-btn .lb { display: none; } }

/* the 3D pane's own two buttons, above the shadows chip at bottom-right */
.rp-3dchips { position: absolute; right: 12px; bottom: calc(12px + var(--bars, 0px)); display: flex; gap: 4px; z-index: 5;
  background: #fff; padding: 4px; border-radius: 10px; border: 1px solid #dde0e6; box-shadow: 0 2px 10px rgba(20, 24, 32, 0.06); }
.rp-3dchips .rp-btn { padding: 4px 10px; font-size: 12px; border: none; }
.rp-3dchips .rp-btn[aria-pressed="true"] { background: #2563eb; color: #fff; }
.rp-hud {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%);
  background: rgba(20, 24, 32, 0.85); color: #fff; font-size: 13px;
  padding: 6px 14px; border-radius: 8px; pointer-events: none; display: none;
  white-space: nowrap;
}

/* export modal */
#rp-export-modal {
  display: none; position: fixed; inset: 0; background: rgba(15, 18, 24, 0.45);
  align-items: center; justify-content: center; z-index: 50;
}
.rp-modal-card {
  background: #fff; border-radius: 14px; padding: 22px; width: min(520px, 92vw);
  display: flex; flex-direction: column; gap: 10px;
}
.rp-modal-card h3 { margin: 0; font-size: 16px; }
.rp-modal-card p { margin: 0; font-size: 13px; color: #6b7280; }
.rp-modal-card textarea {
  font: 12px/1.5 ui-monospace, monospace; height: 300px; border: 1px solid #d4d8df;
  border-radius: 8px; padding: 10px; resize: vertical; white-space: pre;
}
.rp-modal-card .rp-btn { align-self: flex-end; }

/* wizard steps */
.rp-steps { display: flex; gap: 6px; margin-bottom: 16px; }
.rp-step-dot {
  flex: 1; text-align: center; font-size: 11.5px; color: #9aa1ab; padding: 6px 2px;
  border-bottom: 3px solid #e2e5ea;
}
.rp-step-dot.active { color: #2563eb; border-color: #2563eb; font-weight: 600; }
.rp-step-dot.done { color: #4b5563; border-color: #93b6f2; }
.rp-shapes { display: flex; gap: 10px; }
.rp-shape-btn {
  flex: 1; border: 1.5px solid #d4d8df; border-radius: 10px; background: #fff;
  padding: 12px 6px 8px; cursor: pointer; text-align: center; font-size: 12.5px; color: #4b5563;
}
.rp-shape-btn svg { display: block; margin: 0 auto 6px; }
.rp-shape-btn.active { border-color: #2563eb; background: #eff4fe; color: #1d4fd8; }
.rp-nav { display: flex; gap: 10px; margin-top: 18px; }
.rp-nav .rp-btn { flex: 1; }

/* openings list */
.rp-op {
  border: 1px solid #e2e5ea; border-radius: 10px; padding: 10px 12px; margin: 10px 0;
}
.rp-op-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.rp-op-head .kind { font-size: 13px; font-weight: 600; }
.rp-op-head .del {
  margin-left: auto; border: none; background: none; color: #b0b6bf;
  font-size: 16px; cursor: pointer; padding: 2px 6px;
}
.rp-op-head .del:hover { color: #dc2626; }
.rp-op .rp-row .rp-field label { font-size: 11px; }
.rp-op input, .rp-op select { padding: 5px 7px; font-size: 13px; }

/* 2D sketcher.
   .rp-topleft stacks the tool bar and the contextual action bar. On a desktop
   it floats over the top-left of the plan; on a phone (see the compact block at
   the bottom of this file) it becomes two bars docked along the bottom edge,
   and --bars carries their height to everything else anchored to the bottom. */
.rp-topleft {
  position: absolute; top: 12px; left: 12px; z-index: 5;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
.rp-toolbar, .rp-actions {
  display: flex; gap: 6px; align-items: center;
  background: #fff; padding: 6px; border-radius: 10px; border: 1px solid #dde0e6;
  box-shadow: 0 2px 10px rgba(20, 24, 32, 0.06);
}
.rp-toolbar .rp-btn, .rp-actions .rp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.rp-btn .ic { font-style: normal; line-height: 1; }
.rp-toolbar .lbs { display: none; }          /* short labels are phone-only */
.rp-actions .sep { width: 1px; align-self: stretch; background: #e2e5ea; margin: 2px 3px; }
/* min-height: 0 — a column flex item defaults to min-height:auto, so once the
   plan had grown with the window it could never shrink back, and everything
   anchored to its bottom (scale bar, zoom) stayed below the visible edge. */
.rp-split { flex: 1; display: flex; min-width: 0; min-height: 0; position: relative; }   /* the tools float over it */
.rp-pane { flex: 1; position: relative; min-width: 0; min-height: 0; }
.rp-pane + .rp-pane { border-left: 1px solid #dde0e6; }
/* Split view: the bar between the panes. 1px of line, 9px of grab. */
.rp-divider {
  flex: 0 0 9px; margin: 0 -4px; z-index: 6; cursor: col-resize; position: relative;
  background: linear-gradient(to right, transparent 4px, #dde0e6 4px, #dde0e6 5px, transparent 5px);
  touch-action: none;
}
.rp-divider:hover, .rp-divider:active {
  background: linear-gradient(to right, transparent 3px, #93a4c4 3px, #93a4c4 6px, transparent 6px);
}
.rp-divider[hidden] { display: none; }
/* out of flow, so the drawing's own aspect can never size the pane */
.rp-pane svg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair;
  touch-action: none; -webkit-tap-highlight-color: transparent; }
.rp-pane .pane-label {
  position: absolute; right: 12px; top: 12px; font-size: 11.5px; color: #9aa1ab;
  background: rgba(255,255,255,0.85); padding: 3px 9px; border-radius: 99px; pointer-events: none;
}

/* option C toolbar */
.rp-floatbar {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; align-items: center; z-index: 5;
  background: #fff; padding: 6px 10px; border-radius: 10px; border: 1px solid #dde0e6;
  box-shadow: 0 2px 10px rgba(20, 24, 32, 0.06); font-size: 13px;
}
.rp-floatbar .sep { width: 1px; height: 22px; background: #e2e5ea; margin: 0 4px; }
.rp-floatbar input { width: 70px; font: inherit; font-size: 13px; padding: 5px 7px;
  border: 1px solid #d4d8df; border-radius: 7px; }

.rp-help {
  position: absolute; bottom: calc(12px + var(--bars, 0px)); left: 12px; font-size: 12px; color: #6b7280;
  background: rgba(255,255,255,0.9); padding: 8px 12px; border-radius: 10px;
  border: 1px solid #dde0e6; line-height: 1.55;
  max-width: min(340px, calc(100% - 160px)); /* keep clear of the zoom bar */
}
.rp-help b { color: #23272e; }

.rp-help.off { display: none; }
/* A refusal has to be findable: the help box sits bottom-left, which can be a
   long way from the corner the user is actually looking at. Ring it in red for
   the 2.2s the message is up. (On compact the box is full-width at the top and
   .rp-help.show wins the box-shadow, which is fine — it is already prominent.) */
.rp-help.flash { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14); }

/* A refusal the user triggered from the keyboard needs to land where they are
   looking, not only in the caption at bottom-left. Kept clear of .pane-label,
   which sits top-right in the same pane. Never shown on compact: the help box
   is already a full-width banner across the top there. */
.rp-toast {
  position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 70;
  max-width: min(420px, calc(100% - 200px));
  background: #fff; color: #b3261e; border: 1px solid #f2b8b5;
  box-shadow: 0 6px 24px rgba(20, 24, 32, 0.16);
  padding: 10px 14px; border-radius: 10px; font-size: 13px; line-height: 1.5;
  text-align: center; pointer-events: none; z-index: 8;
  opacity: 0; transition: opacity 0.16s ease;
}
.rp-toast.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .rp-toast { transition: none; } }

/* a menu item that cannot run reads as off, and says why on hover */
.rp-menu button:disabled { color: #9aa1ad; cursor: default; background: none; }

/* interaction chrome should never text-select during drags */
.rp-pane, .rp-header, .rp-toolbar, .rp-actions, .rp-zoombar, .rp-inspector, .rp-help {
  -webkit-user-select: none; user-select: none;
}

/* header height field + compact export label on phones */
.rp-ceil .u { font-size: 11px; color: #9aa1ab; margin-left: 4px; }
#export .short, #reportBtn .short { display: none; }

/* details panel rows */
.rp-inspector { min-width: 200px; max-width: 260px; }
.rp-inspector .hint { white-space: normal; }
.rp-inspector .ro { display: flex; justify-content: space-between; gap: 12px; color: #6b7280; }
.rp-inspector .ro span:last-child { color: #23272e; font-variant-numeric: tabular-nums; }
.rp-inspector .chk { display: flex; justify-content: flex-start; gap: 8px; align-items: center; }
.rp-inspector .chk input { width: auto; }
.rp-inspector .hint { font-size: 11px; color: #9aa1ab; margin-top: -3px; }
.rp-inspector .hint.why { color: #b3261e; margin-top: 4px; }

/* details panel: title row, collapse control, collapsed chip */
.rp-inspector .t { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pn-x { border: none; background: none; color: #9aa1ab; cursor: pointer;
  font-size: 15px; padding: 0 2px; line-height: 1; }
.pn-x:hover { color: #23272e; }
.rp-inspector.min { min-width: 0; padding: 3px; }
.pn-chip { font: inherit; font-size: 12px; color: #6b7280; background: none;
  border: none; padding: 4px 10px; cursor: pointer; border-radius: 8px; }
.pn-chip:hover { background: #eef2f8; color: #23272e; }

/* confirm affordance for uncommitted panel edits */
.rp-inspector .apply-row { display: none; }
.rp-inspector .apply-row.show { display: flex; }

/* settings popup */
.rp-settings {
  position: absolute; top: 54px; right: 12px; z-index: 20;
  background: #fff; border: 1px solid #dde0e6; border-radius: 10px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 8px;
  font-size: 13px; color: #4b5563; box-shadow: 0 6px 24px rgba(20, 24, 32, 0.14);
  min-width: 230px;
}
.rp-settings .t { font-weight: 600; color: #23272e; font-size: 13px; }
.rp-settings .chk { display: flex; gap: 8px; align-items: center; }
.rp-settings .st-h { margin: 8px 0 2px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #6b7280; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rp-settings .st-presets { display: flex; gap: 4px; text-transform: none; letter-spacing: 0; }
.rp-settings .st-presets .rp-btn { padding: 2px 8px; font-size: 11.5px; }
.rp-settings .st-sub { padding-left: 22px; }
.rp-settings .st-g { margin: 6px 0 0; font-size: 12px; font-weight: 600; color: #374151; }
.rp-settings .st-auto { font-size: 12px; color: #1d4ed8; background: #eef4ff; border-radius: 6px; padding: 5px 8px; }
.rp-settings .st-adv summary { cursor: pointer; font-size: 12px; color: #6b7280; margin: 6px 0 4px; }
.rp-settings .st-adv label { margin: 4px 0; }
.rp-settings .st-sel { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rp-settings .st-sel select { font: inherit; font-size: 12.5px; padding: 3px 6px; border: 1px solid #d4d8df; border-radius: 6px; background: #fff; }
#gear { padding: 7px 10px; }

/* accept/cancel pill for animated angle proposals */
.rp-confirm {
  position: absolute; z-index: 9; display: flex; gap: 6px; align-items: center;
  background: #fff; border: 1px solid #dde0e6; border-radius: 10px;
  padding: 6px 8px 6px 12px; font-size: 12.5px; color: #4b5563;
  box-shadow: 0 6px 24px rgba(20, 24, 32, 0.14); white-space: nowrap;
}
.rp-confirm .rp-btn { padding: 5px 10px; font-size: 12.5px; }

/* per-field lock toggles in the details panel */
.rp-inspector .fw { display: flex; align-items: center; gap: 4px; }
.pn-lock {
  border: 1px solid transparent; background: none; border-radius: 6px;
  padding: 2px 4px; line-height: 1; font-size: 12px; cursor: pointer;
  /* the boss did not notice the lock until it was pointed out: at 30% and
     fully grey it read as disabled. Visible as a control when off, still
     clearly different from the amber "locked" state. */
  opacity: 0.85; filter: grayscale(0.35);
  background: #fff; border-color: #d4d8df;
}
.pn-lock:hover { opacity: 1; filter: none; background: #f1f3f7; border-color: #b9c0cb; }
.pn-lock.on {
  opacity: 1; filter: none; background: #fffaf2; border-color: #f0c48a;
}
.rp-inspector .hint.warn { color: #b45309; }

/* scale bar, bottom-left of the plan */
.rp-scale {
  position: absolute; right: 12px; bottom: calc(56px + var(--bars, 0px)); z-index: 5;
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.82); border: 1px solid #dde0e6;
  border-radius: 8px; padding: 5px 9px; pointer-events: none;
  font-size: 11px; color: #6b7280; font-variant-numeric: tabular-nums;
}
.rp-scale i {
  display: block; height: 7px; border: 1px solid #8a93a1;
  border-top: none; min-width: 12px;
}
/* the compact rule for .rp-scale lives in the block at the end of this file,
   which has to clear
   the taller touch-sized zoom bar it stacks on */

/* segmented choices in the details panel (hinge side, swing direction) */
.rp-inspector .rp-btn.seg {
  font-size: 11.5px; padding: 3px 8px; border-radius: 6px; margin-left: 4px;
}
.rp-inspector .rp-btn.seg.on {
  background: #2563eb; border-color: #2563eb; color: #fff;
}

/* floor material swatches */
.rp-inspector .swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.pn-swatch {
  width: 30px; height: 24px; border-radius: 6px; cursor: pointer;
  border: 1px solid #d4d8df; padding: 0;
}
.pn-swatch:hover { border-color: #9aa1ab; }
.pn-swatch.on { outline: 2px solid #2563eb; outline-offset: 1px; border-color: #2563eb; }


/* ==== phone layout — LAST in the file on purpose ====
   Three separate rules (.rp-ceil, .rp-scale, .rp-inspector max-width) each
   quietly beat this block when it sat mid-file. Keeping it last means a
   phone override wins on source order and never needs inflated specificity. */

/* A plan pane narrower than ~810px cannot hold the labelled toolbar (532px)
   and the details card (272px) side by side, which is exactly what Split does
   on a laptop. Icons only, the titles carry the words, and the details card
   drops below the tool rows so the Add button never sits under it. The class
   is set by the plan's ResizeObserver in editor.html — a CSS container query
   would do it, but `container-type` on the pane broke the svg's 100% height
   (it measured 298px), so the width is read in JS instead. The phone layout's
   own rule, one level up, still wins on a phone. This block sits after the
   rules it overrides: same specificity, later wins. */
.rp-split.narrow .rp-toolbar .lb, .rp-split.narrow .rp-actions .lb { display: none; }
.rp-split.narrow .rp-toolbar .rp-btn, .rp-split.narrow .rp-actions .rp-btn { padding: 6px 9px; }
.rp-split.narrow .rp-toolbar .ic, .rp-split.narrow .rp-actions .ic { font-size: 16px; }
.rp-split.narrow .rp-actions #del .lb, .rp-split.narrow .rp-actions #ptClose .lb { display: inline; }
#pane2d.narrow .rp-inspector { top: 124px; }
#pane2d.narrow .rp-help { max-width: min(260px, calc(100% - 200px)); font-size: 11.5px; }

/* ------------------------------------------------- phones and small tablets.
   The plan is the whole point of the screen, so nothing floats on top of it
   any more: the header collapses to one row and the tools become two docked
   bars along the bottom, where a thumb can reach them. Everything that used
   to be keyboard-only (undo/redo, take back a point, close, cancel) is a
   button in .rp-actions — see updateActions() in editor.html.

   820px is not a round number, it is where the layouts actually stop fitting:
   the top-left toolbar ends at 532px and the details panel starts at
   width − 272px, so they collide below ~804px. iPad portrait (768) lands here
   too, which is what you want on a touch screen anyway. */
@media (max-width: 820px) {
  .rp-header { gap: 8px; padding: 8px 10px; }
  .rp-views [data-view="split"] { display: none; }
  .rp-header h1 { font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  /* wall height also lives in the Room card. Needs the descendant selector to
     outrank the .rp-ceil rule in editor.html's own <style>, which comes after
     this file in the document and would otherwise win. */
  .rp-header .rp-ceil { display: none; }
  #export, #reportBtn { padding: 6px 10px; }
  #export .full, #reportBtn .full { display: none; }
  #export .short, #reportBtn .short { display: inline; }

  /* tools + actions dock to the bottom edge, tools nearest the thumb */
  .rp-topleft {
    top: auto; bottom: 0; left: 0; right: 0;
    flex-direction: column-reverse; gap: 0; align-items: stretch;
  }
  .rp-toolbar, .rp-actions {
    border-radius: 0; border: none; border-top: 1px solid #dde0e6;
    box-shadow: none; padding: 5px 6px;
  }
  .rp-toolbar {
    /* one row whatever the number of tools: Add and Paint wrapped onto a row of their own (reviewers, 09-30) */
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px;
    padding-bottom: calc(5px + env(safe-area-inset-bottom, 0px));
    /* On a tablet the full width would stretch five buttons to ~160px each, so
       cap the row at 640px — as PADDING, not max-width, or the bar itself
       shrinks and the plan shows through the gap either side of it. */
    padding-left: max(6px, calc((100% - 640px) / 2));
    padding-right: max(6px, calc((100% - 640px) / 2));
  }
  .rp-toolbar .rp-btn {
    flex-direction: column; gap: 3px; min-height: 50px; padding: 5px 2px;
    border: none; font-size: 10.5px; line-height: 1.1;
  }
  .rp-toolbar .ic { font-size: 17px; }
  .rp-toolbar .lb { display: none; }
  .rp-toolbar .lbs { display: inline; }
  .rp-actions { justify-content: center; gap: 8px; background: #f7f8fa; }
  .rp-actions .rp-btn { min-height: 44px; padding: 6px 14px; }
  .rp-actions .sep { margin: 4px 2px; }

  /* the details card becomes a sheet, and its collapsed chip a pill above it */
  .rp-inspector {
    top: auto; bottom: var(--bars, 0px); left: 0; right: 0;
    min-width: 0; max-width: none; max-height: 46vh; overflow-y: auto;
    border-radius: 14px 14px 0 0; border-left: none; border-right: none;
    border-bottom: none; padding: 12px 14px; gap: 9px; font-size: 13px;
    box-shadow: 0 -4px 20px rgba(20, 24, 32, 0.10);
  }
  /* bottom-LEFT: the zoom bar already owns the bottom-right corner, and both
     were anchoring to it */
  .rp-inspector.min {
    left: 12px; right: auto; bottom: calc(12px + var(--bars, 0px));
    border: 1px solid #dde0e6; border-radius: 99px; max-height: none;
    box-shadow: 0 2px 10px rgba(20, 24, 32, 0.06);
  }

  /* help is an opt-in sheet here; ? in the header toggles it, and a refusal
     message opens it on its own (revealHelp) */
  /* Anchored to the TOP: the details sheet already owns the bottom edge, and
     a refusal message stacked on it covered the very fields being refused. */
  .rp-help { display: none; }
  .rp-help.show {
    display: block; left: 8px; right: 8px; top: 8px; bottom: auto;
    max-width: none; padding: 12px 14px; font-size: 13px; z-index: 7;
    border-radius: 12px; background: #fff;
    box-shadow: 0 4px 20px rgba(20, 24, 32, 0.14);
  }

  /* fingers, not cursors: everything interactive gets a 44px tap area */
  .pn-lock { padding: 11px; font-size: 15px; }
  .pn-swatch { width: 44px; height: 40px; }
  .rp-inspector .rp-btn.seg { padding: 10px 14px; font-size: 12.5px; }
  .rp-inspector .btns .rp-btn { padding: 11px 8px; font-size: 13px; }
  .rp-inspector input { width: 92px; padding: 8px 10px; font-size: 15px; }
  .pn-x { padding: 8px 12px; font-size: 20px; }
  .pn-chip { padding: 11px 16px; font-size: 13px; }
  .rp-menu button { padding: 13px 14px; font-size: 15px; }
  .rp-zoombar .rp-btn { padding: 11px 16px; font-size: 15px; }
  /* stacked above the zoom bar, which is ~50px tall once its buttons are
     finger-sized — the old 56px offset left the two overlapping */
  .rp-scale { bottom: calc(70px + var(--bars, 0px)); padding: 4px 7px; }
}

/* ---- furniture editor: a card over the plan, preview left, controls right;
   stacked on a phone. Uses the editor's own tokens (white card, #dde0e6 rules,
   #2563eb for the one primary action) rather than a new palette. */
.fx-editor {
  position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  background: rgba(15, 18, 24, 0.38); padding: 24px;
}
.fx-editor[hidden] { display: none; }
.fx-card {
  background: #fff; border-radius: 14px; border: 1px solid #dde0e6;
  box-shadow: 0 18px 60px rgba(15, 18, 24, 0.28);
  width: min(1040px, 100%); height: min(640px, 100%);
  display: flex; flex-direction: column; overflow: hidden;
}
.fx-head {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  border-bottom: 1px solid #eceef2;
}
.fx-head .fx-title { font-weight: 600; font-size: 15px; color: #23272e; }
.fx-head .fx-title { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; }
.fx-head .fx-lead { font-weight: 500; font-size: 12px; color: #8a93a1; white-space: nowrap; }
.fx-title-input {
  font: inherit; font-weight: 600; font-size: 15px; color: #23272e; min-width: 0; width: 16em; max-width: 40vw;
  border: 1px solid transparent; border-radius: 7px; padding: 3px 6px; margin: -3px -6px; background: transparent;
}
.fx-title-input:hover { border-color: #d4d8df; }
.fx-title-input:focus { border-color: #2563eb; outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14); background: #fff; }
.fx-head .fx-sub { font-size: 12px; color: #8a93a1; }
.fx-head .rp-spacer { flex: 1; }
.fx-body { flex: 1; display: flex; min-height: 0; }
.fx-view { flex: 1.35; position: relative; background: #eef0f4; min-width: 0; }
.fx-view canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.fx-view .fx-loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #8a93a1; font-size: 13px;
}
.fx-controls {
  width: 330px; flex: none; overflow-y: auto; padding: 14px 16px 16px;
  display: flex; flex-direction: column; gap: 16px; border-left: 1px solid #eceef2;
}
.fx-sec { display: flex; flex-direction: column; gap: 8px; }
.fx-sec > .fx-h {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #8a93a1;
}
.fx-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #4b5563; }
.fx-row > span:first-child { width: 58px; flex: none; }
.fx-num { display: flex; align-items: center; border: 1px solid #d4d8df; border-radius: 8px; overflow: hidden; }
.fx-num input {
  width: 74px; border: none; padding: 6px 8px; font: inherit; font-size: 13px;
  text-align: right; font-variant-numeric: tabular-nums; outline: none; color: #23272e;
}
.fx-num button {
  border: none; background: #f4f6f9; color: #4b5563; width: 28px; align-self: stretch;
  font-size: 15px; cursor: pointer;
}
.fx-num button:hover { background: #e8ecf2; }
.fx-num:focus-within { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14); }
.fx-unit { font-size: 12px; color: #9aa1ab; }
.fx-note { font-size: 11.5px; color: #8a93a1; line-height: 1.45; }
.fx-seg { display: inline-flex; background: #f1f3f7; border-radius: 8px; padding: 2px; gap: 2px; }
.fx-seg button {
  border: none; background: transparent; padding: 5px 12px; border-radius: 6px;
  font: inherit; font-size: 12.5px; color: #4b5563; cursor: pointer;
}
.fx-seg button.on { background: #fff; color: #23272e; box-shadow: 0 1px 3px rgba(20, 24, 32, 0.12); }
.fx-seg { flex-wrap: wrap; }
.fx-seg button { padding: 5px 10px; }
.fx-row.fx-wrap { align-items: flex-start; }
.fx-row.fx-wrap > span:first-child { padding-top: 6px; }
.fx-warn { color: #8a5300; background: #fff4e0; border-radius: 6px; padding: 6px 8px; }
.fx-rules > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 8px; }
.fx-rules > summary::-webkit-details-marker { display: none; }
.fx-rules > summary::before { content: '▸'; color: #8a93a1; font-size: 11px; width: 10px; }
.fx-rules[open] > summary::before { content: '▾'; }
.fx-rules > summary .fx-h { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #8a93a1; }
.fx-rules > summary:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; border-radius: 4px; }
.fx-rules[open] { gap: 10px; }
.fx-sum { font-size: 12px; color: #8a93a1; font-variant-numeric: tabular-nums; }
.fx-grid { display: grid; grid-template-columns: 72px 1fr 1fr 24px; gap: 6px 8px; align-items: center; font-size: 13px; color: #4b5563; }
.fx-grid input {
  width: 100%; min-width: 0; box-sizing: border-box; font: inherit; font-size: 13px; padding: 5px 7px; color: #23272e;
  border: 1px solid #d4d8df; border-radius: 7px; text-align: right; font-variant-numeric: tabular-nums;
}
.fx-grid input.own { border-color: #2563eb; color: #1d4ed8; font-weight: 600; }
.fx-grid input:focus { border-color: #2563eb; outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14); }
.fx-colh { font-size: 11px; color: #8a93a1; text-transform: uppercase; letter-spacing: 0.06em; text-align: right; }
.fx-link { align-self: flex-start; border: none; background: none; color: #2563eb; font: inherit; font-size: 12.5px; padding: 0; cursor: pointer; }
.fx-link:hover { text-decoration: underline; }
/* the creator's wizard */
.fx-steps { display: flex; gap: 6px; align-items: center; }
.fx-dot {
  width: 100%; height: 4px; flex: 1; border: none; padding: 0; border-radius: 2px;
  background: #e3e7ee; cursor: pointer;
}
.fx-dot.done { background: #9dbcf5; }
.fx-dot.on { background: #2563eb; }
.fx-dot:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.fx-sub { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border: 1px solid #eceef2; border-radius: 10px; }
.fx-subh { font-size: 12px; font-weight: 600; color: #4b5563; }
.fx-summary { display: flex; flex-direction: column; border: 1px solid #eceef2; border-radius: 10px; overflow: hidden; }
.fx-line {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left;
  font: inherit; font-size: 13px; color: #23272e; background: none; border: none; border-bottom: 1px solid #eceef2;
  padding: 8px 10px; cursor: pointer;
}
.fx-line:last-child { border-bottom: none; }
.fx-line:hover { background: #f4f6f9; }
.fx-line:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }
.fx-line .fx-go { flex: none; font-size: 12px; color: #2563eb; }
.fx-seg .fx-upload { color: #2563eb; }
.fx-leaf { font-size: 12.5px; color: #4b5563; display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.fx-leaf input {
  width: 62px; font: inherit; font-size: 12.5px; padding: 4px 6px; color: #23272e; border: 1px solid #d4d8df; border-radius: 6px;
  text-align: right; font-variant-numeric: tabular-nums;
}
.fx-leaf input.own { border-color: #2563eb; color: #1d4ed8; font-weight: 600; }
.fx-row input[type=range] { flex: 1; min-width: 0; accent-color: #2563eb; }
.fx-prev-val { width: 44px; text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; color: #23272e; }
.fx-warn-inline { color: #8a5300; }
.fx-check { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: #4b5563; line-height: 1.4; }
.fx-check input { margin-top: 3px; }
/* the component library */
.fx-title-static { font-weight: 600; font-size: 15px; color: #23272e; }
.cx-origin { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #8a93a1; margin-top: 4px; }
.cx-row { display: flex; align-items: stretch; gap: 4px; border: 1px solid #eceef2; border-radius: 10px; overflow: hidden; }
.cx-row.on { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12); }
.cx-row .cx-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; text-align: left; font: inherit; border: none; background: none; padding: 8px 10px; cursor: pointer; }
.cx-row .cx-name:hover { background: #f4f6f9; }
.cx-row .nm { font-size: 13px; color: #23272e; }
.cx-row .dm { font-size: 11.5px; color: #8a93a1; }
.cx-std { font-size: 10.5px; color: #2563eb; border: 1px solid #bfd3fb; border-radius: 6px; padding: 0 5px; margin-left: 4px; }
.cx-acts { display: flex; flex-direction: column; gap: 2px; padding: 4px; justify-content: center; }
.cx-acts button { font: inherit; font-size: 11.5px; padding: 3px 8px; border: 1px solid #d4d8df; border-radius: 6px; background: #fff; color: #4b5563; cursor: pointer; }
.cx-acts button:hover { border-color: #2563eb; color: #2563eb; }
.cx-ladder { display: flex; flex-direction: column; gap: 6px; }
.cx-step { font-size: 12.5px; color: #4b5563; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.cx-step input { width: 64px; font: inherit; font-size: 12.5px; padding: 4px 6px; border: 1px solid #d4d8df; border-radius: 6px; text-align: right; font-variant-numeric: tabular-nums; color: #23272e; }
.cx-step input:focus { border-color: #2563eb; outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14); }
.cx-pose { display: flex; flex-direction: column; gap: 6px; padding: 6px 0 6px 22px; border-left: 2px solid #eceef2; margin: 0 0 4px 6px; }
.cx-band { color: #23272e; }
.cx-chips button { padding: 3px 8px; font-size: 12px; }
.fx-leaf input:focus { border-color: #2563eb; outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14); }
.rp-inspector .hint.warn { color: #8a5300; }
/* a layout the size can't take: visibly out of reach, the reason is written below */
.fx-seg button:disabled { color: #b8bec7; text-decoration: line-through; cursor: not-allowed; }
.fx-swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.fx-swatch {
  width: 26px; height: 26px; border-radius: 7px; border: 1px solid rgba(20, 24, 32, 0.14);
  cursor: pointer; padding: 0;
}
.fx-swatch.on { outline: 2px solid #2563eb; outline-offset: 2px; }
.fx-actions {
  display: flex; gap: 8px; justify-content: flex-end; padding: 12px 16px;
  border-top: 1px solid #eceef2;
}
.fx-actions .fx-reset { margin-right: auto; }
.fx-status { font-size: 12px; color: #4b6b50; align-self: center; margin-right: 4px; }
.fx-select, .fx-text {
  flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 6px 8px; color: #23272e;
  background: #fff; border: 1px solid #d4d8df; border-radius: 8px;
}
.fx-select:focus, .fx-text:focus { border-color: #2563eb; outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14); }
.fx-num .fx-val {
  width: 74px; padding: 6px 8px; text-align: center; font-size: 13px;
  font-variant-numeric: tabular-nums; color: #23272e;
}
.fx-editor button:focus-visible, .fx-editor input:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
@media (max-width: 820px) {
  .fx-editor { padding: 0; }
  .fx-card { border-radius: 0; width: 100%; height: 100%; }
  .fx-body { flex-direction: column; }
  .fx-view { flex: none; height: 38vh; }
  .fx-controls { width: auto; border-left: none; border-top: 1px solid #eceef2; }
  .fx-num input { width: 90px; padding: 10px; font-size: 15px; }
  .fx-num button { width: 40px; }
  .fx-swatch { width: 40px; height: 40px; }
  .fx-seg button { padding: 10px 16px; }
  .fx-actions { flex-wrap: wrap; }
  .fx-select, .fx-text { padding: 10px; font-size: 15px; }
  .fx-num .fx-val { width: 90px; padding: 10px; font-size: 15px; }
  .fx-grid input { padding: 9px; font-size: 15px; }
  .fx-seg button { padding: 10px 12px; }
}

/* ---- the Add picker: the library as pictures (2026-09-30) ---- */
.rp-picker { position: fixed; z-index: 30; width: min(680px, calc(100vw - 16px)); height: min(78vh, 640px);
  display: flex; flex-direction: column; background: #fff; border: 1px solid #dfe3ea; border-radius: 12px;
  box-shadow: 0 18px 48px rgba(20, 30, 50, .18), 0 2px 6px rgba(20, 30, 50, .08); overflow: hidden; }
.rp-picker.sheet { left: 0; right: 0; bottom: 0; width: 100vw; height: 82vh; border-radius: 14px 14px 0 0; }
.pk-top { display: flex; gap: 8px; align-items: center; padding: 12px 12px 8px; }
.pk-search { flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 9px 12px; border: 1px solid #d6dbe3; border-radius: 8px; background: #f7f8fa; }
.pk-search:focus { outline: 2px solid #2563eb; outline-offset: -1px; background: #fff; }
.pk-close { border: 0; background: none; font-size: 22px; line-height: 1; width: 34px; height: 34px; border-radius: 8px; color: #6b7482; cursor: pointer; }
.pk-close:hover { background: #eef2f8; }
.pk-cats { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 10px; border-bottom: 1px solid #eceef2; }   /* wraps rather than running off the picker (Max, 10-05) */
.pk-cats button { flex: none; font: inherit; font-size: 12.5px; padding: 5px 11px; border: 1px solid #dfe3ea; border-radius: 999px; background: #fff; color: #3b4250; cursor: pointer; white-space: nowrap; }
.pk-cats button:hover { background: #f2f5fa; }
.pk-cats button.on { background: #1f2937; border-color: #1f2937; color: #fff; }
.pk-body { flex: 1; overflow-y: auto; padding: 4px 12px 14px; }
.pk-hd { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8a93a1; margin: 14px 2px 8px; }
.pk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.pk-card { position: relative; }
.pk-add { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 2px; text-align: left; font: inherit; padding: 6px 6px 8px;
  border: 1px solid #e6e9ef; border-radius: 10px; background: #fff; cursor: pointer; }
.pk-add:hover { border-color: #b9c6dc; box-shadow: 0 2px 8px rgba(30, 50, 90, .08); }
.pk-add:focus-visible { outline: 2px solid #2563eb; outline-offset: 1px; }
.pk-pic { display: block; aspect-ratio: 1; border-radius: 7px; margin-bottom: 4px;
  background: linear-gradient(180deg, #f4f6f9, #e9edf2); overflow: hidden; }
.pk-pic img { display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .2s; }
.pk-card.drawn .pk-pic img { opacity: 1; }
.pk-card:not(.drawn) .pk-pic { animation: pk-wait 1.4s ease-in-out infinite; }
@keyframes pk-wait { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .pk-card:not(.drawn) .pk-pic { animation: none; } .pk-pic img { transition: none; } }
.pk-nm { font-size: 12.5px; font-weight: 600; color: #23272e; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pk-dm { font-size: 11.5px; color: #8a93a1; font-variant-numeric: tabular-nums; }
.pk-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.pk-badge { font-size: 10.5px; padding: 1px 6px; border-radius: 999px; background: #eef1f5; color: #4b5563; }
.pk-badge.role { background: #e8f0fe; color: #1d4ed8; text-transform: capitalize; }
.pk-badge.ai { background: #f3e8ff; color: #6d28d9; }
.pk-edit { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border: 1px solid #e0e4ea; border-radius: 7px;
  background: rgba(255, 255, 255, .92); color: #4b5563; cursor: pointer; opacity: 0; transition: opacity .12s; }
.pk-card:hover .pk-edit, .pk-edit:focus-visible { opacity: 1; }
@media (hover: none) { .pk-edit { opacity: 1; } }
.pk-empty { color: #6b7482; font-size: 13.5px; padding: 24px 4px; line-height: 1.5; }
.pk-foot { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 8px 10px; border-top: 1px solid #eceef2; background: #fafbfc; }
.pk-foot button { font: inherit; font-size: 13px; border: 0; background: none; padding: 6px 9px; border-radius: 7px; color: #3b4250; cursor: pointer; }
.pk-foot button:hover { background: #eef2f8; }
.pk-foot .creator { font-weight: 600; color: #2563eb; }
.pk-sp { flex: 1; }

/* ---- a client's textures in the finish swatches (2026-09-30) ---- */
.fx-swatch.tex { background-size: cover; }
.fx-swatch.add { display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px dashed #b9c1cd; color: #5b6472; font-size: 15px; line-height: 1; }
.fx-swatch.add:hover { border-color: #2563eb; color: #2563eb; }
.fx-grain { font-size: 12px; margin-left: 4px; }
.fx-tex summary { cursor: pointer; font-size: 13px; color: #3b4250; padding: 4px 0; }
.fx-texrow { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 8px; align-items: center; padding: 6px 0; border-top: 1px solid #eef0f3; }
.fx-texrow .fx-leaf, .fx-texrow .fx-link { grid-column: 2; }
.fx-texrow .fx-leaf input { width: 64px; }
.fx-texpic { width: 34px; height: 34px; border-radius: 6px; border: 1px solid #dfe3ea; grid-row: span 3; align-self: start; }
.pk-tip { font-size: 12px; color: #6b7482; padding: 6px 14px; border-top: 1px solid #eceef2; }
.pk-pic img { -webkit-user-drag: none; user-select: none; }
.pn-swatch.tex { background-size: cover; }
.pn-swatch.add { display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px dashed #b9c1cd; color: #5b6472; font-size: 14px; }
.pn-lbl { font-size: 12px; color: #6b7482; margin: 8px 0 4px; }

/* ---- the Materials picker: drag a swatch onto what it finishes (2026-09-30) ---- */
.mt-picker { width: min(520px, calc(100vw - 16px)); height: min(70vh, 560px); }
.mt-picker.dragging { opacity: .35; pointer-events: none; }
.mt-title { flex: 1; font-weight: 600; font-size: 15px; color: #23272e; padding-left: 2px; }
.mt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.mt-sw { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; font: inherit; border: 1px solid transparent; border-radius: 10px; background: none; cursor: grab; }
.mt-sw:hover { background: #f2f5fa; border-color: #e0e5ec; }
.mt-sw:focus-visible { outline: 2px solid #2563eb; outline-offset: 1px; }
.mt-chip { width: 52px; height: 52px; border-radius: 10px; border: 1px solid rgba(20, 30, 50, .12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; font-size: 20px; color: #5b6472; }
.mt-up .mt-chip { background: #fff; border-style: dashed; }
.mt-nm { font-size: 11.5px; color: #3b4250; text-align: center; line-height: 1.2; max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-ghost { position: fixed; z-index: 60; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 10px; pointer-events: none;
  border: 2px solid #fff; box-shadow: 0 6px 18px rgba(20, 30, 50, .3); opacity: .9; }
.mt-ghost.ok { box-shadow: 0 0 0 3px #16a34a, 0 6px 18px rgba(20, 30, 50, .3); }

.rp-toast.ok { color: #14532d; border-color: #bbf7d0; }

/* ---- the price system (2026-10-05 night) ---- */
#rp-prices { display: none; position: fixed; inset: 0; background: rgba(15, 18, 24, .45); align-items: center; justify-content: center; z-index: 82; }
.p-list input.p-in::placeholder { color: #b45309; opacity: .75; }
.p-card { width: min(1100px, 96vw); }
.p-missing { color: #b45309; }
.p-missing-box { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 10px; padding: 8px 12px; font-size: 12.5px; margin: 8px 0 10px; line-height: 1.7; }
.p-missing-box .fx-link { font-size: 12.5px; }
.p-pieces { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.p-piece { display: flex; gap: 8px; align-items: baseline; font: inherit; font-size: 12px; padding: 5px 10px; border: 1px solid #e0e5ec; border-radius: 999px; background: #fafbfd; cursor: pointer; color: #23272e; }
.p-piece b { font-variant-numeric: tabular-nums; }
.p-piece.on { border-color: #2563eb; background: #eef3fe; }
.p-row-missing td { background: #fffbf5; }
.p-group td { background: #f3f5f8; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #5b6472; }
.p-in { width: 92px; font: inherit; font-size: 12.5px; padding: 4px 6px; border: 1px solid #d4d8df; border-radius: 6px; text-align: right; font-variant-numeric: tabular-nums; }
.p-in.p-sm { width: 56px; }
.p-in:disabled { background: #f6f7f9; color: #b8bec7; }
.p-in:disabled[data-pprice], .p-list select:disabled { color: #4b5563; }
.p-link { font-size: 12px; max-width: 260px; }
.p-in.p-linkin { width: 150px; text-align: left; }
.p-cat { color: #0f766e; background: #ccfbf1; border-radius: 4px; padding: 0 5px; margin-left: 4px; white-space: nowrap; }
.p-cat.auto { color: #92400e; background: #fef3c7; }
.p-check .rp-btn { margin: 0 6px; }
.p-list select { font: inherit; font-size: 12px; padding: 3px 4px; border: 1px solid #d4d8df; border-radius: 6px; background: #fff; }
.p-search { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 10px; }
.p-search input { max-width: 420px; }
.p-settings { display: flex; flex-direction: column; gap: 12px; max-width: 520px; padding-top: 8px; }
.p-settings label { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; }
.p-why { font-size: 12.5px; padding: 0; }
@media print { body > *:not(#rp-report) { display: none !important; } }

/* ---- the client's library in the Materials panel (2026-10-05 night) ---- */
.mt-picker.picking { width: min(640px, calc(100vw - 16px)); height: min(78vh, 640px); z-index: 70; }
/* picking (Max, 10-25): the search right under the title, swatches that fill their cells, a preview per folder */
.mt-picker.picking .pk-top { padding-bottom: 2px; }
.mt-picker.picking .mt-search { padding-top: 2px; }
.mt-picker.picking .mt-sw { align-items: stretch; }
.mt-picker.picking .mt-chip { width: 100%; height: auto; aspect-ratio: 1; }
.mt-picker.picking .mt-nm { max-width: 100%; }
.mt-sec { margin: 6px 0 12px; }
.mt-sec-h { display: flex; align-items: center; gap: 8px; margin: 0 2px 6px; }
.mt-sec-t { flex: 1; text-align: left; font: inherit; font-size: 13px; font-weight: 600; color: #23272e; background: none; border: 0; padding: 4px 0; cursor: pointer; }
.mt-sec-t small { font-weight: 400; color: #8a93a1; font-size: 11.5px; margin-left: 4px; }
.mt-sec-t:hover { color: #2563eb; }
.mt-more { font: inherit; font-size: 12px; color: #2563eb; background: none; border: 0; padding: 4px 6px; border-radius: 6px; cursor: pointer; }
.mt-more:hover { background: #f2f5fa; }
.mt-prev [hidden], .mt-prev[hidden] { display: none; }
.mt-picker.picking .mt-prev { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.mt-search { position: sticky; top: 0; z-index: 1; background: #fff; padding: 8px 0 6px; }
.mt-search input { width: 100%; box-sizing: border-box; }
.mt-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin: 6px 0 8px; font-size: 12px; color: #8a93a1; }
.mt-crumb { font: inherit; font-size: 12px; background: none; border: 0; padding: 2px 4px; border-radius: 6px; color: #2563eb; cursor: pointer; }
.mt-crumb:hover { background: #f2f5fa; }
.mt-crumb.on { color: #23272e; font-weight: 600; cursor: default; }
.mt-folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-bottom: 8px; }
.mt-folder { display: flex; align-items: center; gap: 6px; padding: 8px 10px; font: inherit; font-size: 12.5px; text-align: left; border: 1px solid #e0e5ec; border-radius: 10px; background: #fafbfd; cursor: pointer; color: #23272e; }
.mt-folder:hover { border-color: #2563eb; background: #f2f5fa; }
.mt-fname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-fcount { font-size: 11px; color: #8a93a1; }
.mt-fclass { font-size: 10px; color: #5b6472; background: #eef1f5; border-radius: 6px; padding: 1px 5px; }
.mt-sw.mat .mt-chip { border-color: rgba(20, 30, 50, .25); }
.fx-swatch.lib { display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px dashed #2563eb; color: #2563eb; font-size: 13px; line-height: 1; }
.fx-swatch.lib:hover { background: #eff4ff; }
.fx-matname { display: inline-flex; flex-direction: column; justify-content: center; font-size: 11.5px; line-height: 1.15; color: #23272e; max-width: 160px; overflow: hidden; }
.fx-matname small { font-size: 10.5px; color: #8a93a1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- fronts in one click, in the piece editor (2026-09-30) ---- */
.fx-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.fx-preset { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 66px; padding: 6px 2px 5px; font: inherit; font-size: 11px; line-height: 1.15;
  color: #3b4250; background: #fff; border: 1px solid #e0e4ea; border-radius: 8px; cursor: pointer; }
.fx-preset:hover { border-color: #b9c6dc; background: #f7f9fc; }
.fx-preset.on { border-color: #2563eb; color: #1d4ed8; background: #eef4ff; }
.fx-preset:focus-visible { outline: 2px solid #2563eb; outline-offset: 1px; }
.rp-btn.danger { color: #b3261e; border-color: #f2c4c0; }
.rp-btn.danger:hover { background: #fdecea; }
.rp-peer-chip small { font-size: 10.5px; color: #6b7482; margin-left: 2px; }

/* the size of a new texture, asked on upload (2026-09-30) */
.tx-ask { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; background: rgba(20, 26, 36, .28); }
.tx-card { width: min(400px, calc(100vw - 32px)); background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 18px 48px rgba(20, 30, 50, .25); display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: #23272e; }
.tx-card p { margin: 0; font-size: 13px; line-height: 1.45; color: #4b5563; }
.tx-top { display: flex; gap: 12px; align-items: center; }
.tx-top label { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #6b7482; }
.tx-pic { width: 64px; height: 64px; border-radius: 8px; background-size: cover; background-position: center; border: 1px solid #dfe3ea; flex: none; }
.tx-size { display: flex; gap: 12px; flex-wrap: wrap; }
.tx-size label { font-size: 13px; color: #3b4250; }
.tx-size input { width: 80px; margin: 0 4px; }
.tx-btns { display: flex; justify-content: flex-end; }
/* the turn in flight (10-01): the waiting message, then each change as it lands */
.rp-ai-msg.user.pending { opacity: .6; }
.rp-ai-msg.acts.live li.now { color: #6b7280; display: flex; align-items: center; gap: 6px; }
.rp-ai-msg.acts.live li.now::before { content: none; }
.rp-ai-form textarea { min-height: 62px; }
/* a newer build is on the server (10-01) */
.rp-update { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 90; display: flex; align-items: center; gap: 10px;
  background: #1f2937; color: #fff; font-size: 13px; padding: 8px 10px 8px 14px; border-radius: 10px; box-shadow: 0 6px 24px rgba(20, 24, 32, .25); }
.rp-update .rp-btn { padding: 4px 10px; }
/* what the assistant saw (look_at_room, 10-01) */
.rp-ai-saw { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.rp-ai-saw span { width: 100%; font-size: 11.5px; color: #6b7280; }
.rp-ai-saw a { display: block; flex: 1 1 120px; max-width: 48%; border: 1px solid #e5e7eb; border-radius: 6px; overflow: hidden; }
.rp-ai-saw img { display: block; width: 100%; height: auto; }
.rp-ai-lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(15, 18, 24, .72); display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.rp-ai-lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, .4); }
/* the set panel, the drop chooser and the in-use strip (10-03, bulk editing) */
.pn-row { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0; font-size: 12.5px; }
.pn-row > span:first-child { min-width: 64px; padding-top: 4px; color: #4b5563; }
.pn-swatches { display: flex; flex-wrap: wrap; gap: 4px; }
.pn-mixed { font-style: normal; font-size: 10.5px; color: #9ca3af; margin-left: 4px; }
.mt-choose { position: fixed; z-index: 75; background: #fff; border: 1px solid #dde0e6; border-radius: 12px; box-shadow: 0 10px 30px rgba(20, 24, 32, .18); padding: 10px 12px; width: max-content; max-width: min(360px, calc(100vw - 16px)); font-size: 13px; }
.mt-ch-t { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.mt-ch-t b { font-weight: 600; }
.mt-ch-t .pk-close { margin-left: auto; }
.mt-ch-sw { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(20, 30, 50, .18); flex: none; }
.mt-ch-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mt-ch-chip { font: inherit; font-size: 12.5px; padding: 5px 11px; border-radius: 999px; border: 1px solid #d4d8df; background: #fff; color: #23272e; cursor: pointer; }
.mt-ch-chip.on { background: #2563eb; border-color: #2563eb; color: #fff; }
.mt-ch-chip:focus-visible { outline: 2px solid #2563eb; outline-offset: 1px; }
.mt-ch-hint { margin-top: 7px; font-size: 11.5px; color: #6b7280; }
.rp-inuse { position: fixed; left: 12px; bottom: 12px; z-index: 6; display: flex; align-items: center; gap: 6px; max-width: min(70vw, 760px); overflow-x: auto; padding: 6px 10px; background: rgba(255, 255, 255, .94); border: 1px solid #dde0e6; border-radius: 999px; box-shadow: 0 4px 16px rgba(20, 24, 32, .12); scrollbar-width: thin; }
.iu-lb { font-size: 11px; color: #6b7280; margin-right: 2px; white-space: nowrap; }
.iu-chip { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(20, 30, 50, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); cursor: grab; padding: 0; font: inherit; }
.iu-chip.tex { border-radius: 7px; }
.iu-chip i { position: absolute; right: -4px; top: -4px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: #23272e; color: #fff; font: 600 9.5px/15px system-ui, sans-serif; font-style: normal; text-align: center; pointer-events: none; }
.iu-chip:hover, .iu-chip.over { transform: scale(1.12); box-shadow: 0 0 0 3px rgba(37, 99, 235, .35); }
.iu-chip.over { box-shadow: 0 0 0 3px #16a34a; }
.iu-chip:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.iu-plus { background: #f2f5fa; color: #5b6472; font-size: 16px; line-height: 1; cursor: pointer; }
@media (max-width: 720px) { .rp-inuse { left: 50%; transform: translateX(-50%); bottom: calc(60px + var(--bars, 0px)); max-width: calc(100vw - 24px); } }
/* the model picker (10-03, appliances) */
.md-picker { width: min(560px, calc(100vw - 16px)); height: min(72vh, 600px); }
.md-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; padding: 0 2px 8px; }
.md-card { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px; font: inherit; text-align: left; border: 1px solid #e0e5ec; border-radius: 10px; background: #fff; cursor: pointer; }
.md-card:hover { border-color: #93b6f2; background: #f7f9ff; }
.md-card.on { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, .18); }
.md-card:focus-visible { outline: 2px solid #2563eb; outline-offset: 1px; }
.md-look { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(20, 30, 50, .18); margin-bottom: 3px; }
.md-maker { font-size: 11px; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; }
.md-name { font-size: 13px; font-weight: 600; color: #23272e; line-height: 1.25; }
.md-size { font-size: 11px; color: #6b7280; }
/* the report (10-03) */
#rp-report { display: none; position: fixed; inset: 0; background: rgba(15, 18, 24, .45); align-items: center; justify-content: center; z-index: 80; }
.rt-card { width: min(1100px, 96vw); height: min(88vh, 900px); padding: 18px 20px; gap: 8px; }
.rt-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rt-head h3 { margin-right: 6px; }
.rt-when { font-size: 12px; color: #6b7280; margin-right: auto; }
.rt-head .rp-btn { align-self: center; }
.rt-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid #e5e7eb; padding-bottom: 6px; }
.rt-tabs button { font: inherit; font-size: 12.5px; padding: 5px 10px; border-radius: 8px; border: 1px solid transparent; background: none; color: #4b5563; cursor: pointer; }
.rt-tabs button i { font-style: normal; font-size: 10.5px; color: #9ca3af; margin-left: 5px; }
.rt-tabs button.on { background: #eef3fe; border-color: #dbe6fd; color: #1d4ed8; }
.rt-tabs button.on i { color: #1d4ed8; }
.rt-body { overflow: auto; flex: 1; min-height: 0; }
.rt-sec { display: none; } .rt-sec.on { display: block; }
.rt-sec h4 { display: none; margin: 14px 0 6px; font-size: 14px; }
.rt { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rt th, .rt td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #eef0f3; vertical-align: top; }
.rt th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; position: sticky; top: 0; background: #fff; }
.rt td.n { text-align: right; font-variant-numeric: tabular-nums; }
.rt td.empty { color: #9ca3af; text-align: center; padding: 18px; }
.rt tfoot td { color: #4b5563; font-weight: 600; border-bottom: none; }
.rt-note { font-size: 11.5px; color: #6b7280; margin: 6px 0 0; }
@media print {
  body > *:not(#rp-report) { display: none !important; }
  #rp-report { display: block !important; position: static; background: none; }
  .rt-card { width: auto; height: auto; padding: 0; box-shadow: none; }
  .rt-head .rp-btn, .rt-tabs { display: none; }
  .rt-sec { display: block; page-break-inside: avoid; } .rt-sec h4 { display: block; }
  .rt-body { overflow: visible; }
  .rt th { position: static; }
}
/* the room's name (10-03) */
.rp-title { display: flex; align-items: center; gap: 2px; min-width: 0; }
.rp-title-btn { font: inherit; font-size: 16px; font-weight: 600; color: #23272e; background: none; border: 1px solid transparent; border-radius: 8px; padding: 3px 8px; cursor: text; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-title-btn:hover { border-color: #dde0e6; background: #f7f8fa; }
.rp-title-btn.untitled { color: #9ca3af; font-weight: 500; }
.rp-title-btn[hidden] { display: none; }
.rp-title-input { font: inherit; font-size: 16px; font-weight: 600; padding: 3px 8px; border: 1px solid #93b6f2; border-radius: 8px; width: min(360px, 40vw); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); outline: none; }
@media (max-width: 720px) { .rp-title-btn { max-width: 150px; font-size: 14px; } }
/* labels on the pieces in 3D (10-03) */
.rp-labels3d { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 4; }
.rp-label3d { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 1px; background: rgba(255, 255, 255, .92); border: 1px solid rgba(20, 30, 50, .12); border-radius: 7px; padding: 3px 7px; font-size: 11.5px; line-height: 1.25; color: #23272e; white-space: nowrap; box-shadow: 0 2px 8px rgba(20, 24, 32, .12); }
.rp-label3d b { font-weight: 600; }
.rp-label3d span { font-size: 10.5px; color: #6b7280; }
/* comments (10-03) */
.rp-eye { padding: 6px 8px; }
.rp-eye[aria-pressed="false"] { opacity: .45; }
.rp-comments3d { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.rp-comments3d .cm-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rp-comments3d .cm-lines line { stroke: #d97706; stroke-width: 2; }
.rp-comments3d .cm-lines circle { fill: #d97706; stroke: #fff; stroke-width: 2; }
.cm-cards { position: absolute; inset: 0; }
.cm-card { position: absolute; transform: translate(0, -50%); pointer-events: auto; max-width: 260px; min-width: 120px; background: #fff7ed; border: 1px solid #f59e0b; border-radius: 10px; padding: 8px 10px; box-shadow: 0 4px 14px rgba(20, 24, 32, .16); font-size: 13px; line-height: 1.4; color: #431407; cursor: grab; }
.cm-card.editing { cursor: default; width: 260px; }
.cm-text { white-space: pre-wrap; word-break: break-word; }
.cm-by { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 11px; color: #9a3412; }
.cm-by i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, #d97706); display: inline-block; }
.cm-card textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; border: 1px solid #fcd34d; border-radius: 7px; padding: 6px 8px; resize: vertical; background: #fff; }
.cm-btns { display: flex; gap: 6px; margin-top: 6px; }
.cm-btns .rp-btn { padding: 4px 9px; font-size: 12px; }
/* utilities (10-03): the kind to place, under the toolbar */
.rp-utilpick { position: absolute; left: 12px; top: 124px; z-index: 6; display: flex; flex-wrap: wrap; gap: 4px; max-width: 420px; background: #fff; border: 1px solid #dde0e6; border-radius: 10px; padding: 6px; box-shadow: 0 4px 16px rgba(20, 24, 32, .12); }
.rp-utilpick button { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; padding: 4px 9px 4px 5px; border-radius: 999px; border: 1px solid #dde0e6; background: #fff; color: #23272e; cursor: pointer; }
.rp-utilpick button i { width: 18px; height: 18px; border-radius: 50%; background: var(--c); color: #fff; font: 700 10px/18px system-ui, sans-serif; font-style: normal; text-align: center; }
.rp-utilpick button.on { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, .18); }
.rp-inspector select { font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid #d4d8df; border-radius: 8px; background: #fff; }
/* the view mode (10-03) */
.rp-viewmode { font: inherit; font-size: 12px; padding: 4px 8px; border-radius: 8px; background: #fff; cursor: pointer; }
.rp-3dchips .rp-btn[aria-pressed="true"]#wallView { background: #7c3aed; }
/* other looks (10-03) */
.pk-var { position: absolute; right: 30px; top: 6px; width: 22px; height: 22px; border-radius: 6px; border: 1px solid #dde0e6; background: #fff; font: inherit; font-size: 12px; cursor: pointer; opacity: 0; }
.pk-card:hover .pk-var, .pk-var:focus-visible { opacity: 1; }
.vr-picker { width: min(760px, calc(100vw - 16px)); height: min(84vh, 760px); }
.vr-hero { display: flex; gap: 14px; align-items: center; padding: 4px 2px 10px; border-bottom: 1px solid #eef0f3; margin-bottom: 6px; }
.vr-big { width: 220px; height: 220px; object-fit: contain; border: 1px solid #e5e7eb; border-radius: 12px; background: #fafafa; }
.vr-hero-t { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #4b5563; }
.vr-hero-t b { font-size: 15px; color: #23272e; }
.vr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; padding: 0 2px 10px; }
.vr-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; font: inherit; border: 1px solid #e0e5ec; border-radius: 10px; background: #fff; cursor: pointer; }
.vr-card:hover { border-color: #93b6f2; background: #f7f9ff; }
.vr-card.on { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, .18); }
.vr-card .pk-pic { position: relative; }
/* the material a look changes, as a strip along the bottom of its picture (v318) */
.vr-mat { position: absolute; left: 4px; right: 4px; bottom: 3px; height: 14px; display: flex; gap: 2px; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px rgba(20, 24, 32, .18); }
.vr-mat i { flex: 1; display: block; }
.vr-card.trying { border-color: #2563eb; background: #eef4ff; }      /* the look on the piece in the room right now (the Looks tab) */
.fx-looks .vr-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.vr-card img { width: 96px; height: 96px; object-fit: contain; }
.vr-card .pk-nm { font-size: 12px; color: #23272e; text-align: center; }
/* pictures for the assistant, the sketch pad, the render (10-03) */
.rp-ai-side { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.rp-ai-side .rp-btn { padding: 5px 9px; font-size: 14px; line-height: 1.2; }
.rp-ai-side #aiSend { font-size: 15px; padding: 6px 9px; }
.rp-ai-tools .rp-btn { padding: 5px 7px; font-size: 14px; line-height: 1; }
.rp-ai-attach { display: flex; gap: 8px; padding: 6px 12px 0; flex-wrap: wrap; }
.rp-ai-att { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10.5px; color: #6b7280; }
.rp-ai-att img { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid #dde0e6; }
.rp-ai-att i { font-style: normal; max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-ai-att button { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; border: none; background: #23272e; color: #fff; font-size: 12px; line-height: 18px; cursor: pointer; padding: 0; }
.rp-sketch { position: fixed; inset: 0; z-index: 400; background: rgba(15, 18, 24, .6); display: flex; align-items: center; justify-content: center; }
.sk-card { background: #fff; border-radius: 14px; padding: 12px 14px; box-shadow: 0 10px 40px rgba(0, 0, 0, .35); display: flex; flex-direction: column; gap: 8px; max-width: calc(100vw - 24px); }
.sk-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.sk-tools { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.sk-tools button { font: inherit; font-size: 12px; padding: 4px 9px; border-radius: 8px; border: 1px solid #dde0e6; background: #fff; cursor: pointer; }
.sk-tools button.on { background: #2563eb; border-color: #2563eb; color: #fff; }
.sk-tools input[type=color] { width: 28px; height: 26px; border: 1px solid #dde0e6; border-radius: 6px; padding: 1px; background: #fff; }
.sk-act { display: flex; gap: 6px; }
.sk-canvas { border: 1px solid #dde0e6; border-radius: 8px; touch-action: none; cursor: crosshair; max-width: 100%; }
.sk-hint { font-size: 11.5px; color: #6b7280; }
.sk-text { position: fixed; z-index: 401; font: 600 15px system-ui, sans-serif; padding: 4px 6px; border: 1px solid #93b6f2; border-radius: 6px; }
.rn-picker { width: min(620px, calc(100vw - 16px)); height: auto; max-height: 88vh; }
.rn-p { font-size: 12.5px; color: #4b5563; margin: 4px 0 8px; }
.rn-opts { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; margin-bottom: 8px; }
.rn-notes { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid #d4d8df; border-radius: 8px; resize: vertical; }
.rn-out { margin-top: 8px; }
.rn-img { width: 100%; border-radius: 10px; border: 1px solid #e5e7eb; }
.rn-cost { font-size: 11.5px; color: #6b7280; align-self: center; margin-left: 8px; }
.fx-ai { color: #7c3aed; }

/* the UI pass (Max, 10-05) */
body.has-inuse .rp-help { bottom: calc(64px + var(--bars, 0px)); }   /* the In use strip sits under it */
@media (max-width: 720px) { body.has-inuse .rp-help { bottom: calc(12px + var(--bars, 0px)); } }
/* ...but a help banner shown on a phone hangs from the top: anchored at both ends it covered the whole plan (v308) */
@media (max-width: 820px) { body.has-inuse .rp-help.show { bottom: auto; } }
#openingsBtn.active { background: #2563eb; color: #fff; border-color: #2563eb; }
#commentsBtn[aria-pressed="false"] { opacity: .5; }
.rp-share { position: fixed; z-index: 40; width: 380px; max-width: calc(100vw - 16px); background: #fff; border: 1px solid #dde0e6; border-radius: 12px; padding: 12px 14px; box-shadow: 0 10px 32px rgba(20, 24, 32, .16); display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: #374151; }
.rp-share .t { font-weight: 600; color: #23272e; }
.rp-share .sh-link { display: flex; gap: 6px; }
.rp-share .sh-link input { flex: 1; min-width: 0; font: inherit; font-size: 12px; padding: 6px 8px; border: 1px solid #d4d8df; border-radius: 8px; color: #6b7280; }
.rp-share .sh-hint { font-size: 11.5px; color: #6b7280; line-height: 1.4; }
.rp-share .sh-grp { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; border-top: 1px solid #eef0f3; }
.rp-share .sh-grp b { font-weight: 600; color: #23272e; font-size: 12px; }
.rp-share .sh-grp label { display: flex; gap: 8px; align-items: center; cursor: pointer; }
/* in the 3D-only view the tools sit where the pane's caption was: the caption drops to the bottom, centred */
body:not(.view-split) #pane3d .pane-label { top: auto; bottom: calc(14px + var(--bars, 0px)); left: 50%; right: auto; transform: translateX(-50%); max-width: min(60vw, 720px); }

/* second pass (Max, 10-05) */
.pk-ghost { width: 72px; height: 72px; margin: -36px 0 0 -36px; background: #fff center/cover no-repeat; }
.iu-chip.on { box-shadow: 0 0 0 3px #2563eb; }
.rp-marquee3d { position: absolute; border: 1px dashed #2563eb; background: rgba(37, 99, 235, .08); pointer-events: none; z-index: 6; }
.rp-utilpick .up-h { display: flex; align-items: center; gap: 4px; flex-basis: 100%; padding-top: 4px; border-top: 1px solid #eef0f3; margin-top: 2px; }
.rp-utilpick .up-h b { font-size: 11px; color: #6b7280; font-weight: 500; margin-right: 2px; }
.rp-utilpick .up-h button { padding: 3px 8px; font-size: 11.5px; }
.pn-uses .iu-chip { cursor: grab; }
#pane3d .pane-label.walking { color: #1d4fd8; background: #eff4fe; border: 1px solid #93b6f2; font-weight: 600; }

/* third pass (Max, 10-05) */
.rp-ai-pic img { max-width: 100%; height: auto; border-radius: 8px; }
.rp-ai-pic a { display: block; }

/* v227: prices where a piece is chosen and changed */
.fx-head .fx-price { margin-left: 10px; padding: 3px 10px; border-radius: 999px; background: #eef4ff; color: #1d4ed8; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fx-head .fx-price small { font-weight: 500; color: #6b7a94; }
.fx-head .fx-price b { margin-left: 6px; font-weight: 700; }
.fx-head .fx-price b.up, .vr-price.up { color: #b45309; }
.fx-head .fx-price b.down, .vr-price.down { color: #047857; }
.pk-price { font-size: 11.5px; font-weight: 600; color: #1d4ed8; font-variant-numeric: tabular-nums; }
.pk-price.part { color: #8a93a1; font-weight: 500; }
.vr-price { font-size: 11.5px; font-weight: 600; color: #6b7a94; font-variant-numeric: tabular-nums; }
.vr-now { font-weight: 600; color: #1d4ed8; }
.vr-picker:focus { outline: none; }
.size-tip { position: fixed; z-index: 60; pointer-events: none; padding: 4px 9px; border-radius: 7px; background: #111827; color: #fff; font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; box-shadow: 0 4px 14px rgba(15, 23, 42, .25); }
.size-tip i { font-style: normal; color: #fcd34d; margin-left: 4px; }

/* fittings from the firm's catalogue, in the panel and their picker (10-16) */
.fit-box { margin: 8px 0 4px; padding-top: 8px; border-top: 1px solid #eef0f3; }
.fit-hd { font-size: 12px; font-weight: 600; color: #374151; margin-bottom: 4px; }
.fit-hd small { font-weight: 400; color: #8a93a1; }
.fit-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 0; font-size: 12.5px; }
.fit-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fit-n { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.fit-n .rp-btn { padding: 0 7px; min-height: 22px; line-height: 20px; }
.fit-n b { min-width: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.fit-picker { width: min(460px, calc(100vw - 16px)); max-height: min(640px, calc(100vh - 16px)); display: flex; flex-direction: column; }
.fit-picker .pk-body { overflow: auto; flex: 1; }
.fit-search { padding: 0 12px 8px; }
.fit-search input { width: 100%; box-sizing: border-box; }
.fit-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.fit-item { display: flex; justify-content: space-between; gap: 10px; text-align: left; font: inherit; font-size: 12.5px; padding: 6px 8px; border: 1px solid transparent; border-radius: 8px; background: none; cursor: pointer; }
.fit-item:hover { background: #f7f9ff; border-color: #dbe6fb; }
.fit-item small { color: #8a93a1; }
.fit-item b { flex: none; font-weight: 600; color: #1d4ed8; font-variant-numeric: tabular-nums; }
.md-firm { font-style: normal; font-size: 10.5px; font-weight: 600; color: #047857; background: #ecfdf5; border-radius: 999px; padding: 1px 6px; margin-left: 4px; }

/* the kitchen menu, before the room's name (10-16) */
.rp-scene-btn { padding: 6px 8px; margin-right: 2px; display: inline-flex; align-items: center; }
.rp-scene-btn[aria-expanded="true"] { background: #eef4ff; border-color: #bfd3f8; color: #1d4ed8; }
.rp-scene { position: fixed; z-index: 60; width: min(440px, calc(100vw - 16px)); max-height: calc(100vh - 80px); overflow: auto; background: #fff; border: 1px solid #dde0e6; border-radius: 12px; box-shadow: 0 12px 36px rgba(20, 24, 32, .18); padding: 12px 14px 14px; font-size: 13px; color: #374151; outline: none; }
.rp-scene.sheet { left: 8px; right: 8px; bottom: 8px; top: auto; width: auto; }
.rp-scene .sc-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.rp-scene .sc-hd b { font-size: 14px; color: #111827; }
.rp-scene .sc-hd span { color: #8a93a1; font-size: 12px; }
.rp-scene .sc-t { margin: 12px 0 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: #6b7280; text-transform: uppercase; }
.rp-scene .sc-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rp-scene .sc-preset { display: flex; flex-direction: column; gap: 2px; text-align: left; font: inherit; padding: 8px 10px; border: 1px solid #e0e5ec; border-radius: 9px; background: #fff; cursor: pointer; }
.rp-scene .sc-preset:hover { border-color: #93b6f2; background: #f7f9ff; }
.rp-scene .sc-preset b { font-size: 12.5px; color: #111827; }
.rp-scene .sc-preset span { font-size: 11.5px; color: #6b7280; line-height: 1.35; }
.rp-scene .sc-note { margin-top: 5px; font-size: 11.5px; color: #8a93a1; }
.rp-scene .sc-styles { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-scene .sc-style { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 12px; padding: 4px 9px 4px 6px; border: 1px solid #e0e5ec; border-radius: 999px; background: #fff; cursor: pointer; }
.rp-scene .sc-style i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); }
.rp-scene .sc-style:hover { border-color: #93b6f2; }
.rp-scene .sc-style.on { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, .15); }
.rp-scene .sc-row { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-scene .sc-rooms { margin-top: 6px; display: flex; flex-direction: column; border: 1px solid #eef0f3; border-radius: 9px; max-height: 180px; overflow: auto; }
.rp-scene .sc-roomlink { display: flex; justify-content: space-between; gap: 8px; font: inherit; font-size: 12.5px; padding: 6px 10px; border: none; border-bottom: 1px solid #f1f3f6; background: none; text-align: left; cursor: pointer; }
.rp-scene .sc-roomlink:last-child { border-bottom: none; }
.rp-scene .sc-roomlink:hover { background: #f7f9ff; }
.rp-scene .sc-roomlink.on { font-weight: 600; cursor: default; }
.rp-scene .sc-roomlink small { color: #8a93a1; }

/* the 3D view's hint is a help card like the plan's (Max, 10-16): bottom-left of its pane beside the plan,
   out of the way of the piece readout at the top; hidden with the ? button like the plan's (walking keeps it) */
body.view-split #pane3d .rp-help3d { top: auto; right: auto; left: 12px; bottom: calc(54px + var(--bars, 0px));   /* above the view's buttons, which share the bottom edge */
  max-width: min(340px, calc(100% - 24px));
  font-size: 12px; color: #6b7280; background: rgba(255,255,255,0.9); padding: 8px 12px; border-radius: 10px; border: 1px solid #dde0e6; line-height: 1.55; }
#pane3d .rp-help3d b { color: #23272e; font-weight: 600; }
#pane3d .rp-help3d.off:not(.walking) { display: none; }

/* the cabinet panel (10-16): the edit dialog docked at the right, beside the live view — no backdrop,
   no preview of its own; the plan and the 3D make room for it */
.fx-editor.docked { inset: auto 0 0 auto; top: 58px; width: min(440px, 100vw); padding: 0; background: none; align-items: stretch; justify-content: stretch; z-index: 30; }
.fx-editor.docked .fx-card { width: 100%; height: 100%; border-radius: 0; border: none; border-left: 1px solid #dde0e6; box-shadow: -8px 0 28px rgba(20, 24, 32, .10); }
.fx-editor.docked .fx-view { display: none; }
.fx-editor.docked .fx-controls { width: auto; flex: 1; border-left: none; padding: 0 16px 16px; gap: 0; }
.fx-editor.docked .fx-actions { flex-wrap: wrap; }
/* (10-20) it floats over the view, the view keeps its size — editorAside() moves the picture instead */
body.fx-docked .rp-inspector { display: none !important; }
.fp-top { position: sticky; top: 0; z-index: 2; background: #fff; padding: 12px 0 0; border-bottom: 1px solid #eceef2; margin: 0 -16px 12px; padding-left: 16px; padding-right: 16px; }
.fp-dims { display: flex; align-items: center; gap: 6px; }
.fp-dim { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #6b7280; }
.fp-dim input { width: 66px; font: inherit; font-size: 13px; padding: 5px 6px; border: 1px solid #d4d8df; border-radius: 7px; font-variant-numeric: tabular-nums; }
.fp-undo { margin-left: auto; padding: 4px 10px; font-size: 15px; }
.fp-tabs { display: flex; gap: 2px; margin-top: 10px; }
.fp-tabs button { flex: 1; font: inherit; font-size: 12.5px; font-weight: 600; color: #6b7280; padding: 8px 4px; background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; }
.fp-tabs button.on { color: #1d4ed8; border-bottom-color: #2563eb; }
.fp-tabs button i { font-style: normal; font-size: 10.5px; background: #eef4ff; color: #1d4ed8; border-radius: 999px; padding: 0 5px; margin-left: 2px; }
.fp-body { display: flex; flex-direction: column; gap: 16px; }
.fp-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.fp-preset { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 5px; font: inherit; font-size: 11px; color: #374151; background: #fff; border: 1px solid #e0e5ec; border-radius: 9px; cursor: pointer; }
.fp-preset:hover { border-color: #93b6f2; background: #f7f9ff; }
.fp-preset.on { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, .15); }
.fp-preset span { text-align: center; line-height: 1.2; }
.el-svg { display: block; width: 100%; height: auto; }
.el-svg.small { height: 54px; }
.fp-elev { background: #f6f7f9; border-radius: 10px; padding: 8px; }
.fp-elev .el-svg { max-height: 260px; }
.el-carcass { fill: #e9ecf1; stroke: #9aa3af; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.el-leg { fill: #9aa3af; }
.el-front { fill: #fff; stroke: #6b7280; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.el-panel { fill: #f1f3f6; }
.el-open { fill: #dfe3e9; stroke: #9aa3af; stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.el-shelf { stroke: #9aa3af; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.el-glass { fill: #d6ecf3; stroke: #8fb9c8; stroke-width: 1; vector-effect: non-scaling-stroke; }
.el-handle { fill: #4b5563; }
.el-hit { fill: transparent; }
.el-cell[data-fxcell] { cursor: pointer; }
.el-cell[data-fxcell]:hover .el-hit { fill: rgba(37, 99, 235, .08); }
.el-cell.on .el-hit { fill: rgba(37, 99, 235, .14); stroke: #2563eb; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.el-cell:focus { outline: none; }
.el-cell:focus-visible .el-hit { stroke: #2563eb; stroke-width: 2; vector-effect: non-scaling-stroke; }
.fp-cell { border: 1px solid #dbe6fb; background: #f8fbff; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.fp-cellh { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; font-weight: 600; color: #1d4ed8; }
.fp-wrap { flex-wrap: wrap; }
/* every choice in the cabinet panel sits in a fixed grid: choosing one never moves the others (Max, 10-16);
   the column count is set per row from its options (fxGridSegs) */
.fx-editor.docked .fx-seg { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); flex: 1; min-width: 0; }
.fx-editor.docked .fx-seg button { padding: 6px 6px; text-align: center; line-height: 1.25; overflow-wrap: anywhere; }
.fp-open { display: flex; gap: 6px; margin-top: 8px; }
.fp-open .rp-btn { font-size: 12px; padding: 4px 10px; }
.fp-open .rp-btn.on { background: #eef3fe; border-color: #93b6f2; color: #1d4ed8; }
/* a border between two parts of the front, dragged to resize them */
.el-div { stroke: transparent; stroke-width: 16; vector-effect: non-scaling-stroke; }
.el-div.r { cursor: ns-resize; }
.el-div.s { cursor: ew-resize; }
.el-divline { stroke: #2563eb; stroke-width: 2; vector-effect: non-scaling-stroke; opacity: 0; pointer-events: none; }
.fp-elev:hover .el-divline { opacity: .35; }
.el-divg:hover .el-divline, .el-divg.on .el-divline { opacity: 1; }
.fp-elev { touch-action: none; position: relative; }
.fp-dragnote { position: absolute; left: 8px; top: 8px; font-size: 11.5px; background: #1f2937; color: #fff; border-radius: 6px; padding: 2px 7px; pointer-events: none; font-variant-numeric: tabular-nums; }
.fx-seg button:disabled { opacity: .4; cursor: not-allowed; }
.fp-split { display: flex; flex-wrap: wrap; gap: 6px; }
.fp-split .rp-btn { font-size: 12px; padding: 5px 9px; }
.fp-split .fp-del { color: #b91c1c; }
.fx-editor.docked .fx-head { flex-wrap: wrap; row-gap: 6px; }
.fx-editor.docked .fx-head .fx-sub { display: none; }   /* the size is in the panel's own row */
.fx-editor.docked .fx-head .fx-title { flex: 1 1 100%; order: -1; }
.fx-editor.docked .fx-head .fx-title-input, .fx-editor.docked .fx-head .fx-title > :last-child { max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.el-inner { fill: none; stroke: #2563eb; stroke-width: 1.2; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }

/* catalogue pictures in the fittings list, the picker and the cabinet's Fittings tab (Max, 10-16) */
.fit-pic { flex: none; width: 34px; height: 34px; border-radius: 6px; object-fit: contain; background: #fff; border: 1px solid #eceef2; }
.fit-pic.none { display: inline-flex; align-items: center; justify-content: center; background: #f1f3f7; color: #8a93a1; font-size: 13px; font-weight: 600; }
.fit-row .fit-name { flex: 1; min-width: 0; }
.fit-item { align-items: center; }
.fit-item .fit-iname { flex: 1; min-width: 0; }
.fit-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; }
.fit-card { min-width: 0; }
.fit-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px 6px; font: inherit; font-size: 11.5px; line-height: 1.25; text-align: center; color: #374151; background: #fff; border: 1px solid #e0e5ec; border-radius: 9px; cursor: pointer; }
.fit-card:hover { border-color: #93b6f2; background: #f7f9ff; }
.fit-card .fit-pic { width: 100%; max-width: 132px; height: auto; aspect-ratio: 1; object-fit: contain; }      /* big enough to tell what it is (Max, 10-21) */
.fit-card .fit-pic.none { font-size: 26px; }      /* (no picture: the same square as a picture, so every card's name and price line up — Max, 10-21) */
.fit-card .fit-cname { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; overflow-wrap: anywhere; text-align: center; font-size: 12px; line-height: 1.3; }      /* (a code like KOMP.385-645X472X42 ran over the next card — Max, 10-21) */
.fit-card b { color: #1d4ed8; font-weight: 600; font-variant-numeric: tabular-nums; }
.fit-card .fit-plus { position: absolute; top: 4px; right: 6px; color: #2563eb; font-size: 13px; }
/* the corner card: highlighted when the cabinet stands in a room corner (Max, 10-17) */
.fp-corner.near { border: 1px solid #bfd3fb; background: #f5f8ff; border-radius: 10px; padding: 10px 12px; }
.fp-corner .fp-split .rp-btn { font-size: 12.5px; }

/* ---- Pro mode (the workshop's view, 10-17) */
.pro-only { display: none !important; }
body.pro .rp-3dchips .pro-only { display: inline-flex !important; }
body.pro .ws-badge.pro-only { display: block !important; }
.ws-badge { position: absolute; left: 12px; top: 12px; z-index: 5; font: 600 11px/1 system-ui, sans-serif; letter-spacing: .04em;
  background: #111827; color: #fbbf24; padding: 6px 9px; border-radius: 6px; pointer-events: auto; }
.ws-preview { font-size: 12px; background: #fef3c7; color: #78350f; border: 1px solid #fcd34d; border-radius: 6px; padding: 6px 8px; margin: 6px 0; }
.ws-t { width: 100%; border-collapse: collapse; font-size: 12px; margin: 4px 0; }
.ws-t th { text-align: left; font-weight: 600; color: #6b7280; border-bottom: 1px solid #e5e7eb; padding: 3px 4px; }
.ws-t td { padding: 3px 4px; border-bottom: 1px solid #f1f2f4; font-variant-numeric: tabular-nums; }
.ws-t tr.ws-warn td, .ws-warn { color: #b45309; }
.ws-grain { font: inherit; font-size: 11px; border: 1px solid #d1d5db; background: #fff; border-radius: 4px; padding: 1px 6px; cursor: pointer; }
.ws-k { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; white-space: nowrap; }
.ws-k i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.ws-diff { margin: 4px 0; padding-left: 18px; font-size: 12px; }
.ws-diff b { font-weight: 600; margin-right: 4px; }
.ws-diff .ws-cust b { color: #dc2626; } .ws-diff .ws-func b { color: #b45309; } .ws-diff .ws-shop b { color: #059669; }
.ws-op { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 12px; padding: 6px 0; border-top: 1px dashed #e5e7eb; }
.ws-op input[type=number] { width: 58px; }
.ws-op select { max-width: 150px; }
.ws-modal { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); display: flex; align-items: flex-start; justify-content: center; z-index: 60; overflow: auto; padding: 24px 16px; }
.ws-card { max-width: 1100px; width: 100%; background: #fff; border-radius: 10px; padding: 16px 18px; }
.ws-hd { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ws-hd h3 { margin: 0; font-size: 16px; }
.ws-mat h4 { margin: 14px 0 6px; font-size: 14px; }
.ws-sheet { display: inline-block; width: min(100%, 520px); margin: 0 12px 12px 0; vertical-align: top; }
.ws-sheet svg { width: 100%; height: auto; display: block; }
.ws-sheet figcaption { font-size: 12px; color: #6b7280; }
.ws-board { fill: #f8f5ef; stroke: #9ca3af; stroke-width: 6; }
.ws-p { stroke: #57534e; stroke-width: 3; }
.ws-lb { font: 44px system-ui, sans-serif; fill: #292524; }
.ws-gr { stroke: #57534e; stroke-width: 5; fill: none; opacity: .55; }


/* an appliance's installation scheme (3DE-87) */
.ap-install { margin: 6px 0; font-size: 12px; line-height: 1.35; }
.ap-install .ap-h { font-weight: 600; margin-bottom: 2px; } .ap-install .ap-h small { font-weight: 400; color: #6b7280; }
.ap-install .ap-error { color: #b91c1c; } .ap-install .ap-warn { color: #b45309; } .ap-install .ap-info { color: #4b5563; }
.wt-island { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.wt-island label { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; }

/* the shape picker (10-17) */
.sg-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
.sg-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border: 1px solid #d6dbe3; border-radius: 8px; background: #fff; font: 11px/1.2 system-ui, sans-serif; color: #374151; cursor: pointer; }
.sg-btn:hover { border-color: #93c5fd; }
.sg-btn.on { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; box-shadow: 0 0 0 1px #2563eb inset; }
.sg-btn svg .sg-body { fill: #e8dcc6; stroke: #6b7280; stroke-width: 1; }
.sg-btn.on svg .sg-body { fill: #bfdbfe; stroke: #2563eb; }
.sg-btn svg .sg-wall { stroke: #374151; stroke-width: 2.5; }
.sg-btn svg .sg-hid { fill: #9ca3af; opacity: .5; }

/* looks by size (10-18) */
.lk-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.lk-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 5px 9px; border: 1px solid #d6dbe3; border-radius: 8px; background: #fff; font: 12px/1.2 system-ui, sans-serif; color: #374151; cursor: pointer; }
.lk-chip small { color: #6b7280; font-size: 11px; }
.lk-chip.on { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; box-shadow: 0 0 0 1px #2563eb inset; }
.fp-looks input[type=number] { width: 72px; }

/* the worktop panel (10-20): the overhangs set round a plan of the slab, back at the top */
.wt-ovgrid { display: grid; grid-template-columns: 1fr 2.2fr 1fr; grid-template-areas: ". back ." "left mid right" ". front ."; gap: 6px 8px; align-items: center; margin: 4px 0 8px; }
.wt-ov { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; color: #6b7280; }
.wt-ov input { width: 72px; text-align: center; padding: 4px 6px; border: 1px solid #d5d9e0; border-radius: 6px; font: inherit; color: #111827; }
.wt-ov input:disabled { background: #f3f4f6; color: #9ca3af; }
.wt-ov-back { grid-area: back; } .wt-ov-front { grid-area: front; } .wt-ov-left { grid-area: left; } .wt-ov-right { grid-area: right; }
.wt-mid { grid-area: mid; min-height: 90px; display: flex; align-items: center; justify-content: center; }
.wt-mid-hand { margin: 4px auto 10px; max-width: 260px; }
.wt-diag { width: 100%; max-height: 260px; }
.wt-size { font-weight: 600; font-variant-numeric: tabular-nums; }
.wt-stone label { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 6px 0; font-size: 13px; }
.wt-stone .ro { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 6px 0; font-size: 13px; }
.wt-stone .wt-island { display: flex; flex-wrap: wrap; gap: 4px; }

/* the piece's side panel (10-20): the edit button first and wide; turning it in the Facing row, with icons that read */
.pn-main { display: block; width: 100%; margin: 4px 0 10px; padding: 9px 12px; font-weight: 600; }
.pn-turn > span:last-child { display: inline-flex; align-items: center; gap: 6px; }
.pn-turn b { font-weight: 500; margin-right: 4px; }
.pn-ic { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 30px; padding: 0; }
.pn-unit { margin-left: 6px; color: #8a93a1; }
.pn-more { flex-wrap: wrap; }
.pn-more .rp-btn { flex: 1 1 auto; }
.rp-inspector .pn-ic svg { width: 20px; height: 20px; flex: none; position: static; }
.rp-inspector .pn-turn { align-items: center; }
/* other looks (10-20): its cards fade their picture in as the library's do — they were never marked, and stayed blank */
.vr-card.drawn .pk-pic img { opacity: 1; }
.vr-card:not(.drawn) .pk-pic { animation: pk-wait 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .vr-card:not(.drawn) .pk-pic { animation: none; } }
/* a menu item's shortcut, at its right (10-20) */
.rp-menu button { display: flex; align-items: center; gap: 16px; }
.rp-menu button kbd { margin-left: auto; font: 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #8a93a1; background: none; border: 0; padding: 0; }
/* a line under the size fields: something about the size to know, with its fix (10-20) */
.fp-hint { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 2px; padding: 6px 8px 6px 10px; border-radius: 8px; background: #fff7e6; color: #8a5a00; font-size: 12.5px; }
.fp-hint .rp-btn { padding: 4px 10px; font-size: 12.5px; white-space: nowrap; }

/* the docked editor slides in over the view (10-20) */
.fx-editor.docked:not([hidden]) .fx-card { animation: fx-slide .22s cubic-bezier(.2, .8, .2, 1); }
@keyframes fx-slide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fx-editor.docked:not([hidden]) .fx-card { animation: none; } }
/* the front: the cabinet in 3D (or its drawing) */
.fp-fronth { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fp-elevsw button { padding: 3px 10px; font-size: 12px; text-transform: none; letter-spacing: 0; }
.fp-3d { position: relative; height: 280px; border-radius: 10px; overflow: hidden; background: #eef0f4; margin: 4px 0 8px; cursor: grab; touch-action: none; }
.fp-3d:active { cursor: grabbing; }
.fp-3d canvas { display: block; width: 100% !important; height: 100% !important; }
.fp-3d .fx-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #8a93a1; font-size: 12px; }
/* what a shape cannot take: shown, greyed, with why on hover (Max, 10-20) */
.fp-fronts button:disabled { text-decoration: none; }
.fx-off { opacity: .45; }
.fx-off .fx-num button:disabled, .fp-preset:disabled { cursor: not-allowed; }
.fp-preset:disabled { opacity: .4; }

/* ---- Pro mode: the switch in the top bar, the marks, and the Workshop view (10-20) ---- */
.rp-pro { font-weight: 600; letter-spacing: .02em; }
.rp-pro.active { background: #111827; color: #fbbf24; border-color: #111827; }

body.pro .rp-views .pro-only { display: inline-flex !important; }
.rp-views [data-view="workshop"].active { background: #111827; color: #fbbf24; }
.ws-mk { display: inline-block; min-width: 2.2em; padding: 1px 6px; border-radius: 6px; background: #111827; color: #fbbf24; font-weight: 700; font-size: 12px; text-align: center; border: 0; cursor: pointer; font-family: inherit; }
.ws-mk.big { font-size: 16px; padding: 2px 9px; }
.ws-view { position: fixed; left: 0; right: 0; bottom: 0; top: 57px; z-index: 40; background: #f4f5f7; display: flex; flex-direction: column; }
.ws-view[hidden] { display: none; }
.ws-top { display: flex; align-items: center; gap: 12px; padding: 10px 18px; background: #fff; border-bottom: 1px solid #dde0e6; flex-wrap: wrap; }
.ws-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.ws-tab { border: 0; background: none; padding: 8px 14px; border-radius: 8px; font: inherit; font-size: 14px; font-weight: 600; color: #4b5563; cursor: pointer; }
.ws-tab:hover { background: #f1f2f4; }
.ws-tab.on { background: #111827; color: #fff; }
.ws-cnt { display: inline-block; font-style: normal; background: #dc2626; color: #fff; border-radius: 9px; padding: 0 6px; font-size: 11px; margin-left: 4px; }
.ws-acts { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.ws-rev { font: 600 12px ui-monospace, SFMono-Regular, Menlo, monospace; color: #6b7280; background: #f1f2f4; padding: 4px 8px; border-radius: 6px; }
.ws-doc { flex: 1; overflow: auto; padding: 18px 22px 60px; }
.ws-dochd { display: none; }
.ws-preview { background: #fff8e1; border: 1px solid #f5d76e; color: #6b4e00; border-radius: 8px; padding: 8px 12px; font-size: 13px; margin-bottom: 14px; }
.ws-sec { background: #fff; border: 1px solid #e3e5ea; border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
.ws-sec h3 { margin: 0 0 10px; font-size: 16px; }
.ws-sec h3 small, .ws-sec h4 small { font-weight: 400; color: #6b7280; font-size: 13px; }
.ws-sec h4 { margin: 4px 0 8px; font-size: 14px; }
.ws-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; }
.ws-bar small, .ws-small { color: #6b7280; font-size: 12px; }
.ws-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.ws-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.ws-card { background: #f8f9fb; border: 1px solid #e3e5ea; border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.ws-card b { font-size: 26px; line-height: 1.1; }
.ws-card span { font-weight: 600; color: #374151; }
.ws-card small { color: #6b7280; font-size: 12px; }
.ws-warns { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.ws-warns li { padding: 8px 10px; border-radius: 8px; font-size: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ws-stop { background: #fef2f2; border: 1px solid #fecaca; }
.ws-note { background: #f8f9fb; border: 1px solid #e5e7eb; color: #374151; }
.ws-ok { color: #047857; font-weight: 600; }
.ws-t { width: 100%; border-collapse: collapse; font-size: 13px; }
.ws-t th { text-align: left; font-weight: 600; color: #6b7280; border-bottom: 1px solid #e3e5ea; padding: 6px 8px; white-space: nowrap; position: sticky; top: 0; background: #fff; }
.ws-t td { border-bottom: 1px solid #f0f1f4; padding: 6px 8px; vertical-align: top; }
.ws-t tr.has-holes { cursor: pointer; }
.ws-t tr.has-holes:hover td { background: #f8fafc; }
.ws-t tr.open td { background: #eff6ff; }
.ws-cut td:nth-child(n+3) { font-variant-numeric: tabular-nums; }
.ws-codes { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; color: #374151; max-width: 220px; }
.ws-e { font-style: normal; display: inline-block; min-width: 18px; text-align: center; background: #e0e7ff; color: #3730a3; border-radius: 4px; font-size: 12px; }
.ws-e.no { background: none; color: #c0c4cc; }
.ws-drillrow td { background: #fbfcfe !important; }
.ws-gh td { font-weight: 700; background: #f8f9fb; }
.ws-warnrow td { background: #fef2f2; }
.ws-st { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 10px; font-style: normal; }
.st-new { background: #f1f2f4; color: #4b5563; }
.st-ok { background: #d1fae5; color: #065f46; }
.st-changed { background: #fee2e2; color: #991b1b; }
.ws-cabbtn .ws-st { width: 10px; height: 10px; padding: 0; border-radius: 50%; }
.ws-cabbtn .st-new { background: #c0c4cc; } .ws-cabbtn .st-ok { background: #10b981; } .ws-cabbtn .st-changed { background: #ef4444; }
.ws-mats button small { opacity: .7; margin-left: 4px; }
.ws-sheetset { display: flex; gap: 8px; align-items: center; font-size: 13px; color: #4b5563; }
.ws-sheetset input { width: 64px; padding: 4px 6px; border: 1px solid #d1d5db; border-radius: 6px; font: inherit; }
.ws-bar select { padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 8px; font: inherit; font-size: 13px; background: #fff; max-width: 320px; }
.ws-sheets { display: grid; grid-template-columns: repeat(auto-fill, minmax(560px, 1fr)); gap: 16px; }
.ws-sheetfig { margin: 0; }
.ws-sheetfig figcaption { font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 4px; }
.ws-sheet { width: 100%; height: auto; display: block; }
.ws-board { fill: #f6f1e7; stroke: #a8a091; stroke-width: 3; }
.ws-part rect { fill: #e9e2d2; stroke: #6b6558; stroke-width: 3; cursor: pointer; }
.ws-part.grp rect { fill: #dbe7f5; }
.ws-part text { fill: #1f2937; pointer-events: none; font-family: system-ui, sans-serif; }
.ws-part .ws-pc { font-weight: 700; }
.ws-part.hov rect { fill: #fde68a; }
.ws-sheet.dim .ws-part:not(.lit) { opacity: .35; }
.ws-part.lit rect { fill: #fbbf24; stroke: #92400e; stroke-width: 5; }
.ws-gr { stroke: #6b6558; stroke-width: 4; fill: none; }
.ws-cabview { display: grid; grid-template-columns: 240px 1fr; gap: 14px; align-items: start; }
.ws-cablist { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; max-height: calc(100vh - 170px); overflow: auto; }
.ws-cabbtn { display: flex; align-items: center; gap: 8px; text-align: left; border: 1px solid #e3e5ea; background: #fff; border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.ws-cabbtn > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.ws-cabbtn small { color: #6b7280; }
.ws-cabbtn.on { border-color: #111827; box-shadow: 0 0 0 1px #111827; }
.ws-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ws-kv th { text-align: left; color: #6b7280; font-weight: 500; padding: 4px 12px 4px 0; white-space: nowrap; font-size: 13px; }
.ws-kv td { font-size: 13px; padding: 4px 0; }
.ws-kitl { margin: 0; padding-left: 18px; font-size: 13px; }
.ws-kits { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.ws-kit { border: 1px solid #e3e5ea; border-radius: 10px; padding: 10px 12px; }
.ws-kit ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.ws-diff { margin: 10px 0 0; padding-left: 18px; font-size: 13px; }
.ws-diff .ws-customer { color: #991b1b; } .ws-diff .ws-functional { color: #92400e; }
.ws-drill { display: flex; flex-direction: column; gap: 8px; }
.ws-drillhd { font-size: 14px; }
.ws-drawing { display: block; height: auto; background: #fff; }
.ws-face { fill: #f6f1e7; stroke: #374151; stroke-width: 3; }
.ws-band { stroke: #4f46e5; stroke-width: 9; }
.ws-ref { stroke: #dc2626; stroke-width: 5; fill: none; }
.ws-dim { stroke: #9ca3af; stroke-width: 2; }
.ws-dimt { font-size: var(--fs, 24px); fill: #374151; font-family: system-ui, sans-serif; }
.ws-hole { fill: #1f2937; stroke: #fff; stroke-width: 1.5; }
.ws-hole.fb { fill: none; stroke-width: 3; stroke-dasharray: 6 4; }
.ws-hole.ws-edge { fill: #fff; stroke-width: 3; }
.ws-h-dowel { fill: #8b5a2b; stroke: #8b5a2b; } .ws-h-cam { fill: #2563eb; stroke: #2563eb; } .ws-h-cam-bolt { fill: #14b8a6; stroke: #14b8a6; }
.ws-h-pin { fill: #059669; stroke: #059669; } .ws-h-hinge-cup { fill: #dc2626; stroke: #dc2626; } .ws-h-hinge-screw, .ws-h-hinge-plate { fill: #f97316; stroke: #f97316; }
.ws-h-runner { fill: #7c3aed; stroke: #7c3aed; } .ws-h-handle { fill: #111827; stroke: #111827; } .ws-h-pipe, .ws-h-cutout { fill: #0891b2; stroke: #0891b2; fill-opacity: .5; }
.ws-h-confirmat { fill: #be185d; stroke: #be185d; }
.ws-hole.fb[class*="ws-h-"] { fill: none; }
.ws-hole.ws-edge[class*="ws-h-"] { fill: #fff; }
.ws-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; background: currentColor; }
.ws-dot.ws-h-dowel { background: #8b5a2b; } .ws-dot.ws-h-cam { background: #2563eb; } .ws-dot.ws-h-cam-bolt { background: #14b8a6; } .ws-dot.ws-h-pin { background: #059669; }
.ws-dot.ws-h-hinge-cup { background: #dc2626; } .ws-dot.ws-h-hinge-screw, .ws-dot.ws-h-hinge-plate { background: #f97316; } .ws-dot.ws-h-runner { background: #7c3aed; }
.ws-dot.ws-h-handle { background: #111827; } .ws-dot.ws-h-pipe, .ws-dot.ws-h-cutout { background: #0891b2; } .ws-dot.ws-h-confirmat { background: #be185d; }
.ws-warn { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; border-radius: 8px; padding: 8px 10px; font-size: 13px; margin-bottom: 8px; }
@media (max-width: 760px) {
  .ws-cabview, .ws-two { grid-template-columns: 1fr; }
  .ws-cablist { position: static; max-height: none; flex-direction: row; overflow-x: auto; }
  .ws-sheets { grid-template-columns: 1fr; }
  .ws-doc { padding: 12px 12px 60px; }
  .ws-top { padding: 8px 12px; }
}
/* print: the open tab alone, as a shop document with its header */
@media print {
  body.ws-open > *:not(#wsView) { display: none !important; }
  body.ws-open .ws-view { position: static; background: #fff; }
  body.ws-open .ws-top, body.ws-open .ws-cablist, body.ws-open .ws-bar, body.ws-open button.rp-btn { display: none !important; }
  body.ws-open .ws-doc { overflow: visible; padding: 0; }
  body.ws-open .ws-dochd { display: flex; justify-content: space-between; border-bottom: 2px solid #111; padding-bottom: 6px; margin-bottom: 8px; font-size: 12px; }
  body.ws-open .ws-cabview { display: block; }
  body.ws-open .ws-sec { border: 0; padding: 6px 0; break-inside: avoid; }
  body.ws-open .ws-sheets { display: block; }
  body.ws-open .ws-sheetfig { break-after: page; }
  body.ws-open .ws-t th { position: static; }
}
.ws-wmarks { display: inline-flex; gap: 3px; flex-wrap: wrap; }
.ws-wmarks:empty { display: none; }
.ws-dimb { font-weight: 700; }
/* a phone: the header's buttons ran off its right edge (?, settings, the assistant unreachable) — it scrolls sideways
   now, nothing wraps, and the Pro switch stays in the ☰ menu (review, 10-20) */
@media (max-width: 640px) {
  .rp-header { overflow-x: auto; scrollbar-width: none; }
  .rp-header::-webkit-scrollbar { display: none; }
  .rp-header > * { flex-shrink: 0; }
  .rp-header .rp-btn, .rp-header .rp-ai-btn { white-space: nowrap; }
  #proBtn { display: none; }
  .rp-ai-btn .lb { display: none; }
}
@media (max-width: 480px) {
  .rp-header { gap: 4px; padding: 8px 6px; }
  .rp-header h1 { display: none; }
  .rp-header .rp-btn { padding: 6px 8px; }
}
.ws-card.go { text-align: left; font: inherit; cursor: pointer; }
.ws-card.go:hover { border-color: #111827; background: #fff; }
.ws-mk.hung { background: #fff; color: #111827; box-shadow: inset 0 0 0 1.5px #111827; }
.ws-legend { font-size: 12px; color: #4b5563; padding: 8px 14px; }
.ws-parts { margin-top: 6px; font-size: 12px; }
.ws-parts summary { cursor: pointer; color: #4b5563; }
.ws-parts tr.lit td { background: #fef3c7; }
.ws-cabbtn .ws-st { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; font-size: 10px; color: #fff; }
@media print {
  body.ws-open .ws-legend { display: block !important; border: 0; padding: 0 0 6px; }
  body.ws-open .fx-link { color: inherit; background: none; border: 0; padding: 0; text-decoration: none; }
  body.ws-open .ws-pagebreak { break-before: page; }
  body.ws-open details.ws-parts > summary { display: none; }
  body.ws-open .ws-sheet.dim .ws-part:not(.lit) { opacity: .35; }
  body.ws-open .ws-card { border: 1px solid #999; }
}
.ws-dimo { stroke: #374151; stroke-width: 1.5; fill: none; }
.ws-job { font-size: 13px; color: #374151; font-weight: 600; }
@media (max-width: 760px) { .ws-job { display: none; } }
.ws-drawing .ws-dim, .ws-drawing .ws-dimo, .ws-drawing .ws-face, .ws-drawing .ws-band, .ws-drawing .ws-hole { vector-effect: non-scaling-stroke; }
body .ws-badge.pro-only, body.pro .ws-badge.pro-only { display: none !important; }      /* the Pro switch in the top bar says it now (it sat over Select — grok, 10-29) */
.ws-trim { fill: none; stroke: #b91c1c; stroke-width: 3; stroke-dasharray: 14 10; opacity: .5; }
.ws-hiline { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: -4px 0 8px; }
.ws-hikey { width: 16px; height: 12px; background: #fbbf24; border: 2px solid #92400e; border-radius: 2px; }
.ws-sticky { position: sticky; top: -18px; z-index: 2; box-shadow: 0 6px 12px -10px rgba(0,0,0,.3); }
.ws-num { fill: #111827; font-weight: 700; font-family: system-ui, sans-serif; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.ws-key { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: #374151; }
.ws-key span { display: inline-flex; align-items: center; }
.ws-key-band { display: inline-block; width: 18px; height: 4px; background: #4f46e5; margin-right: 6px; }
.ws-key-ref { display: inline-block; width: 10px; height: 10px; border-left: 3px solid #dc2626; border-bottom: 3px solid #dc2626; margin-right: 6px; }
@media print { body.ws-open .ws-sticky { position: static; box-shadow: none; } }
/* review fixes, 10-20 (codex): settings scroll on a short screen; a short library does not leave a tall empty panel */
.rp-settings { max-height: calc(100vh - 70px); overflow: auto; }
.rp-picker { height: auto; max-height: min(78vh, 640px); min-height: min(340px, 78vh); }
.rp-menu button.danger { color: #b91c1c; }
.rp-menu hr { border: 0; border-top: 1px solid #eceef2; margin: 4px 0; }
/* the assistant beside the open cabinet editor, not over it (zai, 10-20) */
@media (min-width: 821px) { body.fx-docked .rp-ai { right: 440px; } }

/* worktops as chunks (10-22): the surface panel's scope, its cabinets, sinks and hobs, boards; the cut-through */
.wt-scope { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 2px; font-size: 12px; color: #6b7280; }
.wt-scope button { border: 1px solid #d4d8df; background: #fff; border-radius: 999px; padding: 3px 10px; font: inherit; color: #374151; cursor: pointer; }
.wt-scope button.on { background: #2563eb; border-color: #2563eb; color: #fff; }
.wt-scope select { font: inherit; border: 1px solid #d4d8df; border-radius: 8px; padding: 3px 6px; max-width: 220px; }
.wt-chunk.on > span:first-child { color: #2563eb; font-weight: 600; }
.fx-sub { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #9ca3af; margin: 10px 0 4px; }
.wt-item { border: 1px solid #e5e7eb; border-radius: 10px; padding: 8px 10px; margin: 0 0 8px; }
.wt-item .fx-h small { font-weight: 400; color: #6b7280; }
.wt-bad { color: #dc2626; }
.fx-warn.err { color: #b91c1c; }
.wt-gap { margin-top: 8px; font-size: 12px; }
.wt-boards { width: 100%; max-height: 220px; touch-action: none; }
.ct-modal { position: fixed; inset: 0; background: rgba(15, 18, 24, .45); display: flex; align-items: center; justify-content: center; z-index: 90; padding: 16px; }
.ct-card { width: min(980px, 96vw); max-height: 94vh; overflow: auto; }
.ct-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 12px; }
.ct-fig { margin: 0; border: 1px solid #e5e7eb; border-radius: 10px; padding: 8px; background: #fafaf9; }
.ct-fig figcaption { font-size: 14px; font-weight: 600; color: #111827; margin-bottom: 6px; }
.ct-fig.ok { border-color: #86efac; }
.ct-views { display: grid; grid-template-columns: 3fr 2fr; gap: 8px; }
.ct-views small { display: block; font-size: 11.5px; color: #6b7280; margin-bottom: 2px; }
.ct-fig svg { width: 100%; height: 300px; }
.ct-opts { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.ct-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.ct-btns .rp-btn { align-self: auto; }
.ct-warn { color: #b45309 !important; }
/* (no dark figures: the app is light, and they came out black on black — Max, 10-26) */
.wt-chunk { display: flex; justify-content: space-between; gap: 8px; }
.wt-chunk > span:first-child { flex: 1; min-width: 0; }
.wt-item .fx-h { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.wt-item .fx-row { margin: 3px 0; }
.wt-item .fx-row > span:first-child { width: 92px; }
.wt-item .fw { flex: 1; min-width: 0; }
.wt-item select, .fp-body .wt-chunk select { font: inherit; font-size: 13px; border: 1px solid #d4d8df; border-radius: 8px; padding: 3px 6px; width: 100%; min-width: 0; background: #fff; }
.wt-item .chk { font-size: 13px; color: #4b5563; display: flex; gap: 6px; align-items: center; margin: 3px 0; }
.wt-diag .wt-part { cursor: pointer; pointer-events: all; }
.wt-diag .wt-part:hover { fill-opacity: 0.3; }
.wt-mid-parts { margin: 4px auto 8px; max-width: 280px; }
.wt-part-row { display: flex; align-items: center; gap: 8px; width: 100%; border: 1px solid transparent; background: none; border-radius: 8px; padding: 5px 6px; font: inherit; font-size: 13px; color: #374151; cursor: pointer; text-align: left; }
.wt-part-row:hover { background: #f3f4f6; }
.wt-part-row.on { border-color: #2563eb; background: #eff6ff; }
.wt-part-row i { width: 14px; height: 14px; border-radius: 4px; flex: none; opacity: .75; }
.wt-part-row span { flex: 1; min-width: 0; }
.wt-part-row small { color: #9ca3af; }
.wt-join span small { color: #9ca3af; margin-left: 4px; }
.wt-scope select.on { border-color: #2563eb; color: #1d4ed8; }
.wt-fact { display: block; font-style: normal; font-size: 12px; color: #6b7280; padding: 5px 2px; text-align: center; }
/* the worktop panel (Max, 10-24) */
.fx-editor.docked .fx-head .fx-title { flex: 1 1 0; order: 0; }
.fx-editor.docked .fx-head .fx-price { order: 5; margin-left: 0; }
.fx-editor.docked .fx-head::after { content: ''; order: 4; flex-basis: 100%; height: 0; }   /* the price chip on a row of its own, at its own width */
.fx-editor.docked .fx-head .fx-title-input { flex: 1; width: 100%; min-width: 0; }
.wt-diag .wt-edge { stroke: #2563eb; stroke-linecap: round; opacity: 0; pointer-events: none; }
.wt-diag[data-hl="front"] .wt-edge[data-side="front"], .wt-diag[data-hl="back"] .wt-edge[data-side="back"],
.wt-diag[data-hl="left"] .wt-edge[data-side="left"], .wt-diag[data-hl="right"] .wt-edge[data-side="right"] { opacity: .9; }
.wt-ov:hover span, .wt-ov:focus-within span { color: #1d4ed8; }
.fx-h small { font-weight: 400; color: #6b7280; }
.fx-unit small { color: #9ca3af; margin-left: 4px; }
.wt-front .fx-seg button { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.wt-scope { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wt-scope select { max-width: 100%; }
.fx-editor.docked .fx-head .rp-spacer { display: none; }   /* (it took half the row from the title) */
.wt-mid-edges, .wt-mid-top { margin: 4px auto 6px; max-width: 360px; }
.wt-ediag { max-height: 340px; }
.wt-ediag .wt-edge.on { opacity: .9; }
.wt-ebox { width: 100%; height: 100%; box-sizing: border-box; text-align: center; border: solid #c9ced6; background: #fff; color: #111827; padding: 0; font-family: inherit; }
.wt-ebox::placeholder { color: #9ca3af; }
.wt-ebox:focus { outline: none; border-color: #2563eb; }
.fx-editor.docked .fx-head, .fx-editor.docked .fx-head .fx-title { align-items: center; }
.wt-mat { display: flex; align-items: center; gap: 10px; margin: 2px 0 8px; }
.wt-mat-sw { width: 44px; height: 44px; border-radius: 8px; border: 1px solid #d4d8df; flex: none; background-size: cover; }
.wt-mat-nm { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; color: #111827; }
.wt-mat-nm small { color: #6b7280; font-size: 11.5px; }
.wt-ask { margin: 2px 0 10px; padding: 10px 12px; border: 1px solid #93c5fd; background: #eff6ff; border-radius: 10px; font-size: 13px; color: #1e3a8a; }
.wt-ask > span { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.wt-mat-others { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 10px; }
.wt-mat-others small { font-size: 11.5px; color: #8a93a1; }
.wt-mat-others .fx-swatch { width: 22px; height: 22px; }

/* the Parts tab's joins (Max, 10-26: "one worktop or two" was long names in a narrow column) */
.wt-join { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid #eef0f3; }
.wt-join:last-child { border-bottom: 0; }
.wt-pair { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.wt-pair i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.wt-pair em { font-style: normal; color: #8a93a1; margin: 0 3px; }
.wt-join small { flex: 1; color: #6b7280; font-size: 12px; }
.wt-gap { display: flex; gap: 8px; align-items: center; margin-top: 12px; font-size: 13px; }

/* the Extras tab (Max, 10-26) */
.wt-ex-row { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.wt-ex-row.wrap { flex-wrap: wrap; }
.wt-chip i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.wt-ex-mat { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.wt-mat-sw.sm { width: 24px; height: 24px; }
.wt-ex-legend { display: flex; gap: 14px; font-size: 12px; color: #6b7280; margin: 4px 0; }
.wt-ex-legend i { display: inline-block; width: 18px; height: 4px; border-radius: 2px; margin-right: 6px; vertical-align: 3px; }
.wt-lg-sp { background: #2563eb; } .wt-lg-wf { background: #ea580c; }

/* the Sinks & hobs tab's cards (Max, 10-26: drag them onto the worktop) */
.wt-ins-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin-top: 6px; }
.wt-ins-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border: 1px solid #e0e5ec; border-radius: 10px; background: #fafbfd; font: inherit; font-size: 12.5px; color: #23272e; cursor: grab; touch-action: none; }
.wt-ins-card:hover { border-color: #2563eb; background: #f2f5fa; }
.wt-ins-card img { width: 72px; height: 56px; object-fit: contain; pointer-events: none; }
.wt-ins-card small { color: #8a93a1; font-size: 11px; }
.wt-chip.idle { opacity: .6; border-style: dashed; }
.wt-ebox.on { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, .25); }

/* the cut-through in 3D (10-27) */
.ct-3d { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.ct-view { position: relative; height: 340px; border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; background: #eef0f4; touch-action: none; }
.ct-view.ok { border-color: #86efac; }
.ct-view canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.ct-vh { position: absolute; left: 10px; top: 8px; z-index: 2; font-size: 13px; font-weight: 600; color: #111827; background: rgba(255,255,255,.85); padding: 2px 8px; border-radius: 6px; pointer-events: none; }
.ct-tag { position: absolute; z-index: 2; transform: translate(10px, -50%); font-size: 12px; font-weight: 600; color: #fff; background: #dc2626; padding: 2px 8px; border-radius: 6px; pointer-events: none; white-space: nowrap; }
.ct-tag::before { content: ''; position: absolute; left: -10px; top: 50%; width: 10px; height: 2px; background: #dc2626; }
.ct-hint { font-size: 11.5px; color: #6b7280; margin: 4px 2px 0; }
.ct-view .fx-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #6b7280; font-size: 12px; }
.ct-need { position: absolute; z-index: 2; transform: translate(8px, -50%); font-size: 11.5px; font-weight: 600; color: #b91c1c; background: rgba(255,255,255,.9); border: 1px solid #fca5a5; padding: 1px 6px; border-radius: 6px; pointer-events: none; white-space: nowrap; }
.ct-need.ok { color: #15803d; border-color: #86efac; }
/* 3D labels kept apart (10-29): leader lines, a small chip when crowded, the mark in Pro */
.rp-lab-lines { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.rp-lab-lines line { stroke: rgba(17, 24, 39, .55); stroke-width: 1.2; }
.rp-lab-lines circle { fill: #111827; }
.rp-label3d.small { padding: 1px 6px; font-size: 11px; }
.rp-label3d .mk { font-style: normal; background: #111827; color: #fbbf24; border-radius: 4px; padding: 0 4px; margin-right: 5px; font-size: 11px; }
/* the dimensioned elevation (Pro, Wall view) */
.rp-dims { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.rp-dims svg { position: absolute; inset: 0; overflow: visible; }
.rp-dims line { stroke: #1e3a8a; stroke-width: 1; }
.rp-dims line.ext { stroke: #1e3a8a; stroke-opacity: .45; stroke-dasharray: 3 3; }
.rp-dims line.tick { stroke-width: 1.6; }
.rp-dims .gap line:not(.ext) { stroke: #b45309; }
.rp-dims .all line:not(.ext) { stroke-width: 1.3; }
.rp-dims text { font: 600 11px/1 system-ui, sans-serif; fill: #1e3a8a; text-anchor: middle; paint-order: stroke; stroke: #fff; stroke-width: 3.5px; stroke-linejoin: round; }
.rp-dims .gap text { fill: #b45309; }
.rp-dims text.lvl { text-anchor: start; }
.rp-dims circle.lvl { fill: #1e3a8a; }
/* part codes in Isolate (Pro) */
.rp-parts3d { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.rp-part3d { position: absolute; transform: translate(-50%, -50%); background: rgba(255, 255, 255, .94); border: 1px solid rgba(30, 41, 59, .25); border-radius: 5px; padding: 1px 5px; font-size: 10.5px; line-height: 15px; color: #334155; white-space: nowrap; }
.rp-part3d b { font-weight: 700; color: #0f172a; font-variant-numeric: tabular-nums; }
.rp-part3d.front { border-color: #d97706; }
.rp-part3d-head { position: absolute; left: 12px; top: 118px; background: #111827; color: #f9fafb; font-size: 12px; padding: 4px 10px; border-radius: 6px; }
.rp-part3d-head b { color: #fbbf24; }
.ws-t tr.go { cursor: pointer; }
.ws-t tr.go:hover td { background: #f8fafc; }
/* the 3D view's buttons clear the docked cabinet panel, wrapping when the view is narrow (10-29: they ran under it) */
.rp-3dchips { flex-wrap: wrap; justify-content: flex-end; max-width: calc(100% - 24px); }
body.fx-docked .rp-3dchips { right: calc(min(440px, 100vw) + 12px); max-width: calc(100% - min(440px, 100vw) - 24px); }
/* the Explode slider beside Isolate (Pro) */
.rp-3dchips .rp-explode { gap: 6px; align-items: center; }
body.pro .rp-3dchips .rp-explode[hidden] { display: none !important; }
.rp-3dchips .rp-explode input { width: 90px; accent-color: #2563eb; }
.rp-dims .over line:not(.ext) { stroke: #dc2626; }
.rp-dims .over text { fill: #dc2626; }
.rp-dims text.lvl-l { text-anchor: end; }
.rp-dims .open line:not(.ext) { stroke: #0f766e; }
.rp-dims .open text { fill: #0f766e; }
.rp-dims .open.gap line:not(.ext) { stroke-dasharray: 4 3; }
/* the key to the Grain / Edge banding colours (Pro) */
.rp-techkey { position: absolute; left: 12px; top: 152px; z-index: 4; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; max-width: calc(100% - 24px);
  background: rgba(255, 255, 255, .95); border: 1px solid #dde0e6; border-radius: 8px; padding: 5px 9px; font-size: 12px; color: #374151; pointer-events: none; }
.rp-techkey[hidden] { display: none; }
.rp-techkey b { margin-right: 4px; }
.rp-techkey i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-left: 4px; }
/* ① Room: the furniture is not this step's — faint on the plan too (Max, 10-30) */
body.st-room.room-fade #pane2d .fpiece { opacity: .28; }
/* a clicked colour flying to what it paints (Max, 10-30) */
.mt-ghost.fly { z-index: 70; box-shadow: 0 0 0 3px #fff, 0 8px 22px rgba(20, 30, 50, .35); transition: opacity .25s, transform .25s; }
.mt-ghost.fly.landed { opacity: 0; }