:root {
  --bg: #0d1117;
  --panel: #161b22;
  --border: #30363d;
  --text: #e6edf3;
  --muted: #8b949e;
  --accent: #58a6ff;
  --accent2: #3fb950;
  --warn: #d29922;
  --danger: #f85149;
  --radius: 8px;
  --font: "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --mono: "SF Mono", "Fira Code", monospace;
  --left-panel-width: 260px;
  --right-panel-width: 320px;
  --left-log-height: 160px;
  --timeline-height: 140px;
}

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

/* Dark-theme scrollbars (sidebar, panels, lists) */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
  background: #484f58;
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

*::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

.hidden { display: none !important; }

.catalog-panel-overlay {
  position: fixed;
  inset: 0;
  z-index: 1800;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.catalog-panel {
  width: min(960px, 94vw);
  max-height: min(760px, 90vh);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.45);
  padding: 16px;
}

.catalog-panel-head,
.catalog-panel-search,
.catalog-result-actions,
.catalog-price-links {
  display: flex;
  gap: 8px;
  align-items: center;
}

.catalog-panel-head { justify-content: space-between; }
.catalog-panel-head > div { display: flex; flex-direction: column; gap: 3px; }
.catalog-panel-close {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 24px;
  cursor: pointer;
}
.catalog-panel-query {
  flex: 1;
  min-width: 0;
  background: #0d1117;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.catalog-source-filter {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  background: rgba(13, 17, 23, 0.55);
}
.catalog-source-filter-head {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.catalog-source-filter-head .muted {
  margin-right: auto;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.catalog-source-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.catalog-source-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #30363d;
  background: #111722;
  border-radius: 999px;
  padding: 5px 8px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.catalog-source-chip.active {
  border-color: #58a6ff;
  background: rgba(88, 166, 255, 0.12);
  color: var(--text);
}
.catalog-source-chip input {
  margin: 0;
}
.catalog-source-chip em {
  color: #9fb5d8;
  font-size: 11px;
  font-style: normal;
  text-transform: uppercase;
}
.catalog-source-chip small {
  color: #7d8590;
  font-size: 10px;
  text-transform: uppercase;
}
.catalog-panel-results {
  overflow: auto;
  display: grid;
  gap: 10px;
  padding-right: 4px;
}
.catalog-result-card {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  background: #0f141d;
}
.catalog-result-card--link {
  border-style: dashed;
  background: #101722;
}
.catalog-source-line {
  display: inline-flex;
  width: fit-content;
  color: #b9d3ff;
  border: 1px solid #33466d;
  background: rgba(88, 166, 255, 0.10);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 700;
}
.catalog-source-note {
  color: #d29922;
  font-size: 12px;
  margin: 0;
}
.catalog-result-thumb {
  min-height: 72px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #0b0f16;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.catalog-result-thumb img {
  max-width: 100%;
  max-height: 86px;
  object-fit: contain;
}
.catalog-result-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.catalog-price-links { flex-wrap: wrap; }
.catalog-price-links a {
  color: #c9d8ff;
  border: 1px solid #33466d;
  background: #172033;
  border-radius: 999px;
  padding: 4px 8px;
  text-decoration: none;
  font-size: 12px;
}

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
}

#app {
  display: grid;
  grid-template-columns: var(--left-panel-width) 6px 1fr 6px var(--right-panel-width);
  grid-template-rows: 52px 34px auto 1fr;
  grid-template-areas:
    "header      header      header      header      header"
    "wsbar       wsbar       wsbar       wsbar       wsbar"
    "ribbon      ribbon      ribbon      ribbon      ribbon"
    "left        left-split  main-col    right-split right";
  overflow: hidden;
  height: 100%;
}

#workspace-mode-bar {
  grid-area: wsbar;
  display: flex;
  align-items: stretch;
  gap: 0;
  background: #161b22;
  border-bottom: 1px solid #21262d;
  min-height: 34px;
}

.fusion-mode-switcher {
  position: relative;
  flex-shrink: 0;
}

.workspace-mode-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  min-width: 132px;
  padding: 0 14px;
  border: none;
  border-right: 1px solid #21262d;
  background: #1c2128;
  color: #e6edf3;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.workspace-mode-btn:hover {
  background: #21262d;
}

.workspace-mode-icon {
  font-size: 0.95rem;
  opacity: 0.85;
}

.workspace-mode-caret {
  margin-left: auto;
  font-size: 0.65rem;
  color: #8b949e;
}

.workspace-mode-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  z-index: 1200;
  min-width: 220px;
  background: #21262d;
  border: 1px solid #30363d;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  padding: 4px;
}

.workspace-mode-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: #e6edf3;
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
}

.workspace-mode-option:hover:not(:disabled) {
  background: #30363d;
}

.workspace-mode-option.active {
  background: #388bfd22;
  color: #58a6ff;
}

.workspace-mode-option:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.workspace-tabs {
  display: flex;
  align-items: stretch;
  flex: 1;
  overflow-x: auto;
  min-width: 0;
}

.workspace-tab {
  border: none;
  border-right: 1px solid transparent;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #8b949e;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0 14px;
  cursor: pointer;
  white-space: nowrap;
}

.workspace-tab.active {
  color: #e6edf3;
  border-bottom-color: #388bfd;
  background: #1c2128;
}

.workspace-tab:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#app.wiring-mode #ribbon-container,
#app.wiring-mode .toolbar-pick,
#app.wiring-mode #engineering-panel,
#app.wiring-mode .design-browser-section,
#app.wiring-mode .object-history-panel {
  display: none !important;
}

#app.wiring-mode {
  grid-template-columns: var(--left-panel-width) 6px 1fr 6px var(--right-panel-width);
}

#app.wiring-mode.right-panel-hidden {
  grid-template-columns: var(--left-panel-width) 6px 1fr 0px 0px;
}

#app.wiring-mode.left-panel-hidden {
  grid-template-columns: 0px 0px 1fr 6px var(--right-panel-width);
}

#app.wiring-mode.left-panel-hidden.right-panel-hidden {
  grid-template-columns: 0px 0px 1fr 0px 0px;
}

#app.wiring-mode .sidebar.right {
  display: flex !important;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

#app.wiring-mode .right-panel-tabs .right-panel-tab:not(.wiring-mode-tab) {
  display: none;
}

#app.wiring-mode .right-panel-tabs {
  grid-template-columns: 1fr;
}

#app.wiring-mode .wiring-mode-tab {
  display: block;
}

.wiring-mode-tab {
  display: none;
}

#app.wiring-mode [data-right-panel]:not([data-right-panel="wiring"]) {
  display: none !important;
}

#app.wiring-mode [data-right-panel="wiring"] {
  display: flex !important;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  gap: 8px;
}

.wiring-driver-link-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.wiring-driver-link-field input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #0d1117;
  color: var(--text);
  padding: 8px 10px;
  font: inherit;
  font-size: 0.82rem;
}

.wiring-driver-link-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.18);
}

#app.wiring-mode #viewport,
#app.wiring-mode .gizmo-panel,
#app.wiring-mode .view-cube {
  display: none !important;
}

#app.wiring-mode #wiring-workspace,
body.wiring-mode #wiring-workspace {
  display: flex !important;
}

#app.wiring-mode .main-column,
body.wiring-mode .main-column {
  min-height: 0;
}

#app.wiring-mode #wiring-workspace.hidden,
body.wiring-mode #wiring-workspace.hidden {
  display: none !important;
}

#app.wiring-mode .sidebar.right [data-right-panel="tools"],
#app.wiring-mode .edit-panel {
  display: none;
}

/* ── Canvas design tab (2D grid sketch pad) ─────────────────────────────── */

#app.canvas-design-tab #viewport,
#app.canvas-design-tab .gizmo-panel,
#app.canvas-design-tab .view-cube,
#app.canvas-design-tab .viewport-view-bar,
#app.canvas-design-tab .mobile-showcase-bar,
#app.canvas-design-tab #sketch-chrome {
  display: none !important;
}

#app.canvas-design-tab #canvas-workspace,
body.canvas-design-tab #canvas-workspace {
  display: flex !important;
  flex: 1;
  min-height: 0;
}

#app.canvas-design-tab .main-column,
body.canvas-design-tab .main-column {
  min-height: 0;
}

.canvas-workspace-wrap {
  flex: 1;
  min-height: 0;
  display: none;
  flex-direction: column;
  background: #0d1117;
  position: relative;
}

.canvas-generation-banner {
  flex-shrink: 0;
  z-index: 20;
  border-bottom: 1px solid rgba(88, 166, 255, 0.35);
  background: linear-gradient(180deg, rgba(88, 166, 255, 0.16), rgba(88, 166, 255, 0.06));
}

.canvas-generation-banner.hidden {
  display: none !important;
}

.canvas-generation-banner-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 10px 14px;
}

.canvas-generation-message {
  flex: 1;
  min-width: 0;
  font-size: 0.84rem;
  color: #c9d1d9;
}

.canvas-generation-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(88, 166, 255, 0.25);
  border-top-color: #58a6ff;
  border-radius: 50%;
  animation: canvas-gen-spin 0.8s linear infinite;
}

.canvas-generation-banner--v2 {
  border-bottom-color: rgba(212, 160, 23, 0.38);
  background: linear-gradient(180deg, rgba(212, 160, 23, 0.16), rgba(212, 160, 23, 0.06));
}

.canvas-generation-banner--v2 .canvas-generation-spinner {
  border-color: rgba(212, 160, 23, 0.22);
  border-top-color: #d4a017;
  border-right-color: rgba(212, 160, 23, 0.55);
  box-shadow: 0 0 12px rgba(212, 160, 23, 0.28);
}

@keyframes canvas-gen-spin {
  to { transform: rotate(360deg); }
}

.canvas-mode-container {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.canvas-workspace {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.canvas-area {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background:
    linear-gradient(rgba(88, 166, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88, 166, 255, 0.08) 1px, transparent 1px),
    #0d1117;
  background-size: 20px 20px, 20px 20px, auto;
}

.canvas-draw {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.canvas-toolbar-popup {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 24px);
  padding: 8px 12px;
  border-radius: 14px;
  border: 1px solid rgba(88, 166, 255, 0.35);
  background: rgba(13, 17, 23, 0.94);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(10px);
}

.canvas-tool-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.canvas-tool-sep {
  width: 1px;
  height: 24px;
  background: rgba(48, 54, 61, 0.9);
  margin: 0 2px;
}

.canvas-tool-btn {
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 0.82rem;
  cursor: pointer;
  line-height: 1;
}

.canvas-tool-btn:hover {
  background: rgba(48, 54, 61, 0.8);
  border-color: rgba(88, 166, 255, 0.25);
}

.canvas-tool-btn.active {
  background: rgba(31, 111, 235, 0.22);
  border-color: rgba(88, 166, 255, 0.55);
  color: #79c0ff;
}

.canvas-color-pick {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

.canvas-preset-colors {
  display: flex;
  gap: 4px;
}

.canvas-preset {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 0;
  cursor: pointer;
}

.canvas-stroke-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--muted);
}

.canvas-stroke-range {
  width: 72px;
}

.canvas-text-input {
  position: absolute;
  z-index: 30;
  min-width: 120px;
  min-height: 28px;
  padding: 4px 6px;
  border: 1px dashed rgba(88, 166, 255, 0.65);
  border-radius: 4px;
  background: rgba(13, 17, 23, 0.88);
  resize: both;
  outline: none;
}

.canvas-voice-bar {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--panel);
}

.canvas-voice-btn {
  border: 1px solid var(--border);
  background: #161b22;
  color: var(--text);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 0.82rem;
  cursor: pointer;
}

.canvas-voice-btn.recording {
  border-color: #f85149;
  color: #ff7b72;
  background: rgba(248, 81, 73, 0.12);
}

.canvas-voice-timer {
  font-size: 0.82rem;
  color: #ff7b72;
}

.canvas-transcript {
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 820px), (pointer: coarse) and (max-width: 1024px) {
  #app.canvas-design-tab {
    grid-template-rows: 44px 1fr !important;
  }

  #app.canvas-design-tab .sidebar.right {
    display: none !important;
  }

  .canvas-toolbar-popup {
    top: auto;
    bottom: 72px;
    max-width: calc(100% - 16px);
    padding: 6px 8px;
  }

  .canvas-tool-btn {
    padding: 8px 10px;
  }

  .canvas-voice-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 15;
  }
}

.wiring-prompt-panel textarea {
  width: 100%;
  box-sizing: border-box;
  font-size: 0.82rem;
}

.wiring-panel-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--panel);
  padding-bottom: 4px;
  margin: -4px 0 0;
}

.design-browser-root {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #0d1117;
  overflow: hidden;
  min-height: 120px;
  max-height: 420px;
  overflow-y: auto;
}

.design-browser-section {
  margin-bottom: 12px;
}

.design-browser-header {
  padding: 6px 10px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  background: #161b22;
}

.browser-section-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 8px;
  border: none;
  background: transparent;
  color: #c9d1d9;
  font-size: 0.78rem;
  cursor: pointer;
  text-align: left;
}

.browser-section-toggle:hover {
  background: #21262d;
}

.browser-chevron {
  width: 12px;
  color: #8b949e;
  font-size: 0.7rem;
}

.browser-section-count {
  margin-left: auto;
  font-size: 0.68rem;
  color: #8b949e;
}

.browser-item-list {
  list-style: none;
  margin: 0;
  padding: 0 0 4px;
}

.browser-item {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 4px;
  padding: 2px 6px 2px 18px;
  border-left: 3px solid transparent;
}

.browser-item:hover {
  background: #21262d;
}

.browser-item--draggable {
  cursor: grab;
}

.browser-item--draggable:active {
  cursor: grabbing;
}

.browser-item.active {
  background: #388bfd18;
  border-left-color: #388bfd;
}

.browser-item--selected {
  background: rgba(31, 111, 235, 0.16);
  outline: 1px solid rgba(88, 166, 255, 0.55);
}

.browser-vis-btn,
.browser-item-body {
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 4px;
}

.browser-vis-btn {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #8b949e;
  border-radius: 5px;
  opacity: 0.95;
}

.browser-vis-btn:hover {
  color: #58a6ff;
  background: rgba(88, 166, 255, 0.12);
}

.browser-vis-btn.is-hidden {
  color: #6e7681;
  opacity: 0.7;
}

.browser-item.hidden-component .browser-item-body {
  opacity: 0.46;
}

.browser-item.hidden-component .browser-item-name {
  text-decoration: line-through;
  text-decoration-color: rgba(139, 148, 158, 0.7);
}

.browser-action-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.browser-item-body {
  text-align: left;
  overflow: hidden;
  min-width: 0;
}

.browser-item-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
}

.browser-item-badge {
  display: inline-block;
  margin-top: 2px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 0.6rem;
  line-height: 1.5;
  text-transform: capitalize;
  letter-spacing: 0.02em;
  color: #8dd2ff;
  background: rgba(31, 111, 235, 0.18);
  border: 1px solid rgba(88, 166, 255, 0.4);
}

.wiring-part--sourced {
  outline: 1px dashed rgba(141, 210, 255, 0.5);
  outline-offset: 1px;
}

.browser-item-actions {
  display: none;
  gap: 2px;
}

.browser-item:hover .browser-item-actions {
  display: flex;
}

.browser-item-actions--profile-visible {
  display: flex;
}

.browser-item-actions--profile-visible .browser-action-btn:not(.browser-action-profile) {
  display: none;
}

.browser-item:hover .browser-item-actions--profile-visible .browser-action-btn {
  display: inline-flex;
}

.browser-action-btn {
  border: none;
  background: #30363d;
  color: #c9d1d9;
  font-size: 0.62rem;
  padding: 2px 5px;
  border-radius: 3px;
  cursor: pointer;
}

.browser-action-btn.danger {
  color: #ff7b72;
}

.browser-empty-item {
  padding: 6px 12px 8px 28px;
}

.viewport-drop-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 17, 23, 0.72);
  pointer-events: none;
}

.viewport-drop-overlay:not(.hidden) {
  pointer-events: none;
}

#viewport.viewport-drag-over .viewport-drop-overlay {
  display: flex;
}

#viewport.viewport-drag-over .viewport-drop-card {
  border-color: #388bfd;
  box-shadow: 0 0 0 2px #388bfd55;
}

.viewport-drop-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 28px 40px;
  border: 2px dashed #484f58;
  border-radius: 12px;
  background: #161b22ee;
  color: #e6edf3;
}

.wiring-workspace {
  flex: 1;
  display: none;
  min-height: 0;
  min-width: 0;
  background: #0d1117;
  flex-direction: row;
}

#app.rigging-design-tab .viewport-hint {
  border-color: #f0883e;
}

#app.rigging-design-tab #timeline-panel {
  display: none !important;
}

#app.rigging-design-tab .timeline-expand-tab {
  display: none !important;
}

#app.rigging-design-tab .rigging-mode-tab {
  display: block;
}

.rigging-mode-tab {
  display: none;
}

#app.rigging-design-tab #rigging-chrome:not(.hidden) {
  display: flex;
}

#app.rigging-design-tab #viewport {
  cursor: default;
}

/* ── Fusion 360 rigging / animation workspace ─────────────────────────────── */
.rigging-chrome {
  position: absolute;
  inset: 0;
  z-index: 34;
  pointer-events: none;
  display: none;
  flex-direction: column;
  justify-content: space-between;
}

.rigging-chrome.hidden {
  display: none;
}

.rigging-toolbelt {
  pointer-events: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px;
  background: linear-gradient(180deg, #2a2118 0%, #1c1610 100%);
  border-bottom: 1px solid #5c3d1e;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.rigging-tool-group {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.rigging-tool-group--actions {
  margin-left: auto;
}

.rigging-tool-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #a3713a;
  margin-right: 4px;
}

.rigging-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1px solid #5c3d1e;
  border-radius: 5px;
  background: #2d2218;
  color: #f0dcc8;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.rigging-tool-btn:hover {
  background: #3d2e20;
  border-color: #f0883e;
}

.rigging-tool-btn.active {
  background: #f0883e22;
  border-color: #f0883e;
  color: #ffb366;
}

.rigging-tool-btn.rigging-tool-accent {
  background: #b45309;
  border-color: #f0883e;
  color: #fff;
}

.rigging-tool-btn.rigging-tool-accent:hover {
  background: #d97706;
}

.rigging-tool-sep {
  width: 1px;
  height: 22px;
  background: #5c3d1e;
  margin: 0 4px;
  flex-shrink: 0;
}

.rigging-anim-panel {
  pointer-events: auto;
  flex-shrink: 0;
  background: linear-gradient(0deg, #161b22 0%, #1c2128 100%);
  border-top: 1px solid #30363d;
  padding: 8px 12px 10px;
}

.rigging-anim-timeline {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rigging-anim-transport {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.rigging-anim-btn {
  width: 28px;
  height: 28px;
  border: 1px solid #30363d;
  border-radius: 4px;
  background: #21262d;
  color: #e6edf3;
  font-size: 0.72rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rigging-anim-btn:hover {
  background: #30363d;
  border-color: #f0883e;
}

.rigging-anim-btn.rigging-anim-play {
  width: auto;
  padding: 0 10px;
  font-weight: 700;
}

.rigging-anim-btn.rigging-anim-key {
  width: auto;
  padding: 0 10px;
  margin-left: auto;
  color: #f0883e;
  border-color: #5c3d1e;
}

.rigging-anim-time,
.rigging-anim-frame {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: #8b949e;
  margin-left: 4px;
}

.rigging-anim-scrub {
  position: relative;
  height: 22px;
}

.rigging-anim-scrub input[type="range"] {
  width: 100%;
  margin: 0;
  accent-color: #f0883e;
}

.rigging-anim-markers {
  position: absolute;
  inset: 0 0 auto 0;
  height: 22px;
  pointer-events: none;
}

.rigging-anim-marker {
  position: absolute;
  top: 2px;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: #f0883e;
  box-shadow: 0 0 0 1px #161b22;
}

.rigging-anim-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.rigging-anim-name {
  font-size: 0.72rem;
  font-weight: 600;
  color: #e6edf3;
}

.rigging-prompt-panel .prompt-panel-tabs {
  margin-bottom: 10px;
}

.rigging-prompt-tab {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--border);
  background: #21262d;
  color: var(--muted);
  font-size: 0.75rem;
  cursor: pointer;
}

.rigging-prompt-tab.active {
  background: #f0883e22;
  color: #f0883e;
  border-color: #f0883e;
}

.rigging-prompt-tab:first-child {
  border-radius: 6px 0 0 6px;
}

.rigging-prompt-tab:last-child {
  border-radius: 0 6px 6px 0;
  border-left: none;
}

.rigging-prompt-image-drop {
  border: 1px dashed #484f58;
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--muted);
  cursor: pointer;
  margin: 8px 0;
}

.rigging-prompt-image-drop:hover {
  border-color: #f0883e;
  color: #f0883e;
}

.rigging-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.rigging-panel-head h2 {
  margin: 0;
  color: #f0883e;
}

#app.sketch-editing #viewport {
  cursor: crosshair;
  box-shadow: inset 0 0 0 1px rgba(0, 102, 204, 0.35);
}

#app.sketch-editing .view-cube,
#app.sketch-editing .viewport-view-bar {
  display: none;
}

#app.sketch-editing .toolbar-pick {
  opacity: 0.35;
  pointer-events: none;
}

/* ── Fusion 360 sketch environment chrome ─────────────────────────────────── */
.sketch-chrome {
  position: absolute;
  inset: 0;
  z-index: 35;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.sketch-chrome.hidden {
  display: none;
}

.sketch-top-bar {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 8px 14px;
  background: linear-gradient(180deg, #fafafa 0%, #ececec 100%);
  border-bottom: 1px solid #c4c4c4;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.sketch-top-bar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sketch-pencil-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #0066cc linear-gradient(145deg, #1a7fe6, #0052a3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  position: relative;
  flex-shrink: 0;
}

.sketch-pencil-icon::after {
  content: "";
  position: absolute;
  inset: 7px 8px 7px 10px;
  border-left: 2px solid #fff;
  transform: rotate(-35deg);
  transform-origin: bottom left;
  opacity: 0.95;
}

.sketch-top-bar-titles {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.sketch-top-bar-titles strong {
  font-size: 0.82rem;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: 0.01em;
}

.sketch-top-bar-titles span {
  font-size: 0.68rem;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sketch-top-bar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.sketch-btn {
  border-radius: 4px;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 7px 14px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.12s, border-color 0.12s;
}

.sketch-btn--ghost {
  background: #fff;
  border-color: #bdbdbd;
  color: #444;
}

.sketch-btn--ghost:hover {
  background: #f5f5f5;
  border-color: #999;
}

.sketch-btn--finish {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(180deg, #3d9a47 0%, #2d7a35 100%);
  border-color: #256b2c;
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.sketch-btn--finish:hover {
  background: linear-gradient(180deg, #47ad52 0%, #32853c 100%);
}

.sketch-finish-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  font-size: 0.72rem;
  font-weight: 800;
}

.sketch-quick-tools {
  pointer-events: auto;
  position: absolute;
  top: 58px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #c8c8c8;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.sketch-quick-btn {
  width: 34px;
  height: 34px;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  background: #f8f8f8;
  color: #333;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.sketch-quick-btn:hover {
  background: #fff;
  border-color: #0066cc;
  color: #0066cc;
}

.sketch-quick-btn.active {
  background: #e8f2fc;
  border-color: #0066cc;
  color: #0066cc;
  box-shadow: inset 0 0 0 1px rgba(0, 102, 204, 0.25);
}

.sketch-status-bar {
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  background: linear-gradient(0deg, #ececec 0%, #f6f6f6 100%);
  border-top: 1px solid #c4c4c4;
  font-size: 0.72rem;
  color: #444;
}

.sketch-status-tool {
  font-weight: 700;
  color: #0066cc;
  text-transform: capitalize;
  min-width: 64px;
}

.sketch-status-sep {
  color: #bbb;
}

.sketch-status-hint {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #555;
}

.sketch-status-hint--error {
  color: #c62828;
  font-weight: 600;
}

.sketch-status-stats {
  margin-left: auto;
  color: #777;
  font-variant-numeric: tabular-nums;
}

.sketch-inspector-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 12px 0;
  font-size: 0.78rem;
}

.sketch-inspector-meta dt {
  color: var(--muted);
  font-weight: 600;
}

.sketch-inspector-meta dd {
  margin: 0;
  color: #e6edf3;
}

.sketch-inspector-hint {
  margin: 0 0 12px;
  line-height: 1.45;
}

.sketch-inspector-actions {
  display: grid;
  gap: 8px;
}

.sketch-prompt-block {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border, #ddd);
  display: grid;
  gap: 8px;
}

.sketch-prompt-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}

.sketch-prompt-block textarea {
  width: 100%;
  resize: vertical;
  min-height: 72px;
}

#app.sketch-design-tab .viewport-hint {
  border-color: #0066cc;
}

.ribbon-bar.ribbon-bar--sketch .ribbon-tab.active {
  border-bottom-color: #0066cc;
}

#app.sketch-editing .ribbon-bar {
  background: #f3f3f3;
  border-bottom-color: #c8c8c8;
}

#app.sketch-editing .ribbon-toggle-row {
  background: #ebebeb;
  border-bottom-color: #d4d4d4;
}

#app.sketch-editing .ribbon-body {
  background: #f3f3f3;
}

#app.sketch-editing .ribbon-tab {
  color: #555;
}

#app.sketch-editing .ribbon-tab.active {
  color: #1a1a1a;
  background: #fff;
  border-bottom-color: #0066cc;
}

#app.sketch-editing .ribbon-btn {
  color: #333;
}

#app.sketch-editing .ribbon-btn:hover {
  background: #fff;
  border-color: #bdbdbd;
}

#app.sketch-editing .ribbon-btn.ribbon-btn--active {
  background: #e8f2fc;
  border-color: #0066cc;
  color: #0066cc;
}

#app.sketch-editing .rb-label {
  color: #444;
}

.ribbon-bar.ribbon-bar--rigging .ribbon-tab.active {
  border-bottom-color: #f0883e;
}

.wiring-palette {
  width: 200px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  padding: 12px;
  overflow-y: auto;
  background: #161b22;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wiring-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.wiring-content-area {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.wiring-content-area.debug-open {
  flex-direction: row;
}

.wiring-content-area.debug-open #wiring-viewport {
  flex: 1 1 58%;
  min-width: 0;
}

.wiring-content-area.debug-open #wiring-debug-panel {
  flex: 1 1 42%;
  min-width: 280px;
  max-width: 520px;
}

/* ── Circuit Debugger panel ──────────────────────────────────────────────── */
.wiring-tool-btn.wiring-tool-debug.active {
  border-color: #a371f7;
  background: rgba(163, 113, 247, 0.18);
  color: #d2a8ff;
}

.wiring-debug-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  border-left: 1px solid var(--border);
  background: #0d1117;
  color: var(--text);
}

.wiring-debug-panel[hidden] {
  display: none !important;
}

.wiring-debug-panel.drag-over {
  box-shadow: inset 0 0 0 2px rgba(163, 113, 247, 0.45);
}

.wdbg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: #161b22;
  flex-shrink: 0;
}

.wdbg-header-left,
.wdbg-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-shrink: 0;
}

.wdbg-key-pill {
  font-size: 0.72rem;
  padding: 4px 8px;
  max-width: min(200px, 42vw);
  flex-shrink: 1;
}

.wdbg-key-pill .prompt-key-pill-name {
  max-width: 72px;
}

.wdbg-key-pill .prompt-key-pill-model {
  max-width: 88px;
}

.wdbg-icon {
  font-size: 1rem;
}

.wdbg-title {
  font-size: 0.86rem;
  font-weight: 700;
}

.wdbg-session-cost {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(63, 185, 80, 0.12);
  color: #3fb950;
  border: 1px solid rgba(63, 185, 80, 0.28);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.wdbg-schematic-badge {
  font-size: 0.68rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(88, 166, 255, 0.14);
  color: #79c0ff;
  border: 1px solid rgba(88, 166, 255, 0.28);
  white-space: nowrap;
}

.wdbg-hdr-btn {
  border: 1px solid var(--border);
  background: #21262d;
  color: var(--muted);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.74rem;
  cursor: pointer;
}

.wdbg-hdr-btn:hover {
  color: var(--text);
  border-color: #484f58;
}

.wdbg-chat {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wdbg-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 12px;
  text-align: center;
  color: var(--muted);
}

.wdbg-welcome-icon {
  font-size: 1.6rem;
}

.wdbg-welcome-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
}

.wdbg-welcome-body {
  font-size: 0.78rem;
  line-height: 1.45;
  max-width: 320px;
}

.wdbg-welcome-tips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
}

.wdbg-welcome-tips span {
  font-size: 0.68rem;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
}

.wdbg-composer {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--border);
  background: #161b22;
}

.wdbg-photo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 0;
}

.wdbg-photo-row:empty {
  display: none;
}

.wdbg-thumb {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.wdbg-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wdbg-thumb-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 0.62rem;
  cursor: pointer;
  line-height: 1;
}

.wdbg-photo-add-row {
  display: flex;
  gap: 6px;
}

.wdbg-add-photo-btn {
  border: 1px solid var(--border);
  background: #21262d;
  color: var(--text);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.76rem;
  cursor: pointer;
}

.wdbg-add-photo-btn:hover {
  border-color: #484f58;
  background: #30363d;
}

.wdbg-text-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #0d1117;
  color: var(--text);
  font-size: 0.82rem;
  resize: vertical;
}

.wdbg-text-input:focus {
  outline: none;
  border-color: rgba(163, 113, 247, 0.55);
  box-shadow: 0 0 0 3px rgba(163, 113, 247, 0.12);
}

.wdbg-send-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.wdbg-schematic-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--muted);
  cursor: pointer;
}

.wdbg-send-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(163, 113, 247, 0.45);
  background: rgba(163, 113, 247, 0.18);
  color: #d2a8ff;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.wdbg-send-btn:hover:not(:disabled) {
  background: rgba(163, 113, 247, 0.28);
}

.wdbg-send-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.wdbg-msg {
  max-width: 100%;
  font-size: 0.8rem;
  line-height: 1.45;
}

.wdbg-msg-user {
  align-self: flex-end;
  max-width: 92%;
  padding: 8px 10px;
  border-radius: 10px 10px 4px 10px;
  background: rgba(31, 111, 235, 0.18);
  border: 1px solid rgba(88, 166, 255, 0.28);
}

.wdbg-msg-ai {
  align-self: stretch;
  padding: 10px 12px;
  border-radius: 10px;
  background: #161b22;
  border: 1px solid var(--border);
}

.wdbg-msg-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.wdbg-msg-photo {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.wdbg-msg-photo-missing {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  padding: 4px;
  font-size: 0.62rem;
  line-height: 1.2;
  text-align: center;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
}

.wdbg-msg-loading,
.wdbg-msg-error {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.wdbg-cancel-btn {
  margin-left: auto;
  padding: 4px 10px;
  font-size: 0.72rem;
  border-radius: 6px;
  border: 1px solid rgba(248, 81, 73, 0.45);
  background: rgba(248, 81, 73, 0.12);
  color: #f85149;
  cursor: pointer;
}

.wdbg-cancel-btn:hover {
  background: rgba(248, 81, 73, 0.22);
}

.wdbg-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(163, 113, 247, 0.25);
  border-top-color: #a371f7;
  border-radius: 50%;
  animation: wdbg-spin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes wdbg-spin {
  to { transform: rotate(360deg); }
}

.wdbg-banner {
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.wdbg-banner-danger {
  background: rgba(248, 81, 73, 0.14);
  border: 1px solid rgba(248, 81, 73, 0.35);
  color: #ff7b72;
}

.wdbg-banner-warn {
  background: rgba(210, 153, 34, 0.14);
  border: 1px solid rgba(210, 153, 34, 0.35);
  color: #e3b341;
}

.wdbg-banner-ok {
  background: rgba(63, 185, 80, 0.14);
  border: 1px solid rgba(63, 185, 80, 0.35);
  color: #7ee787;
}

.wdbg-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.wdbg-pill {
  font-size: 0.68rem;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}

.wdbg-pill-error { background: rgba(248, 81, 73, 0.18); color: #ff7b72; }
.wdbg-pill-warning { background: rgba(210, 153, 34, 0.18); color: #e3b341; }
.wdbg-pill-info { background: rgba(88, 166, 255, 0.18); color: #79c0ff; }

.wdbg-overall {
  font-size: 0.78rem;
  color: var(--text);
  margin-bottom: 10px;
}

.wdbg-section-title {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 10px 0 6px;
  font-weight: 700;
}

.wdbg-issue {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
  overflow: hidden;
}

.wdbg-issue-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  background: #21262d;
}

.wdbg-issue-hdr:hover {
  background: #30363d;
}

.wdbg-sev-badge {
  font-size: 0.66rem;
  font-weight: 700;
  white-space: nowrap;
}

.wdbg-issue-title {
  flex: 1;
  min-width: 0;
  font-size: 0.76rem;
  font-weight: 600;
}

.wdbg-chev {
  color: var(--muted);
  font-size: 0.68rem;
}

.wdbg-issue-body {
  display: none;
  padding: 8px 10px 10px;
  font-size: 0.76rem;
  border-top: 1px solid var(--border);
}

.wdbg-issue-body.open {
  display: block;
}

.wdbg-issue-desc {
  color: var(--text);
  margin-bottom: 6px;
}

.wdbg-issue-loc {
  color: var(--muted);
  font-size: 0.72rem;
  margin-bottom: 6px;
}

.wdbg-fix-box {
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(63, 185, 80, 0.1);
  border: 1px solid rgba(63, 185, 80, 0.28);
  color: #7ee787;
  font-size: 0.74rem;
}

.wdbg-correct-list {
  margin: 0;
  padding-left: 18px;
  font-size: 0.76rem;
  color: var(--muted);
}

.wdbg-detected {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.wdbg-tag {
  font-size: 0.68rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  color: var(--muted);
}

.wdbg-focus-caption {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0 0 8px;
  line-height: 1.45;
}

.wdbg-focus-diagram-slot {
  width: 100%;
  min-height: 220px;
  margin: 0 0 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #0d1117;
  overflow: hidden;
}

.wdbg-focus-diagram-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}

.wdbg-focus-diagram-slot .wdbg-focus-svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 180px;
  max-height: 320px;
}

.wdbg-focus-wire-badge {
  fill: rgba(13, 17, 23, 0.95);
  stroke: #484f58;
  stroke-width: 1.5;
}

.wdbg-focus-wire-badge--issue {
  stroke: #f85149;
  fill: rgba(248, 81, 73, 0.15);
}

.wdbg-focus-wire-badge-text {
  fill: #e6edf3;
  font-size: 11px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-anchor: middle;
  pointer-events: none;
}

.wdbg-focus-pin-dot {
  stroke: #0d1117;
  stroke-width: 1;
}

.wdbg-focus-wire-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: 700;
  color: #f85149;
  border: 1.5px solid rgba(248, 81, 73, 0.65);
  background: rgba(248, 81, 73, 0.12);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.wdbg-focus-label-bg {
  fill: rgba(13, 17, 23, 0.92);
  stroke: rgba(48, 54, 61, 0.9);
  stroke-width: 1;
}

.wdbg-focus-wire-label,
.wdbg-focus-part-label {
  fill: #e6edf3;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-anchor: middle;
  pointer-events: none;
}

.wdbg-focus-part-inline {
  fill: #c9d1d9;
  font-size: 10px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-anchor: middle;
  pointer-events: none;
}

.wdbg-focus-part-label {
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font);
}

.wdbg-focus-wire-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.wdbg-focus-wire-legend li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.78rem;
  line-height: 1.4;
  color: #e6edf3;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.wdbg-focus-wire-swatch {
  width: 14px;
  height: 4px;
  border-radius: 2px;
  flex-shrink: 0;
}

.wdbg-focus-bb-rail-plus {
  stroke: #f85149;
  stroke-width: 2;
  opacity: 0.85;
}

.wdbg-focus-bb-rail-minus {
  stroke: #6e7681;
  stroke-width: 2;
  opacity: 0.85;
}

.wdbg-focus-diagram--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.78rem;
  padding: 16px;
}

.wdbg-apply-focus-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  padding: 5px 10px;
  font-size: 0.72rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(88, 166, 255, 0.12);
  color: #79c0ff;
  cursor: pointer;
}

.wdbg-apply-focus-btn:hover {
  background: rgba(88, 166, 255, 0.22);
}

.wdbg-camera-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.wdbg-camera-modal {
  width: min(480px, 96vw);
  background: #161b22;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.wdbg-camera-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

.wdbg-camera-close {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1.1rem;
  cursor: pointer;
}

.wdbg-cam-video {
  display: block;
  width: 100%;
  max-height: 50vh;
  background: #000;
}

.wdbg-camera-actions {
  padding: 10px 12px;
}

.wdbg-camera-hint {
  padding: 0 12px 12px;
  font-size: 0.74rem;
  color: var(--muted);
  text-align: center;
}

#app.wiring-mode #wiring-workspace:not(.hidden) {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}

#app.wiring-mode #wiring-viewport {
  flex: 1 1 auto;
  min-height: 120px;
}

.wiring-toolbelt {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px;
  background: #1c2128;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.wiring-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: 1px solid #30363d;
  border-radius: 6px;
  background: #21262d;
  color: #e6edf3;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.wiring-tool-btn:hover:not(:disabled) {
  background: #30363d;
  border-color: #484f58;
}

.wiring-tool-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.wiring-tool-btn.wiring-tool-accent {
  background: #238636;
  border-color: #2ea043;
  color: #fff;
}

.wiring-tool-btn.wiring-tool-accent:hover:not(:disabled) {
  background: #2ea043;
}

.wiring-tool-btn.wiring-tool-danger {
  background: rgba(248, 81, 73, 0.18);
  border-color: rgba(248, 81, 73, 0.55);
  color: #ffaba8;
}

.wiring-tool-btn.wiring-tool-danger:hover:not(:disabled) {
  background: rgba(248, 81, 73, 0.28);
}

.wiring-tool-sep {
  width: 1px;
  height: 22px;
  background: #30363d;
  margin: 0 4px;
  flex-shrink: 0;
}

.wiring-prompt-panel .prompt-panel-tabs {
  margin-bottom: 10px;
}

.wiring-prompt-tab {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--border);
  background: #21262d;
  color: var(--muted);
  font-size: 0.75rem;
  cursor: pointer;
}

.wiring-prompt-tab.active {
  background: #388bfd22;
  color: #58a6ff;
  border-color: #388bfd;
}

.wiring-prompt-tab:first-child {
  border-radius: 6px 0 0 6px;
}

.wiring-prompt-tab:last-child {
  border-radius: 0 6px 6px 0;
  border-left: none;
}

.wiring-prompt-section {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: auto;
}

.wiring-prompt-section h3 {
  margin: 0 0 8px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.wiring-prompt-section textarea {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 8px;
  font-size: 0.78rem;
}

.wiring-prompt-image-drop {
  border: 1px dashed #30363d;
  border-radius: 6px;
  padding: 8px;
  text-align: center;
  font-size: 0.72rem;
  color: var(--muted);
  cursor: pointer;
  margin-bottom: 8px;
}

.wiring-prompt-image-drop:hover {
  border-color: #388bfd;
  color: var(--text);
}

.wiring-prompt-image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

/* ── Wiring generate row: key pill + generate/stop side-by-side ── */
.wiring-generate-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.wiring-key-pill {
  flex-shrink: 0;
  max-width: 160px;
}

/* Slot: Generate and Stop occupy the same space — only one visible at a time */
.wiring-btn-slot {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.wiring-btn-slot > * {
  grid-column: 1;
  grid-row: 1;
}

.wiring-generate-btn {
  width: 100%;
  white-space: nowrap;
}

/* ── Secondary action row ── */
.wiring-secondary-row {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.wiring-action-btn {
  flex: 1 1 auto;
  font-size: 0.8rem;
}

/* ── Demo presets as compact chips ── */
.wiring-demo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
}

.wiring-demo-label {
  font-size: 0.68rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  flex-shrink: 0;
  margin-right: 2px;
}

.wiring-demo-chip {
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 0.73rem;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
  white-space: nowrap;
}

.wiring-demo-chip:hover {
  border-color: rgba(88, 166, 255, 0.5);
  color: var(--text);
  background: rgba(88, 166, 255, 0.08);
}

.wiring-prompt-image-list img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #30363d;
}

.wiring-viewport {
  flex: 1;
  min-width: 0;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

.wiring-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.wiring-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: #161b22;
}

.wiring-toolbar-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.wiring-toolbar-hint {
  margin-left: auto;
}

.wiring-color-picks {
  display: flex;
  gap: 4px;
}

.wiring-color-btn {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}

.wiring-color-btn.active {
  border-color: #fff;
  box-shadow: 0 0 0 1px #388bfd;
}

.wiring-canvas-wrap {
  flex: 1;
  position: relative;
  min-height: 0;
}

.wiring-ref-image {
  position: absolute;
  inset: 12px;
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  object-fit: contain;
  pointer-events: none;
  z-index: 1;
  opacity: 0.22;
}

.wiring-ref-image.hidden {
  display: none;
}

.wiring-notes {
  position: absolute;
  right: 12px;
  bottom: 12px;
  max-width: 320px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(13, 17, 23, 0.92);
  font-size: 0.72rem;
  color: var(--muted);
  z-index: 5;
}

.wiring-notes-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.wiring-notes-toggle span {
  display: inline-flex;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(139, 148, 158, 0.35);
  border-radius: 5px;
  color: var(--muted);
  background: rgba(33, 38, 45, 0.85);
}

.wiring-notes-toggle:hover span {
  color: #fff;
  border-color: var(--accent);
}

.wiring-notes.hidden {
  display: none;
}

.wiring-notes.collapsed .wiring-notes-body {
  display: none;
}

.wiring-notes-body {
  margin-top: 8px;
}

.wiring-notes-desc {
  margin: 0 0 8px;
  color: var(--text);
}

.wiring-notes ul {
  margin: 4px 0 0;
  padding-left: 18px;
  color: var(--muted);
}

.wiring-prompt-section .btn.full + .btn.full {
  margin-top: 8px;
}

.wiring-palette h3 {
  margin: 0 0 10px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.wiring-palette-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
  border: 1px solid #30363d;
  border-radius: 6px;
  background: #21262d;
  font-size: 0.78rem;
  cursor: grab;
  user-select: none;
}

.wiring-palette-icon {
  width: 28px;
  height: 20px;
  border-radius: 3px;
  flex-shrink: 0;
  background: #30363d;
}

.wiring-icon-arduino { background: linear-gradient(135deg, #00979d, #006d72); }
.wiring-icon-breadboard { background: #f0f0f0; border: 1px solid #ccc; }
.wiring-icon-led { background: radial-gradient(circle at 50% 35%, #ffe066, #e3b341); border-radius: 50%; width: 20px; height: 20px; }
.wiring-icon-resistor { background: linear-gradient(90deg, #d4a574 0%, #c9a227 20%, #d4a574 40%, #c9a227 60%, #d4a574 80%); height: 10px; margin-top: 5px; }
.wiring-icon-button { border-radius: 50%; background: #484f58; }
.wiring-icon-sensor { background: #1f6feb; }
.wiring-icon-motor { background: #238636; border-radius: 50%; }

.wiring-palette-hint {
  margin: -4px 0 8px;
}

.wiring-palette-item:hover {
  border-color: #388bfd;
}

.wiring-canvas {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle, #30363d 1px, transparent 1px) var(--wiring-grid-x, 0px) var(--wiring-grid-y, 0px) / var(--wiring-grid-size, 20px) var(--wiring-grid-size, 20px),
    #0d1117;
  overflow: hidden;
  outline: none;
  cursor: crosshair;
}

.wiring-canvas.wiring-drag-over {
  box-shadow: inset 0 0 0 2px #388bfd;
}

.wiring-drop-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 32px;
  border: 2px dashed #484f58;
  border-radius: 12px;
  background: #161b22cc;
  color: #8b949e;
  text-align: center;
  max-width: 360px;
  pointer-events: none;
}

.wiring-drop-hint.hidden {
  display: none;
}

.wiring-drop-hint strong {
  color: #e6edf3;
  font-size: 1rem;
}

.wiring-parts-layer {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  pointer-events: none;
  will-change: transform;
}

.wiring-parts-layer .wiring-part {
  pointer-events: auto;
}

.wiring-wires {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  overflow: visible;
  pointer-events: none;
  will-change: transform;
}

.wiring-wires .wiring-wire-path,
.wiring-wires .wiring-wire-handle,
.wiring-wires .wiring-wire-label,
.wiring-wires .wiring-wire-label-bg {
  pointer-events: all;
}

.wiring-pins-layer {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 6;
  pointer-events: none;
  will-change: transform;
}

.wiring-pins-layer .wiring-pin {
  pointer-events: auto;
}

.wiring-wire-path {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: stroke;
  cursor: pointer;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.wiring-wire-handle {
  fill: #0d1117;
  stroke: #58a6ff;
  stroke-width: 2;
  cursor: grab;
  pointer-events: all;
}

.wiring-wire-handle:active {
  cursor: grabbing;
}

.wiring-wire-label {
  fill: #e6edf3;
  font-size: 12px;
  font-weight: 750;
  text-anchor: middle;
  pointer-events: all;
  cursor: text;
  user-select: none;
  paint-order: stroke;
  stroke: #0d1117;
  stroke-width: 4px;
}

.wiring-wire-label-bg {
  fill: rgba(13, 17, 23, 0.88);
  stroke: rgba(139, 148, 158, 0.75);
  stroke-width: 1;
  pointer-events: all;
  cursor: text;
}

.wiring-connector-outer,
.wiring-connector-inner {
  pointer-events: none;
}

.wiring-wire-editor {
  position: absolute;
  z-index: 30;
  width: min(320px, calc(100% - 24px));
  padding: 12px;
  border: 1px solid rgba(88, 166, 255, 0.55);
  border-radius: 14px;
  background: rgba(13, 17, 23, 0.96);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  color: var(--text);
  pointer-events: auto;
  backdrop-filter: blur(10px);
}

.wiring-wire-editor.hidden {
  display: none;
}

.wire-editor-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.wire-editor-head strong,
.wire-editor-head span {
  display: block;
}

.wire-editor-head strong {
  font-size: 0.95rem;
}

.wire-editor-head span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.75rem;
}

.wire-editor-close {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.wire-editor-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
}

.wire-editor-field span,
.wire-editor-connections span,
.wire-editor-meta {
  color: var(--muted);
  font-size: 0.72rem;
}

.wire-editor-field input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #0d1117;
  color: var(--text);
  padding: 8px 10px;
  font-size: 0.9rem;
  outline: none;
}

.wire-editor-field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.18);
}

.wire-editor-connections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.wire-editor-connections > div {
  min-width: 0;
  border: 1px solid rgba(48, 54, 61, 0.8);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  padding: 8px;
}

.wire-editor-connections strong,
.wire-editor-connections em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wire-editor-connections strong {
  margin: 3px 0;
  font-size: 0.8rem;
}

.wire-editor-connections em {
  color: #c9d1d9;
  font-size: 0.74rem;
  font-style: normal;
}

.wire-editor-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.wire-editor-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
}

.wire-editor-meta i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.wire-color-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.wire-color-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.1s, border-color 0.1s;
}

.wire-color-swatch:hover {
  transform: scale(1.2);
  border-color: rgba(255, 255, 255, 0.4);
}

.wire-color-swatch.active {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
  transform: scale(1.15);
}

.wire-color-custom {
  width: 28px;
  height: 22px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  padding: 0 2px;
  flex-shrink: 0;
}

.wire-color-custom::-webkit-color-swatch-wrapper { padding: 0; }
.wire-color-custom::-webkit-color-swatch { border-radius: 4px; border: none; }

.wire-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.wiring-drop-hint-sub {
  display: block;
  margin-top: 6px;
  font-size: 0.78rem;
  color: #8b949e;
}

.wiring-part {
  position: absolute;
  border: 2px solid #484f58;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  cursor: grab;
  user-select: none;
  z-index: 2;
}

.wiring-part.selected {
  border-color: #58a6ff;
  box-shadow:
    0 0 0 2px rgba(88, 166, 255, 0.5),
    0 0 18px rgba(88, 166, 255, 0.35),
    0 4px 12px rgba(0, 0, 0, 0.35);
}

.wiring-part-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.76rem;
  font-weight: 750;
  color: #ffffff;
  text-align: center;
  padding: 4px 6px;
  pointer-events: none;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.9),
    0 0 4px rgba(0, 0, 0, 0.7);
}

.wiring-pin {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #f85149;
  cursor: crosshair;
  z-index: 3;
  padding: 0;
}

.wiring-pin--labeled::after {
  content: attr(data-pin-label);
  position: absolute;
  z-index: 4;
  padding: 2px 5px;
  border: 1px solid rgba(88, 166, 255, 0.65);
  border-radius: 6px;
  background: rgba(13, 17, 23, 0.92);
  color: #f0f6fc;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  pointer-events: none;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.35);
}

.wiring-pin--label-left::after {
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}

.wiring-pin--label-right::after {
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
}

.wiring-pin--label-top::after {
  left: 50%;
  bottom: 15px;
  transform: translateX(-50%);
}

.wiring-pin--label-bottom::after {
  left: 50%;
  top: 15px;
  transform: translateX(-50%);
}

.wiring-pin--label-inside {
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  z-index: 8;
}

.wiring-pin--label-inside::after {
  inset: 50% auto auto 50%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
  font-size: 8px;
  line-height: 1;
  transform: translate(-50%, -50%);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
}

.wiring-pin:hover,
.wiring-pin-hover {
  transform: scale(1.35);
  background: #58a6ff;
  box-shadow: 0 0 6px #58a6ff;
}

.wiring-pin-hole {
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  background: #c9d1d9;
  border-color: #57606a;
  opacity: 0.35;
}

.wiring-pin-hole:hover,
.wiring-pin-hole.wiring-pin-active {
  opacity: 1;
  background: #58a6ff;
  border-color: #fff;
  transform: scale(1.4);
}

.wiring-pin-active {
  background: #58a6ff !important;
  box-shadow: 0 0 8px #58a6ff;
}

.wiring-selection-box {
  position: absolute;
  z-index: 10;
  border: 1px solid #58a6ff;
  background: rgba(88, 166, 255, 0.16);
  box-shadow: 0 0 0 1px rgba(88, 166, 255, 0.2);
  pointer-events: none;
}

.wiring-pin-rail.wiring-pin-power { background: #f85149; }
.wiring-pin-rail.wiring-pin-ground { background: #6e7681; }

.wiring-wires .wiring-wire-path {
  pointer-events: stroke;
  cursor: pointer;
}

.wiring-wires .wiring-wire-path.selected {
  filter: drop-shadow(0 0 4px currentColor);
}

.wdbg-focus-wire-flow {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 10 8;
  pointer-events: none;
  animation: wdbg-focus-wire-flow 0.65s linear infinite;
}

@keyframes wdbg-focus-wire-flow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -36; }
}

.wdbg-focus-wire-label--issue {
  fill: #ff7b72;
  font-weight: 700;
}

.wdbg-focus-label-bg:has(+ .wdbg-focus-wire-label--issue) {
  stroke: rgba(248, 81, 73, 0.55);
}

.wdbg-focus-legend-heading {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2px;
}

.wdbg-focus-legend-heading--issue {
  color: #ff7b72;
}

.wdbg-focus-wire-legend--issue li {
  color: #ffccc7;
}

.wdbg-focus-wire-swatch--issue {
  background: linear-gradient(90deg, #f85149 40%, transparent 40%, transparent 60%, #f85149 60%);
  background-size: 12px 100%;
  animation: wdbg-focus-wire-flow 0.65s linear infinite;
  height: 5px;
  width: 18px;
}

.wiring-wire-focus-flow--issue {
  stroke-width: 4.5;
  opacity: 0.98;
}

.wiring-wire-path--focus {
  stroke-width: 4.5;
  filter: drop-shadow(0 0 8px rgba(248, 81, 73, 0.85));
}

.wiring-wire-focus-flow {
  fill: none;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 10 8;
  pointer-events: none;
  opacity: 0.95;
  animation: wiring-focus-flow 0.7s linear infinite;
}

@keyframes wiring-focus-flow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -36; }
}

.wiring-wire-preview {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
  will-change: transform;
}

.wiring-wire-preview-path {
  fill: none;
  stroke-width: 3;
  stroke-dasharray: 6 4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(88, 166, 255, 0.7));
}

.wiring-part--breadboard {
  background: #f0f0f0 !important;
  border-color: #ccc !important;
}

.wiring-part--breadboard .wiring-part-label {
  color: #111827;
  font-size: 0.68rem;
  align-items: flex-start;
  padding-top: 6px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}

.wiring-part--arduino-uno,
.wiring-part--arduino-mega {
  background: #00979d !important;
  border-color: #006d72 !important;
}

.wiring-part--arduino-uno .wiring-part-label,
.wiring-part--arduino-mega .wiring-part-label {
  color: #fff;
}

.wiring-vis-arduino {
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 4px;
}

.wiring-vis-arduino-chip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.55rem;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.05em;
}

/* Pseudo-3D microcontroller board with real header strips */
.wiring-vis-board {
  position: absolute;
  inset: 0;
  border-radius: 7px;
  overflow: hidden;
}
.wiring-board-pcb {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 14%;
  bottom: 14%;
  border-radius: 4px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.28)),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 6px, transparent 6px 12px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    0 2px 3px rgba(0, 0, 0, 0.35);
}
.wiring-board-chip {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34%;
  height: 42%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  background: linear-gradient(160deg, #2b2f36, #0b0d10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 2px rgba(0,0,0,0.5);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.75);
}
.wiring-board-leds {
  position: absolute;
  top: 16%;
  left: 14%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #3fb950;
  box-shadow: 8px 0 0 #e3b341, 0 0 4px rgba(63, 185, 80, 0.8);
}
.wiring-board-usb {
  position: absolute;
  left: -3px;
  top: 50%;
  width: 12px;
  height: 30%;
  transform: translateY(-50%);
  border-radius: 2px;
  background: linear-gradient(180deg, #d8dde3, #9aa2ab);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,0.4);
}
.wiring-board-header {
  position: absolute;
  left: 0;
  right: 0;
  height: 14%;
  background: linear-gradient(180deg, #15181c, #05070a);
}
.wiring-board-header--top { top: 0; border-radius: 7px 7px 0 0; }
.wiring-board-header--bottom { bottom: 0; border-radius: 0 0 7px 7px; }
.wiring-board-pad {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, #c79a3a 70%, #8a6a1f);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), inset 0 0 2px rgba(0,0,0,0.5);
}

.wiring-vis-breadboard {
  position: absolute;
  inset: 4px;
}

.wiring-bb-rail {
  position: absolute;
  left: 4%;
  right: 4%;
  height: 6%;
  border-radius: 2px;
}

.wiring-bb-rail-plus { top: 2%; background: rgba(248,81,73,0.35); }
.wiring-bb-rail-minus { bottom: 2%; background: rgba(110,118,129,0.35); }

.wiring-bb-divider {
  position: absolute;
  left: 3%;
  right: 3%;
  top: 48%;
  height: 2px;
  background: #ccc;
}

.wiring-bb-hole {
  position: absolute;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: #8b949e;
  opacity: 0.55;
  pointer-events: none;
}

.wiring-vis-transistor {
  display: flex;
  align-items: center;
  justify-content: center;
}

.wiring-vis-transistor-body {
  width: 70%;
  height: 55%;
  border: 2px solid #8b949e;
  border-radius: 4px 4px 8px 8px;
  background: linear-gradient(180deg, #30363d, #21262d);
}

.wiring-vis-diode {
  position: absolute;
  top: 15%;
  left: 0;
  right: 0;
  height: 70%;
  background: #484f58;
  border: 1px solid #8b949e;
  border-radius: 2px;
  clip-path: polygon(8% 50%, 42% 10%, 42% 90%);
}

.wiring-part--transistor .wiring-part-label,
.wiring-part--diode .wiring-part-label {
  color: #e6edf3;
  font-size: 0.58rem;
  align-items: flex-end;
  padding-bottom: 2px;
}

.wiring-part--motor .wiring-part-label {
  color: #fff;
}

.wiring-part--led {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.wiring-vis-led-dome {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle at 40% 30%, #fff9c4, #e3b341 55%, #b08800);
  border: 2px solid #8b949e;
  box-shadow: 0 0 12px rgba(227,179,65,0.5);
}

.wiring-part--led .wiring-part-label {
  position: absolute;
  bottom: -16px;
  top: auto;
  height: auto;
  color: var(--muted);
  font-size: 0.62rem;
}

.wiring-part--resistor {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.wiring-vis-resistor {
  position: absolute;
  top: 20%;
  left: 0;
  right: 0;
  height: 60%;
  background: repeating-linear-gradient(
    90deg,
    #d4a574 0px, #d4a574 6px,
    #c9a227 6px, #c9a227 8px,
    #d4a574 8px, #d4a574 14px
  );
  border-radius: 3px;
  border: 1px solid #8b6914;
}

.wiring-part-visual {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ── 3D-style actuator visuals + simulation animation ──────────────────── */
.wiring-part--motor,
.wiring-part--stepper {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.wiring-part--motor .wiring-part-label,
.wiring-part--stepper .wiring-part-label,
.wiring-part--servo-motor .wiring-part-label {
  position: absolute;
  bottom: -16px;
  top: auto;
  height: auto;
  color: var(--muted);
  font-size: 0.6rem;
  z-index: 2;
}

.wiring-vis-motor,
.wiring-vis-stepper {
  display: grid;
  place-items: center;
  perspective: 200px;
}

.wiring-motor-can,
.wiring-stepper-can {
  position: absolute;
  inset: 12% 14%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 30%, #f0f6fc 0%, #9aa4ad 30%, #5b636b 70%, #2b3036 100%);
  border: 2px solid #1c2128;
  box-shadow: inset 0 -6px 10px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.45);
  transform: rotateX(38deg);
}

.wiring-stepper-can {
  background:
    radial-gradient(circle at 38% 30%, #cfe3ff 0%, #6ea8ff 32%, #1f6feb 72%, #103a82 100%);
}

.wiring-rotor {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 1px;
  transform-origin: center;
  z-index: 1;
  will-change: transform;
}

.wiring-rotor-flap {
  position: absolute;
  top: -3px;
  left: -28%;
  width: 56%;
  min-width: 26px;
  height: 6px;
  margin-left: -13px;
  border-radius: 3px;
  background: linear-gradient(90deg, #ffd166, #f4a259);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.wiring-rotor--stepper .wiring-rotor-mark {
  position: absolute;
  top: -16px;
  left: -2px;
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: #ffd166;
  box-shadow: 0 0 4px rgba(255, 209, 102, 0.8);
}

.wiring-motor-hub,
.wiring-servo-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: #21262d;
  border: 1px solid #6e7681;
  z-index: 2;
}

.wiring-part--active .wiring-motor-can,
.wiring-part--active .wiring-stepper-can {
  box-shadow: inset 0 -6px 10px rgba(0, 0, 0, 0.5), 0 0 14px rgba(88, 166, 255, 0.6);
}

/* Servo */
.wiring-part--servo-motor {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.wiring-vis-servo {
  display: block;
}

.wiring-servo-body {
  position: absolute;
  inset: 28% 18% 12% 18%;
  border-radius: 4px;
  background: linear-gradient(180deg, #2f6f3f, #1d4d2b);
  border: 1px solid #14361e;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.15);
}

.wiring-servo-horn {
  position: absolute;
  top: 30%;
  left: 50%;
  width: 6px;
  height: 30px;
  border-radius: 3px;
  background: linear-gradient(180deg, #f0f6fc, #aab2bb);
  transform-origin: 50% 100%;
  transform: translate(-50%, -100%) rotate(-90deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  z-index: 2;
  will-change: transform;
}

/* LED glow when lit */
.wiring-vis-led-dome.lit {
  box-shadow: 0 0 18px 4px rgba(255, 220, 90, 0.9);
  background: radial-gradient(circle at 40% 30%, #fffde7, #ffe14d 50%, #f4b400);
}

.wiring-simulating .wiring-part {
  transition: none;
}

/* ── Code & Simulate modal ─────────────────────────────────────────────── */
.wiring-code-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(1, 4, 9, 0.62);
  backdrop-filter: blur(2px);
}

.wiring-code-overlay.hidden {
  display: none;
}

.wiring-code-modal {
  width: min(1080px, 94vw);
  height: min(720px, 90vh);
  display: flex;
  flex-direction: column;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.wiring-code-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid #21262d;
  background: #161b22;
}

.wiring-code-head > strong {
  font-size: 0.95rem;
}

.wiring-code-langs {
  display: flex;
  gap: 4px;
  margin-left: 6px;
}

.wiring-code-lang {
  border: 1px solid #30363d;
  background: #0d1117;
  color: var(--muted);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.78rem;
  cursor: pointer;
}

.wiring-code-lang.active {
  background: #1f6feb;
  border-color: #1f6feb;
  color: #fff;
}

.wiring-code-close {
  margin-left: auto;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
}

.wiring-code-close:hover {
  color: #f0f6fc;
}

.wiring-code-body {
  flex: 1;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) 290px;
  min-height: 0;
}

.wiring-code-explorer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 8px;
  border-right: 1px solid #21262d;
  background: #0d1117;
}

.wiring-code-explorer h4 {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wiring-code-file {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #c9d1d9;
  font-size: 0.76rem;
  text-align: left;
  cursor: pointer;
}

.wiring-code-file.active,
.wiring-code-file:hover {
  background: rgba(88, 166, 255, 0.12);
  border-color: rgba(88, 166, 255, 0.35);
}

.wiring-code-file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8b949e;
}

.file-dot--code { background: #3fb950; }
.file-dot--json { background: #d29922; }
.file-dot--doc { background: #a371f7; }

.wiring-code-editor-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid #21262d;
}

.wiring-code-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid #21262d;
  flex-wrap: wrap;
}

.wiring-code-toolbar .btn {
  padding: 5px 10px;
  font-size: 0.78rem;
}

.wiring-code-btnpress {
  font-size: 0.74rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}

.wiring-code-editor-shell {
  flex: 1;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  background: #0d1117;
}

.wiring-code-gutter {
  overflow: hidden;
  padding: 12px 8px 12px 0;
  border-right: 1px solid #21262d;
  background: #090d13;
  color: #6e7681;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.5;
  text-align: right;
  user-select: none;
}

.wiring-code-gutter span {
  display: block;
  height: 1.5em;
}

.wiring-code-gutter span.active {
  color: #58a6ff;
  font-weight: 800;
}

.wiring-code-editor-stack {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.wiring-code-highlight,
.wiring-code-text {
  position: absolute;
  inset: 0;
  margin: 0;
  border: none;
  outline: none;
  padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.5;
  tab-size: 2;
  white-space: pre;
}

.wiring-code-highlight {
  pointer-events: none;
  color: #c9d1d9;
  overflow: hidden;
}

.wiring-code-text {
  z-index: 1;
  resize: none;
  background: transparent;
  color: transparent;
  caret-color: #f0f6fc;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.wiring-code-text::selection {
  background: rgba(88, 166, 255, 0.35);
}

.wiring-code-text.is-readonly {
  cursor: default;
}

.tok-comment { color: #8b949e; }
.tok-string { color: #a5d6ff; }
.tok-keyword,
.tok-key { color: #ff7b72; }
.tok-number { color: #79c0ff; }
.tok-bool { color: #d2a8ff; }

.wiring-code-statusline {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 10px;
  border-top: 1px solid #21262d;
  background: #090d13;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.68rem;
}

.wiring-code-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.wiring-code-side h4 {
  margin: 0;
  padding: 8px 12px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  border-bottom: 1px solid #21262d;
}

.wiring-code-validate {
  flex: 0 0 auto;
  max-height: 45%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.wiring-code-validate-list {
  list-style: none;
  margin: 0;
  padding: 8px 12px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wiring-check {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 0.76rem;
  color: #c9d1d9;
}

.wiring-check-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: 4px;
  border-radius: 50%;
  background: #6e7681;
}

.wiring-check.ok .wiring-check-dot {
  background: #3fb950;
  box-shadow: 0 0 6px rgba(63, 185, 80, 0.7);
}

.wiring-check.warn .wiring-check-dot {
  background: #d29922;
}

.wiring-code-console-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-top: 1px solid #21262d;
}

.wiring-code-console {
  flex: 1;
  overflow: auto;
  padding: 8px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.74rem;
  line-height: 1.5;
  color: #8b949e;
}

.wiring-code-log--error {
  color: #ff7b72;
}

.wiring-code-log--warn {
  color: #d29922;
}

.wiring-code-log--info {
  color: #58a6ff;
}

@media (max-width: 760px) {
  .wiring-code-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1.4fr 1fr;
  }
  .wiring-code-explorer {
    border-right: none;
    border-bottom: 1px solid #21262d;
  }
  .wiring-code-editor-col {
    border-right: none;
    border-bottom: 1px solid #21262d;
  }
}

@media (max-width: 820px), (pointer: coarse) and (max-width: 1024px) {
  body {
    overscroll-behavior: none;
  }

  #app {
    grid-template-columns: 1fr !important;
    grid-template-rows: 44px 1fr !important;
    grid-template-areas:
      "header"
      "main-col" !important;
  }

  #workspace-mode-bar,
  #ribbon-container,
  .sidebar.left,
  .sidebar.right,
  .panel-gutter-v,
  #timeline-panel,
  .timeline-expand-tab,
  .toolbar-pick,
  .toolbar-nav,
  #btn-toggle-ribbon,
  #btn-toggle-sidebar,
  .toolbar-actions #btn-new-project,
  .toolbar-actions .unit-select {
    display: none !important;
  }

  .toolbar {
    min-width: 0;
    height: 44px;
    padding: 0 10px;
    gap: 8px;
  }

  .brand h1 {
    font-size: 0.92rem;
  }

  .brand .logo {
    width: 60px;
    height: 30px;
  }

  .toolbar-actions {
    margin-left: auto;
    gap: 6px;
  }

  .toolbar-actions label.btn {
    padding: 6px 9px;
    font-size: 0.72rem;
  }

  .main-column,
  #viewport {
    min-height: 0;
    height: 100%;
  }

  #viewport {
    background: #0d1117;
    touch-action: none;
  }

  .viewport-view-bar {
    display: none;
  }

  .mobile-showcase-bar {
    display: none;
  }

  .mobile-corner-launchers {
    display: block;
  }

  .mobile-corner-sheet:not(.hidden) {
    display: block;
  }

  body.mobile-left-panel-open .sidebar.left {
    display: flex !important;
    position: fixed;
    z-index: 70;
    inset: 0;
    width: 100vw;
    max-width: none;
    padding-top: calc(58px + env(safe-area-inset-top));
    border: 0;
    border-radius: 0;
    background: rgba(13, 17, 23, 0.98);
    box-shadow: none;
    overflow: auto;
  }

  body.mobile-right-panel-open .sidebar.right {
    display: flex !important;
    position: fixed;
    z-index: 70;
    inset: 0;
    width: 100vw;
    max-width: none;
    padding-top: calc(58px + env(safe-area-inset-top));
    border: 0;
    border-radius: 0;
    background: rgba(13, 17, 23, 0.98);
    box-shadow: none;
    overflow: auto;
  }

  body.mobile-left-panel-open .mobile-corner-launchers,
  body.mobile-right-panel-open .mobile-corner-launchers {
    display: none;
  }

  body.mobile-left-panel-open .mobile-panel-close,
  body.mobile-right-panel-open .mobile-panel-close {
    display: block;
  }

  body.mobile-left-panel-open .sidebar.left,
  body.mobile-right-panel-open .sidebar.right {
    font-size: 17px;
  }

  body.mobile-left-panel-open .sidebar.left h2,
  body.mobile-right-panel-open .sidebar.right h2 {
    font-size: 1.2rem;
    letter-spacing: 0.02em;
  }

  body.mobile-left-panel-open .sidebar.left h3,
  body.mobile-right-panel-open .sidebar.right h3 {
    font-size: 1.05rem;
  }

  body.mobile-left-panel-open .sidebar.left .muted.small,
  body.mobile-right-panel-open .sidebar.right .muted.small,
  body.mobile-left-panel-open .sidebar.left small,
  body.mobile-right-panel-open .sidebar.right small {
    font-size: 0.95rem;
    line-height: 1.35;
  }

  body.mobile-left-panel-open .sidebar.left input,
  body.mobile-left-panel-open .sidebar.left select,
  body.mobile-right-panel-open .sidebar.right input,
  body.mobile-right-panel-open .sidebar.right select,
  body.mobile-right-panel-open .sidebar.right textarea {
    min-height: 44px;
    font-size: 1rem;
  }

  body.mobile-left-panel-open .sidebar.left .btn,
  body.mobile-left-panel-open .sidebar.left button,
  body.mobile-right-panel-open .sidebar.right .btn,
  body.mobile-right-panel-open .sidebar.right button {
    min-height: 42px;
    font-size: 0.98rem;
  }

  body.mobile-left-panel-open .project-browser,
  body.mobile-left-panel-open .design-browser-root,
  body.mobile-left-panel-open .workspace-activity-list {
    font-size: 1rem;
  }

  body.mobile-left-panel-open .proj-item,
  body.mobile-left-panel-open .browser-row,
  body.mobile-left-panel-open .onshape-doc-item,
  body.mobile-left-panel-open .workspace-activity-item {
    min-height: 52px;
    padding: 12px 10px;
  }

  body.mobile-right-panel-open .right-panel-tabs {
    gap: 8px;
    padding: 8px;
  }

  body.mobile-right-panel-open .right-panel-tab {
    min-height: 44px;
    font-size: 0.95rem;
  }

  body.mobile-right-panel-open .prompt-panel textarea,
  body.mobile-right-panel-open .wiring-prompt-panel textarea,
  body.mobile-right-panel-open .rigging-prompt-panel textarea {
    min-height: 140px;
    font-size: 1.05rem;
    line-height: 1.45;
  }

  .mobile-model-picker:not(.hidden) {
    display: block;
  }

  .view-cube {
    top: 58px;
    right: 12px;
    transform: scale(0.82);
    transform-origin: top right;
  }

  .viewport-spinner {
    right: 12px;
    bottom: 72px;
  }

  .viewport-error-banner {
    width: calc(100vw - 28px);
    bottom: 78px;
  }
}

.wiring-load-example-inline {
  pointer-events: auto;
}

.wiring-drop-hint .btn {
  pointer-events: auto;
}

#ribbon-container {
  grid-area: ribbon;
  min-height: 0;
  overflow: visible;
}

.main-column {
  grid-area: main-col;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  position: relative;
}

.toolbar {
  grid-area: header;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 14px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  overflow: visible;
}

.toolbar-pick {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: center;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #0d1117;
}

.toolbar-pick-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-right: 4px;
}

.toolbar-pick .pick-btn {
  padding: 5px 10px;
  font-size: 0.75rem;
}

.toolbar-pick .left-drag-mode-btn {
  padding: 5px 10px;
  font-size: 0.75rem;
  border-color: #484f58;
  background: #161b22;
  color: var(--muted);
  white-space: nowrap;
}

.toolbar-pick .left-drag-mode-btn.active {
  border-color: #3fb950;
  background: #3fb95022;
  color: #7ee787;
}

.toolbar-pick .left-drag-mode-btn {
  padding: 5px 10px;
  font-size: 0.75rem;
  border-style: dashed;
  white-space: nowrap;
}

.toolbar-pick .left-drag-mode-btn.active {
  border-color: #58a6ff;
  background: rgba(88, 166, 255, 0.16);
  color: #c9e6ff;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.brand-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

.brand-link:hover h1 {
  color: var(--accent);
}

.toolbar-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.nav-tab {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.nav-tab:hover {
  color: var(--text);
  background: #21262d;
}

.nav-tab.active {
  color: var(--text);
  background: #21262d;
  border-color: var(--border);
}

.brand h1 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.logo {
  width: 84px;
  height: 42px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  border-radius: 8px;
  mix-blend-mode: screen;
}

.toolbar-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex: 1;
  min-width: 0;
  overflow: visible;
}

.toolbar-actions > .btn,
.toolbar-actions > label.btn,
.toolbar-actions > .unit-select {
  box-sizing: border-box;
  height: 34px;
  min-height: 34px;
  max-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-block: 0;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  margin: 0;
  vertical-align: middle;
}

.toolbar-actions > .btn,
.toolbar-actions > label.btn {
  padding-inline: 14px;
}

.toolbar-actions > label.btn.primary {
  line-height: 1;
  text-align: center;
  user-select: none;
}

.toolbar-actions > label.btn.primary input[hidden] {
  display: none !important;
}

.unit-select {
  appearance: none;
  -webkit-appearance: none;
  height: 34px;
  min-width: 66px;
  padding: 0 30px 0 14px;
  border: 1px solid rgba(88, 166, 255, 0.28);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(88, 166, 255, 0.16), rgba(88, 166, 255, 0.04)),
    #0d1117;
  color: #dce8ff;
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(0, 0, 0, 0.2);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, color 0.15s;
}

.unit-select:hover {
  border-color: rgba(88, 166, 255, 0.55);
  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(88, 166, 255, 0.24), rgba(88, 166, 255, 0.07)),
    #0d1117;
}

.unit-select:focus {
  border-color: #58a6ff;
  box-shadow:
    0 0 0 3px rgba(88, 166, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.toolbar-actions::after {
  content: "";
  width: 0;
  height: 0;
  margin-left: -27px;
  margin-right: 11px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #8b949e;
  pointer-events: none;
}


.btn {
  border: 1px solid var(--border);
  background: #21262d;
  color: var(--text);
  padding: 6px 12px;
  border-radius: var(--radius);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.btn:hover { background: #30363d; }
.btn.primary { border-color: #388bfd; background: #1f6feb33; }
.btn.primary:hover { background: #1f6feb55; }
.btn.accent { border-color: #238636; background: #23863633; }
.btn.accent:hover { background: #23863655; }
.btn.secondary.active { border-color: var(--accent); color: var(--accent); }
.btn.danger { border-color: #da3633; background: #da363322; color: #ff7b72; }
.btn.danger:hover { background: #da363344; }
.btn.full { width: 100%; margin-top: 8px; }

label.btn { display: inline-flex; align-items: center; }

.sidebar {
  background: var(--panel);
  border-color: var(--border);
}

.sidebar.left {
  grid-area: left;
  position: relative;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.left-scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: 14px;
}

.left-log-dock {
  flex-shrink: 0;
  height: clamp(72px, var(--left-log-height), 24vh);
  min-height: 72px;
  max-height: 220px;
  border-top: 1px solid var(--border);
  background: #0d1117;
  overflow: hidden;
}

.sidebar.right {
  grid-area: right;
  position: relative;
  border-left: 1px solid var(--border);
  padding: 14px 14px 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#viewport {
  flex: 1;
  position: relative;
  min-height: 0;
}

#viewport canvas {
  display: block;
  position: relative;
  z-index: 1;
}

.webgl-fallback-canvas.webgl-unavailable {
  width: 100%;
  height: 100%;
  opacity: 0;
}

.webgl-fallback-message {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  z-index: 8;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(420px, calc(100% - 48px));
  padding: 18px 20px;
  border: 1px solid rgba(248, 81, 73, 0.35);
  border-radius: 14px;
  background: rgba(13, 17, 23, 0.92);
  color: #f0f6fc;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.36);
  text-align: center;
  pointer-events: none;
}

.webgl-fallback-message strong {
  color: #ff7b72;
}

.webgl-fallback-message span,
.webgl-fallback-message small {
  color: #8b949e;
}

.remote-pick-labels-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}

.remote-pick-label {
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  color: #fff;
  background: rgba(13, 17, 23, 0.88);
  border: 2px solid currentColor;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, -100%);
  margin-top: -6px;
  pointer-events: none;
}

#viewport.pick-mode {
  cursor: crosshair;
}

.viewport-selection-marquee {
  position: absolute;
  z-index: 6;
  border: 1px solid rgba(88, 166, 255, 0.95);
  background: rgba(88, 166, 255, 0.16);
  box-shadow: 0 0 0 1px rgba(13, 17, 23, 0.45);
  pointer-events: none;
}

.viewport-hint {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background: #1f6febdd;
  border: 1px solid #58a6ff;
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.8rem;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 4px 20px #0008;
}

.viewport-hint.hidden { display: none; }

.viewport-hint strong { display: block; margin-bottom: 2px; }

.viewport-view-bar {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 12;
  display: flex;
  gap: 6px;
  pointer-events: auto;
}

.viewport-view-btn {
  border: 1px solid rgba(139, 148, 158, 0.35);
  background: rgba(13, 17, 23, 0.82);
  color: var(--muted);
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.viewport-view-btn:hover {
  background: rgba(33, 38, 45, 0.92);
  color: var(--text);
}

.viewport-view-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(31, 111, 235, 0.12);
}

.mobile-showcase-bar,
.mobile-model-picker,
.mobile-corner-launchers,
.mobile-corner-sheet {
  display: none;
}

.mobile-showcase-bar {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 24;
  gap: 8px;
  pointer-events: none;
}

.mobile-showcase-btn {
  pointer-events: auto;
  border: 1px solid rgba(139, 148, 158, 0.48);
  border-radius: 999px;
  background: rgba(13, 17, 23, 0.88);
  color: #e6edf3;
  padding: 10px 14px;
  font-weight: 750;
  font-size: 0.86rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(10px);
}

.mobile-showcase-btn:first-child {
  flex: 1;
  border-color: rgba(88, 166, 255, 0.65);
  background: rgba(31, 111, 235, 0.82);
}

.mobile-model-picker {
  position: absolute;
  inset: 0;
  z-index: 70;
}

.mobile-model-picker.hidden {
  display: none !important;
}

.mobile-model-picker-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(1, 4, 9, 0.46);
  backdrop-filter: blur(4px);
}

.mobile-model-picker-card {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  max-height: min(70vh, 520px);
  border: 1px solid rgba(88, 166, 255, 0.45);
  border-radius: 18px;
  background: rgba(13, 17, 23, 0.96);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.56);
  overflow: hidden;
}

.mobile-model-picker-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(48, 54, 61, 0.85);
}

.mobile-model-picker-head strong,
.mobile-model-picker-head span {
  display: block;
}

.mobile-model-picker-head span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.82rem;
}

.mobile-model-picker-close {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 1;
  padding: 0;
}

.mobile-model-list {
  max-height: calc(min(70vh, 520px) - 70px);
  overflow: auto;
  padding: 8px;
}

.mobile-model-item {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  padding: 11px 12px;
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.mobile-model-item.active {
  border-color: rgba(88, 166, 255, 0.7);
  background: rgba(88, 166, 255, 0.14);
}

.mobile-model-item strong,
.mobile-model-item span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-model-item span,
.mobile-model-format {
  color: var(--muted);
  font-size: 0.76rem;
}

.mobile-corner-launchers {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 42;
}

.mobile-corner-btn {
  pointer-events: auto;
  position: absolute;
  width: 64px;
  height: 64px;
  border: 1px solid rgba(139, 148, 158, 0.65);
  border-radius: 20px;
  background: rgba(13, 17, 23, 0.9);
  color: var(--text);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(12px);
  font-weight: 900;
  font-size: 1.05rem;
}

.mobile-corner-btn--tl { top: 14px; left: 14px; }
.mobile-corner-btn--tr { top: 14px; right: 14px; }
.mobile-corner-btn--br { right: 14px; bottom: max(18px, env(safe-area-inset-bottom)); }
.mobile-corner-btn--bl { left: 14px; bottom: max(18px, env(safe-area-inset-bottom)); }

.mobile-corner-sheet {
  position: fixed;
  inset: 0;
  z-index: 85;
  background: rgba(1, 4, 9, 0.82);
  backdrop-filter: blur(12px);
}

.mobile-corner-sheet.hidden {
  display: none !important;
}

.mobile-corner-sheet-card {
  position: absolute;
  inset: 0;
  padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
  border: 0;
  border-radius: 0;
  background: rgba(13, 17, 23, 0.98);
  box-shadow: none;
  backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.mobile-corner-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
  padding-right: 2px;
}

.mobile-corner-sheet-head strong {
  font-size: 1.55rem;
  line-height: 1.15;
}

.mobile-corner-sheet-close {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(139, 148, 158, 0.45);
  border-radius: 16px;
  background: rgba(22, 27, 34, 0.9);
  color: var(--text);
  font-size: 1.7rem;
  line-height: 1;
}

.mobile-corner-sheet-actions {
  display: grid;
  gap: 14px;
  overflow: auto;
  padding-bottom: 12px;
}

.mobile-corner-action {
  width: 100%;
  display: grid;
  gap: 4px;
  border: 1px solid rgba(139, 148, 158, 0.34);
  border-radius: 16px;
  background: rgba(22, 27, 34, 0.95);
  color: var(--text);
  padding: 18px 18px;
  text-align: left;
}

.mobile-corner-action span {
  font-weight: 800;
  font-size: 1.22rem;
  line-height: 1.2;
}

.mobile-corner-action small {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.42;
}

.mobile-panel-close {
  display: none;
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: 14px;
  z-index: 95;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(139, 148, 158, 0.48);
  border-radius: 16px;
  background: rgba(22, 27, 34, 0.94);
  color: var(--text);
  font-size: 1.8rem;
  line-height: 1;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
}

@media (max-width: 820px), (pointer: coarse) and (max-width: 1024px) {
  .mobile-corner-launchers {
    display: block;
  }

  .mobile-corner-sheet:not(.hidden) {
    display: block;
  }
}

.view-controls {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.view-controls .btn {
  flex: 1;
}

/* ── Fusion-style view cube ─────────────────────────────────────────────── */
.view-cube {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 12;
  width: 118px;
  height: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
  user-select: none;
  touch-action: none;
}

.view-cube-label {
  padding: 2px 8px;
  border: 1px solid rgba(139, 148, 158, 0.28);
  border-radius: 999px;
  background: rgba(13, 17, 23, 0.72);
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.view-cube-label:hover {
  color: #58a6ff;
  border-color: rgba(88, 166, 255, 0.45);
}

.view-cube-stage {
  width: 92px;
  height: 92px;
  perspective: 520px;
  display: grid;
  place-items: center;
  cursor: grab;
}

.view-cube--dragging .view-cube-stage {
  cursor: grabbing;
}

.view-cube-body {
  position: relative;
  width: 56px;
  height: 56px;
  transform-style: preserve-3d;
  /* Z-up world: +Y front / +Z top mapped onto CSS 3D cube (+Z front default). */
  transform: rotateX(90deg);
}

.view-cube-spin {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.12s ease-out;
}

.view-cube--dragging .view-cube-spin {
  transition: none;
}

.view-cube-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(88, 166, 255, 0.48);
  border-radius: 6px;
  background: linear-gradient(145deg, rgba(235, 241, 248, 0.92), rgba(139, 148, 158, 0.88));
  color: #1f2937;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 5px 16px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  backface-visibility: hidden;
}

.view-cube-face:hover {
  border-color: #58a6ff;
  background: linear-gradient(145deg, #ffffff, #9fc7ff);
  color: #0d1117;
}

.view-cube-face--front { transform: translateZ(28px); }
.view-cube-face--back { transform: rotateY(180deg) rotateZ(180deg) translateZ(28px); }
.view-cube-face--right { transform: rotateY(90deg) translateZ(28px); }
.view-cube-face--left { transform: rotateY(-90deg) translateZ(28px); }
.view-cube-face--top {
  transform: rotateX(90deg) rotateZ(180deg) translateZ(28px);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(159, 199, 255, 0.95));
  border-color: rgba(88, 166, 255, 0.72);
}
.view-cube-face--bottom { transform: rotateX(-90deg) translateZ(28px); }

/* ── Viewport generating spinner + error banner ─────────────────────────── */
.viewport-overlay-root {
  position: absolute;
  inset: 0;
  z-index: 25;
  pointer-events: none;
}

.viewport-spinner {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: auto;
  top: auto;
  width: min(300px, calc(100% - 28px));
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(88, 166, 255, 0.35);
  border-radius: 12px;
  background: rgba(22, 27, 34, 0.92);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.viewport-stop-btn {
  margin-top: 8px;
  width: 100%;
  pointer-events: auto;
}

.viewport-spinner.hidden {
  display: none;
}

.viewport-spinner-visual {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  margin-top: 0;
  position: relative;
}

.viewport-spinner-ring {
  width: 28px;
  height: 28px;
  margin: 4px;
  border: 2px solid rgba(88, 166, 255, 0.25);
  border-top-color: #58a6ff;
  border-radius: 50%;
  animation: viewport-spin 0.85s linear infinite;
}

.viewport-spinner-v2 {
  display: none;
  position: absolute;
  inset: 0;
}

.viewport-spinner--v2 {
  border-color: rgba(212, 160, 23, 0.42);
  background: rgba(26, 22, 14, 0.94);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(212, 160, 23, 0.12),
    0 0 32px rgba(212, 160, 23, 0.14);
}

.viewport-spinner--v2 .viewport-spinner-ring {
  display: none;
}

.viewport-spinner--v2 .viewport-spinner-v2 {
  display: block;
}

.v2-orbit {
  position: absolute;
  border-radius: 50%;
  border: 2px solid transparent;
}

.v2-orbit--outer {
  inset: 0;
  border-top-color: #f0c040;
  border-right-color: rgba(212, 160, 23, 0.35);
  animation: v2-orbit-spin 1.35s linear infinite;
}

.v2-orbit--inner {
  inset: 6px;
  border-bottom-color: #d4a017;
  border-left-color: rgba(240, 192, 64, 0.45);
  animation: v2-orbit-spin-reverse 0.95s linear infinite;
}

.v2-orbit-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #f0c040;
  text-shadow: 0 0 10px rgba(240, 192, 64, 0.65);
  animation: v2-badge-pulse 1.8s ease-in-out infinite;
}

.viewport-spinner--v2 .viewport-progress-track {
  background: rgba(212, 160, 23, 0.14);
  border-color: rgba(212, 160, 23, 0.32);
}

.viewport-spinner--v2 .viewport-progress-fill {
  background: linear-gradient(90deg, #8b6914, #d4a017 55%, #f0c040);
  box-shadow: 0 0 14px rgba(240, 192, 64, 0.48);
}

.viewport-spinner--v2 .viewport-progress-pct {
  color: #f0c040;
}

@keyframes viewport-spin {
  to { transform: rotate(360deg); }
}

@keyframes v2-orbit-spin {
  to { transform: rotate(360deg); }
}

@keyframes v2-orbit-spin-reverse {
  to { transform: rotate(-360deg); }
}

@keyframes v2-badge-pulse {
  0%, 100% { opacity: 0.82; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

.viewport-spinner-label {
  margin: 0 0 8px;
  font-size: 0.82rem;
  font-weight: 500;
  color: #e6edf3;
  line-height: 1.35;
}

.viewport-spinner-body {
  flex: 1 1 auto;
  min-width: 0;
}

.viewport-progress {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.viewport-progress-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(88, 166, 255, 0.18);
  border: 1px solid rgba(88, 166, 255, 0.28);
  overflow: hidden;
}

.viewport-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #1f6feb, #58a6ff);
  transition: width 0.35s ease-out;
  box-shadow: 0 0 12px rgba(88, 166, 255, 0.45);
}

.viewport-progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.75rem;
  color: #c9d1d9;
}

.viewport-progress-pct {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #79c0ff;
}

.viewport-progress-eta {
  color: #8b949e;
}

.viewport-error-banner {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  max-width: min(92%, 560px);
  width: max-content;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 18px 34px 12px 16px;
  border: 1px solid rgba(248, 81, 73, 0.55);
  border-radius: 10px;
  background: rgba(22, 27, 34, 0.96);
  color: #f85149;
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  transition: border-color 0.15s, background 0.15s;
}

.viewport-error-banner:hover {
  border-color: #f85149;
  background: rgba(33, 38, 45, 0.98);
}

.viewport-error-close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #ffa198;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.viewport-error-close:hover,
.viewport-error-close:focus-visible {
  background: rgba(248, 81, 73, 0.18);
  color: #ffdcd7;
  outline: none;
}

.viewport-error-banner.hidden {
  display: none;
}

.viewport-error-text {
  display: block;
  max-height: 120px;
  overflow-y: auto;
  word-break: break-word;
  line-height: 1.35;
  white-space: pre-wrap;
}

.viewport-error-hint {
  font-size: 0.7rem;
  color: #8b949e;
  font-weight: 500;
}

.viewport-error-hint--copied {
  color: #3fb950;
}

.reference-panel { margin-bottom: 14px; }

.pick-btn.active {
  border-color: #ff7b72;
  background: #ff7b7222;
  color: #ff7b72;
}

.pick-btn[data-mode="face"].active {
  border-color: #58a6ff;
  background: #1f6feb33;
  color: #58a6ff;
}

.pick-btn[data-mode="edge"].active {
  border-color: #d29922;
  background: #d2992222;
  color: #d29922;
}

.pick-btn[data-mode="lasso"].active {
  border-color: #3fb950;
  background: #3fb95022;
  color: #3fb950;
}

.pick-btn[data-mode="off"].active {
  border-color: var(--muted);
  background: #21262d;
  color: var(--text);
}

.color-tool-panel {
  margin: 10px 0 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(13, 17, 23, 0.55);
  display: grid;
  gap: 10px;
}

.color-tool-panel.hidden {
  display: none;
}

.color-tool-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.color-tool-controls,
.color-tool-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.color-picker-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#color-tool-input {
  width: 42px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
}

.color-swatches {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(240, 246, 252, 0.38);
  background: var(--swatch);
  cursor: pointer;
  box-shadow: inset 0 0 0 2px rgba(13, 17, 23, 0.25);
}

.color-swatch:hover,
.color-swatch:focus-visible {
  outline: 2px solid #58a6ff;
  outline-offset: 2px;
}

.timeline-panel {
  flex-shrink: 0;
  height: var(--timeline-height);
  min-height: 64px;
  border-top: 1px solid var(--border);
  background: var(--panel);
  padding: 10px 14px 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: height 0.22s cubic-bezier(0.4, 0, 0.2, 1), padding 0.22s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.22s;
}

.timeline-panel.timeline-panel--collapsed {
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-top-color: transparent;
  overflow: visible;
  pointer-events: none;
}

.timeline-panel.timeline-panel--collapsed .timeline-wrap {
  display: none;
}

#timeline-resize-handle:has(+ .timeline-panel.timeline-panel--collapsed) {
  display: none;
}

/* Collapsed — small tab at bottom center to restore timeline */
.timeline-expand-tab {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 45;
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 22px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: var(--panel);
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.28);
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}

.timeline-expand-tab:hover {
  color: var(--accent);
  background: #21262d;
  border-color: var(--accent);
}

.timeline-collapse-btn {
  min-width: 28px;
  padding: 4px 8px;
}

.timeline-panel .timeline-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.wiring-bottom-wrap {
  display: none;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  gap: 8px;
}

#app.wiring-mode .timeline-panel .timeline-wrap {
  display: none;
}

#app.wiring-mode .wiring-bottom-wrap {
  display: flex;
}

#app:not(.wiring-mode) .wiring-bottom-wrap,
.timeline-panel.timeline-panel--collapsed .wiring-bottom-wrap {
  display: none;
}

.wiring-bottom-header {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 28px;
}

.wiring-bottom-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid #30363d;
  border-radius: 8px;
  background: #0d1117;
}

.wiring-bottom-tab {
  border: 0;
  border-radius: 6px;
  padding: 5px 10px;
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.wiring-bottom-tab.active {
  background: #1f6feb;
  color: #fff;
}

.wiring-bottom-summary {
  flex: 1;
}

.wiring-bottom-collapse {
  margin-left: auto;
}

.wiring-bottom-body {
  min-height: 0;
  flex: 1;
}

.wiring-bottom-pane {
  display: none;
  min-height: 0;
  height: 100%;
}

.wiring-bottom-pane.active {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wiring-history-actions,
.wiring-terminal-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wiring-terminal-actions span {
  flex: 1;
}

.wiring-history-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.wiring-history-step {
  min-width: 160px;
  max-width: 220px;
  padding: 8px 10px;
  border: 1px solid #30363d;
  border-radius: 10px;
  background: #161b22;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.wiring-history-step:hover {
  border-color: var(--accent);
}

.wiring-history-step--current {
  border-color: rgba(46, 160, 67, 0.65);
  background: rgba(46, 160, 67, 0.1);
  cursor: default;
}

.wiring-history-step--redo {
  border-style: dashed;
}

.wiring-history-step .step-kind,
.wiring-history-step .step-label,
.wiring-history-step .step-user {
  display: block;
}

.wiring-history-step .step-kind {
  color: var(--accent);
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
}

.wiring-history-step .step-label {
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 700;
}

.wiring-history-step .step-user {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.7rem;
}

.wiring-terminal-log {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 8px;
  border: 1px solid #30363d;
  border-radius: 10px;
  background: #0d1117;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.75rem;
}

.wiring-terminal-line {
  display: flex;
  gap: 8px;
  padding: 2px 0;
  color: #c9d1d9;
}

.wiring-terminal-line span {
  color: #58a6ff;
  flex: 0 0 auto;
}

.wiring-terminal-line--warn {
  color: #d29922;
}

.wiring-terminal-line--error {
  color: #ff7b72;
}

.timeline-panel .timeline-steps {
  flex: 1;
  min-height: 0;
}

/* Draggable split handles */
.resize-handle {
  flex-shrink: 0;
  touch-action: none;
  z-index: 40;
}

.resize-handle--row {
  height: 8px;
  margin: -3px 0;
  cursor: row-resize;
  background: rgba(48, 54, 61, 0.55);
  transition: background 0.12s;
}

.resize-handle--row:hover,
.resize-handle--row:focus-visible,
.resize-handle--row:active {
  background: rgba(88, 166, 255, 0.45);
}

.panel-gutter-v {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  cursor: col-resize;
  background: rgba(48, 54, 61, 0.35);
  transition: background 0.12s;
  touch-action: none;
  z-index: 50;
}

.panel-gutter-v:hover,
.panel-gutter-v:focus-visible,
.panel-gutter-v:active {
  background: rgba(88, 166, 255, 0.45);
}

.panel-gutter-v[data-gutter="left-split"] {
  grid-area: left-split;
}

.panel-gutter-v[data-gutter="right-split"] {
  grid-area: right-split;
}

body.panel-resizing {
  user-select: none;
}

body.panel-resizing * {
  cursor: inherit !important;
}

body.panel-resizing-col,
body.panel-resizing-col * {
  cursor: col-resize !important;
}

body.panel-resizing-row,
body.panel-resizing-row * {
  cursor: row-resize !important;
}

.timeline-wrap .timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-shrink: 0;
}

.timeline-header-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.timeline-header-main h2 {
  margin: 0;
  flex-shrink: 0;
}

#timeline-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#timeline-slider {
  width: 100%;
  margin: 6px 0 8px;
  accent-color: var(--accent);
}

.timeline-steps {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.timeline-step {
  flex: 0 0 auto;
  max-width: 140px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #21262d;
  color: var(--text);
  font-size: 0.7rem;
  cursor: pointer;
  text-align: left;
}

.timeline-step:hover { border-color: var(--accent); }
.timeline-step.active {
  border-color: var(--accent);
  background: #1f6feb22;
}

.timeline-step--restore {
  border-color: rgba(63, 185, 80, 0.55);
}

.timeline-step--restore.active {
  border-color: #3fb950;
  background: rgba(63, 185, 80, 0.14);
}

.timeline-step .step-topline {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.timeline-step-icon {
  width: 17px;
  height: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid rgba(88, 166, 255, 0.45);
  border-radius: 999px;
  background: rgba(88, 166, 255, 0.12);
  color: var(--accent);
  font-size: 0.68rem;
  line-height: 1;
}

.timeline-step .step-kind {
  display: block;
  text-transform: uppercase;
  font-size: 0.6rem;
  color: var(--muted);
  letter-spacing: 0.06em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-step .step-label {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timeline-step .step-user {
  display: block;
  font-size: 0.62rem;
  color: var(--accent);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timeline-context-menu {
  min-width: 190px;
}

.timeline-context-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.timeline-context-title strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
}

.folder-context-menu button[data-action="remove"]:hover {
  background: rgba(248, 81, 73, 0.15);
  color: #f85149;
}

/* ── Onshape Library panel ──────────────────────────────────────────── */
.onshape-library-logo {
  display: inline-block;
  width: 18px !important;
  height: 18px !important;
  object-fit: contain;
  vertical-align: -3px;
  margin-right: 6px;
  background: transparent;
}

.onshape-library-section {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.onshape-library-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.onshape-library-header h2 {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #aaa);
  display: flex;
  align-items: center;
}

.onshape-status {
  margin: 0 0 6px;
  line-height: 1.35;
}
.onshape-status.error { color: var(--danger, #f85149); }

.onshape-doc-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.onshape-doc-item {
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.onshape-doc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 8px;
  background: var(--surface2, #161b22);
  cursor: default;
}

.onshape-doc-name {
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  color: var(--text);
}

.onshape-doc-toggle {
  flex-shrink: 0;
  color: var(--text-muted, #888);
  transform: rotate(-90deg);
  transition: transform 0.15s;
}

.onshape-doc-elements {
  padding: 4px 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg, #0d1117);
}
.onshape-doc-elements.hidden { display: none; }

.onshape-elem-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
}
.onshape-elem-row--dim {
  opacity: 0.38;
}

.onshape-elem-btns {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.btn-onshape-view {
  font-size: 0.7rem;
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid var(--accent, #5b8af5);
  background: rgba(88, 166, 255, 0.1);
  color: var(--accent, #5b8af5);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.btn-onshape-view:hover {
  background: rgba(88, 166, 255, 0.2);
}

.btn-onshape-push {
  font-size: 0.7rem;
  padding: 3px 7px;
  border-radius: 5px;
  border: 1px solid #2d5a27;
  background: rgba(46, 160, 67, 0.1);
  color: #7ee787;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: background 0.15s;
}
.btn-onshape-push:hover:not(:disabled) {
  background: rgba(46, 160, 67, 0.22);
}
.btn-onshape-push:disabled { opacity: 0.6; cursor: default; }
.btn-onshape-push.success {
  border-color: #2ea043;
  background: rgba(46, 160, 67, 0.22);
}

.onshape-elem-type-badge {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(88, 166, 255, 0.12);
  color: var(--accent, #5b8af5);
  white-space: nowrap;
}

.onshape-elem-name {
  font-size: 0.75rem;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}

.btn-onshape-import {
  font-size: 0.7rem;
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid #8b2020;
  background: rgba(232, 35, 42, 0.1);
  color: #ff8080;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.btn-onshape-import:hover:not(:disabled) {
  background: rgba(232, 35, 42, 0.22);
  color: #ffaaaa;
}
.btn-onshape-import:disabled { opacity: 0.6; cursor: default; }
.btn-onshape-import.success {
  border-color: #2ea043;
  background: rgba(46, 160, 67, 0.12);
  color: #7ee787;
}

.loading-dots::after {
  content: '';
  animation: dots 1.2s steps(4, end) infinite;
}
@keyframes dots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
  100% { content: ''; }
}

/* ── End Onshape Library panel ──────────────────────────────────────── */

.object-history-panel {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.object-history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  margin-top: 8px;
}

.object-history-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #0d1117;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
}

.object-history-item:hover {
  border-color: var(--accent);
  background: #1f6feb12;
}

.oh-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}

.oh-kind {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.oh-user {
  font-size: 0.68rem;
  color: var(--accent);
  font-weight: 500;
}

.oh-label {
  display: block;
  line-height: 1.35;
  margin-bottom: 2px;
}

.oh-meta {
  display: block;
  font-size: 0.66rem;
  color: var(--muted);
}

.oh-summary {
  margin: 4px 0 0;
  font-size: 0.68rem;
  color: var(--muted);
  line-height: 1.3;
  white-space: pre-wrap;
  word-break: break-word;
}

.object-history-empty {
  padding: 8px 0;
}

.object-history-item.oh-static {
  cursor: default;
  opacity: 0.92;
}

.object-history-item.oh-static:hover {
  border-color: var(--border);
  background: #0d1117;
}

.object-history-item.oh-active {
  border-color: var(--accent);
  background: #1f6feb22;
}

.oh-foot {
  display: flex;
  margin-top: 6px;
}

.oh-restore-tag {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.oh-meta-tag {
  font-size: 0.65rem;
  color: var(--muted);
}

.workspace-activity-title {
  margin: 14px 0 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.workspace-activity-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 160px;
  overflow-y: auto;
}

.workspace-activity-item {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #0d1117;
  font-size: 0.72rem;
}

.workspace-activity-item.ws-activity-new {
  border-color: var(--accent);
  background: #1f6feb18;
  animation: ws-flash 1.5s ease-out;
}

@keyframes ws-flash {
  from { background: #1f6feb44; }
  to { background: #1f6feb18; }
}

.ws-act-head {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

.ws-act-kind {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--muted);
}

.ws-act-user {
  font-size: 0.68rem;
  color: var(--accent);
  font-weight: 500;
}

.ws-act-label {
  display: block;
  margin-top: 2px;
  line-height: 1.3;
}

.ws-act-meta {
  display: block;
  font-size: 0.65rem;
  color: var(--muted);
  margin-top: 2px;
}

.workspace-activity-empty {
  padding: 4px 0;
}


.folder-share-badge {
  font-size: 0.68rem;
  color: var(--accent);
}

.folder-shared-tag {
  font-size: 0.62rem;
  font-weight: 600;
  color: #bc8cff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.folder-context-menu {
  position: fixed;
  z-index: 10000;
  min-width: 160px;
  padding: 4px;
  background: #161b22;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.folder-context-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  border-radius: 4px;
}

.folder-context-menu button:hover {
  background: #1f6feb33;
}

.folder-context-menu button[data-action="delete"]:hover {
  background: rgba(248, 81, 73, 0.15);
  color: #f85149;
}

.component-context-menu {
  min-width: 220px;
}

.component-context-title {
  padding: 8px 10px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.component-context-title strong,
.component-context-title span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.component-context-title strong {
  color: var(--text);
  font-size: 0.84rem;
}

.component-context-title span {
  color: var(--muted);
  font-size: 0.68rem;
  margin-top: 2px;
}

.folder-context-menu hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 4px;
}

.folder-context-menu button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.folder-context-menu button[data-action="move"]::after {
  content: "▸";
  float: right;
  color: var(--muted);
  margin-left: 12px;
}

.folder-context-submenu {
  position: fixed;
  z-index: 10001;
  min-width: 180px;
  max-width: min(280px, calc(100vw - 16px));
  max-height: min(320px, calc(100vh - 16px));
  overflow-y: auto;
  padding: 4px;
  background: #161b22;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.folder-context-submenu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.folder-context-submenu button:hover:not(:disabled) {
  background: #1f6feb33;
}

.folder-context-submenu button:disabled {
  cursor: default;
  opacity: 0.55;
  color: var(--muted);
}

.ref-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  min-height: 4px;
}

.prompt-inline-ref-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  margin-bottom: -1px;
  padding: 8px 8px 4px;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: rgba(13, 17, 23, 0.72);
}

.prompt-ref-count {
  flex: 1 1 100%;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}

.prompt-inline-ref-chips.hidden {
  display: none;
}

.prompt-inline-ref-chips:not(.hidden) + #prompt-input,
.prompt-inline-ref-chips:not(.hidden) + #wiring-prompt-input {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.ref-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 6px;
  background: #1f6feb33;
  border: 1px solid #388bfd66;
  font-family: var(--mono);
  font-size: 0.72rem;
  cursor: pointer;
}

.ref-chip .ref-token {
  color: var(--accent);
  font-weight: 800;
}

.ref-chip--inline {
  max-width: 100%;
  background: rgba(88, 166, 255, 0.16);
  border-color: rgba(88, 166, 255, 0.55);
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

.ref-chip--inline .ref-coords {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #c9d1d9;
  font-family: var(--font);
  font-size: 0.7rem;
}

.ref-chip--more {
  background: #21262d;
  border-color: var(--border);
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.68rem;
  white-space: nowrap;
  border-radius: 999px;
}

.ref-chip--more:hover {
  color: var(--text);
  border-color: rgba(88, 166, 255, 0.55);
  background: rgba(31, 111, 235, 0.13);
}

.ref-summary {
  font-size: 0.68rem;
  color: var(--muted);
  margin-bottom: 6px;
}

.ref-chip .ref-remove {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0 2px;
  font-size: 0.9rem;
  line-height: 1;
}

.ref-chip .ref-remove:hover { color: var(--danger); }

.ref-list {
  margin-bottom: 8px;
  font-size: 0.72rem;
  line-height: 1.5;
}

.ref-list .ref-line code {
  color: var(--accent);
  background: #21262d;
  padding: 1px 4px;
  border-radius: 3px;
}

.prompt-image-drop {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin: 8px 0;
  border: 1px dashed rgba(88, 166, 255, 0.55);
  border-radius: 10px;
  background: rgba(88, 166, 255, 0.06);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  font-size: 0.78rem;
}

.prompt-image-drop:hover,
.prompt-image-drop.dragging {
  border-color: var(--accent);
  background: rgba(88, 166, 255, 0.12);
}

.prompt-image-drop strong {
  display: block;
  font-size: 0.78rem;
}

.prompt-image-drop span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.7rem;
}

.prompt-image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.prompt-image-card {
  position: relative;
  flex: 0 0 76px;
  width: 76px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: #0d1117;
}

.prompt-image-card img {
  display: block;
  width: 76px;
  height: 58px;
  object-fit: cover;
  max-width: 76px;
  max-height: 58px;
}

.prompt-image-card span {
  display: block;
  padding: 4px 6px;
  color: var(--muted);
  font-size: 0.62rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prompt-image-remove {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 999px;
  background: rgba(248, 81, 73, 0.92);
  color: white;
  cursor: pointer;
  line-height: 1;
}

#viewport canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

section { margin-bottom: 18px; }
section h2 {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 8px;
}

.mono { font-family: var(--mono); font-size: 0.78rem; }
.muted { color: var(--muted); }
.small { font-size: 0.75rem; }

.project-browser {
  margin-top: 6px;
}

.project-browser-toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #0d1117;
}

.project-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #161b22;
  cursor: text;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.project-search-bar:focus-within {
  border-color: rgba(88, 166, 255, 0.45);
  box-shadow: 0 0 0 1px rgba(88, 166, 255, 0.18);
}

.project-search-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--muted);
}

.project-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 0.82rem;
  padding: 8px 0;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.project-search-input::placeholder {
  color: var(--muted);
}

.project-search-input::-webkit-search-decoration,
.project-search-input::-webkit-search-cancel-button {
  display: none;
  -webkit-appearance: none;
}

.project-search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}

.project-search-clear:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.project-search-clear.hidden {
  display: none;
}

.project-search-empty {
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: #161b22;
  text-align: center;
}

.workspace-browser-section {
  margin-bottom: 12px;
}

.folder-toolbar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-bottom: 0;
  align-items: center;
}

.btn-create-folder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  flex-shrink: 0;
  border: 1px solid rgba(88, 166, 255, 0.35);
  border-radius: 8px;
  background: rgba(31, 111, 235, 0.14);
  color: #79c0ff;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.btn-create-folder:hover {
  background: rgba(31, 111, 235, 0.24);
  border-color: rgba(88, 166, 255, 0.55);
}

.btn-create-folder:active {
  transform: scale(0.96);
}

.folder-name-input {
  min-height: 36px;
  padding: 8px 10px;
  background: #161b22;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  font-size: 0.82rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.folder-name-input::placeholder {
  color: var(--muted);
}

.folder-name-input:focus {
  outline: none;
  border-color: rgba(88, 166, 255, 0.45);
  box-shadow: 0 0 0 1px rgba(88, 166, 255, 0.18);
}

.folder-zone {
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #0d1117;
  overflow: hidden;
}

.folder-zone.drop-target-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(56, 139, 253, 0.35);
}

.folder-zone-root {
  border-style: dashed;
}

.folder-header {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px 10px;
  background: #161b22;
  border-bottom: 1px solid var(--border);
  font-size: 0.8rem;
  cursor: context-menu;
}

.folder-zone-collapsed .folder-header {
  border-bottom: none;
}

.folder-collapse-btn {
  border: none;
  background: transparent;
  color: #8b949e;
  cursor: pointer;
  padding: 0 2px;
  font-size: 0.72rem;
  line-height: 1;
  flex-shrink: 0;
}

.folder-collapse-btn:hover {
  color: var(--text);
}

.folder-title-toggle {
  cursor: pointer;
}

.folder-zone-collapsed .project-list {
  display: none;
}

.proj-item--loading .proj-row-body {
  color: var(--accent);
}

.proj-loading-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(88, 166, 255, 0.22);
  border-top-color: #58a6ff;
  border-radius: 50%;
  animation: proj-loading-spin 0.75s linear infinite;
  flex-shrink: 0;
}

.proj-loading-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: #58a6ff;
  letter-spacing: 0.02em;
}

/* ── New-model badge dot ── */
.proj-new-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #3fb950;
  color: #0d1117;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(63, 185, 80, 0.4);
  animation: proj-new-pulse 2s ease-in-out infinite;
}

@keyframes proj-new-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(63, 185, 80, 0.4); }
  50%       { box-shadow: 0 0 0 5px rgba(63, 185, 80, 0.15); }
}

.project-list .proj-item--new .proj-row-body {
  border-left: 3px solid #3fb950 !important;
  padding-left: 5px;
}

.project-list li.proj-item--new {
  background: rgba(63, 185, 80, 0.06);
}

.proj-hierarchy-loading,
.design-browser-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: 0.72rem;
  color: var(--muted);
}

.proj-hierarchy-loading {
  margin: 2px 0 4px 28px;
  border-left: 2px solid rgba(88, 166, 255, 0.35);
  padding-left: 10px;
}

.design-browser-loading {
  justify-content: center;
  min-height: 100px;
  color: #8b949e;
}

@keyframes proj-loading-spin {
  to { transform: rotate(360deg); }
}

.proj-item {
  flex-direction: column;
  align-items: stretch;
}

.proj-item-main {
  display: flex;
  align-items: stretch;
  gap: 4px;
  width: 100%;
}

.proj-expand-btn {
  border: none;
  background: transparent;
  color: #8b949e;
  cursor: pointer;
  padding: 0 2px;
  font-size: 0.72rem;
  line-height: 1;
  align-self: center;
  flex-shrink: 0;
  width: 14px;
}

.proj-expand-btn:hover {
  color: var(--text);
}

.proj-expand-btn-spacer {
  opacity: 0;
  cursor: default;
}

.proj-hierarchy {
  margin: 0 4px 6px 22px;
  padding: 4px 0 2px;
  border-left: 1px solid #30363d;
}

.proj-hierarchy-section-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 4px 6px;
  border: none;
  background: transparent;
  color: #8b949e;
  font-size: 0.72rem;
  cursor: pointer;
  text-align: left;
}

.proj-hierarchy-section-toggle:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
}

.proj-hierarchy-section-label {
  font-weight: 600;
  color: #c9d1d9;
}

.proj-hierarchy-section-count {
  margin-left: auto;
  font-size: 0.65rem;
}

.proj-hierarchy-list {
  list-style: none;
  margin: 0;
  padding: 0 0 2px 12px;
}

.proj-hierarchy-item-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  border: none;
  background: transparent;
  color: #c9d1d9;
  text-align: left;
  padding: 3px 6px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.72rem;
}

.proj-hierarchy-item-btn:hover {
  background: #21262d;
}

.proj-hierarchy-item--selected .proj-hierarchy-item-btn {
  background: rgba(31, 111, 235, 0.2);
  outline: 1px solid rgba(88, 166, 255, 0.65);
  color: #e6f1ff;
}

.proj-hierarchy-item--hidden .proj-hierarchy-item-btn {
  color: #7d8590;
}

.proj-hierarchy-item--hidden .proj-hierarchy-item-name {
  opacity: 0.58;
}

.proj-hierarchy-hidden-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #8b949e;
}

.proj-hierarchy-vis-btn {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: #8b949e;
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
}

.proj-hierarchy-vis-btn:hover {
  color: #58a6ff;
  background: rgba(88, 166, 255, 0.12);
}

.proj-hierarchy-vis-btn.is-hidden {
  color: #6e7681;
  opacity: 0.85;
}

.proj-hierarchy-item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.proj-hierarchy-edit-hint {
  flex-shrink: 0;
  font-size: 0.7rem;
  color: var(--muted);
  opacity: 0;
  transition: opacity .15s;
  cursor: pointer;
}

.proj-hierarchy-item-btn:hover .proj-hierarchy-edit-hint {
  opacity: 0.6;
}

.proj-hierarchy-item-btn:hover .proj-hierarchy-edit-hint:hover {
  opacity: 1;
  color: #58a6ff;
}

.proj-hierarchy-empty {
  padding: 2px 6px 4px 18px;
  list-style: none;
}

.folder-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  flex-shrink: 0;
}

.folder-title {
  flex: 1;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.folder-count {
  font-size: 0.7rem;
}

.btn-folder-menu {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 2px 6px;
  font-size: 1rem;
  line-height: 1;
  border-radius: 4px;
  flex-shrink: 0;
}

.btn-folder-menu:hover {
  color: var(--text);
  background: #21262d;
}

.btn-folder-share:hover,
.btn-folder-rename:hover {
  color: var(--accent);
}

.folder-drop-hint {
  padding: 12px 10px !important;
  cursor: default;
  list-style: none;
}

.proj-item.dragging {
  opacity: 0.45;
}

.proj-drag-handle {
  color: var(--muted);
  margin-right: 4px;
  font-size: 0.75rem;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.browser-empty {
  padding: 8px 0;
}

.project-list,
.file-list {
  list-style: none;
}

.project-list .proj-item {
  display: flex;
  align-items: stretch;
  gap: 4px;
}

.project-list li,
.project-list .proj-item {
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding: 4px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: 0.8rem;
  margin-bottom: 4px;
}

.project-list li:hover { background: #21262d; }
.project-list li.active {
  border-color: var(--accent2);
  background: #23863618;
}

.project-list .proj-item .proj-row-body {
  flex: 1;
  min-width: 0;
}

.project-list .proj-row-body {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  border: none;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.project-list .proj-row-body:hover {
  background: rgba(255, 255, 255, 0.04);
}

.project-current-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.project-current-row #project-id {
  flex: 1;
  min-width: 0;
  margin: 0;
  word-break: break-word;
}

.btn-compact {
  padding: 4px 10px;
  font-size: 0.72rem;
  flex-shrink: 0;
}

.project-list .proj-row-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  align-self: center;
}

.btn-proj-rename,
.btn-proj-delete {
  padding: 4px 8px;
  font-size: 0.68rem;
  border-radius: 6px;
  border: 1px solid #30363d;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.btn-proj-rename:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: #1f6feb22;
}

.btn-proj-delete:hover {
  border-color: var(--danger);
  color: var(--danger);
  background: #ff7b7218;
}

.project-list .proj-name {
  display: block;
  font-weight: 500;
  color: var(--text);
}

.project-list .proj-meta {
  display: block;
  font-size: 0.68rem;
  color: var(--muted);
  margin-top: 2px;
}

.project-list .proj-owner-badge {
  display: inline-block;
  margin: 3px 0 0 0;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(88, 166, 255, 0.35);
  background: rgba(88, 166, 255, 0.12);
  color: #9ecbff;
  font-size: 0.65rem;
  line-height: 1.25;
}

.proj-id-badge,
.proj-hierarchy-item-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.62rem;
  color: var(--muted);
  opacity: 0.9;
}

.proj-id-badge {
  display: inline-block;
  margin-left: 6px;
  vertical-align: middle;
}

.proj-hierarchy-item-id {
  flex-shrink: 0;
  margin-left: 4px;
  opacity: 0.75;
}

.file-list {
  list-style: none;
}

.file-list .file-item {
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding: 4px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: 0.82rem;
  margin-bottom: 4px;
}

.file-list .file-item:hover { background: #21262d; }
.file-list .file-item.active {
  border-color: var(--accent);
  background: #1f6feb18;
}

.file-item-body {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  border: none;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-item-actions {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-shrink: 0;
  align-self: center;
}

.btn-file-export,
.btn-file-rename,
.btn-file-delete,
.btn-proj-export {
  padding: 3px 7px;
  font-size: 0.64rem;
  border-radius: 6px;
  border: 1px solid #30363d;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}

.btn-file-export:hover,
.btn-proj-export:hover {
  border-color: #4a6b3f;
  color: #bfe7a8;
  background: #2a3d2218;
}

.btn-file-rename:hover,
.btn-proj-rename:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: #1f6feb22;
}

.btn-file-delete:hover,
.btn-proj-delete:hover {
  border-color: var(--danger);
  color: var(--danger);
  background: #ff7b7218;
}

.file-export-menu {
  z-index: 1200;
  width: 280px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #30363d;
  background: #161b22;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.file-export-title {
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 4px;
  word-break: break-all;
}

.file-export-hint {
  margin: 0 0 8px;
  line-height: 1.35;
}

.file-export-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.file-export-dl {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 5px 9px;
  border-radius: 7px;
  border: 1px solid #34405c;
  background: #1c2638;
  color: #cfe0ff;
  cursor: pointer;
}

.file-export-dl:hover { background: #26324a; }
.file-export-dl[data-fmt="step"] { border-color: #4a6b3f; color: #bfe7a8; }
.file-export-dl[data-fmt="stl"] { border-color: #6b5a3f; color: #e7d2a8; }
.file-export-dl[data-fmt="3mf"] { border-color: #5a4a6b; color: #d4c0f0; }

.file-export-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.file-export-share {
  width: 100%;
}

.file-export-onshape {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 7px;
  border: 1px solid #8b2020;
  background: rgba(232, 35, 42, 0.12);
  color: #ff8080;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.file-export-onshape:hover:not(:disabled) {
  background: rgba(232, 35, 42, 0.22);
  border-color: #e8232a;
  color: #ffaaaa;
}
.file-export-onshape:disabled {
  opacity: 0.6;
  cursor: default;
}

.hint {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.6;
}

kbd {
  font-family: var(--mono);
  font-size: 0.68rem;
  background: #21262d;
  border: 1px solid var(--border);
  padding: 2px 5px;
  border-radius: 4px;
}

textarea, input[type="number"] {
  width: 100%;
  background: #0d1117;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 0.82rem;
}

textarea { resize: vertical; min-height: 90px; }

label {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 6px;
}

label input { margin-top: 4px; }

.prompt-panel {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.prompt-panel.right-tab-panel.active {
  display: flex;
  flex-direction: column;
}

.prompt-panel-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  flex-shrink: 0;
}

.prompt-tab {
  flex: 1;
  padding: 6px 10px;
  font-size: 0.78rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.prompt-tab:hover {
  background: #21262d;
  color: var(--text);
}

.prompt-tab.active {
  border-color: var(--border);
  background: #21262d;
  color: var(--text);
}

.project-cost-thumb {
  margin: 8px 0 8px;
  padding: 10px;
  border: 1px solid rgba(48, 54, 61, 0.9);
  border-radius: 14px;
  background:
    radial-gradient(circle at top right, rgba(88, 166, 255, 0.14), transparent 42%),
    rgba(255, 255, 255, 0.03);
}

.project-cost-thumb.hidden {
  display: none;
}

.project-cost-thumb-head,
.project-cost-thumb-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.project-cost-thumb-head span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.project-cost-thumb-head strong {
  font-size: 1.1rem;
  color: #e6f1ff;
  font-variant-numeric: tabular-nums;
}

.project-cost-thumb-chart {
  height: 54px;
  margin: 10px 0 8px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 8px 6px 4px;
  border: 1px solid rgba(48, 54, 61, 0.55);
  border-radius: 10px;
  background:
    linear-gradient(to top, rgba(139, 148, 158, 0.13) 1px, transparent 1px) 0 0 / 100% 25%,
    rgba(13, 17, 23, 0.72);
}

.project-cost-thumb-chart i {
  flex: 1;
  min-width: 4px;
  max-width: 16px;
  border-radius: 999px 999px 3px 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  opacity: 0.92;
}

.project-cost-thumb.is-empty .project-cost-thumb-chart i {
  background: rgba(139, 148, 158, 0.35);
}

.project-cost-thumb-meta {
  color: var(--muted);
  font-size: 0.72rem;
  flex-wrap: wrap;
  row-gap: 4px;
}

.prompt-pane.hidden {
  display: none;
}

#prompt-pane-compose.active {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

#wiring-prompt-pane-compose.active,
#rigging-prompt-pane-compose.active {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

#prompt-pane-history.active,
#wiring-prompt-pane-history.active,
#rigging-prompt-pane-history.active {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

#prompt-pane-history.active > p,
#wiring-prompt-pane-history.active > p,
#rigging-prompt-pane-history.active > p,
#prompt-pane-history.active .prompt-history-summary,
#wiring-prompt-pane-history.active .prompt-history-summary,
#rigging-prompt-pane-history.active .prompt-history-summary {
  flex-shrink: 0;
}

#prompt-input,
#wiring-prompt-input,
#rigging-prompt-input,
#sketch-prompt-input {
  flex: 1 1 auto;
  width: 100%;
  box-sizing: border-box;
  min-height: clamp(148px, 26vh, 240px);
  padding: 10px 12px;
  resize: vertical;
  line-height: 1.45;
}

#prompt-input {
  flex: 1 1 auto;
  height: auto;
  max-height: none;
}

.prompt-input-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  min-width: 0;
}

.prompt-input-head .sketch-prompt-title {
  margin: 0;
}

.prompt-input-head-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.prompt-mic-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
}

.prompt-skills-row .prompt-mic-btn {
  margin-left: 2px;
}

.prompt-mic-icon {
  font-size: 0.95rem;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-style: normal;
  display: block;
  transform: scale(0.9);
}

.prompt-mic-btn:hover {
  color: var(--text);
  background: rgba(88, 166, 255, 0.12);
}

.prompt-mic-btn.mic-active {
  color: #ff7b72;
  background: rgba(248, 81, 73, 0.14);
}

.prompt-mic-btn.mic-active .prompt-mic-icon {
  animation: prompt-mic-pulse 1.1s ease-in-out infinite;
}

@keyframes prompt-mic-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.prompt-pane h2 {
  margin: 0;
}

.prompt-compose-toolbar {
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid rgba(48, 54, 61, 0.75);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: visible;
}

.prompt-compose-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(48, 54, 61, 0.45);
  min-width: 0;
}

.prompt-compose-head h2 {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Hidden legacy select (kept for JS compat) ── */
.prompt-ai-key-select-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ── Key picker pill button ── */
.prompt-key-picker-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
}

.prompt-key-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px 4px 7px;
  border: 1px solid rgba(48, 54, 61, 0.9);
  border-radius: 8px;
  background: rgba(13, 17, 23, 0.85);
  color: var(--text);
  font-size: 0.72rem;
  line-height: 1.3;
  cursor: pointer;
  white-space: nowrap;
  max-width: 180px;
  min-width: 0;
  transition: border-color 0.15s, background 0.15s;
}
.prompt-key-pill:hover {
  border-color: rgba(88, 166, 255, 0.5);
  background: rgba(22, 27, 34, 0.95);
}
.prompt-key-pill[aria-expanded="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2);
}
.prompt-key-pill-kw {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  flex-shrink: 0;
}
.prompt-key-pill-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}
.prompt-key-pill-model {
  font-size: 0.63rem;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prompt-key-pill-arrow {
  flex-shrink: 0;
  color: var(--muted);
  transition: transform 0.15s;
}
.prompt-key-pill[aria-expanded="true"] .prompt-key-pill-arrow {
  transform: rotate(180deg);
}

/* ── Key picker popup ── */
.prompt-key-popup {
  position: fixed;
  z-index: 9999;
  width: 296px;
  max-height: 480px;
  overflow-y: auto;
  background: #161b22;
  border: 1px solid rgba(48, 54, 61, 0.95);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
  padding: 6px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.prompt-key-popup.hidden { display: none; }

.prompt-key-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px 6px 14px;
  border-bottom: 1px solid rgba(48, 54, 61, 0.7);
  margin-bottom: 4px;
}
.prompt-key-popup-title {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.prompt-key-popup-manage {
  font-size: 0.7rem;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 1;
}
.prompt-key-popup-manage:hover { text-decoration: underline; }

.prompt-key-popup-section {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 14px 2px;
}

.prompt-key-popup-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 14px;
  cursor: pointer;
  border-radius: 0;
  transition: background 0.1s;
  position: relative;
}
.prompt-key-popup-row:hover { background: rgba(48, 54, 61, 0.45); }
.prompt-key-popup-row.active { background: rgba(88, 166, 255, 0.1); }

.prompt-key-popup-check {
  width: 14px;
  height: 14px;
  border: 1.5px solid rgba(88, 166, 255, 0.45);
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.12s, background 0.12s;
}
.prompt-key-popup-row.active .prompt-key-popup-check {
  background: var(--accent);
  border-color: var(--accent);
}
.prompt-key-popup-check-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  transition: opacity 0.1s;
}
.prompt-key-popup-row.active .prompt-key-popup-check-dot { opacity: 1; }

.prompt-key-popup-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.prompt-key-popup-name {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}
.prompt-key-popup-row.active .prompt-key-popup-name {
  color: #e6edf3;
}
.prompt-key-popup-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 4px;
}
.prompt-key-popup-badge.badge-openai {
  background: rgba(16, 163, 127, 0.18);
  color: #10a37f;
}
.prompt-key-popup-badge.badge-claude {
  background: rgba(205, 143, 80, 0.18);
  color: #cd8f50;
}

.prompt-key-popup-model-wrap {
  flex-shrink: 0;
}
.prompt-key-popup-model-select {
  font-size: 0.68rem;
  padding: 3px 6px;
  background: rgba(22, 27, 34, 0.9);
  border: 1px solid rgba(48, 54, 61, 0.8);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  max-width: 110px;
}
.prompt-key-popup-model-select:focus {
  outline: none;
  border-color: var(--accent);
}

.prompt-key-popup-empty {
  font-size: 0.74rem;
  color: var(--muted);
  padding: 10px 14px;
  font-style: italic;
}

.prompt-mode-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  flex-shrink: 0;
}

.prompt-mode-btn {
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #0d1117;
  color: var(--muted);
  padding: 5px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.prompt-mode-btn.active {
  border-color: var(--accent);
  color: #e6f1ff;
  background: rgba(88, 166, 255, 0.18);
}

.prompt-mode-btn--v2 {
  letter-spacing: 0.04em;
}

.prompt-mode-btn--v2:hover:not(.active) {
  border-color: #8b6914;
  color: #c9a227;
  background: rgba(212, 160, 23, 0.06);
}

.prompt-mode-btn--v2.active {
  border-color: #d4a017;
  color: #f0c040;
  background: rgba(212, 160, 23, 0.22);
  box-shadow: 0 0 0 1px rgba(212, 160, 23, 0.35);
}

#prompt-mode-hint {
  flex: 1 1 100%;
  width: 100%;
  line-height: 1.25;
  margin-top: 2px;
}

/* Compose pane — prompt area scrolls when image thumbnails are attached */
#prompt-pane-compose #prompt-input {
  flex: 0 1 auto;
  min-height: clamp(84px, 15vh, 145px);
  height: auto;
  max-height: min(170px, 24vh);
  margin-bottom: 2px;
  resize: vertical;
}

#prompt-pane-compose:has(.prompt-image-list:not(:empty)) #prompt-input {
  min-height: 72px;
  max-height: 118px;
}

#prompt-pane-compose .prompt-compose-toolbar,
#prompt-pane-compose .prompt-skills-row,
#prompt-pane-compose .prompt-inline-ref-chips,
#prompt-pane-compose .prompt-image-drop,
#prompt-pane-compose .prompt-image-list,
#prompt-pane-compose #btn-prompt,
#prompt-pane-compose #btn-stop-generation,
#prompt-pane-compose #prompt-status,
#prompt-pane-compose #prompt-reply {
  flex-shrink: 0;
}

#prompt-pane-compose .prompt-compose-toolbar {
  margin-bottom: 4px;
  padding: 4px 6px;
  gap: 4px;
}

#prompt-pane-compose .prompt-compose-head {
  padding-bottom: 4px;
}

#prompt-pane-compose #prompt-mode-hint {
  font-size: 0.66rem;
  line-height: 1.2;
  margin-top: 0;
}

#prompt-pane-compose .prompt-target-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 3px;
  padding: 4px;
  border: 1px solid rgba(88, 166, 255, 0.16);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(88, 166, 255, 0.09), rgba(163, 113, 247, 0.05)),
    rgba(13, 17, 23, 0.58);
  min-width: 0;
}

#prompt-pane-compose .prompt-target-label {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#prompt-target-mode,
#prompt-target-object {
  min-width: 0;
  flex: 0 0 auto;
  height: 28px;
  padding: 3px 28px 3px 10px;
  border: 1px solid rgba(88, 166, 255, 0.35);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(56, 139, 253, 0.22), rgba(56, 139, 253, 0.08)),
    #0d1117;
  color: var(--text);
  font-size: 0.74rem;
  font-weight: 700;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 1px rgba(0,0,0,0.16);
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, #8b949e 50%),
    linear-gradient(135deg, #8b949e 50%, transparent 50%),
    linear-gradient(180deg, rgba(56, 139, 253, 0.22), rgba(56, 139, 253, 0.08));
  background-position:
    calc(100% - 14px) 11px,
    calc(100% - 9px) 11px,
    0 0;
  background-size: 5px 5px, 5px 5px, 100% 100%;
  background-repeat: no-repeat;
}

#prompt-target-object {
  flex: 1 1 auto;
  max-width: 150px;
}

#prompt-target-mode:hover,
#prompt-target-mode:focus,
#prompt-target-object:hover,
#prompt-target-object:focus {
  border-color: rgba(88, 166, 255, 0.72);
  box-shadow: 0 0 0 3px rgba(56, 139, 253, 0.14), inset 0 1px 0 rgba(255,255,255,0.08);
}

#prompt-pane-compose .prompt-skills-row {
  margin-bottom: 3px;
}

#prompt-pane-compose .prompt-image-drop {
  padding: 4px 8px;
  margin: 1px 0 3px;
  gap: 4px;
}

#prompt-pane-compose .prompt-image-drop strong {
  font-size: 0.72rem;
}

#prompt-pane-compose .prompt-image-drop span {
  display: none;
}

#prompt-pane-compose .prompt-image-list {
  margin-bottom: 2px;
}

#prompt-pane-compose .prompt-image-list:empty {
  display: none;
  margin: 0;
}

#prompt-pane-compose #btn-prompt,
#prompt-pane-compose #btn-stop-generation {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin-top: 2px;
  flex-shrink: 0;
  box-shadow: 0 -8px 16px rgba(13, 17, 23, 0.72);
}

#prompt-pane-compose #prompt-status:empty,
#prompt-pane-compose #prompt-reply:empty {
  display: none;
  margin: 0;
}

#prompt-pane-compose #prompt-status,
#prompt-pane-compose #prompt-reply {
  margin-top: 4px;
}

.prompt-skills-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.prompt-skills-label {
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.prompt-skills-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.prompt-skills-chips.is-collapsed {
  display: none;
}

.prompt-skills-toggle {
  border: 1px solid #388bfd66;
  border-radius: 999px;
  background: #1f6feb18;
  color: #79c0ff;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.prompt-skills-toggle::after {
  content: "▸";
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.15s ease;
}

.prompt-skills-toggle[aria-expanded="true"]::after {
  transform: rotate(90deg);
}

.prompt-skills-toggle:hover {
  border-color: var(--accent);
  background: rgba(88, 166, 255, 0.16);
}

.prompt-skills-link {
  font-size: 0.72rem;
  margin-right: 2px;
}

.skills-manage-link {
  color: var(--accent);
  text-decoration: none;
}

.skills-manage-link:hover {
  text-decoration: underline;
}

.skill-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #388bfd44;
  background: #1f6feb18;
  color: #79c0ff;
  font-size: 0.72rem;
  font-family: var(--mono, ui-monospace, monospace);
}

.skill-chip-prefix {
  color: #58a6ff;
  opacity: 0.85;
}

.skills-list {
  display: grid;
  gap: 12px;
  margin: 16px 0 24px;
}

.skill-card {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #0d1117;
}

.skill-card-active {
  border-color: #388bfd66;
  box-shadow: 0 0 0 1px #1f6feb22 inset;
}

.skill-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.skill-card-title {
  margin: 0 0 4px;
  font-size: 1.05rem;
}

.skill-card-desc {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.skill-card-meta {
  margin: 0 0 10px;
  line-height: 1.35;
}

.skill-detail-meta {
  margin: 0.25rem 0;
}

.skill-toggle {
  position: relative;
  display: inline-flex;
  cursor: pointer;
  flex-shrink: 0;
}

.skill-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.skill-toggle-ui {
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: #30363d;
  border: 1px solid var(--border);
  transition: background 0.15s;
}

.skill-toggle-ui::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #c9d1d9;
  transition: transform 0.15s;
}

.skill-toggle input:checked + .skill-toggle-ui {
  background: #238636;
  border-color: #2ea043;
}

.skill-toggle input:checked + .skill-toggle-ui::after {
  transform: translateX(18px);
}

.skill-detail {
  margin: 0 0 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #0d1117;
  overflow: hidden;
}

.skill-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.skill-detail-head h3 {
  margin: 0;
}

.skill-detail-body {
  margin: 0;
  padding: 16px;
  max-height: 420px;
  overflow: auto;
  font-size: 0.78rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--muted);
}

.skills-status {
  margin-top: 8px;
}

.prompt-history-summary {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #0d1117;
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.45;
}

.prompt-history-summary strong {
  color: var(--accent2);
  font-weight: 600;
}

.ph-summary-meta,
.ph-summary-tokens {
  color: var(--muted);
}

.ph-cost {
  color: var(--accent2);
  font-weight: 500;
}

.ph-mode {
  color: #f0c040;
  font-weight: 600;
  text-transform: lowercase;
}

.ph-model {
  color: #79c0ff;
  font-weight: 500;
}

.prompt-history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin-top: 8px;
}

#prompt-pane-history.active .prompt-history-list,
#wiring-prompt-pane-history.active .prompt-history-list,
#rigging-prompt-pane-history.active .prompt-history-list {
  max-height: none;
  margin-bottom: 0;
}

.prompt-history-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #0d1117;
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
}

.prompt-history-item:hover,
.prompt-history-item.ph-selected {
  border-color: var(--accent);
  background: #1f6feb12;
}

.prompt-history-item.ph-selected {
  box-shadow: inset 0 0 0 1px #1f6feb55;
}

.ph-ref-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid #1f6feb44;
  background: #1f6feb18;
  color: #79c0ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.66rem;
  line-height: 1.35;
  cursor: copy;
  word-break: break-all;
}

.ph-ref-btn:hover {
  background: #1f6feb30;
  border-color: #58a6ff;
}

.ph-body-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: inherit;
}

.prompt-ref-status {
  margin: 6px 0 8px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #3fb95044;
  background: #3fb95012;
  color: #7ee787;
  font-size: 0.72rem;
  line-height: 1.4;
  word-break: break-all;
}

.prompt-ref-status.hidden {
  display: none;
}

.ph-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.ph-status {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ph-status.ok { color: var(--accent2); }
.ph-status.err { color: var(--danger); }

.ph-meta {
  font-size: 0.68rem;
  color: var(--muted);
}

.ph-prompt {
  display: block;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}

.ph-reply {
  margin-top: 6px;
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.35;
}

.ph-reply.ph-error {
  color: var(--danger);
}

.prompt-history-empty {
  padding: 12px 0;
}

.status, .reply {
  margin-top: 10px;
  font-size: 0.78rem;
  line-height: 1.45;
}

.status.loading { color: var(--warn); }
.status.error { color: var(--danger); }
.status.ok { color: var(--accent2); }

.reply {
  color: var(--muted);
  max-height: 120px;
  overflow-y: auto;
}

.activity-log-section {
  padding: 8px 10px 10px;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.activity-log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  gap: 6px;
}

.activity-log-actions { display: flex; gap: 4px; }

.small-btn {
  padding: 3px 8px;
  font-size: 0.68rem;
}

.activity-log-list {
  flex: 1;
  min-height: 0;
  max-height: 140px;
  overflow-y: auto;
  overflow-x: hidden;
  font-family: var(--mono);
  font-size: 0.65rem;
  background: #161b22;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 6px;
}

.activity-log-list::-webkit-scrollbar {
  width: 6px;
}

.activity-log-list::-webkit-scrollbar-thumb {
  background: #30363d;
  border-radius: 3px;
}

.log-entry {
  border-bottom: 1px solid #21262d;
  padding: 5px 0;
}

.log-entry:last-child { border-bottom: none; }

.log-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  line-height: 1.4;
}

.log-time { color: var(--muted); }
.log-level { font-weight: 600; font-size: 0.6rem; }
.log-info .log-level { color: var(--accent); }
.log-error .log-level { color: var(--danger); }
.log-warn .log-level { color: var(--warn); }
.log-trace { color: #a371f7; }
.log-msg { flex: 1; min-width: 120px; color: var(--text); }
.log-ms, .log-status { color: var(--muted); }

.log-detail {
  display: none;
  margin-top: 4px;
  padding: 6px 8px;
  background: #161b22;
  border-radius: 4px;
  white-space: pre-wrap;
  word-break: break-word;
  color: #adbac7;
  max-height: 160px;
  overflow: auto;
  font-size: 0.65rem;
}

.log-detail.open { display: block; }

.activity-log-footer {
  font-size: 0.62rem;
  color: var(--muted);
  margin-top: 4px;
  text-align: right;
}

/* Info pages (Docs, Roadmap, Skills Library) */
.info-page,
.info-page #app {
  overflow: auto;
}

.info-page {
  min-height: 100%;
}

#app.app-info {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 52px 1fr;
  grid-template-areas:
    "header"
    "main";
  overflow: auto;
  height: auto;
  min-height: 100vh;
  transition: none;
}

.app-info {
  min-height: 100%;
}

.app-info .toolbar {
  grid-area: header;
  justify-content: flex-start;
  gap: 20px;
  width: 100%;
}

.info-main {
  grid-area: main;
  overflow-y: auto;
  padding: 32px 24px 64px;
  width: 100%;
  min-width: 0;
}

.info-content {
  max-width: 820px;
  margin: 0 auto;
  width: 100%;
}

.info-hero {
  margin-bottom: 40px;
}

.info-eyebrow {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 8px;
}

.info-hero h2 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.info-lead {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--muted);
}

.info-section {
  margin-bottom: 36px;
}

.info-section h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.prompt-example-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 20px 0 8px;
  color: var(--accent);
}

.info-section p,
.info-list li {
  line-height: 1.65;
  color: #c9d1d9;
}

.info-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.info-list li {
  padding-left: 16px;
  position: relative;
}

.info-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--accent);
}

.info-feature-grid,
.info-visual-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.info-feature-card,
.info-visual-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
  padding: 14px;
}

.info-feature-card strong,
.info-feature-card span {
  display: block;
}

.info-feature-card strong,
.info-visual-card h4 {
  margin: 0 0 6px;
  color: var(--text);
  font-size: 0.95rem;
}

.info-feature-card span {
  color: var(--muted);
  line-height: 1.5;
  font-size: 0.86rem;
}

.info-visual-card .info-code {
  margin-bottom: 0;
}

@media (max-width: 760px) {
  .info-feature-grid,
  .info-visual-grid {
    grid-template-columns: 1fr;
  }
}

.api-list li::before {
  content: "→";
  font-size: 0.75rem;
}

.info-code {
  background: #0d1117;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin: 12px 0 16px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.55;
  color: #adbac7;
}

.info-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.info-table th,
.info-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.info-table th {
  background: #161b22;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.info-table tr:last-child td {
  border-bottom: none;
}

.info-table code {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--accent);
}

.roadmap-phase {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.roadmap-phase.shipped { color: var(--accent2); }
.roadmap-phase.next { color: var(--accent); }
.roadmap-phase.future { color: var(--warn); }

.roadmap-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.roadmap-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.roadmap-item strong {
  display: block;
  margin-bottom: 4px;
}

.roadmap-item p {
  font-size: 0.88rem;
  color: var(--muted);
  margin: 0;
}

.roadmap-status {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
}

.roadmap-item.done .roadmap-status {
  color: var(--accent2);
  border-color: rgba(63, 185, 80, 0.35);
  background: rgba(63, 185, 80, 0.08);
}

.roadmap-item .roadmap-status.planned {
  color: var(--accent);
  border-color: rgba(88, 166, 255, 0.35);
  background: rgba(88, 166, 255, 0.08);
}

.roadmap-item .roadmap-status.future {
  color: var(--warn);
  border-color: rgba(210, 153, 34, 0.35);
  background: rgba(210, 153, 34, 0.08);
}

.info-footer {
  font-size: 0.88rem;
  margin-top: 24px;
}

/* Edit tools panel */
.edit-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.edit-tool-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.edit-tool-tab {
  padding: 6px 4px;
  font-size: 0.72rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #21262d;
  color: var(--muted);
  cursor: pointer;
}

.edit-tool-tab.active {
  color: var(--text);
  border-color: var(--accent);
  background: rgba(88, 166, 255, 0.12);
}

.edit-tool-pane {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.edit-tool-pane.hidden {
  display: none;
}

.edit-hint {
  margin: 0;
}

.edit-step-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
}

.edit-step-row select {
  flex: 1;
  background: #0d1117;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 4px 8px;
}

.axis-field {
  display: grid;
  grid-template-columns: 28px 1fr 28px 28px;
  gap: 6px;
  align-items: center;
}

.axis-label {
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--mono);
}

.axis-x .axis-label { color: #ff7b72; }
.axis-y .axis-label { color: #3fb950; }
.axis-z .axis-label { color: #58a6ff; }

.axis-field input {
  width: 100%;
  background: #0d1117;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 6px 8px;
  font-family: var(--mono);
  font-size: 0.82rem;
}

.btn.nudge {
  padding: 4px 0;
  min-width: 28px;
  font-size: 0.85rem;
}

.scale-field,
.extrude-field,
.checkbox-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
}

.scale-field input,
.extrude-field input {
  background: #0d1117;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 6px 8px;
}

.checkbox-field {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.extrude-target {
  font-size: 0.78rem;
  font-family: var(--mono);
  padding: 8px;
  background: #0d1117;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.edit-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}

#edit-status {
  min-height: 1.2em;
  font-size: 0.78rem;
}

/* Auth widget & modal */
.auth-widget {
  position: relative;
  margin-left: 8px;
  flex-shrink: 0;
}

.btn-auth {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: #0d1117;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.btn-auth:hover {
  border-color: var(--accent);
  color: var(--text);
  background: rgba(88, 166, 255, 0.08);
}

.btn-auth.signed-in {
  border-color: var(--accent);
  color: var(--text);
  background: rgba(88, 166, 255, 0.12);
}

/* Onshape connection badge — logo pinned to bottom-right of avatar */
.onshape-badge {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 18px;
  height: 18px;
  min-width: 18px;
  max-width: 18px;
  min-height: 18px;
  max-height: 18px;
  border-radius: 50%;
  background: #0d1117;
  border: 2px solid #161b22;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.onshape-badge.hidden { display: none; }
.onshape-badge img {
  display: block;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px;
  max-width: 16px;
  min-height: 16px;
  max-height: 16px;
  object-fit: contain;
  border-radius: 50%;
  background: transparent;
}

.auth-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
}

.auth-avatar-lg {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(88, 166, 255, 0.15);
  flex-shrink: 0;
}

.user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 500;
  min-width: 220px;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.user-menu-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.user-menu-header strong {
  display: block;
  font-size: 0.9rem;
}

.user-menu-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.user-menu-logout {
  width: 100%;
  margin-top: 8px;
}

.user-menu-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.user-menu-item:hover {
  border-color: var(--accent);
  background: rgba(88, 166, 255, 0.08);
}

.user-menu-item small {
  color: var(--muted);
}

.profile-workspace-panel {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(13, 17, 23, 0.92);
  max-height: min(520px, calc(100vh - 230px));
  overflow-y: auto;
}

.profile-costs-panel {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(13, 17, 23, 0.92);
  max-height: min(560px, calc(100vh - 230px));
  overflow-y: auto;
}

.profile-costs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 8px 0;
}

.profile-cost-card {
  padding: 8px;
  border: 1px solid #21262d;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.profile-cost-card span,
.profile-cost-card strong {
  display: block;
}

.profile-cost-card strong {
  margin-top: 3px;
  font-size: 0.96rem;
}

.profile-costs-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 70px;
  padding: 8px 4px;
  border: 1px solid #21262d;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.profile-cost-bar {
  flex: 1;
  display: flex;
  align-items: flex-end;
  min-width: 3px;
}

.profile-cost-bar > span {
  width: 100%;
  min-height: 3px;
  display: flex;
  flex-direction: column-reverse;
  overflow: hidden;
  border-radius: 999px 999px 2px 2px;
  background: rgba(88, 166, 255, 0.14);
}

.profile-cost-bar i {
  display: block;
  width: 100%;
}

.profile-costs-legend {
  display: flex;
  gap: 10px;
  margin: 6px 0 10px;
  color: var(--muted);
  font-size: 0.72rem;
}

.profile-costs-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.profile-costs-legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.profile-cost-bar .mine,
.profile-costs-legend .mine {
  background: var(--accent);
}

.profile-cost-bar .shared,
.profile-costs-legend .shared {
  background: var(--accent2);
}

.profile-costs-section {
  margin-top: 8px;
  border-top: 1px solid #21262d;
  padding-top: 8px;
}

.profile-costs-section-title,
.profile-cost-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.profile-costs-section-title {
  margin-bottom: 6px;
}

.profile-cost-user {
  padding: 7px 0;
  border-bottom: 1px solid rgba(48, 54, 61, 0.45);
  font-size: 0.75rem;
}

.profile-cost-user:last-child {
  border-bottom: none;
}

.profile-cost-user > div:first-child {
  min-width: 0;
}

.profile-cost-user strong,
.profile-cost-user span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-cost-user-stats {
  text-align: right;
  flex-shrink: 0;
}

.profile-costs-note {
  margin-top: 8px;
  line-height: 1.35;
}

.costs-modal-card {
  width: min(980px, calc(100vw - 42px));
}

.costs-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
  padding-right: 26px;
}

.costs-modal-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.costs-modal-filters label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
}

.costs-modal-filters select {
  min-width: 132px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #0d1117;
  color: var(--text);
}

.costs-modal-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.costs-modal-summary > div {
  padding: 10px;
  border: 1px solid #21262d;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
}

.costs-modal-summary span,
.costs-modal-summary strong {
  display: block;
}

.costs-modal-summary span {
  color: var(--muted);
  font-size: 0.72rem;
}

.costs-modal-summary strong {
  margin-top: 4px;
  font-size: 1.05rem;
}

.costs-modal-chart {
  height: 230px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 14px 10px 30px;
  border: 1px solid #21262d;
  border-radius: 12px;
  background:
    linear-gradient(to top, rgba(255,255,255,0.055) 1px, transparent 1px) 0 0 / 100% 25%,
    rgba(255, 255, 255, 0.025);
  overflow-x: auto;
  overflow-y: hidden;
}

.costs-modal-bar {
  min-width: 18px;
  flex: 1 0 18px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
}

.costs-modal-bar > span {
  width: 100%;
  max-width: 22px;
  min-height: 3px;
  display: flex;
  flex-direction: column-reverse;
  overflow: hidden;
  border-radius: 999px 999px 3px 3px;
  background: rgba(88, 166, 255, 0.16);
  box-shadow: 0 0 0 1px rgba(88, 166, 255, 0.18);
}

.costs-modal-bar > span.empty {
  opacity: 0.45;
  background: rgba(139, 148, 158, 0.28);
  box-shadow: none;
}

.costs-modal-bar i {
  display: block;
  width: 100%;
}

.costs-modal-bar .mine {
  background: var(--accent);
}

.costs-modal-bar .shared {
  background: var(--accent2);
}

.costs-modal-bar em {
  position: relative;
  top: 22px;
  color: var(--muted);
  font-size: 0.64rem;
  font-style: normal;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

.costs-modal-users {
  margin-top: 14px;
  border-top: 1px solid #21262d;
  padding-top: 10px;
}

.costs-modal-users h3 {
  margin: 0 0 6px;
  font-size: 0.9rem;
}

.profile-workspace-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}

.profile-costs-expand {
  align-self: flex-start;
  margin-top: 6px;
}

#costs-analytics-modal.auth-modal {
  padding: 14px;
}

#costs-analytics-modal .costs-modal-card,
.auth-card.costs-modal-card,
.app-dialog-card.costs-modal-card {
  width: min(1500px, calc(100vw - 28px));
  max-width: none;
  height: min(920px, calc(100vh - 24px));
  max-height: calc(100vh - 24px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 28px 30px;
}

.costs-modal-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  flex-shrink: 0;
}

.costs-modal-header > div:first-child {
  max-width: 300px;
}

.costs-modal-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(145px, 1fr));
  gap: 8px;
  min-width: min(760px, 100%);
}

.costs-modal-filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--muted);
  font-size: 0.72rem;
}

.costs-modal-filters select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #0d1117;
  color: var(--text);
  padding: 7px 9px;
}

.costs-quickbar {
  display: grid;
  grid-template-columns: repeat(4, auto) minmax(280px, 1fr) auto;
  gap: 8px;
  align-items: end;
  margin: 8px 0 12px;
  flex-shrink: 0;
}

.costs-quickbar button {
  border: 1px solid #30363d;
  border-radius: 999px;
  background: rgba(88, 166, 255, 0.08);
  color: var(--text);
  padding: 8px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.costs-quickbar button:hover {
  border-color: var(--accent);
  background: rgba(88, 166, 255, 0.16);
}

.costs-quickbar label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
}

.costs-quickbar input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #0d1117;
  color: var(--text);
  padding: 8px 10px;
}

.costs-modal-body {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto minmax(0, auto);
  gap: 10px;
  overflow: hidden;
}

.costs-modal-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 6px 0 2px;
}

.costs-modal-summary > div {
  border: 1px solid #21262d;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  padding: 10px;
}

.costs-modal-summary span,
.costs-modal-summary strong {
  display: block;
}

.costs-modal-summary span {
  color: var(--muted);
  font-size: 0.75rem;
}

.costs-modal-summary strong {
  margin-top: 4px;
  font-size: 1.05rem;
}

.costs-modal-chart {
  height: min(52vh, 470px);
  min-height: 320px;
  padding: 10px 12px;
  border: 1px solid #21262d;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  overflow: hidden;
}

.costs-modal-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.cost-grid-line {
  stroke: rgba(139, 148, 158, 0.3);
  stroke-width: 1;
}

.cost-grid-line.muted {
  stroke: rgba(139, 148, 158, 0.13);
}

.cost-axis-label,
.cost-date-label {
  fill: var(--muted);
  font-size: 16px;
}

.cost-date-label {
  font-size: 15px;
}

.cost-bar-mine {
  fill: var(--accent);
}

.cost-bar-shared {
  fill: var(--accent2);
}

.cost-line-total {
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cost-area-fill {
  fill: rgba(88, 166, 255, 0.16);
}

.costs-modal-feature-bars {
  min-height: 0;
  max-height: min(54vh, 520px);
  padding: 16px;
  border: 1px solid #21262d;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

.costs-feature-row {
  display: grid;
  grid-template-columns: minmax(170px, 250px) minmax(220px, 1fr) minmax(90px, 120px);
  gap: 12px;
  align-items: center;
  min-height: 44px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(33, 38, 45, 0.65);
}

.costs-feature-row:last-child {
  border-bottom: none;
}

.costs-feature-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.costs-feature-row div {
  height: 18px;
  border-radius: 999px;
  background: rgba(88, 166, 255, 0.12);
  overflow: hidden;
}

.costs-feature-row i {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.costs-feature-row i.mine {
  background: var(--accent);
}

.costs-feature-row i.shared {
  background: var(--accent2);
}

.costs-feature-row i.project {
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}

.costs-feature-row strong {
  text-align: right;
  white-space: nowrap;
}

.costs-modal-table {
  min-height: 320px;
  max-height: 100%;
  overflow: auto;
  border: 1px solid #21262d;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
}

.costs-table-head,
.costs-table-row {
  display: grid;
  grid-template-columns: minmax(260px, 2fr) minmax(130px, 1fr) minmax(110px, 0.8fr) minmax(130px, 0.9fr) 90px;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid #21262d;
}

.costs-table-head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #0d1117;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.costs-sort-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  min-width: 0;
  cursor: pointer;
}

.costs-sort-btn span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.costs-sort-btn i {
  color: #7d8590;
  font-style: normal;
  font-size: 0.78rem;
  line-height: 1;
}

.costs-sort-btn:hover,
.costs-sort-btn.active {
  color: var(--text);
}

.costs-sort-btn.active i {
  color: var(--accent);
}

.costs-table-row {
  font-size: 0.82rem;
}

.costs-table-row > span,
.costs-table-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.costs-table-row > span:first-child {
  display: grid;
  gap: 2px;
}

.costs-table-row small {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.costs-modal-users {
  margin-top: 0;
  min-height: 0;
  max-height: min(20vh, 180px);
  overflow-y: auto;
  display: grid;
  gap: 6px;
  padding-right: 4px;
}

.costs-modal-users h3 {
  margin: 0 0 6px;
}

.costs-modal-users .profile-cost-user {
  padding: 5px 0;
}

.costs-feature-row span {
  display: grid;
  gap: 2px;
}

.costs-feature-row small {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .costs-modal-header {
    flex-direction: column;
  }

  .costs-modal-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .costs-modal-card {
    width: calc(100vw - 12px);
    height: calc(100vh - 12px);
  }

  .costs-modal-filters,
  .costs-quickbar {
    grid-template-columns: 1fr;
  }

  .costs-modal-chart {
    min-height: 260px;
  }
}

.profile-workspace-card {
  padding: 8px;
  border: 1px solid #21262d;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  margin-bottom: 8px;
}

.profile-workspace-head,
.profile-workspace-actions,
.profile-workspace-invite,
.profile-workspace-member {
  display: flex;
  align-items: center;
  gap: 6px;
}

.profile-workspace-head {
  justify-content: space-between;
  margin-bottom: 7px;
}

.profile-workspace-head > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.profile-workspace-visible {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 0.72rem;
  white-space: nowrap;
}

.profile-workspace-actions,
.profile-workspace-invite {
  margin: 6px 0;
}

.profile-workspace-actions input,
.profile-workspace-invite input {
  min-width: 0;
  flex: 1;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #0d1117;
  color: var(--text);
  font-size: 0.76rem;
}

.profile-workspace-members {
  margin-top: 8px;
  border-top: 1px solid #21262d;
  padding-top: 6px;
}

.profile-workspace-member {
  justify-content: space-between;
  padding: 4px 0;
  font-size: 0.74rem;
  border-bottom: 1px solid rgba(48, 54, 61, 0.45);
}

.profile-workspace-member:last-child {
  border-bottom: none;
}

.profile-workspace-member span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-workspace-pending {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed #30363d;
}

.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.auth-modal.hidden {
  display: none;
}

.auth-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(1, 4, 9, 0.55);
  backdrop-filter: blur(4px);
}

.auth-card {
  position: relative;
  z-index: 1;
  width: min(380px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.auth-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.auth-close:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.auth-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-right: 24px;
}

.auth-logo {
  border-radius: 8px;
  flex-shrink: 0;
  width: 80px;
  height: 54px;
  object-fit: contain;
  mix-blend-mode: screen;
}

.auth-card-header h2 {
  margin: 0 0 2px;
  font-size: 1.15rem;
}

.auth-subtitle {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.auth-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  padding: 4px;
  background: #0d1117;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.auth-tab {
  flex: 1;
  padding: 7px 10px;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  font-family: inherit;
}

.auth-tab.active {
  color: var(--text);
  background: var(--panel);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.auth-error {
  min-height: 1.2em;
  margin-bottom: 8px;
  font-size: 0.82rem;
  color: var(--danger);
}

.auth-error:empty {
  display: none;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted);
}

.auth-form input {
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #0d1117;
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
}

.auth-form input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15);
}

.auth-submit {
  width: 100%;
  margin-top: 4px;
  padding: 10px;
  font-weight: 600;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 8px;
  color: var(--text-muted, #888);
  font-size: 12px;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border, #333);
}

.auth-onshape-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--border, #444);
  border-radius: 6px;
  background: transparent;
  color: var(--text, #eee);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.auth-onshape-btn:hover {
  background: var(--surface2, #2a2a2a);
  border-color: var(--accent, #5b8af5);
}
.auth-onshape-logo {
  display: block;
  width: 18px !important;
  height: 18px !important;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  flex: 0 0 auto;
}

/* ── Multi-key manager ─────────────────────────────────────────────── */
.ai-keys-card {
  max-width: 500px;
  width: 92vw;
  max-height: calc(100vh - 48px);
}

.ai-keys-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 12px;
}

.ai-keys-empty {
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 12px 0;
}

.ai-key-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color .15s;
}

.ai-key-row--active {
  border-color: #388bfd66;
  background: rgba(56,139,253,.07);
}

.ai-key-row-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.ai-key-row-name {
  font-weight: 600;
  font-size: .88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.ai-key-badge {
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: .03em;
  white-space: nowrap;
}

.badge-openai {
  background: rgba(16,185,129,.18);
  color: #34d399;
  border: 1px solid rgba(16,185,129,.3);
}

.badge-claude {
  background: rgba(139,92,246,.18);
  color: #c084fc;
  border: 1px solid rgba(139,92,246,.3);
}

.ai-key-row-model {
  font-size: .75rem;
  color: var(--muted);
  white-space: nowrap;
}

.ai-key-model-select {
  font-size: 0.74rem;
  color: var(--text);
  background: #0d1117;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 6px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.12s;
  max-width: 170px;
}

.ai-key-model-select:hover,
.ai-key-model-select:focus {
  border-color: var(--accent);
}

.ai-key-row--active .ai-key-model-select {
  border-color: #1f6feb;
  color: #58a6ff;
}

.ai-key-row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.ai-key-active-badge {
  font-size: .75rem;
  color: #58a6ff;
  font-weight: 600;
  padding: 3px 8px;
  background: rgba(88,166,255,.12);
  border-radius: 6px;
  border: 1px solid rgba(88,166,255,.25);
}

.ai-key-btn-activate {
  font-size: .75rem;
  padding: 3px 9px;
  background: rgba(35,134,54,.25);
  border-color: #238636;
  color: #56d364;
}

.ai-key-btn-activate:hover { background: rgba(35,134,54,.4); }

.ai-keys-section-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 0 4px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.ai-keys-section-label--with-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ai-keys-section-label--with-action .ai-key-btn-share {
  text-transform: none;
  letter-spacing: 0;
}

.ai-key-row--team {
  background: rgba(88, 166, 255, 0.04);
  border-color: #21262d;
}

.ai-key-row--team .ai-key-row-info {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  flex: 1;
}

.ai-key-row-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.ai-key-team-members {
  max-width: 360px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-key-team-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 0.72rem;
  margin: -4px 0 4px;
}

.ai-key-team-filter select {
  min-width: 160px;
  max-width: 230px;
  padding: 4px 7px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #0d1117;
  color: var(--text);
}

.ai-key-team-add {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.ai-key-team-add input {
  flex: 1;
  min-width: 0;
  background: #0d1117;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.78rem;
  padding: 6px 8px;
  outline: none;
}

.ai-key-team-add input:focus {
  border-color: var(--accent);
}

.ai-key-team-subtitle {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 10px 0 4px;
  text-transform: uppercase;
}

.ai-key-team-row-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.ai-key-team-note {
  color: var(--muted);
  font-size: 0.72rem;
  margin-top: 8px;
  line-height: 1.35;
}

.ai-key-shared-by {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  color: var(--muted);
}

.ai-key-btn-team-toggle {
  font-size: .75rem;
  padding: 3px 9px;
  background: transparent;
  border-color: var(--border);
  color: var(--muted);
}

.ai-key-btn-team-toggle:hover,
.ai-key-btn-team-toggle.active {
  background: rgba(35,134,54,.25);
  border-color: #238636;
  color: #56d364;
}

.ai-key-btn-manage-access {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: .75rem;
  padding: 3px 9px;
  background: transparent;
  border-color: var(--border);
  color: var(--muted);
}

.ai-key-btn-manage-access:hover,
.ai-key-btn-manage-access.active {
  color: var(--text);
  border-color: var(--accent);
  background: rgba(88,166,255,.08);
}

/* Members panel */
.ai-key-members-panel {
  background: #0d1117;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 10px 12px;
  margin-bottom: 4px;
}

.ai-key-members-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.ai-key-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid #21262d;
}

.ai-key-member-row:last-child { border-bottom: none; }

.ai-key-member-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-key-member-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  flex-wrap: wrap;
  max-width: 360px;
}

.ai-key-member-model-select {
  max-width: 150px;
}

.ai-key-daily-limit {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 0.7rem;
}

.ai-key-daily-limit input {
  width: 104px;
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: #0d1117;
  color: var(--text);
  font-size: 0.72rem;
}

.ai-key-daily-limit input:focus {
  outline: none;
  border-color: var(--accent);
}

.ai-key-member-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(88,166,255,.15);
  color: #58a6ff;
  font-size: 0.72rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ai-key-member-name {
  font-size: 0.8rem;
  color: var(--text);
  display: block;
}

.ai-key-member-email {
  font-size: 0.7rem;
  color: var(--muted);
  display: block;
}

.ai-key-grant-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  padding: 3px 9px;
  background: rgba(248,81,73,.12);
  border-color: rgba(248,81,73,.3);
  color: #f85149;
  transition: all 0.12s;
}

.ai-key-grant-btn.active {
  background: rgba(35,134,54,.2);
  border-color: #238636;
  color: #56d364;
}

.ai-key-grant-btn:hover { opacity: 0.85; }
.ai-key-grant-btn:disabled { opacity: 0.5; cursor: wait; }

.ai-key-members-loading,
.ai-key-members-error,
.ai-key-members-empty {
  font-size: 0.78rem;
  color: var(--muted);
  padding: 4px 0;
}

.ai-key-members-error { color: #f85149; }

.ai-key-btn-rename {
  font-size: .8rem;
  padding: 3px 7px;
  color: var(--muted);
}

.ai-key-btn-rename:hover { color: var(--fg); }

.ai-key-btn-delete {
  font-size: .8rem;
  padding: 3px 7px;
  color: #ff7b72;
  background: rgba(218,54,51,.12);
  border-color: rgba(218,54,51,.3);
}

.ai-key-btn-delete:hover { background: rgba(218,54,51,.25); }

/* Add-key collapsible section */
.ai-key-add-section {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.ai-key-add-toggle {
  cursor: pointer;
  padding: 9px 12px;
  font-size: .85rem;
  font-weight: 600;
  color: #58a6ff;
  list-style: none;
  user-select: none;
}

.ai-key-add-toggle::-webkit-details-marker { display: none; }
.ai-key-add-toggle::marker { display: none; }

.ai-key-add-toggle:hover { background: rgba(88,166,255,.06); }

.ai-key-add-form {
  padding: 0 12px 12px;
  border-top: 1px solid var(--border);
}

.ai-key-share-toggle {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 0.82rem;
  margin-top: 2px;
}

.ai-key-share-toggle input {
  width: auto;
  margin: 0;
}

#ai-key-team-label {
  margin-top: 2px;
}

#ai-key-share-hint {
  margin: -2px 0 2px;
  line-height: 1.35;
}

.collab-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
}

.collab-badge {
  position: absolute;
  bottom: -1px;
  right: -1px;
  border: 2px solid var(--panel);
  opacity: 0;
  transition: opacity 0.15s;
}

.collab-badge.live {
  opacity: 1;
}

.collab-dot.live {
  background: #3fb950;
  box-shadow: 0 0 8px rgba(63, 185, 80, 0.6);
}

.collab-presence {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#user-label {
  font-size: 0.85rem;
  font-weight: 500;
}

/* Team panel */
.team-panel {
  margin-bottom: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.team-invites-alert {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.team-invites-alert.hidden {
  display: none;
}

.team-invite-banner {
  padding: 10px;
  background: rgba(56, 139, 253, 0.12);
  border: 1px solid rgba(56, 139, 253, 0.35);
  border-radius: 8px;
  font-size: 0.82rem;
}

.team-invite-banner p {
  margin: 0 0 8px;
  line-height: 1.4;
}

.team-invite-actions {
  display: flex;
  gap: 6px;
}

.workspace-switcher-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0;
}

.workspace-switcher-row .team-select {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.team-select {
  width: 100%;
  margin: 8px 0;
  padding: 6px 8px;
  background: #0d1117;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  font-size: 0.85rem;
}

.btn-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #0d1117;
  color: var(--muted);
  cursor: pointer;
}

.btn-icon:hover {
  color: var(--text);
  border-color: #484f58;
  background: #21262d;
}

.btn-icon svg {
  display: block;
}

.app-dialog-card {
  width: min(400px, 100%);
}

.app-dialog-title {
  margin: 0 0 12px;
  font-size: 1.05rem;
}

.app-dialog-label {
  display: block;
  margin-bottom: 10px;
  font-size: 0.82rem;
  color: var(--muted);
}

.app-dialog-label input,
.app-dialog-label select {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  background: #0d1117;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  font-size: 0.9rem;
}

.app-dialog-label select {
  cursor: pointer;
}

.app-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

/* ── Measure tool panel (Fusion 360-style) ───────────────── */
.measure-card {
  width: min(520px, calc(100vw - 28px));
  max-height: min(86vh, 820px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.measure-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px 0;
}

.measure-title-icon {
  font-size: 1.15rem;
  line-height: 1;
}

.measure-title {
  margin: 0 !important;
  font-size: 1rem !important;
}

.measure-card .auth-close {
  top: 12px;
  right: 14px;
}

/* ── Mode toolbar ── */
.measure-pick-toolbar {
  display: flex;
  gap: 6px;
  padding: 12px 20px 0;
  flex-wrap: wrap;
}

.measure-mode-btn {
  flex: 1 1 auto;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  white-space: nowrap;
}

.measure-mode-btn:hover {
  border-color: rgba(88, 166, 255, 0.5);
  color: var(--text);
  background: rgba(88, 166, 255, 0.1);
}

.measure-mode-btn.active {
  border-color: #58a6ff;
  background: rgba(88, 166, 255, 0.18);
  color: #58a6ff;
  box-shadow: 0 0 0 1px rgba(88, 166, 255, 0.35);
}

.measure-clear-btn {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.measure-clear-btn:hover {
  border-color: rgba(255, 123, 114, 0.6);
  color: #ff7b72;
}

.measure-hint-text {
  margin: 8px 20px 0;
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.4;
}

/* ── Scrollable content area ── */
.measure-content {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 10px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Sections ── */
.measure-section {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.measure-section-title {
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: 1px solid var(--border);
}

/* ── Selected object stat grid ── */
.measure-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
}

.measure-stat {
  padding: 9px 11px;
  background: var(--surface, #161b22);
}

.measure-stat span {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  margin-bottom: 2px;
}

.measure-stat strong {
  display: block;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
}

.measure-center-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 12px;
  font-size: 0.75rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
  gap: 8px;
}

.measure-center-row strong {
  color: var(--text);
  font-size: 0.78rem;
}

/* ── Picked points ── */
.measure-pick-row {
  display: grid;
  grid-template-columns: 22px auto 1fr;
  align-items: start;
  gap: 6px 10px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 0.75rem;
}

.measure-pick-row:last-child { border-bottom: none; }

.measure-pick-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(88, 166, 255, 0.2);
  color: #58a6ff;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}

.measure-pick-type {
  color: var(--muted);
  font-size: 0.72rem;
  padding-top: 1px;
}

.measure-pick-coords {
  color: var(--text);
  font-family: ui-monospace, monospace;
  font-size: 0.72rem;
  grid-column: 2 / -1;
}

.measure-extra {
  display: block;
  grid-column: 2 / -1;
  color: #3fb950;
  font-size: 0.69rem;
  font-family: ui-monospace, monospace;
}

/* ── Distance / angle rows ── */
.measure-dist-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 0.75rem;
}

.measure-dist-row:last-child { border-bottom: none; }

.measure-dist-label {
  color: var(--muted);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
}

.measure-dist-value {
  font-size: 1rem;
  font-weight: 700;
  color: #ffd700;
  text-align: center;
  font-family: ui-monospace, monospace;
}

.measure-dist-delta {
  color: var(--muted);
  font-size: 0.68rem;
  text-align: right;
  font-family: ui-monospace, monospace;
}

/* ── Empty hint ── */
.measure-empty-hint {
  padding: 12px;
  font-size: 0.76rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

.measure-empty-hint strong {
  color: #58a6ff;
}

/* ── Legacy compat ── */
.measure-row, .measure-grid { display: none; }

@media (max-width: 600px) {
  .measure-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .measure-dist-row {
    grid-template-columns: auto 1fr;
  }
  .measure-dist-delta { display: none; }
}

.drop-dest-file {
  margin: 0 0 8px;
  font-size: 0.82rem;
  word-break: break-all;
}

.drop-dest-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}

.drop-dest-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #161b22;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.drop-dest-option:hover:not(:disabled) {
  border-color: #388bfd;
  background: #21262d;
}

.drop-dest-option:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.drop-dest-option-title {
  font-size: 0.88rem;
  font-weight: 600;
}

.drop-dest-option-meta {
  font-size: 0.75rem;
}

#drop-destination-new {
  border-color: #388bfd55;
}

.folder-share-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  max-height: 140px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #0d1117;
}

.folder-share-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  font-size: 0.82rem;
  border-bottom: 1px solid var(--border);
}

.folder-share-item:last-child {
  border-bottom: none;
}

.folder-share-empty {
  padding: 10px;
}

.folder-share-hint {
  margin: 0 0 10px;
}

.folder-share-restrict {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--muted);
  margin: 8px 0;
  cursor: pointer;
}

.folder-share-restrict input {
  margin-top: 2px;
  flex-shrink: 0;
}

.btn-share-remove {
  width: 22px;
  height: 22px;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
}

.workspace-create-row,
.team-invite-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
}

.workspace-create-row {
  margin-top: 4px;
}

.workspace-create-row input {
  padding: 6px 8px;
  background: #0d1117;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  font-size: 0.82rem;
}

.team-invite-row input {
  padding: 6px 8px;
  background: #0d1117;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  font-size: 0.82rem;
}

.team-members {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  font-size: 0.82rem;
}

.team-members li {
  padding: 4px 0;
  border-bottom: 1px solid rgba(48, 54, 61, 0.5);
}

.team-members-dropdown {
  border-bottom: none !important;
  padding: 0 !important;
}

.team-members-dropdown details {
  border: 1px solid rgba(48, 54, 61, 0.85);
  border-radius: 8px;
  background: rgba(13, 17, 23, 0.55);
  overflow: hidden;
}

.team-members-dropdown summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  cursor: pointer;
  color: var(--text);
  font-weight: 700;
  list-style: none;
}

.team-members-dropdown summary::-webkit-details-marker {
  display: none;
}

.team-members-dropdown summary::after {
  content: "▾";
  color: var(--muted);
  font-size: 0.72rem;
  transition: transform 0.15s;
}

.team-members-dropdown details[open] summary::after {
  transform: rotate(180deg);
}

.team-members-list {
  border-top: 1px solid rgba(48, 54, 61, 0.65);
  padding: 4px 8px 7px;
}

.team-member-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(48, 54, 61, 0.45);
}

.team-member-row:last-child {
  border-bottom: none;
}

.team-member-row strong,
.team-member-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-member-row small {
  color: var(--muted);
  text-transform: capitalize;
}


/* ══════════════════════════════════════════════════════════════════════
   Collapsible panels: left sidebar, ribbon toolbar, activity log
   ══════════════════════════════════════════════════════════════════════ */

/* Allow sidebar grid column to shrink to 0 */
.sidebar.left { min-width: 0; }

/* Smooth grid column animation when sidebar shows/hides */
#app { transition: grid-template-columns 0.22s cubic-bezier(0.4,0,0.2,1); }
#app.left-panel-hidden {
  grid-template-columns: 0px 0px 1fr 6px var(--right-panel-width);
}
#app.right-panel-hidden {
  grid-template-columns: var(--left-panel-width) 6px 1fr 0px 0px;
}
#app.left-panel-hidden.right-panel-hidden {
  grid-template-columns: 0px 0px 1fr 0px 0px;
}
#app.left-panel-hidden .sidebar.left          { overflow: hidden; pointer-events: none; }
#app.left-panel-hidden .panel-gutter-v[data-gutter="left-split"] { pointer-events: none; }
#app.right-panel-hidden .sidebar.right       { overflow: hidden; pointer-events: none; }
#app.right-panel-hidden .panel-gutter-v[data-gutter="right-split"] { pointer-events: none; }

/* Ribbon collapse via max-height */
.ribbon-bar {
  overflow: hidden;
  max-height: 500px;
  transition: max-height 0.22s cubic-bezier(0.4,0,0.2,1);
}
.ribbon-bar.ribbon-bar--hidden { max-height: 0 !important; }

/* Activity-log collapse (show header row only) */
.left-log-dock { transition: height 0.22s cubic-bezier(0.4,0,0.2,1); }
.left-log-dock.log-dock--collapsed {
  height: 40px !important;
  min-height: 0 !important;
  overflow: hidden;
}

/* ── Sidebar re-open tab (fixed on left edge when sidebar is hidden) ── */
#sidebar-reopen-tab {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 300;
  width: 20px;
  height: 48px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: none;
  border-radius: 0 8px 8px 0;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text);
  font-size: 11px;
  padding: 0;
  transition: background 0.12s, color 0.12s;
  box-shadow: 2px 0 6px rgba(0,0,0,0.35);
}
#sidebar-reopen-tab:hover { background: #21262d; color: var(--accent); }
#app.left-panel-hidden ~ #sidebar-reopen-tab,
body.sidebar-hidden #sidebar-reopen-tab { display: flex; }

/* ── Right panel re-open tab ─────────────────────────────────────────── */
#right-panel-reopen-tab {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 300;
  width: 20px;
  height: 48px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-right: none;
  border-radius: 8px 0 0 8px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text);
  font-size: 11px;
  padding: 0;
  transition: background 0.12s, color 0.12s;
  box-shadow: -2px 0 6px rgba(0,0,0,0.35);
}
#right-panel-reopen-tab:hover { background: #21262d; color: var(--accent); }

/* ── Gutter collapse chevrons ────────────────────────────────────────── */
.gutter-collapse-btn {
  position: absolute;
  z-index: 60;
  width: 18px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #161b22;
  color: var(--muted);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}

.gutter-collapse-btn:hover {
  color: var(--accent);
  background: #21262d;
  border-color: var(--accent);
}

.gutter-collapse-btn--left { left: -6px; }
.gutter-collapse-btn--right { right: -6px; }

#app.left-panel-hidden .gutter-collapse-btn--left { display: none; }
#app.right-panel-hidden .gutter-collapse-btn--right { display: none; }
#app.left-panel-hidden .sidebar-edge-collapse--left { display: none; }

.sidebar-edge-collapse {
  position: absolute;
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
  z-index: 55;
  width: 18px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #161b22;
  color: var(--muted);
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}

.sidebar-edge-collapse:hover {
  color: var(--accent);
  background: #21262d;
  border-color: var(--accent);
}

/* ── Collapse toggle buttons ─────────────────────────────────────────── */
.btn-collapse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1;
  flex-shrink: 0;
  white-space: nowrap;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.btn-collapse:hover  { color: var(--text); background: #21262d; }
.btn-collapse[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }

/* ── Activity-log collapse button ────────────────────────────────────── */
#btn-log-collapse {
  padding: 3px 10px;
  font-size: 0.78rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.12s, background 0.12s;
  white-space: nowrap;
}
#btn-log-collapse:hover { color: var(--text); background: #21262d; }

.gizmo-drag-hud {
  position: absolute;
  z-index: 30;
  padding: 6px 14px;
  border-radius: 6px;
  background: rgba(13, 17, 23, 0.92);
  border: 1px solid var(--accent);
  color: var(--text);
  font-size: 0.82rem;
  font-family: var(--mono);
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

.fe-mesh-edit { opacity: 0.92; border-style: dashed; }

.right-panel-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 8px 8px 4px;
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--panel);
}

.right-panel-tab {
  border: 1px solid var(--border);
  background: #0d1117;
  color: var(--muted);
  border-radius: 6px;
  padding: 5px 6px;
  font-size: 0.76rem;
  cursor: pointer;
}

.right-panel-tab.active {
  color: var(--text);
  border-color: var(--accent);
  background: #1f6feb22;
}

.right-tab-panel { display: none; }
.right-tab-panel.active { display: block; }

/* Prompt AI panels — fill sidebar to the bottom */
.prompt-panel.right-tab-panel.active,
.wiring-prompt-panel.right-tab-panel.active,
.rigging-prompt-panel.right-tab-panel.active {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin-bottom: 0;
}

.edit-panel.right-tab-panel.active,
.feature-history-panel.right-tab-panel.active,
.reference-panel.right-tab-panel.active,
.sketch-inspector.right-tab-panel.active {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.right-panel-tabs,
.project-cost-thumb {
  flex-shrink: 0;
}

.panel-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.feature-history-collapsed #feature-editor,
.feature-history-collapsed > p {
  display: none;
}

.feature-history-panel {
  min-width: 0;
  overflow-x: hidden;
}

.feature-history-panel h2,
.feature-editor-head strong {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.feature-editor {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.feature-editor-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}

.feature-editor-status {
  line-height: 1.35;
}

.fe-part-label {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.fe-feature {
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(48, 54, 61, 0.75);
  border-radius: 8px;
  background: rgba(13, 17, 23, 0.45);
}

.fe-feature-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
}

.fe-feature-title {
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fe-feature-actions {
  display: flex;
  gap: 3px;
  flex-wrap: nowrap;
}

.fe-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: #0d1117;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1;
  cursor: pointer;
}

.fe-btn:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--accent);
}

.fe-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.fe-params {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.fe-param {
  display: grid;
  grid-template-columns: minmax(58px, 0.55fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.fe-param-label {
  min-width: 0;
  color: var(--muted);
  font-size: 0.72rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fe-input,
.fe-input-vec {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #0d1117;
  color: var(--text);
  font-size: 0.78rem;
}

.fe-param-vec {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  min-width: 0;
}

.fe-param-unit {
  color: var(--muted);
  font-size: 0.72rem;
  min-width: 20px;
}

.fe-param-static {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #c9d1d9;
  font-size: 0.78rem;
}

.marking-menu {
  position: fixed;
  z-index: 1000;
  width: 420px;
  height: 420px;
  margin-left: -210px;
  margin-top: -210px;
  border-radius: 50%;
  pointer-events: none;
}

.marking-menu button {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 88px;
  height: 58px;
  margin-left: -44px;
  margin-top: -29px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(13, 17, 23, 0.96);
  color: var(--text);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  cursor: pointer;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.marking-menu button:hover {
  border-color: var(--accent);
  background: #1f6feb33;
}

.marking-menu button span { font-size: 1.05rem; line-height: 1; }
.marking-menu button small { font-size: 0.63rem; color: var(--muted); }
.marking-menu button:nth-child(1) { transform: translate(0, -154px); }
.marking-menu button:nth-child(2) { transform: translate(77px, -133px); }
.marking-menu button:nth-child(3) { transform: translate(133px, -77px); }
.marking-menu button:nth-child(4) { transform: translate(154px, 0); }
.marking-menu button:nth-child(5) { transform: translate(133px, 77px); }
.marking-menu button:nth-child(6) { transform: translate(77px, 133px); }
.marking-menu button:nth-child(7) { transform: translate(0, 154px); }
.marking-menu button:nth-child(8) { transform: translate(-77px, 133px); }
.marking-menu button:nth-child(9) { transform: translate(-133px, 77px); }
.marking-menu button:nth-child(10) { transform: translate(-154px, 0); }
.marking-menu button:nth-child(11) { transform: translate(-133px, -77px); }
.marking-menu button:nth-child(12) { transform: translate(-77px, -133px); }

/* Direct modeling HUD + gizmo panel */
.dm-hud {
  position: absolute;
  z-index: 30;
  width: min(300px, calc(100% - 24px));
  padding: 12px 14px;
  padding-top: 10px;
  padding-right: 28px;
  border-radius: 8px;
  background: rgba(13, 17, 23, 0.96);
  border: 1px solid var(--border);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  font-size: 0.82rem;
  user-select: none;
}
.floating-panel-grip {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  cursor: grab;
  font-size: 15px;
  line-height: 1;
  padding: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.floating-panel-grip:hover {
  color: var(--accent);
  background: rgba(88, 166, 255, 0.14);
}
.floating-panel--dragging .floating-panel-grip {
  cursor: grabbing;
}
.floating-panel--dragging {
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.62);
  border-color: var(--accent);
  cursor: grabbing;
}
.dm-hud-title { font-weight: 600; margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.dm-hud-hint { font-weight: 400; font-size: 0.68rem; color: var(--muted); }
.dm-hud-row { display: grid; grid-template-columns: 72px 1fr auto; gap: 6px; align-items: center; margin-bottom: 6px; }
.dm-hud-row label { color: var(--muted); font-size: 0.74rem; }
.dm-hud-row input[type="text"], .dm-hud-row select {
  width: 100%; padding: 4px 8px; border-radius: 4px;
  border: 1px solid var(--border); background: #0d1117; color: var(--text); font-size: 0.8rem;
}
.dm-hud-row-hidden { display: none; }
.dm-hud-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }

/* ── Fillet / Chamfer drag scrubber ────────────────────────────────── */
.dm-fc-scrub-row { grid-template-columns: 72px 1fr; }
.dm-fc-scrub {
  display: flex; align-items: center; gap: 4px;
  background: #161b22; border: 1px solid var(--border);
  border-radius: 5px; padding: 2px 6px; cursor: ew-resize;
  transition: border-color 0.15s;
}
.dm-fc-scrub:hover { border-color: var(--accent); }
.dm-fc-scrub--dragging { border-color: var(--accent); background: #1f6feb22; cursor: grabbing; }
.dm-fc-scrub-icon {
  font-size: 0.75rem; color: var(--muted); flex-shrink: 0;
  pointer-events: none; user-select: none;
}
.dm-fc-scrub input[type="text"] {
  width: 52px; padding: 3px 4px; border: none; background: transparent;
  color: var(--text); font-size: 0.82rem; text-align: right; cursor: text;
  outline: none;
}
.dm-fc-scrub input[type="text"]:focus { background: #0d1117; border-radius: 3px; }
.dm-fc-scrub .dm-hud-unit { font-size: 0.72rem; color: var(--muted); pointer-events: none; }
.dm-fc-preview-status {
  font-size: 0.72rem; min-height: 14px; margin: 4px 0 2px; text-align: right;
}
.dm-fc-preview--loading { color: var(--muted); }
.dm-fc-preview--ok      { color: #3fb950; }
.dm-fc-preview--err     { color: #f85149; }
.dm-hud-btns { display: flex; gap: 4px; }
.dm-plane-btn.active { border-color: var(--accent); color: var(--accent); }
.direct-tools-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.direct-tool-btn.active { border-color: var(--accent); background: #1f6feb22; }

.gizmo-panel {
  position: absolute; z-index: 20;
  width: min(280px, calc(100% - 24px)); padding: 10px 12px;
  padding-top: 8px;
  padding-right: 26px;
  border-radius: 8px; background: rgba(13, 17, 23, 0.96);
  border: 1px solid var(--border); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  user-select: none;
}
.dm-hud-row input[type="text"], .dm-hud-row select,
.gizmo-panel-fields input {
  user-select: text;
}
.gizmo-panel.hidden { display: none; }
.gizmo-panel-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 600; margin-bottom: 8px; font-size: 0.85rem; }
.gizmo-panel-modes { display: flex; gap: 2px; margin-left: auto; }
.gizmo-panel-modes button, .gizmo-panel-space, .gizmo-panel-button-group button {
  padding: 2px 8px; font-size: 0.72rem; border-radius: 4px;
  border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer;
}
.gizmo-panel-modes button.active, .gizmo-panel-button-group button.active { border-color: var(--accent); color: var(--accent); background: #1f6feb22; }
.gizmo-panel-fields { display: flex; flex-direction: column; gap: 5px; margin-bottom: 6px; }
.gizmo-panel-fields label { display: grid; grid-template-columns: 16px 1fr auto; gap: 6px; align-items: center; font-size: 0.78rem; }
.gizmo-panel-fields input { padding: 3px 6px; border-radius: 4px; border: 1px solid var(--border); background: #0d1117; color: var(--text); }
.gizmo-panel-row {
  display: grid; grid-template-columns: 52px 1fr; gap: 8px; align-items: center;
  margin: 6px 0; font-size: 0.76rem; color: var(--muted);
}
.gizmo-panel-row select {
  min-width: 0; padding: 3px 6px; border-radius: 4px;
  border: 1px solid var(--border); background: #0d1117; color: var(--text);
}
.gizmo-panel-button-group { display: flex; gap: 4px; }
.gizmo-panel-button-group button { flex: 1; }
.gizmo-panel-actions { display: flex; justify-content: flex-end; gap: 6px; }
.gizmo-panel-status { margin-top: 6px; font-size: 0.7rem; }
.gizmo-panel-status.error { color: #f85149; }
.gizmo-panel-status.loading { color: var(--accent); }
.gizmo-panel-status.warn { color: #d29922; }

.mesh-checkup-panel { width: min(320px, calc(100% - 24px)); }
.mesh-checkup-options { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.mesh-checkup-opt { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--text); }
.mesh-checkup-opt select, .mesh-checkup-opt input[type="number"] {
  margin-left: auto; padding: 3px 6px; border-radius: 4px;
  border: 1px solid var(--border); background: #0d1117; color: var(--text);
}
.mesh-checkup-results { margin: 8px 0; max-height: 220px; overflow-y: auto; }
.mesh-checkup-stats { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.72rem; color: var(--muted); margin-bottom: 6px; }
.mesh-checkup-issues { margin: 0; padding-left: 18px; font-size: 0.76rem; color: #f85149; }
.mesh-checkup-ok { margin: 0; font-size: 0.76rem; color: var(--accent2); }
.mesh-checkup-selection { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 0.76rem; }
.mesh-checkup-warn .mesh-checkup-stats { color: #d29922; }

/* ── Section View HUD panel ─────────────────────────────────────────────── */
.section-view-panel {
  position: fixed;
  top: 56px;
  right: 16px;
  width: 220px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  padding: 0;
  z-index: 800;
  display: none;
  flex-direction: column;
  gap: 0;
  font-size: 0.78rem;
  color: var(--text);
}
.section-view-panel.sv-visible { display: flex; }

.sv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px 6px;
  border-bottom: 1px solid var(--border);
}
.sv-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.02em;
}
.sv-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 1;
}
.sv-close:hover { color: var(--text); background: rgba(255,255,255,0.06); }

.sv-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid rgba(48,54,61,0.5);
}
.sv-row:last-of-type { border-bottom: none; }

.sv-label {
  min-width: 48px;
  color: var(--muted);
  font-size: 0.73rem;
}

.sv-axis-btns { display: flex; gap: 4px; }
.sv-axis-btn {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
  width: 28px;
  height: 24px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.sv-axis-btn:hover { background: rgba(88,166,255,0.12); color: var(--text); }
.sv-axis-btn.sv-axis-active {
  background: rgba(88,166,255,0.18);
  border-color: var(--accent);
  color: var(--accent);
}

.sv-slider {
  flex: 1;
  accent-color: var(--accent);
  height: 4px;
  cursor: pointer;
}
.sv-pct {
  min-width: 30px;
  text-align: right;
  color: var(--muted);
  font-size: 0.72rem;
}

.sv-flip-btn, .sv-reset-btn {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  font-size: 0.73rem;
  padding: 4px 0;
  cursor: pointer;
  transition: background 0.12s;
}
.sv-flip-btn:hover, .sv-reset-btn:hover { background: rgba(88,166,255,0.12); }

.sv-hint {
  padding: 5px 10px 7px;
  font-size: 0.68rem;
  color: var(--muted);
  text-align: center;
  border-top: 1px solid var(--border);
}

/* ── Component profile popup ─────────────────────────────────────────────── */
.comp-profile-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(1, 4, 9, 0.7);
  backdrop-filter: blur(3px);
}
.comp-profile-overlay.hidden { display: none; }
.comp-profile-modal {
  width: min(880px, 94vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--panel, #161b22);
  border: 1px solid var(--border, #30363d);
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.comp-profile-head,
.comp-profile-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.comp-profile-foot { border-bottom: none; border-top: 1px solid var(--border); gap: 12px; }
.comp-profile-foot-actions { display: flex; gap: 8px; }
.comp-profile-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1rem;
  cursor: pointer;
}
.comp-profile-close:hover { color: var(--text); }
.comp-profile-head-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.comp-profile-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.comp-profile-tags.hidden { display: none; }
.comp-profile-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.68rem;
  color: var(--muted);
  background: rgba(110, 118, 129, 0.12);
  border: 1px solid rgba(110, 118, 129, 0.25);
  border-radius: 999px;
  padding: 2px 8px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.comp-profile-type-tag {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #58a6ff;
  background: rgba(31, 111, 235, 0.16);
  border: 1px solid rgba(88, 166, 255, 0.35);
  border-radius: 999px;
  padding: 2px 8px;
}
.comp-profile-type-tag.hidden { display: none; }
.comp-profile-type-tag--sourced {
  color: #3fb950;
  background: rgba(46, 160, 67, 0.14);
  border-color: rgba(63, 185, 80, 0.35);
}
.comp-profile-body {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 16px;
  padding: 16px;
  overflow: auto;
}
.comp-profile-viewer {
  width: 100%;
  height: 240px;
  border-radius: 10px;
  overflow: hidden;
  background: #0d1117;
  border: 1px solid var(--border);
}
.comp-profile-source-preview { margin-top: 10px; }
.comp-profile-source-img {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  margin-top: 4px;
}
.comp-profile-section { margin-bottom: 16px; }
.comp-profile-section h4 { margin: 0 0 8px; font-size: 0.82rem; }
.comp-profile-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 0.82rem;
}
.comp-profile-field > span:first-child { color: var(--muted); min-width: 110px; }
.comp-profile-field input,
.comp-profile-field select {
  flex: 1;
  background: #0d1117;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 6px 8px;
}
.comp-profile-kind { font-weight: 600; }
.comp-profile-stats-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.comp-profile-stats-table th,
.comp-profile-stats-table td {
  text-align: left;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.comp-profile-stats-table th { color: var(--muted); font-weight: 500; width: 45%; }
.comp-profile-search-row { display: flex; gap: 8px; margin-bottom: 10px; }
.comp-profile-search {
  flex: 1;
  background: #0d1117;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 7px 9px;
}
.comp-profile-results { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow: auto; }
.comp-profile-result {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #0d1117;
}
.comp-profile-result-thumb {
  width: 54px;
  height: 54px;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.comp-profile-result-thumb img { max-width: 100%; max-height: 100%; }
.comp-profile-result-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.comp-profile-result-main strong { font-size: 0.82rem; }
.comp-profile-linked { margin-top: 10px; font-size: 0.78rem; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.comp-profile-linked a { color: var(--accent, #58a6ff); }
.comp-profile-import-step { margin-left: 2px; }
.comp-profile-status.ok { color: #3fb950; }
.comp-profile-status.error { color: #f85149; }
@media (max-width: 640px) {
  .comp-profile-body { grid-template-columns: 1fr; }
}

/* Explorer profile button + sourced badge */
.browser-action-profile {
  color: var(--accent, #58a6ff);
  min-width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(88, 166, 255, 0.45);
  border-radius: 999px;
  background: rgba(88, 166, 255, 0.1);
  font-size: 0.78rem;
  font-weight: 800;
}
.browser-item-badge--sourced {
  background: rgba(63, 185, 80, 0.18);
  border-color: rgba(63, 185, 80, 0.5);
  color: #3fb950;
}

/* Workspace explorer component rows: badge + profile button + drag affordance */
.proj-hierarchy-item--component { display: flex; align-items: center; gap: 4px; min-width: 0; }
.proj-hierarchy-item--component .proj-hierarchy-item-btn { flex: 1 1 auto; min-width: 0; cursor: grab; }
.proj-hierarchy-item--component .proj-hierarchy-item-btn:active { cursor: grabbing; }
.proj-hierarchy-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 9px;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  vertical-align: middle;
  color: var(--accent, #58a6ff);
  background: rgba(88, 166, 255, 0.14);
  border: 1px solid rgba(88, 166, 255, 0.4);
}
.proj-hierarchy-badge--sourced {
  color: #3fb950;
  background: rgba(63, 185, 80, 0.16);
  border-color: rgba(63, 185, 80, 0.5);
}
.proj-hierarchy-profile-btn {
  flex: 0 0 auto;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--accent, #58a6ff);
  font-size: 0.85rem;
  line-height: 1;
  padding: 3px 6px;
  cursor: pointer;
  opacity: 1;
}
.proj-hierarchy-item--component:hover .proj-hierarchy-profile-btn { opacity: 1; }
.proj-hierarchy-profile-btn:hover {
  border-color: var(--accent, #58a6ff);
  background: rgba(88, 166, 255, 0.12);
}

/* Driver chip visual on the wiring canvas */
.wiring-vis-driver {
  position: absolute;
  inset: 6px;
  border-radius: 5px;
  background: linear-gradient(160deg, #2b3138, #14171b);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 2px 4px rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wiring-vis-driver-chip {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #ffd479;
}

.wiring-vis-driver--stepdir {
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
}

.wiring-driver-header-grid {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: rgba(1, 4, 9, 0.2);
}

.wiring-driver-grid-box {
  position: absolute;
  left: 10.5%;
  top: 21%;
  width: 47%;
  height: 54%;
  border: 1px solid rgba(88, 166, 255, 0.42);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(88, 166, 255, 0.08), rgba(1, 4, 9, 0.02));
}

.wiring-driver-grid-line {
  position: absolute;
  background: rgba(88, 166, 255, 0.22);
  pointer-events: none;
}

.wiring-driver-grid-line--v1,
.wiring-driver-grid-line--v2 {
  top: 21%;
  width: 1px;
  height: 54%;
}
.wiring-driver-grid-line--v1 { left: 26%; }
.wiring-driver-grid-line--v2 { left: 42%; }
.wiring-driver-grid-line--h1,
.wiring-driver-grid-line--h2 {
  left: 10.5%;
  width: 47%;
  height: 1px;
}
.wiring-driver-grid-line--h1 { top: 39%; }
.wiring-driver-grid-line--h2 { top: 57%; }

.wiring-driver-col-label,
.wiring-driver-row-label,
.wiring-driver-ms-label,
.wiring-driver-motor-label {
  position: absolute;
  z-index: 1;
  color: #c9d1d9;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}

.wiring-driver-col-label {
  top: 20%;
  transform: translateX(-50%);
  color: #79c0ff;
}

.wiring-driver-row-label {
  left: 3%;
  width: 11%;
  transform: translateY(-50%);
  text-align: right;
}

.wiring-driver-ms-label {
  left: 9%;
  bottom: 3%;
  color: #79c0ff;
}

.wiring-driver-motor-label {
  right: 4%;
  top: 9%;
  color: #ffd479;
  font-size: 8px;
}

.wiring-driver-chip--stepdir {
  position: absolute;
  left: 61%;
  top: 44%;
  transform: translateY(-50%);
}

/* "Add driver" fix button in the wiring check panel */
.wiring-check-fix {
  margin-top: 6px;
  font-size: 0.72rem;
  padding: 4px 9px;
}

/* Driver picker popup */
.driver-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 4100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(1, 4, 9, 0.7);
  backdrop-filter: blur(3px);
}
.driver-picker-overlay.hidden { display: none; }
.driver-picker-modal {
  width: min(620px, 94vw);
  max-height: 90vh;
  overflow: auto;
  background: var(--panel, #161b22);
  border: 1px solid var(--border, #30363d);
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  padding: 0 0 14px;
}
.driver-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.driver-picker-close { background: none; border: none; color: var(--muted); font-size: 1rem; cursor: pointer; }
.driver-picker-intro { padding: 10px 16px 0; }
.driver-picker-recommended, .driver-picker-section { padding: 10px 16px 0; }
.driver-picker-recommended h4, .driver-picker-section h4 { margin: 6px 0; font-size: 0.82rem; }
.driver-picker-builtins { display: flex; flex-direction: column; gap: 8px; }
.driver-picker-builtin {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #0d1117;
}
.driver-picker-builtin--primary { border-color: var(--accent, #58a6ff); box-shadow: 0 0 0 1px rgba(88,166,255,0.3); }
.driver-picker-builtin-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.driver-picker-builtin-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.driver-picker-builtin-actions .btn { white-space: nowrap; }
.driver-picker-visual {
  position: relative;
  width: 82px;
  height: 58px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.18);
  background:
    radial-gradient(circle at 18px 16px, rgba(255,255,255,0.18) 0 3px, transparent 4px),
    linear-gradient(145deg, #147d46, #0f5132);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 6px 16px rgba(0,0,0,0.28);
  overflow: hidden;
}
.driver-picker-visual--a4988 {
  background:
    radial-gradient(circle at 14px 14px, rgba(255,255,255,0.18) 0 3px, transparent 4px),
    linear-gradient(145deg, #9f1239, #57111f);
}
.driver-picker-visual--l298n {
  background:
    radial-gradient(circle at 14px 14px, rgba(255,255,255,0.2) 0 3px, transparent 4px),
    linear-gradient(145deg, #2563eb, #1e3a8a);
}
.driver-chip {
  position: absolute;
  left: 26px;
  top: 17px;
  width: 30px;
  height: 20px;
  border-radius: 4px;
  background: #111827;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}
.driver-terminal {
  position: absolute;
  top: 8px;
  width: 10px;
  height: 42px;
  border-radius: 2px;
  background: #d97706;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
}
.driver-terminal--left { left: 8px; }
.driver-terminal--right { right: 8px; }
.driver-pins {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 7px;
  height: 5px;
  background: repeating-linear-gradient(90deg, #cbd5e1 0 3px, transparent 3px 7px);
  opacity: 0.95;
}
.driver-picker-specs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.driver-picker-specs span {
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(139,148,158,0.24);
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  font-size: 0.68rem;
}
.driver-picker-more { margin-top: 7px; padding-top: 7px; border-top: 1px solid rgba(139,148,158,0.18); }
.driver-picker-more.hidden { display: none; }
.driver-picker-more dl { margin: 0; display: grid; gap: 5px; }
.driver-picker-more div { display: grid; grid-template-columns: 50px 1fr; gap: 8px; }
.driver-picker-more dt { color: var(--muted); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; }
.driver-picker-more dd { margin: 0; color: var(--text); font-size: 0.72rem; line-height: 1.35; }
.driver-picker-search-row { display: flex; gap: 8px; margin-bottom: 8px; }
.driver-picker-search {
  flex: 1;
  background: #0d1117;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 7px 9px;
}
.driver-picker-results { display: flex; flex-direction: column; gap: 8px; }
.driver-picker-result {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #0d1117;
}
.driver-picker-thumb {
  width: 48px; height: 48px; border-radius: 6px; background: #fff;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.driver-picker-thumb img { max-width: 100%; max-height: 100%; }
.driver-picker-result-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.driver-picker-result-actions { display: flex; flex-direction: column; gap: 5px; }
.driver-picker-result-actions .btn { font-size: 0.72rem; padding: 4px 8px; text-align: center; text-decoration: none; }
.driver-picker-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px 0;
}
.driver-picker-status.ok { color: #3fb950; }
.driver-picker-status.error { color: #f85149; }

@media (max-width: 680px) {
  .driver-picker-builtin {
    grid-template-columns: 70px minmax(0, 1fr);
  }
  .driver-picker-visual {
    width: 66px;
    height: 50px;
  }
  .driver-picker-builtin-actions {
    grid-column: 1 / -1;
    flex-direction: row;
  }
  .driver-picker-result {
    grid-template-columns: 48px 1fr;
  }
  .driver-picker-result-actions {
    grid-column: 1 / -1;
    flex-direction: row;
  }
}

/* Wiring part realistic photo + 3D button */
.wiring-part--photo { overflow: hidden; }
.wiring-part-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.9;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.92);
  border-radius: inherit;
}
.wiring-part--photo .wiring-part-label {
  position: relative;
  z-index: 2;
  background: rgba(13, 17, 23, 0.78);
  padding: 1px 5px;
  border-radius: 4px;
}
.wiring-part-3d {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 3;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 5px;
  border: 1px solid var(--accent, #58a6ff);
  background: rgba(13, 17, 23, 0.85);
  color: var(--accent, #58a6ff);
  cursor: pointer;
}
.wiring-part-3d:hover { background: var(--accent, #58a6ff); color: #0d1117; }

/* Wiring 3D preview overlay */
.wiring-3d-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(1, 4, 9, 0.7);
}
.wiring-3d-overlay.hidden { display: none; }
.wiring-3d-modal {
  width: min(560px, 90%);
  background: var(--panel, #161b22);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}
.wiring-3d-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.wiring-3d-close { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1rem; }
.wiring-3d-stage { width: 100%; height: 340px; background: #0d1117; }
.wiring-3d-foot { padding: 8px 14px; border-top: 1px solid var(--border); }