:root {
  --bg: #0b0d10;
  --panel: #11151a;
  --panel2: #151a20;
  --line: #252c34;
  --line2: #343d47;
  --lineStrong: #46515c;
  --text: #f1f4f6;
  --muted: #8f9ba7;
  --accent: #f2c94c;
  --accent2: #ffd85a;
  --danger: #f07178;
  --radius: 14px;
  --shadow: 0 18px 50px rgba(0,0,0,.24);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin:0; width:100%; height:100%; background:var(--bg); color:var(--text); overflow:hidden; }
button, input, select { font:inherit; }
button { color:inherit; }
#app { display:grid; grid-template-rows:64px 1fr; height:100vh; }

.topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 18px; border-bottom:1px solid var(--line);
  background:rgba(12,15,18,.96); backdrop-filter:blur(16px); z-index:10;
}
.brand { display:flex; align-items:center; gap:12px; min-width:0; }
.brandMark {
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(145deg,#2a2516,#15140d); color:var(--accent); border:1px solid #4b4020;
  font-size:22px;
}
.brandTitle { font-weight:760; letter-spacing:.2px; }
.brandSub { font-size:11px; color:var(--muted); margin-top:2px; }
.topActions { display:flex; align-items:center; gap:8px; }
.statusPill {
  border:1px solid var(--line2); color:var(--muted); padding:7px 10px; border-radius:999px;
  font-size:11px; margin-right:6px;
}
.statusPill.ok { border-color:#35533f; color:#9ad3aa; background:#122019; }
.statusPill.bad { border-color:#67363a; color:#f2a2a8; background:#251316; }

.workspace { display:grid; grid-template-columns:300px minmax(360px,1fr) 300px; min-height:0; }
.panel { background:var(--panel); overflow:auto; min-height:0; }
.leftPanel { border-right:1px solid var(--line); }
.rightPanel { border-left:1px solid var(--line); }
.panelSection { padding:17px 16px; border-bottom:1px solid var(--line); }
.panelSection.important { background:linear-gradient(180deg,rgba(242,201,76,.045),transparent); }
.sectionEyebrow { color:var(--accent); text-transform:uppercase; letter-spacing:.13em; font-size:10px; font-weight:800; margin-bottom:5px; }
h2,h3,p { margin:0; }
h2 { font-size:17px; margin-bottom:7px; }
h3 { font-size:14px; margin-bottom:9px; }
.sectionHint,.miniHelp { color:var(--muted); font-size:11px; line-height:1.5; }
.sectionHint { margin-bottom:14px; }
.miniHelp { margin-top:10px; }

.fieldGrid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.field { display:flex; flex-direction:column; gap:5px; min-width:0; }
.field.full { grid-column:1 / -1; }
.field > span { color:#b8c0c8; font-size:11px; display:flex; justify-content:space-between; gap:8px; }
.field small { color:var(--accent); }
input[type="number"], select {
  width:100%; height:34px; border:1px solid var(--line2); border-radius:8px;
  background:#0c1014; color:var(--text); padding:0 10px; outline:none;
}
input[type="number"]:focus, select:focus { border-color:#6c6031; box-shadow:0 0 0 2px rgba(242,201,76,.08); }
.inputUnit { position:relative; }
.inputUnit input { padding-right:36px; }
.inputUnit em { position:absolute; right:9px; top:50%; transform:translateY(-50%); color:#6f7b86; font-size:10px; font-style:normal; }
input[type="range"] { accent-color:var(--accent); width:100%; }

.segmented { display:grid; grid-template-columns:1fr 1fr; background:#0c1014; border:1px solid var(--line2); border-radius:9px; padding:3px; }
.seg { border:0; background:transparent; padding:7px 8px; border-radius:6px; color:var(--muted); font-size:11px; cursor:pointer; }
.seg.active { background:#2a2514; color:var(--accent2); box-shadow:inset 0 0 0 1px #544820; }

.button {
  border:1px solid var(--line2); background:#171d23; padding:8px 11px; border-radius:9px;
  cursor:pointer; transition:.15s ease; font-size:12px; white-space:nowrap;
}
.button:hover:not(:disabled) { border-color:#52606c; background:#1b2229; transform:translateY(-1px); }
.button:disabled { opacity:.38; cursor:not-allowed; }
.button.primary { background:var(--accent); border-color:var(--accent); color:#15130c; font-weight:750; }
.button.primary:hover:not(:disabled) { background:var(--accent2); border-color:var(--accent2); }
.button.ghost { background:transparent; }
.button.dangerSubtle { background:#211518; border-color:#4a2a30; color:#e5a2a7; }
.button.wide { width:100%; }
.button.small { font-size:11px; padding:6px 9px; }
.buttonStack { display:flex; flex-direction:column; gap:7px; }
.rowButtons { display:flex; gap:7px; margin-top:10px; }
.fileButton input { display:none; }

.hasTooltip{position:relative}
.hasTooltip::after{
  content:attr(data-tooltip);position:absolute;z-index:80;left:50%;bottom:calc(100% + 9px);
  width:max-content;max-width:280px;padding:8px 10px;border:1px solid var(--lineStrong);
  border-radius:8px;background:#080b0e;color:#e7edf2;font-size:10px;font-weight:450;
  line-height:1.45;white-space:normal;box-shadow:0 10px 28px rgba(0,0,0,.34);
  transform:translate(-50%,4px);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .12s ease,transform .12s ease,visibility .12s;
}
.hasTooltip:hover::after,.hasTooltip:focus-visible::after,.hasTooltip:focus-within::after{
  opacity:1;visibility:visible;transform:translate(-50%,0)
}
.leftPanel .hasTooltip::after{left:0;bottom:auto;top:calc(100% + 7px);transform:translateY(-3px)}
.leftPanel .hasTooltip:hover::after,.leftPanel .hasTooltip:focus-within::after{transform:none}
.topActions .hasTooltip::after{top:calc(100% + 9px);bottom:auto}

.advanced summary { cursor:pointer; color:#bdc5cd; font-size:12px; }
.advancedGrid { margin-top:12px; }

.viewportWrap { position:relative; min-width:0; min-height:0; background:radial-gradient(circle at 50% 34%,#47535e 0,#313941 45%,#20262c 100%); overflow:hidden; }
#viewport { position:absolute; inset:0; }
#viewport canvas { width:100%; height:100%; display:block; }
.viewportToolbar {
  position:absolute; top:14px; left:14px; display:flex; gap:6px;
  background:rgba(13,16,19,.72); border:1px solid rgba(80,90,100,.35); border-radius:10px;
  padding:5px; backdrop-filter:blur(8px);
}
.viewerBuildToolbar {
  position:absolute; z-index:9; top:14px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:5px; padding:5px;
  border:1px solid rgba(103,116,127,.62); border-radius:12px;
  background:rgba(10,14,18,.92); box-shadow:0 10px 30px rgba(0,0,0,.28);
  backdrop-filter:blur(10px);
}
.viewerBuildButton {
  border:1px solid transparent; background:transparent; color:#aeb8c1;
  padding:9px 14px; border-radius:8px; cursor:pointer; font-size:11px;
  font-weight:700; white-space:nowrap; transition:.14s ease;
}
.viewerBuildButton:hover { background:#202831; color:#f2f6f8; }
.viewerBuildButton.active {
  color:#baf0c7; border-color:#376649; background:#173122;
  box-shadow:inset 0 0 0 1px rgba(99,202,128,.08);
}
.viewerDeleteButton { color:#e8a5aa; }
.viewerDeleteButton.active {
  color:#ffb3ba; border-color:#783943; background:#381a20;
  box-shadow:inset 0 0 0 1px rgba(240,113,120,.08);
}
.toolButton { border:0; background:transparent; color:var(--muted); padding:6px 9px; border-radius:6px; cursor:pointer; font-size:11px; }
.toolButton.active { background:#242b32; color:var(--text); }
.viewportInfo {
  position:absolute; left:16px; bottom:14px; display:flex; gap:14px; color:#87939e;
  font-size:10px; pointer-events:none;
}
.dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:5px; }
.woodDot { background:#c59b68; }
.connectorDot { background:#3b82f6; }
.meshBusy {
  position:absolute; top:14px; right:14px; background:rgba(12,15,18,.88); border:1px solid var(--line2);
  padding:8px 10px; border-radius:9px; color:#c9d0d6; font-size:11px; display:flex; gap:8px; align-items:center;
}
.meshBusy.hidden { display:none; }
.spinner { width:12px; height:12px; border:2px solid #4a5157; border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.emptyState {
  position:absolute; inset:0; margin:auto; width:260px; height:max-content; text-align:center;
  padding:24px; border:1px solid rgba(94,104,114,.25); border-radius:16px;
  background:rgba(14,18,22,.66); backdrop-filter:blur(10px);
}
.emptyState.hidden { display:none; }
.emptyIcon { color:var(--accent); font-size:32px; margin-bottom:8px; }
.emptyState h3 { font-size:16px; }
.emptyState p { color:var(--muted); font-size:11px; line-height:1.5; margin:8px 0 14px; }

.metricGrid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:12px; }
.metric { background:#0d1115; border:1px solid var(--line); border-radius:10px; padding:10px; display:flex; flex-direction:column; }
.metric strong { font-size:18px; }
.metric span { color:var(--muted); font-size:9px; margin-top:2px; text-transform:uppercase; letter-spacing:.08em; }
.dimensionCard { margin-top:8px; background:#0d1115; border:1px solid var(--line); border-radius:10px; padding:10px; display:flex; flex-direction:column; gap:4px; }
.dimensionCard span { color:var(--muted); font-size:10px; }
.dimensionCard strong { font-size:12px; }
.dimensionCard small { color:#77838e; font-size:9px; line-height:1.35; }

.sectionHeaderRow { display:flex; justify-content:space-between; align-items:flex-start; }
.textButton { border:0; background:transparent; color:var(--accent); font-size:10px; cursor:pointer; }
.bomList { display:flex; flex-direction:column; gap:6px; }
.bomRow {
  display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center;
  background:#0d1115; border:1px solid var(--line); border-radius:9px; padding:9px 10px;
}
.bomInteractiveRow{width:100%;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:border-color .14s ease,background .14s ease,box-shadow .14s ease}
.bomInteractiveRow:hover,.bomInteractiveRow:focus-visible{border-color:#52606c;background:#141a20;outline:none}
.bomInteractiveRow.active{border-color:#e4bd3f;background:#282311;box-shadow:inset 3px 0 0 #ffd85a,0 0 0 1px rgba(255,216,90,.06)}
.bomInteractiveRow.active .bomTitle{color:#fff1af}
.bomMain { min-width:0; }
.bomTitle { font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bomMeta { color:var(--muted); font-size:9px; margin-top:2px; }
.bomQty { font-weight:800; color:var(--accent2); font-size:13px; }
.emptyBom { color:#65717c; font-size:10px; padding:5px 0; }
.derivedCard { margin-top:9px; border-top:1px dashed var(--line2); padding-top:8px; display:flex; flex-direction:column; gap:5px; }
.derivedCard div { display:flex; justify-content:space-between; gap:12px; color:var(--muted); font-size:10px; }
.derivedCard b { color:#dce1e5; font-weight:650; }
.exportSection { padding-bottom:30px; }

@media (max-width: 1050px) {
  .workspace { grid-template-columns:270px 1fr; }
  .rightPanel {
    position:absolute; right:12px; top:78px; bottom:12px; width:280px; z-index:7;
    border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
    transform:translateX(calc(100% + 24px));
    transition:.2s ease;
  }
  .rightPanel.open { transform:none; }
}
@media (max-width: 760px) {
  html,body { overflow:auto; }
  #app { min-height:100vh; height:auto; display:block; }
  .topbar { position:sticky; top:0; height:64px; }
  .brandSub,.statusPill,.topActions .ghost { display:none; }
  .workspace { display:block; }
  .leftPanel { border-right:0; border-bottom:1px solid var(--line); max-height:none; }
  .viewportWrap { height:58vh; min-height:430px; }
  .rightPanel { position:static; transform:none; width:auto; border:0; border-top:1px solid var(--line); border-radius:0; }
  .fieldGrid { grid-template-columns:1fr 1fr; }
}

.autoConnectorNote {
  margin-top:10px; padding:9px 10px; border:1px solid #49432b; background:#1c1b13;
  border-radius:9px; display:flex; flex-direction:column; gap:3px;
}
.autoConnectorNote b { color:var(--accent2); font-size:10px; }
.autoConnectorNote span { color:#aab3bb; font-size:9px; line-height:1.4; }

.colorRow{ display:flex; align-items:center; gap:10px; }
.colorRow input[type="color"]{ width:54px; height:38px; padding:0; border-radius:10px; border:1px solid var(--line2); background:transparent; cursor:pointer; }
.colorRow code{ display:inline-flex; align-items:center; min-height:38px; padding:0 10px; border:1px solid var(--line); border-radius:10px; background:#0d1116; color:#cdd6de; font-size:12px; }
.referenceBadge{ display:inline-flex; align-items:center; gap:6px; padding:4px 7px 4px 8px; border-radius:999px; background:#171b20; border:1px solid var(--line); color:#cfd7df; font-size:11px; cursor:pointer; }
.referenceBadge:hover,.referenceBadge:focus-visible{border-color:#596672;background:#20272d;outline:none}
.referenceBadgeRemove{display:grid;place-items:center;width:15px;height:15px;border-radius:50%;color:#8f9ba7;font-size:13px;line-height:1}
.referenceBadge:hover .referenceBadgeRemove,.referenceBadge:focus-visible .referenceBadgeRemove{background:#3a1d22;color:#ffabb2}
.referenceDot{ width:8px; height:8px; border-radius:999px; background:var(--accent); }

.unitBar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 10px;
  margin-bottom:11px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#0d1115;
}
.unitBar > span { color:#aeb8c1; font-size:11px; }
.segmented.compact { width:138px; }

.frictionOnlyNote{padding:9px 10px;border:1px solid #51461e;border-radius:9px;background:#1b1910;display:flex;flex-direction:column;gap:2px}
.frictionOnlyNote b{color:var(--accent2);font-size:10px}
.frictionOnlyNote span{color:#9da7af;font-size:9px;line-height:1.4}
.expertDetails{grid-column:1/-1;margin-top:10px;border-top:1px dashed var(--line2);padding-top:8px}
.expertDetails summary{color:#7f8b95;font-size:10px;cursor:pointer}
.expertField{margin-top:10px}
.connectorExports .button{text-align:left}

.editModeBar { grid-template-columns:repeat(3,1fr); margin-bottom:10px; }
.seg.dangerSeg.active { background:#32191d; color:#ff9ea6; box-shadow:inset 0 0 0 1px #71323a; }

.addToolPanel {
  margin-top:8px;
  padding:9px;
  border:1px solid var(--line);
  background:#0d1115;
  border-radius:10px;
}
.addToolPanel.hidden { display:none; }
.toolLabel { display:block; color:#7e8a95; font-size:9px; text-transform:uppercase; letter-spacing:.1em; margin-bottom:7px; }
.addToolGrid { display:grid; grid-template-columns:1fr; gap:6px; }
.addTool {
  display:flex; flex-direction:column; gap:2px; align-items:flex-start;
  padding:8px 9px; border:1px solid var(--line2); border-radius:8px;
  background:#14191e; color:#cbd3da; cursor:pointer; text-align:left;
}
.addTool:hover { border-color:#58636d; background:#192027; }
.addTool.active { border-color:#6b5a20; background:#2a2513; color:#ffe177; }
.addTool b { font-size:11px; }
.addTool small { font-size:9px; color:#7e8a95; }
.addTool.active small { color:#b8a763; }

.modeHelp {
  margin-top:9px; padding:9px 10px; border-radius:9px;
  border:1px solid var(--line); background:#0e1216;
  display:flex; flex-direction:column; gap:3px;
}
.modeHelp b { font-size:10px; color:#d8dfe5; }
.modeHelp span { color:#84909a; font-size:9px; line-height:1.45; }

body.mode-add #viewport canvas { cursor:crosshair; }
body.mode-delete #viewport canvas { cursor:not-allowed; }

.viewportModeBadge {
  display:none!important;
}
.viewportModeBadge.add { color:#9fe2b3; border-color:#315f40; }
.viewportModeBadge.delete { color:#ff9da5; border-color:#6b3038; }

.connectorBomRow {
  grid-template-columns:40px minmax(0,1fr) auto;
}
.connectorPictogram {
  width:36px;
  height:36px;
  border:1px solid #39424b;
  background:#14191e;
  border-radius:8px;
  display:grid;
  place-items:center;
}
.connectorPictogram svg {
  width:31px;
  height:31px;
  overflow:visible;
}
.connectorPictogram line {
  stroke:var(--accent2);
  stroke-width:4.2;
  stroke-linecap:round;
}
.connectorPictogram circle {
  fill:var(--accent2);
}

/* v0.8 single-board tool */
.addToolGrid {
  grid-template-columns:1fr;
}
body.mode-add #viewport canvas {
  cursor:crosshair;
}

/* v0.8.2: connector BOM = minimal top-down socket silhouette */
.connectorPictogram svg {
  width:34px;
  height:34px;
}
.connectorPictogram .picBody line {
  stroke:var(--accent2);
  stroke-width:8;
  stroke-linecap:round;
}
.connectorPictogram .picCenter {
  fill:var(--accent2);
}
.connectorPictogram .picSlot line {
  stroke:#20262c;
  stroke-width:2.1;
  stroke-linecap:round;
  opacity:.95;
}


/* v0.9 unified Add UI */
.addToolGrid {
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (max-width:720px) {
  .addToolGrid { grid-template-columns:1fr; }
}

.editModeBar.twoModes { grid-template-columns:repeat(2,minmax(0,1fr)); }

/* v0.11 hardening + compact manufacturing */
.derivedAdvanced{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);display:grid;gap:8px}
.derivedAdvanced>div{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;color:var(--muted)}
.derivedAdvanced b{color:var(--text);font-size:11px}
.infoTip{display:inline-grid;place-items:center;width:15px;height:15px;margin-left:4px;border:1px solid var(--lineStrong);border-radius:50%;font-style:normal;font-size:9px;color:var(--accent2);cursor:help}
.manufacturingPartBtn{display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left}
.manufacturingPartBtn b{color:var(--accent2);font-size:11px;white-space:nowrap}


/* v0.12 interaction hardening */
.toggleField{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 9px;border:1px solid var(--line);border-radius:8px;background:#10151a}
.toggleField>span{display:flex;flex-direction:column;gap:2px}.toggleField b{font-size:10px;color:#d8dfe5}.toggleField small{font-size:8.5px;line-height:1.35;color:#788590}.toggleField input{accent-color:var(--accent2);width:16px;height:16px}
body.mode-neutral #viewport canvas{cursor:default}
.viewportHistory{position:absolute;z-index:7;left:14px;bottom:16px;display:flex;gap:6px}
.historyButton{border:1px solid rgba(255,255,255,.18);background:rgba(10,14,17,.88);backdrop-filter:blur(8px);color:#e7edf2;border-radius:9px;padding:7px 10px;font:inherit;font-size:11px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.historyButton span{font-size:9px;color:#aeb8c1;margin-left:3px}.historyButton:hover:not(:disabled){border-color:#65727e;background:#192127}.historyButton:disabled{opacity:.32;cursor:default}
.resetHistoryButton{color:#c2cbd2}
.candidateLabel{position:absolute;z-index:7;top:63px;left:50%;transform:translateX(-50%);padding:6px 9px;border-radius:8px;border:1px solid #315f40;background:rgba(10,20,14,.90);color:#a8efba;font-size:10px;pointer-events:none;backdrop-filter:blur(8px)}
.viewportFeedback{position:absolute;z-index:10;left:50%;bottom:18px;transform:translateX(-50%);max-width:70%;padding:8px 11px;border-radius:9px;border:1px solid #46515a;background:rgba(11,15,18,.94);color:#dfe6eb;font-size:10px;box-shadow:0 8px 24px rgba(0,0,0,.28);pointer-events:none}
.viewportFeedback.error{border-color:#7a343d;color:#ffb3ba;background:rgba(39,16,20,.95)}.viewportFeedback.warn{border-color:#806521;color:#ffe49a;background:rgba(40,33,12,.95)}
.contextPopover{position:absolute;z-index:12;width:180px;padding:7px;border:1px solid #44505a;border-radius:10px;background:rgba(12,16,20,.97);box-shadow:0 12px 30px rgba(0,0,0,.38);backdrop-filter:blur(10px)}
.contextTitle{padding:5px 7px 7px;color:#e3e9ee;font-size:10px;font-weight:700}.contextAction{display:block;width:100%;padding:8px 9px;margin-top:4px;border-radius:7px;border:1px solid #36414a;background:#161d23;color:#cdd6dd;text-align:left;font-size:10px;cursor:pointer}.contextAction:hover{background:#202a31;border-color:#5a6975}.contextAction.danger{color:#ffabb2}.contextAction.danger:hover{background:#32191d;border-color:#71323a}
.contextStatus{margin:3px 5px 5px;padding:7px 8px;border:1px solid #66572e;border-radius:7px;background:#211d11;color:#e6cd84;font-size:9px;line-height:1.4}
.confirmOverlay{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:rgba(5,8,10,.42);backdrop-filter:blur(2px)}
.confirmCard{width:min(390px,calc(100% - 36px));padding:17px;border-radius:13px;border:1px solid #46525c;background:#11171c;box-shadow:0 20px 60px rgba(0,0,0,.45)}.confirmEyebrow{font-size:8px;text-transform:uppercase;letter-spacing:.11em;color:var(--accent2);font-weight:700}.confirmCard h3{margin:6px 0 7px;font-size:15px}.confirmCard p{margin:0;color:#9ba7b0;font-size:10px;line-height:1.55}.confirmButtons{display:flex;justify-content:flex-end;gap:7px;margin-top:14px}
.hidden{display:none!important}

/* v0.16 quick-start help */
.helpButton{width:34px;height:34px;padding:0;border-radius:999px;font-weight:800;font-size:15px}
.quickHelpOverlay{
  position:fixed;inset:0;z-index:50;display:grid;place-items:center;
  background:rgba(5,8,11,.58);backdrop-filter:blur(5px);padding:20px;
}
.quickHelpOverlay.hidden{display:none}
.quickHelpCard{
  position:relative;width:min(430px,calc(100vw - 32px));
  border:1px solid #3b4650;border-radius:16px;background:#11171c;
  box-shadow:0 22px 70px rgba(0,0,0,.48);padding:22px;
}
.quickHelpCard h2{font-size:18px;margin:4px 30px 12px 0}
.quickHelpSteps{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.quickHelpSteps p{margin:0;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:#0c1115;color:#aeb8c1;font-size:11px;line-height:1.45}
.quickHelpSteps b{color:#e5ebef}
.quickHelpClose{position:absolute;right:12px;top:10px;border:0;background:transparent;color:#84919c;font-size:24px;line-height:1;cursor:pointer;padding:4px 7px}
.quickHelpClose:hover{color:#fff}

/* v0.18 streamlined controls */
.collapsible{padding:0}
.sectionSummary{
  list-style:none;cursor:pointer;padding:14px 16px;display:flex;align-items:center;
  justify-content:space-between;gap:12px;user-select:none
}
.sectionSummary::-webkit-details-marker{display:none}
.sectionSummary>span{display:flex;flex-direction:column;gap:2px}
.sectionSummary small{color:var(--accent);text-transform:uppercase;letter-spacing:.13em;font-size:9px;font-weight:800}
.sectionSummary b{font-size:13px;color:#e6ebef}
.sectionSummary::after{content:"+";color:#74818c;font-size:17px;font-weight:400}
.collapsible[open]>.sectionSummary::after{content:"−"}
.collapsible[open]>.sectionSummary{padding-bottom:10px}
.sectionBody{padding:0 16px 17px}
.shapeRow{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;
  padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#0d1115
}
.shapeRow>span{color:#aeb8c1;font-size:11px}
.shapeRow .segmented{width:150px}
.shapeRow .seg{padding-left:5px;padding-right:5px;font-size:10px;white-space:nowrap}
.supportLink{display:block;text-align:center;margin:0 0 9px;text-decoration:none;color:#b9c3cb}
.supportLink[aria-disabled="true"]{opacity:.58;cursor:default}

.focusBuildBar{
  display:none;position:absolute;z-index:18;left:50%;top:14px;transform:translateX(-50%);
  align-items:center;gap:5px;padding:6px;border:1px solid #3d4954;border-radius:11px;
  background:rgba(10,14,18,.94);box-shadow:0 10px 32px rgba(0,0,0,.35);backdrop-filter:blur(10px)
}
.focusDivider{width:1px;height:23px;background:#35404a;margin:0 2px}
.focusExit{color:#ffd96a}
body.focus-build #app{grid-template-rows:1fr}
body.focus-build .topbar,body.focus-build .leftPanel,body.focus-build .rightPanel{display:none}
body.focus-build .workspace{grid-template-columns:1fr}
body.focus-build .viewportToolbar{display:none}
body.focus-build .viewerBuildToolbar{display:none}
body.focus-build .focusBuildBar{display:flex}
body.focus-build .viewportModeBadge{top:61px}

@media (max-width:900px){
  .focusBuildBar{max-width:calc(100% - 20px);overflow:auto;justify-content:flex-start}
  .focusBuildBar .toolButton{white-space:nowrap}
}

/* Build actions live in the canvas; the left panel is configuration only. */
.buildSection{display:none}

@media (max-width:1050px){
  .viewerBuildToolbar{top:58px}
  .candidateLabel{top:106px}
}

@media (max-width:760px){
  .viewerBuildToolbar{max-width:calc(100% - 18px)}
  .viewerBuildButton{padding:8px 10px}
}