/*
 * 3dweb configurator UI.
 *
 * Theming. Every colour, radius, font, line width and shadow below comes from a custom property scoped
 * to the configurator root (.c3d), never to the host page's :root. Three layers, the first that is set wins:
 *   1. the mount option / product `theme` (engine/app.js applyTheme writes public tokens inline on .c3d),
 *   2. public tokens a host page sets on an ancestor of the mount element,
 *   3. the preset's defaults (data-preset="3dweb" | "nordic" | "minimal", light and dark).
 * Public tokens (all optional):
 *   colours  --c3d-bg --c3d-surface --c3d-tile --c3d-fg --c3d-fg-2 --c3d-fg-3 --c3d-line --c3d-line-2 --c3d-edge
 *            --c3d-accent --c3d-on-accent --c3d-accent-strong --c3d-accent-soft --c3d-err --c3d-ok
 *   radii    --c3d-radius-control (buttons, chips, segmented controls) --c3d-radius-btn (icon buttons, fields)
 *            --c3d-radius-card --c3d-radius-float (cards over the picture) --c3d-radius-panel (panel, bar,
 *            dialogs, tray) --c3d-radius-stage --c3d-radius-marker ("+" markers, step numbers)
 *   type     --c3d-font --c3d-font-mono
 *   lines    --c3d-border-width     shadows  --c3d-shadow (a shadow list; "no shadow" = 0 0 #0000, not none)
 * Older names still read: --c3d-radius (= panel), --c3d-radius-note (= card).
 * Derived accents (set by applyTheme when the accent is too pale for its background, WCAG):
 *   --_accent-strong (≥ 3:1: focus rings, outlines, selection, markers), --_on-strong, --_accent-text (≥ 4.5:1).
 * Fonts: Geist / Geist Mono are self-hosted (vendor/fonts/fonts.css, loaded by mount() unless `fonts: false`);
 * `data-fonts="system"` (set by `fonts: false`) keeps to the system stack.
 * Layout follows the size of the mount element (data-layout / data-narrow / data-short set by a
 * ResizeObserver), never the viewport, so it behaves inside any box or iframe.
 */

/* ---------- preset 3dweb (default): light ---------- */
.c3d {
  --_p-bg: #F5F5F3; --_p-surface: #FFFFFF; --_p-tile: #EAEAE7;
  --_p-fg: #0E0F12; --_p-fg-2: #45484F; --_p-fg-3: #5B5E66;
  --_p-line: #E3E3E0; --_p-line-2: #CFCFCB; --_p-edge: #8A8D94;
  --_p-accent: #2D3BFF; --_p-on-accent: #FFFFFF; --_p-err: #C2261B; --_p-ok: #18733A;
  --_p-scrim: rgba(14, 15, 18, 0.42);
  --_p-shadow: 0 1px 2px rgba(14, 15, 18, 0.06), 0 8px 24px rgba(14, 15, 18, 0.08);
  --_p-shadow-xs: 0 1px 2px rgba(14, 15, 18, 0.06);
  --_p-shadow-seg: 0 1px 2px rgba(14, 15, 18, 0.12);
  --_p-shadow-mk: 0 6px 16px rgba(14, 15, 18, 0.22);
  --_p-shadow-mk-2: 0 6px 16px rgba(14, 15, 18, 0.18);
  --_p-shadow-dot: 0 3px 10px rgba(14, 15, 18, 0.2);
  --_p-shadow-dot-2: 0 3px 10px rgba(14, 15, 18, 0.16);
  --_p-frame: 0 0 #0000;
  --_p-plan-stroke: rgba(14, 15, 18, 0.28);
  --_p-font: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --_p-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --_p-r-ctl: 999px; --_p-r-btn: 12px; --_p-r-card: 14px; --_p-r-float: 18px; --_p-r-panel: 20px; --_p-r-stage: 28px; --_p-r-marker: 50%;
  --_p-bw: 1px;
  --_p-w-head: 600;
  --_p-label-font: var(--_mono); --_p-label-size: 11.5px; --_p-label-w: 500; --_p-label-ls: 0.07em; --_p-label-tt: uppercase;
  color-scheme: light;
}
/* ---------- preset 3dweb: dark ---------- */
.c3d[data-theme="dark"] {
  --_p-bg: #0F1013; --_p-surface: #17181C; --_p-tile: #1E1F24;
  --_p-fg: #F2F2EF; --_p-fg-2: #B7B9C0; --_p-fg-3: #9EA1A9;
  --_p-line: #26282D; --_p-line-2: #3A3C43; --_p-edge: #72757E;
  --_p-accent: #6E7BFF; --_p-on-accent: #0E0F12; --_p-err: #FF8F86; --_p-ok: #6FD08C;
  --_p-scrim: rgba(0, 0, 0, 0.6);
  --_p-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  .c3d[data-theme="auto"] {
    --_p-bg: #0F1013; --_p-surface: #17181C; --_p-tile: #1E1F24;
    --_p-fg: #F2F2EF; --_p-fg-2: #B7B9C0; --_p-fg-3: #9EA1A9;
    --_p-line: #26282D; --_p-line-2: #3A3C43; --_p-edge: #72757E;
    --_p-accent: #6E7BFF; --_p-on-accent: #0E0F12; --_p-err: #FF8F86; --_p-ok: #6FD08C;
    --_p-scrim: rgba(0, 0, 0, 0.6);
    --_p-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
  }
}

/* ---------- preset nordic: calm, square-ish, graphite, hairlines, no shadows ---------- */
.c3d[data-preset="nordic"] {
  --_p-bg: #F2F1EE; --_p-surface: #FFFFFF; --_p-tile: #EBEAE6;
  --_p-fg: #1C1C1B; --_p-fg-2: #474745; --_p-fg-3: #5F5F5B;
  --_p-line: #E3E1DC; --_p-line-2: #CDCAC4; --_p-edge: #8A8883;
  --_p-accent: #2B2B2A; --_p-on-accent: #FFFFFF; --_p-err: #B3261E; --_p-ok: #2E6B3F;
  --_p-scrim: rgba(28, 28, 27, 0.36);
  --_p-shadow: 0 0 #0000;
  --_p-shadow-xs: 0 0 0 var(--_bw) var(--_line);
  --_p-shadow-seg: 0 0 0 var(--_bw) var(--_line-2);
  --_p-shadow-mk: 0 0 #0000; --_p-shadow-mk-2: 0 0 #0000; --_p-shadow-dot: 0 0 #0000; --_p-shadow-dot-2: 0 0 #0000;
  --_p-frame: 0 0 #0000;
  --_p-plan-stroke: rgba(28, 28, 27, 0.3);
  --_p-r-ctl: 3px; --_p-r-btn: 3px; --_p-r-card: 4px; --_p-r-float: 5px; --_p-r-panel: 6px; --_p-r-stage: 6px; --_p-r-marker: 4px;
  --_p-w-head: 500;
  --_p-mono: var(--_font); /* calmer: figures and small labels in the text face */
  --_p-label-font: var(--_font); --_p-label-size: 12.5px; --_p-label-w: 500; --_p-label-ls: 0.01em; --_p-label-tt: none;
  color-scheme: light;
}
.c3d[data-preset="nordic"][data-theme="dark"] {
  --_p-bg: #141414; --_p-surface: #1C1C1C; --_p-tile: #242424;
  --_p-fg: #EDEDE9; --_p-fg-2: #BEBDB7; --_p-fg-3: #A3A29C;
  --_p-line: #2B2B2A; --_p-line-2: #3D3D3B; --_p-edge: #78776F;
  --_p-accent: #EDEDE9; --_p-on-accent: #141414; --_p-err: #FF8F86; --_p-ok: #7CCB93;
  --_p-scrim: rgba(0, 0, 0, 0.6); --_p-plan-stroke: rgba(237, 237, 233, 0.3);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  .c3d[data-preset="nordic"][data-theme="auto"] {
    --_p-bg: #141414; --_p-surface: #1C1C1C; --_p-tile: #242424;
    --_p-fg: #EDEDE9; --_p-fg-2: #BEBDB7; --_p-fg-3: #A3A29C;
    --_p-line: #2B2B2A; --_p-line-2: #3D3D3B; --_p-edge: #78776F;
    --_p-accent: #EDEDE9; --_p-on-accent: #141414; --_p-err: #FF8F86; --_p-ok: #7CCB93;
    --_p-scrim: rgba(0, 0, 0, 0.6); --_p-plan-stroke: rgba(237, 237, 233, 0.3);
    color-scheme: dark;
  }
}

/* ---------- preset minimal: white, flat, small radii; meant to carry the client's accent ---------- */
.c3d[data-preset="minimal"] {
  --_p-bg: #FFFFFF; --_p-surface: #FFFFFF; --_p-tile: #F3F3F3;
  --_p-fg: #111111; --_p-fg-2: #444444; --_p-fg-3: #5E5E5E;
  --_p-line: #E6E6E6; --_p-line-2: #D0D0D0; --_p-edge: #8A8A8A;
  --_p-accent: #2D3BFF; --_p-on-accent: #FFFFFF; --_p-err: #C2261B; --_p-ok: #18733A;
  --_p-scrim: rgba(17, 17, 17, 0.4);
  --_p-shadow: 0 0 #0000;
  --_p-shadow-xs: 0 0 0 var(--_bw) var(--_line);
  --_p-shadow-seg: 0 0 0 var(--_bw) var(--_line-2);
  --_p-shadow-mk: 0 0 #0000; --_p-shadow-mk-2: 0 0 #0000; --_p-shadow-dot: 0 0 #0000; --_p-shadow-dot-2: 0 0 #0000;
  --_p-frame: 0 0 0 var(--_bw) var(--_line);
  --_p-plan-stroke: rgba(17, 17, 17, 0.28);
  --_p-r-ctl: 6px; --_p-r-btn: 6px; --_p-r-card: 8px; --_p-r-float: 8px; --_p-r-panel: 10px; --_p-r-stage: 10px; --_p-r-marker: 50%;
  --_p-w-head: 600;
  --_p-label-font: var(--_font); --_p-label-size: 12px; --_p-label-w: 600; --_p-label-ls: 0.02em; --_p-label-tt: none;
  color-scheme: light;
}
.c3d[data-preset="minimal"][data-theme="dark"] {
  --_p-bg: #0B0B0B; --_p-surface: #0B0B0B; --_p-tile: #191919;
  --_p-fg: #F5F5F5; --_p-fg-2: #BBBBBB; --_p-fg-3: #A2A2A2;
  --_p-line: #272727; --_p-line-2: #3A3A3A; --_p-edge: #777777;
  --_p-accent: #6E7BFF; --_p-on-accent: #0E0F12; --_p-err: #FF8F86; --_p-ok: #6FD08C;
  --_p-scrim: rgba(0, 0, 0, 0.6); --_p-plan-stroke: rgba(245, 245, 245, 0.3);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  .c3d[data-preset="minimal"][data-theme="auto"] {
    --_p-bg: #0B0B0B; --_p-surface: #0B0B0B; --_p-tile: #191919;
    --_p-fg: #F5F5F5; --_p-fg-2: #BBBBBB; --_p-fg-3: #A2A2A2;
    --_p-line: #272727; --_p-line-2: #3A3A3A; --_p-edge: #777777;
    --_p-accent: #6E7BFF; --_p-on-accent: #0E0F12; --_p-err: #FF8F86; --_p-ok: #6FD08C;
    --_p-scrim: rgba(0, 0, 0, 0.6); --_p-plan-stroke: rgba(245, 245, 245, 0.3);
    color-scheme: dark;
  }
}

.c3d[data-fonts="system"] {
  --_p-font: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --_p-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

/* ---------- the tokens every rule below reads: public token > preset default ---------- */
.c3d {
  --_bg: var(--c3d-bg, var(--_p-bg));
  --_surface: var(--c3d-surface, var(--_p-surface));
  --_tile: var(--c3d-tile, var(--_p-tile));
  --_fg: var(--c3d-fg, var(--_p-fg));
  --_fg-2: var(--c3d-fg-2, var(--_p-fg-2));
  --_fg-3: var(--c3d-fg-3, var(--_p-fg-3));
  --_line: var(--c3d-line, var(--_p-line));
  --_line-2: var(--c3d-line-2, var(--_p-line-2));
  --_edge: var(--c3d-edge, var(--_p-edge));
  --_accent: var(--c3d-accent, var(--_p-accent));
  --_on-accent: var(--c3d-on-accent, var(--_p-on-accent));
  --_accent-strong: var(--c3d-accent-strong, var(--_accent));
  --_on-strong: var(--_on-accent);
  --_accent-text: var(--_accent-strong);
  --_accent-soft: var(--c3d-accent-soft, color-mix(in srgb, var(--_accent-strong) 22%, transparent));
  --_err: var(--c3d-err, var(--_p-err));
  --_ok: var(--c3d-ok, var(--_p-ok));
  --_scrim: var(--_p-scrim);
  --_shadow: var(--c3d-shadow, var(--_p-shadow));
  --_shadow-xs: var(--_p-shadow-xs);
  --_shadow-seg: var(--_p-shadow-seg);
  --_shadow-mk: var(--_p-shadow-mk);
  --_shadow-mk-2: var(--_p-shadow-mk-2);
  --_shadow-dot: var(--_p-shadow-dot);
  --_shadow-dot-2: var(--_p-shadow-dot-2);
  --_frame: var(--_p-frame);
  --_plan-stroke: var(--_p-plan-stroke);
  --_font: var(--c3d-font, var(--_p-font));
  --_mono: var(--c3d-font-mono, var(--_p-mono));
  --_r-ctl: var(--c3d-radius-control, var(--_p-r-ctl));
  --_r-btn: var(--c3d-radius-btn, var(--_p-r-btn));
  --_r-card: var(--c3d-radius-card, var(--c3d-radius-note, var(--_p-r-card)));
  --_r-float: var(--c3d-radius-float, var(--_p-r-float));
  --_r-panel: var(--c3d-radius-panel, var(--c3d-radius, var(--_p-r-panel)));
  --_r-stage: var(--c3d-radius-stage, var(--_p-r-stage));
  --_r-marker: var(--c3d-radius-marker, var(--_p-r-marker));
  --_bw: var(--c3d-border-width, var(--_p-bw));
  --_w-head: var(--_p-w-head);
  --_label-font: var(--_p-label-font);
  --_label-size: var(--_p-label-size);
  --_label-w: var(--_p-label-w);
  --_label-ls: var(--_p-label-ls);
  --_label-tt: var(--_p-label-tt);
  --_ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- base ---------- */
.c3d, .c3d *, .c3d *::before, .c3d *::after { box-sizing: border-box; }
.c3d {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 440px;
  padding: 12px;
  gap: 12px;
  overflow: hidden;
  background: var(--_bg);
  color: var(--_fg);
  font: 400 15px/1.45 var(--_font);
  -webkit-font-smoothing: antialiased;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.c3d[data-layout="wide"] {
  grid-template-columns: minmax(0, 1fr) clamp(300px, 34%, 420px);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "stage panel" "bar bar";
}
.c3d[data-layout="stack"] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(190px, 50%) minmax(0, 1fr) auto;
  grid-template-areas: "stage" "panel" "bar";
  padding: 8px 8px max(8px, env(safe-area-inset-bottom, 0px));
  padding-left: max(8px, env(safe-area-inset-left, 0px));
  padding-right: max(8px, env(safe-area-inset-right, 0px));
  gap: 8px;
}
.c3d[data-layout="stack"][data-short] { grid-template-rows: minmax(170px, 46%) minmax(0, 1fr) auto; }
.c3d [hidden] { display: none !important; }
:where(.c3d) button, :where(.c3d) input, :where(.c3d) textarea { font: inherit; color: inherit; margin: 0; }
:where(.c3d) button { cursor: pointer; background: none; border: 0; padding: 0; text-align: inherit; touch-action: manipulation; }
:where(.c3d) button:disabled { cursor: default; }
:where(.c3d) p, :where(.c3d) h2, :where(.c3d) h3, :where(.c3d) ul, :where(.c3d) dl, :where(.c3d) dd { margin: 0; padding: 0; }
:where(.c3d) ul { list-style: none; }
.c3d :focus-visible { outline: 2px solid var(--_accent-strong); outline-offset: 2px; }
.c3d-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.c3d-ico { display: inline-flex; flex: none; }
.c3d-ico svg { display: block; }
.c3d-label { font: var(--_label-w) var(--_label-size)/1.3 var(--_label-font); letter-spacing: var(--_label-ls); text-transform: var(--_label-tt); color: var(--_fg-3); }
.c3d-heading { font: var(--_w-head) 18px/1.25 var(--_font); letter-spacing: -0.015em; color: var(--_fg); }
.c3d-delta { font: 500 12px/1.25 var(--_mono); color: var(--_fg-2); white-space: nowrap; }
.c3d-tag { display: inline-flex; align-items: center; padding: 2px 6px; border-radius: min(var(--_r-card), 6px); box-shadow: inset 0 0 0 var(--_bw) var(--_edge); color: var(--_fg-2); font: 500 11px/1.3 var(--_mono); white-space: nowrap; }
.c3d-help { font-size: 13.5px; line-height: 1.45; color: var(--_fg-3); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.c3d-help .c3d-ico { color: var(--_fg-3); }
.c3d-help.is-strong { color: var(--_fg); font-weight: 500; }
.c3d-help.is-small { font-size: 12.5px; }
.c3d-link { color: var(--_accent-text) !important; text-decoration: underline; text-underline-offset: 3px; font-weight: 500; min-height: 32px; }
.c3d-empty { color: var(--_fg-3); font-size: 14px; padding: 8px 0; }

/* ---------- buttons ---------- */
.c3d-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: var(--_r-ctl); border: var(--_bw) solid transparent !important;
  font: 500 15px/1 var(--_font) !important; white-space: nowrap; text-decoration: none;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease, opacity .15s ease;
}
.c3d-btn:hover:not(:disabled) { transform: translateY(-1px); }
.c3d-btn:disabled { opacity: .55; }
.c3d-btn-ghost { border-color: var(--_line-2) !important; color: var(--_fg) !important; background: transparent; }
.c3d-btn-ghost:hover { border-color: var(--_fg) !important; }
.c3d-btn-dark { background: var(--_fg) !important; color: var(--_bg) !important; }
.c3d-btn.is-compact { min-height: 44px; padding: 0 18px; font-size: 14px !important; }
.c3d-cta { background: var(--_accent) !important; color: var(--_on-accent) !important; }
.c3d-iconbtn {
  width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--_r-btn); background: var(--_surface) !important; color: var(--_fg) !important;
  box-shadow: var(--_shadow-xs); transition: color .15s ease, background-color .15s ease, opacity .15s ease;
}
.c3d-iconbtn:hover:not(:disabled) { color: var(--_accent-text) !important; }
.c3d-iconbtn:disabled { opacity: .4; }
.c3d-iconbtn[aria-pressed="true"] { background: var(--_fg) !important; color: var(--_bg) !important; }
.c3d-iconbtn.is-small { width: 44px; height: 44px; border-radius: var(--_r-btn); box-shadow: none; }
.c3d-iconbtn.is-small svg { width: 18px; height: 18px; }
.c3d-iconbtn.is-ctl { width: 40px; height: 40px; position: relative; }
.c3d-iconbtn.is-ctl::after { content: ""; position: absolute; inset: -2px; }
.c3d-tool-text { font: 600 12px/1 var(--_mono); text-transform: uppercase; }
.c3d-iconbtn.is-quiet { background: transparent !important; color: var(--_fg-3) !important; }
.c3d-iconbtn.is-quiet:hover { color: var(--_err) !important; }
.c3d-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: var(--_r-ctl);
  border: var(--_bw) solid var(--_line-2) !important; font: 500 13.5px/1 var(--_font) !important; white-space: nowrap; position: relative;
}
.c3d-chip::after { content: ""; position: absolute; inset: -4px 0; }
.c3d-chip:hover { border-color: var(--_fg) !important; }
.c3d-chip { min-height: 40px; }
.c3d-chip.is-strong { background: var(--_fg) !important; color: var(--_bg) !important; border-color: var(--_fg) !important; }
.c3d-badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: var(--_r-ctl); background: var(--_tile); color: var(--_fg-2); font: 500 12px/1.2 var(--_mono); white-space: nowrap; }
.c3d-badge.is-off { background: transparent; padding-left: 0; color: var(--_fg-3); font-family: var(--_font); }
.c3d-badge.is-less { color: var(--_ok); }

/* ---------- stage ---------- */
.c3d-stage {
  grid-area: stage; position: relative; min-width: 0; min-height: 0; overflow: hidden; border-radius: var(--_r-stage);
  background: radial-gradient(120% 90% at 50% 38%, var(--_surface) 0%, var(--_tile) 100%);
  isolation: isolate; box-shadow: var(--_frame);
}
.c3d[data-layout="stack"] .c3d-stage { border-radius: calc(var(--_r-stage) - 8px); }
.c3d-canvas-host { position: absolute; inset: 0; }
.c3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline-offset: -4px !important; border-radius: inherit; }
.c3d-canvas-fade { pointer-events: none; display: none; }
.c3d-tools { position: absolute; top: 12px; display: flex; gap: 6px; z-index: 5; }
.c3d-tools-left { left: 12px; }
.c3d-tools-right { right: 12px; }
.c3d[data-layout="stack"] .c3d-tools { top: 8px; }
.c3d[data-layout="stack"] .c3d-tools-left { left: 8px; }
.c3d[data-layout="stack"] .c3d-tools-right { right: 8px; }
.c3d[data-narrow] .c3d-tools { gap: 4px; }

/* rotate / zoom / reset buttons */
.c3d-viewctl { position: absolute; right: 12px; top: 64px; z-index: 5; display: flex; flex-direction: column; gap: 4px; }
.c3d[data-layout="stack"] .c3d-viewctl { right: 8px; top: 58px; }
/* small screens: the controls open as a panel under their button, never taller than the view */
.c3d-viewctl[data-pop] { align-items: flex-end; }
.c3d-viewctl-pop { display: grid; grid-template-columns: repeat(4, 40px); gap: 4px; padding: 6px; border-radius: min(var(--_r-float), 16px); background: var(--_surface); border: var(--_bw) solid var(--_line); box-shadow: var(--_shadow); }
.c3d-viewctl-pop .c3d-iconbtn.is-ctl { box-shadow: none; }
/* very short or very narrow views: the panel opens beside the button, in as few rows as fit */
.c3d[data-tiny] .c3d-viewctl[data-pop] { left: 8px; flex-direction: row-reverse; align-items: flex-start; pointer-events: none; }
.c3d[data-tiny] .c3d-viewctl[data-pop] > * { pointer-events: auto; flex: none; }
.c3d[data-tiny] .c3d-viewctl[data-pop] > .c3d-viewctl-pop { display: flex; flex-wrap: wrap; justify-content: flex-end; flex: 0 1 auto; min-width: 0; }

/* no WebGL: the plan in plain SVG */
.c3d-planview { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 70px 24px 20px; }
.c3d-planview-art { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.c3d-plan-big { width: 100%; height: 100%; max-width: 760px; max-height: 420px; }
.c3d-plan-piece { stroke: var(--_plan-stroke); stroke-width: 1.2; }
.c3d-plan-piece.is-on { stroke: var(--_accent-strong); stroke-width: 4; }
.c3d-planview-dims { font: 500 12.5px/1.3 var(--_mono); color: var(--_fg-2); }
.c3d-planview-note { display: flex; gap: 8px; align-items: flex-start; max-width: 520px; font-size: 13px; line-height: 1.4; color: var(--_fg-3); }
.c3d-planview-note svg { width: 16px; height: 16px; margin-top: 1px; }

/* dimension lines */
.c3d-dims { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.c3d-dims svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.c3d-dim-line { fill: none; stroke: var(--_fg-2); stroke-width: 1.25; opacity: .8; }
.c3d-dim-line.is-room { stroke-dasharray: 4 3; }
.c3d-dim-label {
  position: absolute; left: 0; top: 0; padding: 3px 8px; border-radius: var(--_r-ctl); background: var(--_surface); color: var(--_fg);
  font: 500 12px/1.2 var(--_mono); white-space: nowrap; box-shadow: 0 0 0 var(--_bw) var(--_line);
}
.c3d-dim-label.is-room { background: var(--_fg); color: var(--_bg); box-shadow: none; }
.c3d-dim-line.is-soft { stroke-dasharray: 2 3; }
.c3d-dim-label.is-soft { color: var(--_fg-2); }
.c3d-dim-line.is-gap { stroke: var(--_ok); opacity: 1; }
.c3d-dim-label.is-gap { color: var(--_ok); box-shadow: 0 0 0 var(--_bw) color-mix(in srgb, var(--_ok) 45%, transparent); }
.c3d-dim-line.is-over { stroke: var(--_err); }
.c3d-dim-label.is-over { color: var(--_err); box-shadow: 0 0 0 var(--_bw) color-mix(in srgb, var(--_err) 50%, transparent); }
.c3d-dim-label.is-chip { box-shadow: 0 0 0 var(--_bw) var(--_line-2); }

/* "+" markers */
.c3d-markers { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.c3d-marker {
  position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: var(--_r-marker); pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--_accent-strong) !important; color: var(--_on-strong) !important;
  box-shadow: 0 0 0 5px var(--_accent-soft), var(--_shadow-mk);
  transition: box-shadow .2s ease, background-color .2s ease; will-change: transform;
}
.c3d-marker .c3d-ico { transition: transform .25s var(--_ease); }
.c3d-marker:hover { box-shadow: 0 0 0 8px color-mix(in srgb, var(--_accent-strong) 26%, transparent), var(--_shadow-mk); }
.c3d-marker.is-insert { background: var(--_surface) !important; color: var(--_accent-strong) !important; box-shadow: inset 0 0 0 2px var(--_accent-strong), 0 0 0 5px color-mix(in srgb, var(--_accent-strong) 18%, transparent), var(--_shadow-mk-2); }
.c3d-marker.is-insert:hover { box-shadow: inset 0 0 0 2px var(--_accent-strong), 0 0 0 8px color-mix(in srgb, var(--_accent-strong) 24%, transparent), var(--_shadow-mk-2); }
.c3d-marker.is-open { background: var(--_fg) !important; color: var(--_bg) !important; box-shadow: 0 0 0 5px color-mix(in srgb, var(--_fg) 16%, transparent); }
.c3d-marker.is-open .c3d-ico { transform: rotate(45deg); }
.c3d-marker:focus-visible { outline: 3px solid var(--_fg); outline-offset: 3px; }
.c3d-marker.is-pulse { animation: c3d-pulse 0.8s ease-in-out 3; }
/* small stage: a 32 px dot drawn inside the same 44 px touch target, a thinner halo */
.c3d-markers.is-compact .c3d-marker { background: transparent !important; box-shadow: none !important; }
.c3d-markers.is-compact .c3d-marker::before { content: ""; position: absolute; inset: 6px; border-radius: var(--_r-marker); background: var(--_accent-strong); box-shadow: 0 0 0 3px var(--_accent-soft), var(--_shadow-dot); }
.c3d-markers.is-compact .c3d-marker.is-insert::before { background: var(--_surface); box-shadow: inset 0 0 0 2px var(--_accent-strong), 0 0 0 3px color-mix(in srgb, var(--_accent-strong) 16%, transparent), var(--_shadow-dot-2); }
.c3d-markers.is-compact .c3d-marker.is-open::before { background: var(--_fg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--_fg) 16%, transparent); }
.c3d-markers.is-compact .c3d-marker .c3d-ico { position: relative; width: 16px; height: 16px; }
.c3d-markers.is-compact .c3d-marker.is-pulse { animation: none; }
.c3d-markers.is-compact .c3d-marker.is-pulse::before { animation: c3d-pulse-dot 0.8s ease-in-out 3; }
@keyframes c3d-pulse-dot { 50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--_accent-strong) 30%, transparent); } }
@keyframes c3d-pulse { 50% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--_accent-strong) 30%, transparent), var(--_shadow-mk); } }

/* action bar of the selected piece */
.c3d-actionbar {
  position: absolute; left: 0; top: 0; z-index: 4; display: flex; align-items: center; gap: 2px; padding: 4px; max-width: calc(100% - 16px);
  border-radius: var(--_r-ctl); background: var(--_surface); box-shadow: var(--_shadow), 0 0 0 var(--_bw) var(--_line); will-change: transform;
}
.c3d-actionbar-name { padding: 0 8px 0 12px; font: 500 13px/1.2 var(--_font); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c3d-act { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 12px; justify-content: center; border-radius: var(--_r-ctl); font: 500 13.5px/1 var(--_font) !important; white-space: nowrap; }
.c3d-act:hover { background: var(--_tile) !important; }
.c3d-act.is-danger:hover { color: var(--_err) !important; }
.c3d-act.is-close { color: var(--_fg-3) !important; padding: 0; }
.c3d[data-narrow] .c3d-act-text, .c3d[data-narrow] .c3d-actionbar-name { display: none; }
.c3d[data-narrow] .c3d-act { padding: 0; }
.c3d[data-layout="stack"] .c3d-actionbar-name { display: none; }
.c3d-act.is-arrow { padding: 0; }

/* notices */
.c3d-notices { position: absolute; top: 64px; left: 12px; right: 12px; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.c3d[data-layout="stack"] .c3d-notices { top: 58px; left: 8px; right: 8px; }
.c3d-notice {
  pointer-events: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; max-width: 100%; padding: 8px 10px 8px 16px;
  border-radius: var(--_r-card); background: var(--_surface); box-shadow: var(--_shadow), 0 0 0 var(--_bw) var(--_line); font-size: 14px;
}
.c3d-notice.is-warn > .c3d-ico:first-child { color: var(--_err); }
.c3d-notice.is-notes { align-items: flex-start; justify-content: flex-start; flex-wrap: nowrap; text-align: left; max-width: min(560px, 100%); padding: 10px 6px 10px 14px; }
.c3d-notice.is-notes > .c3d-ico { margin-top: 2px; color: var(--_fg-3); }
.c3d-notice-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; line-height: 1.4; }
.c3d-notice-text strong { font-weight: 600; }
.c3d-notice-text ul { display: flex; flex-direction: column; gap: 2px; color: var(--_fg-2); max-height: 96px; overflow-y: auto; }
.c3d-notice .c3d-iconbtn.is-small { margin: -6px 0; }

/* bottom of the stage: hint, tray */
.c3d-stage-bottom { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 5; display: flex; justify-content: center; pointer-events: none; }
.c3d[data-layout="stack"] .c3d-stage-bottom { left: 8px; right: 8px; bottom: 8px; }
.c3d-hint { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--_r-ctl); background: var(--_surface); color: var(--_fg-2); font: 500 12px/1 var(--_mono); box-shadow: 0 0 0 var(--_bw) var(--_line); animation: c3d-in .5s var(--_ease) both; }
.c3d-hint svg { width: 14px; height: 14px; }
/* the room drawn in 3D: its verdict under the picture */
.c3d-room3d { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 4px 4px 12px; border-radius: var(--_r-ctl); background: var(--_surface); color: var(--_fg-2); font: 500 12.5px/1.25 var(--_font); box-shadow: var(--_shadow), 0 0 0 var(--_bw) var(--_line); animation: c3d-in .4s var(--_ease) both; }
.c3d-room3d > .c3d-ico, .c3d-room3d > svg { width: 16px; height: 16px; flex: 0 0 auto; }
.c3d-room3d strong { color: var(--_fg); font-weight: 600; }
.c3d-room3d.is-ok > svg { color: var(--_ok); }
.c3d-room3d.is-warn > svg, .c3d-room3d.is-warn strong { color: var(--_err); }
.c3d-room3d-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c3d-room3d .c3d-chip { flex: 0 0 auto; }
@media (max-width: 420px) { .c3d-room3d-size { display: none; } }
.c3d-tray { pointer-events: auto; width: 100%; max-width: 720px; padding: 10px 12px 12px; border-radius: var(--_r-panel); background: var(--_surface); box-shadow: var(--_shadow), 0 0 0 var(--_bw) var(--_line); animation: c3d-up .28s var(--_ease) both; }
.c3d-tray-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-left: 4px; }
.c3d-tray-list { display: flex; gap: 8px; overflow-x: auto; padding: 6px 2px 2px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.c3d-tray-item {
  flex: 0 0 auto; width: 118px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 8px 10px;
  border-radius: var(--_r-card); border: var(--_bw) solid var(--_line) !important; background: var(--_surface) !important; text-align: center !important; scroll-snap-align: start;
  transition: border-color .15s ease, transform .15s ease;
}
.c3d-tray-item:hover { border-color: var(--_fg) !important; transform: translateY(-1px); }
/* ghost preview: the element whose piece is shown, and the label in the view */
.c3d-tray-item.is-ghost, .c3d-add.is-ghost { border-color: var(--_accent-strong) !important; border-style: solid !important; }
.c3d-ghost-tag {
  position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 8px;
  max-width: min(260px, calc(100% - 16px)); padding: 7px 12px; border-radius: min(var(--_r-card), 12px); background: var(--_surface); color: var(--_fg);
  box-shadow: var(--_shadow), 0 0 0 1.5px var(--_accent-strong); font: 500 12.5px/1.3 var(--_font); text-align: center; will-change: transform;
  animation: c3d-fade .15s ease both;
}
.c3d-ghost-delta { color: var(--_accent-text); font-weight: 600; white-space: nowrap; }
@keyframes c3d-fade { from { opacity: 0; } }
/* small stage: the tray already marks the piece, the label keeps only the price */
.c3d-stage.is-compact .c3d-ghost-tag { padding: 5px 10px; font-size: 12px; gap: 0 6px; }
.c3d-stage.is-compact .c3d-ghost-name { display: none; }
.c3d-tray-name { font: 500 12.5px/1.25 var(--_font); min-height: 2.5em; display: flex; align-items: center; }
.c3d-tray-price { font: 500 12px/1 var(--_mono); color: var(--_fg-2); }
.c3d-tray-empty { padding: 8px 4px; color: var(--_fg-3); font-size: 14px; }
.c3d-tray-note { padding: 0 4px 2px; color: var(--_fg-3); font-size: 12.5px; line-height: 1.35; }
.c3d[data-layout="stack"] .c3d-tray-item { width: 108px; padding-bottom: 8px; }
.c3d[data-layout="stack"] .c3d-thumb.is-tray { width: 60px; height: 60px; }
.c3d[data-layout="stack"] .c3d-tray { padding: 6px 10px 10px; }

.c3d-thumb { width: 48px; height: 48px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: min(var(--_r-card), 12px); background: var(--_tile); color: var(--_fg-3); overflow: hidden; }
.c3d-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.c3d-thumb.is-tray { width: 76px; height: 76px; background: transparent; }
.c3d-plan rect { fill: currentColor; opacity: .55; }

/* room card (plan view) */
.c3d-room { position: absolute; left: 12px; bottom: 12px; z-index: 5; width: min(310px, calc(100% - 24px)); padding: 6px 14px 12px; border-radius: var(--_r-float); background: var(--_surface); box-shadow: var(--_shadow), 0 0 0 var(--_bw) var(--_line); display: flex; flex-direction: column; gap: 8px; }
.c3d[data-layout="stack"] .c3d-room { left: 8px; bottom: 8px; width: min(310px, calc(100% - 16px)); }
.c3d-room.is-closed { width: auto; max-width: calc(100% - 16px); padding: 0 6px 0 12px; border-radius: var(--_r-ctl); }
.c3d-room-head { display: flex; align-items: center; gap: 8px; min-height: 44px; width: 100%; color: var(--_fg-3) !important; }
.c3d-room-head > .c3d-ico svg { width: 16px; height: 16px; }
.c3d-room-head .c3d-label { flex: 1; text-align: left; }
.c3d-room-chip { font: 500 12px/1.2 var(--_font); padding: 3px 8px; border-radius: var(--_r-ctl); white-space: nowrap; }
.c3d-room-chip:empty { display: none; }
.c3d-room-chip.is-ok { color: var(--_ok); background: color-mix(in srgb, var(--_ok) 12%, transparent); }
.c3d-room-chip.is-tight { color: var(--_fg); background: var(--_tile); }
.c3d-room-chip.is-warn { color: var(--_err); background: color-mix(in srgb, var(--_err) 12%, transparent); }
.c3d-room:not(.is-closed) .c3d-room-chip { display: none; }
.c3d-room-fields { display: flex; align-items: flex-end; gap: 8px; }
.c3d-room-x { padding-bottom: 12px; color: var(--_fg-3); }
.c3d-field-inline { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; font-size: 12.5px; color: var(--_fg-2); }
.c3d-seg.is-small .c3d-seg-btn { min-height: 36px; font-size: 13px !important; padding: 0 8px; position: relative; }
.c3d-seg.is-small .c3d-seg-btn::after { content: ""; position: absolute; inset: -4px 0; }
.c3d-room-result { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.4; color: var(--_fg-3); }
.c3d-room-result svg { width: 16px; height: 16px; margin-top: 2px; }
.c3d-room-result strong { font-weight: 600; }
.c3d-room-result.is-ok strong, .c3d-room-result.is-ok .c3d-ico { color: var(--_ok); }
.c3d-room-result.is-warn strong, .c3d-room-result.is-warn .c3d-ico { color: var(--_err); }
.c3d-room-result.is-tight strong, .c3d-room-result.is-tight .c3d-ico { color: var(--_fg); }
.c3d-room-result.is-ok, .c3d-room-result.is-warn, .c3d-room-result.is-tight { color: var(--_fg-2); }
.c3d-room-rot { font-weight: 500; color: var(--_fg); }
.c3d-room-msg { display: block; }
.c3d-room .c3d-field-error { margin-top: -4px; }

/* fabric close-up card */
.c3d-closeup { position: absolute; left: 12px; bottom: 12px; z-index: 5; width: min(320px, calc(100% - 24px)); padding: 14px; border-radius: var(--_r-float); background: var(--_surface); box-shadow: var(--_shadow), 0 0 0 var(--_bw) var(--_line); display: flex; flex-direction: column; gap: 10px; animation: c3d-up .28s var(--_ease) both; }
.c3d-closeup.is-compact { left: 8px; bottom: 8px; width: auto; max-width: calc(100% - 16px); flex-direction: row; align-items: center; gap: 8px; padding: 6px 6px 6px 10px; border-radius: var(--_r-ctl); }
.c3d-closeup.is-compact .c3d-closeup-head { min-width: 0; gap: 10px; }
.c3d-closeup.is-compact .c3d-swatch-chip { border-radius: var(--_r-marker); }
.c3d-closeup.is-compact .c3d-closeup-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c3d-closeup-head { display: flex; align-items: center; gap: 12px; }
.c3d-closeup-head > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.c3d-closeup-name { font: var(--_w-head) 15px/1.25 var(--_font); }
.c3d-closeup .c3d-btn { align-self: flex-start; }
.c3d-facts.is-compact .c3d-fact { padding: 6px 0; font-size: 13px; gap: 12px; }
.c3d-facts.is-compact .c3d-fact:last-child { border-bottom: 0; }

/* poster / loading / errors */
.c3d-poster { position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; background: radial-gradient(120% 90% at 50% 38%, var(--_surface) 0%, var(--_tile) 100%); transition: opacity .35s ease; }
.c3d-poster.is-done { opacity: 0; pointer-events: none; }
.c3d-skeleton { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); display: flex; align-items: flex-end; gap: 6px; }
.c3d-skeleton span { width: clamp(48px, 9vw, 96px); height: clamp(40px, 7vw, 72px); border-radius: var(--_r-card); background: var(--_line); animation: c3d-shimmer 1.4s ease-in-out infinite; }
.c3d-skeleton span:nth-child(2) { animation-delay: .15s; }
.c3d-skeleton span:nth-child(3) { animation-delay: .3s; }
.c3d-progress { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); width: min(220px, 60%); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.c3d-progress-track { width: 100%; height: 3px; border-radius: 3px; background: var(--_line); overflow: hidden; }
.c3d-progress-bar { width: 100%; height: 100%; background: var(--_accent-strong); transform-origin: left center; transform: scaleX(.06); transition: transform .3s ease; }
.c3d-progress-label { font: 500 12px/1 var(--_mono); color: var(--_fg-3); letter-spacing: .04em; }
.c3d-poster-msg { max-width: 320px; padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; color: var(--_fg-2); }
.c3d-poster.is-error { z-index: 2; }
@keyframes c3d-shimmer { 50% { opacity: .45; } }
@keyframes c3d-in { from { opacity: 0; } }
@keyframes c3d-up { from { opacity: 0; transform: translateY(10px); } }

/* ---------- panel ---------- */
.c3d-panel { grid-area: panel; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--_surface); border-radius: var(--_r-panel); overflow: hidden; box-shadow: var(--_frame); }
.c3d-steps { display: flex; gap: 2px; padding: 10px 8px 8px; overflow-x: auto; scrollbar-width: none; flex: none; border-bottom: var(--_bw) solid var(--_line); }
.c3d-steps::-webkit-scrollbar { display: none; }
.c3d-step { position: relative; flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 10px 0 6px; border-radius: var(--_r-ctl); color: var(--_fg-3) !important; font: 500 13.5px/1 var(--_font) !important; white-space: nowrap; transition: background-color .2s ease, color .2s ease; }
.c3d-step:hover { color: var(--_fg) !important; }
.c3d-step.is-on { background: var(--_fg) !important; color: var(--_bg) !important; }
.c3d-step-n { width: 22px; height: 22px; border-radius: var(--_r-marker); display: inline-flex; align-items: center; justify-content: center; font: 500 11.5px/1 var(--_mono); background: var(--_tile); color: var(--_fg-2); }
.c3d-step.is-on .c3d-step-n { background: color-mix(in srgb, var(--_bg) 22%, transparent); color: var(--_bg); }
.c3d-steps.is-tight .c3d-step-n { display: none; }
.c3d-steps.is-tight .c3d-step { padding: 0 12px; }
.c3d-step-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--_err); margin-left: -2px; }
.c3d-panel-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 16px 20px; display: flex; flex-direction: column; gap: 22px; outline: none; scrollbar-width: thin; }
.c3d[data-layout="stack"] .c3d-panel-body { padding: 12px 12px 16px; gap: 18px; }
.c3d-panel-foot { flex: none; display: flex; justify-content: space-between; gap: 8px; padding: 10px 12px; border-top: var(--_bw) solid var(--_line); }
.c3d-panel-foot .c3d-btn { min-height: 44px; padding: 0 18px; font-size: 14px !important; }
.c3d[data-layout="stack"] .c3d-panel-foot { display: none; }
.c3d-section { display: flex; flex-direction: column; gap: 10px; }

.c3d-preset-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.c3d-preset-card { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 10px 10px; border-radius: var(--_r-card); border: var(--_bw) solid var(--_line) !important; transition: border-color .15s ease, box-shadow .15s ease; }
.c3d-preset-card:hover { border-color: var(--_fg-3) !important; }
.c3d-preset-card.is-on { border-color: var(--_accent-strong) !important; box-shadow: inset 0 0 0 var(--_bw) var(--_accent-strong); }
.c3d-preset-thumb { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; border-radius: min(var(--_r-card), 10px); background: var(--_tile); color: var(--_fg-3); overflow: hidden; }
.c3d-preset-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.c3d-preset-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.c3d-preset-name { font: 500 14px/1.25 var(--_font); }
.c3d-preset-meta { font: 400 11.5px/1.35 var(--_mono); color: var(--_fg-3); }
.c3d-preset-price { font: 500 13px/1.2 var(--_mono); color: var(--_fg); }
.c3d-start-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.c3d-start-actions .c3d-link { min-height: 44px; }
.c3d[data-layout="stack"] .c3d-preset-cards { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }

.c3d-adds { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.c3d-add { display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 112px; padding: 6px 6px 10px; border-radius: var(--_r-card); border: var(--_bw) dashed var(--_line-2) !important; text-align: center !important; transition: border-color .15s ease, transform .15s ease; }
.c3d-add:hover { border-color: var(--_fg) !important; border-style: solid !important; }
.c3d-add.is-off { opacity: .5; }
.c3d-add-name { font: 500 12.5px/1.25 var(--_font); }
.c3d-add-note { font-size: 11.5px; line-height: 1.3; color: var(--_fg-3); }
.c3d-thumb.is-add { width: 60px; height: 60px; background: transparent; }

.c3d-pieces { display: flex; flex-direction: column; gap: 6px; }
.c3d-piece-acts { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 8px 10px; }
.c3d-piece-acts .c3d-chip svg { width: 16px; height: 16px; }
.c3d-piece-acts .c3d-chip.is-arrow { padding: 0; width: 44px; justify-content: center; }
.c3d-piece { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; border-radius: var(--_r-card); border: var(--_bw) solid var(--_line); padding-right: 6px; transition: border-color .15s ease; }
.c3d-piece.is-on { border-color: var(--_accent-strong); box-shadow: inset 0 0 0 var(--_bw) var(--_accent-strong); }
.c3d-piece-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 6px 4px 6px 10px; min-height: 60px; border-radius: var(--_r-card); }
.c3d-piece-n { width: 16px; flex: none; font: 500 11.5px/1 var(--_mono); color: var(--_fg-3); text-align: center; }
.c3d-piece-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.c3d-piece-name { font-weight: 500; font-size: 14px; line-height: 1.25; }
.c3d-piece-note { font-size: 12.5px; color: var(--_fg-3); line-height: 1.3; }
.c3d-piece-price { font: 500 13px/1 var(--_mono); color: var(--_fg-2); white-space: nowrap; }

.c3d-scope { display: flex; flex-direction: column; gap: 10px; }
.c3d-seg { display: flex; padding: 3px; border-radius: var(--_r-ctl); background: var(--_tile); }
.c3d-seg-btn { flex: 1; min-height: 44px; padding: 0 12px; border-radius: max(0px, calc(var(--_r-ctl) - 3px)); font: 500 13.5px/1 var(--_font) !important; text-align: center !important; color: var(--_fg-2) !important; transition: background-color .2s ease, color .2s ease; }
.c3d-seg-btn.is-on { background: var(--_surface) !important; color: var(--_fg) !important; box-shadow: var(--_shadow-seg); }

.c3d-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 8px; }
.c3d-swatch-wrap { position: relative; display: flex; flex-direction: column; border-radius: var(--_r-card); border: var(--_bw) solid var(--_line); transition: border-color .15s ease, box-shadow .15s ease; }
.c3d-swatch-wrap:hover { border-color: var(--_fg-3); }
.c3d-swatch-wrap.is-on { border-color: var(--_accent-strong); box-shadow: inset 0 0 0 var(--_bw) var(--_accent-strong); }
.c3d-swatch-wrap.is-off .c3d-swatch { opacity: .6; cursor: not-allowed; }
.c3d-swatch { flex: 1; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 10px 8px 8px; border-radius: var(--_r-card); }
.c3d-swatch-wrap.is-on .c3d-swatch { padding-right: 40px; }
.c3d-swatch-chip { width: 46px; height: 46px; flex: none; border-radius: min(var(--_r-card), 12px); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.35), inset 0 -10px 14px rgba(0, 0, 0, 0.08), inset 0 8px 12px rgba(255, 255, 255, 0.12); }
.c3d-swatch-chip.is-small { width: 36px; height: 36px; border-radius: min(var(--_r-card), 10px); }
.c3d-swatch-chip .c3d-ico { width: 24px; height: 24px; border-radius: 50%; background: #fff; color: #0E0F12; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.c3d-swatch-chip svg { width: 15px; height: 15px; stroke-width: 2.2; }
.c3d-swatch-text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.c3d-swatch-name { font: 500 13.5px/1.25 var(--_font); }
.c3d-swatch-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.c3d-swatch-state { font-size: 12px; line-height: 1.3; color: var(--_fg-3); }
.c3d-swatch-zoom { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); }
.c3d-swatch-repl { margin: 0 8px 8px; align-self: flex-start; white-space: normal; text-align: left !important; min-height: 40px; padding: 6px 14px; line-height: 1.25 !important; }
.c3d-choices { display: flex; flex-direction: column; gap: 6px; }
.c3d-choice { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 14px; border-radius: var(--_r-card); border: var(--_bw) solid var(--_line) !important; font-weight: 500 !important; }
.c3d-choice.is-on { border-color: var(--_accent-strong) !important; box-shadow: inset 0 0 0 var(--_bw) var(--_accent-strong); }
.c3d-choice[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }

.c3d-issues { display: flex; flex-direction: column; gap: 6px; }
.c3d-issue { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border-radius: var(--_r-card); background: var(--_tile); font-size: 14px; line-height: 1.35; }
.c3d-issue > span:nth-child(2) { flex: 1; }
.c3d-issue.is-error { background: color-mix(in srgb, var(--_err) 10%, var(--_surface)); }
.c3d-issue.is-error .c3d-ico { color: var(--_err); }
.c3d-lines { display: flex; flex-direction: column; }
.c3d-line { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: var(--_bw) solid var(--_line); }
.c3d-line-qty { font: 500 13px/1.3 var(--_mono); color: var(--_fg-3); min-width: 30px; }
.c3d-line-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.c3d-line-name { font-weight: 500; font-size: 14px; line-height: 1.3; }
.c3d-line-note { font-size: 12.5px; color: var(--_fg-3); line-height: 1.35; }
.c3d-line-amount { font: 500 13.5px/1.3 var(--_mono); white-space: nowrap; }
.c3d-total { display: flex; align-items: baseline; justify-content: space-between; padding-top: 6px; font-weight: 500; }
.c3d-total strong { font: var(--_w-head) 22px/1.2 var(--_font); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.c3d-total strong.is-text { font-size: 16px; letter-spacing: 0; }
.c3d-guides { display: flex; flex-direction: column; gap: 6px; }
.c3d-guide { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--_r-card); background: var(--_tile); font-size: 13.5px; line-height: 1.4; color: var(--_fg-2); }
.c3d-guide > span:nth-child(2) { flex: 1; min-width: 0; }
.c3d-guide strong { font-weight: 600; color: var(--_fg); }
.c3d-guide .c3d-ico { color: var(--_fg-3); margin-top: 1px; }
.c3d-guide .c3d-ico svg { width: 18px; height: 18px; }
.c3d-guide.is-ok .c3d-ico { color: var(--_ok); }
.c3d-guide.is-warn .c3d-ico { color: var(--_err); }
.c3d-guide .c3d-chip { align-self: center; }
.c3d-describe { border-top: var(--_bw) solid var(--_line); border-bottom: var(--_bw) solid var(--_line); font-size: 13.5px; line-height: 1.5; color: var(--_fg-2); }
.c3d-describe summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 500; color: var(--_fg); list-style: none; }
.c3d-describe summary::-webkit-details-marker { display: none; }
.c3d-describe summary::after { content: "+"; margin-left: auto; font: 400 18px/1 var(--_mono); color: var(--_fg-3); }
.c3d-describe[open] summary::after { content: "−"; }
.c3d-describe p { padding: 0 0 12px; }
.c3d-inline-nav { display: none; justify-content: space-between; gap: 8px; padding-top: 4px; }
.c3d-inline-nav .c3d-btn { min-height: 44px; padding: 0 16px; font-size: 14px !important; white-space: normal; text-align: center !important; }
.c3d[data-layout="stack"] .c3d-inline-nav { display: flex; }
.c3d-facts { display: flex; flex-direction: column; }
.c3d-fact { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: var(--_bw) solid var(--_line); font-size: 14px; }
.c3d-fact dt { color: var(--_fg-3); }
.c3d-fact dd { font-weight: 500; text-align: right; }
.c3d-code { font: 500 13px/1.3 var(--_mono); word-break: break-all; }
.c3d-summary-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.c3d-summary-actions .c3d-btn { min-height: 44px; padding: 0 18px; font-size: 14px !important; }
.c3d-skeleton-panel { display: flex; flex-direction: column; gap: 12px; }
.c3d-skeleton-panel span { height: 56px; border-radius: var(--_r-card); background: var(--_tile); animation: c3d-shimmer 1.4s ease-in-out infinite; }
.c3d-skeleton-panel span:first-child { height: 18px; width: 40%; }
/* "Powered by 3dweb.lt": last in the panel (pushed to its bottom when the step is short), quiet, in theme colours */
.c3d-powered { margin-top: auto; margin-bottom: -16px; display: flex; justify-content: center; }
.c3d-powered a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 8px; border-radius: var(--_r-ctl); color: var(--_fg-3); font: 400 12px/1 var(--_font); text-decoration: none; }
.c3d-powered a:hover { color: var(--_fg); text-decoration: underline; text-underline-offset: 3px; }
.c3d-powered strong { font-weight: 500; color: var(--_fg-2); }
@media print { .c3d-powered { display: none; } }

/* ---------- summary bar ---------- */
.c3d-bar { grid-area: bar; min-width: 0; display: flex; align-items: center; gap: 12px 20px; padding: 12px 12px 12px 22px; border-radius: var(--_r-panel); background: var(--_surface); box-shadow: var(--_frame); }
.c3d-bar-info { flex: 1; min-width: 0; }
.c3d-title { font: var(--_w-head) 16px/1.25 var(--_font); letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c3d-meta { font: 400 12.5px/1.4 var(--_mono); color: var(--_fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c3d-bar-price { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex: none; }
.c3d-price { font: var(--_w-head) 24px/1.1 var(--_font); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; display: inline-block; }
.c3d-price.is-bump { animation: c3d-bump .38s var(--_ease); }
.c3d-price.is-text { font-size: 15px; font-weight: 500; letter-spacing: 0; white-space: normal; text-align: right; }
@keyframes c3d-bump { 30% { transform: translateY(-2px); color: var(--_accent-text); } }
.c3d-vat { font: 400 11.5px/1.3 var(--_mono); color: var(--_fg-3); white-space: nowrap; }
.c3d-price-note { display: inline-block; margin-top: 2px; padding: 1px 7px; border: var(--_bw) solid var(--_line-2); border-radius: var(--_r-ctl); font: 500 11px/1.4 var(--_font); color: var(--_fg-3); white-space: nowrap; }
p.c3d-price-note { margin: 6px 0 0; }
.c3d-bar .c3d-cta { min-height: 52px; padding: 0 26px; font-size: 16px !important; flex: none; }
.c3d-skeleton-bar { display: flex; justify-content: space-between; width: 100%; gap: 12px; }
.c3d-skeleton-bar span { height: 44px; width: 30%; border-radius: var(--_r-ctl); background: var(--_tile); animation: c3d-shimmer 1.4s ease-in-out infinite; }
.c3d[data-layout="stack"] .c3d-bar { padding: 8px 8px 8px 16px; gap: 10px; border-radius: calc(var(--_r-panel) - 2px); }
.c3d[data-layout="stack"] .c3d-bar-info { display: none; }
.c3d[data-layout="stack"] .c3d-bar-price { align-items: flex-start; flex: 1; min-width: 0; }
.c3d[data-layout="stack"] .c3d-price { font-size: 21px; }
.c3d[data-layout="stack"] .c3d-bar .c3d-cta { min-height: 48px; padding: 0 18px; font-size: 15px !important; }
.c3d[data-narrow] .c3d-bar .c3d-cta .c3d-ico { display: none; }

/* ---------- toasts ---------- */
.c3d-toasts { position: absolute; left: 12px; right: 12px; bottom: 96px; z-index: 30; display: flex; justify-content: center; pointer-events: none; }
.c3d[data-layout="stack"] .c3d-toasts { bottom: 78px; }
.c3d-toast { display: flex; align-items: center; gap: 10px; max-width: 460px; padding: 12px 16px; border-radius: var(--_r-card); background: var(--_fg); color: var(--_bg); font-size: 14px; line-height: 1.35; box-shadow: var(--_shadow); animation: c3d-up .25s var(--_ease) both; transition: opacity .25s ease; }
.c3d-toast.is-out { opacity: 0; }
.c3d-toast { pointer-events: auto; }
.c3d-toast-act { margin: -8px -8px -8px 4px; min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: min(var(--_r-btn), 10px); font: 600 13.5px/1 var(--_font) !important; color: var(--_bg) !important; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.c3d-toast-act:focus-visible { outline-color: var(--_bg); }

/* ---------- dialogs ---------- */
.c3d-modal-layer { position: absolute; inset: 0; z-index: 40; }
.c3d-modal-backdrop { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 12px; background: var(--_scrim); animation: c3d-in .2s ease both; }
.c3d[data-layout="stack"] .c3d-modal-backdrop { align-items: flex-end; padding: 8px; }
.c3d-modal { width: min(460px, 100%); max-height: 100%; overflow-y: auto; overscroll-behavior: contain; border-radius: var(--_r-panel); background: var(--_surface); box-shadow: var(--_shadow); animation: c3d-up .28s var(--_ease) both; }
.c3d-modal.is-reset, .c3d-modal.is-ar { width: min(400px, 100%); }
.c3d-modal-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 12px 8px 22px; background: var(--_surface); }
.c3d-modal-title { font: var(--_w-head) 20px/1.2 var(--_font); letter-spacing: -0.02em; }
.c3d-modal-body { padding: 4px 22px 22px; display: flex; flex-direction: column; gap: 14px; }
.c3d-form { display: flex; flex-direction: column; gap: 14px; }
.c3d-modal-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.c3d[data-narrow] .c3d-modal-actions .c3d-btn { flex: 1; padding: 0 14px; }
.c3d-quote-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: var(--_r-card); background: var(--_bg); }
.c3d-quote-card > div { min-width: 0; }
.c3d-quote-card .c3d-price { font-size: 20px; }
.c3d-field { display: flex; flex-direction: column; gap: 6px; }
.c3d-field label, .c3d-field-label { font: 500 13.5px/1.3 var(--_font); }
.c3d-optional { color: var(--_fg-3); font-weight: 400; }
.c3d-input { width: 100%; min-height: 46px; padding: 10px 14px; border-radius: var(--_r-btn); border: var(--_bw) solid var(--_edge); background: var(--_surface); color: var(--_fg); font: 400 16px/1.4 var(--_font) !important; }
.c3d-input::placeholder { color: var(--_fg-3); opacity: 1; }
.c3d-input:focus-visible { outline: 2px solid var(--_accent-strong); outline-offset: 0; border-color: var(--_accent-strong); }
.c3d-input[aria-invalid="true"] { border-color: var(--_err); }
textarea.c3d-input { resize: vertical; min-height: 84px; }
.c3d-copyarea { font: 400 12.5px/1.5 var(--_mono) !important; min-height: 170px !important; }
.c3d-room .c3d-input { min-height: 44px; padding: 8px 12px; }
.c3d-field-error { color: var(--_err); font-size: 13px; }
.c3d-field-error:empty { display: none; }
.c3d-consent { font-size: 12.5px; line-height: 1.45; color: var(--_fg-3); }
.c3d-consent a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.c3d-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.c3d-result { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--_r-card); background: var(--_bg); font-size: 14.5px; }
.c3d-result.is-ok .c3d-ico { color: var(--_ok); }
.c3d-result.is-error .c3d-ico { color: var(--_err); }
.c3d-code-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 14px; border-radius: var(--_r-btn); background: var(--_bg); }
.c3d-code-row.is-center { justify-content: center; padding: 10px 14px; }
.c3d-phone-row { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: var(--_r-card); background: var(--_bg); }
.c3d-phone-row .c3d-qr { padding: 6px; flex: none; }
.c3d-phone-row strong { font: 600 14px/1.3 var(--_font); }
.c3d-qr { align-self: center; padding: 10px; border-radius: var(--_r-card); background: #fff; /* stays white: QR codes need it */ line-height: 0; box-shadow: 0 0 0 var(--_bw) var(--_line); }
.c3d-ar-slot { display: flex; justify-content: center; }
.c3d-ar-slot img { width: 1px; height: 1px; opacity: 0; position: absolute; }

/* ---------- very small boxes ---------- */
.c3d { min-width: 0; }
.c3d[data-tiny] { min-height: 0; }
.c3d[data-tiny] .c3d-bar { padding-left: 12px; gap: 8px; }
.c3d[data-tiny] .c3d-price { font-size: 18px; }
.c3d[data-tiny] .c3d-vat { display: none; }
.c3d[data-tiny] .c3d-bar .c3d-cta { padding: 0 14px; font-size: 14px !important; min-height: 44px; }
.c3d[data-tiny] .c3d-tools { gap: 2px; }
.c3d[data-tiny] .c3d-tools .c3d-iconbtn { width: 40px; height: 40px; }
.c3d[data-tiny] .c3d-swatches, .c3d[data-tiny] .c3d-preset-cards { grid-template-columns: 1fr 1fr; }
.c3d[data-tiny] .c3d-swatch { gap: 8px; }
.c3d[data-tiny] .c3d-swatch-chip { width: 36px; height: 36px; }
/* very large boxes: the panel and the type grow a little, the picture gets the rest */
.c3d[data-xl][data-layout="wide"] { grid-template-columns: minmax(0, 1fr) clamp(420px, 26%, 560px); font-size: 16px; }
.c3d[data-tiny] .c3d-step-n { display: none; }
.c3d[data-tiny] .c3d-step { padding: 0 12px; min-height: 40px; }
.c3d[data-tiny] .c3d-steps { padding: 6px 8px; }

@media (prefers-reduced-motion: reduce) {
  .c3d *, .c3d *::before, .c3d *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
@media (forced-colors: active) {
  /* system colours replace ours: borders and outlines carry every state that colour carried */
  .c3d-marker, .c3d-iconbtn, .c3d-btn, .c3d-act, .c3d-seg-btn, .c3d-tray-item, .c3d-add, .c3d-preset-card, .c3d-swatch-wrap, .c3d-choice, .c3d-piece, .c3d-step { border: var(--_bw) solid ButtonText !important; }
  .c3d-step.is-on, .c3d-seg-btn.is-on, .c3d-preset-card.is-on, .c3d-swatch-wrap.is-on, .c3d-choice.is-on, .c3d-piece.is-on, .c3d-iconbtn[aria-pressed="true"] { border: 3px solid Highlight !important; }
  .c3d-room, .c3d-closeup, .c3d-tray, .c3d-actionbar, .c3d-notice, .c3d-modal, .c3d-toast, .c3d-dim-label, .c3d-panel, .c3d-bar, .c3d-stage { border: var(--_bw) solid CanvasText; }
  .c3d-swatch-chip, .c3d-canvas, .c3d-plan-big, .c3d-thumb, .c3d-preset-thumb, .c3d-qr { forced-color-adjust: none; }
  .c3d :focus-visible { outline: 3px solid Highlight; }
  .c3d-dim-line { stroke: CanvasText; }
}