@import '../../mostanything-ui/src/tokens/index.css';
@import '../../mostanything-ui/src/components/system.css';

#outer-app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

.studio-content { display: none; flex: 1; min-height: 0; overflow-y: auto; }
.studio-content.on { display: flex; }
#studio-bookmarks.on { display: block; }

#hx-sidebar {
  width: var(--sidebar-width); flex-shrink: 0;
  border-right: 1px solid var(--color-border);
  display: flex; flex-direction: column;
  height: 100%; overflow: hidden;
  background: var(--color-surface);
}
#hx-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; }

#hx-canvas-area {
  flex: 1; display: flex; align-items: center; justify-content: center;
  background: var(--color-canvas-bg); position: relative;
}
#hx-svg {
  display: block; border-radius: 10px;
  box-shadow: 0 2px 16px rgba(0,0,0,.1);
  cursor: grab;
}
#hx-svg:active { cursor: grabbing; }

#hx-bottombar {
  height: var(--bottombar-height);
  border-top: 1px solid var(--color-border);
  display: flex; align-items: center; gap: var(--space-2);
  padding: 0 var(--space-3); background: var(--color-bg); flex-shrink: 0;
}

.save-row {
  border-top: 1px solid var(--color-border);
  padding: 6px var(--space-3); background: var(--color-bg);
  display: flex; gap: 6px; flex-shrink: 0;
}
.save-row input {
  flex: 1; font-size: var(--text-xs); padding: 4px var(--space-2);
  border: 1px solid #ddd; border-radius: 5px; outline: none; min-width: 0;
}
.save-row button {
  font-size: var(--text-xs); padding: 4px 10px;
  border: 1px solid #ddd; border-radius: 5px;
  background: var(--color-bg); cursor: pointer; white-space: nowrap; flex-shrink: 0;
}

#hx-layer-list { display: flex; flex-direction: column; gap: 4px; }