#page-studio.canvas-studio-page {
  --canvas-bg: var(--th-bg);
  --canvas-surface: var(--th-bg-2);
  --canvas-surface-strong: var(--th-card-hover);
  --canvas-node: var(--th-card);
  --canvas-line: var(--th-border);
  --canvas-line-strong: var(--th-border-top);
  --canvas-text: var(--th-text);
  --canvas-muted: var(--th-text-2);
  --canvas-accent: var(--th-accent);
  --canvas-success: var(--th-success);
  --canvas-warning: var(--th-warning);
  --canvas-danger: var(--th-danger);
  height: calc(100svh - var(--app-header-height));
  min-height: calc(100svh - var(--app-header-height));
  max-width: none;
  padding: 0 !important;
  overflow: hidden;
  background: var(--canvas-bg) !important;
  color: var(--canvas-text);
}

.canvas-studio-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  background: var(--canvas-bg);
}

.canvas-studio-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
  min-height: 56px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--canvas-line);
  background: var(--canvas-surface);
}

.canvas-topbar-brand,
.canvas-topbar-project,
.canvas-topbar-actions,
.canvas-topbar-history,
.canvas-topbar-status {
  display: flex;
  align-items: center;
}

.canvas-topbar-brand { gap: 8px; flex: 0 0 auto; color: var(--canvas-muted); font: 500 11px/1 'DM Mono', monospace; letter-spacing: 0; text-transform: uppercase; }
.canvas-topbar-brand svg { width: 16px; height: 16px; color: var(--canvas-accent); stroke-width: 1.7; }
.canvas-topbar-project { gap: 7px; min-width: 0; flex: 1 1 160px; }
.canvas-topbar-project [data-canvas-action="rename-project"] { min-width: 0; overflow: hidden; }
.canvas-topbar-project strong { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--canvas-text); font-size: 13px; font-weight: 600; }
.canvas-topbar-project span { color: var(--canvas-muted); font: 400 11px/1 'DM Mono', monospace; white-space: nowrap; }
.canvas-topbar-history { gap: 2px; margin-left: 12px; }
.canvas-topbar-status { gap: 6px; min-width: 0; max-width: 220px; margin-left: auto; color: var(--canvas-muted); font: 400 11px/1.4 'DM Mono', monospace; }
.canvas-topbar-status span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.canvas-topbar-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--canvas-muted); }
.canvas-topbar-status.is-saved i { background: var(--canvas-success); }
.canvas-topbar-actions { gap: 4px; margin-left: 2px; }

.canvas-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--canvas-muted);
  font-size: 11px;
  white-space: nowrap;
}
.canvas-icon-button:hover:not(:disabled), .canvas-icon-button.is-active { border-color: var(--canvas-line); background: color-mix(in srgb, var(--canvas-text) 7%, transparent); color: var(--canvas-text); }
.canvas-icon-button:disabled { cursor: not-allowed; opacity: .38; }
.canvas-icon-button svg { width: 14px; height: 14px; stroke-width: 1.7; }
.canvas-icon-button[aria-pressed="true"] { color: var(--canvas-accent); background: color-mix(in srgb, var(--canvas-accent) 12%, transparent); }
.canvas-icon-button:focus-visible, .canvas-tool-button:focus-visible, .canvas-empty-actions button:focus-visible { outline: 2px solid var(--canvas-accent); outline-offset: 2px; }

.canvas-studio-body { display: grid; grid-template-columns: 52px minmax(214px, 260px) minmax(0, 1fr) 320px; min-width: 0; min-height: 0; height: 100%; }
.canvas-tool-rail { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0; border-right: 1px solid var(--canvas-line); background: var(--canvas-surface-strong); }
.canvas-tool-rail-spacer { flex: 1 1 auto; }
.canvas-tool-button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 42px; height: 45px; border: 0; border-radius: 6px; background: transparent; color: var(--canvas-muted); font-size: 11px; }
.canvas-tool-button:hover { background: color-mix(in srgb, var(--canvas-text) 7%, transparent); color: var(--canvas-text); }
.canvas-tool-button.is-active { background: color-mix(in srgb, var(--canvas-accent) 14%, transparent); color: var(--canvas-accent); }
.canvas-tool-button.is-active::before { content: ''; position: absolute; top: 8px; left: -5px; width: 2px; height: 28px; border-radius: 2px; background: var(--canvas-accent); }
.canvas-tool-button:disabled { cursor: not-allowed; opacity: .38; }
.canvas-tool-button svg { width: 16px; height: 16px; stroke-width: 1.7; }
.canvas-tool-rule { width: 26px; height: 1px; margin: 3px 0; background: var(--canvas-line); }

.canvas-side-panel { display: grid; grid-template-rows: 48px minmax(0, 1fr); min-width: 0; min-height: 0; overflow: hidden; border-right: 1px solid var(--canvas-line); background: var(--canvas-surface); }
.canvas-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px; border-bottom: 1px solid var(--canvas-line); }
.canvas-side-head strong { color: var(--canvas-text); font-size: 12px; font-weight: 600; }
.canvas-side-head span { color: var(--canvas-muted); font: 400 11px/1 'DM Mono', monospace; }
.canvas-side-content { min-height: 0; overflow-y: auto; padding: 10px 9px 16px; }
.canvas-side-view { display: none; }
.canvas-side-view.is-active { display: block; }
.canvas-side-section { margin-bottom: 18px; }
.canvas-side-section-title { display: flex; align-items: center; gap: 6px; margin: 0 3px 7px; color: var(--canvas-muted); font: 500 11px/1 'DM Mono', monospace; text-transform: uppercase; }
.canvas-side-section-title span + span { margin-left: auto; opacity: .65; }
.canvas-side-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.canvas-create-button { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; min-height: 72px; padding: 9px; border: 1px solid var(--canvas-line); border-radius: 6px; background: color-mix(in srgb, var(--canvas-text) 3%, transparent); color: var(--canvas-muted); text-align: left; }
.canvas-create-button:hover { border-color: color-mix(in srgb, var(--canvas-accent) 46%, transparent); background: color-mix(in srgb, var(--canvas-accent) 9%, transparent); color: var(--canvas-text); }
.canvas-create-button:disabled { cursor: not-allowed; opacity: .35; }
.canvas-create-button svg { width: 16px; height: 16px; color: var(--canvas-accent); stroke-width: 1.7; }
.canvas-create-button strong { color: inherit; font-size: 11px; font-weight: 600; }
.canvas-create-button small { color: var(--canvas-muted); font: 400 11px/1.35 'DM Mono', monospace; }
.canvas-node-list, .canvas-asset-list, .canvas-run-list { display: grid; gap: 4px; }
.canvas-list-empty { padding: 26px 8px; border: 1px dashed var(--canvas-line); color: var(--canvas-muted); font: 400 11px/1.6 'DM Mono', monospace; text-align: center; }
.canvas-node-list-item, .canvas-asset-list-item, .canvas-run-item { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 42px; padding: 6px 7px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--canvas-muted); text-align: left; }
.canvas-node-list-item:hover, .canvas-asset-list-item:hover, .canvas-run-item:hover { background: color-mix(in srgb, var(--canvas-text) 5%, transparent); color: var(--canvas-text); }
.canvas-node-list-item.is-selected { border-color: color-mix(in srgb, var(--canvas-accent) 36%, transparent); background: color-mix(in srgb, var(--canvas-accent) 12%, transparent); color: var(--canvas-text); }
.canvas-node-list-item svg, .canvas-asset-list-item svg, .canvas-run-item svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--canvas-accent); stroke-width: 1.7; }
.canvas-list-copy { display: flex; flex-direction: column; min-width: 0; gap: 3px; }
.canvas-list-copy strong, .canvas-list-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.canvas-list-copy strong { color: inherit; font-size: 11px; font-weight: 600; }
.canvas-list-copy span { color: var(--canvas-muted); font: 400 11px/1.2 'DM Mono', monospace; }
.canvas-status-dot { width: 6px; height: 6px; margin-left: auto; border-radius: 50%; background: var(--canvas-muted); }
.canvas-status-dot.success { background: var(--canvas-success); }.canvas-status-dot.running { background: var(--canvas-warning); }.canvas-status-dot.error { background: var(--canvas-danger); }

.canvas-main { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--canvas-bg); }
.canvas-viewport { position: absolute; inset: 0; overflow: hidden; cursor: default; touch-action: none; background-color: var(--canvas-bg); background-image: linear-gradient(color-mix(in srgb, var(--canvas-text) 6%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--canvas-text) 6%, transparent) 1px, transparent 1px); background-size: 32px 32px; }
.canvas-viewport.is-panning { cursor: grabbing; }
.canvas-world { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
.canvas-edges { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.canvas-edge-path { fill: none; stroke: rgba(205,219,229,.52); stroke-width: 2; pointer-events: stroke; cursor: pointer; }
.canvas-edge-path:hover, .canvas-edge-path.is-selected { stroke: var(--canvas-accent); stroke-width: 3; }
.canvas-selection-box { position: absolute; pointer-events: none; border: 1px dashed var(--canvas-accent); background: color-mix(in srgb, var(--canvas-accent) 8%, transparent); }
.canvas-node { position: absolute; display: grid; grid-template-rows: 35px minmax(0,1fr) 28px; overflow: visible; border: 1px solid var(--canvas-line-strong); border-radius: 8px; background: var(--canvas-node); box-shadow: 0 18px 48px rgba(0,0,0,.28); color: var(--canvas-text); user-select: none; }
.canvas-node.is-selected { border-color: var(--canvas-accent); box-shadow: 0 0 0 2px rgba(53,184,212,.17), 0 20px 56px rgba(0,0,0,.32); }
.canvas-node.is-running { border-color: var(--canvas-warning); }.canvas-node.is-error { border-color: var(--canvas-danger); }
.canvas-node-head { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 0 10px; border-bottom: 1px solid var(--canvas-line); cursor: grab; }
.canvas-node-head:active { cursor: grabbing; }
.canvas-node-head svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--canvas-accent); stroke-width: 1.7; }
.canvas-node-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 600; }
.canvas-node-type { margin-left: auto; color: var(--canvas-muted); font: 400 11px/1 'DM Mono', monospace; }
.canvas-node-body { min-height: 0; overflow: hidden; padding: 9px 10px; color: color-mix(in srgb, var(--canvas-text) 78%, transparent); font-size: 11px; line-height: 1.55; }
.canvas-node-body textarea { width: 100%; height: 100%; min-height: 70px; padding: 0; border: 0; outline: 0; resize: none; background: transparent; color: inherit; font: inherit; line-height: inherit; }
.canvas-node-body textarea::placeholder { color: var(--canvas-muted); }
.canvas-node-footer { display: flex; align-items: center; gap: 6px; padding: 0 10px; border-top: 1px solid var(--canvas-line); color: var(--canvas-muted); font: 400 11px/1 'DM Mono', monospace; }
.canvas-node-footer span:last-child { margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.canvas-node-media { display: flex; align-items: center; justify-content: center; height: 100%; overflow: hidden; background: var(--canvas-bg); }
.canvas-node-media img, .canvas-node-media video { width: 100%; height: 100%; object-fit: cover; }
.canvas-node-media audio { width: calc(100% - 12px); }
.canvas-node-asset-empty { color: var(--canvas-muted); font: 400 11px/1.5 'DM Mono', monospace; text-align: center; }
.canvas-handle { position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 32px; height: 32px; margin-top: -16px; border: 0; border-radius: 50%; background: transparent; cursor: crosshair; }
.canvas-handle::after { content: ''; width: 11px; height: 11px; border: 2px solid var(--canvas-bg); border-radius: 50%; background: var(--canvas-accent); }
.canvas-handle-input { left: -16px; }.canvas-handle-output { right: -16px; }
.canvas-handle.is-armed::after { box-shadow: 0 0 0 4px rgba(53,184,212,.24); }
.canvas-floating-head { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 10; display: flex; align-items: center; gap: 8px; pointer-events: none; }
.canvas-floating-head > * { pointer-events: auto; }
.canvas-floating-head .canvas-breadcrumb { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 7px 9px; border: 1px solid var(--canvas-line); border-radius: 5px; background: color-mix(in srgb, var(--canvas-surface) 92%, transparent); color: var(--canvas-muted); font: 400 11px/1 'DM Mono', monospace; backdrop-filter: blur(12px); }
.canvas-floating-head .canvas-breadcrumb strong { color: var(--canvas-text); font-weight: 600; }
.canvas-floating-head .canvas-breadcrumb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.canvas-floating-head .canvas-hint { margin-left: auto; padding: 7px 9px; color: var(--canvas-muted); font: 400 11px/1 'DM Mono', monospace; }
.canvas-empty-state { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.canvas-empty-state > div { display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(400px, 88%); padding: 20px 0; text-align: center; }
.canvas-empty-state.hidden { display: none; }
.canvas-empty-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; pointer-events: auto; }
.canvas-empty-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 0 12px; border: 1px solid var(--canvas-line-strong); border-radius: 6px; background: var(--canvas-surface); color: var(--canvas-text); font-size: 12px; }
.canvas-empty-actions button:first-child { border-color: var(--canvas-accent); background: var(--canvas-accent); color: var(--canvas-bg); }
.canvas-empty-actions button svg { width: 16px; height: 16px; color: inherit; }
.canvas-empty-state svg { width: 28px; height: 28px; color: var(--canvas-accent); stroke-width: 1.35; }
.canvas-empty-state strong { font-size: 13px; font-weight: 600; }.canvas-empty-state span { color: var(--canvas-muted); font: 400 11px/1.65 'DM Mono', monospace; }
.canvas-bottom-dock { position: absolute; left: 50%; bottom: 16px; z-index: 12; display: flex; align-items: center; gap: 3px; max-width: calc(100% - 24px); padding: 5px; transform: translateX(-50%); border: 1px solid var(--canvas-line-strong); border-radius: 7px; background: color-mix(in srgb, var(--canvas-surface) 94%, transparent); box-shadow: 0 18px 40px color-mix(in srgb, var(--canvas-bg) 72%, transparent); backdrop-filter: blur(14px); }
.canvas-bottom-dock .canvas-icon-button { height: 32px; }
.canvas-bottom-dock .canvas-dock-label { padding: 0 5px; color: var(--canvas-muted); font: 400 11px/1 'DM Mono', monospace; white-space: nowrap; }
.canvas-minimap { position: absolute; left: 14px; bottom: 16px; z-index: 12; width: 170px; height: 104px; overflow: hidden; border: 1px solid var(--canvas-line-strong); border-radius: 6px; background: color-mix(in srgb, var(--canvas-surface) 90%, transparent); }
.canvas-minimap-node { position: absolute; border: 1px solid color-mix(in srgb, var(--canvas-accent) 60%, transparent); background: color-mix(in srgb, var(--canvas-accent) 16%, transparent); }
.canvas-zoom-readout { display: inline-flex; align-items: center; gap: 5px; min-width: 51px; justify-content: center; color: var(--canvas-muted); font: 400 11px/1 'DM Mono', monospace; }
.canvas-create-menu { position: absolute; z-index: 30; display: grid; gap: 4px; width: 220px; padding: 7px; border: 1px solid var(--canvas-line-strong); border-radius: 7px; background: color-mix(in srgb, var(--canvas-surface-strong) 98%, transparent); box-shadow: 0 18px 48px color-mix(in srgb, var(--canvas-bg) 82%, transparent); }
.canvas-create-menu button { display: flex; align-items: center; gap: 8px; min-height: 35px; padding: 0 8px; border: 0; border-radius: 4px; background: transparent; color: var(--canvas-muted); text-align: left; }
.canvas-create-menu button:hover { background: color-mix(in srgb, var(--canvas-accent) 11%, transparent); color: var(--canvas-text); }.canvas-create-menu button svg { width: 14px; height: 14px; color: var(--canvas-accent); }.canvas-create-menu button strong { font-size: 11px; font-weight: 600; }.canvas-create-menu button small { margin-left: auto; color: var(--canvas-muted); font: 400 11px/1 'DM Mono', monospace; }

.canvas-inspector { display: grid; grid-template-rows: 48px minmax(0, 1fr); min-width: 0; min-height: 0; overflow: hidden; border-left: 1px solid var(--canvas-line); background: var(--canvas-surface); }
.canvas-side-panel.is-collapsed, .canvas-inspector.is-collapsed { display: none; }
.canvas-inspector-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px; border-bottom: 1px solid var(--canvas-line); }
.canvas-inspector-head > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }.canvas-inspector-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--canvas-text); font-size: 12px; font-weight: 600; }.canvas-inspector-head span { color: var(--canvas-muted); font: 400 11px/1 'DM Mono', monospace; }
.canvas-inspector-body { min-height: 0; overflow-y: auto; padding: 12px; }
.canvas-inspector-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 44px 12px; color: var(--canvas-muted); text-align: center; }.canvas-inspector-empty svg { width: 24px; height: 24px; color: var(--canvas-accent); }.canvas-inspector-empty strong { color: var(--canvas-text); font-size: 11px; font-weight: 600; }.canvas-inspector-empty span { font: 400 11px/1.6 'DM Mono', monospace; }
.canvas-inspector-section { padding: 12px 0; border-top: 1px solid var(--canvas-line); }.canvas-inspector-section:first-child { padding-top: 0; border-top: 0; }.canvas-inspector-section h3 { margin: 0 0 9px; color: var(--canvas-muted); font: 500 11px/1 'DM Mono', monospace; text-transform: uppercase; }
.canvas-inspector-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; color: var(--canvas-muted); font-size: 11px; }.canvas-inspector-field:last-child { margin-bottom: 0; }.canvas-inspector-field input, .canvas-inspector-field textarea, .canvas-inspector-field select { width: 100%; min-height: 31px; padding: 7px 8px; border: 1px solid var(--canvas-line); border-radius: 5px; outline: 0; background: var(--canvas-bg); color: var(--canvas-text); font: 400 11px/1.45 'DM Mono', monospace; }.canvas-inspector-field textarea { min-height: 100px; resize: vertical; }.canvas-inspector-field input:focus, .canvas-inspector-field textarea:focus, .canvas-inspector-field select:focus { border-color: color-mix(in srgb, var(--canvas-accent) 70%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--canvas-accent) 10%, transparent); }
.canvas-inspector-field small { color: var(--canvas-muted); font: 400 11px/1.5 'DM Mono', monospace; }.canvas-inspector-status { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; color: var(--canvas-muted); font: 400 11px/1 'DM Mono', monospace; }.canvas-inspector-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }.canvas-inspector-status.success { color: var(--canvas-success); }.canvas-inspector-status.running { color: var(--canvas-warning); }.canvas-inspector-status.error { color: var(--canvas-danger); }
.canvas-inspector-action { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 32px; padding: 0 10px; border: 1px solid var(--canvas-accent); border-radius: 5px; background: var(--canvas-accent); color: #041014; font-size: 11px; font-weight: 700; }.canvas-inspector-action:hover:not(:disabled) { filter: brightness(1.08); }.canvas-inspector-action:disabled { cursor: not-allowed; opacity: .42; }.canvas-inspector-action svg { width: 14px; height: 14px; }
.canvas-inspector-action.canvas-inspector-danger { border-color: color-mix(in srgb, var(--canvas-danger) 38%, transparent); background: color-mix(in srgb, var(--canvas-danger) 6%, transparent); color: var(--canvas-danger); }.canvas-inspector-error { padding: 8px; border: 1px solid color-mix(in srgb, var(--canvas-danger) 28%, transparent); border-radius: 5px; background: color-mix(in srgb, var(--canvas-danger) 6%, transparent); color: var(--canvas-danger); font: 400 11px/1.55 'DM Mono', monospace; overflow-wrap: anywhere; }
.canvas-inspector-muted { color: var(--canvas-muted); font: 400 11px/1.6 'DM Mono', monospace; }
.canvas-file-input { display: none; }
.canvas-unavailable-tools { margin-top: 16px; border-top: 1px solid var(--canvas-line); padding-top: 10px; }
.canvas-unavailable-tools summary { min-height: 32px; color: var(--canvas-muted); font-size: 11px; cursor: pointer; }
.canvas-unavailable-tools button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; color: var(--canvas-muted); font-size: 11px; }
.canvas-unavailable-tools button svg { width: 16px; height: 16px; }

/* The canvas is a full workspace, so its surfaces follow the application theme
   instead of keeping a second, fixed dark palette. */
html[data-theme="pine-green"] .canvas-studio-shell,
html[data-theme="pine-green"] .canvas-tool-rail,
html[data-theme="pine-green"] .canvas-side-panel,
html[data-theme="pine-green"] .canvas-viewport,
html[data-theme="pine-green"] .canvas-node,
html[data-theme="pine-green"] .canvas-floating-head,
html[data-theme="pine-green"] .canvas-create-menu,
html[data-theme="pine-green"] .canvas-inspector {
  color: var(--canvas-text);
}

html[data-theme="pine-green"] .canvas-studio-shell,
html[data-theme="pine-green"] .canvas-viewport {
  background-color: var(--canvas-bg);
}

html[data-theme="pine-green"] .canvas-tool-rail,
html[data-theme="pine-green"] .canvas-side-panel,
html[data-theme="pine-green"] .canvas-inspector {
  background-color: var(--canvas-surface);
}

html[data-theme="pine-green"] .canvas-node {
  background-color: var(--canvas-node);
  border-color: var(--canvas-line-strong);
}

html[data-theme="pine-green"] .canvas-floating-head .canvas-breadcrumb,
html[data-theme="pine-green"] .canvas-create-menu {
  background-color: var(--canvas-surface-strong);
  border-color: var(--canvas-line-strong);
}

@media (max-width: 1279px) {
  .canvas-studio-body { grid-template-columns: 52px minmax(0, 1fr); }
  .canvas-side-panel, .canvas-inspector { position: absolute; top: 0; bottom: 0; z-index: 20; width: min(280px, 78vw); box-shadow: 0 18px 42px rgba(0,0,0,.42); }
  .canvas-side-panel { left: 52px; }.canvas-inspector { right: 0; width: min(320px, 44vw); }
  .canvas-side-panel.is-collapsed, .canvas-inspector.is-collapsed { display: none; }
  .canvas-side-panel .canvas-side-head button, .canvas-inspector .canvas-inspector-head button { display: inline-flex; }
}

@media (min-width: 1280px) {
  .canvas-studio-body:has(> .canvas-inspector.is-collapsed) { grid-template-columns: 52px minmax(214px, 260px) minmax(0, 1fr); }
  .canvas-studio-body:has(> .canvas-side-panel.is-collapsed) { grid-template-columns: 52px minmax(0, 1fr) 320px; }
  .canvas-studio-body:has(> .canvas-side-panel.is-collapsed):has(> .canvas-inspector.is-collapsed) { grid-template-columns: 52px minmax(0, 1fr); }
}

@media (max-width: 767px) {
  #page-studio.canvas-studio-page { height: calc(100svh - var(--app-header-height)); min-height: calc(100svh - var(--app-header-height)); }
  .canvas-studio-topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px; padding: 4px 8px; }
  .canvas-topbar-brand, .canvas-topbar-project span, .canvas-topbar-status { display: none; }
  .canvas-topbar-project strong { max-width: 100%; }
  .canvas-topbar-history { margin-left: 0; }
  .canvas-topbar-actions { grid-column: 1 / -1; justify-content: flex-end; min-width: 0; gap: 4px; margin-left: 0; }
  .canvas-icon-button { min-width: 44px; height: 44px; flex-shrink: 0; }
  .canvas-topbar-actions .canvas-icon-button { width: 44px; padding: 0; }
  .canvas-topbar-actions .canvas-icon-button span { display: none; }
  .canvas-topbar-project [data-canvas-action="rename-project"] { flex-shrink: 1; padding: 0 4px; }
  .canvas-empty-actions button, .canvas-inspector-action, .canvas-inspector-field input, .canvas-inspector-field select, .canvas-create-menu button { min-height: 44px; }
  .canvas-studio-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0,1fr) 52px; }
  .canvas-tool-rail { grid-row: 2; flex-direction: row; justify-content: space-around; gap: 0; padding: 4px 7px; border-right: 0; border-top: 1px solid var(--canvas-line); }
  .canvas-tool-rail-spacer { display: none; }.canvas-tool-rule { width: 1px; height: 27px; margin: 0; }.canvas-tool-button { width: 52px; height: 44px; }.canvas-tool-button.is-active::before { top: -4px; left: 17px; width: 18px; height: 2px; }
  .canvas-side-panel { top: 0; left: 0; bottom: 52px; width: min(330px, 88vw); }.canvas-inspector { top: auto; right: 8px; bottom: 60px; width: calc(100% - 16px); height: min(62svh, 440px); border: 1px solid var(--canvas-line-strong); border-radius: 7px; }
  .canvas-side-panel.is-collapsed, .canvas-inspector.is-collapsed { display: none; }
  .canvas-floating-head { top: 8px; left: 8px; right: 8px; }.canvas-floating-head .canvas-hint { display: none; }.canvas-bottom-dock { left: auto; right: 8px; bottom: 8px; transform: none; }.canvas-bottom-dock .canvas-dock-label { display: none; }.canvas-minimap { display: none; }
  .canvas-bottom-dock { gap: 2px; }
  .canvas-bottom-dock .canvas-icon-button { height: 44px; padding: 0; }
  .canvas-bottom-dock [data-canvas-create="note"], .canvas-bottom-dock [data-canvas-action="import-asset"] { display: none; }
  .canvas-zoom-readout { min-width: 40px; }
  .canvas-handle { width: 44px; height: 44px; margin-top: -22px; }
  .canvas-handle-input { left: -22px; }.canvas-handle-output { right: -22px; }
  .canvas-node { grid-template-rows: 34px minmax(0,1fr) 26px; }.canvas-node-body { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .canvas-icon-button, .canvas-create-button, .canvas-node-list-item, .canvas-asset-list-item { transition: none !important; }
}