* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: #1a1a1a;
      color: #fff;
      overflow: hidden;
    }

    #canvas {
      display: block;
      width: 100%;
      height: 100vh;
    }

    .ui-panel {
      position: fixed;
      top: 20px;
      right: 20px;
      background: rgba(0, 0, 0, 0.8);
      border: 2px solid #00ff00;
      padding: 20px;
      border-radius: 8px;
      width: 300px;
      max-height: 90vh;
      overflow-y: auto;
      z-index: 100;
    }

    .ui-panel h2 {
      margin-bottom: 15px;
      font-size: 18px;
      color: #00ff00;
    }

    .control-group {
      margin-bottom: 20px;
      padding-bottom: 15px;
      border-bottom: 1px solid #333;
    }

    .control-group label {
      display: block;
      font-size: 13px;
      margin-bottom: 8px;
      color: #aaa;
    }

    .control-group input,
    .control-group button,
    .control-group select {
      width: 100%;
      padding: 8px;
      margin-bottom: 8px;
      background: #222;
      border: 1px solid #444;
      color: #fff;
      border-radius: 4px;
      font-size: 12px;
      cursor: pointer;
    }

    .control-group input:focus,
    .control-group button:focus,
    .control-group select:focus {
      outline: none;
      border-color: #00ff00;
      box-shadow: 0 0 5px #00ff00;
    }

    .control-group button {
      background: #111;
      border: 1px solid #00ff00;
      color: #00ff00;
      font-weight: bold;
      transition: all 0.3s;
    }

    .control-group button:hover {
      background: #00ff00;
      color: #000;
    }

    .control-group button.export-btn {
      background: #004400;
      border-color: #00dd00;
      color: #00ff00;
      font-size: 13px;
      font-weight: bold;
    }

    .control-group button.export-btn:hover {
      background: #00dd00;
      color: #000;
    }

    .button-row {
      display: flex;
      gap: 10px;
    }

    .button-row button {
      flex: 1;
    }

    .info-text {
      font-size: 11px;
      color: #666;
      margin-top: 5px;
      line-height: 1.4;
    }

    .status {
      position: fixed;
      bottom: 20px;
      left: 20px;
      background: rgba(0, 0, 0, 0.8);
      border: 1px solid #00ff00;
      padding: 15px;
      border-radius: 4px;
      font-size: 12px;
      z-index: 100;
    }

    .status-selected {
      color: #00ff00;
      font-weight: bold;
    }

    .axis-inputs {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
    }

    .axis-inputs input {
      margin: 0;
    }

    .slider-group {
      margin-bottom: 10px;
    }

    .slider-group input[type="range"] {
      width: 100%;
      height: 6px;
      padding: 0;
      cursor: pointer;
    }

    .slider-value {
      font-size: 11px;
      color: #888;
      margin-top: 4px;
    }

    /* Modal Styles */
    .modal {
      display: none;
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6);
      animation: fadeIn 0.3s;
    }

    .modal.show {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .modal-content {
      background-color: #1a1a1a;
      padding: 30px;
      border: 2px solid #00ff00;
      border-radius: 8px;
      width: 90%;
      max-width: 800px;
      max-height: 85vh;
      overflow-y: auto;
      box-shadow: 0 4px 20px rgba(0, 255, 0, 0.3);
    }

    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      border-bottom: 1px solid #333;
      padding-bottom: 15px;
    }

    .modal-header h2 {
      color: #00ff00;
      font-size: 22px;
    }

    .close-btn {
      font-size: 28px;
      font-weight: bold;
      color: #00ff00;
      cursor: pointer;
      background: none;
      border: none;
      padding: 0;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .close-btn:hover {
      color: #ff4444;
    }

    .code-block {
      background: #0a0a0a;
      border: 1px solid #333;
      border-radius: 4px;
      padding: 15px;
      margin-bottom: 15px;
      font-family: 'Courier New', monospace;
      font-size: 12px;
      color: #00ff00;
      overflow-x: auto;
      white-space: pre-wrap;
      word-break: break-word;
      max-height: 500px;
      overflow-y: auto;
    }

    .copy-btn {
      background: #00ff00;
      color: #000;
      border: none;
      padding: 10px 20px;
      border-radius: 4px;
      cursor: pointer;
      font-weight: bold;
      margin-bottom: 15px;
      transition: all 0.3s;
    }

    .copy-btn:hover {
      background: #00dd00;
      transform: scale(1.05);
    }

    .copy-btn.copied {
      background: #44ff44;
    }

    .section-title {
      color: #00ff00;
      font-size: 14px;
      font-weight: bold;
      margin-top: 20px;
      margin-bottom: 10px;
      border-bottom: 1px solid #333;
      padding-bottom: 5px;
    }

canvas {
  cursor: grab;
  touch-action: none;
}

canvas:active {
  cursor: grabbing;
}

/* Left modeling toolbar */
.tool-palette {
  position: fixed;
  inset: 16px auto 16px 16px;
  z-index: 300;
  width: 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 6px;
  overflow: visible;
  border: 1px solid #333;
  border-radius: 10px;
  background: rgba(10, 10, 10, 0.94);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
}

.tool-palette__brand {
  width: 38px;
  padding: 8px 0 9px;
  color: #00ff00;
  border-bottom: 1px solid #333;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.5px;
  text-align: center;
}

.tool-button {
  position: relative;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #bcbcbc;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  font: 22px/1 'Segoe UI Symbol', 'Segoe UI', sans-serif;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}

.tool-button:hover,
.tool-button:focus-visible {
  color: #fff;
  border-color: #444;
  background: #252525;
  outline: none;
}

.tool-button.is-active,
.tool-button[aria-pressed="true"] {
  color: #050505;
  border-color: #00ff00;
  background: #00ff00;
  box-shadow: 0 0 14px rgba(0, 255, 0, 0.22);
}

.tool-button--danger:hover,
.tool-button--danger:focus-visible {
  color: #fff;
  border-color: #ff4d4d;
  background: #9c2222;
}

.tool-button::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  z-index: 500;
  padding: 7px 9px;
  color: #eee;
  border: 1px solid #3a3a3a;
  border-radius: 5px;
  background: #141414;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-4px, -50%);
  transition: opacity 120ms ease, transform 120ms ease;
}

.tool-button:hover::after,
.tool-button:focus-visible::after {
  opacity: 1;
  transform: translate(0, -50%);
}

.tool-separator {
  width: 30px;
  height: 1px;
  flex: 0 0 1px;
  margin: 2px 0;
  background: #333;
}

.tool-palette__spacer {
  min-height: 4px;
  flex: 1;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Advanced editor is opened from the toolbar. */
.ui-panel.is-hidden {
  display: none;
}

.panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #333;
}

.ui-panel .panel-heading h2 {
  margin: 2px 0 0;
}

.panel-kicker {
  color: #7b7b7b;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

.panel-close {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  padding: 0;
  color: #aaa;
  border: 1px solid #3c3c3c;
  border-radius: 5px;
  background: #1e1e1e;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.panel-close:hover {
  color: #fff;
  border-color: #ff4d4d;
  background: #8b1f1f;
}

.status {
  left: 86px;
}

@media (max-height: 720px) {
  .tool-palette {
    overflow-y: auto;
  }

  .tool-palette__spacer {
    display: none;
  }
}

@media (max-width: 680px) {
  .ui-panel {
    right: 10px;
    top: 10px;
    width: min(300px, calc(100vw - 86px));
    max-height: calc(100vh - 20px);
  }

  .status {
    right: 10px;
    left: 80px;
    bottom: 10px;
  }
}

/* Shape library */
.shape-picker {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.shape-picker.is-open {
  display: flex;
}

.shape-picker__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.76);
  backdrop-filter: blur(5px);
}

.shape-picker__dialog {
  position: relative;
  width: min(980px, 100%);
  max-height: min(820px, calc(100vh - 48px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #414141;
  border-radius: 14px;
  background: #151515;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 255, 0, 0.08);
}

.shape-picker__header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 26px 18px;
  border-bottom: 1px solid #303030;
}

.shape-picker__header h2 {
  margin: 4px 0 6px;
  color: #00ff00;
  font-size: 24px;
}

.shape-picker__header p {
  max-width: 670px;
  color: #8f8f8f;
  font-size: 12px;
  line-height: 1.5;
}

.shape-picker__close {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  color: #aaa;
  border: 1px solid #3c3c3c;
  border-radius: 7px;
  background: #202020;
  font-size: 26px;
  cursor: pointer;
}

.shape-picker__close:hover {
  color: #fff;
  border-color: #ff5555;
  background: #8b1f1f;
}

.shape-picker__search-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 26px 10px;
}

#shapeSearch {
  min-width: 0;
  flex: 1;
  padding: 11px 13px;
  color: #fff;
  border: 1px solid #3b3b3b;
  border-radius: 7px;
  outline: none;
  background: #0d0d0d;
  font-size: 13px;
}

#shapeSearch:focus {
  border-color: #00cc00;
  box-shadow: 0 0 0 3px rgba(0, 255, 0, 0.1);
}

#shapeResultCount {
  color: #777;
  font-size: 11px;
  white-space: nowrap;
}

.shape-picker__categories {
  display: flex;
  gap: 7px;
  padding: 4px 26px 14px;
  overflow-x: auto;
}

.category-chip {
  flex: 0 0 auto;
  padding: 7px 10px;
  color: #aaa;
  border: 1px solid #373737;
  border-radius: 999px;
  background: #1d1d1d;
  font-size: 11px;
  cursor: pointer;
}

.category-chip:hover,
.category-chip.is-active {
  color: #050505;
  border-color: #00ff00;
  background: #00ff00;
}

.shape-picker__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(110px, 1fr));
  gap: 9px;
  padding: 0 26px 26px;
  overflow-y: auto;
}

.shape-card {
  min-height: 116px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 8px 10px;
  color: #ccc;
  border: 1px solid #303030;
  border-radius: 9px;
  background: #1b1b1b;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}

.shape-card:hover,
.shape-card:focus-visible {
  border-color: #00dd00;
  outline: none;
  background: #232a23;
  transform: translateY(-2px);
}

.shape-card__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  color: #00ef00;
  border: 1px solid #343434;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #303830, #101210 70%);
  font-size: 29px;
  line-height: 1;
}

.shape-card__name {
  width: 100%;
  overflow: hidden;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shape-card__category {
  color: #666;
  font-size: 9px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.shape-picker__empty {
  grid-column: 1 / -1;
  padding: 50px;
  color: #777;
  text-align: center;
}

@media (max-width: 900px) {
  .shape-picker__grid { grid-template-columns: repeat(4, minmax(100px, 1fr)); }
}

@media (max-width: 600px) {
  .shape-picker { padding: 10px; }
  .shape-picker__dialog { max-height: calc(100vh - 20px); }
  .shape-picker__header { padding: 18px; }
  .shape-picker__header p { display: none; }
  .shape-picker__search-row,
  .shape-picker__categories { padding-left: 18px; padding-right: 18px; }
  .shape-picker__grid {
    grid-template-columns: repeat(3, minmax(86px, 1fr));
    padding: 0 18px 18px;
  }
}

/* Local 3D model import */
.model-import {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 16px 26px 4px;
  padding: 13px 14px;
  border: 1px dashed #397039;
  border-radius: 9px;
  background: rgba(0, 255, 0, 0.035);
}

.model-import__icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  color: #00ff00;
  border: 1px solid #315831;
  border-radius: 8px;
  background: #142014;
  font-size: 23px;
  font-weight: 700;
}

.model-import__copy {
  min-width: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
}

.model-import__copy strong {
  color: #e4e4e4;
  font-size: 12px;
}

.model-import__copy span {
  color: #777;
  font-size: 10px;
  line-height: 1.35;
}

.model-import__button {
  flex: 0 0 auto;
  padding: 9px 12px;
  color: #050505;
  border: 1px solid #00ff00;
  border-radius: 6px;
  background: #00e800;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.model-import__button:hover {
  background: #45ff45;
}

.model-import__button:disabled {
  color: #777;
  border-color: #444;
  background: #292929;
  cursor: wait;
}

.model-import__status {
  position: absolute;
  right: 14px;
  bottom: -15px;
  color: #999;
  font-size: 9px;
}

.model-import__status.is-error {
  color: #ff6b6b;
}

@media (max-width: 600px) {
  .model-import {
    align-items: flex-start;
    flex-wrap: wrap;
    margin: 12px 18px 4px;
  }

  .model-import__button {
    width: 100%;
  }
}

/* Sculpting tool */
.sculpt-panel {
  position: fixed;
  top: 16px;
  left: 82px;
  z-index: 290;
  width: 228px;
  padding: 15px;
  border: 1px solid #383838;
  border-radius: 10px;
  background: rgba(14, 14, 14, 0.96);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
}

.sculpt-panel.is-hidden {
  display: none;
}

.sculpt-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
  padding-bottom: 12px;
  border-bottom: 1px solid #303030;
}

.sculpt-panel__header strong {
  display: block;
  margin-top: 3px;
  color: #00ff00;
  font-size: 15px;
}

.sculpt-panel__shortcut {
  min-width: 25px;
  padding: 5px;
  color: #999;
  border: 1px solid #3a3a3a;
  border-radius: 5px;
  background: #202020;
  font-size: 10px;
  text-align: center;
}

.sculpt-label,
.sculpt-slider-label {
  color: #8d8d8d;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.sculpt-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 7px 0 15px;
}

.sculpt-mode {
  padding: 8px 5px;
  color: #aaa;
  border: 1px solid #353535;
  border-radius: 5px;
  background: #202020;
  font-size: 10px;
  cursor: pointer;
}

.sculpt-mode:hover {
  color: #fff;
  border-color: #555;
}

.sculpt-mode.is-active {
  color: #050505;
  border-color: #00ff00;
  background: #00e800;
}

.sculpt-slider-label {
  display: flex;
  justify-content: space-between;
  margin: 10px 0 5px;
}

.sculpt-slider-label output {
  color: #00e800;
  font-family: monospace;
}

.sculpt-panel input[type="range"] {
  width: 100%;
  height: 5px;
  accent-color: #00e800;
  cursor: pointer;
}

.sculpt-undo {
  width: 100%;
  margin-top: 16px;
  padding: 9px;
  color: #bdbdbd;
  border: 1px solid #3a3a3a;
  border-radius: 6px;
  background: #222;
  font-size: 10px;
  cursor: pointer;
}

.sculpt-undo:hover:not(:disabled) {
  color: #050505;
  border-color: #00ff00;
  background: #00e800;
}

.sculpt-undo:disabled {
  color: #555;
  cursor: not-allowed;
}

.sculpt-panel p {
  margin-top: 12px;
  color: #666;
  font-size: 9px;
  line-height: 1.45;
}

.sculpt-cursor {
  position: fixed;
  z-index: 280;
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(0, 255, 0, 0.95);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), inset 0 0 12px rgba(0, 255, 0, 0.08);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.sculpt-cursor::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #00ff00;
  transform: translate(-50%, -50%);
}

body.is-sculpting canvas {
  cursor: none;
}

@media (max-width: 600px) {
  .sculpt-panel {
    top: 10px;
    right: 10px;
    left: 76px;
    width: auto;
  }
}

/* Project history, save/load, and export bar */
.project-bar {
  position: fixed;
  top: 16px;
  left: 50%;
  z-index: 420;
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 46px;
  padding: 6px;
  border: 1px solid #363636;
  border-radius: 10px;
  background: rgba(12, 12, 12, 0.96);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.48);
  transform: translateX(-50%);
}

.project-bar__brand {
  padding: 0 9px;
  color: #00ef00;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.project-bar__divider {
  width: 1px;
  height: 25px;
  margin: 0 2px;
  background: #303030;
}

.project-bar > button,
.export-control > button {
  height: 32px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  color: #b8b8b8;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  font-size: 11px;
  cursor: pointer;
}

.project-bar > button:hover:not(:disabled),
.export-control > button:hover,
.export-control > button[aria-expanded="true"] {
  color: #fff;
  border-color: #3e3e3e;
  background: #252525;
}

.project-bar > button:disabled {
  color: #484848;
  cursor: not-allowed;
}

.export-control {
  position: relative;
}

.export-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 245px;
  padding: 6px;
  border: 1px solid #3a3a3a;
  border-radius: 9px;
  background: #151515;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65);
}

.export-menu.is-hidden {
  display: none;
}

.export-menu button {
  width: 100%;
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 7px;
  padding: 10px;
  color: #bbb;
  border: 0;
  border-radius: 6px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.export-menu button:hover {
  color: #fff;
  background: #242b24;
}

.export-menu strong {
  color: #00ef00;
  font-size: 12px;
}

.export-menu small {
  color: #777;
  font-size: 9px;
  line-height: 1.35;
}

.project-status {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  padding: 6px 9px;
  color: #bdbdbd;
  border: 1px solid #363636;
  border-radius: 5px;
  background: rgba(15, 15, 15, 0.94);
  font-size: 9px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -4px);
  transition: opacity 150ms ease, transform 150ms ease;
}

.project-status.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.project-status.is-error {
  color: #ff7a7a;
  border-color: #713737;
}

@media (max-width: 760px) {
  .project-bar {
    top: 10px;
    max-width: calc(100vw - 90px);
  }

  .project-bar__brand,
  .project-bar button span,
  .project-bar__divider:first-of-type {
    display: none;
  }

  .project-bar > button,
  .export-control > button {
    padding: 0 8px;
    font-size: 16px;
  }
}

/* Geometry editing, measurement, hierarchy, and array tools */
.edit-panel,
.measure-panel {
  position: fixed;
  top: 16px;
  left: 82px;
  z-index: 290;
  width: 245px;
  padding: 15px;
  border: 1px solid #383838;
  border-radius: 10px;
  background: rgba(14, 14, 14, 0.96);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
}

.edit-panel.is-hidden,
.measure-panel.is-hidden,
.hierarchy-panel.is-hidden,
.array-dialog.is-hidden,
#radialArrayOptions.is-hidden,
#linearArrayOptions.is-hidden { display: none; }

.mini-panel-header,
.hierarchy-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 11px;
  border-bottom: 1px solid #303030;
}

.mini-panel-header strong,
.hierarchy-header strong { display: block; margin-top: 3px; color: #00ff00; font-size: 14px; }
.mini-panel-header > span { padding: 4px 7px; color: #888; border: 1px solid #3b3b3b; border-radius: 4px; font-size: 10px; }

.component-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 12px; }
.measure-panel .component-modes { grid-template-columns: 1fr 1fr; }
.component-modes button,
.hierarchy-actions button,
.secondary-action {
  padding: 8px 5px;
  color: #aaa;
  border: 1px solid #383838;
  border-radius: 5px;
  background: #202020;
  font-size: 10px;
  cursor: pointer;
}
.component-modes button:hover,
.hierarchy-actions button:hover,
.secondary-action:hover { color: #fff; border-color: #555; }
.component-modes button.is-active { color: #050505; border-color: #00ff00; background: #00e800; }
.edit-panel p,
.measure-panel p { color: #666; font-size: 9px; line-height: 1.5; }

.measure-dimensions,
.measure-result { margin: 9px 0; padding: 9px; border: 1px solid #303030; border-radius: 6px; background: #191919; color: #aaa; font: 10px/1.55 monospace; }
.measure-result { color: #00e800; }
.secondary-action { width: 100%; margin: 3px 0 10px; }

.hierarchy-panel {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 310;
  width: 300px;
  max-height: min(480px, calc(100vh - 90px));
  display: flex;
  flex-direction: column;
  padding: 15px;
  border: 1px solid #383838;
  border-radius: 10px;
  background: rgba(14, 14, 14, 0.97);
  box-shadow: 0 14px 42px rgba(0,0,0,.55);
}
.hierarchy-header button { width: 28px; height: 28px; color: #aaa; border: 1px solid #3b3b3b; border-radius: 5px; background: #222; font-size: 18px; cursor: pointer; }
.hierarchy-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.hierarchy-help { margin: 9px 1px; color: #606060; font-size: 8px; line-height: 1.4; }
.hierarchy-list { min-height: 80px; overflow-y: auto; border: 1px solid #292929; border-radius: 6px; background: #101010; }
.hierarchy-row { display: flex; align-items: center; gap: 7px; width: 100%; min-height: 34px; padding: 5px 7px; color: #aaa; border: 0; border-bottom: 1px solid #252525; background: transparent; text-align: left; cursor: pointer; }
.hierarchy-row:hover { background: #1e1e1e; }
.hierarchy-row.is-selected { color: #fff; background: #193019; }
.hierarchy-row.is-active { box-shadow: inset 3px 0 #00ff00; }
.hierarchy-row__indent { flex: 0 0 auto; }
.hierarchy-row__icon { width: 18px; color: #00cf00; text-align: center; }
.hierarchy-row__name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.hierarchy-row__type { color: #555; font-size: 8px; }
.hierarchy-empty { padding: 30px 10px; color: #555; font-size: 10px; text-align: center; }

.array-dialog { position: fixed; inset: 0; z-index: 1100; display: none; align-items: center; justify-content: center; padding: 20px; }
.array-dialog.is-open { display: flex; }
.array-dialog__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(4px); }
.array-dialog__content { position: relative; width: min(430px, 100%); padding: 20px; border: 1px solid #414141; border-radius: 12px; background: #171717; box-shadow: 0 25px 70px rgba(0,0,0,.7); }
.array-dialog__content header { display: flex; justify-content: space-between; margin-bottom: 16px; padding-bottom: 13px; border-bottom: 1px solid #303030; }
.array-dialog__content h2 { margin-top: 3px; color: #00ff00; font-size: 19px; }
.array-dialog__content header button { width: 30px; height: 30px; color: #aaa; border: 1px solid #444; border-radius: 5px; background: #222; font-size: 20px; cursor: pointer; }
.array-dialog__content > label,
.array-dialog__content #radialArrayOptions > label { display: grid; grid-template-columns: 1fr 150px; align-items: center; gap: 12px; margin: 10px 0; color: #aaa; font-size: 11px; }
.array-dialog input,
.array-dialog select { width: 100%; padding: 8px; color: #fff; border: 1px solid #3b3b3b; border-radius: 5px; background: #101010; }
.field-title { display: block; margin: 15px 0 7px; color: #aaa; font-size: 11px; }
.triple-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.triple-fields label { color: #666; font-size: 9px; }
.triple-fields input { margin-top: 4px; }
.array-dialog__footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid #303030; }
.array-dialog__footer button { padding: 9px 14px; color: #aaa; border: 1px solid #3a3a3a; border-radius: 6px; background: #222; cursor: pointer; }
.array-dialog__footer .primary-action { color: #050505; border-color: #00ff00; background: #00e800; font-weight: 700; }

.measure-label { position: fixed; z-index: 275; padding: 5px 7px; color: #050505; border-radius: 4px; background: #00ff00; font: 10px monospace; pointer-events: none; transform: translate(-50%, -120%); }

@media (max-width: 700px) {
  .hierarchy-panel { right: 10px; bottom: 10px; width: min(290px, calc(100vw - 90px)); }
  .edit-panel, .measure-panel { right: 10px; left: 76px; width: auto; }
}

/* Extended modeling suite */
.object-properties { display: grid; grid-template-columns: 1fr auto; gap: 5px; margin: 9px 0; }
.object-properties input { min-width: 0; padding: 7px; color: #fff; border: 1px solid #383838; border-radius: 5px; background: #101010; font-size: 10px; }
.object-properties button { padding: 6px 8px; color: #aaa; border: 1px solid #383838; border-radius: 5px; background: #202020; font-size: 9px; cursor: pointer; }
.object-properties button:nth-of-type(2), .object-properties button:nth-of-type(3) { grid-column: span 1; }
.hierarchy-row__utility { width: 22px; flex: 0 0 22px; color: #777; border: 0; background: transparent; cursor: pointer; }
.hierarchy-row.is-locked .hierarchy-row__name { color: #777; }
.hierarchy-row.is-hidden-object .hierarchy-row__name { opacity: .42; text-decoration: line-through; }

.face-actions { margin-top: 12px; padding-top: 10px; border-top: 1px solid #303030; }
.face-actions label { display: flex; align-items: center; justify-content: space-between; color: #888; font-size: 9px; }
.face-actions input { width: 80px; padding: 6px; color: #fff; border: 1px solid #3a3a3a; border-radius: 4px; background: #111; }
.face-actions button { width: 100%; margin-top: 7px; padding: 8px; color: #050505; border: 1px solid #00ff00; border-radius: 5px; background: #00e800; font-size: 10px; cursor: pointer; }

.floating-tool-panel { position: fixed; top: 76px; right: 18px; z-index: 330; width: 280px; max-height: calc(100vh - 95px); overflow-y: auto; padding: 15px; border: 1px solid #393939; border-radius: 10px; background: rgba(14,14,14,.97); box-shadow: 0 15px 45px rgba(0,0,0,.58); }
.floating-tool-panel.is-hidden { display: none; }
.floating-tool-panel > label { display: grid; grid-template-columns: 80px 1fr 34px; align-items: center; gap: 8px; margin: 10px 0; color: #999; font-size: 10px; }
.floating-tool-panel input[type="color"] { width: 100%; height: 30px; border: 1px solid #444; background: #111; }
.floating-tool-panel input[type="range"] { width: 100%; accent-color: #00e800; }
.floating-tool-panel output { color: #00e800; font: 9px monospace; }
.floating-tool-panel .check-row { display: flex; grid-template-columns: none; }
.floating-tool-panel select { padding: 7px; color: #fff; border: 1px solid #3b3b3b; border-radius: 5px; background: #111; }
.three-actions, .boolean-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.three-actions button, .boolean-actions button { padding: 8px 4px; color: #aaa; border: 1px solid #383838; border-radius: 5px; background: #202020; font-size: 9px; cursor: pointer; }
.three-actions button:hover, .boolean-actions button:hover { color: #050505; border-color: #00ff00; background: #00e800; }
.statistics-content { display: grid; grid-template-columns: 1fr auto; gap: 8px 15px; padding: 4px; color: #aaa; font: 11px/1.5 monospace; }
.statistics-content strong { color: #00e800; text-align: right; }

.view-widget { position: fixed; top: 76px; left: 50%; z-index: 270; display: flex; gap: 4px; padding: 4px; border: 1px solid #333; border-radius: 7px; background: rgba(15,15,15,.9); transform: translateX(-50%); }
.view-widget button { width: 30px; height: 26px; color: #999; border: 1px solid transparent; border-radius: 4px; background: transparent; font: 10px monospace; cursor: pointer; }
.view-widget button:hover, .view-widget button.is-active { color: #050505; border-color: #00ff00; background: #00e800; }
.box-selection { position: fixed; z-index: 800; display: none; border: 1px solid #00ff00; background: rgba(0,255,0,.1); pointer-events: none; }

.autosave-recovery { position: fixed; right: 18px; top: 76px; z-index: 900; display: flex; align-items: center; gap: 8px; max-width: 420px; padding: 10px; border: 1px solid #3f6d3f; border-radius: 8px; background: #142014; box-shadow: 0 12px 35px rgba(0,0,0,.55); }
.autosave-recovery.is-hidden { display: none; }
.autosave-recovery div { display: flex; flex: 1; flex-direction: column; gap: 2px; }
.autosave-recovery strong { color: #00ef00; font-size: 11px; }
.autosave-recovery span { color: #888; font-size: 9px; }
.autosave-recovery button { padding: 7px 9px; color: #bbb; border: 1px solid #3b3b3b; border-radius: 5px; background: #222; font-size: 9px; cursor: pointer; }
.autosave-recovery button:first-of-type { color: #050505; border-color: #00ff00; background: #00e800; }

@media (max-width: 700px) {
  .floating-tool-panel { right: 10px; width: min(275px, calc(100vw - 90px)); }
  .view-widget { top: 64px; }
}

/* Bloxd schematic exporter */
.bloxd-export-dialog { position: fixed; inset: 0; z-index: 1250; display: none; align-items: center; justify-content: center; padding: 20px; }
.bloxd-export-dialog.is-open { display: flex; }
.bloxd-export-dialog__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.78); backdrop-filter: blur(5px); }
.bloxd-export-dialog__content { position: relative; width: min(620px,100%); max-height: calc(100vh - 40px); overflow-y: auto; padding: 22px; border: 1px solid #406640; border-radius: 13px; background: #151715; box-shadow: 0 25px 80px rgba(0,0,0,.75); }
.bloxd-export-dialog__content header { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 17px; padding-bottom: 15px; border-bottom: 1px solid #303530; }
.bloxd-export-dialog__content h2 { margin: 4px 0 5px; color: #00ff00; font-size: 21px; }
.bloxd-export-dialog__content header p { color: #858585; font-size: 10px; line-height: 1.45; }
.bloxd-export-dialog__content code { color: #baffba; }
.bloxd-export-dialog__content header button { width: 32px; height: 32px; flex: 0 0 32px; color: #aaa; border: 1px solid #404540; border-radius: 6px; background: #222; font-size: 21px; cursor: pointer; }
.bloxd-export-grid { display: grid; gap: 11px; }
.bloxd-export-grid label { display: grid; grid-template-columns: 165px 1fr; align-items: center; gap: 10px; color: #aaa; font-size: 10px; }
.bloxd-export-grid input, .bloxd-export-grid select { width: 100%; padding: 8px; color: #fff; border: 1px solid #3a403a; border-radius: 5px; background: #0f110f; }
.bloxd-export-grid small { grid-column: 2; margin-top: -7px; color: #5f655f; font-size: 8px; line-height: 1.35; }
.bloxd-export-estimate { margin-top: 15px; padding: 10px; color: #b8c6b8; border: 1px solid #3b483b; border-radius: 6px; background: #181d18; font: 9px/1.5 monospace; }
.bloxd-export-estimate.is-warning { color: #ffb27f; border-color: #68452e; background: #211811; }
.bloxd-export-info { display: flex; justify-content: space-between; gap: 10px; margin: 16px 0 10px; padding: 9px; color: #718071; border: 1px solid #293329; border-radius: 6px; background: #101510; font-size: 8px; }
.bloxd-progress { margin-top: 12px; }
.bloxd-progress.is-hidden, .bloxd-export-result.is-hidden { display: none; }
.bloxd-progress > div { height: 6px; overflow: hidden; border-radius: 99px; background: #292929; }
.bloxd-progress span { display: block; width: 0; height: 100%; background: #00e800; transition: width .15s linear; }
.bloxd-progress strong { display: block; margin-top: 6px; color: #888; font-size: 9px; font-weight: 500; }
.bloxd-export-result { margin-top: 12px; padding: 10px; color: #b5eeb5; border: 1px solid #365636; border-radius: 6px; background: #122012; font: 9px/1.5 monospace; }
.bloxd-export-result.is-error { color: #ff8b8b; border-color: #663939; background: #211313; }
.bloxd-export-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid #303530; }
.bloxd-export-footer button { padding: 9px 14px; color: #aaa; border: 1px solid #3b403b; border-radius: 6px; background: #222; cursor: pointer; }
.bloxd-export-footer .primary-action { color: #050505; border-color: #00ff00; background: #00e800; font-weight: 700; }
.bloxd-export-footer .primary-action:disabled { color: #666; border-color: #444; background: #292929; cursor: wait; }
@media(max-width:600px){.bloxd-export-grid label{grid-template-columns:1fr}.bloxd-export-grid small{grid-column:1;margin-top:-6px}.bloxd-export-info{flex-direction:column}}

/* Procedural generation studio */
.procedural-dialog { position: fixed; inset: 0; z-index: 1280; display: none; align-items: center; justify-content: center; padding: 18px; }
.procedural-dialog.is-open { display: flex; }
.procedural-dialog__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.82); backdrop-filter: blur(7px); }
.procedural-dialog__content { position: relative; display: flex; flex-direction: column; width: min(1050px,100%); height: min(720px,calc(100vh - 36px)); overflow: hidden; border: 1px solid #385538; border-radius: 14px; background: #121512; box-shadow: 0 30px 90px rgba(0,0,0,.8); }
.procedural-header { display: flex; justify-content: space-between; gap: 20px; padding: 20px 22px 16px; border-bottom: 1px solid #2a332a; background: linear-gradient(110deg,#182018,#121512 65%); }
.procedural-header h2 { margin: 3px 0 4px; color: #00f000; font-size: 22px; }
.procedural-header p { max-width: 720px; color: #747d74; font-size: 9px; line-height: 1.5; }
.procedural-header > button { width: 33px; height: 33px; color: #aaa; border: 1px solid #394139; border-radius: 6px; background: #202420; font-size: 21px; cursor: pointer; }
.procedural-workspace { display: grid; grid-template-columns: 340px 1fr; min-height: 0; flex: 1; }
.procedural-library { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid #2a332a; background: #0d100d; }
.procedural-search { display: flex; gap: 6px; padding: 13px; }
.procedural-search input { min-width: 0; flex: 1; padding: 9px; color: #ddd; border: 1px solid #303830; border-radius: 5px; outline: 0; background: #171b17; }
.procedural-search input:focus { border-color: #00aa00; }
.procedural-search button { width: 36px; color: #77cc77; border: 1px solid #365036; border-radius: 5px; background: #182118; cursor: pointer; }
.procedural-categories { display: flex; gap: 5px; overflow-x: auto; padding: 0 13px 10px; }
.procedural-categories button { padding: 5px 8px; white-space: nowrap; color: #777; border: 1px solid #2d332d; border-radius: 99px; background: transparent; font-size: 8px; cursor: pointer; }
.procedural-categories button.is-active { color: #081008; border-color: #00dc00; background: #00c900; }
.procedural-list { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; min-height: 0; overflow-y: auto; padding: 3px 13px 14px; }
.procedural-card { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 7px; min-height: 58px; padding: 9px; text-align: left; color: #929992; border: 1px solid #262d26; border-radius: 7px; background: #151915; cursor: pointer; }
.procedural-card:hover { border-color: #446244; background: #192019; }
.procedural-card.is-active { color: #d6f0d6; border-color: #00b900; background: #172517; box-shadow: inset 0 0 0 1px rgba(0,255,0,.08); }
.procedural-card__icon { color: #61c761; font-size: 23px; text-align: center; }
.procedural-card strong { display: block; font-size: 9px; line-height: 1.25; }
.procedural-card small { display: block; margin-top: 3px; color: #4f584f; font-size: 7px; }
.procedural-editor { min-width: 0; overflow-y: auto; padding: 22px; }
.procedural-selected { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.procedural-selected > span { display: grid; width: 56px; height: 56px; place-items: center; color: #00e500; border: 1px solid #335133; border-radius: 10px; background: #152015; font-size: 30px; }
.procedural-selected strong { color: #eee; font-size: 17px; }
.procedural-selected p { margin-top: 5px; color: #707970; font-size: 9px; line-height: 1.45; }
.procedural-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.procedural-fields label { display: grid; grid-template-columns: 1fr auto; gap: 6px; color: #8c958c; font-size: 9px; }
.procedural-fields label.wide { grid-column: 1 / -1; }
.procedural-fields input[type="number"], .procedural-fields input[type="text"] { grid-column: 1 / -1; width: 100%; padding: 8px; color: #e5e5e5; border: 1px solid #343c34; border-radius: 5px; background: #0d110d; }
.procedural-fields input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: #00d300; }
.procedural-fields input[type="color"] { grid-column: 1 / -1; width: 100%; height: 34px; padding: 3px; border: 1px solid #343c34; border-radius: 5px; background: #0d110d; }
.procedural-fields output { color: #00d900; font-family: monospace; }
.seed-input { display: flex; grid-column: 1 / -1; gap: 6px; }
.seed-input input { grid-column: auto!important; flex: 1; min-width: 0; }
.seed-input button, .procedural-presets button { padding: 7px 10px; color: #91ad91; border: 1px solid #344534; border-radius: 5px; background: #182018; cursor: pointer; }
.procedural-presets { display: flex; align-items: center; gap: 6px; margin-top: 17px; }
.procedural-presets span { margin-right: 4px; color: #626b62; font-size: 8px; text-transform: uppercase; letter-spacing: .06em; }
.procedural-note, .procedural-stats { margin-top: 13px; padding: 10px; border-radius: 6px; font-size: 8px; line-height: 1.5; }
.procedural-note { color: #758875; border: 1px solid #293829; background: #101710; }
.procedural-stats { color: #a5dba5; border: 1px solid #355235; background: #132013; font-family: monospace; }
.procedural-footer { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; padding: 14px 20px; border-top: 1px solid #2a332a; background: #101310; }
.procedural-footer button { padding: 9px 14px; color: #a5ada5; border: 1px solid #394139; border-radius: 6px; background: #202420; cursor: pointer; }
.procedural-footer .primary-action { color: #061006; border-color: #00ef00; background: #00d800; font-weight: 700; }
.procedural-footer .danger-outline { color: #ff9696; border-color: #713d3d; background: #211414; }
.procedural-footer .is-hidden { display: none; }
@media(max-width:760px){.procedural-workspace{grid-template-columns:1fr}.procedural-library{max-height:220px;border-right:0;border-bottom:1px solid #2a332a}.procedural-list{grid-template-columns:repeat(3,1fr)}.procedural-dialog__content{height:calc(100vh - 16px)}.procedural-dialog{padding:8px}.procedural-fields{grid-template-columns:1fr}.procedural-fields label.wide{grid-column:1}.procedural-header p{display:none}}
.procedural-preview { position: relative; height: 190px; margin: -5px 0 18px; overflow: hidden; border: 1px solid #2f442f; border-radius: 9px; background: radial-gradient(circle at 50% 45%,#1b251b,#090c09 70%); }
.procedural-preview canvas { display: block; width: 100%!important; height: 100%!important; }
.procedural-preview__badge { position: absolute; z-index: 2; top: 8px; left: 8px; padding: 4px 6px; color: #73d973; border: 1px solid #345a34; border-radius: 4px; background: rgba(8,14,8,.8); font-size: 7px; letter-spacing: .1em; pointer-events: none; }
.procedural-composer { margin-top: 18px; padding: 12px; border: 1px solid #2e3a2e; border-radius: 8px; background: #101510; }
.procedural-section-heading { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.procedural-section-heading strong { display: block; color: #b6c4b6; font-size: 10px; }
.procedural-section-heading small { display: block; margin-top: 3px; color: #536053; font-size: 7px; }
.procedural-section-heading button, .procedural-composer .remove-layer, .procedural-mutations button, .procedural-saved-presets button { padding: 6px 8px; color: #8fb38f; border: 1px solid #344734; border-radius: 4px; background: #172017; font-size: 8px; cursor: pointer; }
.procedural-layer-tabs { display: flex; gap: 5px; overflow-x: auto; margin: 11px 0; padding-bottom: 2px; }
.procedural-layer-tabs button { flex: 0 0 auto; max-width: 130px; padding: 6px 9px; overflow: hidden; color: #717c71; border: 1px solid #2c352c; border-radius: 5px; background: #131813; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.procedural-layer-tabs button.is-active { color: #baffba; border-color: #00a900; background: #172417; }
.procedural-layer-fields { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.procedural-layer-fields label { color: #697369; font-size: 8px; }
.procedural-layer-fields input, .procedural-layer-fields select { display: block; width: 100%; margin-top: 4px; padding: 6px; color: #ddd; border: 1px solid #313a31; border-radius: 4px; background: #0b0e0b; font-size: 8px; }
.procedural-composer .remove-layer { margin-top: 9px; color: #cf7777; border-color: #573535; background: #1d1212; }
.procedural-mutations { display: flex; align-items: center; gap: 5px; margin-top: 9px; }
.procedural-mutations span { margin-right: 5px; color: #626b62; font-size: 8px; text-transform: uppercase; letter-spacing: .06em; }
.procedural-mutations button { width: 29px; border-radius: 99px; }
.procedural-saved-presets { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 6px; margin-top: 10px; }
.procedural-saved-presets input, .procedural-saved-presets select { min-width: 0; padding: 7px; color: #bbb; border: 1px solid #333c33; border-radius: 5px; background: #0d110d; font-size: 8px; }
@media(max-width:760px){.procedural-layer-fields{grid-template-columns:1fr 1fr}.procedural-saved-presets{grid-template-columns:1fr auto}.procedural-preview{height:150px}}
.island-studio { margin-top: 17px; border: 1px solid #31503f; border-radius: 9px; background: linear-gradient(145deg,#101b17,#101410); }
.island-studio.is-hidden { display: none; }
.island-studio summary { display: flex; align-items: center; gap: 10px; padding: 11px 13px; cursor: pointer; list-style: none; }
.island-studio summary::-webkit-details-marker { display: none; }
.island-studio summary > span { font-size: 23px; }
.island-studio summary strong { display: block; color: #9fe8c1; font-size: 10px; }
.island-studio summary small { display: block; margin-top: 2px; color: #547565; font-size: 7px; }
.island-preset-row { display: flex; gap: 5px; overflow-x: auto; padding: 0 12px 11px; }
.island-preset-row button { flex: 0 0 auto; padding: 6px 9px; color: #8bc9ad; border: 1px solid #315744; border-radius: 99px; background: #13251d; font-size: 8px; cursor: pointer; }
.island-preset-row button:hover { color: #07130d; border-color: #49d698; background: #49d698; }
.island-control-section { padding: 10px 12px 12px; border-top: 1px solid #263a30; }
.island-control-section h3 { margin: 0 0 9px; color: #617d6d; font-size: 8px; letter-spacing: .09em; text-transform: uppercase; }
.island-control-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.island-control-grid label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px; color: #788d81; font-size: 8px; }
.island-control-grid input, .island-control-grid select { grid-column: 1 / -1; min-width: 0; width: 100%; padding: 6px; color: #d2ded7; border: 1px solid #304139; border-radius: 4px; background: #0b110e; font-size: 8px; accent-color: #38c886; }
.island-control-grid input[type="range"] { padding: 0; }
.island-control-grid input[type="color"] { height: 29px; padding: 2px; }
.island-control-grid output { color: #4fca8c; font-family: monospace; }
.island-control-grid .island-check { display: flex; justify-content: space-between; align-items: center; padding: 6px; border: 1px solid #304139; border-radius: 4px; background: #0b110e; }
.island-control-grid .island-check input { grid-column: auto; width: auto; }
@media(max-width:760px){.island-control-grid{grid-template-columns:1fr 1fr}}
.tree-preset-row { display:flex; gap:5px; overflow-x:auto; margin:-2px 0 10px; }
.tree-preset-row button { flex:0 0 auto; padding:5px 8px; color:#9bc58d; border:1px solid #3b5735; border-radius:5px; background:#142014; font-size:7px; cursor:pointer; }
.tree-preset-row button:hover { color:#071007; border-color:#6ad34d; background:#6ad34d; }
/* 3D / Bloxd mode switch and block editor */
.editor-mode-switch{display:flex;padding:2px;border:1px solid #354035;border-radius:6px;background:#111611}.editor-mode-switch button{padding:5px 10px;color:#687168;border:0;border-radius:4px;background:transparent;font:700 8px monospace;cursor:pointer}.editor-mode-switch button.is-active{color:#071007;background:#00dd00;box-shadow:0 0 10px rgba(0,255,0,.2)}
.voxel-panel{position:fixed;z-index:820;top:58px;left:72px;width:290px;max-height:calc(100vh - 76px);overflow:auto;padding:13px;border:1px solid #315b3c;border-radius:10px;background:rgba(12,18,13,.96);box-shadow:0 15px 50px rgba(0,0,0,.55)}.voxel-panel.is-hidden{display:none}.voxel-panel__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}.voxel-panel__header strong{color:#7fffa0;font-size:13px}.voxel-panel__header>span{color:#72917a;font:8px monospace}.voxel-tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.voxel-tool-grid button{display:grid;place-items:center;gap:2px;min-height:45px;color:#89968c;border:1px solid #2e3b31;border-radius:5px;background:#151c16;font-size:16px;cursor:pointer}.voxel-tool-grid small{font-size:7px}.voxel-tool-grid button.is-active{color:#071007;border-color:#00e33d;background:#00d53a}.voxel-tool-hint{margin:8px 0;padding:7px;color:#66836d;border:1px solid #29372c;border-radius:5px;background:#0c130e;font-size:8px;line-height:1.4}.voxel-block-picker label,.voxel-world-settings label{color:#718078;font-size:8px}.voxel-block-picker input,.voxel-current-block select,.voxel-world-settings input{width:100%;margin-top:4px;padding:7px;color:#ddd;border:1px solid #334038;border-radius:4px;background:#0b100c;font-size:8px}.voxel-current-block{display:grid;grid-template-columns:31px 1fr;gap:6px;margin-top:6px}.voxel-current-block span{border:1px solid #526056;border-radius:4px}.voxel-selection-actions{display:grid;gap:6px;margin-top:11px;padding-top:10px;border-top:1px solid #29342c}.voxel-selection-actions>span{color:#78b989;font:8px monospace}.voxel-selection-actions>div,.voxel-nudge{display:flex;flex-wrap:wrap;gap:4px}.voxel-selection-actions button,.voxel-world-settings button{padding:5px 7px;color:#8da494;border:1px solid #34453a;border-radius:4px;background:#172019;font-size:7px;cursor:pointer}.voxel-world-settings{display:grid;gap:7px;margin-top:10px;padding-top:10px;border-top:1px solid #29342c}
.voxel-convert-dialog{position:fixed;inset:0;z-index:1400;display:none;align-items:center;justify-content:center;padding:20px}.voxel-convert-dialog.is-open{display:flex}.voxel-convert-dialog__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.86);backdrop-filter:blur(6px)}.voxel-convert-dialog>section{position:relative;width:min(560px,100%);padding:20px;border:1px solid #366944;border-radius:12px;background:#131814}.voxel-convert-dialog header{display:flex;justify-content:space-between;gap:15px;padding-bottom:13px;border-bottom:1px solid #2b372e}.voxel-convert-dialog h2{margin:4px 0;color:#66ff8e}.voxel-convert-dialog header p{color:#7c867e;font-size:9px;line-height:1.5}.voxel-convert-dialog header button{width:31px;height:31px;color:#aaa;border:1px solid #3a463d;border-radius:5px;background:#202621;font-size:20px}.voxel-warning{margin:12px 0;padding:10px;color:#ffc07b;border:1px solid #66472b;border-radius:6px;background:#21180f;font-size:9px;line-height:1.5}.voxel-convert-dialog>section>label{display:grid;grid-template-columns:190px 1fr;align-items:center;gap:8px;margin:8px 0;color:#89928b;font-size:9px}.voxel-convert-dialog input,.voxel-convert-dialog select{padding:7px;color:#ddd;border:1px solid #354138;border-radius:4px;background:#0d120e}.voxel-convert-dialog .voxel-confirm{display:flex!important;grid-template-columns:none!important;color:#ffcc8e!important}.voxel-confirm input{width:auto}.voxel-convert-dialog footer{display:flex;justify-content:flex-end;gap:7px;margin-top:15px;padding-top:12px;border-top:1px solid #2b372e}.voxel-convert-dialog footer button{padding:8px 12px;color:#aaa;border:1px solid #39443c;border-radius:5px;background:#202521}.voxel-convert-dialog footer .primary-action{color:#071007;border-color:#00ee42;background:#00d83b}.voxel-convert-dialog footer .primary-action:disabled{color:#666;border-color:#444;background:#292929}
body.is-bloxd-mode .tool-palette [data-tool],body.is-bloxd-mode .tool-palette [data-action="add"],body.is-bloxd-mode .tool-palette [data-action="array"],body.is-bloxd-mode .tool-palette [data-action="materials"],body.is-bloxd-mode .tool-palette [data-action="modifiers"],body.is-bloxd-mode .tool-palette [data-action="procedural"],body.is-bloxd-mode .tool-palette [data-action="advanced"]{opacity:.28;pointer-events:none}
body.is-bloxd-mode .tool-palette [data-tool],body.is-bloxd-mode .tool-palette [data-action="add"],body.is-bloxd-mode .tool-palette [data-action="array"],body.is-bloxd-mode .tool-palette [data-action="materials"],body.is-bloxd-mode .tool-palette [data-action="procedural"]{opacity:1;pointer-events:auto}