/* JM Boxes Foam Builder — brand: Box Black / Graphite surfaces, Volt accent (sparingly), Inter type */
.jmfb-root {
  --jm-black: #111214;
  --jm-volt: #CCFF00;
  --jm-graphite: #2A2D31;
  --jm-steel: #8B9097;
  --jm-fog: #ECEEF0;
  --jm-white: #FFFFFF;
  --jm-volt-deep: #4D6600;
  --jm-panel: #18191C;
  --jm-line: #2E3136;
  --jm-red: #FF5A4E;
  --jm-amber: #FFB020;
  --jm-display: "Inter Display", "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --jm-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --jm-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --jm-radius: 10px;

  position: relative;
  display: grid;
  grid-template-rows: 56px minmax(0, 1fr) 32px;
  height: calc(100vh - var(--jmfb-offset, 0px));
  min-height: 620px;
  width: 100%;
  background: var(--jm-black);
  color: var(--jm-white);
  font: 400 14px/1.45 var(--jm-body);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  isolation: isolate;
  text-align: left;
}
.jmfb-root *, .jmfb-root *::before, .jmfb-root *::after { box-sizing: border-box; }
.jmfb-root button, .jmfb-root input, .jmfb-root select, .jmfb-root textarea { font: inherit; color: inherit; margin: 0; letter-spacing: normal; text-transform: none; }
.jmfb-root h3, .jmfb-root h4, .jmfb-root p, .jmfb-root ol, .jmfb-root ul { margin: 0; padding: 0; }
.jmfb-root a { color: var(--jm-volt); }
.jmfb-root :focus-visible { outline: 2px solid var(--jm-volt); outline-offset: 2px; }
.jmfb-root [hidden] { display: none !important; }

/* Full-bleed on the builder page; full screen mode. */
body.jmfb-page .jmfb-root { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }
.jmfb-root.is-full { position: fixed; inset: 0; z-index: 999999; height: 100vh; width: 100vw; margin: 0; }
body.admin-bar .jmfb-root { --jmfb-offset: 32px; }
body.admin-bar .jmfb-root.is-full { top: 0; height: 100vh; }

.jmfb-loading { display: flex; gap: 12px; align-items: center; justify-content: center; height: 100%; color: var(--jm-steel); font: 500 14px var(--jm-body); grid-row: 1 / -1; }
.jmfb-loading img { animation: jmfb-pulse 1.4s ease-in-out infinite; }
@keyframes jmfb-pulse { 50% { opacity: .4; } }

.jmfb-mono { font-family: var(--jm-mono); font-weight: 500; font-size: 12px; }
.jmfb-dim { color: var(--jm-steel); }
.jmfb-small { font-size: 12px; }
.jmfb-spacer { flex: 1; }
.jmfb-ico { display: inline-flex; line-height: 0; }

/* Label tape + eyebrows (brand graphic element). */
.jmfb-label-tape { display: inline-block; background: var(--jm-volt); color: var(--jm-black); font: 800 11px/1 var(--jm-body); letter-spacing: .14em; text-transform: uppercase; padding: 5px 8px; border-radius: 2px; white-space: nowrap; }
.jmfb-eyebrow { font: 800 11px/1.2 var(--jm-body); letter-spacing: .14em; text-transform: uppercase; color: var(--jm-steel); margin-bottom: 10px; }

/* ------------------------------------------------------------ top bar */
.jmfb-top { display: flex; align-items: center; gap: 12px; padding: 0 12px 0 14px; background: var(--jm-black); border-bottom: 1px solid var(--jm-line); position: relative; z-index: 3; min-width: 0; }
.jmfb-top::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: rgba(255,255,255,.04); pointer-events: none; }
.jmfb-logo { display: inline-flex; flex: none; }
.jmfb-logo img { display: block; height: 26px; width: auto; }
.jmfb-namewrap { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 0 1 380px; }
.jmfb-name { background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 6px 8px; font: 700 15px/1.2 var(--jm-display) !important; letter-spacing: -.01em !important; min-width: 0; width: 100%; color: var(--jm-white); }
.jmfb-name:hover { border-color: var(--jm-line); }
.jmfb-name:focus { border-color: var(--jm-steel); outline: none; background: var(--jm-panel); }
.jmfb-savestate { font: 500 12px var(--jm-body); color: var(--jm-steel); white-space: nowrap; }
.jmfb-savestate.is-ok::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--jm-volt); margin-right: 6px; vertical-align: 1px; }
.jmfb-savestate.is-lock { color: var(--jm-amber); }
.jmfb-group { display: flex; align-items: center; gap: 4px; }
.jmfb-zoomlbl { background: none; border: 0; color: var(--jm-steel); font: 500 12px var(--jm-mono); min-width: 48px; cursor: pointer; padding: 6px 2px; }
.jmfb-zoomlbl:hover { color: var(--jm-white); }

/* ------------------------------------------------------------ buttons */
.jmfb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px solid transparent; background: var(--jm-graphite); color: var(--jm-white); border-radius: 6px; padding: 8px 12px; cursor: pointer; font: 600 13px/1 var(--jm-body) !important; white-space: nowrap; transition: background .12s, border-color .12s, color .12s; text-decoration: none; }
.jmfb-btn:hover:not(:disabled) { background: #34383D; }
.jmfb-btn:disabled { opacity: .38; cursor: not-allowed; }
.jmfb-primary { background: var(--jm-volt); color: var(--jm-black); font: 800 13px/1 var(--jm-body) !important; letter-spacing: .08em !important; text-transform: uppercase !important; padding: 12px 16px; }
.jmfb-primary:hover:not(:disabled) { background: #D9FF3D; }
.jmfb-outline { background: transparent; border-color: rgba(255,255,255,.8); }
.jmfb-outline:hover:not(:disabled) { background: rgba(255,255,255,.08); }
.jmfb-ghost { background: transparent; border-color: var(--jm-line); color: var(--jm-fog); }
.jmfb-ghost:hover:not(:disabled) { background: var(--jm-graphite); }
.jmfb-danger { color: #FF8A80; }
.jmfb-sm { padding: 6px 9px; font-size: 12px !important; }
.jmfb-block { width: 100%; }
.jmfb-link { background: none; border: 0; padding: 4px 0; color: var(--jm-steel); text-decoration: underline; text-underline-offset: 3px; }
.jmfb-link:hover:not(:disabled) { background: none; color: var(--jm-white); }
.jmfb-ibtn { width: 34px; height: 34px; padding: 0; background: transparent; color: var(--jm-fog); }
.jmfb-ibtn:hover:not(:disabled) { background: var(--jm-graphite); }
.jmfb-chipbtn { background: var(--jm-graphite); border: 1px solid var(--jm-line); color: var(--jm-fog); border-radius: 999px; padding: 5px 10px; font: 600 12px/1 var(--jm-body); cursor: pointer; }
.jmfb-chipbtn:hover { border-color: var(--jm-steel); }
.jmfb-chipbtn.is-on { border-color: var(--jm-volt); color: var(--jm-volt); }

/* Segmented control. */
.jmfb-seg { display: inline-flex; background: var(--jm-black); border: 1px solid var(--jm-line); border-radius: 7px; padding: 2px; gap: 2px; flex-wrap: nowrap; }
.jmfb-seg button { background: transparent; border: 0; color: var(--jm-steel); padding: 6px 10px; border-radius: 5px; font: 600 12px/1 var(--jm-body); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.jmfb-seg button:hover:not(:disabled) { color: var(--jm-white); }
.jmfb-seg button.is-on { background: var(--jm-graphite); color: var(--jm-white); box-shadow: inset 0 -2px 0 var(--jm-volt); }
.jmfb-seg button:disabled { opacity: .4; cursor: not-allowed; }
.jmfb-seg-wrap { flex-wrap: wrap; }
.jmfb-units button { padding: 6px 8px; font-family: var(--jm-mono); }

/* ------------------------------------------------------------ body */
.jmfb-body { display: grid; grid-template-columns: 52px minmax(0, 1fr) 340px; min-height: 0; }
.jmfb-tools { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0; background: var(--jm-black); border-right: 1px solid var(--jm-line); overflow-y: auto; scrollbar-width: none; }
.jmfb-tools hr { width: 24px; border: 0; border-top: 1px solid var(--jm-line); margin: 6px 0; }
.jmfb-tool { width: 38px; height: 38px; color: var(--jm-steel); border-radius: 8px; flex: none; }
.jmfb-tool:hover:not(:disabled) { color: var(--jm-white); }
.jmfb-tool.is-on { color: var(--jm-volt); background: var(--jm-graphite); box-shadow: inset 2px 0 0 var(--jm-volt); }

.jmfb-canvas-host { position: relative; min-width: 0; min-height: 0; background: #0D0E10; }
.jmfb-stage { position: absolute; inset: 0; display: grid; grid-template-columns: 22px 1fr; grid-template-rows: 22px 1fr; }
.jmfb-ruler { display: block; width: 100%; height: 100%; }
.jmfb-ruler-corner { background: #16171A; color: var(--jm-steel); font: 500 9px/22px var(--jm-mono); text-align: center; border-right: 1px solid var(--jm-line); border-bottom: 1px solid var(--jm-line); }
.jmfb-ruler-top { border-bottom: 1px solid var(--jm-line); }
.jmfb-ruler-left { border-right: 1px solid var(--jm-line); }
.jmfb-ruler-corner { grid-area: 1 / 1; } .jmfb-ruler-top { grid-area: 1 / 2; } .jmfb-ruler-left { grid-area: 2 / 1; }
.jmfb-svgwrap { grid-area: 2 / 2; position: relative; overflow: hidden;
  /* flute texture: corrugated plastic nod */
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 9px), #0D0E10; }
.jmfb-svg { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; outline: none; cursor: default; }
.jmfb-svg[data-tool="hand"], .jmfb-svg.is-space { cursor: grab; }
.jmfb-svg.is-panning { cursor: grabbing; }
.jmfb-svg[data-tool="rect"], .jmfb-svg[data-tool="ellipse"], .jmfb-svg[data-tool="draw"], .jmfb-svg[data-tool="measure"] { cursor: crosshair; }
.jmfb-svg[data-tool="text"] { cursor: text; }
.jmfb-case { stroke: rgba(255,255,255,.12); stroke-width: 1; vector-effect: non-scaling-stroke; }
.jmfb-foam { stroke: rgba(255,255,255,.18); stroke-width: 1; vector-effect: non-scaling-stroke; }
.jmfb-item { cursor: move; }
.jmfb-svg[data-tool="rect"] .jmfb-item, .jmfb-svg[data-tool="ellipse"] .jmfb-item, .jmfb-svg[data-tool="draw"] .jmfb-item { cursor: crosshair; }
.jmfb-item path { transition: filter .1s; }
.jmfb-item:hover path { filter: brightness(1.35); }
.jmfb-item.is-sel path { stroke: var(--jm-volt) !important; }
.jmfb-lbl { fill: rgba(255,255,255,.88); font-family: var(--jm-body); font-weight: 600; pointer-events: none; }
.jmfb-depth { fill: var(--jm-steel); font-family: var(--jm-mono); font-weight: 500; pointer-events: none; }
.jmfb-preview { fill: rgba(204,255,0,.12); stroke: var(--jm-volt); stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.jmfb-selbox { fill: none; stroke: var(--jm-volt); stroke-width: 1; stroke-dasharray: 4 3; pointer-events: none; }
.jmfb-handle { fill: var(--jm-white); stroke: var(--jm-black); stroke-width: 1.5; }
.jmfb-handle:hover { fill: var(--jm-volt); }
.jmfb-rothandle { cursor: grab; fill: var(--jm-volt); }
.jmfb-rotline { stroke: var(--jm-volt); stroke-width: 1; pointer-events: none; }
.jmfb-guide { stroke: #FF3DA5; stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.jmfb-marquee { fill: rgba(204,255,0,.06); stroke: var(--jm-volt); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.jmfb-drawline { fill: none; stroke: var(--jm-volt); stroke-width: 1.5; pointer-events: none; }
.jmfb-drawpt { fill: var(--jm-black); stroke: var(--jm-volt); stroke-width: 1.5; pointer-events: none; }
.jmfb-drawpt.is-first { fill: var(--jm-volt); }
.jmfb-editline { fill: rgba(204,255,0,.05); stroke: var(--jm-volt); stroke-width: 1; pointer-events: none; }
.jmfb-vertex { fill: var(--jm-white); stroke: var(--jm-black); stroke-width: 1.5; cursor: move; }
.jmfb-vertex:hover { fill: var(--jm-volt); }
.jmfb-measure { stroke: #38BDF8; stroke-width: 1.5; pointer-events: none; }
.jmfb-measure-pt { fill: #38BDF8; pointer-events: none; }
.jmfb-tip { pointer-events: none; }
.jmfb-tip rect { fill: var(--jm-black); stroke: var(--jm-line); }
.jmfb-tip text { fill: var(--jm-white); font: 500 11px var(--jm-mono); }
.jmfb-hud { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); background: rgba(17,18,20,.92); border: 1px solid var(--jm-line); color: var(--jm-fog); font: 500 12px var(--jm-body); padding: 7px 12px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .15s; max-width: calc(100% - 40px); text-align: center; }
.jmfb-hud.is-on { opacity: 1; }
.jmfb-banner { position: absolute; z-index: 2; top: 32px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; background: rgba(17,18,20,.95); border: 1px solid var(--jm-amber); color: var(--jm-fog); padding: 8px 10px 8px 12px; border-radius: 8px; font-size: 13px; max-width: calc(100% - 48px); }
.jmfb-banner .jmfb-ico { color: var(--jm-amber); }

/* ------------------------------------------------------------ sidebar */
.jmfb-side { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--jm-panel); border-left: 1px solid var(--jm-line); min-height: 0; }
.jmfb-tabs { display: flex; border-bottom: 1px solid var(--jm-line); padding: 0 8px; }
.jmfb-tabs button { flex: 1; background: none; border: 0; padding: 13px 4px 11px; color: var(--jm-steel); font: 800 11px/1 var(--jm-body); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; border-bottom: 2px solid transparent; }
.jmfb-tabs button:hover { color: var(--jm-white); }
.jmfb-tabs button.is-on { color: var(--jm-white); border-bottom-color: var(--jm-volt); }
.jmfb-panel { overflow-y: auto; padding: 4px 16px 24px; scrollbar-width: thin; scrollbar-color: var(--jm-graphite) transparent; }
.jmfb-sec { padding: 16px 0; border-bottom: 1px solid var(--jm-line); display: grid; gap: 10px; }
.jmfb-sec:last-child { border-bottom: 0; }
.jmfb-sec > .jmfb-eyebrow { margin-bottom: 0; }
.jmfb-help { color: var(--jm-steel); font-size: 12.5px; line-height: 1.5; }
.jmfb-help a { color: var(--jm-volt); }
.jmfb-warn-inline { color: var(--jm-amber); font-size: 12.5px; }
.jmfb-row { display: flex; align-items: flex-end; gap: 6px; }
.jmfb-row > .jmfb-field { flex: 1; }
.jmfb-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.jmfb-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.jmfb-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.jmfb-alignrow { display: flex; gap: 4px; }

.jmfb-field { display: grid; gap: 5px; min-width: 0; }
.jmfb-field-inline { grid-auto-flow: column; align-items: center; gap: 10px; }
.jmfb-field-l { font: 600 11.5px/1.2 var(--jm-body); color: var(--jm-steel); }
.jmfb-field-in { position: relative; display: block; }
.jmfb-field-in i { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font: 500 11px var(--jm-mono); color: var(--jm-steel); font-style: normal; pointer-events: none; }
.jmfb-input { width: 100%; background: var(--jm-black); border: 1px solid var(--jm-line); border-radius: 6px; padding: 8px 10px; color: var(--jm-white); font: 500 13px/1.3 var(--jm-body); min-width: 0; }
.jmfb-field-in .jmfb-input { padding-right: 34px; font-family: var(--jm-mono); font-size: 12.5px; }
.jmfb-input:hover:not(:disabled) { border-color: #41454B; }
.jmfb-input:focus { border-color: var(--jm-volt); outline: none; }
.jmfb-input:disabled { opacity: .5; }
.jmfb-input-sm { padding: 6px 8px; font-size: 12.5px; }
select.jmfb-input { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--jm-steel) 50%), linear-gradient(135deg, var(--jm-steel) 50%, transparent 50%); background-position: calc(100% - 14px) 52%, calc(100% - 9px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 26px; }
textarea.jmfb-input { resize: vertical; min-height: 64px; }
.jmfb-input-name { font: 700 14px var(--jm-display); }
.jmfb-root input[type="range"].jmfb-range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 22px; margin: 0; padding: 0; background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0; outline: none; cursor: pointer; min-height: 0; }
.jmfb-root input[type="range"].jmfb-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--jm-graphite); border: 0; }
.jmfb-root input[type="range"].jmfb-range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--jm-graphite); border: 0; }
.jmfb-root input[type="range"].jmfb-range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--jm-volt-deep); }
.jmfb-root input[type="range"].jmfb-range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: var(--jm-volt); border: 2px solid var(--jm-black); box-shadow: 0 0 0 1px var(--jm-volt); }
.jmfb-root input[type="range"].jmfb-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--jm-volt); border: 2px solid var(--jm-black); box-shadow: 0 0 0 1px var(--jm-volt); }
.jmfb-root input[type="range"].jmfb-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(204,255,0,.45); }
.jmfb-slider { display: grid; gap: 4px; }
.jmfb-slider-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.jmfb-slider-ctl { display: inline-flex; align-items: center; gap: 2px; }
.jmfb-root input.jmfb-slider-val { width: 74px; text-align: center; background: var(--jm-black); border: 1px solid var(--jm-line); border-radius: 5px; padding: 4px 6px; font: 500 12px var(--jm-mono); color: var(--jm-white); }
.jmfb-root input.jmfb-slider-val:focus { border-color: var(--jm-volt); outline: none; }
.jmfb-step.jmfb-ibtn { width: 24px; height: 24px; color: var(--jm-steel); }
.jmfb-step .jmfb-ico svg { width: 14px; height: 14px; }
.jmfb-rule { border: 0; border-top: 1px solid var(--jm-line); margin: 2px 0; width: 100%; }
.jmfb-trace-readout { font-size: 11.5px; line-height: 1.5; }

.jmfb-toggle { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13px; color: var(--jm-fog); user-select: none; }
.jmfb-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.jmfb-toggle-ui { width: 30px; height: 17px; border-radius: 999px; background: var(--jm-graphite); border: 1px solid var(--jm-line); position: relative; flex: none; transition: background .12s; }
.jmfb-toggle-ui::after { content: ""; position: absolute; width: 11px; height: 11px; top: 2px; left: 2px; border-radius: 50%; background: var(--jm-steel); transition: transform .12s, background .12s; }
.jmfb-toggle input:checked + .jmfb-toggle-ui { background: var(--jm-volt-deep); border-color: var(--jm-volt-deep); }
.jmfb-toggle input:checked + .jmfb-toggle-ui::after { transform: translateX(13px); background: var(--jm-volt); }
.jmfb-toggle input:focus-visible + .jmfb-toggle-ui { outline: 2px solid var(--jm-volt); outline-offset: 2px; }
.jmfb-toggle input:disabled ~ * { opacity: .45; }

.jmfb-itemhead { display: grid; gap: 8px; }
.jmfb-chip { justify-self: start; font: 800 10.5px/1 var(--jm-body); letter-spacing: .14em; text-transform: uppercase; color: var(--jm-steel); border: 1px solid var(--jm-line); border-radius: 3px; padding: 4px 6px; }
.jmfb-depthbar { position: relative; height: 6px; background: var(--jm-black); border: 1px solid var(--jm-line); border-radius: 3px; }
.jmfb-depthbar span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--jm-steel); border-radius: 2px; }
.jmfb-depthbar em { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--jm-amber); }

.jmfb-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.jmfb-swatch { width: 24px; height: 24px; border-radius: 6px; border: 1px solid rgba(255,255,255,.18); cursor: pointer; padding: 0; position: relative; }
.jmfb-swatches-lg .jmfb-swatch { width: 32px; height: 32px; }
.jmfb-swatch.is-on { outline: 2px solid var(--jm-white); outline-offset: 2px; }
.jmfb-quickadd { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.jmfb-tile { flex-direction: column; gap: 8px; padding: 16px 8px; background: var(--jm-black); border: 1px solid var(--jm-line); border-radius: var(--jm-radius); color: var(--jm-fog); }
.jmfb-tile:hover:not(:disabled) { border-color: var(--jm-steel); background: var(--jm-black); }
.jmfb-tile .jmfb-ico { color: var(--jm-steel); }
.jmfb-steps { list-style: none; counter-reset: s; display: grid; gap: 10px; }
.jmfb-steps li { counter-increment: s; position: relative; padding-left: 30px; color: var(--jm-steel); font-size: 13px; }
.jmfb-steps li b { color: var(--jm-white); font-weight: 600; }
.jmfb-steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 1px; font: 500 11px var(--jm-mono); color: var(--jm-volt); }

/* Layers. */
.jmfb-stackdiag { display: flex; flex-direction: column; height: 180px; border: 2px solid #3A3D42; border-radius: 8px; overflow: hidden; background: var(--jm-black); }
.jmfb-sd-lid { border-bottom: 3px solid #3A3D42; display: flex; align-items: center; justify-content: center; font: 500 10.5px var(--jm-mono); color: var(--jm-steel); background: repeating-linear-gradient(135deg, #16171A 0 6px, #1B1C20 6px 12px); min-height: 18px; }
.jmfb-sd-base { display: flex; flex-direction: column; position: relative; min-height: 0; }
.jmfb-sd-gap { background: repeating-linear-gradient(45deg, transparent 0 5px, rgba(255,90,78,.12) 5px 7px); }
.jmfb-sd-base.is-over { box-shadow: inset 0 0 0 2px var(--jm-red); }
.jmfb-sd-layer { border: 0; border-top: 1px solid rgba(255,255,255,.12); min-height: 10px; display: flex; align-items: center; padding: 0 8px; cursor: pointer; color: var(--jm-white); font: 500 10.5px var(--jm-mono); text-shadow: 0 1px 2px rgba(0,0,0,.6); overflow: hidden; }
.jmfb-sd-layer.is-on { box-shadow: inset 3px 0 0 var(--jm-volt); }
.jmfb-meter { height: 4px; background: var(--jm-graphite); border-radius: 2px; overflow: hidden; }
.jmfb-meter span { display: block; height: 100%; background: var(--jm-steel); }
.jmfb-meter.is-ok span { background: var(--jm-volt); }
.jmfb-meter.is-warn span { background: var(--jm-amber); }
.jmfb-meter.is-bad span { background: var(--jm-red); }
.jmfb-layerlist { display: grid; gap: 8px; }
.jmfb-layer { border: 1px solid var(--jm-line); border-radius: var(--jm-radius); padding: 10px; display: grid; gap: 8px; background: var(--jm-black); cursor: pointer; position: relative; }
.jmfb-layer::before { content: ""; position: absolute; left: 10px; right: 10px; top: 4px; height: 1px; background: rgba(255,255,255,.05); }
.jmfb-layer.is-on { border-color: var(--jm-volt); }
.jmfb-layer-head, .jmfb-layer-row { display: flex; align-items: center; gap: 6px; }
.jmfb-layer-row > select { flex: 1; }
.jmfb-layer-head .jmfb-dim { white-space: nowrap; }
.jmfb-layer-idx { font: 500 11px var(--jm-mono); color: var(--jm-volt); width: 22px; }
.jmfb-layer .jmfb-ibtn { width: 28px; height: 28px; }

/* Cases. */
.jmfb-caselist { display: grid; gap: 6px; max-height: 320px; overflow-y: auto; }
.jmfb-case { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; text-align: left; background: var(--jm-black); border: 1px solid var(--jm-line); border-radius: 8px; padding: 10px 12px; cursor: pointer; color: var(--jm-white); }
.jmfb-case:hover:not(:disabled) { border-color: var(--jm-steel); }
.jmfb-case.is-on { border-color: var(--jm-volt); box-shadow: inset 3px 0 0 var(--jm-volt); }
.jmfb-case.is-static { cursor: default; }
.jmfb-case.is-static .jmfb-btn { grid-column: 1 / -1; justify-self: start; margin-top: 6px; }
.jmfb-case-name { font: 700 14px var(--jm-display); letter-spacing: -.01em; }
.jmfb-case-series { grid-column: 1; font-size: 12px; color: var(--jm-steel); }
.jmfb-case-dims { grid-column: 1; color: var(--jm-steel); }
.jmfb-case-price { grid-column: 2; grid-row: 1; font: 500 12px var(--jm-mono); color: var(--jm-fog); }
.jmfb-label-preview { justify-self: start; font-size: 13px; padding: 7px 10px; }

/* Price. */
.jmfb-price { border-top: 1px solid var(--jm-line); padding: 14px 16px 16px; display: grid; gap: 10px; background: var(--jm-black); position: relative; }
.jmfb-price::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: rgba(255,255,255,.05); }
.jmfb-price-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.jmfb-price-head .jmfb-eyebrow { margin-bottom: 4px; }
.jmfb-price-total { font: 900 30px/1 var(--jm-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.jmfb-price-total.is-pending { opacity: .7; }
.jmfb-qtywrap { display: grid; gap: 4px; width: 74px; }
.jmfb-qty { text-align: center; font-family: var(--jm-mono); }
.jmfb-breakdown summary { cursor: pointer; color: var(--jm-steel); font-size: 12px; list-style: none; }
.jmfb-breakdown summary::-webkit-details-marker { display: none; }
.jmfb-breakdown summary::before { content: "+ "; font-family: var(--jm-mono); }
.jmfb-breakdown[open] summary::before { content: "− "; }
.jmfb-breakdown table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 12.5px; }
.jmfb-breakdown td { padding: 3px 0; color: var(--jm-fog); border-bottom: 1px dashed var(--jm-line); }
.jmfb-breakdown td:last-child { text-align: right; }
.jmfb-price-links { display: flex; justify-content: space-between; }

/* ------------------------------------------------------------ status + warnings */
.jmfb-statusbar { display: flex; align-items: center; gap: 16px; padding: 0 10px 0 14px; border-top: 1px solid var(--jm-line); background: var(--jm-black); color: var(--jm-steel); font-size: 12px; min-width: 0; overflow: hidden; }
.jmfb-cursor { min-width: 150px; }
.jmfb-statusbar > * { white-space: nowrap; }
.jmfb-stat { background: none; border: 0; color: var(--jm-steel); cursor: pointer; font: 500 12px var(--jm-mono); padding: 0; white-space: nowrap; }
.jmfb-stat:hover { color: var(--jm-white); }
.jmfb-stack.is-bad { color: var(--jm-red); }
.jmfb-warnbtn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--jm-line); border-radius: 999px; padding: 3px 10px; cursor: pointer; font: 600 12px var(--jm-body); color: var(--jm-steel); white-space: nowrap; }
.jmfb-warnbtn.is-ok { color: var(--jm-volt); border-color: rgba(204,255,0,.35); }
.jmfb-warnbtn.is-warn { color: var(--jm-amber); border-color: rgba(255,176,32,.45); }
.jmfb-warnbtn.is-bad { color: var(--jm-red); border-color: rgba(255,90,78,.55); }
.jmfb-warnpanel { position: absolute; right: 352px; bottom: 40px; width: 380px; max-height: min(60vh, 520px); overflow-y: auto; background: var(--jm-panel); border: 1px solid var(--jm-line); border-radius: 12px; padding: 12px 14px; z-index: 5; box-shadow: 0 18px 48px rgba(0,0,0,.5); display: grid; gap: 8px; }
.jmfb-warn-head { display: flex; align-items: center; justify-content: space-between; }
.jmfb-warn-head .jmfb-eyebrow { margin: 0; }
.jmfb-warn { display: grid; grid-template-columns: 18px 1fr; gap: 8px; padding: 10px; border-radius: 8px; background: var(--jm-black); border-left: 3px solid var(--jm-steel); font-size: 13px; }
.jmfb-warn-error { border-left-color: var(--jm-red); }
.jmfb-warn-error .jmfb-ico { color: var(--jm-red); }
.jmfb-warn-warn { border-left-color: var(--jm-amber); }
.jmfb-warn-warn .jmfb-ico { color: var(--jm-amber); }
.jmfb-warn-info .jmfb-ico { color: var(--jm-steel); }
.jmfb-warn-fixes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }
.jmfb-problist { padding-left: 18px !important; display: grid; gap: 6px; margin-top: 10px !important; color: var(--jm-fog); }

.jmfb-toasts { position: absolute; left: 50%; bottom: 48px; transform: translateX(-50%); display: grid; gap: 8px; z-index: 50; pointer-events: none; width: max-content; max-width: calc(100% - 32px); }
.jmfb-toast { pointer-events: auto; display: flex; gap: 12px; align-items: center; background: var(--jm-fog); color: var(--jm-black); font: 600 13px var(--jm-body); padding: 10px 14px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.45); animation: jmfb-in .18s ease-out; transition: opacity .25s, transform .25s; }
.jmfb-toast-warn { background: #FFE2B0; }
.jmfb-toast.is-out { opacity: 0; transform: translateY(6px); }
.jmfb-toast-a { color: var(--jm-volt-deep) !important; font-weight: 800; }
@keyframes jmfb-in { from { opacity: 0; transform: translateY(6px); } }

.jmfb-mobilebar { display: none; }

/* ------------------------------------------------------------ modals */
.jmfb-overlay { position: absolute; inset: 0; background: rgba(5,5,6,.66); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 24px; backdrop-filter: blur(2px); }
.jmfb-modal { background: var(--jm-panel); border: 1px solid var(--jm-line); border-radius: 14px; width: min(460px, 100%); max-height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; box-shadow: 0 30px 80px rgba(0,0,0,.6); animation: jmfb-in .16s ease-out; position: relative; }
.jmfb-modal::before { content: ""; position: absolute; left: 16px; right: 16px; top: 8px; height: 1px; background: rgba(255,255,255,.05); }
.jmfb-modal.is-wide { width: min(780px, 100%); }
.jmfb-modal.is-xwide { width: min(1120px, 100%); }
.jmfb-modal-head { display: flex; align-items: center; gap: 12px; padding: 18px 14px 12px 20px; }
.jmfb-modal-head h3 { font: 900 20px/1 var(--jm-display); letter-spacing: -.02em; text-transform: uppercase; flex: 1; }
.jmfb-modal-body { padding: 4px 20px 20px; overflow-y: auto; display: grid; gap: 12px; }
.jmfb-modal-body > div { display: grid; gap: 12px; }
.jmfb-modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--jm-line); }

.jmfb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.jmfb-libgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.jmfb-libcard { position: relative; display: grid; gap: 6px; text-align: left; background: var(--jm-black); border: 1px solid var(--jm-line); border-radius: var(--jm-radius); padding: 10px; cursor: pointer; color: var(--jm-white); }
.jmfb-libcard:hover { border-color: var(--jm-steel); }
.jmfb-libprev { height: 70px; display: flex; align-items: center; justify-content: center; background: #0B0C0D; border-radius: 6px; }
.jmfb-shapeprev { max-width: 64px; max-height: 64px; }
.jmfb-libname { font: 600 13px/1.25 var(--jm-body); }
.jmfb-libdims { color: var(--jm-steel); font-size: 11px; }
.jmfb-badge-ok, .jmfb-badge-dim { justify-self: start; font: 800 9.5px/1 var(--jm-body); letter-spacing: .12em; text-transform: uppercase; padding: 3px 5px; border-radius: 2px; }
.jmfb-badge-ok { background: var(--jm-volt); color: var(--jm-black); }
.jmfb-badge-dim { color: var(--jm-steel); border: 1px solid var(--jm-line); }
.jmfb-libdel { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; }

.jmfb-trace { display: grid !important; grid-template-columns: minmax(0, 1fr) 310px; gap: 16px !important; align-items: start; }
.jmfb-tracewrap { background: #0B0C0D; border-radius: var(--jm-radius); overflow: hidden; border: 1px solid var(--jm-line); }
.jmfb-tracecv { display: block; width: 100%; height: auto; cursor: crosshair; touch-action: none; }
.jmfb-traceside { display: grid; gap: 12px; align-content: start; max-height: min(72vh, 680px); overflow-y: auto; padding-right: 4px; scrollbar-width: thin; }
.jmfb-tracesteps { list-style: none; display: flex; gap: 6px; counter-reset: t; }
.jmfb-tracesteps li { counter-increment: t; flex: 1; font: 800 10.5px/1 var(--jm-body); letter-spacing: .12em; text-transform: uppercase; color: var(--jm-steel); border-top: 3px solid var(--jm-graphite); padding-top: 7px; }
.jmfb-tracesteps li::before { content: counter(t) " "; font-family: var(--jm-mono); }
.jmfb-tracesteps li.is-on { color: var(--jm-white); border-color: var(--jm-volt); }
.jmfb-tracesteps li.is-done { border-color: var(--jm-volt-deep); }
.jmfb-importprev { background: #0B0C0D; border: 1px solid var(--jm-line); border-radius: var(--jm-radius); min-height: 360px; display: flex; align-items: center; justify-content: center; padding: 12px; }
.jmfb-importsvg { width: 100%; height: 440px; }
.jmfb-importsvg path { fill: rgba(139,144,151,.08); stroke: var(--jm-steel); cursor: pointer; vector-effect: non-scaling-stroke; stroke-width: 1.2; }
.jmfb-importsvg path.is-on { fill: rgba(204,255,0,.14); stroke: var(--jm-volt); }
.jmfb-dropzone { display: grid; justify-items: center; gap: 8px; background: none; border: 1.5px dashed var(--jm-line); border-radius: var(--jm-radius); padding: 48px 32px; color: var(--jm-fog); cursor: pointer; }
.jmfb-dropzone small { color: var(--jm-steel); }
.jmfb-dropzone:hover { border-color: var(--jm-steel); }

.jmfb-3d { height: min(62vh, 560px); background: var(--jm-black); border-radius: var(--jm-radius); overflow: hidden; border: 1px solid var(--jm-line); position: relative; }
.jmfb-3d canvas { display: block; width: 100% !important; height: 100% !important; cursor: grab; }
.jmfb-3d-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--jm-steel); padding: 24px; text-align: center; }
.jmfb-3d-controls { display: flex !important; flex-wrap: wrap; align-items: center; gap: 16px; }
.jmfb-3d-controls .jmfb-field-inline { min-width: 220px; }

.jmfb-designlist { display: grid; gap: 8px; }
.jmfb-design { display: grid; grid-template-columns: 96px 1fr auto; gap: 12px; align-items: center; background: var(--jm-black); border: 1px solid var(--jm-line); border-radius: var(--jm-radius); padding: 8px; }
.jmfb-design.is-on { border-color: var(--jm-volt); }
.jmfb-design-thumb { width: 96px; min-height: 40px; background: #0B0C0D; border-radius: 6px; padding: 4px; line-height: 0; }
.jmfb-design-thumb svg { width: 100%; height: auto; }
.jmfb-design-meta { display: grid; gap: 2px; min-width: 0; }
.jmfb-design-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jmfb-dllist { display: grid; gap: 6px; }
.jmfb-dlrow { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--jm-line); border-radius: 8px; }
.jmfb-dlrow > span { flex: 1; }
.jmfb-keys { width: 100%; border-collapse: collapse; font-size: 13px; }
.jmfb-keys td { padding: 6px 4px; border-bottom: 1px solid var(--jm-line); color: var(--jm-fog); }
.jmfb-keys kbd { font: 500 11.5px var(--jm-mono); background: var(--jm-black); border: 1px solid var(--jm-line); border-bottom-width: 2px; border-radius: 4px; padding: 2px 6px; color: var(--jm-white); white-space: nowrap; }
.jmfb-settings { display: grid; gap: 14px; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
  .jmfb-body { grid-template-columns: 52px minmax(0, 1fr) 300px; }
  .jmfb-warnpanel { right: 312px; }
  .jmfb-hide-sm { display: none !important; }
}
@media (max-width: 820px) {
  .jmfb-root { grid-template-rows: 52px minmax(0, 1fr) 30px 52px; min-height: 560px; }
  .jmfb-top { gap: 6px; padding: 0 8px; }
  .jmfb-logo img { height: 22px; }
  .jmfb-namewrap { flex: 1 1 auto; }
  .jmfb-savestate { display: none; }
  .jmfb-top .jmfb-group:first-of-type { display: none; }
  .jmfb-units { display: none; }
  .jmfb-top .jmfb-outline span:not(.jmfb-ico) { display: none; }
  .jmfb-body { grid-template-columns: 46px minmax(0, 1fr); position: relative; }
  .jmfb-tool { width: 36px; height: 36px; }
  .jmfb-side { position: absolute; right: 0; top: 0; bottom: 0; width: min(380px, 100%); z-index: 6; transform: translateX(100%); transition: transform .2s ease; box-shadow: -20px 0 40px rgba(0,0,0,.5); }
  .jmfb-root.show-side .jmfb-side { transform: none; }
  .jmfb-cursor { display: none; }
  .jmfb-warnpanel { right: 8px; left: 8px; width: auto; bottom: 90px; }
  .jmfb-mobilebar { display: flex; gap: 8px; padding: 8px; background: var(--jm-black); border-top: 1px solid var(--jm-line); }
  .jmfb-mobilebar .jmfb-btn { flex: 1; }
  .jmfb-trace { grid-template-columns: 1fr; }
  .jmfb-overlay { padding: 10px; }
  .jmfb-grid3 { grid-template-columns: 1fr 1fr; }
  .jmfb-stage { grid-template-columns: 0 1fr; grid-template-rows: 0 1fr; }
  .jmfb-ruler, .jmfb-ruler-corner { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .jmfb-root *, .jmfb-root *::before, .jmfb-root *::after { animation: none !important; transition: none !important; }
}