:root {
  font-family: "DM Sans", "Segoe UI", sans-serif;
  color: #e8ebed;
  background: #111417;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --bg: #111417;
  --panel: #181c20;
  --panel-raised: #1d2227;
  --line: #2c3238;
  --line-soft: #242a30;
  --text: #e8ebed;
  --muted: #849098;
  --subtle: #5c686f;
  --mint: #62c6a6;
  --mint-dark: #193d35;
  --danger: #e47a7a;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; width: 100%; height: 100vh; overflow: hidden; background: var(--bg); }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.topbar {
  height: 66px; display: flex; align-items: center; gap: 18px;
  padding: 0 23px; background: #15191c; border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text); }
.brand-mark {
  display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px;
  color: #10251e; background: var(--mint); font: 700 17px "Space Grotesk", sans-serif;
}
.brand-name { font: 600 16px "Space Grotesk", sans-serif; letter-spacing: -.5px; }
.brand-name span { color: var(--mint); font-weight: 500; }
.header-divider { height: 25px; width: 1px; background: var(--line); }
.project-name-wrap { min-width: 100px; }
.project-name-wrap input {
  width: 240px; padding: 7px 8px; border: 1px solid transparent; border-radius: 6px;
  color: #cdd3d6; background: transparent; font-size: 13px;
}
.project-name-wrap input:hover, .project-name-wrap input:focus { border-color: var(--line); background: #1b2024; outline: none; }
.save-status { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }
.header-actions { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.button {
  height: 35px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 13px; border: 1px solid var(--line); border-radius: 7px;
  color: #c2c9cd; background: #1b2024; cursor: pointer; font-size: 12px; font-weight: 600;
  transition: background .15s, border-color .15s, transform .15s;
}
.button:hover { border-color: #4a565d; background: #22282d; }
.button:active { transform: translateY(1px); }
.button-primary { border-color: var(--mint); color: #10251e; background: var(--mint); }
.button-primary:hover { border-color: #7cd4b8; background: #7cd4b8; }
.button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.workspace {
  height: calc(100vh - 66px); display: grid;
  grid-template-columns: 54px minmax(280px, 1fr) 298px;
  grid-template-rows: 86px minmax(0, 1fr);
}
.command-bar {
  grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; gap: 10px; min-width: 0;
  position: relative; z-index: 5; overflow-x: auto; overflow-y: hidden; padding: 0 15px;
  border-bottom: 1px solid #30363a; background: #202427; scrollbar-width: thin;
}
.command-group, .command-divider, .command-icon, .command-button, .tool-menu, .command-tip { flex-shrink: 0; }
.command-button {
  height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px;
  border: 1px solid transparent; border-radius: 6px; color: #bbc3c5; background: transparent;
  cursor: pointer; font-size: 11px; font-weight: 600;
}
.command-button:hover, .command-button.command-active { border-color: #526159; color: #e5eeea; background: #303936; }
.command-button svg, .command-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.command-button.command-active svg { color: var(--mint); }
.command-divider { width: 1px; height: 25px; flex: none; background: #3a4144; }
.command-group { display: flex; align-items: center; gap: 3px; }
.command-label { margin: 0 5px 0 1px; color: #727e82; font: 700 8px "Segoe UI", sans-serif; letter-spacing: .65px; }
.command-icon {
  width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid transparent;
  border-radius: 5px; color: #9ba5a7; background: transparent; cursor: pointer;
}
.command-icon:hover:not(:disabled) { border-color: #46534f; color: var(--mint); background: #29332f; }
.command-icon:disabled { color: #566064; cursor: default; opacity: .55; }
.command-icon.active { color: var(--mint); border-color: #466354; background: #29332f; }
.command-icon:disabled { color: #566064; cursor: default; opacity: .55; }
.tool-icons { --tool-icon-color: #76caff; }
.clipboard-tools { --tool-icon-color: #72d5b2; }
.edit-tools { --tool-icon-color: #ff8a80; }
.transform-tools { --tool-icon-color: #ffc66d; }
.scene-tools { --tool-icon-color: #68d9ea; }
.view-tools { --tool-icon-color: #b9a3ff; }
.tool-icons .command-icon:not(:disabled) { color: var(--tool-icon-color); }
.tool-icons .command-icon.active { border-color: color-mix(in srgb, var(--tool-icon-color), transparent 55%); background: color-mix(in srgb, var(--tool-icon-color), transparent 88%); }
.tool-icons .command-icon.active:not(:disabled) { color: var(--tool-icon-color); }
.tool-icons .command-icon:disabled { color: #566064; }
.tool-menu { position: relative; flex: none; }
.tool-menu summary {
  display: inline-flex; align-items: center; gap: 5px; padding: 7px 9px; border: 1px solid transparent; border-radius: 5px; color: var(--tool-icon-color, #aab4b6);
  cursor: pointer; font-size: 10px; list-style: none; white-space: nowrap;
}
.tool-menu summary svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.combine-menu { --tool-icon-color: #c2a0ff; }
.modify-menu { --tool-icon-color: #ff9f70; }
.arrange-menu { --tool-icon-color: #7fceff; }
.manage-menu { --tool-icon-color: #f4c76b; }
.tool-menu summary::-webkit-details-marker { display: none; }
.tool-menu[open] summary, .tool-menu summary:hover { border-color: #46534f; color: var(--mint); background: #29332f; }
.tool-menu-panel {
  position: fixed; z-index: 8; display: flex; flex-direction: column;
  min-width: 210px; padding: 5px; border: 1px solid #41494c; border-radius: 6px;
  background: #252b2e; box-shadow: 0 12px 28px #0009;
}
.tool-menu-panel button, .tool-menu-field {
  min-height: 32px; display: flex; align-items: center; gap: 8px; padding: 7px 9px;
  border: 0; border-radius: 4px; color: #cbd2d3; background: transparent; cursor: pointer;
  text-align: left; font-size: 10px; white-space: nowrap;
}
.tool-menu-panel button:hover { color: #eff6f2; background: #35413d; }
.tool-menu-field { justify-content: space-between; color: #95a1a2; }
.tool-menu-field select { border: 1px solid #41494c; border-radius: 4px; color: #e4e8e8; background: #1d2225; }
.command-spacer { flex: 1; }
.command-tip { color: #7c888b; font-size: 9px; white-space: nowrap; }
.command-tip span { padding: 0 4px; color: #4b565a; }
.command-tip kbd { padding: 2px 4px; font-size: 8px; }
.tool-rail {
  grid-column: 1; grid-row: 2;
  display: flex; flex-direction: column; align-items: center; padding: 20px 9px 15px;
  background: #202427; border-right: 1px solid #30363a;
}
.view-cube {
  width: 37px; display: flex; flex-direction: column; gap: 3px; padding: 7px 2px;
  border: 1px solid #444b4e; border-radius: 4px; color: #aeb6b8; background: #292e31;
  cursor: pointer; font-size: 7px; letter-spacing: .35px;
}
.view-cube:hover { color: var(--mint); border-color: #58776c; }
.rail-separator { width: 27px; height: 1px; margin: 12px 0 7px; background: #3a4144; }
.rail-button {
  width: 34px; height: 34px; display: grid; place-items: center; margin: 2px 0;
  border: 1px solid transparent; border-radius: 6px; color: #9ba5a7; background: transparent; cursor: pointer;
}
.rail-button:hover { color: var(--mint); border-color: #46534f; background: #29332f; }
.rail-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.viewport-column { grid-column: 2; grid-row: 2; min-width: 0; min-height: 0; padding: 12px; background: #1b1f22; }
.viewport {
  position: relative; width: 100%; height: 100%; overflow: hidden; border: 1px solid #252c30;
  border-radius: 5px; background-color: #202326;
}
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#scene.dragging { cursor: grabbing; }
#scene.moving-object { cursor: move; }
.dimension-lines, .dimension-labels { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.dimension-lines { z-index: 1; }
.dimension-lines[hidden], .dimension-labels[hidden], .dimension-line[hidden], .dimension-label[hidden] { display: none; }
.dimension-line { fill: none; stroke: #e4e9e9; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: .9; }
.dimension-line-x { stroke: #76c7eb; }
.dimension-line-internal { stroke: #e18b40; stroke-dasharray: 4 3; }
.dimension-labels { z-index: 2; }
.dimension-label {
  position: absolute; min-width: 39px; padding: 3px 5px; transform: translate(-50%, -50%);
  border: 1px solid #cbd1d2; border-radius: 2px; color: #343b3e; background: #f0f2f2;
  box-shadow: 0 1px 4px #0006; text-align: center; font: 500 10px "DM Sans", "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dimension-label-x { border-color: #76c7eb; color: #163b4b; }
.dimension-label-internal { border-color: #e18b40; color: #62401f; }
.viewport-topline { position: absolute; top: 17px; left: 18px; right: 17px; z-index: 1; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.view-badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid #2b3338;
  border-radius: 5px; color: #859398; background: rgba(24, 29, 32, .85); font: 600 9px "Space Grotesk", sans-serif; letter-spacing: .65px;
}
.view-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }
.view-separator { color: #515d61; }
.view-control { display: inline-flex; align-items: center; gap: 6px; pointer-events: auto; padding: 7px 9px; border: 1px solid #2b3338; border-radius: 5px; color: #929da1; background: rgba(24, 29, 32, .85); cursor: pointer; font-size: 10px; }
.view-control:hover { color: var(--text); border-color: #53615f; }
.view-control svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.viewport-help { position: absolute; bottom: 15px; left: 50%; z-index: 1; display: flex; transform: translateX(-50%); gap: 17px; color: #758187; pointer-events: none; font-size: 9px; white-space: nowrap; }
kbd { padding: 3px 5px; border: 1px solid #364047; border-radius: 4px; color: #a3adb0; background: #20272b; font: inherit; }
.empty-hint { position: absolute; top: 50%; left: 50%; display: flex; flex-direction: column; align-items: center; gap: 9px; transform: translate(-50%, -50%); color: #818d91; text-align: center; pointer-events: none; font-size: 11px; }
.empty-hint[hidden] { display: none; }
.empty-hint strong { color: #c2cacb; font: 600 14px "Space Grotesk", sans-serif; }
.empty-icon { color: var(--mint); font-size: 28px; }
.shape-library {
  position: absolute; top: 51px; left: 16px; z-index: 4; width: min(492px, calc(100% - 32px));
  max-height: calc(100% - 100px); overflow: auto; padding: 13px;
  border: 1px solid #4a5052; border-radius: 5px; color: #e3e6e6; background: #292c2e;
  box-shadow: 0 14px 38px #0008;
}
.shape-library[hidden] { display: none; }
.shape-library-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.shape-library-header p { margin: 0 0 3px; color: #8b9698; font: 700 8px "Segoe UI", sans-serif; letter-spacing: 1px; }
.shape-library-header h2 { margin: 0; font-size: 13px; font-weight: 600; }
.library-close { width: 27px; height: 27px; border: 0; border-radius: 4px; color: #adb5b6; background: transparent; cursor: pointer; font-size: 21px; line-height: 1; }
.library-close:hover { color: white; background: #3b4144; }
.shape-group + .shape-group { margin-top: 15px; }
.shape-category { display: flex; align-items: center; gap: 6px; margin: 0 0 7px; color: #c9d1d3; font: 700 9px "Segoe UI", sans-serif; letter-spacing: .6px; text-transform: uppercase; }
.shape-category small { margin-left: auto; color: #7d8789; font-size: 9px; letter-spacing: 0; }
.shape-category-dot { width: 9px; height: 9px; border-radius: 3px; background: var(--cat, #62c6a6); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat, #62c6a6) 22%, transparent); }
.shape-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.shape-tile {
  min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 5px; padding: 5px 5px 7px;
  border: 1px solid color-mix(in srgb, var(--cat, #62c6a6) 30%, #3d4244); border-radius: 8px; color: #d3d9da;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cat, #62c6a6) 9%, #2d3133), #2b2f31);
  cursor: pointer; text-align: center; font-size: 9.5px; font-weight: 600; line-height: 1.2;
  transition: border-color .12s, transform .12s, box-shadow .12s;
}
.shape-tile:hover { border-color: var(--cat, #62c6a6); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px #0006, 0 0 0 1px color-mix(in srgb, var(--cat, #62c6a6) 45%, transparent); }
.shape-tile:focus-visible { outline: 2px solid var(--cat, #62c6a6); outline-offset: 1px; }
.shape-frame {
  position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; width: 100%;
  border: 1px solid color-mix(in srgb, var(--cat, #62c6a6) 45%, #444a4d); border-radius: 6px;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--cat, #62c6a6) 22%, #3a4043) 0%, #23272a 78%);
  overflow: hidden;
}
.shape-frame::after { position: absolute; left: 0; right: 0; top: 0; height: 3px; content: ""; background: var(--cat, #62c6a6); opacity: .85; }
.shape-thumb { width: 92%; height: 92%; background-repeat: no-repeat; filter: drop-shadow(0 3px 3px #0007); }
.shape-frame .shape-preview { width: 46%; height: 46%; }
.shape-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; }
.shape-preview { position: relative; width: 27px; height: 27px; flex: none; filter: drop-shadow(1px 2px 1px #0008); }
.shape-preview::before { position: absolute; inset: 4px; display: block; content: ""; background: linear-gradient(145deg, #f1f3f3, #aeb5b7); }
.preview-box::before { clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.preview-rounded::before { border-radius: 5px; transform: rotate(-12deg); }
.preview-cylinder::before { border-radius: 45% / 16%; }
.preview-capsule::before { border-radius: 50%; }
.preview-sphere::before { border-radius: 50%; background: radial-gradient(circle at 34% 28%, #fff, #bbc2c3 69%); }
.preview-prism::before { clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); }
.preview-cone::before { clip-path: polygon(50% 0,100% 85%,50% 100%,0 85%); }
.preview-pyramid::before { clip-path: polygon(50% 0,100% 75%,50% 100%,0 75%); }
.preview-torus::before { inset: 5px; border: 5px solid #d9dede; border-radius: 50%; background: transparent; }
.preview-wedge::before { clip-path: polygon(0 85%, 100% 85%, 100% 15%); }
.preview-tube::before { inset: 3px 7px; border: 5px solid #d9dede; border-radius: 40%; background: #4c5254; }
.preview-gear::before { clip-path: polygon(38% 0,62% 0,66% 14%,80% 8%,90% 20%,84% 34%,100% 40%,100% 62%,86% 67%,92% 82%,78% 94%,64% 86%,60% 100%,38% 100%,34% 86%,20% 92%,8% 78%,14% 64%,0 60%,0 38%,14% 34%,8% 20%,22% 8%,36% 14%); }
.preview-spring::before { inset: 5px 4px; border: 3px dashed #d9dede; border-radius: 45%; background: transparent; }
.preview-star::before { clip-path: polygon(50% 0,62% 36%,100% 38%,70% 59%,81% 100%,50% 75%,19% 100%,30% 59%,0 38%,38% 36%); }
.preview-heart::before { clip-path: polygon(50% 90%,6% 45%,7% 22%,25% 10%,50% 31%,75% 10%,93% 22%,94% 45%); }
.preview-crescent::before { clip-path: polygon(100% 4%,76% 7%,54% 20%,42% 43%,45% 65%,61% 85%,83% 96%,58% 96%,35% 86%,18% 68%,12% 45%,20% 25%,38% 9%,63% 2%); }
.preview-loft::before { clip-path: polygon(22% 0,78% 0,100% 100%,0 100%); }
.preview-text::before { content: "3D"; display: grid; place-items: center; clip-path: none; color: #555c5e; font: 700 12px Arial, sans-serif; }
.preview-gridfinity::before { clip-path: polygon(0 18%,18% 18%,18% 0,82% 0,82% 18%,100% 18%,100% 100%,0 100%); }
.preview-knurl::before { background: repeating-linear-gradient(45deg, #edf0f0 0 2px, #aeb5b7 2px 4px); }
.preview-hinge::before { border-radius: 6px; background: repeating-linear-gradient(90deg, #eff1f1 0 5px, #747c7e 5px 7px); }
.preview-dovetail::before { clip-path: polygon(15% 5%,85% 5%,100% 100%,0 100%); }
.preview-thread::before { inset: 3px 7px; border: 1px solid #d9dede; border-radius: 2px 2px 5px 5px; background: repeating-linear-gradient(135deg, #e8ebeb 0 2px, #969e9f 2px 4px); }
.preview-capsule::before { inset: 3px 7px; border-radius: 50% / 28%; background: linear-gradient(90deg, #adb5b7, #f1f3f3 48%, #aeb5b7); }
.preview-ellipsoid::before { inset: 5px 3px; border-radius: 50%; transform: scaleY(.72); background: radial-gradient(ellipse at 35% 28%, #fff, #bbc2c3 70%); }
.preview-roof::before { clip-path: polygon(0 100%,0 58%,8% 38%,25% 20%,50% 10%,75% 20%,92% 38%,100% 58%,100% 100%); }
.preview-hemisphere::before { clip-path: polygon(0 100%,0 50%,4% 32%,15% 15%,32% 4%,50% 0,68% 4%,85% 15%,96% 32%,100% 50%,100% 100%); background: radial-gradient(ellipse at 35% 24%, #fff, #bbc2c3 72%); }
.preview-diamond::before { inset: 2px 4px; clip-path: polygon(50% 0,93% 30%,50% 100%,7% 30%); background: linear-gradient(135deg, #f4f5f5 0 24%, #bfc6c7 25% 49%, #eef0f0 50% 74%, #aab2b4 75%); }
.preview-diamond::after { position: absolute; inset: 2px 4px; content: ""; clip-path: polygon(7% 30%,93% 30%,50% 100%,47% 30%,50% 0,53% 30%); background: linear-gradient(90deg, #ffffff88, transparent 45%, #59626544 46%, transparent 52%); }
.preview-bent-tube::before { inset: 4px 5px; border: 4px solid #d9dede; border-top-color: transparent; border-right-color: transparent; border-radius: 45%; background: transparent; transform: rotate(-35deg); }
.preview-counterbore::before { inset: 3px 7px; border: 4px solid #d9dede; border-top-width: 7px; border-radius: 40%; background: #4c5254; }
.preview-countersink::before { clip-path: polygon(10% 15%,90% 15%,66% 48%,66% 100%,34% 100%,34% 48%); background: linear-gradient(145deg, #f1f3f3, #aeb5b7); }
.preview-double-countersink::before { clip-path: polygon(10% 0,90% 0,66% 30%,66% 70%,90% 100%,10% 100%,34% 70%,34% 30%); }
.preview-teardrop::before { inset: 3px 7px; border: 3px solid #d9dede; border-radius: 50% 50% 50% 0; background: #4c5254; transform: rotate(-45deg); }
.preview-washer::before { inset: 3px; border: 6px solid #d9dede; border-radius: 50%; background: #4c5254; box-shadow: inset 0 0 0 2px #4c5254; }
.preview-nut-hex::before, .preview-nut-lock::before, .preview-nut-flange::before { clip-path: polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%); background: linear-gradient(145deg, #f1f3f3, #9ca5a7); }
.preview-nut-square::before { inset: 4px; background: linear-gradient(145deg, #f1f3f3, #9ca5a7); }
.preview-nut-wing::before { inset: 3px; clip-path: polygon(0 18%,42% 18%,50% 35%,58% 18%,100% 18%,100% 82%,58% 82%,50% 65%,42% 82%,0 82%); background: linear-gradient(145deg, #f1f3f3, #9ca5a7); }
.preview-nut-hex::after, .preview-nut-square::after, .preview-nut-lock::after, .preview-nut-flange::after, .preview-nut-wing::after { position: absolute; inset: 10px; border-radius: 50%; content: ""; background: #454c4e; box-shadow: 0 0 0 2px #d9dede; }
.preview-nut-flange::before { box-shadow: 0 5px 0 2px #aeb5b7; }
.preview-nut-lock::after { background: #454c4e; box-shadow: 0 0 0 2px #d9dede, 0 0 0 4px #729b91; }
.preview-screw-socket::before, .preview-screw-hex::before, .preview-screw-pan::before, .preview-screw-phillips::before, .preview-screw-torx::before, .preview-screw-countersunk::before { position: absolute; inset: 5px 10px 2px; border-radius: 2px 2px 5px 5px; content: ""; background: repeating-linear-gradient(135deg, #e8ebeb 0 2px, #969e9f 2px 4px); }
.preview-screw-socket::after, .preview-screw-hex::after, .preview-screw-pan::after, .preview-screw-phillips::after, .preview-screw-torx::after, .preview-screw-countersunk::after { position: absolute; top: 2px; left: 6px; width: 15px; height: 7px; border-radius: 3px 3px 1px 1px; content: ""; background: linear-gradient(145deg, #f1f3f3, #9ca5a7); }
.preview-screw-hex::after { clip-path: polygon(22% 0,78% 0,100% 50%,78% 100%,22% 100%,0 50%); border-radius: 0; }
.preview-screw-pan::after { border-radius: 50% 50% 3px 3px; }
.preview-screw-countersunk::after { top: 3px; left: 7px; width: 13px; height: 5px; clip-path: polygon(0 0,100% 0,75% 100%,25% 100%); }
.preview-screw-phillips::after { background: linear-gradient(145deg, #f1f3f3, #9ca5a7); box-shadow: inset 0 0 0 2px #9ca5a7; }
.preview-screw-torx::after { background: linear-gradient(145deg, #f1f3f3, #9ca5a7); box-shadow: inset 0 0 0 2px #9ca5a7; clip-path: polygon(50% 0,62% 35%,95% 25%,75% 50%,95% 75%,62% 65%,50% 100%,38% 65%,5% 75%,25% 50%,5% 25%,38% 35%); }
.preview-tag::before, .preview-tag-star::before { clip-path: polygon(12% 12%,68% 12%,98% 50%,68% 88%,12% 88%); }
.preview-tag::after, .preview-tag-star::after { position: absolute; top: 11px; left: 7px; width: 4px; height: 4px; border-radius: 50%; content: ""; background: #4c5254; }
.preview-tag-star::before { background: linear-gradient(145deg, #f1f3f3, #9ca5a7); }
.preview-tag-star::after { position: absolute; top: 9px; left: 13px; width: 9px; height: 9px; content: "★"; color: #626a6c; background: transparent; font-size: 10px; line-height: 9px; }
.object-row.object-hidden { opacity: .55; }
.visibility-badge { margin-left: 5px; color: #d8ad74; font-size: 8px; }
.object-visibility { width: 28px; flex: none; border: 0; border-radius: 4px; color: #889493; background: transparent; cursor: pointer; }
.object-visibility:hover { color: var(--mint); background: #25312d; }

.inspector { grid-column: 3; grid-row: 2; min-height: 0; display: flex; flex-direction: column; border-left: 1px solid var(--line); background: #181c20; }
.inspector-heading { display: flex; justify-content: space-between; align-items: center; padding: 23px 19px 17px; border-bottom: 1px solid var(--line-soft); }
.eyebrow { margin: 0 0 5px; color: var(--mint); font: 700 9px "Space Grotesk", sans-serif; letter-spacing: 1.15px; }
.inspector-heading h1 { margin: 0; font: 600 17px "Space Grotesk", sans-serif; letter-spacing: -.35px; }
.icon-button { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; color: #9aa4a7; background: #202529; cursor: pointer; }
.icon-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon-button:disabled { cursor: default; opacity: .4; }
.danger-button:not(:disabled):hover { color: var(--danger); border-color: #724141; background: #302122; }
.inspector-content { min-height: 0; flex: 1; overflow: auto; padding: 18px 18px 14px; }
.section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
.section-title h2 { margin: 0; color: #c6cdcf; font-size: 11px; font-weight: 600; }
.count-pill { min-width: 19px; padding: 2px 6px; border-radius: 10px; color: #8c999b; background: #262c30; text-align: center; font-size: 9px; }
.object-list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.object-list li { display: flex; align-items: center; min-width: 0; }
.object-row {
  min-width: 0; flex: 1; display: flex; align-items: center; gap: 9px; padding: 8px 9px; border: 1px solid transparent;
  border-radius: 6px; color: #aab3b5; background: transparent; text-align: left; cursor: pointer; font-size: 10px;
}
.object-row:hover { background: #20262a; }
.object-row.selected { border-color: #34594e; color: #d5e4dd; background: #1c302a; }
.object-swatch { width: 10px; height: 10px; flex: none; border-radius: 3px; box-shadow: inset 0 0 0 1px #ffffff2a; }
.object-type { margin-left: auto; color: #657177; font-size: 9px; }
.muted-copy { margin: 0; color: #69757b; font-size: 10px; }
.properties-section { margin-top: 25px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.unit-label { color: #647076; font-size: 9px; }
.field-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.size-hint { margin-top: 7px; line-height: 1.4; }
.field { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.field > span { display: flex; justify-content: space-between; color: #7f8b8e; font-size: 9px; }
.field i { color: #52605f; font-size: 9px; font-style: normal; }
.field input {
  width: 100%; min-width: 0; height: 31px; padding: 0 7px; border: 1px solid #30383c; border-radius: 5px;
  color: #cbd3d3; background: #202529; outline: none; font-size: 10px; font-variant-numeric: tabular-nums;
}
.field input:focus { border-color: #548a76; }
.field input:disabled { color: #626c71; background: #1d2225; }
.field-grid[hidden], .thread-controls[hidden] { display: none; }
.dimension-ranges { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.dimension-ranges label { display: flex; flex-direction: column; gap: 5px; color: #7f8b8e; font-size: 9px; }
.dimension-ranges input[type="range"] { width: 100%; height: 5px; margin: 2px 0; accent-color: #72c9a8; cursor: pointer; }
.dimension-ranges input[type="range"]:disabled { cursor: default; opacity: .45; }
.proportional-field { display: flex; align-items: center; gap: 7px; margin-top: 12px; color: #aab4b6; font-size: 10px; line-height: 1.4; }
.proportional-field input { accent-color: #72c9a8; }
.internal-controls { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.internal-dimensions { color: #aab4b6; font-size: 10px; line-height: 1.5; }
.thread-controls { display: flex; flex-direction: column; gap: 15px; }
.thread-match-hint { padding: 8px; border-left: 2px solid #548a76; border-radius: 3px; background: #202824; line-height: 1.5; }
#thread-head-field[hidden], #thread-drive-field[hidden], #thread-nut-style-field[hidden] { display: none; }
.thread-size-field select { height: 33px; padding: 0 9px; border: 1px solid #30383c; border-radius: 5px; color: #cbd3d3; background: #202529; font-size: 11px; }
.thread-size-field select:disabled { color: #626c71; }
.thread-measure { display: flex; flex-direction: column; gap: 8px; }
.thread-measure-heading { display: flex; align-items: center; justify-content: space-between; color: #aab4b6; font-size: 10px; }
.thread-measure-heading > span:last-child { display: inline-flex; align-items: center; gap: 4px; color: #798589; }
.thread-measure-heading input { width: 70px; height: 27px; padding: 0 6px; border: 1px solid #30383c; border-radius: 5px; color: #d5dcde; background: #202529; text-align: right; font-size: 10px; font-variant-numeric: tabular-nums; }
.thread-measure > input[type="range"] { width: 100%; height: 5px; margin: 2px 0; accent-color: #e18b40; cursor: pointer; }
.thread-measure > input[type="range"]:disabled { cursor: default; opacity: .45; }
.thread-help { margin-top: -10px; line-height: 1.5; }
.position-title { margin-top: 21px; }
.color-field { display: flex; align-items: center; justify-content: space-between; margin-top: 19px; color: #8b9699; font-size: 10px; }
.color-field input { width: 33px; height: 24px; padding: 2px; border: 1px solid #374044; border-radius: 5px; background: #202529; cursor: pointer; }
.color-field input:disabled { cursor: default; opacity: .45; }
.select-hint { display: flex; align-items: center; gap: 9px; margin-top: 18px; padding: 10px; border: 1px solid #2d373b; border-radius: 6px; color: #7a8789; background: #1d2427; font-size: 9px; }
.select-hint[hidden] { display: none; }
.hint-icon { color: var(--mint); font-size: 15px; }
.inspector-footer { display: flex; gap: 9px; align-items: flex-start; padding: 13px 18px; border-top: 1px solid var(--line); color: #718084; background: #15191c; }
.footer-icon { display: grid; width: 15px; height: 15px; flex: none; place-items: center; border: 1px solid #4c6960; border-radius: 50%; color: var(--mint); font: 600 9px Georgia, serif; }
.inspector-footer p { margin: 0; font-size: 9px; line-height: 1.65; }
.toast { position: fixed; bottom: 52px; left: 50%; z-index: 10; transform: translate(-50%, 10px); padding: 10px 15px; border: 1px solid #35443f; border-radius: 7px; color: #dce6e1; background: #1e2b27; box-shadow: 0 10px 30px #0005; opacity: 0; pointer-events: none; transition: .2s; font-size: 11px; }
.toast.visible { transform: translate(-50%, 0); opacity: 1; }
/* La ayuda del mouse se esconde mientras hay un aviso, para que no se pisen. */
body.toast-on .viewport-help { opacity: 0; }
.viewport-help { transition: opacity .15s; }
.help-dialog { width: min(460px, calc(100vw - 32px)); padding: 20px; border: 1px solid #46534f; border-radius: 9px; color: var(--text); background: #1d2326; box-shadow: 0 20px 70px #000b; }
.help-dialog::backdrop { background: #070a0bcc; }
.help-dialog header { display: flex; align-items: center; justify-content: space-between; }
.help-dialog h2 { margin: 0; font-size: 16px; }
.help-dialog p { color: #aeb8b8; font-size: 11px; line-height: 1.6; }
.help-dialog .button { margin-top: 8px; }
.help-dialog .library-close { font: 21px "Segoe UI", sans-serif; }
.hollow-controls { display: flex; flex-direction: column; gap: 12px; margin-top: 17px; padding: 13px 11px; border: 1px solid #443a33; border-radius: 7px; background: #201f1e; }
.hollow-controls-heading { display: flex; align-items: center; justify-content: space-between; }
.hollow-controls-heading > div { display: flex; align-items: center; gap: 8px; }
.hollow-controls-heading h3 { margin: 0; color: #e4e8e8; font-size: 12px; font-weight: 600; }
.hollow-icon { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid #654a38; border-radius: 5px; color: #ff9f70; background: #33271f; }
.hollow-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hollow-description { line-height: 1.45; }
.hollow-thickness { padding: 10px; border: 1px solid #3d4549; border-radius: 6px; background: #202629; }
.hollow-thickness input[type="range"] { accent-color: #ff9f70; }
.hollow-sides, .hollow-caps, .hollow-edges { width: 100%; min-width: 0; }
.hollow-sides, .hollow-caps, .hollow-edges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 9px; border: 1px solid #3d4549; border-radius: 6px; }
.hollow-sides legend, .hollow-caps legend, .hollow-edges legend { padding: 0 5px; color: #c4cdcf; font-size: 10px; }
.hollow-sides label, .hollow-caps label, .hollow-edges label { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 30px; padding: 5px 6px; border: 1px solid #333d41; border-radius: 5px; color: #bac4c6; background: #202629; font-size: 10px; }
.hollow-sides label, .hollow-caps label, .hollow-edges label { cursor: pointer; }
.hollow-sides input { accent-color: #ff9f70; }
.hollow-caps input { accent-color: #70d5b2; }
.hollow-edges input { accent-color: #70d5b2; }
.hollow-colors, .feature-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 9px; border: 1px solid #3d4549; border-radius: 6px; }
.hollow-colors legend, .feature-settings legend { grid-column: 1 / -1; padding: 0 5px; color: #c4cdcf; font-size: 10px; }
.hollow-colors label { display: flex; align-items: center; justify-content: space-between; gap: 7px; min-width: 0; color: #bac4c6; font-size: 10px; }
.hollow-colors input[type="color"] { width: 40px; height: 25px; padding: 2px; border: 1px solid #455258; border-radius: 5px; background: #202629; cursor: pointer; }
.hollow-mode-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hollow-mode-button { min-height: 65px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1px solid #414b4f; border-radius: 6px; color: #aab4b6; background: #202629; cursor: pointer; font-size: 10px; }
.hollow-mode-button:hover:not(:disabled) { border-color: #83918f; color: #e3e9e9; }
.hollow-mode-button.active { border-color: #70d5b2; color: #d8fff1; background: #23342f; box-shadow: inset 0 0 0 1px #70d5b244; }
.hollow-mode-button:disabled { cursor: default; opacity: .45; }
.hollow-mode-icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 5px; font-size: 18px; }
.solid-icon { color: #ff526c; background: #52232c; }
.hollow-icon-preview { color: #f3bd69; background: repeating-linear-gradient(135deg, #56452c 0 4px, #252a2c 4px 8px); }
.hollow-transparent { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 1px solid #3d4549; border-radius: 5px; color: #bac4c6; background: #202629; font-size: 10px; }
.hollow-transparent input { accent-color: #70d5b2; }
.hollow-transparent:has(input:disabled) { opacity: .5; }
.comparison-action { grid-column: 1 / -1; }
.comparison-note { margin: -3px 0 0; font-size: 9px; line-height: 1.4; }
.hole-position-fields { grid-column: 1 / -1; display: grid; gap: 8px; }
.hole-position-fields[hidden] { display: none; }
.hole-position-title { color: #d5ba74; font-size: 10px; }
.feature-settings > .field, .feature-settings > .thread-measure, .feature-settings > .proportional-field, .feature-settings > .hollow-action, .feature-settings > .feature-note { grid-column: 1 / -1; }
.feature-settings > .field { display: grid; gap: 5px; color: #bac4c6; font-size: 10px; }
.feature-settings > .field select { width: 100%; height: 29px; }
.hollow-action { width: 100%; min-height: 32px; border-color: #4a655e; color: #9ce0c6; background: #24332f; font-size: 10px; }
.hollow-action:hover:not(:disabled), .hollow-action.active { border-color: #70d5b2; color: #18221f; background: #70d5b2; }
.feature-note { color: #9eacad; font-size: 9px; line-height: 1.45; }
.hollow-controls.feature-pick-active { outline: 1px solid #70d5b2; outline-offset: 2px; }
.feature-pick-active + .position-title { color: #70d5b2; }
.hollow-note { color: #a28a79; font-size: 9px; line-height: 1.45; }
.feature-dialog form { display: flex; flex-direction: column; gap: 13px; }
.feature-dialog p { margin: 0; }
.feature-dialog .field { display: grid; gap: 6px; color: #bac4c6; font-size: 11px; }
.feature-dialog .field select { height: 34px; padding: 0 9px; border: 1px solid #30383c; border-radius: 5px; color: #cbd3d3; background: #202529; }
.feature-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }

@media (max-width: 900px) {
  .workspace { grid-template-columns: 46px minmax(240px, 1fr) 260px; }
  .topbar { padding: 0 14px; gap: 12px; }
  .save-status { display: none; }
  .project-name-wrap input { width: 180px; }
  .viewport-column { padding: 9px; }
  .inspector-heading { padding: 18px 14px 14px; }
  .inspector-content { padding: 15px 13px; }
  .inspector-footer { padding: 11px 13px; }
  .command-bar { gap: 4px; padding: 0 6px; }
  .command-label { display: none; }
  .tool-menu summary { padding: 7px 5px; font-size: 9px; }
}
@media (max-width: 760px) {
  body { height: 100dvh; }
  .topbar { height: 58px; gap: 9px; padding: 0 10px; }
  .brand { gap: 6px; }
  .brand-mark { width: 26px; height: 26px; }
  .brand-name { font-size: 14px; }
  .header-divider, .project-name-wrap, .button-quiet { display: none; }
  .button { height: 33px; padding: 0 10px; font-size: 11px; }
  .workspace { height: calc(100dvh - 58px); grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: 80px minmax(190px, 1fr) 245px; }
  .command-bar { grid-column: 1 / -1; grid-row: 1; gap: 4px; padding: 0 5px; }
  .command-button { height: 30px; gap: 4px; padding: 0 6px; font-size: 9px; }
  .command-button svg { width: 15px; height: 15px; }
  .command-divider { height: 20px; }
  .command-group { gap: 0; }
  .command-icon { width: 23px; height: 27px; }
  .command-icon svg { width: 15px; height: 15px; }
  .tool-menu summary { padding: 6px 4px; font-size: 8px; }
  .command-spacer, .command-tip { display: none; }
  .tool-rail { grid-column: 1; grid-row: 2; padding: 9px 3px; }
  .view-cube { width: 33px; font-size: 6px; }
  .rail-button { width: 31px; height: 31px; }
  .rail-button svg { width: 16px; height: 16px; }
  .rail-separator { width: 24px; margin: 7px 0 3px; }
  .viewport-column { grid-column: 2; grid-row: 2; padding: 6px; }
  .viewport-topline { top: 9px; left: 9px; right: 9px; }
  .view-badge { gap: 5px; padding: 6px; font-size: 8px; }
  .view-control { padding: 6px; font-size: 9px; }
  .viewport-help { bottom: 8px; gap: 8px; font-size: 8px; }
  .viewport-help span:nth-child(3) { display: none; }
  .shape-library { position: fixed; top: 104px; left: 50px; width: min(410px, calc(100vw - 60px)); max-height: min(420px, calc(100dvh - 120px)); padding: 10px; }
  .shape-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shape-tile { min-height: 42px; padding: 5px 7px; font-size: 8px; }
  .inspector { grid-column: 1 / -1; grid-row: 3; border-top: 1px solid var(--line); border-left: 0; }
  .inspector-heading { padding: 9px 12px; }
  .inspector-heading h1 { font-size: 13px; }
  .eyebrow { display: none; }
  .icon-button { width: 28px; height: 28px; }
  .inspector-content { display: grid; grid-template-columns: minmax(105px, .72fr) minmax(0, 1.5fr); gap: 12px; overflow: auto; padding: 10px 12px; }
  .object-section { min-width: 0; }
  .properties-section { min-width: 0; margin: 0; padding: 0; border: 0; }
  .select-hint { grid-column: 1 / -1; margin: 0; padding: 6px 8px; }
  .properties-section .section-title { margin-bottom: 6px; }
  .properties-section .field-grid { gap: 5px; }
  .properties-section .field input { height: 26px; padding: 0 5px; }
  .properties-section .position-title { margin-top: 8px; }
  .color-field { margin-top: 8px; }
  .inspector-footer { display: none; }
}

/* Sólido / Agujero y grupos */
.group-controls { display: grid; gap: 9px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line-soft); }
.group-controls .section-title { margin-bottom: 0; }
.group-mode-buttons, .group-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.group-mode-button {
  min-height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid #414b4f; border-radius: 6px; color: #aab4b6; background: #202629; cursor: pointer; font-size: 10px;
}
.group-mode-button:hover { border-color: #83918f; color: #e3e9e9; }
.group-mode-button.active { border-color: #ff9f70; color: #ffe9dc; background: #2f2722; box-shadow: inset 0 0 0 1px #ff9f7044; }
.group-mode-swatch { width: 28px; height: 28px; border-radius: 5px; box-shadow: inset 0 0 0 1px #ffffff30; }
.solid-swatch { background: #d8263a; }
.hole-swatch { background: repeating-linear-gradient(135deg, #b8c0c4 0 4px, #6b7479 4px 8px); }
.group-actions .hollow-action:disabled { cursor: default; opacity: .4; }
.object-swatch-hole { background: repeating-linear-gradient(135deg, #b8c0c4 0 2px, #6b7479 2px 4px) !important; }
.tool-menu-separator { height: 1px; margin: 4px 6px; background: #3a4245; }
.tool-menu-panel button:disabled { cursor: default; opacity: .4; }
.tool-menu-panel button:disabled:hover { color: #cbd2d3; background: transparent; }
.tool-menu-panel kbd { margin-left: auto; padding: 1px 5px; border: 1px solid #45504f; border-radius: 3px; color: #8c9897; font: 9px "Segoe UI", sans-serif; }

/* Panel de corte */
.split-panel {
  position: absolute; top: 51px; right: 16px; z-index: 5; width: min(320px, calc(100% - 32px));
  max-height: calc(100% - 70px); overflow: auto; display: grid; gap: 12px; padding: 14px;
  border: 1px solid #4a5052; border-radius: 6px; color: #e3e6e6; background: #24282b; box-shadow: 0 14px 38px #0009;
}
.split-panel[hidden] { display: none; }
.split-header { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid #3a4245; }
.split-header h2 { margin: 0 0 3px; font-size: 14px; font-weight: 600; }
.split-header p { margin: 0; color: #8b9698; font-size: 10px; }
.split-summary { display: grid; gap: 3px; padding: 9px 10px; border: 1px solid #3a4245; border-radius: 5px; background: #1d2124; font-size: 10px; }
.split-summary span { color: #8b9698; font-size: 9px; }
.split-label { color: #8b9698; font-size: 10px; font-weight: 600; }
.split-axis-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: -6px; }
.split-axis-buttons button {
  height: 32px; border: 1px solid #3d4549; border-radius: 5px; color: #cbd2d3; background: #2b3134; cursor: pointer; font-weight: 700; font-size: 11px;
}
.split-axis-buttons button:hover { border-color: #83918f; }
.split-axis-buttons button.active { border-color: #e18b40; color: #1f140a; background: #e18b40; }
.split-note { margin: 0; color: #8b9698; font-size: 9px; line-height: 1.45; }
.split-note kbd { padding: 0 4px; border: 1px solid #45504f; border-radius: 3px; font-size: 9px; }
.split-actions { display: flex; align-items: center; gap: 7px; padding-top: 10px; border-top: 1px solid #3a4245; }
.split-spacer { flex: 1; }
.split-secondary { height: 32px; padding: 0 10px; font-size: 11px; }
.split-apply { height: 32px; padding: 0 12px; border-color: #e18b40; color: #1f140a; background: #e18b40; font-size: 11px; }
.split-apply:hover { border-color: #f0a35f; background: #f0a35f; }
.viewport.busy { cursor: progress; }
@media (max-width: 700px) {
  .split-panel { position: fixed; top: auto; right: 10px; bottom: 10px; left: 10px; width: auto; max-height: 60dvh; }
}

/* Lista de objetos: nombres largos sin solaparse */
.object-row > span:nth-child(2) { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.object-type { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) { .object-type { display: none; } }

/* ---- Herramientas nuevas ---- */
.sketch-button { --tool-icon-color: #ffb36b; }
.tool-panel { gap: 11px; }
.split-axis-buttons.two { grid-template-columns: repeat(2, 1fr); margin-top: 0; }
.pattern-grid { display: grid; grid-template-columns: 22px 1fr 1fr; gap: 6px 8px; align-items: center; }
.pattern-grid[hidden], .pattern-fields[hidden] { display: none; }
.pattern-grid input, .pattern-fields input, .pattern-fields select, .text-controls input[type="text"], .text-controls select, .edge-controls select, .sketch-side input[type="number"], .settings-field select {
  width: 100%; min-width: 0; height: 30px; padding: 0 7px; border: 1px solid #30383c; border-radius: 5px;
  color: #d5dcde; background: #1b2023; font-size: 11px; font-variant-numeric: tabular-nums;
}
.pattern-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pattern-fields .field > span, .tool-panel .field > span { color: #8b9698; font-size: 10px; }
.pattern-fields .proportional-field { grid-column: 1 / -1; }
.pattern-note { grid-column: 1 / -1; }
.axis-tag { display: grid; place-items: center; height: 24px; border-radius: 4px; font-size: 10px; font-weight: 700; color: #111; }
.axis-x { background: #e25c5c; } .axis-y { background: #5fbf6e; } .axis-z { background: #5b9bd5; }
.split-summary-line { margin: 0; padding: 7px 9px; border-radius: 5px; color: #ffcf9e; background: #2e2620; font-size: 10px; }
.tool-panel .proportional-field { display: flex; align-items: center; gap: 7px; color: #bac4c6; font-size: 10px; }
.tool-panel .proportional-field input { accent-color: #e18b40; }

.pick-banner, .workplane-badge {
  position: absolute; left: 50%; z-index: 6; transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 8px 14px; border-radius: 7px; font-size: 11px; box-shadow: 0 10px 26px #0008;
}
.pick-banner { top: 56px; border: 1px solid #e18b40; color: #ffe4cb; background: #2b2119; }
.workplane-badge { bottom: 54px; border: 1px solid #8a5a33; color: #ffd3a8; background: #241d18; }
.pick-banner[hidden], .workplane-badge[hidden] { display: none; }
.pick-banner button, .workplane-badge button { padding: 5px 9px; border: 1px solid #6b4b33; border-radius: 5px; color: inherit; background: #3a2b20; cursor: pointer; font-size: 10px; }
.pick-banner kbd { margin-left: 4px; font-size: 9px; opacity: .8; }
.workplane-dot { width: 8px; height: 8px; border-radius: 50%; background: #ffb36b; }
.snap-grid-control { position: absolute; right: 14px; bottom: 12px; z-index: 3; display: flex; align-items: center; gap: 6px; color: #8b9698; font-size: 10px; }
.snap-grid-control select { height: 26px; border: 1px solid #3a4245; border-radius: 5px; color: #d5dcde; background: #1d2225; font-size: 10px; }

.edge-controls, .text-controls { display: grid; gap: 9px; margin: 14px 0 4px; padding: 11px; border: 1px solid #3d4549; border-radius: 6px; }
.edge-controls[hidden], .text-controls[hidden] { display: none; }
.edge-controls .section-title, .text-controls .section-title { margin-bottom: 0; }
.text-controls { margin: 0 0 18px; }
.text-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.text-row .proportional-field { height: 30px; }
.group-controls #edit-sketch { margin-top: 2px; }

/* Boceto */
.sketch-dialog { width: min(1280px, 96vw); height: min(860px, 92vh); max-width: none; max-height: none; padding: 0; border: 1px solid #4a5052; border-radius: 8px; color: #e3e6e6; background: #1b1f22; }
.sketch-dialog::backdrop { background: #0009; }
.sketch-layout { display: flex; flex-direction: column; height: 100%; }
.sketch-header { display: flex; align-items: center; gap: 18px; padding: 12px 16px; border-bottom: 1px solid #343b3f; flex-wrap: wrap; }
.sketch-header h2 { margin: 0; font-size: 15px; }
.sketch-header p { margin: 2px 0 0; color: #8b9698; font-size: 10px; }
.sketch-header .library-close { margin-left: auto; }
.sketch-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.sketch-tools button { height: 30px; padding: 0 11px; border: 1px solid #3d4549; border-radius: 5px; color: #cbd2d3; background: #262c2f; cursor: pointer; font-size: 11px; }
.sketch-tools button:hover { border-color: #83918f; }
.sketch-tools button.active { border-color: #e18b40; color: #1f140a; background: #e18b40; }
.sketch-inline { display: flex; align-items: center; gap: 6px; color: #8b9698; font-size: 10px; }
.sketch-inline[hidden] { display: none; }
.sketch-inline input { width: 54px; height: 30px; padding: 0 6px; border: 1px solid #30383c; border-radius: 5px; color: #d5dcde; background: #1b2023; }
.sketch-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 270px; }
.sketch-stage { position: relative; min-width: 0; min-height: 0; }
#sketch-canvas { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.sketch-hint { position: absolute; left: 12px; top: 10px; margin: 0; max-width: 70%; padding: 6px 9px; border-radius: 5px; color: #cbd2d3; background: #1b1f22d9; font-size: 10px; pointer-events: none; }
.sketch-readout { position: absolute; right: 12px; bottom: 10px; padding: 5px 9px; border-radius: 5px; color: #ffcf9e; background: #1b1f22d9; font-size: 11px; font-variant-numeric: tabular-nums; pointer-events: none; }
.sketch-side { display: flex; flex-direction: column; gap: 11px; padding: 14px; overflow: auto; border-left: 1px solid #343b3f; background: #202427; }
.sketch-side .field > span { color: #8b9698; font-size: 10px; }
.sketch-side-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.sketch-shape-fields { display: grid; gap: 8px; padding: 10px; border: 1px solid #3d4549; border-radius: 6px; }
.sketch-shape-fields[hidden] { display: none; }
.sketch-shape-fields h3 { margin: 0; font-size: 11px; color: #ffcf9e; }
.sketch-shape-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.sketch-final { display: flex; gap: 8px; justify-content: flex-end; margin-top: auto; padding-top: 10px; border-top: 1px solid #343b3f; }
.sketch-side .proportional-field { display: flex; align-items: center; gap: 7px; color: #bac4c6; font-size: 10px; }
@media (max-width: 760px) {
  .sketch-dialog { width: 100vw; height: 100dvh; border-radius: 0; }
  .sketch-body { grid-template-columns: 1fr; grid-template-rows: minmax(260px, 1fr) auto; }
  .sketch-side { border-left: 0; border-top: 1px solid #343b3f; max-height: 45dvh; }
}

/* Buscador, atajos, notas */
.palette-dialog { width: min(560px, 94vw); padding: 10px; }
.palette-form { display: grid; gap: 8px; }
#palette-input { height: 40px; padding: 0 12px; border: 1px solid #4a5052; border-radius: 6px; color: #eef2f2; background: #1b2023; font-size: 13px; }
.palette-list { max-height: 50vh; overflow: auto; margin: 0; padding: 0; list-style: none; }
.palette-item { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 0; border-radius: 5px; color: #cbd2d3; background: transparent; cursor: pointer; text-align: left; font-size: 12px; }
.palette-item.active, .palette-item:hover { color: #fff; background: #35413d; }
.palette-item kbd, .shortcuts-list kbd { padding: 2px 6px; border: 1px solid #45504f; border-radius: 4px; color: #a7b3b2; font: 10px "Segoe UI", sans-serif; white-space: nowrap; }
.shortcuts-list { display: grid; gap: 4px; max-height: 55vh; overflow: auto; margin: 0; padding: 0; list-style: none; }
.shortcuts-list li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 4px; border-bottom: 1px solid #2c3337; font-size: 11px; }
.notes-text { width: 100%; min-height: 180px; padding: 10px; border: 1px solid #3d4549; border-radius: 6px; color: #e3e6e6; background: #1b2023; font: 12px/1.5 "Segoe UI", sans-serif; resize: vertical; }
#settings-dialog .field { display: grid; gap: 6px; color: #bac4c6; font-size: 11px; }
#settings-dialog select { height: 34px; padding: 0 9px; border: 1px solid #30383c; border-radius: 5px; color: #cbd3d3; background: #202529; }
#settings-form { display: flex; flex-direction: column; gap: 13px; }

/* ---- Barra estilo Layerling: grupos con recuadro e iconos grandes ---- */
.command-bar.ribbon { gap: 6px; align-items: stretch; padding: 6px 10px 8px; }
.ribbon-group { flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 3px; }
.ribbon-label { color: #c9d0d2; font: 700 9px "Segoe UI", sans-serif; letter-spacing: .9px; text-align: center; }
.ribbon-box {
  flex: 1; display: flex; align-items: center; gap: 2px; padding: 3px 5px;
  border: 1.5px solid var(--group-color); border-radius: 8px;
  background: color-mix(in srgb, var(--group-color), transparent 93%);
}
.rb {
  position: relative; width: 42px; height: 42px; display: grid; place-items: center; flex: none;
  border: 1px solid transparent; border-radius: 6px; color: #dfe6e7; background: transparent; cursor: pointer;
  list-style: none;
}
.rb::-webkit-details-marker { display: none; }
.rb svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rb:hover:not(:disabled) { border-color: color-mix(in srgb, var(--group-color), transparent 40%); background: color-mix(in srgb, var(--group-color), transparent 80%); color: #fff; }
.rb.active, .rb.command-active, .ribbon-pop[open] > .rb { border-color: var(--group-color); background: color-mix(in srgb, var(--group-color), transparent 72%); color: #fff; }
.rb:disabled { opacity: .32; cursor: default; }
.rb:focus-visible { outline: 2px solid var(--group-color); outline-offset: 1px; }
.rb-wide { width: auto; display: flex; flex-direction: column; gap: 1px; padding: 2px 9px; font-size: 10px; font-weight: 600; }
.rb-wide svg { width: 22px; height: 22px; }
.rb-hidden { display: none; }
.rb-caret { position: absolute; right: 3px; bottom: 3px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 4px solid currentColor; opacity: .7; }
.ribbon-pop { position: static; }
.ribbon-pop .tool-menu-panel button, .ribbon-pop .tool-menu-field { font-size: 11px; }
.ribbon-pop .tool-menu-panel kbd { margin-left: auto; padding: 1px 5px; border: 1px solid #45504f; border-radius: 3px; color: #8c9897; font: 9px "Segoe UI", sans-serif; }
@media (max-width: 760px) {
  .command-bar.ribbon { padding: 4px 6px 6px; }
  .rb { width: 36px; height: 36px; }
  .rb svg { width: 21px; height: 21px; }
  .ribbon-label { font-size: 8px; }
}

/* Diálogo de agujero */
.hole-dialog { width: min(560px, calc(100vw - 32px)); }
.hole-dialog form { gap: 12px; }
.hole-kind-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hole-kind-card {
  display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center;
  padding: 11px 12px; border: 1.5px solid #3d4549; border-radius: 8px; color: #cbd2d3; background: #22282b; cursor: pointer; text-align: left;
}
.hole-kind-card svg { grid-row: 1 / 3; width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hole-kind-card strong { font-size: 13px; }
.hole-kind-card span { color: #8b9698; font-size: 10px; }
.hole-kind-card.active { border-color: #e18b40; color: #fff; background: #2e2620; }
.hole-kind-card.active svg { color: #ffb36b; }
.hole-options { display: grid; gap: 8px; }
.hole-shape-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.hole-shape-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 4px;
  border: 1.5px solid #3d4549; border-radius: 7px; color: #cbd2d3; background: #22282b; cursor: pointer; font-size: 10px;
}
.hole-shape-card svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.hole-shape-card:hover { border-color: #83918f; }
.hole-shape-card.active { border-color: #e18b40; color: #fff; background: #2e2620; }
.hole-shape-card.active svg { color: #ffb36b; }
.hole-measure-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; align-items: end; }
.hole-dialog .field input, .hole-dialog .field select { height: 34px; padding: 0 9px; border: 1px solid #30383c; border-radius: 5px; color: #cbd3d3; background: #202529; }
.hole-dialog .proportional-field { display: flex; align-items: center; gap: 7px; min-height: 34px; color: #bac4c6; font-size: 11px; }
@media (max-width: 520px) { .hole-shape-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hole-kind-row { grid-template-columns: 1fr; } }
.split-connectors { display: grid; gap: 9px; margin: 0; padding: 10px; border: 1px solid #4a3a2c; border-radius: 6px; }
.split-connectors legend { padding: 0 5px; color: #ffcf9e; font-size: 10px; font-weight: 600; }
.split-connectors .proportional-field { display: flex; align-items: center; gap: 7px; color: #d5dcde; font-size: 11px; }
.split-connectors .proportional-field input { accent-color: #e18b40; }
.split-connectors .pattern-fields .split-summary-line { grid-column: 1 / -1; }
.rb { width: 37px; height: 40px; }
.rb svg { width: 23px; height: 23px; }
.ribbon-box { gap: 1px; padding: 3px 4px; }
.command-bar.ribbon { gap: 5px; }
@media (max-width: 1800px) {
  .rb { width: 33px; height: 38px; }
  .rb svg { width: 21px; height: 21px; }
  .rb-wide { padding: 2px 6px; }
}
.tool-menu.ribbon-pop > summary.rb { padding: 0; border-radius: 6px; color: #dfe6e7; gap: 0; display: grid; }
.tool-menu.ribbon-pop > summary.rb svg { width: 23px; height: 23px; stroke-width: 1.6; }
.tool-menu.ribbon-pop[open] > summary.rb, .tool-menu.ribbon-pop > summary.rb:hover { color: #fff; }
@media (max-width: 1800px) { .tool-menu.ribbon-pop > summary.rb svg { width: 21px; height: 21px; } }
.wall-side-choice { display: grid; gap: 5px; margin: 0; padding: 8px; border: 1px solid #3d4549; border-radius: 6px; }
.wall-side-choice legend { padding: 0 5px; color: #c4cdcf; font-size: 10px; }
.wall-side-choice label { display: flex; align-items: center; gap: 7px; color: #bac4c6; font-size: 10px; cursor: pointer; }
.wall-side-choice input { accent-color: #70d5b2; }
.wall-controls .proportional-field { display: flex; align-items: center; gap: 7px; color: #bac4c6; font-size: 10px; }
.texture-panel { width: min(360px, calc(100% - 32px)); }
.texture-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.texture-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; border: 1.5px solid #3d4549; border-radius: 7px; color: #cbd2d3; background: #22282b; cursor: pointer; font-size: 10px; }
.texture-card canvas { width: 100%; max-width: 72px; aspect-ratio: 1; border-radius: 5px; image-rendering: auto; }
.texture-card:hover { border-color: #83918f; }
.texture-card.active { border-color: #e18b40; color: #fff; background: #2e2620; }
.preview-hollowbox::before { inset: 5px 3px; border: 4px solid #d9dede; border-top-width: 0; border-radius: 2px; background: #4c5254; }
.preview-recttube::before { inset: 4px; border: 4px solid #d9dede; border-radius: 2px; background: #4c5254; }
.preview-cup::before { inset: 3px 6px; border: 4px solid #d9dede; border-top-width: 0; border-radius: 0 0 9px 9px; background: #4c5254; }
.preview-dome::before { inset: 7px 3px 5px; border: 4px solid #d9dede; border-bottom-width: 0; border-radius: 14px 14px 0 0; background: #4c5254; }
.rb { width: 35px; }
.pattern-fields input[type="checkbox"], .tool-panel input[type="checkbox"] { width: auto; height: auto; flex: none; }
.texture-panel .pattern-fields .proportional-field { grid-column: 1 / -1; }

/* Regla */
.measure-panel { width: min(330px, calc(100% - 32px)); }
.measure-modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.measure-modes button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px; border: 1.5px solid #3d4549; border-radius: 6px; color: #cbd2d3; background: #22282b; cursor: pointer; font-size: 10px; }
.measure-modes svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.measure-modes button.active { border-color: #ffd447; color: #fff; background: #2e2a1c; }
.measure-list { display: grid; gap: 5px; max-height: 200px; overflow: auto; margin: 0; padding: 0; list-style: none; }
.measure-list li { display: grid; gap: 2px; padding: 7px 9px; border-radius: 5px; background: #1d2124; }
.measure-list strong { color: #ffe9a6; font-size: 12px; font-variant-numeric: tabular-nums; }
.measure-list span { color: #8b9698; font-size: 9px; font-variant-numeric: tabular-nums; }
.measure-labels { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.measure-label { position: absolute; transform: translate(-50%, -130%); padding: 3px 7px; border-radius: 4px; color: #111; background: #ffd447; font: 700 11px "Segoe UI", sans-serif; white-space: nowrap; box-shadow: 0 2px 8px #0008; font-variant-numeric: tabular-nums; }
.measure-wall { background: #ff9a7f; } .measure-gap { background: #7fd8ea; } .measure-height { background: #cfa6f0; }
canvas.measuring { cursor: crosshair; }
.measure-panel .proportional-field { display: flex; align-items: center; gap: 7px; color: #bac4c6; font-size: 10px; }
/* Exportar */
.export-dialog { width: min(560px, calc(100vw - 32px)); }
.export-dialog form { gap: 11px; }
.export-dialog .field select { height: 34px; padding: 0 9px; border: 1px solid #30383c; border-radius: 5px; color: #cbd3d3; background: #202529; }
.export-formats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.export-formats label { display: grid; grid-template-columns: auto 1fr; column-gap: 7px; padding: 9px 10px; border: 1.5px solid #3d4549; border-radius: 7px; background: #22282b; cursor: pointer; font-size: 12px; }
.export-formats label span { grid-column: 2; color: #8b9698; font-size: 10px; }
.export-formats label:has(input:checked) { border-color: #62c6a6; background: #1c302a; }
.export-dialog .proportional-field { display: flex; align-items: center; gap: 7px; color: #bac4c6; font-size: 11px; }
.export-checks { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 11px; color: #aeb8b8; }
.export-checks .ok { color: #8fe0c0; } .export-checks .warn { color: #ffb36b; }
.preview-legcap::before { inset: 6px 4px 4px; border: 4px solid #d9dede; border-top-width: 0; border-radius: 3px 3px 6px 6px; background: #4c5254; }
.preview-legfoot::before { inset: 4px 7px 7px; border: 4px solid #d9dede; border-top-width: 0; border-bottom-width: 5px; background: #4c5254; box-shadow: 0 5px 0 -1px #d9dede; }
.preview-legplug::before { inset: 3px 8px 6px; border-radius: 2px; background: repeating-linear-gradient(180deg, #d9dede 0 3px, #9aa3a8 3px 6px); box-shadow: 0 4px 0 2px #d9dede; }

/* Texturas multicolor y rodillos */
.texture-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.texture-grid .texture-card { padding: 4px 3px; font-size: 9px; line-height: 1.15; text-align: center; }
.texture-grid .texture-card canvas { max-width: 50px; }
.texture-panel { width: min(400px, calc(100% - 32px)); max-height: calc(100% - 24px); overflow-y: auto; }
.texture-card { position: relative; }
.texture-color-badge { position: absolute; top: 3px; right: 4px; font-style: normal; font-size: 11px; }
.texture-selected { margin: 8px 0 2px; font-size: 12px; color: #aab4b5; }
.texture-zones { margin: 8px 0 0; padding: 8px 10px; border: 1px solid #3d4549; border-radius: 7px; }
.texture-zones legend { font-size: 12px; padding: 0 4px; }
.zone-list { display: grid; gap: 6px; }
.zone-list.disabled { opacity: 0.4; pointer-events: none; }
.zone-color { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.zone-color input[type="color"] { width: 34px; height: 24px; padding: 0; border: 1px solid #4b5458; border-radius: 4px; background: none; }
.paint-controls .button { width: 100%; margin-top: 6px; }
.roller-controls .thread-measure { margin-top: 6px; }
.roller-controls .button { width: 100%; margin-top: 8px; }
.preview-roller-texture, .preview-roller-fondant, .preview-roller-stamp { position: relative; }
.preview-roller-texture::before { inset: 5px 2px; border-radius: 5px; background: repeating-linear-gradient(90deg, #d9dede 0 3px, #9aa3a8 3px 5px); }
.preview-roller-fondant::before { inset: 5px 2px; border-radius: 5px; background: radial-gradient(circle at 25% 50%, #fff 0 2px, transparent 3px), radial-gradient(circle at 55% 35%, #fff 0 2px, transparent 3px), radial-gradient(circle at 80% 62%, #fff 0 2px, transparent 3px), #b9c1c3; }
.preview-roller-stamp::before { inset: 5px 2px; border-radius: 5px; background: repeating-linear-gradient(45deg, #d9dede 0 4px, #6f787c 4px 7px); }
.preview-roller-handle::before { inset: 9px 1px; border-radius: 4px; background: linear-gradient(90deg, #d9dede 0 55%, #9aa3a8 55% 100%); }

/* Menú del clic derecho */
.context-menu { position: fixed; z-index: 80; min-width: 210px; padding: 5px; border: 1px solid #3d4549; border-radius: 9px; background: #1d2225; box-shadow: 0 14px 34px rgba(0,0,0,.45); }
.context-menu button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; padding: 7px 10px; border: 0; border-radius: 6px; color: #dfe6e7; background: transparent; font-size: 12.5px; text-align: left; cursor: pointer; }
.context-menu button:hover:not(:disabled) { background: #35413d; color: #fff; }
.context-menu button:disabled { opacity: .38; cursor: default; }
.context-menu button.danger { color: #f19a9a; }
.context-menu kbd { color: #8b9698; font: 10.5px "DM Sans", sans-serif; }
.context-menu hr { margin: 4px 6px; border: 0; border-top: 1px solid #30383c; }

/* Panel derecho simplificado */
.inspector-hole-button { display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px; margin: 8px 0 4px; padding: 9px 10px; border: 1.5px solid #e18b40; border-radius: 8px; color: #ffcf9e; background: #2e2620; font-weight: 600; font-size: 12.5px; cursor: pointer; }
.inspector-hole-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.inspector-hole-button:hover:not(:disabled) { background: #3b2d21; color: #fff; }
.inspector-hole-button.active { background: #e18b40; color: #1f140a; }
.inspector-hole-button:disabled { opacity: .4; cursor: default; }
.hollow-details > summary { cursor: pointer; list-style: none; padding: 2px 0; }
.hollow-details > summary::-webkit-details-marker { display: none; }
.hollow-details > summary::after { content: "▾"; margin-left: 6px; color: #8b9698; }
.hollow-details:not([open]) > summary::after { content: "▸"; }
.hollow-details[open] > summary { margin-bottom: 8px; }
.wall-open-row { display: flex; gap: 14px; margin: 8px 0 2px; }
.wall-edges-block { margin-top: 8px; padding-top: 8px; border-top: 1px solid #30383c; }
.thread-pitch-auto { margin: 6px 0 2px; font-size: 12px; color: #aab4b6; }
.thread-pitch-auto strong { color: #e8ebed; }
.inspector-advanced { margin-top: 8px; border: 1px solid #30383c; border-radius: 7px; padding: 6px 9px; }
.inspector-advanced > summary { cursor: pointer; font-size: 12px; color: #bac4c6; }
.inspector-advanced[open] > summary { margin-bottom: 6px; }
.hollow-edge-size { width: 100%; margin-top: 6px; }
.theme-menu button.active { color: #fff; background: #35413d; }

/* Estilos de vista */
html.theme-light body { filter: invert(1) hue-rotate(180deg); background: #111417; }
html.theme-light body canvas, html.theme-light body input[type="color"], html.theme-light body .object-swatch, html.theme-light body img { filter: invert(1) hue-rotate(180deg); }
html.theme-light dialog[open] { filter: invert(1) hue-rotate(180deg); }
html.theme-light dialog[open] canvas, html.theme-light dialog[open] input[type="color"] { filter: invert(1) hue-rotate(180deg); }
html.theme-night body { filter: brightness(.86) sepia(.14); }
html.theme-night dialog[open] { filter: brightness(.86) sepia(.14); }
html.theme-contrast body { filter: contrast(1.35) saturate(1.15); }
html.theme-contrast dialog[open] { filter: contrast(1.35) saturate(1.15); }
html.theme-contrast .rb, html.theme-contrast .button, html.theme-contrast .field input, html.theme-contrast .field select { border-color: #ffffff !important; }
html.theme-blueprint { --mint: #7fc4ff; }
html.theme-blueprint .viewport { background: #123a63; }
.hollow-kind-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 4px 0 12px; }
.hollow-kind-grid .hole-kind-card { padding: 8px 5px; }
.hollow-kind-grid .hole-kind-card span { font-size: 10px; }
.hollow-dialog-sides { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0; padding: 8px 10px; border: 1px solid #3d4549; border-radius: 7px; font-size: 12px; }
.inspector-hollow-button { border-color: #62c6a6; color: #a9ecd5; background: #19302a; }
.inspector-hollow-button:hover:not(:disabled) { background: #20403a; }
@media (max-width: 640px) { .hollow-kind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hollow-kind-grid .hole-kind-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.hollow-kind-grid .hole-kind-card svg { width: 30px; height: 30px; }
#hollow-dialog { width: min(640px, calc(100vw - 32px)); }
.preview-jar-round::before { inset: 9px 5px 3px; border-radius: 4px 4px 5px 5px; background: #d9dede; box-shadow: 0 -5px 0 -1px #9aa3a8; }
.preview-jar-round::after { content: ""; position: absolute; left: 9px; right: 9px; top: 3px; height: 5px; border-radius: 2px; background: repeating-linear-gradient(90deg, #f1f3f3 0 2px, #9aa3a8 2px 3px); }
.preview-jar-hex::before { inset: 9px 5px 3px; clip-path: polygon(15% 0, 85% 0, 100% 50%, 85% 100%, 15% 100%, 0 50%); background: #d9dede; }
.preview-jar-hex::after { content: ""; position: absolute; left: 9px; right: 9px; top: 3px; height: 5px; border-radius: 2px; background: repeating-linear-gradient(90deg, #f1f3f3 0 2px, #9aa3a8 2px 3px); }
.preview-jar-square::before { inset: 9px 4px 3px; border-radius: 2px; background: #d9dede; }
.preview-jar-square::after { content: ""; position: absolute; left: 9px; right: 9px; top: 3px; height: 5px; border-radius: 2px; background: repeating-linear-gradient(90deg, #f1f3f3 0 2px, #9aa3a8 2px 3px); }
.preview-jar-small::before { inset: 12px 8px 4px; border-radius: 3px; background: #d9dede; }
.preview-jar-small::after { content: ""; position: absolute; left: 10px; right: 10px; top: 6px; height: 5px; border-radius: 2px; background: repeating-linear-gradient(90deg, #f1f3f3 0 2px, #9aa3a8 2px 3px); }
.cost-results { display: grid; gap: 4px; margin: 10px 0 6px; }
.cost-row { display: flex; justify-content: space-between; padding: 6px 9px; border-radius: 6px; background: #22282b; font-size: 12.5px; }
.cost-row strong { color: #ffcf9e; }
.overhang-panel { width: min(330px, calc(100% - 32px)); }
.preview-brick::before { inset: 9px 3px 4px; border-radius: 2px; background: #d9dede; box-shadow: 4px -4px 0 -2px #d9dede, 12px -4px 0 -2px #d9dede, 20px -4px 0 -2px #d9dede; }
.preview-brick-plate::before { inset: 14px 3px 6px; border-radius: 2px; background: #d9dede; box-shadow: 4px -4px 0 -2px #d9dede, 12px -4px 0 -2px #d9dede, 20px -4px 0 -2px #d9dede; }
.preview-brick-tile::before { inset: 13px 3px 7px; border-radius: 2px; background: linear-gradient(#f1f3f3, #aeb5b7); }
.preview-brick-round::before { inset: 9px 5px 4px; border-radius: 50% / 22%; background: #d9dede; box-shadow: 0 -4px 0 -2px #f1f3f3; }
.preview-brick-round-tile::before { inset: 12px 6px 7px; border-radius: 50%; background: linear-gradient(#f1f3f3, #aeb5b7); }
.preview-brick-base::before { inset: 15px 1px 6px; background: radial-gradient(circle, #f1f3f3 1.4px, transparent 1.8px) 0 0 / 5px 5px, #9aa3a8; }
.preview-brick-technic::before { inset: 8px 2px 6px; border-radius: 2px; background: radial-gradient(circle, #4c5254 1.8px, transparent 2.2px) 2px 0 / 7px 100%, #d9dede; }
.preview-brick-beam::before { inset: 9px 1px 9px; border-radius: 6px; background: radial-gradient(circle, #4c5254 1.8px, transparent 2.2px) 0 0 / 6px 100%, #d9dede; }
.command-bar.ribbon { gap: 3px; padding-left: 6px; padding-right: 6px; }
.ribbon-box { padding: 3px 3px; }
.sign-dialog { width: min(1000px, calc(100vw - 32px)); max-height: calc(100vh - 32px); }
.sign-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.sign-fields { display: grid; gap: 10px; max-height: calc(100vh - 220px); overflow-y: auto; padding-right: 4px; }
.sign-kind-row, .sign-version-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.sign-version-row { grid-template-columns: 1fr 1fr; }
.sign-kind-row .hole-kind-card, .sign-version-row .hole-kind-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 9px 6px; }
.sign-section { display: grid; gap: 8px; padding: 10px; border: 1px solid #30383c; border-radius: 8px; }
.sign-ask { margin: 0; padding: 7px 10px; border-radius: 6px; color: #1f140a; background: #ffcf9e; font-weight: 600; font-size: 12.5px; }
.sign-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.sign-colors { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.sign-draw-box canvas { width: 100%; border-radius: 6px; border: 1px solid #3d4549; cursor: crosshair; touch-action: none; }
.sign-draw-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 4px; }
.sign-draw-actions .split-note { margin-right: auto; }
.sign-image-box { display: grid; gap: 8px; }
.sign-image-box .field > span output { float: right; color: #ffcf9e; font-weight: 600; }
.sign-image-box input[type="range"] { width: 100%; }
.sign-preview-box canvas { width: 100%; border-radius: 8px; border: 1px solid #30383c; }
.sign-preview-box canvas.pick-strokes { cursor: pointer; }
.sign-stroke-tools { display: grid; gap: 6px; margin: 4px 0 6px; }
.sign-stroke-tools .button { justify-self: start; }
#sign-text { width: 100%; resize: vertical; min-height: 44px; padding: 7px 9px; border: 1px solid #3d4549; border-radius: 6px; color: #e8ebed; background: #1b2023; font: inherit; }
.preview-sign-plate::before { inset: 8px 2px; border-radius: 3px; background: linear-gradient(#f1f3f3, #aeb5b7); box-shadow: inset 0 0 0 2px #e18b40; }
.preview-sign-lit::before { inset: 6px 4px; background: linear-gradient(90deg, #d9dede 0 35%, transparent 35% 55%, #d9dede 55% 100%); box-shadow: 0 2px 6px #fff8; }
.preview-sign-neon::before { inset: 9px 2px; border-radius: 6px; border: 2.5px solid #ff6fb5; box-shadow: 0 0 6px #ff6fb5; background: transparent; }
@media (max-width: 760px) { .sign-layout { grid-template-columns: 1fr; } }
/* Bisagras armadas y cajas */
.preview-hinge-double::before { border-radius: 6px; background: linear-gradient(90deg, #d9dede 0 20%, transparent 20% 40%, #d9dede 40% 60%, transparent 60% 80%, #d9dede 80%), repeating-linear-gradient(90deg, #eff1f1 0 4px, #747c7e 4px 6px); background-blend-mode: multiply; }
.preview-hinge-piano::before { inset: 11px 1px; border-radius: 4px; background: repeating-linear-gradient(90deg, #eff1f1 0 3px, #747c7e 3px 4px); }
.preview-hinge-bracket::before { clip-path: polygon(50% 50%, 0 100%, 12% 100%, 50% 64%, 88% 100%, 100% 100%); background: #d9dede; }
.preview-hinge-bracket::after { content: ""; position: absolute; left: calc(50% - 5px); top: calc(50% - 5px); width: 10px; height: 10px; border-radius: 50%; background: #9aa3a8; }
.preview-hinge-pivot::before { inset: 4px 12px 4px 6px; border-radius: 4px; background: linear-gradient(90deg, #9aa3a8 0 40%, #d9dede 40%); }
.preview-hinge-pivot::after { content: ""; position: absolute; left: 6px; width: 7px; top: 2px; height: 6px; border-radius: 2px; background: #eff1f1; }
.preview-box-hinge::before, .preview-box-hex::before, .preview-box-round::before, .preview-box-heart::before, .preview-box-long::before, .preview-box-latch::before { inset: 8px 2px 8px; background: linear-gradient(90deg, #d9dede 0 46%, #747c7e 46% 54%, #aeb5b7 54%); border-radius: 3px; }
.preview-box-hex::before { clip-path: polygon(0 50%, 12% 0, 38% 0, 50% 50%, 62% 0, 88% 0, 100% 50%, 88% 100%, 62% 100%, 50% 50%, 38% 100%, 12% 100%); border-radius: 0; }
.preview-box-round::before { border-radius: 50% / 50%; inset: 7px 2px; }
.preview-box-heart::before { clip-path: polygon(50% 50%, 25% 100%, 2% 62%, 2% 30%, 15% 4%, 30% 6%, 46% 30%, 54% 30%, 70% 6%, 85% 4%, 98% 30%, 98% 62%, 75% 100%); border-radius: 0; }
.preview-box-long::before { inset: 11px 1px; }
.preview-box-latch::after { content: ""; position: absolute; right: 0; top: calc(50% - 3px); width: 4px; height: 6px; border-radius: 1px; background: #f2c14e; }
.preview-box-slide::before { inset: 9px 3px 5px; border: 3px solid #d9dede; border-top: 0; background: #4c5254; border-radius: 2px; }
.preview-box-slide::after { content: ""; position: absolute; left: 8px; right: 0; top: 6px; height: 3px; border-radius: 1px; background: #f1f3f3; }
.preview-box-drawers::before { inset: 3px 6px; border-radius: 2px; background: repeating-linear-gradient(#d9dede 0 2px, #e8774f 2px 8px, #d9dede 8px 9px); }
.preview-box-hexdrawer::before { inset: 4px; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: radial-gradient(circle, #747c7e 0 3px, #e8774f 3px); }
.kit-fields { display: grid; gap: 8px; }
.kit-advanced { margin-top: 8px; }
.kit-advanced summary { cursor: pointer; font-size: 12.5px; color: var(--muted, #9aa3a8); }
.kit-advanced .kit-fields { margin-top: 8px; }
.sign-font-panel { display: grid; gap: 6px; margin: 6px 0 8px; }
.sign-font-actions, .sign-cut-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.sign-cut-actions .button { flex: 1 1 auto; }
.sign-cut-list { display: grid; gap: 6px; margin: 6px 0; }
.sign-cut-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: end; }
.sign-cut-row .icon-remove, .sign-stripe-row .icon-remove { width: 27px; height: 27px; border: 1px solid #30383c; border-radius: 5px; background: #202529; color: #c9d1d3; cursor: pointer; }
.sign-cut-row .icon-remove:hover, .sign-stripe-row .icon-remove:hover { border-color: #e06c6c; color: #e06c6c; }
.sign-cut-warn { color: #f0a36b; }
.sign-cut-head { margin: 2px 0 6px; color: #9aa6a9; font-size: 11px; line-height: 1.4; }
#text-font-upload { margin-top: 6px; width: 100%; }
.hollow-cavity-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.hollow-cavity-grid .hole-kind-card { padding: 8px 4px; }
.hollow-cavity-grid .hole-kind-card strong { font-size: 10px; }
@media (max-width: 640px) { .hollow-cavity-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
#hollow-cell-fields { display: grid; gap: 10px; }
.hollow-cavity-grid .hole-kind-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.hollow-cavity-grid .hole-kind-card svg { width: 28px; height: 28px; }
.union-objects { width: 100%; margin: 8px 0 4px; }
#union-hint kbd { padding: 0 4px; border: 1px solid #3d4549; border-radius: 3px; font-size: 9px; }
.preview-box-tilt::before { inset: 3px 4px; border-radius: 2px; background: linear-gradient(#d9dede 0 3px, transparent 3px), linear-gradient(90deg, #d9dede 0 3px, transparent 3px calc(100% - 3px), #d9dede calc(100% - 3px)); }
.preview-box-tilt::after { content: ""; position: absolute; left: 6px; right: 6px; top: 9px; bottom: 4px; background: #e8d9b8; clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%); transform: skewX(-6deg); }
.preview-box-modular::before { inset: 5px 4px 3px; border-radius: 2px; background: linear-gradient(#c49a62 0 2px, #e3c597 2px); clip-path: polygon(0 0, 38% 0, 34% -10%, 66% -10%, 62% 0, 100% 0, 100% 100%, 0 100%); }
.preview-box-modular::after { content: ""; position: absolute; left: 30%; right: 30%; top: 12px; height: 6px; border-radius: 0 0 4px 4px; background: #6f5b3e; }
.preview-box-rose::before, .preview-box-rose-heart::before { inset: 14px 6px 2px; border-radius: 0 0 9px 9px; background: #e86f86; }
.preview-box-rose::after, .preview-box-rose-heart::after { content: ""; position: absolute; left: 7px; right: 7px; top: 2px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 50% 55%, #b83a52 0 2px, #f08aa0 2px 4px, #c94b64 4px 5px, #f39bb0 5px); }
.preview-box-rose-heart::before { clip-path: polygon(50% 100%, 0 40%, 8% 0, 50% 18%, 92% 0, 100% 40%); border-radius: 0; inset: 12px 4px 2px; }
.preview-box-gift-heart::before { inset: 4px; background: linear-gradient(90deg, transparent 44%, #f4f4f4 44% 56%, transparent 56%), #e0414f; clip-path: polygon(50% 100%, 2% 42%, 4% 12%, 26% 2%, 50% 18%, 74% 2%, 96% 12%, 98% 42%); }
.preview-box-gift::before { inset: 4px; border-radius: 3px; background: linear-gradient(90deg, transparent 44%, #c95a7a 44% 56%, transparent 56%), linear-gradient(transparent 44%, #c95a7a 44% 56%, transparent 56%), repeating-linear-gradient(45deg, #f2b7c8 0 4px, #e9a0b5 4px 5px); }
.preview-box-diamond::before { inset: 3px; background: linear-gradient(160deg, #bfe3ff, #3d8fd8 60%, #1f5fa3); clip-path: polygon(22% 0, 78% 0, 100% 30%, 50% 100%, 0 30%); }
.preview-box-flat::before { inset: 12px 2px 8px; border-radius: 2px; background: linear-gradient(90deg, #8c5bd1 0 46%, #5e3a92 46% 54%, #a77be0 54%); }
.preview-hasp::before, .preview-hasp-deco::before { inset: 9px 1px; border-radius: 3px; background: linear-gradient(90deg, #3a3f42 0 30%, #9aa3a8 30% 36%, #3a3f42 36%); }
.preview-hasp::after, .preview-hasp-deco::after { content: ""; position: absolute; right: 5px; top: calc(50% - 3px); width: 8px; height: 6px; border-radius: 2px; border: 2px solid #9aa3a8; }
.preview-hasp-deco::before { clip-path: polygon(0 50%, 12% 0, 30% 15%, 36% 15%, 100% 30%, 100% 70%, 36% 85%, 30% 85%, 12% 100%); border-radius: 0; }
.preview-box-gear::before { inset: 10px 1px 4px; border-radius: 2px; background: linear-gradient(90deg, #c9884a 0 44%, transparent 44% 56%, #c9884a 56%); }
.preview-box-gear::after { content: ""; position: absolute; left: calc(50% - 6px); bottom: 3px; width: 12px; height: 12px; border-radius: 50%; background: repeating-conic-gradient(#8a5a2b 0 15deg, transparent 15deg 30deg); }

/* --- Letrero: panel derecho con pestañas (íconos del mismo tamaño) --- */
.sign-controls { display: grid; gap: 8px; padding-bottom: 12px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.sign-system-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.sign-system, .sign-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: 52px; min-width: 0; padding: 4px 2px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--panel-raised); color: #c9d1d3; cursor: pointer; font-size: 10.5px; line-height: 1.1; text-align: center;
}
.sign-system svg, .sign-tab svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sign-system span, .sign-tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sign-system:hover, .sign-tab:hover { border-color: #4a555b; color: #fff; }
.sign-system[aria-pressed="true"] { border-color: #e18b40; background: #2e2620; color: #ffb36b; }
.sign-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding-top: 4px; border-top: 1px solid var(--line-soft); }
.sign-tab { height: 46px; font-size: 10px; }
.sign-tab svg { width: 20px; height: 20px; }
.sign-tab[aria-selected="true"] { border-color: var(--mint); background: var(--mint-dark); color: #d6fff0; }
.sign-tab-body { display: grid; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #15191c; }
.sign-tab-body .thread-measure { margin: 0; }
.sign-subheading { margin: 6px 0 0; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: #ffb36b; text-transform: uppercase; }
.sign-field-label { display: block; margin-bottom: 4px; font-size: 12px; color: var(--muted); }
.sign-cards { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 5px; }
.sign-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 48px; padding: 6px 4px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-raised); color: #c9d1d3; cursor: pointer; text-align: center; }
.sign-card strong { font-size: 12px; font-weight: 600; }
.sign-card-icon { width: 32px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: #9fb0b4; margin-bottom: 1px; }
.sign-card[aria-pressed="true"] .sign-card-icon { color: #ffb36b; }
.sign-card span { font-size: 10px; color: var(--muted); }
.sign-card[aria-pressed="true"] { border-color: #e18b40; background: #2e2620; color: #fff; }
.sign-card[aria-pressed="true"] span { color: #ffcf9e; }
.sign-model-cards .sign-card { min-height: 52px; }
.sign-font-row { display: grid; gap: 6px; }
.sign-upload-font { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-color: #e18b40; color: #ffcf9e; }
.sign-upload-font svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sign-status { display: grid; gap: 4px; margin: 0; }
.sign-status .sign-cut-warn { display: block; padding: 6px 8px; border-radius: 6px; background: #3a2a16; color: #ffcf9e; font-size: 11.5px; }
.sign-info .cost-row strong { text-align: right; }
.sign-tab-body textarea { width: 100%; resize: vertical; min-height: 44px; }
/* Con un letrero seleccionado solo quedan sus herramientas (como en el generador web). */
.inspector.sign-mode .group-controls,
.inspector.sign-mode .section-title:has(#dimensions-heading),
.inspector.sign-mode #standard-dimensions,
.inspector.sign-mode #standard-dimension-ranges,
.inspector.sign-mode #proportional-resize-field,
.inspector.sign-mode #standard-size-hint,
.inspector.sign-mode #hollow-controls,
.inspector.sign-mode #text-controls { display: none !important; }

/* Tornillería nueva */
.preview-fastener-set::before { inset: 3px 13px 3px 5px; border-radius: 2px 2px 4px 4px; background: linear-gradient(180deg, #f1f3f3 0 26%, transparent 26%), repeating-linear-gradient(135deg, #e8ebeb 0 2px, #969e9f 2px 4px); clip-path: polygon(0 0,100% 0,100% 26%,72% 26%,72% 100%,28% 100%,28% 26%,0 26%); }
.preview-fastener-set::after { position: absolute; right: 2px; bottom: 6px; width: 11px; height: 11px; content: ""; clip-path: polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%); background: radial-gradient(circle, #454c4e 0 28%, #c7cdce 30%); }
.preview-washer-split::before { inset: 3px; border: 6px solid #d9dede; border-radius: 50%; background: transparent; clip-path: polygon(0 0,46% 0,50% 50%,58% 0,100% 0,100% 100%,0 100%); }
.preview-threaded-rod::before { inset: 2px 10px; border-radius: 2px; background: repeating-linear-gradient(160deg, #e8ebeb 0 2px, #969e9f 2px 4px); }
.preview-threaded-rod::after { position: absolute; left: 6px; right: 6px; top: 11px; height: 6px; content: ""; clip-path: polygon(15% 0,85% 0,100% 50%,85% 100%,15% 100%,0 50%); background: linear-gradient(145deg, #f1f3f3, #9ca5a7); }
.preview-standoff::before { inset: 2px 7px 9px; border-radius: 3px; background: linear-gradient(90deg, #cfe4f0, #f6fbfd 45%, #a9c3cf); }
.preview-standoff::after { position: absolute; left: 3px; right: 3px; bottom: 3px; height: 6px; border-radius: 2px; content: ""; background: linear-gradient(180deg, #f6fbfd, #a9c3cf); }
.preview-mirror-clip::before { inset: 4px; border-radius: 50%; background: radial-gradient(circle at 42% 50%, #454c4e 0 16%, #e6eef1 18% 52%, #b9c9cf 54%); clip-path: polygon(0 0,100% 0,100% 100%,0 100%); }
.preview-mirror-clip::after { position: absolute; top: 4px; right: 1px; width: 7px; height: 19px; content: ""; background: linear-gradient(90deg, #9fd3e6, #e8f6fb); }
.preview-v-jack::before { inset: 2px 5px 9px; clip-path: polygon(0 0,30% 0,50% 45%,70% 0,100% 0,100% 100%,0 100%); background: linear-gradient(145deg, #f1f3f3, #aeb5b7); }
.preview-v-jack::after { position: absolute; left: 4px; right: 4px; bottom: 2px; height: 7px; content: ""; background: linear-gradient(90deg, transparent 38%, #969e9f 38% 62%, transparent 62%), linear-gradient(180deg, transparent 50%, #d9dede 50%); }
.preview-dovetail-plates::before { inset: 12px 2px 3px; border-radius: 2px; background: linear-gradient(180deg, #d9dede, #9ca5a7); }
.preview-dovetail-plates::after { position: absolute; left: 8px; right: 8px; top: 5px; height: 8px; content: ""; clip-path: polygon(20% 100%,80% 100%,100% 0,0 0); background: linear-gradient(180deg, #f1f3f3, #aeb5b7); }
.preview-hinge-l::before { clip-path: polygon(0 0,22% 0,22% 70%,70% 70%,70% 100%,0 100%); background: linear-gradient(145deg, #f1f3f3, #aeb5b7); }
.preview-hinge-l::after { position: absolute; top: 6px; right: 3px; width: 9px; height: 18px; border-radius: 4px; content: ""; background: linear-gradient(90deg, #d9dede, #8f9899); box-shadow: 0 -4px 0 -2px #6f7879; }
.preview-hinge-magnet::before { border-radius: 5px; background: radial-gradient(circle at 22% 25%, #a8b0b2 0 12%, transparent 13%), radial-gradient(circle at 78% 25%, #a8b0b2 0 12%, transparent 13%), radial-gradient(circle at 22% 75%, #a8b0b2 0 12%, transparent 13%), radial-gradient(circle at 78% 75%, #a8b0b2 0 12%, transparent 13%), linear-gradient(90deg, #555c5e 0 42%, #3c4244 42% 58%, #555c5e 58%); }

/* Letreros: luz, franjas y presupuesto */
.sign-light-map { margin: 4px 0 8px; padding: 6px; border: 1px solid #30383c; border-radius: 8px; color: #e8ecec; background: #0002; }
.sign-light-map svg { display: block; width: 100%; height: auto; max-height: 180px; }
.sign-stripes { display: grid; gap: 6px; }
.sign-stripe-row { display: grid; grid-template-columns: 38px 1fr 28px; align-items: center; gap: 8px; }
.sign-stripe-row input[type="color"] { width: 38px; height: 28px; padding: 0; border: 1px solid #30383c; border-radius: 6px; background: none; }
.sign-stripe-row span { font-size: 12px; opacity: 0.85; }
.sign-budget { margin-top: 10px; border-top: 1px solid #30383c; padding-top: 8px; }
.sign-budget summary { cursor: pointer; font-weight: 600; }
.sign-budget-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; margin: 8px 0; }
.sign-budget-grid .field span { font-size: 11px; }
.sign-stripe-row .icon-remove:disabled { opacity: 0.35; cursor: default; }
/* Anclajes ocultos del cartel */
.sign-anchors { display: grid; gap: 7px; }
.sign-anchor-label { font-size: 11px; color: var(--muted); }
.anchor-dot { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; vertical-align: 1px; }
.sign-anchor-map { width: 100%; max-height: 220px; border: 1px solid #30383c; border-radius: 7px; background: #161a1c; touch-action: none; }
.sign-anchor-map .map-plate { fill: #2b3336; stroke: #5d6b70; stroke-width: .6; }
.sign-anchor-map .map-text { fill: #4b585e; }
.sign-anchor-map .map-anchor { cursor: grab; }
.sign-anchor-map .map-anchor.dragging { cursor: grabbing; opacity: .85; }
.sign-anchor-map .map-anchor:focus-visible circle { stroke: #fff; }
.sign-anchor-map text { fill: #111; font-weight: 700; pointer-events: none; font-family: "DM Sans", sans-serif; }
.sign-anchor-list { display: grid; gap: 5px; }
.sign-anchor-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 62px 62px 27px; align-items: center; gap: 5px; }
.sign-anchor-row select, .anchor-coord input { width: 100%; min-width: 0; height: 27px; border: 1px solid #30383c; border-radius: 5px; background: #202529; color: #dfe6e7; font-size: 11.5px; }
.anchor-coord { display: flex; align-items: center; gap: 2px; font-size: 11px; color: var(--muted); }
.anchor-badge { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #111; font-size: 11px; font-weight: 700; }
.sign-anchor-row .icon-remove { width: 27px; height: 27px; border: 1px solid #30383c; border-radius: 5px; background: #202529; color: #c9d1d3; cursor: pointer; }
.sign-anchor-row .icon-remove:hover { border-color: #e06c6c; color: #e06c6c; }
.preview-capped-bar::before { inset: 4px 11px; border-radius: 999px 999px 2px 2px; background: linear-gradient(90deg, #9ca5a7, #f1f3f3 45%, #aeb5b7); }
.preview-capped-tube::before { inset: 4px 9px; border-radius: 4px; clip-path: polygon(18% 0, 82% 0, 100% 8%, 100% 92%, 82% 100%, 18% 100%, 0 92%, 0 8%); background: linear-gradient(90deg, #9ca5a7, #f1f3f3 45%, #aeb5b7); }
.preview-capped-tube::after { position: absolute; top: 4px; left: 50%; width: 12px; height: 5px; margin-left: -6px; border-radius: 50%; content: ""; background: #39413f; }

/* Vista encendida del neón */
.lit-toggle[aria-pressed="true"] { color: #1a1205; background: #ffcf6b; border-color: #ffcf6b; box-shadow: 0 0 14px rgba(255, 207, 107, .55); }
.sign-lit { display: grid; gap: 10px; margin-bottom: 12px; }
.sign-lit-toggle, .sign-lit-paint { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.sign-lit-toggle svg, .sign-lit-paint svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.swatch-row { display: flex; flex-wrap: wrap; gap: 7px; }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .18); background: var(--swatch); cursor: pointer; padding: 0; }
.swatch[aria-pressed="true"] { outline: 2px solid var(--accent, #62c6a6); outline-offset: 2px; }
.swatch[draggable="true"] { cursor: grab; }
body.lit-mode .viewport-help { opacity: .35; }
.viewport-topline #reset-camera { margin-left: auto; }
.viewport-topline .lit-toggle { margin-left: 8px; }

/* Generadores con imagen */
.kit-image-row { display: flex; align-items: center; gap: 10px; }
.kit-image-preview { width: 96px; height: 64px; border-radius: 6px; background: #0f1316; border: 1px solid #2b3338; }
.kit-image-pick { cursor: pointer; display: inline-flex; align-items: center; }

/* Imagen a 3D con IA */
.ai-dialog form { display: grid; gap: 10px; max-width: 520px; }
.ai-photo-row { display: flex; align-items: center; gap: 12px; }
.ai-photo-pick { cursor: pointer; display: inline-flex; align-items: center; }
.ai-preview { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid #2b3338; }
#ai-progress { width: 100%; height: 8px; accent-color: #62c6a6; }

/* Íconos de los generadores con IA */
.preview-gen-ai::before { inset: 3px; border-radius: 6px; background: radial-gradient(circle at 35% 35%, #ffd7f0 0 18%, transparent 19%), linear-gradient(145deg, #ff7eb6, #8d6cf0); }
.preview-gen-ai::after { position: absolute; right: 1px; bottom: 1px; width: 11px; height: 11px; content: ""; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.preview-gen-statue::before { inset: 2px 8px 9px; border-radius: 45% 45% 30% 30%; background: linear-gradient(145deg, #ffe3f0, #ff7eb6); }
.preview-gen-statue::after { position: absolute; left: 4px; right: 4px; bottom: 2px; height: 7px; border-radius: 2px; content: ""; background: linear-gradient(90deg, #8d9399, #c9ced3); }
.preview-gen-relief::before, .preview-gen-lightbox::before, .preview-gen-signbox::before { border-radius: 3px; background: linear-gradient(145deg, #fff3d6, #ff7eb6); }

/* Enviar a la impresora */
.send-manage { margin-top: 6px; border-top: 1px solid #2c3437; padding-top: 8px; }
.send-manage summary { cursor: pointer; color: #bac4c6; font-size: 11px; margin-bottom: 8px; }
#send-actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* Título automático del proyecto */
.project-name-auto { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-left: 2px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #6f7b7e; cursor: pointer; }
.project-name-auto svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.project-name-auto:hover { color: #e9eef0; border-color: #364043; }
.project-name-auto.active { color: #ffcf9e; }

.paint-filaments { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 4px 0 10px; }
.paint-swatch { display: grid; justify-items: center; gap: 4px; padding: 6px 2px; border: 1px solid #3a4246; border-radius: 6px; background: rgba(255,255,255,0.03); cursor: pointer; font-size: 11px; color: inherit; }
.paint-swatch.active { border-color: #ffd166; box-shadow: 0 0 0 2px rgba(255,209,102,0.35); }
.paint-swatch-pick { width: 38px; height: 28px; border: 1px solid #4b5458; border-radius: 5px; cursor: pointer; }
.paint-swatch-edit { position: relative; font-size: 10px; opacity: 0.75; cursor: pointer; text-decoration: underline; }
.paint-swatch-edit input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
canvas.painting { cursor: crosshair; }

/* Pasar el mouse por las piezas: etiqueta con el nombre y el tacho para borrar */
#scene.hovering-piece { cursor: pointer; }
.hover-chip { position: absolute; left: 0; top: 0; z-index: 6; display: flex; align-items: center; gap: 2px; padding: 2px 2px 2px 9px; border-radius: 999px; background: rgba(23, 29, 33, 0.92); border: 1px solid #ffcf5a; color: #f3f5f6; font-size: 12px; line-height: 1; white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); pointer-events: auto; }
.hover-chip[hidden] { display: none; }
.hover-chip.is-selected { border-color: #62c6a6; }
.hover-chip-name { cursor: pointer; max-width: 220px; overflow: hidden; text-overflow: ellipsis; padding: 4px 4px 4px 0; }
.hover-chip-delete { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: #ff8a7a; cursor: pointer; }
.hover-chip-delete:hover { background: #c0392b; color: #fff; }
.hover-chip-delete svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* Selección por recuadro (Ctrl + arrastrar) */
.marquee-box { position: absolute; z-index: 5; border: 1.5px dashed #ffcf5a; background: rgba(255, 207, 90, 0.08); pointer-events: none; }
.marquee-box[hidden] { display: none; }

.division-menu { position: relative; }
.division-menu summary { list-style: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; cursor: pointer; color: var(--muted, #9aa7ad); }
.division-menu summary::-webkit-details-marker { display: none; }
.division-menu summary:hover { background: rgba(255,255,255,0.06); }
.division-menu summary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.division-menu-list { position: absolute; top: 34px; left: -60px; z-index: 60; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; width: min(520px, 92vw); max-height: 75vh; overflow-y: auto; padding: 8px; border-radius: 12px; background: #1b2024; border: 1px solid #2c3439; box-shadow: 0 12px 30px rgba(0,0,0,0.45); }
.division-link { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; color: inherit; text-decoration: none; }
.division-link:hover, .division-link.active { background: rgba(255,255,255,0.07); }
.division-link strong { display: block; font: 600 14px "Space Grotesk", sans-serif; }
.division-link small { display: block; font-size: 11px; opacity: 0.7; }
.division-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #14171b; font: 700 13px "Space Grotesk", sans-serif; flex: none; }

.sign-image-box canvas { cursor: default; background: #101315; }
.sign-image-box.picking canvas { cursor: crosshair; }

.sign-size-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sign-size-row[hidden] { display: none; }

.export-optimize-row { display: grid; gap: 6px; }
.export-optimize-row select { width: 100%; }

/* Panel simple (cartel, placa y cajas): solo tamaño, color, mover y borrar. El resto en «Más opciones». */
.quick-controls { display: grid; gap: 8px; }
.quick-fields { display: grid; gap: 8px; }
.quick-note { margin: 0; font-size: 11.5px; }
.quick-colors { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.quick-colors .color-field { margin: 0; gap: 8px; }
.quick-move { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.quick-btn { min-height: 32px; border: 1px solid var(--line, #33393b); border-radius: 7px; background: var(--panel-raised); color: inherit; font: inherit; font-size: 15px; cursor: pointer; }
.quick-btn.wide { grid-column: span 2; font-size: 12.5px; }
.quick-btn:hover, .quick-chip:hover { border-color: #62c6a6; }
.quick-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.quick-buttons .button { min-height: 32px; font-size: 12.5px; }
.quick-buttons .danger-text { border: 1px solid #6b3434; background: #3a1d1d; color: #ffb3b3; border-radius: 7px; cursor: pointer; }
.quick-more { justify-self: start; border: 0; background: none; color: #8fd8bf; font: inherit; font-size: 12.5px; cursor: pointer; padding: 4px 0; }
.quick-chip { margin-left: auto; margin-right: 6px; border: 1px solid var(--line, #33393b); border-radius: 999px; background: transparent; color: #8fd8bf; font: inherit; font-size: 11.5px; padding: 3px 10px; cursor: pointer; }
.inspector.simple-mode:not(.show-more) .group-controls,
.inspector.simple-mode:not(.show-more) #hollow-controls,
.inspector.simple-mode:not(.show-more) #edge-controls,
.inspector.simple-mode:not(.show-more) #paint-controls,
.inspector.simple-mode:not(.show-more) #kit-advanced,
.inspector.simple-mode:not(.show-more) #rotation-title,
.inspector.simple-mode:not(.show-more) #rotation-grid,
.inspector.simple-mode:not(.show-more) #object-color-field,
.inspector.simple-mode:not(.show-more) #sign-controls { display: none !important; }
.quick-material select { width: 100%; height: 32px; padding: 0 9px; border: 1px solid #30383c; border-radius: 5px; color: #cbd3d3; background: #202529; font-size: 12px; }
.quick-controls .section-title { margin-top: 6px; }
.quick-note { margin-bottom: 4px !important; }
.inspector.simple-mode:not(.show-more):has(#standard-dimensions[hidden]):has(#thread-controls[hidden]):has(#washer-controls[hidden]) .section-title:has(#dimensions-heading) { display: none !important; }
.inspector.simple-mode.multi-select:not(.show-more) .group-controls { display: grid !important; }

/* Botones para quitar camas extra */
.bed-chips { position: absolute; left: 18px; bottom: 40px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; max-width: 60%; }
.bed-chips[hidden] { display: none; }
.bed-chip { border: 1px solid #3b4247; background: #22282c; color: #ffcf9e; border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 11px; cursor: pointer; }
.bed-chip span { margin-left: 4px; color: #ff8a7a; }
.bed-chip:hover { background: #2d3438; border-color: #ff8a7a; }
.bed-remove-dialog { max-width: 360px; border: 1px solid #3b4247; border-radius: 12px; background: #1f2427; color: #e8ecee; padding: 18px; }
.bed-remove-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.bed-remove-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* Caja desde imagen */
.imagebox-photo-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0; }
.imagebox-preview { width: 240px; max-width: 100%; height: 150px; border-radius: 8px; background: #fff; border: 1px solid var(--line, #444); }
.imagebox-measures, .imagebox-uses { border: 1px solid var(--line, #444); border-radius: 8px; padding: 6px 10px 8px; margin: 8px 0; display: grid; gap: 6px; }
.imagebox-measures legend, .imagebox-uses legend { font-weight: 600; font-size: 13px; padding: 0 4px; }
.imagebox-measures .field { grid-template-columns: 1fr auto; align-items: center; }
.imagebox-mm { display: inline-flex; align-items: center; gap: 6px; }
.imagebox-mm input { width: 90px; }
.imagebox-lid-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: 22px; }
.imagebox-error { color: #ff7a6b; min-height: 0; }
.imagebox-error:empty { display: none; }
#kit-imagebox-glasses { width: 100%; margin-top: 6px; }

/* Personalizar por partes (panel derecho) */
.custom-controls .custom-spin { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.custom-controls .custom-spin > span { font-size: 12px; color: var(--muted); margin-right: 4px; }
.custom-controls .custom-spin .active { border-color: var(--mint); color: var(--mint); }
.custom-done { display: flex; flex-wrap: wrap; gap: 6px; }
.custom-done:empty { display: none; }
.custom-done button { border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--mint); font: inherit; font-size: 11px; padding: 3px 10px; cursor: pointer; }
.custom-card { display: grid; gap: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.custom-part-name { margin: 0; font-weight: 600; font-size: 13px; color: var(--text); }
.custom-color { flex-direction: row; align-items: center; justify-content: space-between; }
.custom-actions, .custom-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.custom-nav .button-primary { margin-left: auto; }
.custom-decor { display: grid; gap: 8px; border-top: 1px dashed var(--line); padding-top: 8px; }
.custom-decor[hidden], .custom-card[hidden] { display: none; }
.custom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.custom-grid input { width: 100%; }
.custom-split { display: grid; gap: 6px; }

/* «De imagen a estuche»: tarjeta grande a color (24/10) */
.shape-banner { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 8px; padding: 8px 10px; border: 1px solid #c9a22766; border-radius: 10px; background: linear-gradient(135deg, #2a2116, #3b1a20); color: #f5ead0; cursor: pointer; text-align: left; }
.shape-banner:hover { border-color: #f3d77a; box-shadow: 0 0 0 2px #c9a22744; }
.shape-banner svg { flex: 0 0 96px; width: 96px; height: 64px; }
.shape-banner b { display: block; font: 700 13px "Segoe UI", sans-serif; color: #f3d77a; }
.shape-banner small { display: block; margin-top: 2px; font: 11px/1.35 "Segoe UI", sans-serif; color: #e8dcc0; }

.imagebox-orient { display: grid; gap: 4px; padding: 6px 8px; border: 1px dashed var(--line, #555); border-radius: 8px; }
.imagebox-orient.needs { border-color: #e0782d; }
.imagebox-view { display: grid; gap: 6px; margin-top: 6px; }
.imagebox-3d { width: 360px; max-width: 100%; height: 240px; border-radius: 8px; background: #f3f1ec; border: 1px solid var(--line, #444); cursor: grab; touch-action: none; }
.imagebox-orient label { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.imagebox-orient input[type="radio"] { width: 16px; height: 16px; flex: none; margin: 0; }