: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; }
.srOnly {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
#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; color:inherit; text-decoration:none; }
.brandMark {
  width:36px; height:36px; display:block; object-fit:contain; flex:none;
}
.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; }
.exportAction{position:relative;display:flex;align-items:center}
.exportProgress{
  position:absolute;z-index:95;right:0;top:calc(100% + 10px);width:330px;max-width:calc(100vw - 24px);
  padding:10px 12px;border:1px solid #806521;border-radius:10px;background:rgba(40,33,12,.98);
  color:#ffe49a;font-size:10px;line-height:1.45;box-shadow:0 12px 34px rgba(0,0,0,.38);white-space:pre-line
}
.exportProgress::before{
  content:"";position:absolute;right:22px;top:-6px;width:10px;height:10px;transform:rotate(45deg);
  border-left:1px solid #806521;border-top:1px solid #806521;background:rgba(40,33,12,.98)
}
.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-y:auto; overflow-x:hidden; min-width:0; min-height:0; overscroll-behavior-x:none; }
.leftPanel { border-right:1px solid var(--line); }
.rightPanel { border-left:1px solid var(--line); }
.leftPanel>*,.rightPanel>* { max-width:100%; }
.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:#d7ffe1; border-color:#57c87a; background:#173d27;
  box-shadow:inset 0 0 0 1px rgba(99,202,128,.18),0 0 0 2px rgba(87,200,122,.13);
}
.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:#ff43dc;background:#271326;box-shadow:inset 3px 0 0 #ff43dc,0 0 0 1px rgba(255,67,220,.16),0 0 20px rgba(255,67,220,.12)}
.bomInteractiveRow.active .bomTitle{color:#ffd8f7}
.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; }
  .topActions>.helpButton { display:grid; }
  .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; }
}

.builderFileMenu{display:block;position:relative}
.builderFileMenu summary{list-style:none;border:1px solid var(--line2);background:transparent;padding:8px 10px;border-radius:9px;cursor:pointer;font-size:12px}
.builderFileMenu summary::-webkit-details-marker{display:none}
.shareToolbarButton{border-color:rgba(240,166,43,.55)!important;background:rgba(240,166,43,.10)!important;color:#ffd06a!important;box-shadow:0 0 0 2px rgba(240,166,43,.06)}.shareToolbarButton:hover{border-color:var(--accent)!important;background:rgba(240,166,43,.17)!important}
.builderFileMenu[open] summary{border-color:#6c6031;color:var(--accent2)}
.builderFileMenuPanel{position:absolute;z-index:90;right:0;top:calc(100% + 9px);width:210px;padding:7px;display:flex;flex-direction:column;gap:5px;border:1px solid var(--lineStrong);border-radius:11px;background:#10161b;box-shadow:0 18px 44px rgba(0,0,0,.42)}
.builderFileMenuPanel .button{display:flex!important;width:100%;justify-content:flex-start;text-align:left;background:transparent}
.webglFallback{position:absolute;inset:0;margin:auto;width:min(390px,calc(100% - 32px));height:max-content;text-align:center;padding:28px;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:rgba(14,18,22,.86);box-shadow:0 18px 50px rgba(0,0,0,.28);backdrop-filter:blur(10px)}
.webglFallback h2{font-size:18px;margin:0 0 8px}.webglFallback p{color:#a9b4bc;font-size:12px;line-height:1.55;max-width:330px;margin:auto}
body.builderUnavailable .viewerBuildToolbar,body.builderUnavailable .viewportHistory,body.builderUnavailable .viewportInfo,body.builderUnavailable #cameraNav{display:none!important}
body.builderUnavailable .fileButton{opacity:.38;pointer-events:none}
@media (max-width:760px){
  .topActions{gap:6px}
  .topActions #exportZipBtn{font-size:0;padding:9px 11px}
  .topActions #exportZipBtn::after{content:"Export";font-size:12px}
  .exportProgress{position:fixed;right:10px;top:70px;width:min(330px,calc(100vw - 20px))}
  .exportProgress::before{display:none}
}
@media (max-width:430px){
  .topbar{padding:0 10px}
  .brandTitle{font-size:13px}
  .brandMark{width:31px!important;height:31px!important}
}
@media (max-width:380px){.brand>div:nth-child(2){display:none}}

.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}
.optionalFeatureField{padding:8px;border:1px solid rgba(97,196,154,.20);border-radius:9px;background:rgba(97,196,154,.045)}
.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 {
  position:absolute;z-index:8;top:66px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;min-height:28px;padding:0 11px;border:1px solid #3d4a54;
  border-radius:999px;background:rgba(10,14,18,.86);font-size:9px;font-weight:750;
  letter-spacing:.025em;pointer-events:none;box-shadow:0 8px 22px rgba(0,0,0,.24)
}
.viewportModeBadge.hidden{display:none}.viewportModeBadge.add { color:#c7f7d3; border-color:#43855a;background:rgba(17,52,31,.92) }
.viewportModeBadge.delete { color:#ff9da5; border-color:#6b3038; }
body.mode-add .viewerBuildToolbar{border-color:rgba(87,200,122,.72);box-shadow:0 10px 30px rgba(0,0,0,.28),0 0 0 2px rgba(87,200,122,.10)}
body.mode-delete .viewerBuildToolbar{border-color:rgba(240,113,120,.70);box-shadow:0 10px 30px rgba(0,0,0,.28),0 0 0 2px rgba(240,113,120,.10)}

.connectorBomRow {
  grid-template-columns:54px minmax(0,1fr) auto;
}
.partArtwork {
  display:grid;place-items:center;flex:none;width:52px;height:44px;
  border-radius:7px;background:transparent;color:#e6a536;overflow:hidden;
}
.partArtwork img {display:block;width:100%;height:100%;object-fit:contain;}
.fastenerBoardIcon:has(.partArtwork) {border:0;background:none;}
.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}
.quickHelpBackdrop{position:absolute;inset:0;border:0;background:transparent;cursor:pointer}
.quickHelpCard{
  position:relative;z-index:1;width:min(430px,calc(100vw - 32px));
  max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;
  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}
.quickHelpLead{margin:0 0 14px;color:#b5c0c7;font-size:11px;line-height:1.55}
.builderDeviceNotice{display:none;margin:0 0 12px;padding:10px 11px;border:1px solid #6f5d27;border-radius:9px;background:#211d10;color:#d9c987;font-size:10px;line-height:1.45}.builderDeviceNotice b{color:#ffe28a}.builderDeviceNotice span{display:block;margin-top:2px}
.quickHelpGuideLink{margin-top:12px!important;padding:0!important;border:0!important;background:transparent!important}.quickHelpGuideLink a{display:block;padding:10px 12px;border:1px solid #3d4a54;border-radius:9px;color:#f2c94c!important;font-weight:750;text-align:center;text-decoration:none}.quickHelpGuideLink a:hover{border-color:#75642d;background:#1e1b10}
.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}
.quickHelpActions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.quickHelpActions .button{display:flex;align-items:center;justify-content:center;min-height:39px;text-align:center;text-decoration:none}.quickHelpActions .primary{grid-column:1/-1}.quickHelpActions .ghost{color:#d9e1e5;border-color:#3d4a54;background:#11181d}.quickHelpActions .ghost:hover{border-color:#75642d;background:#1e1b10;color:#fff}
.quickHelpSupport{display:grid;justify-items:center;gap:9px;margin:0 0 9px;padding:13px 14px;border:1px solid rgba(242,201,76,.22);border-radius:10px;background:linear-gradient(180deg,rgba(242,201,76,.06),rgba(242,201,76,.025));text-align:center}.quickHelpSupport span{color:#b5bec5;font-size:10px;line-height:1.45}.quickHelpSupport .button{display:flex;align-items:center;justify-content:center;width:100%;min-height:38px;color:#f2c94c;border-color:#64592f;background:#1c1a10;text-align:center;font-weight:750;text-decoration:none}.quickHelpSupport .button:hover{border-color:#8d7b36;background:#27220f}
.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}
@media(max-width:520px),(max-height:650px){
  .quickHelpOverlay{padding:10px}
  .quickHelpCard{width:min(430px,calc(100vw - 20px));max-height:calc(100dvh - 20px);padding:17px;border-radius:13px}
  .quickHelpCard h2{font-size:17px;margin:3px 28px 8px 0}
  .quickHelpLead{margin-bottom:10px;font-size:10.5px;line-height:1.45}
  .quickHelpSteps{gap:6px;margin-bottom:10px}
  .quickHelpSteps p{padding:7px 9px;font-size:10px;line-height:1.35}
  .quickHelpGuideLink{margin-top:9px!important}.quickHelpGuideLink a{padding:8px 10px}
  .quickHelpSupport{gap:6px;padding:9px 11px}.quickHelpSupport .button{min-height:34px}
  .quickHelpActions .button{min-height:34px;padding-block:7px}
}
@media(max-width:1050px),(hover:none) and (pointer:coarse){.builderDeviceNotice{display:block}}

/* Paused, annotated Builder map opened by the ? button. */
.quickHelpOverlay.helpAnnotationOverlay{display:block;padding:0;background:rgba(5,8,11,.56);backdrop-filter:blur(2px);cursor:default}
.helpAnnotationOverlay>.quickHelpCard{display:none}
#helpAnnotationLayer{position:fixed;inset:0;z-index:70;pointer-events:none}
.helpAnnotationHeader{
  position:fixed;z-index:76;left:50%;top:13px;transform:translateX(-50%);width:min(520px,calc(100vw - 28px));
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px 10px 15px;
  border:1px solid #69757e;border-radius:12px;background:rgba(15,21,26,.98);box-shadow:0 14px 40px rgba(0,0,0,.42);pointer-events:auto
}
.helpAnnotationHeader>div{display:flex;align-items:center;gap:10px}.helpAnnotationHeader b{font-size:12px}.helpAnnotationHeader span{color:#93a0aa;font-size:9px}
.helpAnnotationHeader a{color:var(--accent2);font-size:10px;font-weight:750;text-decoration:none}.helpAnnotationHeader a:hover{text-decoration:underline}
.helpAnnotationHeader button{width:28px;height:28px;padding:0;border:0;background:transparent;color:#b8c2ca;font-size:22px;cursor:pointer}.helpAnnotationHeader button:hover{color:#fff}
.helpAnnotationOutline{
  position:fixed;z-index:71;border:2px solid var(--accent2);border-radius:11px;
  box-shadow:0 0 0 4px rgba(242,201,76,.12),0 0 24px rgba(242,201,76,.28);pointer-events:none;transition:box-shadow .12s,border-color .12s
}
.helpAnnotationOutline.active{border-color:#fff27a;box-shadow:0 0 0 5px rgba(255,242,122,.20),0 0 34px rgba(255,242,122,.55)}
.helpAnnotationFrame{
  position:fixed;z-index:74;width:225px;padding:11px 13px;border:1px solid #6c7780;border-left:3px solid var(--accent2);border-radius:10px;
  background:rgba(15,21,26,.98);box-shadow:0 12px 34px rgba(0,0,0,.46);pointer-events:auto
}
.helpAnnotationFrame b{display:block;color:#f0f4f6;font-size:11px;margin-bottom:4px}.helpAnnotationFrame p{margin:0;color:#aeb9c1;font-size:9.5px;line-height:1.42}
#helpAnnotationLines{position:fixed;inset:0;width:100vw;height:100vh;z-index:72;overflow:visible;pointer-events:none}
#helpAnnotationLines line{stroke:#f2c94c;stroke-width:1.6;opacity:.78}#helpAnnotationLines line.active{stroke:#fff27a;stroke-width:2.4;opacity:1}
#helpAnnotationLines marker path{fill:#f2c94c}
.builderHelpActive{overflow:hidden}
@media(max-width:900px){
  .helpAnnotationHeader{top:8px}.helpAnnotationHeader span{display:none}
  #helpAnnotationLayer{display:flex;flex-direction:column;gap:8px;overflow:auto;padding:68px 14px 18px;background:rgba(5,8,11,.72);pointer-events:auto}
  .helpAnnotationFrame{position:relative!important;left:auto!important;top:auto!important;width:auto;flex:0 0 auto}
  .helpAnnotationOutline,#helpAnnotationLines{display:none}
}

/* 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}
.exportSupportOpen{overflow:hidden}
.exportSupportPrompt{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px;background:rgba(5,8,11,.76);backdrop-filter:blur(8px)}
.exportSupportCard{position:relative;width:min(100%,420px);padding:34px;border:1px solid rgba(240,166,43,.36);border-radius:20px;background:linear-gradient(145deg,#172028,#10161b);box-shadow:0 28px 90px rgba(0,0,0,.58),0 0 45px rgba(240,166,43,.08);text-align:center}
.exportSupportMark{display:block;width:54px;height:54px;margin:0 auto 16px}
.exportSupportCard .sectionEyebrow{margin-bottom:8px;color:var(--accent2)}
.exportSupportCard h2{margin:0;color:#f4f7f8;font-size:26px;letter-spacing:-.035em}
.exportSupportCard p{max-width:350px;margin:12px auto;color:#aab5bc;font-size:13px;line-height:1.55}
.exportSupportCard .exportSupportLead{color:#d0d7db}
.exportSupportProgress{display:flex;align-items:center;justify-content:center;gap:9px;min-height:42px;margin:18px 0;padding:10px 13px;border:1px solid rgba(240,166,43,.22);border-radius:11px;background:rgba(240,166,43,.07);color:#f4cb82;font-size:11px;font-weight:700}
.exportSupportSpinner{width:15px;height:15px;flex:0 0 15px;border:2px solid rgba(240,166,43,.25);border-top-color:#f0a62b;border-radius:50%;animation:spin .8s linear infinite}
.exportSupportProgress.complete{border-color:rgba(91,203,142,.26);background:rgba(91,203,142,.07);color:#9fe0bd}
.exportSupportProgress.complete .exportSupportSpinner{border:0;animation:none}.exportSupportProgress.complete .exportSupportSpinner::before{content:"✓";display:block;color:#74d39f;font-size:16px;line-height:15px}
.exportSupportCard .exportSupportAsk{margin:17px auto 22px;color:#929fa7;font-size:12px}
.exportSupportActions{display:flex;justify-content:center;gap:9px;flex-wrap:wrap}
.exportSupportActions .button{min-width:142px}
.exportSupportClose{position:absolute;right:13px;top:12px;width:34px;height:34px;padding:0;border:0;background:transparent;color:#87939b;font-size:24px;cursor:pointer}
.exportSupportClose:hover{color:#fff}
@media(max-width:520px){.exportSupportCard{padding:28px 20px 22px}.exportSupportCard h2{font-size:23px}.exportSupportActions{display:grid}.exportSupportActions .button{width:100%}}

.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}
}