/* Parametric Configurator UI. Theme with the --pcfg-* custom properties. */
/* light defaults (customers) */
.pcfg-theme {
  --pcfg-accent: #f5c400;
  --pcfg-accent-ink: #111;
  --pcfg-fg: #141414;
  --pcfg-muted: #6b6b6b;
  --pcfg-bg: #ffffff;
  --pcfg-surface: #f5f5f4;
  --pcfg-border: #e2e2df;
  --pcfg-stage: radial-gradient(120% 90% at 50% 20%, #ffffff 0%, #f1f0ed 60%, #e7e5e1 100%);
  --pcfg-radius: 10px;
  --pcfg-font: inherit;
  --pcfg-head-font: inherit;
  --pcfg-warn-bg: #fff4d6;
  --pcfg-warn-fg: #6b4e00;
}

/* admin / standalone dark theme */
.pcfg-theme.pcfg-mode-admin, .pcfg-mode-admin .pcfg-theme {
  --pcfg-fg: #ececec;
  --pcfg-muted: #9a9a9a;
  --pcfg-bg: #1d1e20;
  --pcfg-surface: #26282b;
  --pcfg-border: #34373b;
  --pcfg-stage: radial-gradient(120% 90% at 50% 15%, #3a3d42 0%, #26282c 55%, #1b1c1f 100%);
  --pcfg-warn-bg: #3d3420;
  --pcfg-warn-fg: #f3d68b;
}

.pcfg-app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  gap: 0;
  height: 100%;
  min-height: 560px;
  font-family: var(--pcfg-font);
  color: var(--pcfg-fg);
  background: var(--pcfg-bg);
}
.pcfg-stage { position: relative; min-height: 360px; background: var(--pcfg-stage); overflow: hidden; }
.pcfg-viewer { position: relative; width: 100%; height: 100%; min-height: 320px; background: var(--pcfg-stage); border-radius: inherit; overflow: hidden; touch-action: none; }
.pcfg-viewer canvas, .pcfg-canvas { display: block; width: 100%; height: 100%; outline: none; cursor: grab; }
.pcfg-viewer canvas:active { cursor: grabbing; }
.pcfg-side { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--pcfg-border); background: var(--pcfg-bg); }
.pcfg-side-title { padding: 16px 18px 6px; font: 600 15px/1.2 var(--pcfg-head-font); letter-spacing: .02em; }
.pcfg-panel-wrap { flex: 1 1 auto; overflow: auto; padding: 6px 12px 12px; }

.pcfg-viewbar { position: absolute; left: 12px; top: 12px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 2; }
.pcfg-chip { appearance: none; border: 1px solid var(--pcfg-border); background: color-mix(in srgb, var(--pcfg-bg) 82%, transparent); color: var(--pcfg-fg); padding: 6px 11px; border-radius: 999px; font: 500 12.5px/1 var(--pcfg-font); cursor: pointer; backdrop-filter: blur(6px); }
.pcfg-chip[aria-pressed="true"] { background: var(--pcfg-accent); color: var(--pcfg-accent-ink); border-color: var(--pcfg-accent); }

.pcfg-busy { position: absolute; right: 12px; top: 12px; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; background: color-mix(in srgb, var(--pcfg-bg) 85%, transparent); color: var(--pcfg-fg); font: 500 12px/1 var(--pcfg-font); opacity: 0; transform: translateY(-4px); transition: opacity .15s, transform .15s; pointer-events: none; z-index: 3; border: 1px solid var(--pcfg-border); }
.pcfg-busy.is-on { opacity: 1; transform: none; }
.pcfg-spinner { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--pcfg-border); border-top-color: var(--pcfg-accent); animation: pcfg-spin .7s linear infinite; }
@keyframes pcfg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pcfg-spinner { animation-duration: 2s; } }

.pcfg-warnings { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 2; pointer-events: none; }
.pcfg-warning { align-self: flex-start; max-width: 100%; background: var(--pcfg-warn-bg); color: var(--pcfg-warn-fg); border-radius: 8px; padding: 7px 10px; font: 500 12.5px/1.35 var(--pcfg-font); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* ---------------- panel */
.pcfg-panel { font-family: var(--pcfg-font); color: var(--pcfg-fg); }
.pcfg-group { border-bottom: 1px solid var(--pcfg-border); }
.pcfg-group[hidden] { display: none; }
.pcfg-group > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 6px; cursor: pointer; font: 600 13.5px/1.2 var(--pcfg-head-font); user-select: none; }
.pcfg-group > summary::-webkit-details-marker { display: none; }
.pcfg-chev { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); opacity: .6; transition: transform .15s; }
.pcfg-group[open] > summary .pcfg-chev { transform: rotate(-135deg) translate(-2px, -2px); }
.pcfg-group-body { padding: 2px 6px 14px; display: grid; gap: 14px; }
.pcfg-group-help { margin: 0; color: var(--pcfg-muted); font-size: 12px; }
.pcfg-field { display: grid; gap: 6px; }
.pcfg-field[hidden] { display: none; }
.pcfg-label { font: 500 12.5px/1.3 var(--pcfg-font); color: var(--pcfg-fg); }
.pcfg-help { margin: 0; color: var(--pcfg-muted); font-size: 11.5px; line-height: 1.4; }
.pcfg-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.pcfg-num { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.pcfg-num input[type=range] { width: 100%; accent-color: var(--pcfg-accent); }
.pcfg-num-box { display: flex; align-items: center; gap: 4px; }
.pcfg-num-box input { width: 74px; }
.pcfg-unit { color: var(--pcfg-muted); font-size: 11.5px; min-width: 16px; white-space: nowrap; }
.pcfg-panel input[type=number], .pcfg-panel input[type=text], .pcfg-panel textarea, .pcfg-panel select {
  box-sizing: border-box; width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--pcfg-border); background: var(--pcfg-surface); color: var(--pcfg-fg); font: 14px/1.35 var(--pcfg-font);
}
.pcfg-num-box input[type=number] { padding: 6px 8px; font-size: 13px; text-align: right; }
.pcfg-panel textarea { resize: vertical; min-height: 64px; font-size: 15px; }
.pcfg-panel input:focus-visible, .pcfg-panel textarea:focus-visible, .pcfg-panel select:focus-visible, .pcfg-panel button:focus-visible { outline: 2px solid var(--pcfg-accent); outline-offset: 1px; }
.pcfg-text-meta { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--pcfg-muted); }
.pcfg-warn { margin: 0; font-size: 12px; color: var(--pcfg-warn-fg); background: var(--pcfg-warn-bg); padding: 6px 8px; border-radius: 6px; }
.pcfg-warn[hidden] { display: none; }

.pcfg-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.pcfg-seg-btn { flex: 1 1 auto; appearance: none; border: 1px solid var(--pcfg-border); background: var(--pcfg-surface); color: var(--pcfg-fg); padding: 8px 10px; border-radius: 8px; font: 500 13px/1.2 var(--pcfg-font); cursor: pointer; min-height: 36px; }
.pcfg-seg-btn[aria-pressed="true"] { border-color: var(--pcfg-fg); box-shadow: inset 0 0 0 1px var(--pcfg-fg); background: var(--pcfg-bg); }

.pcfg-switch { position: relative; display: inline-flex; width: 38px; height: 22px; flex: none; }
.pcfg-switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pcfg-switch-ui { width: 100%; height: 100%; border-radius: 999px; background: var(--pcfg-border); transition: background .15s; position: relative; }
.pcfg-switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.pcfg-switch input:checked + .pcfg-switch-ui { background: var(--pcfg-accent); }
.pcfg-switch input:checked + .pcfg-switch-ui::after { transform: translateX(16px); }
.pcfg-switch input:focus-visible + .pcfg-switch-ui { outline: 2px solid var(--pcfg-accent); outline-offset: 2px; }

.pcfg-colors { display: grid; gap: 6px; }
.pcfg-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.pcfg-swatch { appearance: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); background: var(--c); cursor: pointer; position: relative; padding: 0; }
.pcfg-swatch.is-silk { background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.75), transparent 38%), var(--c); }
.pcfg-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--pcfg-bg), 0 0 0 4px var(--pcfg-fg); }
/* out of stock: faded, struck through, not clickable */
.pcfg-swatch.is-out { opacity: .38; cursor: not-allowed; }
.pcfg-swatch.is-out::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--pcfg-fg); transform: rotate(45deg); border-radius: 1px; }
.pcfg-swatch-group { display: grid; gap: 6px; }
.pcfg-swatch-group + .pcfg-swatch-group { margin-top: 4px; }
.pcfg-swatch-group-name { font-size: 12px; color: var(--pcfg-muted); }
.pcfg-swatch-name { font-size: 12px; color: var(--pcfg-muted); }

.pcfg-fonts { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.pcfg-font { appearance: none; display: grid; gap: 2px; justify-items: start; text-align: left; border: 1px solid var(--pcfg-border); background: var(--pcfg-surface); color: var(--pcfg-fg); border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.pcfg-font[aria-pressed="true"] { border-color: var(--pcfg-fg); box-shadow: inset 0 0 0 1px var(--pcfg-fg); background: var(--pcfg-bg); }
.pcfg-font-sample { font-size: 20px; line-height: 1.15; }
.pcfg-font-name { font-size: 11px; color: var(--pcfg-muted); }

.pcfg-file { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pcfg-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pcfg-file-name { font-size: 12px; color: var(--pcfg-muted); }
.pcfg-link { appearance: none; background: none; border: 0; padding: 0; color: var(--pcfg-fg); text-decoration: underline; cursor: pointer; font-size: 12px; }

.pcfg-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 8px; border: 1px solid var(--pcfg-border); background: var(--pcfg-surface); color: var(--pcfg-fg); padding: 9px 14px; font: 600 13px/1 var(--pcfg-font); cursor: pointer; text-decoration: none; }
.pcfg-btn:hover { border-color: var(--pcfg-muted); }
.pcfg-btn-primary { background: var(--pcfg-accent); color: var(--pcfg-accent-ink); border-color: var(--pcfg-accent); }
.pcfg-btn-small { padding: 7px 10px; font-size: 12px; }

.pcfg-info { padding: 10px 18px; border-top: 1px solid var(--pcfg-border); font-size: 12px; color: var(--pcfg-muted); }
.pcfg-info table { width: 100%; border-collapse: collapse; }
.pcfg-info th { text-align: left; font-weight: 500; padding: 2px 8px 2px 0; text-transform: capitalize; }
.pcfg-info td { text-align: right; color: var(--pcfg-fg); font-variant-numeric: tabular-nums; }
.pcfg-muted { color: var(--pcfg-muted); margin: 6px 0 0; }
.pcfg-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid var(--pcfg-border); }

/* customer panel spacing */
.pcfg-customer .pcfg-group > summary { padding: 14px 0; font-size: 14px; }
.pcfg-customer .pcfg-group-body { padding: 0 0 16px; gap: 16px; }
.pcfg-customer .pcfg-label { font-size: 13px; font-weight: 600; }

@media (max-width: 860px) {
  .pcfg-app { grid-template-columns: 1fr; grid-template-rows: minmax(320px, 58vh) auto; height: auto; }
  .pcfg-side { border-left: 0; border-top: 1px solid var(--pcfg-border); }
  .pcfg-panel-wrap { overflow: visible; }
}

/* ---------------- WooCommerce product page */
.pcfg-gallery { position: relative; }
.pcfg-gallery.pcfg-block-gallery { width: 100%; float: none; }
/* desktop: keep the preview in view while customers scroll through the options. The gallery
   fills its row, and only its inner part sticks, so the preview stops where the options end
   instead of sliding over the description and reviews below. */
@media (min-width: 769px) and (min-height: 560px) {
  .pcfg-gallery { align-self: stretch; }
  .pcfg-gallery-stick { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + 24px); z-index: 1; }
  .pcfg-gallery .pcfg-viewer-host { max-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - 170px); }
}
.pcfg-view-box { position: relative; }
/* a product photo shown in place of the 3D view */
.pcfg-photo { position: absolute; inset: 0; z-index: 5; border-radius: 14px; overflow: hidden; background: #f1f0ed; }
.pcfg-photo[hidden] { display: none; }
.pcfg-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pcfg-gallery.is-photo .pcfg-viewer-hint { visibility: hidden; }
.pcfg-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; margin-top: 12px; }
.pcfg-photo-thumb { appearance: none; position: relative; aspect-ratio: 1 / 1; padding: 0; border: 1px solid transparent; border-radius: 8px; overflow: hidden; background: #f1f0ed; color: #141414; cursor: pointer; font: 600 15px/1 inherit; }
.pcfg-photo-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pcfg-photo-thumb[aria-pressed="true"] { border-color: #141414; box-shadow: inset 0 0 0 1px #141414; }
.pcfg-photo-thumb:focus-visible { outline: 2px solid #f5c400; outline-offset: 2px; }
.pcfg-gallery .pcfg-viewer-host { position: relative; width: 100%; aspect-ratio: 1 / 1; min-height: 320px; border-radius: 14px; overflow: hidden; background-color: #f1f0ed; background-size: cover; background-position: center; }
/* the product image only stands in while the 3D view loads; the photos are in the strip below */
.pcfg-gallery.is-ready .pcfg-viewer-host { background-image: none !important; }
.pcfg-gallery .pcfg-viewer-host .pcfg-viewer { position: absolute; inset: 0; min-height: 0; border-radius: inherit; }
.pcfg-gallery.is-loading .pcfg-viewer-host::after { content: ""; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px; border-radius: 50%; border: 3px solid rgba(0,0,0,.12); border-top-color: #f5c400; animation: pcfg-spin .8s linear infinite; z-index: 4; }
.pcfg-gallery.has-error .pcfg-viewer-host::after { content: "3D preview unavailable in this browser"; position: absolute; inset: auto 12px 12px; font-size: 12px; color: #6b6b6b; background: rgba(255,255,255,.85); padding: 6px 10px; border-radius: 6px; }
.pcfg-viewer-hint { margin: 8px 0 0; font-size: 12px; color: #6b6b6b; text-align: center; }
.pcfg-gallery-inline { margin-bottom: 18px; }
.pcfg-product-options { margin: 10px 0 18px; }
.pcfg-product-options .pcfg-panel { border-top: 1px solid var(--pcfg-border, #e2e2df); }
/* the line above the price is the last option group's own bottom border */
.pcfg-price-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; font-size: 15px; }
.pcfg-price-line strong { font-size: 20px; }
.pcfg-mold-note { margin: 0 0 6px; padding: 10px 12px; border-radius: 8px; background: #fff4d6; color: #6b4e00; font-size: 13px; line-height: 1.45; }
.pcfg-thumb { border-radius: 8px; background: #fff; }
.pcfg-shortcode-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 860px) { .pcfg-shortcode-grid { grid-template-columns: 1fr; } }
.pcfg-block-placeholder { padding: 24px; border: 1px dashed #c3c4c7; border-radius: 8px; text-align: center; }

/* ---------------- dialogs + toasts (standalone + workbench) */
.pcfg-dialog { border: 1px solid #34373b; border-radius: 12px; background: #1f2023; color: #ececec; padding: 0; width: min(440px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(0,0,0,.5); font: 14px/1.45 "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; }
.pcfg-dialog-wide { width: min(760px, calc(100vw - 32px)); }
.pcfg-dialog::backdrop { background: rgba(0,0,0,.55); }
.pcfg-dialog form { display: grid; gap: 12px; padding: 20px; max-height: calc(100vh - 80px); overflow: auto; }
.pcfg-dialog h2 { margin: 0 0 4px; font: 600 18px/1.2 "Chakra Petch", system-ui, sans-serif; color: #fff; }
.pcfg-dialog h3 { margin: 8px 0 0; font: 600 13px/1.2 system-ui, sans-serif; color: #cfcfcf; }
.pcfg-dialog label { display: grid; gap: 4px; font-size: 12.5px; color: #cfcfcf; }
.pcfg-dialog .pcfg-check { display: flex; align-items: center; gap: 8px; }
.pcfg-dialog input[type=text], .pcfg-dialog input[type=number], .pcfg-dialog select { padding: 7px 9px; border-radius: 7px; border: 1px solid #3a3d42; background: #26282b; color: #ececec; font: inherit; }
.pcfg-dialog input[type=color] { width: 42px; height: 30px; border: 0; background: none; padding: 0; }
.pcfg-dialog .pcfg-muted { color: #9a9a9a; font-size: 12px; }
.pcfg-dialog .pcfg-btn { background: #2b2d31; color: #ececec; border-color: #3a3d42; }
.pcfg-dialog .pcfg-btn-primary { background: #f5c400; color: #111; border-color: #f5c400; }
.pcfg-dialog .pcfg-link { color: #ececec; }
.pcfg-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.pcfg-inline { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.pcfg-table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.pcfg-table th { text-align: left; color: #9a9a9a; font-weight: 500; padding: 4px; }
.pcfg-table td { padding: 3px 4px; }
.pcfg-table input[type=text] { width: 100%; box-sizing: border-box; }
.pcfg-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; background: #f5c400; color: #111; padding: 10px 16px; border-radius: 10px; font: 600 13px/1.4 system-ui, sans-serif; transition: .25s; z-index: 100000; max-width: calc(100vw - 40px); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.pcfg-toast.is-in { opacity: 1; transform: translate(-50%, 0); }
.pcfg-toast.is-error { background: #e5484d; color: #fff; }

/* ---------------- Designer (WordPress): actions, molds, setting up a product */
.pcfg-action-row { display: contents; }
.pcfg-workbench .pcfg-actions { display: grid; gap: 10px; }
.pcfg-workbench .pcfg-action-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pcfg-save-status { font-size: 12px; color: var(--pcfg-muted); }
.pcfg-mold-line { margin: 0; font-size: 12px; color: var(--pcfg-muted); line-height: 1.5; }
.pcfg-mold-ok { color: #7bd88f; font-weight: 600; }
.pcfg-mold-new { color: var(--pcfg-warn-fg); font-weight: 600; }
.pcfg-more { position: relative; }
.pcfg-more > summary { list-style: none; }
.pcfg-more > summary::-webkit-details-marker { display: none; }
.pcfg-more-menu { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 20; display: grid; gap: 6px; min-width: 210px; padding: 8px; border: 1px solid var(--pcfg-border); border-radius: 10px; background: var(--pcfg-bg); box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.pcfg-more-menu .pcfg-btn { justify-content: flex-start; }
.pcfg-toast a { color: inherit; font-weight: 700; }
.pcfg-swatch.is-low { opacity: .55; }

.pcfg-field-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.pcfg-row > .pcfg-field-head { flex: 1; }
.pcfg-who { flex: none; display: inline-flex; border: 1px solid var(--pcfg-border); border-radius: 999px; overflow: hidden; }
.pcfg-who-btn { appearance: none; border: 0; background: transparent; color: var(--pcfg-muted); padding: 3px 9px; font: 500 11px/1.4 var(--pcfg-font); cursor: pointer; white-space: nowrap; }
.pcfg-who-btn + .pcfg-who-btn { border-left: 1px solid var(--pcfg-border); }
.pcfg-who-btn[aria-pressed="true"] { background: var(--pcfg-surface); color: var(--pcfg-fg); }
.pcfg-who-btn:last-child[aria-pressed="true"] { background: var(--pcfg-accent); color: var(--pcfg-accent-ink); }
.pcfg-who-btn:focus-visible { outline: 2px solid var(--pcfg-accent); outline-offset: -2px; }
.pcfg-field.is-customer { padding-left: 10px; border-left: 2px solid var(--pcfg-accent); }
.pcfg-group-count { margin: 0 auto 0 8px; padding: 1px 8px; border-radius: 999px; background: var(--pcfg-accent); color: var(--pcfg-accent-ink); font: 600 11px/1.5 var(--pcfg-font); }
.pcfg-group-count[hidden] { display: none; }

.pcfg-rules { display: grid; gap: 8px; margin-top: 4px; padding: 10px; border-radius: 8px; background: var(--pcfg-surface); border: 1px solid var(--pcfg-border); }
.pcfg-rules[hidden] { display: none; }
.pcfg-rule { display: grid; gap: 3px; font-size: 11.5px; color: var(--pcfg-muted); }
.pcfg-rules input[type=text], .pcfg-rules input[type=number] { box-sizing: border-box; width: 100%; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--pcfg-border); background: var(--pcfg-bg); color: var(--pcfg-fg); font: 13px/1.3 var(--pcfg-font); }
.pcfg-rule-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; }
.pcfg-rule-head { display: flex; align-items: baseline; gap: 8px; font-size: 11.5px; color: var(--pcfg-muted); }
.pcfg-rule-head > span:first-child { flex: 1; }
.pcfg-rule-list { display: grid; gap: 4px; }
.pcfg-rule-line { display: flex; align-items: center; gap: 8px; }
.pcfg-rule-option { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; color: var(--pcfg-fg); cursor: pointer; }
.pcfg-rule-option input { margin: 0; accent-color: var(--pcfg-accent); }
.pcfg-rule-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--c); border: 1px solid rgba(255,255,255,.25); }
.pcfg-rule-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcfg-rule-out { flex: none; font-size: 10.5px; color: var(--pcfg-warn-fg); }
.pcfg-rule-option.is-out .pcfg-rule-name { color: var(--pcfg-muted); }
.pcfg-rule-sur { flex: none; display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--pcfg-muted); }
.pcfg-rules .pcfg-rule-sur input { width: 64px; padding: 3px 6px; }
.pcfg-rule-group { margin: 6px 0 0; font-size: 11.5px; font-weight: 600; color: var(--pcfg-fg); }
.pcfg-rule-note { margin: 0; padding: 6px 8px; border-radius: 6px; background: var(--pcfg-warn-bg); color: var(--pcfg-warn-fg); font-size: 11.5px; }
.pcfg-rule-note[hidden] { display: none; }
.pcfg-build-mark { margin: 0; font-size: 11.5px; color: var(--pcfg-warn-fg); }
.pcfg-build-mark[hidden] { display: none; }
.pcfg-build-mark .pcfg-link { color: inherit; font-size: inherit; }
.pcfg-build-help a { color: var(--pcfg-fg); }

/* Administrator workspace: broad controls on the left, with a resizable viewer. */
.pcfg-app.pcfg-mode-admin {
  --pcfg-panel-width: clamp(360px, 38vw, 600px);
  grid-template-columns: minmax(0, var(--pcfg-panel-width)) 8px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  min-width: 0;
}
.pcfg-mode-admin > .pcfg-side { grid-column: 1; grid-row: 1; border-left: 0; border-right: 1px solid var(--pcfg-border); min-width: 0; }
.pcfg-mode-admin > .pcfg-stage { grid-column: 3; grid-row: 1; min-width: 0; }
.pcfg-splitter { grid-column: 2; grid-row: 1; cursor: col-resize; background: var(--pcfg-border); touch-action: none; }
.pcfg-splitter:hover, .pcfg-splitter:focus-visible { background: var(--pcfg-accent); }
.pcfg-workspace-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 12px; border-bottom: 1px solid var(--pcfg-border); }
.pcfg-workspace-tools input { grid-column: 1 / -1; width: 100%; min-height: 38px; background: var(--pcfg-surface); border: 1px solid var(--pcfg-border); border-radius: 4px; padding: 8px 10px; color: var(--pcfg-fg); }
.pcfg-section-tabs { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pcfg-section-tabs button { background: var(--pcfg-surface); color: var(--pcfg-fg); border: 1px solid var(--pcfg-border); padding: 8px; cursor: pointer; }
.pcfg-section-tabs button[aria-selected=true] { background: var(--pcfg-accent); color: var(--pcfg-accent-ink); border-color: var(--pcfg-accent); }
.pcfg-mode-admin select, .pcfg-mode-admin select option, .pcfg-mode-admin select optgroup { color-scheme: dark; background-color: var(--pcfg-surface); color: var(--pcfg-fg); }
.pcfg-mode-admin .pcfg-info { flex: 0 0 auto; max-height: 150px; overflow: auto; }
.pcfg-mode-admin .pcfg-info > summary { cursor: pointer; font-size: 12px; }
.pcfg-mode-admin .pcfg-actions { flex: 0 0 auto; overflow: visible; }
.pcfg-app.pcfg-mode-admin .pcfg-panel-wrap { min-height: 150px; overscroll-behavior: contain; }
.pcfg-manufacturing-panel { padding: 12px 6px; }
.pcfg-manufacturing-panel select, .pcfg-dialog select { width: 100%; min-height: 38px; }
.pcfg-export-profiles { display: grid; gap: 12px; min-width: 0; }
.pcfg-export-profiles label { display: grid; gap: 6px; }
.pcfg-app.pcfg-mode-admin:not(.pcfg-searching)[data-section=design] .pcfg-group:not([data-section=design]),
.pcfg-app.pcfg-mode-admin:not(.pcfg-searching)[data-section=construction] .pcfg-group:not([data-section=construction]),
.pcfg-app.pcfg-mode-admin:not(.pcfg-searching)[data-section=materials] .pcfg-group:not([data-section=materials]),
.pcfg-app.pcfg-mode-admin:not(.pcfg-searching)[data-section=export] .pcfg-group:not([data-section=export]),
.pcfg-app.pcfg-mode-admin:not(.pcfg-searching):not([data-section=export]) .pcfg-manufacturing-panel,
.pcfg-app [data-search-hidden] { display: none !important; }
.pcfg-app:fullscreen, .pcfg-app.pcfg-expanded { width: 100vw; height: 100vh !important; max-width: none; border: 0; border-radius: 0; margin: 0; }
.pcfg-app.pcfg-expanded { position: fixed; inset: 0; z-index: 100000; }
@media (max-width: 900px) {
  .pcfg-app.pcfg-mode-admin { display: flex; flex-direction: column; height: auto; min-height: 0; }
  .pcfg-mode-admin > .pcfg-stage { order: 0; flex: 0 0 40vh; min-height: 240px; }
  .pcfg-mode-admin > .pcfg-side { order: 1; width: 100%; border: 0; }
  .pcfg-mode-admin .pcfg-panel-wrap { max-height: 65vh; }
  .pcfg-splitter { display: none; }
}

.pcfg-dialog select option, .pcfg-dialog select optgroup { color-scheme: dark; color: #ececec; background: #26282b; }