* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}

body {
  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  background: #181818;
  color: #e7e7e7;
  overflow: hidden;
}

button,
input,
select {
  font: inherit;
}

button {
  color: inherit;
}

.app {
  height: 100vh;
  display: flex;
  flex-direction: column;
}


/* TRADITIONAL APPLICATION MENU BAR */

.menubar {
  position: relative;
  z-index: 100;
  height: 30px;
  flex: 0 0 30px;

  display: flex;
  align-items: stretch;

  padding: 0 8px;

  background: #202020;
  border-bottom: 1px solid #3a3a3a;

  user-select: none;
}

.menu {
  position: relative;
  display: flex;
  align-items: stretch;
}

.menu-trigger {
  height: 29px;

  padding: 0 10px;

  border: 0;
  border-radius: 0;

  background: transparent;
  color: #dedede;

  font-size: 13px;

  cursor: default;
}

.menu-trigger:hover,
.menu.open > .menu-trigger {
  background: #383838;
  color: #ffffff;
}

.menu-dropdown {
  position: absolute;
  top: 29px;
  left: 0;

  display: none;

  min-width: 220px;

  padding: 5px;

  background: #282828;

  border: 1px solid #4a4a4a;
  border-radius: 6px;

  box-shadow:
    0 10px 28px
    rgba(0, 0, 0, 0.38);

  z-index: 1000;
}

.menu.open > .menu-dropdown {
  display: block;
}

.menu-dropdown button {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;

  padding: 7px 9px;

  border: 0;
  border-radius: 4px;

  background: transparent;
  color: #e5e5e5;

  font-size: 13px;
  text-align: left;

  white-space: nowrap;

  cursor: default;
}

.menu-dropdown button:hover {
  background: #505050;
}

.menu-dropdown button span {
  margin-left: auto;

  color: #9f9f9f;

  font-size: 12px;
}

.menu-separator {
  height: 1px;
  margin: 5px 4px;

  background: #464646;
}

@media (max-width: 700px) {
  .menubar {
    overflow-x: auto;
    overflow-y: hidden;
  }

  .menu-trigger {
    padding-inline: 8px;
  }
}


.topbar {
  position: relative;
  z-index: 20;
  height: 52px;
  background: #252525;
  border-bottom: 1px solid #3c3c3c;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  min-width: 180px;
}

.logo {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: #7c3aed;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
}

.context-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
}

.context-controls label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: #bcbcbc;
}

input[type="color"] {
  width: 34px;
  height: 30px;
  border: 1px solid #4a4a4a;
  border-radius: 6px;
  padding: 2px;
  background: transparent;
}

input[type="number"],
select {
  background: #303030;
  border: 1px solid #4a4a4a;
  color: #eee;
  border-radius: 6px;
  padding: 7px 8px;
}

.primary {
  background: #7c3aed;
  border: 0;
  color: white;
  border-radius: 7px;
  padding: 8px 14px;
  cursor: pointer;
}

.primary:hover {
  background: #6d28d9;
}

.full {
  width: 100%;
}

.workspace {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns:
    48px
    minmax(0, 1fr)
    280px;
}

.toolbar {
  background: #242424;
  border-right: 1px solid #3b3b3b;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 8px;
  gap: 4px;
}

.toolbar button {
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  border-radius: 7px;
  cursor: pointer;
}

.toolbar button:hover {
  background: #393939;
}

.toolbar .active {
  background: #7c3aed;
  color: white;
}

.toolbar-divider {
  width: 28px;
  height: 1px;
  background: #444;
  margin: 4px 0;
}

.canvas-area {
  position: relative;
  overflow: hidden;
  background: #343434;
}

.canvas-info {
  height: 28px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  font-size: 12px;
  color: #aaa;
  background: #292929;
  border-bottom: 1px solid #3c3c3c;
}

#stage {
  height: calc(100% - 28px);
  overscroll-behavior: contain;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  overflow: hidden;
}

#artboardWrap {
  width: min(85%, 900px);
  aspect-ratio: 3 / 2;
  transform-origin: center center;
  will-change: transform;
}

#canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: white;
  box-shadow:
    0 15px 40px
    rgba(0, 0, 0, 0.35);
  touch-action: none;
}

.zoom-controls {
  position: absolute;
  left: 50%;
  bottom: 15px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 3px;
  background: #262626;
  border: 1px solid #444;
  border-radius: 9px;
  padding: 4px;
}

.zoom-controls button {
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: #ddd;
  padding: 5px 10px;
  cursor: pointer;
}

.zoom-controls button:hover {
  background: #3a3a3a;
}

#zoomLabel {
  width: 55px;
  text-align: center;
  font-size: 12px;
}

 .right-sidebar {
  background: #242424;
  border-left: 1px solid #3b3b3b;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.panel-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid #3c3c3c;
  background: #202020;
}

.panel-tab {
  border: 0;
  border-right: 1px solid #353535;
  border-radius: 0;
  background: transparent;
  color: #999;
  padding: 11px 8px;
  font-size: 12px;
  cursor: pointer;
}

.panel-tab:last-child {
  border-right: 0;
}

.panel-tab:hover {
  background: #2d2d2d;
  color: #ddd;
}

.panel-tab.active {
  background: #292929;
  color: #fff;
  box-shadow: inset 0 -2px 0 #7c3aed;
}

.right-panel-view {
  display: none;
  min-height: 0;
  flex: 1;
  overflow-y: auto;
}

.right-panel-view.active {
  display: block;
}

.properties > h2,
.panel-view-header {
  margin: 0;
  padding: 15px;
  font-size: 14px;
  border-bottom: 1px solid #3c3c3c;
}

.properties > h2 {
  font-weight: 600;
}

.panel-view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.panel-view-header h2 {
  margin: 0;
  font-size: 14px;
}

.layers-panel-body {
  padding: 10px;
}

.panel-section {
  padding: 15px;
  border-bottom: 1px solid #3a3a3a;
}

.panel-section h3 {
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
  color: #999;
}

.panel-section label {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  color: #aaa;
}

.panel-section input,
.panel-section select {
  margin-top: 6px;
  width: 100%;
}

.size-row {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    38px
    minmax(0, 1fr);
  gap: 7px;
  align-items: end;
}

.swap-button {
  height: 34px;
  margin-bottom: 12px;
  background: #303030;
  border: 1px solid #4a4a4a;
  border-radius: 6px;
  cursor: pointer;
}

.appearance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.layers-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#objectCount {
  background: #383838;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 11px;
}

.layer {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  color: #ddd;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
}

.layer:hover {
  background: #343434;
}

.layer.selected {
  background: rgba(124, 58, 237, 0.22);
  border-color: #7c3aed;
}

.layer-icon {
  width: 20px;
  text-align: center;
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  z-index: 1000;
}

.hidden {
  display: none;
}

.modal-content {
  width: min(700px, 100%);
  background: #242424;
  border: 1px solid #444;
  border-radius: 12px;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #444;
}

.modal-header h2 {
  margin: 0;
  font-size: 15px;
}

.modal-header button {
  background: transparent;
  border: 0;
  font-size: 22px;
  cursor: pointer;
}

#svgOutput {
  width: 100%;
  min-height: 300px;
  resize: vertical;
  border: 0;
  outline: 0;
  padding: 16px;
  color: #ddd;
  background: #181818;
  font-family: monospace;
}

@media (max-width: 900px) {
  .workspace {
    grid-template-columns:
      48px
      minmax(0, 1fr);
  }

  .right-sidebar {
    display: none;
  }
}

@media (max-width: 650px) {
  .brand span,
  .context-controls label {
    display: none;
  }

  .brand {
    min-width: auto;
  }
}


/* VECTOR EDITING HANDLES */
#selectionOverlay {
  pointer-events: none;
}

#selectionOverlay [data-handle],
#selectionOverlay [data-anchor-index],
#selectionOverlay [data-control-index],
#selectionOverlay [data-corner-select],
#selectionOverlay [data-polygon-corner-select],
#selectionOverlay .vector-handle,
#selectionOverlay .anchor-handle,
#selectionOverlay .control-handle,
#selectionOverlay .rotation-handle,
#selectionOverlay .corner-round-vertex {
  pointer-events: all;
}

.vector-handle,
.anchor-handle,
.control-handle {
  vector-effect: non-scaling-stroke;
}

.vector-handle,
.anchor-handle {
  fill: #fff;
  stroke: #7c3aed;
  stroke-width: 1.5;
}

.anchor-handle {
  cursor: pointer;
}

.control-handle {
  fill: #7c3aed;
  stroke: #fff;
  stroke-width: 1;
  cursor: pointer;
}

.control-line {
  stroke: #7c3aed;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.handle-nw,
.handle-se { cursor: nwse-resize; }
.handle-ne,
.handle-sw { cursor: nesw-resize; }
.handle-n,
.handle-s { cursor: ns-resize; }
.handle-e,
.handle-w { cursor: ew-resize; }



/* MARQUEE SELECTION */
#canvas {
  user-select: none;
}

#selectionOverlay #marqueeSelection {
  shape-rendering: geometricPrecision;
}


/* PEN CLOSE TARGET */
.pen-close-target {
  fill: rgba(124, 58, 237, 0.12);
  stroke: #7c3aed;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
}

.pen-close-target:hover {
  fill: rgba(124, 58, 237, 0.24);
}


/* SHAPE BUILDER */
.tool[data-tool="shapeBuilder"] {
  font-size: 16px;
}

#shapeBuilderStroke {
  opacity: 0.95;
}


/* SHAPE BUILDER LIVE FEEDBACK */
#shapeBuilderStroke,
#shapeBuilderStrokeHalo {
  opacity: 1;
}

#shapeBuilderStroke {
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.75));
}

[data-shape-builder-highlight="true"] {
  pointer-events: none;
}


/* CANVAS BACKGROUND */
.canvas-background-controls {
  margin-top: 12px;
}

.transparent-toggle {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.transparent-toggle input {
  width: auto !important;
  margin: 0 !important;
}

#artboardWrap.transparent-canvas {
  background:
    linear-gradient(45deg, #d8d8d8 25%, transparent 25%),
    linear-gradient(-45deg, #d8d8d8 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #d8d8d8 75%),
    linear-gradient(-45deg, transparent 75%, #d8d8d8 75%);
  background-size: 20px 20px;
  background-position:
    0 0,
    0 10px,
    10px -10px,
    -10px 0;
  background-color: #f2f2f2;
}

#artboardWrap.transparent-canvas #canvas {
  background: transparent;
}


/* SAVE PROJECT DIALOG */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(12, 12, 12, 0.58);
  backdrop-filter: blur(2px);
}

.modal-backdrop[hidden] {
  display: none;
}

.save-project-dialog {
  width: min(392px, calc(100vw - 32px));
  overflow: hidden;
  border: 1px solid #4a4a4a;
  border-radius: 9px;
  background: #252525;
  box-shadow:
    0 22px 58px rgba(0, 0, 0, 0.52),
    0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

.save-project-titlebar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 12px 11px 14px;
  border-bottom: 1px solid #3b3b3b;
  background: #2b2b2b;
}

.save-project-title-copy {
  min-width: 0;
}

.save-project-titlebar h2 {
  margin: 0;
  color: #f1f1f1;
  font-size: 13px;
  font-weight: 650;
}

.save-project-titlebar p {
  margin: 3px 0 0;
  color: #8f8f8f;
  font-size: 10px;
  line-height: 1.35;
}

.save-project-close {
  display: grid;
  place-items: center;
  flex: 0 0 27px;
  width: 27px;
  height: 27px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #999;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.save-project-close:hover {
  background: #393939;
  color: #fff;
}

.save-project-body {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.save-project-field {
  display: grid;
  gap: 6px;
  color: #aaa;
  font-size: 10px;
  font-weight: 550;
}

.save-project-input-wrap {
  position: relative;
}

.save-project-field input {
  width: 100%;
  height: 36px;
  box-sizing: border-box;
  padding: 0 48px 0 10px;
  border: 1px solid #4b4b4b;
  border-radius: 6px;
  outline: none;
  background: #1f1f1f;
  color: #f3f3f3;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}

.save-project-field input:hover {
  border-color: #5a5a5a;
}

.save-project-field input:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 1px #8b5cf6;
}

.save-project-format {
  position: absolute;
  top: 50%;
  right: 9px;
  transform: translateY(-50%);
  padding: 2px 5px;
  border-radius: 4px;
  background: #303030;
  color: #848484;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .05em;
  pointer-events: none;
}

.save-project-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid #3d3d3d;
  border-radius: 6px;
  background: #222;
}

.save-project-note-icon {
  display: grid;
  place-items: center;
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  border-radius: 50%;
  background: #363636;
  color: #aaa;
  font: 700 10px/1 system-ui, sans-serif;
}

.save-project-note p {
  margin: 0;
  color: #8f8f8f;
  font-size: 10px;
  line-height: 1.45;
}

.save-project-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  padding: 10px 12px 12px;
  border-top: 1px solid #3b3b3b;
  background: #292929;
}

.save-project-actions button {
  min-height: 31px;
  padding: 0 13px;
  border: 1px solid #484848;
  border-radius: 5px;
  background: #303030;
  color: #e2e2e2;
  cursor: pointer;
  font-size: 11px;
}

.save-project-actions button:hover {
  background: #3a3a3a;
}

.save-project-actions button.primary {
  border-color: #6d28d9;
  background: #7c3aed;
  color: #fff;
}

.save-project-actions button.primary:hover {
  background: #8b5cf6;
}


/* EXPORT DIALOG */
.export-dialog {
  width: min(760px, 100%);
}

.export-body {
  padding: 16px;
}

.export-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.export-grid label {
  display: grid;
  gap: 7px;
  font-size: 13px;
  color: #d9d9d9;
}

.export-grid input,
.export-grid select {
  width: 100%;
  box-sizing: border-box;
}

.export-checkbox {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding-top: 24px;
}

.export-checkbox input {
  width: auto !important;
  margin: 0 !important;
}

.export-message {
  min-height: 18px;
  margin-top: 12px;
  color: #a9a9a9;
  font-size: 12px;
}

.svg-preview-wrap {
  margin-top: 12px;
}

.svg-preview-wrap label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  color: #d9d9d9;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid #444;
}

@media (max-width: 640px) {
  .export-grid {
    grid-template-columns: 1fr;
  }

  .export-checkbox {
    padding-top: 0;
  }
}


.export-checkbox input:disabled + span,
.export-checkbox:has(input:disabled) {
  opacity: 0.65;
}


/* HISTORY MENU */
.menu-dropdown button:disabled {
  opacity: 0.42;
  cursor: default;
}


/* LAYER VISIBILITY LOCK REORDER */
.layer {
  display: grid;
  grid-template-columns: 26px 22px 24px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 5px;
  user-select: none;
}

.layer-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.layer-control {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #cfcfcf;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 13px;
}

.layer-control:hover {
  background: #454545;
}

.layer-drag-handle {
  color: #888;
  cursor: grab;
  text-align: center;
  letter-spacing: -3px;
}

.layer.dragging {
  opacity: 0.45;
}

.layer.hidden-layer .layer-name,
.layer.hidden-layer .layer-icon {
  opacity: 0.42;
}

.layer.locked-layer .layer-name {
  color: #999;
}

.layer.locked-layer {
  cursor: default;
}


/* SNAPPING */
.snap-menu-item {
  display: grid !important;
  grid-template-columns: 18px 1fr;
  align-items: center;
}

.snap-menu-item .snap-check {
  display: inline-block;
  width: 16px;
  text-align: center;
}

.snap-menu-item.snap-off .snap-check {
  visibility: hidden;
}

.snap-guide {
  stroke: #06b6d4;
  stroke-width: 1;
  stroke-dasharray: 4 3;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}


/* ROTATION HANDLE */
.rotation-stem {
  stroke: #7c3aed;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.rotation-handle {
  fill: #ffffff;
  stroke: #7c3aed;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  cursor: grab;
}

.rotation-handle:active {
  cursor: grabbing;
}

.selection-outline {
  fill: none;
  stroke: #7c3aed;
  stroke-width: 1.5;
  stroke-dasharray: 5 3;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}


/* STANDARD SHAPE TOOLS */
.tool[data-tool="triangle"],
.tool[data-tool="pentagon"],
.tool[data-tool="hexagon"],
.tool[data-tool="star"] {
  font-size: 17px;
}


/* RECTANGLE CORNER ROUNDING */
.corner-round-vertex {
  fill: #ffffff;
  stroke: #7c3aed;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
}

.corner-round-vertex.active {
  fill: #7c3aed;
  stroke: #ffffff;
}

.corner-radius-line {
  stroke: #7c3aed;
  stroke-width: 1;
  stroke-dasharray: 3 2;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.corner-radius-handle {
  fill: #ffffff;
  stroke: #7c3aed;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  cursor: nwse-resize;
}


.corner-round-vertex.disabled {
  fill: #3a3a3a;
  stroke: #777;
  opacity: 0.55;
  cursor: not-allowed;
}


/* GROUPS */
.group-selection-outline {
  stroke-dasharray: 6 4;
}

.layer.group-layer .layer-name {
  font-weight: 600;
}

.layer.group-layer .layer-icon {
  color: #c4b5fd;
}


/* ALIGN & DISTRIBUTE */
.align-distribute-section {
  display: none;
}

.align-distribute-section.available {
  display: block;
}

.align-label {
  margin: 10px 0 7px;
  color: #a8a8a8;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.align-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.distribute-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.align-grid button,
.distribute-grid button {
  min-height: 32px;
  padding: 6px;
  border: 1px solid #454545;
  border-radius: 5px;
  background: #303030;
  color: #ededed;
  cursor: pointer;
  font-size: 16px;
}

.align-grid button:hover:not(:disabled),
.distribute-grid button:hover:not(:disabled) {
  background: #3b3b3b;
  border-color: #5b5b5b;
}

.align-grid button:disabled,
.distribute-grid button:disabled {
  opacity: 0.38;
  cursor: default;
}

.align-hint {
  margin: 9px 0 0;
  color: #8f8f8f;
  font-size: 11px;
  line-height: 1.35;
}


/* LAYER RENAME */
.layer-name {
  cursor: text;
}

.layer-name-input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid #7c3aed;
  border-radius: 4px;
  background: #181818;
  color: #f2f2f2;
  padding: 4px 6px;
  font: inherit;
  outline: none;
}


.layer-name:hover {
  background: rgba(124, 58, 237, 0.12);
  border-radius: 3px;
}


/* EXPANDABLE GROUP LAYERS */
.layer-name-wrap {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.layer-expander,
.layer-expander-spacer {
  width: 16px;
  min-width: 16px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
}

.layer-expander {
  color: #bdbdbd;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.layer-expander:hover {
  color: #fff;
}

.group-child-layer {
  --layer-depth: 1;
  padding-left: calc(8px + var(--layer-depth) * 16px);
  grid-template-columns: 26px 22px 24px minmax(0, 1fr) 30px;
  background: rgba(255, 255, 255, 0.015);
  cursor: default;
}

.group-child-layer:hover {
  background: rgba(255, 255, 255, 0.04);
}

.layer-child-spacer,
.layer-drag-spacer {
  display: block;
  width: 100%;
}

.layer-child-name {
  cursor: default;
  opacity: 0.88;
}

.layer-child-status {
  width: 30px;
  text-align: center;
  color: #aaa;
  font-size: 12px;
}


/* SHAPE-FOLLOWING SELECTION */
.selection-silhouette {
  filter:
    drop-shadow(0 0 1px rgba(0, 0, 0, 0.95))
    drop-shadow(0 0 3px rgba(167, 139, 250, 0.8));
}

.primary-selection-silhouette {
  filter:
    drop-shadow(0 0 1px rgba(0, 0, 0, 0.95))
    drop-shadow(0 0 4px rgba(34, 211, 238, 0.95));
}

.selection-outline.rectangle-selection-outline {
  stroke: #22d3ee;
  stroke-width: 1.25;
  stroke-dasharray: 4 3;
  opacity: 0.8;
}


/* CUSTOM COLOR PICKER */
.color-picker-trigger {
  width: 100%;
  min-height: 32px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  border: 1px solid #454545;
  border-radius: 5px;
  background: #2d2d2d;
  color: #ededed;
  padding: 4px 7px;
  cursor: pointer;
  text-align: left;
}

.context-controls .color-picker-trigger {
  width: 104px;
  min-height: 28px;
  grid-template-columns: 22px minmax(0, 1fr);
  padding: 3px 6px;
}

.color-picker-trigger:hover {
  background: #363636;
  border-color: #5d5d5d;
}

.color-swatch {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: var(--swatch-color);
  border: 1px solid rgba(255,255,255,0.24);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.35),
    0 0 0 1px rgba(0,0,0,0.25);
}

.context-controls .color-swatch {
  width: 18px;
  height: 18px;
}

.color-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-color-picker {
  position: fixed;
  z-index: 5000;
  width: 270px;
  box-sizing: border-box;
  padding: 11px;
  border: 1px solid #4c4c4c;
  border-radius: 9px;
  background: #242424;
  box-shadow: 0 18px 45px rgba(0,0,0,0.58);
  user-select: none;
}

.custom-color-picker.hidden {
  display: none;
}

.color-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
}

.color-picker-header strong {
  font-size: 12px;
  color: #eee;
}

.color-picker-header button {
  width: 25px;
  height: 25px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #aaa;
  cursor: pointer;
  font-size: 18px;
}

.color-picker-header button:hover {
  background: #333;
  color: #fff;
}

.color-field {
  position: relative;
  height: 165px;
  overflow: hidden;
  border-radius: 6px;
  background: #f00;
  cursor: crosshair;
}

.color-field-white,
.color-field-black {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.color-field-white {
  background: linear-gradient(to right, #fff, rgba(255,255,255,0));
}

.color-field-black {
  background: linear-gradient(to top, #000, rgba(0,0,0,0));
}

.color-field-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-shadow: 0 0 0 1px #111;
}

.hue-slider {
  position: relative;
  height: 14px;
  margin-top: 10px;
  border-radius: 999px;
  cursor: ew-resize;
  background: linear-gradient(to right,
    #f00 0%,
    #ff0 16.66%,
    #0f0 33.33%,
    #0ff 50%,
    #00f 66.66%,
    #f0f 83.33%,
    #f00 100%
  );
}

.hue-handle {
  position: absolute;
  top: 50%;
  width: 7px;
  height: 20px;
  border: 2px solid #fff;
  border-radius: 3px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-shadow: 0 0 0 1px #111;
}

.color-picker-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  margin-top: 11px;
}

.color-preview {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 5px;
}

#colorHexInput {
  width: 100%;
  min-width: 0;
  height: 31px;
  box-sizing: border-box;
  border: 1px solid #464646;
  border-radius: 5px;
  outline: none;
  background: #191919;
  color: #f5f5f5;
  padding: 0 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
}

#colorHexInput:focus {
  border-color: #7c3aed;
}


.color-presets {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 5px;
  margin-top: 10px;
}

.color-presets button {
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 4px;
  background: var(--preset);
  cursor: pointer;
}


/* GRADIENT FILLS */
.gradient-controls {
  margin-top: 12px;
}

.gradient-controls select {
  width: 100%;
  margin-top: 6px;
  min-height: 32px;
  border: 1px solid #454545;
  border-radius: 5px;
  background: #2b2b2b;
  color: #eee;
  padding: 0 8px;
}

.gradient-editor {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #3f3f3f;
  border-radius: 7px;
  background: #202020;
}

.gradient-editor.hidden,
.gradient-specific-controls.hidden {
  display: none;
}

.gradient-preview {
  height: 42px;
  margin-bottom: 10px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.18);
}

.gradient-stop-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 9px;
}

.gradient-stop-row label,
.gradient-specific-controls label {
  min-width: 0;
}

.gradient-specific-controls {
  display: grid;
  gap: 9px;
  margin-top: 10px;
}

.gradient-editor input[type="range"] {
  width: 100%;
  margin-top: 6px;
}

.gradient-editor label > span {
  display: inline-block;
  margin-top: 3px;
  color: #aaa;
  font-size: 11px;
}
\n\n/* STROKE CONTROLS */\n.stroke-controls {\n  margin-top: 12px;\n  padding-top: 12px;\n  border-top: 1px solid #3b3b3b;\n}\n.stroke-control-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 8px;\n}\n.stroke-controls label { display: block; margin-top: 9px; }\n.stroke-controls select,\n.stroke-controls input[type="number"],\n.stroke-controls input[type="text"] {\n  width: 100%;\n  min-height: 32px;\n  box-sizing: border-box;\n  margin-top: 6px;\n  border: 1px solid #454545;\n  border-radius: 5px;\n  background: #292929;\n  color: #eee;\n  padding: 0 8px;\n  outline: none;\n}\n.stroke-controls select:focus,\n.stroke-controls input[type="number"]:focus,\n.stroke-controls input[type="text"]:focus { border-color: #7c3aed; }\n.stroke-controls input[type="range"] { width: 100%; margin-top: 7px; }\n.stroke-dash-presets {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 6px;\n  margin-top: 9px;\n}\n.stroke-dash-presets button {\n  min-height: 30px;\n  border: 1px solid #454545;\n  border-radius: 5px;\n  background: #303030;\n  color: #e8e8e8;\n  cursor: pointer;\n  font-size: 11px;\n}\n.stroke-dash-presets button:hover { background: #3b3b3b; border-color: #5a5a5a; }\n

/* SHAPE BUILDER HOVER */
.shape-builder-subtract-cursor {
  position: fixed;
  z-index: 10000;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  font: 700 15px/1 system-ui, sans-serif;
  pointer-events: none;
  transform: translate(-50%, -50%);
}


/* OFFSET PATH */
.offset-path-popover {
  position: fixed;
  inset: 0;
  z-index: 4600;
  pointer-events: none;
}

.offset-path-popover[hidden] {
  display: none;
}

.offset-path-panel {
  position: absolute;
  top: 96px;
  left: 50%;
  width: 308px;
  box-sizing: border-box;
  transform: translateX(-50%);
  pointer-events: auto;
  overflow: hidden;
  border: 1px solid #4a4a4a;
  border-radius: 9px;
  background: #252525;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.48),
    0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

.offset-path-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 9px 10px 8px 13px;
  border-bottom: 1px solid #393939;
  background: #2b2b2b;
}

.offset-path-titlebar h2 {
  margin: 0;
  color: #f1f1f1;
  font-size: 12px;
  font-weight: 600;
}

.offset-path-titlebar span {
  display: block;
  margin-top: 2px;
  color: #9d9d9d;
  font-size: 10px;
}

.offset-path-titlebar > button {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #aaa;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.offset-path-titlebar > button:hover {
  background: #393939;
  color: #fff;
}

.offset-path-value-control {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  gap: 7px;
  padding: 14px 13px 10px;
}

.offset-path-value-control > button {
  min-height: 42px;
  border: 1px solid #474747;
  border-radius: 6px;
  background: #303030;
  color: #e8e8e8;
  cursor: pointer;
  font-size: 19px;
}

.offset-path-value-control > button:hover {
  border-color: #626262;
  background: #393939;
}

.offset-path-value {
  position: relative;
  display: block;
}

.offset-path-value input {
  width: 100%;
  height: 42px;
  box-sizing: border-box;
  border: 1px solid #5a5a5a;
  border-radius: 6px;
  outline: none;
  background: #1d1d1d;
  color: #fff;
  padding: 0 42px 0 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 19px;
  font-weight: 600;
  text-align: right;
  appearance: textfield;
}

.offset-path-value input::-webkit-inner-spin-button,
.offset-path-value input::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

.offset-path-value input:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 1px #8b5cf6;
}

.offset-path-unit {
  position: absolute;
  top: 50%;
  right: 11px;
  transform: translateY(-50%);
  color: #8e8e8e;
  font-size: 11px;
  pointer-events: none;
}

.offset-path-presets {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
  padding: 0 13px 13px;
}

.offset-path-presets button {
  min-width: 0;
  min-height: 27px;
  padding: 0 3px;
  border: 1px solid #414141;
  border-radius: 5px;
  background: #2d2d2d;
  color: #c8c8c8;
  cursor: pointer;
  font-size: 10px;
}

.offset-path-presets button:hover {
  border-color: #5b5b5b;
  background: #383838;
  color: #fff;
}

.offset-path-presets button.active {
  border-color: #7c3aed;
  background: rgba(124, 58, 237, 0.18);
  color: #ddd3ff;
}

.offset-path-rule {
  height: 1px;
  background: #393939;
}

.offset-path-footer {
  display: grid;
  gap: 8px;
  padding: 10px 13px 12px;
}

.offset-path-message {
  min-height: 0;
  padding: 0;
  color: #fca5a5;
  font-size: 10px;
}

.offset-path-message:empty {
  display: none;
}

.offset-path-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}

.offset-path-actions button {
  min-height: 30px;
  padding: 0 13px;
  border: 1px solid #484848;
  border-radius: 5px;
  background: #303030;
  color: #e8e8e8;
  cursor: pointer;
  font-size: 11px;
}

.offset-path-actions button:hover {
  background: #393939;
}

.offset-path-actions button.primary {
  border-color: #6d28d9;
  background: #7c3aed;
  color: #fff;
}

.offset-path-actions button.primary:hover {
  background: #8b5cf6;
}

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


/* VERTEX SELECTION TOOL */
.tool[data-tool="vertex"] {
  font-size: 18px;
}

.anchor-handle,
.control-handle,
.corner-round-vertex {
  cursor: default;
}


/* PARAMETRIC TRANSFORM */
.transform-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 11px;
}

.transform-heading h3 { margin: 0; }

.transform-link-button {
  width: 27px;
  height: 25px;
  padding: 0;
  border: 1px solid #454545;
  border-radius: 5px;
  background: #2d2d2d;
  color: #8f8f8f;
  cursor: pointer;
  font-size: 12px;
}

.transform-link-button:hover {
  border-color: #606060;
  color: #ddd;
}

.transform-link-button.active {
  border-color: #6d4ac7;
  background: rgba(124, 58, 237, 0.16);
  color: #c4b5fd;
}

.transform-empty {
  padding: 8px 0 2px;
  color: #777;
  font-size: 11px;
  line-height: 1.4;
}

.transform-controls {
  display: grid;
  gap: 9px;
}

.transform-grid {
  display: grid;
  gap: 8px;
}

.transform-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.transform-grid-1 {
  grid-template-columns: minmax(0, 1fr);
}

.transform-controls label {
  min-width: 0;
  margin-bottom: 0;
  color: #949494;
  font-size: 10px;
}

.transform-input-wrap {
  position: relative;
  margin-top: 5px;
}

.transform-input-stepper {
  overflow: hidden;
  height: 30px;
  border-radius: 5px;
}

.transform-input-wrap input {
  width: 100%;
  height: 30px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 30px 0 8px;
  border: 1px solid #444;
  border-radius: 5px;
  outline: none;
  background: #242424;
  color: #eee;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
}

.transform-input-wrap input:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 1px #7c3aed;
}

.transform-input-wrap span {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  color: #777;
  font-size: 9px;
  pointer-events: none;
}

.transform-subheading {
  margin-top: 2px;
  color: #777;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}


/* COLLAPSIBLE PROPERTIES */
.properties {
  background: #292929;
}

.properties > h2 {
  padding: 12px 13px;
  background: #303030;
  border-bottom-color: #3d3d3d;
}

.panel-section {
  padding: 0;
  border-bottom: 1px solid #383838;
  background: #292929;
}

.panel-section:hover {
  background: #2b2b2b;
}

.panel-section-header {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0 8px 0 5px;
  background: #2d2d2d;
}

.panel-section-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1;
  min-width: 0;
  min-height: 36px;
  padding: 0 5px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #b6b6b6;
  cursor: pointer;
  text-align: left;
}

.panel-section-toggle:hover {
  background: transparent;
  color: #f0f0f0;
}

.panel-section-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.panel-section-chevron {
  width: 14px;
  color: #818181;
  font-size: 17px;
  line-height: 1;
  text-align: center;
  transform: rotate(90deg);
  transition:
    transform 120ms ease,
    color 120ms ease;
}

.panel-section.collapsed .panel-section-chevron {
  transform: rotate(0deg);
}

.panel-section-toggle:hover .panel-section-chevron {
  color: #c5c5c5;
}

.panel-section-body {
  padding: 12px 13px 14px;
  overflow: hidden;
}

.panel-section.collapsed .panel-section-body {
  display: none;
}

.panel-section-accessory {
  flex: 0 0 auto;
  margin-left: 6px;
}

.panel-section .transform-heading {
  display: none;
}

/* Existing section headings are replaced by the compact header. */
.panel-section > h3 {
  display: none;
}

.panel-section label {
  margin-bottom: 10px;
}

.panel-section input,
.panel-section select {
  margin-top: 5px;
}

.panel-section .size-row {
  gap: 6px;
}

.panel-section .appearance-grid {
  gap: 8px;
}

.panel-section .transform-controls {
  gap: 8px;
}

.panel-section .align-label,
.panel-section .transform-subheading {
  margin-top: 2px;
}

.panel-section .primary.full {
  min-height: 31px;
}

/* Make the scrollbar visually quieter in the inspector. */
.properties::-webkit-scrollbar,
.right-panel-view::-webkit-scrollbar {
  width: 8px;
}

.properties::-webkit-scrollbar-thumb,
.right-panel-view::-webkit-scrollbar-thumb {
  background: #464646;
  border: 2px solid #292929;
  border-radius: 999px;
}

.properties::-webkit-scrollbar-track,
.right-panel-view::-webkit-scrollbar-track {
  background: #292929;
}


/* SELECTION QUICK MENU */
#stage {
  position: relative;
}

.selection-quick-menu {
  position: absolute;
  z-index: 4300;
  display: flex;
  align-items: center;
  gap: 3px;
  min-height: 32px;
  padding: 4px;
  border: 1px solid #4b4b4b;
  border-radius: 8px;
  background: rgba(38, 38, 38, 0.97);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.38),
    0 1px 0 rgba(255, 255, 255, 0.045) inset;
  backdrop-filter: blur(10px);
  transform: translate(-50%, -100%);
  pointer-events: auto;
  user-select: none;
  white-space: nowrap;
}

.selection-quick-menu[hidden] {
  display: none;
}

.selection-quick-menu button {
  min-width: 28px;
  height: 27px;
  padding: 0 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #d6d6d6;
  cursor: pointer;
  font-size: 10px;
  font-weight: 550;
}

.selection-quick-menu button:hover {
  background: #3a3a3a;
  color: #fff;
}

.selection-quick-menu button:active {
  background: #444;
}

.selection-quick-menu .quick-menu-icon {
  min-width: 28px;
  padding: 0 6px;
  font-size: 13px;
}

.selection-quick-menu .quick-menu-danger:hover {
  background: rgba(220, 38, 38, 0.2);
  color: #fecaca;
}

.selection-quick-menu .quick-menu-divider {
  width: 1px;
  height: 18px;
  margin: 0 2px;
  background: #4a4a4a;
}


/* CANVAS CONTEXT MENU */
.canvas-context-menu {
  position: fixed;
  z-index: 12000;
  min-width: 205px;
  padding: 5px;
  border: 1px solid #4a4a4a;
  border-radius: 8px;
  background: rgba(38, 38, 38, 0.985);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(12px);
  user-select: none;
}

.canvas-context-menu[hidden] { display: none; }

.context-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  min-height: 30px;
  padding: 0 9px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #dedede;
  cursor: pointer;
  font-size: 11px;
  text-align: left;
}

.context-menu-item:hover {
  background: #3b3b3b;
  color: #fff;
}

.context-menu-item.danger:hover {
  background: rgba(220, 38, 38, 0.2);
  color: #fecaca;
}

.context-menu-shortcut {
  color: #777;
  font-size: 9px;
  white-space: nowrap;
}

.context-menu-separator {
  height: 1px;
  margin: 4px 5px;
  background: #474747;
}


/* CANVAS DOCUMENT TABS */
.canvas-area {
  min-width: 0;
}

.canvas-tabs-bar {
  display: flex;
  align-items: stretch;
  min-height: 34px;
  border-bottom: 1px solid #393939;
  background: #252525;
  overflow: hidden;
}

.canvas-tabs {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.canvas-tabs::-webkit-scrollbar {
  display: none;
}

.canvas-tab {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 118px;
  max-width: 210px;
  height: 34px;
  padding: 0 5px 0 11px;
  border: 0;
  border-right: 1px solid #393939;
  background: #292929;
  color: #999;
}

.canvas-tab:hover {
  background: #303030;
  color: #d0d0d0;
}

.canvas-tab.active {
  background: #333;
  color: #f0f0f0;
}

.canvas-tab.active::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: #8b5cf6;
}

.canvas-tab-main {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: default;
  font: inherit;
}

.canvas-tab-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

.canvas-tab-close {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 23px;
  height: 23px;
  margin-left: 5px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #747474;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

.canvas-tab:hover .canvas-tab-close,
.canvas-tab.active .canvas-tab-close {
  color: #aaa;
}

.canvas-tab-close:hover {
  background: #444;
  color: #fff;
}

.canvas-tab-rename {
  width: 100%;
  min-width: 74px;
  height: 24px;
  box-sizing: border-box;
  padding: 0 6px;
  border: 1px solid #7c3aed;
  border-radius: 4px;
  outline: none;
  background: #202020;
  color: #fff;
  font-size: 11px;
}

.new-canvas-tab {
  flex: 0 0 35px;
  width: 35px;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-left: 1px solid #393939;
  background: #292929;
  color: #aaa;
  cursor: pointer;
  font-size: 18px;
}

.new-canvas-tab:hover {
  background: #363636;
  color: #fff;
}


/* AI EXPORT CAVEAT */
.export-caveat {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px solid #474747;
  border-radius: 6px;
  background: #232323;
}

.export-caveat[hidden] {
  display: none;
}

.export-caveat-icon {
  display: grid;
  place-items: center;
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  border-radius: 50%;
  background: #373737;
  color: #aaa;
  font: 700 10px/1 system-ui, sans-serif;
}

.export-caveat p {
  margin: 0;
  color: #9a9a9a;
  font-size: 10px;
  line-height: 1.45;
}


/* CANVAS TAB CONTEXT MENU */
.canvas-tab-context-menu {
  min-width: 190px;
}

.canvas-tab-context-menu .context-menu-item {
  min-height: 29px;
}

.canvas-tab.renaming .canvas-tab-close {
  visibility: hidden;
}

.canvas-tab.renaming {
  min-width: 150px;
}


/* TEXT TOOL */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@5.3.0/latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/roboto:vf@5.3.0/latin-wght-normal.woff2") format("woff2-variations");
}
.text-editor-overlay {
  position: fixed;
  z-index: 9000;
  box-sizing: border-box;
  min-width: 2px;
  min-height: 1em;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  resize: none;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
  transform-origin: top left;
  caret-color: currentColor;
  white-space: pre-wrap;
}
.text-editor-overlay[hidden] { display: none; }
.text-editor-overlay::selection {
  background: rgba(139, 92, 246, .32);
}
.text-properties-empty { color:#777; font-size:10px; line-height:1.45; }
.text-properties-controls { display:grid; gap:9px; }
.text-properties-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.text-unit-input { position:relative; margin-top:5px; }
.text-unit-input input { width:100%; box-sizing:border-box; padding-right:28px; }
.text-unit-input span {
  position:absolute; top:50%; right:8px; transform:translateY(-50%);
  color:#777; font-size:9px; pointer-events:none;
}
.text-action-button {
  min-height:31px; border:1px solid #484848; border-radius:5px;
  background:#303030; color:#ddd; cursor:pointer; font-size:10px;
}
.text-action-button:hover { background:#3b3b3b; color:#fff; }
.text-action-button:disabled { opacity:.45; cursor:default; }
.text-outline-hint { margin:0; color:#777; font-size:9px; line-height:1.4; }
.text-area-guide {
  fill:rgba(124,58,237,.05); stroke:#8b5cf6; stroke-width:1;
  stroke-dasharray:4 3; vector-effect:non-scaling-stroke; pointer-events:none;
}


/* Exact in-place text editor geometry */
.text-editor-overlay {
  appearance: none;
  -webkit-appearance: none;
  transform-origin: 0 0;
  font-kerning: normal;
  font-variant-ligatures: normal;
}


/* CUSTOM GOOGLE FONTS */
.google-font-importer {
  display: grid;
  gap: 5px;
}

.google-font-import-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}

.google-font-import-row input {
  min-width: 0;
}

.google-font-import-row button {
  min-width: 46px;
  border: 1px solid #484848;
  border-radius: 5px;
  background: #303030;
  color: #ddd;
  cursor: pointer;
}

.google-font-import-row button:hover {
  background: #3b3b3b;
  color: #fff;
}

.google-font-import-row button:disabled {
  opacity: .5;
  cursor: default;
}

.google-font-message {
  margin: 0;
  color: #777;
  font-size: 9px;
  line-height: 1.35;
}

.google-font-message.error {
  color: #d77;
}

.google-font-message.success {
  color: #8bc58b;
}


/* =========================================================
   REFINED APPLICATION UI
   Cohesive visual polish layer — intentionally override-only
   so editor behavior and layout semantics remain unchanged.
   ========================================================= */

:root {
  --ui-bg-0: #161616;
  --ui-bg-1: #1c1c1d;
  --ui-bg-2: #222224;
  --ui-bg-3: #29292c;
  --ui-bg-4: #313135;
  --ui-bg-hover: #38383d;
  --ui-border: #3b3b40;
  --ui-border-soft: #323237;
  --ui-border-strong: #4b4b52;
  --ui-text: #ededf0;
  --ui-text-soft: #b7b7bd;
  --ui-text-muted: #85858d;
  --ui-accent: #8b5cf6;
  --ui-accent-hover: #9b72f7;
  --ui-accent-soft: rgba(139, 92, 246, .16);
  --ui-accent-line: rgba(167, 139, 250, .62);
  --ui-danger: #f87171;
  --ui-radius-xs: 4px;
  --ui-radius-sm: 6px;
  --ui-radius-md: 8px;
  --ui-radius-lg: 10px;
  --ui-shadow-float:
    0 18px 45px rgba(0, 0, 0, .42),
    0 1px 0 rgba(255, 255, 255, .035) inset;
  --ui-shadow-modal:
    0 28px 80px rgba(0, 0, 0, .56),
    0 1px 0 rgba(255, 255, 255, .045) inset;
}

body {
  background: var(--ui-bg-0);
  color: var(--ui-text);
  font-size: 12px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

button,
input,
select,
textarea,
.color-picker-trigger {
  transition:
    background-color 110ms ease,
    border-color 110ms ease,
    color 110ms ease,
    box-shadow 110ms ease,
    opacity 110ms ease;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.color-picker-trigger:focus-visible {
  outline: none;
  border-color: var(--ui-accent) !important;
  box-shadow:
    0 0 0 1px var(--ui-accent),
    0 0 0 3px rgba(139, 92, 246, .13);
}

/* Menubar */
.menubar {
  height: 29px;
  flex-basis: 29px;
  padding: 0 7px;
  background:
    linear-gradient(to bottom, #222224, #1f1f21);
  border-bottom-color: #343438;
}

.menu-trigger {
  height: 28px;
  padding: 0 9px;
  color: #d0d0d5;
  font-size: 11.5px;
  letter-spacing: .005em;
}

.menu-trigger:hover,
.menu.open > .menu-trigger {
  background: #333337;
}

.menu-dropdown,
.canvas-context-menu {
  border-color: var(--ui-border-strong);
  background: rgba(34, 34, 37, .985);
  box-shadow: var(--ui-shadow-float);
  backdrop-filter: blur(16px);
}

.menu-dropdown {
  top: 28px;
  min-width: 226px;
  padding: 5px;
  border-radius: var(--ui-radius-md);
}

.menu-dropdown button {
  min-height: 29px;
  padding: 0 9px;
  border-radius: 5px;
  color: #dedee2;
  font-size: 11.5px;
}

.menu-dropdown button:hover:not(:disabled),
.context-menu-item:hover:not(:disabled) {
  background: #3c3c42;
}

.menu-dropdown button span,
.context-menu-shortcut {
  color: #7f7f88;
}

.menu-separator,
.context-menu-separator {
  background: #3c3c41;
}

/* Top context bar */
.topbar {
  height: 48px;
  padding: 0 12px;
  gap: 16px;
  background:
    linear-gradient(to bottom, #28282b, #252527);
  border-bottom-color: #39393e;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .32);
}

.brand {
  min-width: 168px;
  gap: 9px;
  color: #f3f3f5;
  font-size: 12px;
  font-weight: 620;
  letter-spacing: -.01em;
}

.logo {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 7px;
  background:
    linear-gradient(145deg, #9b72f7, #7040dc);
  box-shadow:
    0 5px 12px rgba(80, 42, 165, .28),
    0 1px 0 rgba(255,255,255,.18) inset;
  font-size: 12px;
}

.context-controls {
  gap: 12px;
}

.context-controls label {
  gap: 6px;
  color: #9c9ca4;
  font-size: 10px;
  font-weight: 550;
}

.context-controls input[type="number"] {
  width: 64px;
  height: 29px;
  padding: 0 8px;
  margin: 0;
}

/* Shared controls */
input[type="number"],
input[type="text"],
select,
#colorHexInput,
.transform-input-wrap input,
.save-project-field input {
  border-color: #434349;
  background: #202023;
  color: #ededf0;
  border-radius: var(--ui-radius-sm);
}

input[type="number"]:hover,
input[type="text"]:hover,
select:hover,
#colorHexInput:hover,
.transform-input-wrap input:hover {
  border-color: #53535b;
}

input::placeholder,
textarea::placeholder {
  color: #686870;
}

select {
  min-height: 30px;
}

.primary {
  border: 1px solid #8150eb;
  border-radius: var(--ui-radius-sm);
  background:
    linear-gradient(to bottom, #915ff7, #7c46e6);
  box-shadow:
    0 1px 0 rgba(255,255,255,.13) inset,
    0 4px 10px rgba(78, 41, 154, .18);
  font-size: 11px;
  font-weight: 620;
}

.primary:hover {
  border-color: #966bf4;
  background:
    linear-gradient(to bottom, #a174fb, #8753ea);
}

.primary:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset;
}

/* Main layout / toolrail */
.workspace {
  grid-template-columns:
    46px
    minmax(0, 1fr)
    288px;
}

.toolbar {
  padding-top: 6px;
  gap: 2px;
  background:
    linear-gradient(to right, #222224, #202022);
  border-right-color: #35353a;
}

.toolbar button {
  position: relative;
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: var(--ui-radius-sm);
  color: #b7b7be;
  font-size: 15px;
}

.toolbar button:hover {
  border-color: rgba(255,255,255,.035);
  background: #333338;
  color: #f0f0f3;
}

.toolbar .active {
  border-color: rgba(167, 139, 250, .4);
  background:
    linear-gradient(to bottom, rgba(139,92,246,.30), rgba(124,58,237,.22));
  color: #efe9ff;
  box-shadow:
    0 0 0 1px rgba(139,92,246,.09) inset;
}

.toolbar .active::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: #a78bfa;
}

.toolbar-divider {
  width: 24px;
  margin: 5px 0;
  background: #39393e;
}

/* Canvas chrome */
.canvas-area {
  background: #2d2d30;
}

.canvas-tabs-bar {
  min-height: 33px;
  background:
    linear-gradient(to bottom, #252527, #222224);
  border-bottom-color: #343438;
}

.canvas-tab {
  min-width: 122px;
  height: 33px;
  padding-left: 12px;
  border-right-color: #343438;
  background: transparent;
  color: #85858d;
}

.canvas-tab:hover {
  background: rgba(255,255,255,.035);
  color: #c7c7cc;
}

.canvas-tab.active {
  background:
    linear-gradient(to bottom, #303034, #2c2c30);
  color: #f0f0f3;
}

.canvas-tab.active::after {
  left: 10px;
  right: 10px;
  height: 2px;
  background: #9b72f7;
  box-shadow: 0 -1px 5px rgba(139,92,246,.28);
}

.canvas-tab-title {
  font-size: 10.5px;
  font-weight: 520;
}

.canvas-tab-close {
  width: 21px;
  height: 21px;
  color: #676770;
}

.canvas-tab-close:hover {
  background: #45454b;
}

.canvas-tab-rename {
  border-color: var(--ui-accent);
  background: #1c1c1f;
  box-shadow: 0 0 0 2px rgba(139,92,246,.12);
}

.new-canvas-tab {
  flex-basis: 34px;
  width: 34px;
  min-height: 33px;
  border-left-color: #343438;
  background: transparent;
  color: #898991;
}

.new-canvas-tab:hover {
  background: #333338;
}

.canvas-info {
  height: 26px;
  padding: 0 11px;
  gap: 8px;
  border-bottom-color: #35353a;
  background: #262629;
  color: #85858d;
  font-size: 10px;
}

#stage {
  height: calc(100% - 26px);
  padding: 54px;
  background:
    radial-gradient(
      circle at 50% 42%,
      #38383c 0,
      #323236 40%,
      #2e2e31 75%,
      #2b2b2e 100%
    );
}

#canvas {
  box-shadow:
    0 24px 60px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.055);
}

.zoom-controls {
  bottom: 13px;
  gap: 2px;
  padding: 3px;
  border-color: #45454c;
  border-radius: var(--ui-radius-md);
  background: rgba(32,32,35,.94);
  box-shadow: var(--ui-shadow-float);
  backdrop-filter: blur(12px);
}

.zoom-controls button {
  min-height: 26px;
  padding: 0 9px;
  border-radius: 5px;
  color: #aaaab2;
  font-size: 10px;
}

.zoom-controls button:hover {
  background: #3a3a40;
  color: #fff;
}

#zoomLabel {
  width: 50px;
  color: #c7c7cd;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

/* Inspector / Layers */
.right-sidebar {
  background: #242426;
  border-left-color: #35353a;
}

.panel-tabs {
  background:
    linear-gradient(to bottom, #212123, #1f1f21);
  border-bottom-color: #35353a;
}

.panel-tab {
  min-height: 35px;
  padding: 0 8px;
  border-right-color: #333338;
  color: #777780;
  font-size: 10.5px;
  font-weight: 600;
}

.panel-tab:hover {
  background: #2a2a2e;
}

.panel-tab.active {
  background: #29292c;
  color: #eeeef1;
  box-shadow: inset 0 -2px 0 #9568f4;
}

.properties {
  background: #252528;
}

.properties > h2,
.panel-view-header {
  min-height: 39px;
  padding: 0 12px;
  border-bottom-color: #36363b;
  background:
    linear-gradient(to bottom, #2a2a2d, #28282b);
}

.properties > h2 {
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: 650;
}

.panel-view-header h2 {
  font-size: 11px;
  font-weight: 650;
}

.panel-section {
  border-bottom-color: #343439;
  background: #27272a;
}

.panel-section:hover {
  background: #28282c;
}

.panel-section-header {
  min-height: 34px;
  padding: 0 8px 0 4px;
  background: #2a2a2e;
}

.panel-section-toggle {
  min-height: 34px;
  color: #a7a7ae;
}

.panel-section-title {
  font-size: 9.5px;
  font-weight: 680;
  letter-spacing: .085em;
}

.panel-section-chevron {
  color: #6e6e76;
  font-size: 15px;
}

.panel-section-body {
  padding: 11px 12px 13px;
}

.panel-section label {
  color: #96969e;
  font-size: 10px;
}

.transform-input-wrap input,
.panel-section input[type="number"],
.panel-section input[type="text"],
.panel-section select {
  min-height: 30px;
  border-color: #414147;
  background: #202023;
  font-size: 10.5px;
}

.transform-input-wrap input:focus,
.panel-section input:focus,
.panel-section select:focus {
  border-color: var(--ui-accent);
}

.transform-link-button,
.swap-button,
.align-grid button,
.distribute-grid button,
.text-action-button,
.google-font-import-row button {
  border-color: #414147;
  background: #2d2d31;
}

.transform-link-button:hover,
.swap-button:hover,
.align-grid button:hover,
.distribute-grid button:hover,
.text-action-button:hover,
.google-font-import-row button:hover {
  border-color: #505058;
  background: #37373c;
}

.transform-link-button.active {
  border-color: #7652ca;
  background: var(--ui-accent-soft);
  color: #d7c9ff;
}

.layers-panel-body {
  padding: 7px;
}

.layer {
  min-height: 32px;
  padding: 5px 6px;
  border-radius: 5px;
  color: #c9c9ce;
}

.layer:hover {
  background: #303034;
}

.layer.selected {
  border-color: rgba(139,92,246,.56);
  background: rgba(139,92,246,.15);
}

.layer-control {
  width: 24px;
  height: 24px;
  color: #a2a2a9;
}

.layer-control:hover {
  background: #3a3a40;
}

#objectCount {
  background: #343439;
  color: #9b9ba3;
  font-size: 9px;
}

/* Quick action / context surfaces */
.selection-quick-menu {
  min-height: 31px;
  padding: 3px;
  border-color: #4b4b52;
  border-radius: 7px;
  background: rgba(32,32,35,.965);
  box-shadow: var(--ui-shadow-float);
}

.selection-quick-menu button {
  height: 25px;
  border-radius: 4px;
  color: #c8c8ce;
  font-size: 9.5px;
}

.selection-quick-menu button:hover {
  background: #3b3b41;
}

.selection-quick-menu .quick-menu-divider {
  background: #45454b;
}

.canvas-context-menu {
  min-width: 210px;
  padding: 5px;
  border-radius: 8px;
}

.context-menu-item {
  min-height: 29px;
  border-radius: 5px;
  color: #d7d7dc;
  font-size: 10.5px;
}

.context-menu-item:disabled {
  opacity: .4;
  cursor: default;
}

/* Color surfaces */
.color-picker-trigger {
  min-height: 30px;
  border-color: #424248;
  background: #27272b;
}

.color-picker-trigger:hover {
  border-color: #55555d;
  background: #303035;
}

.context-controls .color-picker-trigger {
  width: 100px;
  min-height: 27px;
}

.color-swatch {
  border-radius: 3px;
  border-color: rgba(255,255,255,.18);
}

.color-value {
  color: #b4b4bb;
  font-size: 9.5px;
}

.custom-color-picker,
.offset-path-panel {
  border-color: #4a4a51;
  background: #242427;
  box-shadow: var(--ui-shadow-float);
}

.custom-color-picker {
  border-radius: 10px;
}

.color-picker-header strong,
.offset-path-titlebar h2 {
  color: #ececf0;
  font-weight: 650;
}

.color-field {
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
}

/* Dialogs */
.modal,
.modal-backdrop {
  background: rgba(10,10,12,.62);
  backdrop-filter: blur(5px);
}

.modal-content,
.save-project-dialog {
  border-color: #4a4a51;
  background: #242427;
  box-shadow: var(--ui-shadow-modal);
}

.modal-content {
  border-radius: 10px;
}

.modal-header,
.save-project-titlebar {
  border-bottom-color: #3b3b41;
  background:
    linear-gradient(to bottom, #2b2b2f, #28282b);
}

.modal-header h2,
.save-project-titlebar h2 {
  letter-spacing: -.01em;
}

.export-body,
.save-project-body {
  background: #242427;
}

.modal-actions,
.save-project-actions {
  border-top-color: #39393f;
  background: #27272a;
}

.modal-actions button:not(.primary),
.save-project-actions button:not(.primary),
.offset-path-actions button:not(.primary) {
  border-color: #44444b;
  background: #2e2e32;
  color: #d1d1d6;
}

.modal-actions button:not(.primary):hover,
.save-project-actions button:not(.primary):hover,
.offset-path-actions button:not(.primary):hover {
  background: #38383d;
}

.export-caveat,
.save-project-note {
  border-color: #3e3e44;
  background: #202023;
}

#svgOutput {
  border-top: 1px solid #343439;
  background: #19191b;
  color: #d6d6dc;
}

/* Text / Google font importer */
.text-properties-empty,
.transform-empty,
.text-outline-hint,
.google-font-message {
  color: #777780;
}

.google-font-import-row {
  gap: 5px;
}

.google-font-import-row button {
  min-width: 45px;
  border-radius: 5px;
  color: #d2d2d7;
  font-size: 10px;
}

/* Scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: #44444a transparent;
}

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

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

*::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: #47474e;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: #5a5a62;
  background-clip: padding-box;
}

/* Selection geometry */
.selection-outline,
.rotation-stem,
.rotation-handle,
.vector-handle,
.anchor-handle,
.control-handle,
.corner-round-vertex {
  stroke: #9b72f7;
}

.rotation-handle,
.vector-handle,
.anchor-handle,
.corner-round-vertex {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
}

/* Responsive refinement */
@media (max-width: 900px) {
  .workspace {
    grid-template-columns:
      46px
      minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  button,
  input,
  select,
  textarea,
  .color-picker-trigger,
  .panel-section-chevron {
    transition: none !important;
  }
}


/* CONSISTENT TOOL ICONS */
.toolbar .tool {
  display: grid;
  place-items: center;
  padding: 0;
}

.toolbar .tool svg {
  width: 20px;
  height: 20px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.toolbar .tool[data-tool="select"] svg,
.toolbar .tool[data-tool="star"] svg,
.toolbar .tool[data-tool="pentagon"] svg,
.toolbar .tool[data-tool="hexagon"] svg,
.toolbar .tool[data-tool="triangle"] svg {
  fill: none;
}

.toolbar .tool[data-tool="shapeBuilder"] svg {
  stroke-width: 1.55;
}

.toolbar .tool[data-tool="text"] svg {
  stroke-width: 1.75;
}

.toolbar .tool:hover svg {
  transform: translateY(-.25px);
}

.toolbar .tool svg {
  transition:
    transform 110ms ease,
    stroke-width 110ms ease;
}

.toolbar .tool.active svg {
  stroke-width: 1.8;
}


/* =========================================================
   LOW-RES / 720P RESPONSIVE SCALING
   Preserve usable hit targets while reducing chrome density.
   ========================================================= */

html,
body {
  min-width: 960px;
  min-height: 560px;
}

.app-shell {
  min-height: 100vh;
}

/* Prevent sidebar content from forcing the viewport wider/taller. */
.right-sidebar,
.properties,
.layers-panel-body,
.panel-section-body,
.canvas-area,
#stage {
  min-width: 0;
  min-height: 0;
}

/* 1280-ish width: reduce inspector width and horizontal padding. */
@media (max-width: 1366px) {
  .workspace {
    grid-template-columns:
      44px
      minmax(0, 1fr)
      258px;
  }

  .brand {
    min-width: 148px;
  }

  .topbar {
    gap: 11px;
    padding-inline: 9px;
  }

  .context-controls {
    gap: 9px;
  }

  .context-controls input[type="number"] {
    width: 58px;
  }

  #stage {
    padding: 38px;
  }

  .panel-section-body {
    padding-inline: 10px;
  }
}

/* Height is the main constraint on 720p displays. */
@media (max-height: 760px) {
  .menubar {
    height: 26px;
    flex-basis: 26px;
  }

  .menu-trigger {
    height: 25px;
    padding-inline: 8px;
    font-size: 10.5px;
  }

  .menu-dropdown {
    top: 25px;
  }

  .topbar {
    height: 42px;
    padding-inline: 9px;
    gap: 10px;
  }

  .brand {
    min-width: 142px;
    gap: 7px;
    font-size: 11px;
  }

  .logo {
    width: 25px;
    height: 25px;
  }

  .context-controls {
    gap: 8px;
  }

  .context-controls label {
    gap: 4px;
    font-size: 9px;
  }

  .context-controls input[type="number"],
  .context-controls select,
  .context-controls .color-picker-trigger {
    min-height: 25px;
    height: 25px;
  }

  .workspace {
    grid-template-columns:
      42px
      minmax(0, 1fr)
      252px;
  }

  .toolbar {
    padding-top: 4px;
    gap: 1px;
  }

  .toolbar button {
    width: 31px;
    height: 31px;
  }

  .toolbar .tool svg {
    width: 16px;
    height: 16px;
  }

  .toolbar-divider {
    margin-block: 3px;
  }

  .canvas-tabs-bar {
    min-height: 29px;
  }

  .canvas-tab {
    height: 29px;
    min-width: 108px;
    padding-left: 10px;
  }

  .new-canvas-tab {
    min-height: 29px;
    height: 29px;
  }

  .canvas-info {
    height: 23px;
    padding-inline: 9px;
    font-size: 9px;
  }

  #stage {
    height: calc(100% - 23px);
    padding: 28px;
  }

  .panel-tabs {
    min-height: 31px;
  }

  .panel-tab {
    min-height: 31px;
    font-size: 10px;
  }

  .properties > h2,
  .panel-view-header {
    min-height: 34px;
    height: 34px;
    padding-inline: 10px;
  }

  .panel-section-header,
  .panel-section-toggle {
    min-height: 30px;
  }

  .panel-section-body {
    padding: 8px 10px 10px;
  }

  .panel-section-title {
    font-size: 9px;
  }

  .transform-grid,
  .text-properties-grid {
    gap: 6px;
  }

  .panel-section input[type="number"],
  .panel-section input[type="text"],
  .panel-section select,
  .transform-input-wrap input,
  .color-picker-trigger {
    min-height: 27px;
  }

  .text-properties-controls {
    gap: 7px;
  }

  .text-action-button,
  .google-font-import-row button {
    min-height: 28px;
  }

  .layer {
    min-height: 28px;
    padding-block: 3px;
  }

  .layer-control {
    width: 22px;
    height: 22px;
  }

  .selection-quick-menu {
    min-height: 28px;
  }

  .selection-quick-menu button {
    height: 23px;
  }

  .zoom-controls {
    bottom: 8px;
  }

  .modal-content,
  .save-project-dialog {
    max-height: calc(100vh - 36px);
  }

  .export-body,
  .save-project-body {
    overflow: auto;
  }
}

/* Very tight laptop windows / browser chrome visible. */
@media (max-height: 680px) {
  .workspace {
    grid-template-columns:
      40px
      minmax(0, 1fr)
      236px;
  }

  .toolbar button {
    width: 29px;
    height: 29px;
  }

  .toolbar .tool svg {
    width: 15px;
    height: 15px;
  }

  #stage {
    padding: 20px;
  }

  .panel-section-body {
    padding: 7px 9px 8px;
  }

  .panel-section-header,
  .panel-section-toggle {
    min-height: 28px;
  }

  .panel-section input[type="number"],
  .panel-section input[type="text"],
  .panel-section select,
  .transform-input-wrap input,
  .color-picker-trigger {
    min-height: 25px;
  }
}

/* Prevent the top context bar from pushing the app horizontally. */
@media (max-width: 1180px) {
  .brand {
    min-width: 118px;
  }

  .context-controls {
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .context-controls::-webkit-scrollbar {
    display: none;
  }

  .right-sidebar {
    width: auto;
  }

  .workspace {
    grid-template-columns:
      40px
      minmax(0, 1fr)
      232px;
  }

  #stage {
    padding-inline: 18px;
  }
}

/* Keep dialogs inside small screens without scaling their text into illegibility. */
@media (max-width: 1280px), (max-height: 760px) {
  .modal-content,
  .save-project-dialog {
    width: min(520px, calc(100vw - 28px));
    max-width: calc(100vw - 28px);
  }

  .custom-color-picker,
  .offset-path-panel {
    max-height: calc(100vh - 20px);
    overflow: auto;
  }

  .canvas-context-menu,
  .menu-dropdown {
    max-height: calc(100vh - 12px);
    overflow-y: auto;
  }
}

/* Keep the editor legible if the browser window gets smaller than supported. */
@media (max-width: 980px) {
  body {
    overflow-x: auto;
  }
}

/* SELECTION HIT-TEST SAFETY */
#selectionOverlay .selection-silhouette,
#selectionOverlay .selection-silhouette-root,
#selectionOverlay .selection-outline,
#selectionOverlay .rotation-stem,
#selectionOverlay .control-line,
#selectionOverlay .corner-radius-line,
#selectionOverlay .snap-guide,
#selectionOverlay #marqueeSelection,
#selectionOverlay .text-area-guide {
  pointer-events: none !important;
}


/* TRANSPARENT / NONE SWATCH */
.transparent-swatch {
  background:
    linear-gradient(
      135deg,
      transparent 43%,
      #ef4444 44%,
      #ef4444 56%,
      transparent 57%
    ),
    #f4f4f5 !important;
}


/* CUSTOM SWATCHES + EYEDROPPER */
.color-picker-tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 10px;
}

.color-tool-button {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  border: 1px solid var(--ui-border, #3f3f46);
  border-radius: 6px;
  background: var(--ui-bg-3, #29292d);
  color: var(--ui-text, #f4f4f5);
  font-size: 10px;
  cursor: pointer;
}

.color-tool-button:hover {
  background: var(--ui-bg-4, #333338);
}

.color-tool-button.active {
  border-color: var(--accent, #8b5cf6);
  box-shadow: 0 0 0 1px var(--accent, #8b5cf6) inset;
}

.color-tool-button svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.custom-swatches-section {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--ui-border, #3f3f46);
}

.custom-swatches-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
  color: var(--ui-text-muted, #a1a1aa);
  font-size: 10px;
  font-weight: 600;
}

.swatch-clear-button {
  border: 0;
  background: transparent;
  color: var(--ui-text-dim, #71717a);
  font: inherit;
  font-size: 9px;
  cursor: pointer;
  padding: 2px 3px;
}

.swatch-clear-button:hover {
  color: var(--ui-text, #f4f4f5);
}

.custom-swatches-grid {
  display: grid;
  grid-template-columns: repeat(8, 22px);
  gap: 6px;
  min-height: 22px;
}

.custom-swatch {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
  cursor: pointer;
}

.custom-swatch:hover {
  outline: 2px solid rgba(139, 92, 246, .55);
  outline-offset: 1px;
}

body.color-eyedropper-active,
body.color-eyedropper-active #stage,
body.color-eyedropper-active #art,
body.color-eyedropper-active #art * {
  cursor: crosshair !important;
}

@media (max-height: 760px) {
  .color-picker-tools {
    margin-top: 8px;
  }

  .custom-swatches-section {
    margin-top: 8px;
    padding-top: 7px;
  }
}


/* =========================================================
   ILLUSTRATOR-LIKE PASTEBOARD
   The SVG editing surface extends beyond the artboard.
   ========================================================= */
#artboardWrap {
  position: relative;
  overflow: visible;
  box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.35);
}

#canvas {
  position: absolute;
  left: -200%;
  top: -200%;
  width: 500%;
  height: 500%;
  overflow: visible;
  background: transparent !important;
  box-shadow: none !important;
}

/* The central wrapper remains the visible artboard footprint/checkerboard. */
#artboardWrap.transparent-canvas {
  box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.35);
}

/* Keep the large pasteboard SVG from affecting layout calculations. */
#stage {
  isolation: isolate;
}



/* THINNER SELECTION OUTLINES + CLEAR BÉZIER HANDLES */
.selection-outline,
.selection-silhouette,
.selection-silhouette-root,
.multi-selection-outline {
  stroke-width: 0.65 !important;
  vector-effect: non-scaling-stroke;
}

.control-line {
  stroke-width: 0.7 !important;
  vector-effect: non-scaling-stroke;
  opacity: 0.95;
}

.anchor-handle,
.control-handle {
  stroke-width: 0.85 !important;
  vector-effect: non-scaling-stroke;
}

/* Pen construction handles stay crisp over artwork and the pasteboard. */
#selectionOverlay .control-line {
  pointer-events: none;
}

#selectionOverlay .anchor-handle,
#selectionOverlay .control-handle,
#selectionOverlay .pen-close-target {
  pointer-events: all;
}


/* =========================================================
   STEPPED HISTORY MODAL
   ========================================================= */
.history-backdrop {
  z-index: 6200;
}

.history-dialog {
  width: min(430px, calc(100vw - 28px));
  max-height: min(620px, calc(100vh - 36px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ui-border-strong, #4a4a50);
  border-radius: 9px;
  background: var(--ui-bg-2, #252529);
  box-shadow: 0 22px 58px rgba(0, 0, 0, .52);
}

.history-titlebar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 12px 11px 14px;
  border-bottom: 1px solid var(--ui-border, #3c3c42);
}

.history-titlebar h2 {
  margin: 0;
  color: var(--ui-text, #f4f4f5);
  font-size: 13px;
  font-weight: 650;
}

.history-titlebar p {
  margin: 3px 0 0;
  color: var(--ui-text-muted, #a1a1aa);
  font-size: 10px;
}

.history-close {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ui-text-muted, #a1a1aa);
  font-size: 18px;
  cursor: pointer;
}

.history-close:hover {
  background: var(--ui-bg-4, #35353a);
  color: var(--ui-text, #fff);
}

.history-toolbar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--ui-border, #3c3c42);
  background: var(--ui-bg-1, #202024);
}

.history-toolbar button,
.history-footer button {
  min-height: 27px;
  padding: 0 10px;
  border: 1px solid var(--ui-border, #414149);
  border-radius: 5px;
  background: var(--ui-bg-3, #2d2d32);
  color: var(--ui-text, #f4f4f5);
  font-size: 10px;
  cursor: pointer;
}

.history-toolbar button:hover:not(:disabled),
.history-footer button:hover {
  background: var(--ui-bg-4, #38383e);
}

.history-toolbar button:disabled {
  opacity: .4;
  cursor: default;
}

.history-position-label {
  margin-left: auto;
  color: var(--ui-text-muted, #a1a1aa);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.history-steps {
  flex: 1 1 auto;
  min-height: 180px;
  overflow-y: auto;
  padding: 6px;
  background: var(--ui-bg-2, #252529);
}

.history-step {
  width: 100%;
  min-height: 36px;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--ui-text, #f4f4f5);
  text-align: left;
  cursor: pointer;
}

.history-step:hover {
  background: var(--ui-bg-3, #2e2e33);
}

.history-step.current {
  border-color: var(--accent, #8b5cf6);
  background: rgba(139, 92, 246, .14);
}

.history-step.future {
  opacity: .58;
}

.history-step-index {
  color: var(--ui-text-dim, #777780);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.history-step-copy {
  min-width: 0;
}

.history-step-label {
  display: block;
  overflow: hidden;
  color: inherit;
  font-size: 10.5px;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-step-detail {
  display: block;
  margin-top: 1px;
  overflow: hidden;
  color: var(--ui-text-muted, #96969f);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-step-state {
  color: var(--ui-text-dim, #777780);
  font-size: 9px;
}

.history-step.current .history-step-state {
  color: var(--accent, #8b5cf6);
}

.history-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-top: 1px solid var(--ui-border, #3c3c42);
  background: var(--ui-bg-1, #202024);
  color: var(--ui-text-dim, #777780);
  font-size: 9px;
}

@media (max-height: 760px) {
  .history-dialog {
    max-height: calc(100vh - 24px);
  }

  .history-step {
    min-height: 32px;
  }
}


/* =========================================================
   TOGGLEABLE CANVAS RULERS
   ========================================================= */
#stage {
  --ruler-size: 22px;
}

#stage.rulers-visible {
  padding-top: var(--ruler-size);
  padding-left: var(--ruler-size);
}

.canvas-ruler,
.ruler-corner {
  position: absolute;
  z-index: 42;
  background: var(--ui-bg-1, #202024);
  border-color: var(--ui-border, #3c3c42);
  color: var(--ui-text-muted, #a1a1aa);
  user-select: none;
}

.canvas-ruler {
  display: block;
  pointer-events: none;
}

.horizontal-ruler {
  top: 0;
  left: var(--ruler-size);
  right: 0;
  height: var(--ruler-size);
  width: calc(100% - var(--ruler-size));
  border-bottom: 1px solid var(--ui-border, #3c3c42);
}

.vertical-ruler {
  top: var(--ruler-size);
  bottom: 0;
  left: 0;
  width: var(--ruler-size);
  height: calc(100% - var(--ruler-size));
  border-right: 1px solid var(--ui-border, #3c3c42);
}

.ruler-corner {
  top: 0;
  left: 0;
  width: var(--ruler-size);
  height: var(--ruler-size);
  border-right: 1px solid var(--ui-border, #3c3c42);
  border-bottom: 1px solid var(--ui-border, #3c3c42);
}

#stage:not(.rulers-visible) .canvas-ruler,
#stage:not(.rulers-visible) .ruler-corner {
  display: none;
}

#stage:not(.rulers-visible) {
  padding-top: 0;
  padding-left: 0;
}

@media (max-height: 760px) {
  #stage {
    --ruler-size: 18px;
  }
}


/* HISTORY SIDEBAR TAB */
.history-view {
  min-height: 0;
  overflow: hidden;
}

.history-view.active {
  display: flex;
  flex-direction: column;
}

.history-panel-header {
  flex: 0 0 auto;
}

.history-panel-header p {
  margin: 2px 0 0;
  color: var(--ui-text-muted, #a1a1aa);
  font-size: 9px;
}

.history-view .history-toolbar {
  flex: 0 0 auto;
  padding: 8px;
}

.history-view .history-steps {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 6px;
}

.history-panel-footer {
  flex: 0 0 auto;
  padding: 7px 9px;
  border-top: 1px solid var(--ui-border, #3c3c42);
  color: var(--ui-text-dim, #777780);
  font-size: 9px;
  line-height: 1.35;
}


/* =========================================================
   PATHFINDER PANEL
   ========================================================= */
.pathfinder-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  margin-top: 7px;
}

.pathfinder-grid button {
  min-width: 0;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 2px;
  border: 1px solid var(--ui-border, #3c3c42);
  border-radius: 5px;
  background: var(--ui-bg-3, #2d2d32);
  color: var(--ui-text-muted, #a1a1aa);
  cursor: pointer;
}

.pathfinder-grid button:hover:not(:disabled) {
  border-color: var(--ui-border-strong, #505058);
  background: var(--ui-bg-4, #37373d);
  color: var(--ui-text, #f4f4f5);
}

.pathfinder-grid button:active:not(:disabled) {
  transform: translateY(1px);
}

.pathfinder-grid button:disabled {
  opacity: .34;
  cursor: default;
}

.pathfinder-grid svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
  fill-opacity: .12;
  stroke: currentColor;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.pathfinder-grid button span {
  max-width: 100%;
  overflow: hidden;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pathfinder-hint {
  margin: 7px 0 0;
  color: var(--ui-text-dim, #777780);
  font-size: 9px;
  line-height: 1.35;
}

@media (max-width: 1180px), (max-height: 680px) {
  .pathfinder-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pathfinder-grid button {
    min-height: 42px;
  }
}


/* =========================================================
   RULER-DRAGGED GUIDES
   ========================================================= */
.canvas-ruler {
  pointer-events: auto;
  cursor: default;
}

.horizontal-ruler {
  cursor: ns-resize;
}

.vertical-ruler {
  cursor: ew-resize;
}

.guide-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  pointer-events: none;
}

.canvas-guide {
  position: absolute;
  z-index: 1;
  pointer-events: auto;
  background: #38bdf8;
  opacity: .95;
}

.canvas-guide.horizontal {
  left: 0;
  right: 0;
  height: 1px;
  cursor: ns-resize;
}

.canvas-guide.vertical {
  top: 0;
  bottom: 0;
  width: 1px;
  cursor: ew-resize;
}

.canvas-guide.locked {
  pointer-events: none;
  cursor: default;
}

.guide-overlay.guides-hidden {
  display: none;
}

.canvas-guide.dragging {
  opacity: 1;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, .22);
}

.canvas-guide-preview {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  background: #38bdf8;
  opacity: .9;
}

.canvas-guide-preview.horizontal {
  left: 0;
  right: 0;
  height: 1px;
}

.canvas-guide-preview.vertical {
  top: 0;
  bottom: 0;
  width: 1px;
}


/* =========================================================
   ADVANCED PATH EDITING
   ========================================================= */
.path-editing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-top: 7px;
}

.path-editing-grid button {
  min-width: 0;
  padding: 6px 5px;
  border: 1px solid var(--ui-border, #3c3c42);
  border-radius: 5px;
  background: var(--ui-bg-3, #2d2d32);
  color: var(--ui-text-muted, #a1a1aa);
  font-size: 9px;
  cursor: pointer;
}

.path-editing-grid button:hover:not(:disabled) {
  border-color: var(--ui-border-strong, #505058);
  background: var(--ui-bg-4, #37373d);
  color: var(--ui-text, #f4f4f5);
}

.path-editing-grid button:disabled {
  opacity: .34;
  cursor: default;
}

.path-editing-hint {
  margin: 7px 0 0;
  color: var(--ui-text-dim, #777780);
  font-size: 9px;
  line-height: 1.35;
}

.anchor-handle.anchor-selected {
  fill: var(--accent, #8b5cf6) !important;
  stroke: #fff !important;
  stroke-width: 1.2 !important;
}


/* PEN OPEN-PATH CONTINUATION PREVIEW */
#penContinuationEndpoint,
#penContinuationPreview {
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}


/* PEN INTERMEDIATE-ANCHOR PREVIEW */
#penSegmentInsertionPreview {
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}


/* VERTEX QUICK CONTEXT MENU */
.selection-quick-menu.vertex-context-menu {
  gap: 3px;
  padding: 4px;
}

.vertex-quick-menu-button {
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.vertex-quick-menu-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.vertex-quick-menu-button svg circle,
.vertex-quick-menu-button svg rect {
  vector-effect: non-scaling-stroke;
}


/* SLIGHTLY LARGER TOOLBAR ICONS */


/* =========================================================
   APPLICATION THEMES
   ========================================================= */
body[data-theme="light"] {
  background: #e7e9ee;
  color: #1f2937;
}

body[data-theme="light"] .menubar,
body[data-theme="light"] .panel-tabs {
  background: #f5f6f8;
  border-color: #c9cdd4;
}

body[data-theme="light"] .topbar,
body[data-theme="light"] .toolbar,
body[data-theme="light"] .right-sidebar,
body[data-theme="light"] .canvas-info {
  background: #f0f1f4;
  border-color: #c9cdd4;
}

body[data-theme="light"] .canvas-area {
  background: #cfd3d8;
}

body[data-theme="light"] .menu-trigger,
body[data-theme="light"] .menu-dropdown button,
body[data-theme="light"] .toolbar button,
body[data-theme="light"] .zoom-controls button,
body[data-theme="light"] button {
  color: #27303d;
}

body[data-theme="light"] .menu-trigger:hover,
body[data-theme="light"] .menu.open > .menu-trigger,
body[data-theme="light"] .toolbar button:hover,
body[data-theme="light"] .panel-tab:hover,
body[data-theme="light"] .zoom-controls button:hover {
  background: #dde1e7;
  color: #111827;
}

body[data-theme="light"] .menu-dropdown,
body[data-theme="light"] .zoom-controls,
body[data-theme="light"] .selection-quick-menu,
body[data-theme="light"] .canvas-context-menu,
body[data-theme="light"] .custom-color-picker,
body[data-theme="light"] .modal-card,
body[data-theme="light"] .dialog-card {
  background: #ffffff;
  border-color: #bcc2cb;
  color: #1f2937;
  box-shadow: 0 12px 30px rgba(30, 41, 59, .18);
}

body[data-theme="light"] .menu-dropdown button:hover,
body[data-theme="light"] .canvas-context-menu button:hover,
body[data-theme="light"] .selection-quick-menu button:hover {
  background: #e5e7eb;
}

body[data-theme="light"] .menu-dropdown button span,
body[data-theme="light"] .canvas-info,
body[data-theme="light"] .context-controls label,
body[data-theme="light"] .panel-section label,
body[data-theme="light"] .panel-section h3,
body[data-theme="light"] .pathfinder-hint,
body[data-theme="light"] .path-editing-hint {
  color: #5f6875;
}

body[data-theme="light"] .menu-separator,
body[data-theme="light"] .toolbar-divider,
body[data-theme="light"] .panel-section,
body[data-theme="light"] .properties > h2,
body[data-theme="light"] .panel-view-header,
body[data-theme="light"] .panel-tabs {
  border-color: #d2d6dc;
}

body[data-theme="light"] .menu-separator,
body[data-theme="light"] .toolbar-divider {
  background: #d2d6dc;
}

body[data-theme="light"] input[type="number"],
body[data-theme="light"] input[type="text"],
body[data-theme="light"] input[type="url"],
body[data-theme="light"] select,
body[data-theme="light"] textarea,
body[data-theme="light"] .swap-button,
body[data-theme="light"] .pathfinder-grid button,
body[data-theme="light"] .path-editing-grid button {
  background: #ffffff;
  border-color: #bfc5ce;
  color: #202938;
}

body[data-theme="light"] .panel-tab {
  color: #667085;
  border-color: #d2d6dc;
}

body[data-theme="light"] .panel-tab.active {
  background: #ffffff;
  color: #111827;
}

body[data-theme="light"] .toolbar .active,
body[data-theme="light"] .primary,
body[data-theme="light"] .logo {
  background: #6d28d9;
  color: #ffffff;
}

body[data-theme="light"] .color-picker-trigger {
  background: #ffffff;
  border-color: #bfc5ce;
  color: #27303d;
}

body[data-theme="light"] .layer-row,
body[data-theme="light"] .history-step,
body[data-theme="light"] .history-toolbar button {
  background: #f7f8fa;
  border-color: #d4d8de;
  color: #27303d;
}

body[data-theme="light"] .layer-row:hover,
body[data-theme="light"] .history-step:hover {
  background: #e9edf2;
}

body[data-theme="light"] .layer-row.selected,
body[data-theme="light"] .history-step.current {
  background: #ede9fe;
  border-color: #8b5cf6;
}

body[data-theme="light"] .canvas-tabs-bar,
body[data-theme="light"] .canvas-tab {
  background: #e5e7eb;
  border-color: #c9cdd4;
  color: #525b68;
}

body[data-theme="light"] .canvas-tab.active {
  background: #ffffff;
  color: #111827;
}

body[data-theme="light"] .ruler-corner,
body[data-theme="light"] .canvas-ruler {
  background: #e9ebef;
  border-color: #bfc5ce;
}

body[data-theme="light"] .selection-quick-menu button,
body[data-theme="light"] .canvas-context-menu button {
  color: #27303d;
}

body[data-theme="light"] .quick-menu-divider {
  background: #d4d8de;
}

body[data-theme="high-contrast"] {
  background: #000;
  color: #fff;
}

body[data-theme="high-contrast"] .menubar,
body[data-theme="high-contrast"] .topbar,
body[data-theme="high-contrast"] .toolbar,
body[data-theme="high-contrast"] .right-sidebar,
body[data-theme="high-contrast"] .canvas-info,
body[data-theme="high-contrast"] .panel-tabs {
  background: #000;
  border-color: #fff;
}

body[data-theme="high-contrast"] .canvas-area {
  background: #111;
}

body[data-theme="high-contrast"] .menu-trigger,
body[data-theme="high-contrast"] .menu-dropdown button,
body[data-theme="high-contrast"] .toolbar button,
body[data-theme="high-contrast"] .panel-tab,
body[data-theme="high-contrast"] .zoom-controls button,
body[data-theme="high-contrast"] button,
body[data-theme="high-contrast"] label,
body[data-theme="high-contrast"] h2,
body[data-theme="high-contrast"] h3,
body[data-theme="high-contrast"] p,
body[data-theme="high-contrast"] span {
  color: #fff;
}

body[data-theme="high-contrast"] .menu-dropdown,
body[data-theme="high-contrast"] .zoom-controls,
body[data-theme="high-contrast"] .selection-quick-menu,
body[data-theme="high-contrast"] .canvas-context-menu,
body[data-theme="high-contrast"] .custom-color-picker,
body[data-theme="high-contrast"] .modal-card,
body[data-theme="high-contrast"] .dialog-card {
  background: #000;
  border: 2px solid #fff;
  color: #fff;
  box-shadow: none;
}

body[data-theme="high-contrast"] .menu-trigger:hover,
body[data-theme="high-contrast"] .menu.open > .menu-trigger,
body[data-theme="high-contrast"] .menu-dropdown button:hover,
body[data-theme="high-contrast"] .toolbar button:hover,
body[data-theme="high-contrast"] .panel-tab:hover,
body[data-theme="high-contrast"] .zoom-controls button:hover,
body[data-theme="high-contrast"] .selection-quick-menu button:hover,
body[data-theme="high-contrast"] .canvas-context-menu button:hover {
  background: #fff;
  color: #000;
}

body[data-theme="high-contrast"] .toolbar .active,
body[data-theme="high-contrast"] .panel-tab.active,
body[data-theme="high-contrast"] .primary,
body[data-theme="high-contrast"] .logo {
  background: #ffeb00;
  color: #000;
  box-shadow: inset 0 0 0 2px #000;
}

body[data-theme="high-contrast"] .panel-tab.active {
  box-shadow: inset 0 -3px 0 #00ffff;
}

body[data-theme="high-contrast"] input[type="number"],
body[data-theme="high-contrast"] input[type="text"],
body[data-theme="high-contrast"] input[type="url"],
body[data-theme="high-contrast"] select,
body[data-theme="high-contrast"] textarea,
body[data-theme="high-contrast"] .swap-button,
body[data-theme="high-contrast"] .color-picker-trigger,
body[data-theme="high-contrast"] .pathfinder-grid button,
body[data-theme="high-contrast"] .path-editing-grid button {
  background: #000;
  border: 2px solid #fff;
  color: #fff;
}

body[data-theme="high-contrast"] .menu-separator,
body[data-theme="high-contrast"] .toolbar-divider,
body[data-theme="high-contrast"] .quick-menu-divider {
  background: #fff;
}

body[data-theme="high-contrast"] .panel-section,
body[data-theme="high-contrast"] .properties > h2,
body[data-theme="high-contrast"] .panel-view-header,
body[data-theme="high-contrast"] .panel-tabs {
  border-color: #fff;
}

body[data-theme="high-contrast"] .canvas-info,
body[data-theme="high-contrast"] .context-controls label,
body[data-theme="high-contrast"] .panel-section label,
body[data-theme="high-contrast"] .panel-section h3,
body[data-theme="high-contrast"] .pathfinder-hint,
body[data-theme="high-contrast"] .path-editing-hint,
body[data-theme="high-contrast"] .menu-dropdown button span {
  color: #fff;
}

body[data-theme="high-contrast"] .layer-row,
body[data-theme="high-contrast"] .history-step,
body[data-theme="high-contrast"] .history-toolbar button,
body[data-theme="high-contrast"] .canvas-tab {
  background: #000;
  border: 1px solid #fff;
  color: #fff;
}

body[data-theme="high-contrast"] .layer-row:hover,
body[data-theme="high-contrast"] .history-step:hover,
body[data-theme="high-contrast"] .canvas-tab:hover {
  background: #fff;
  color: #000;
}

body[data-theme="high-contrast"] .layer-row.selected,
body[data-theme="high-contrast"] .history-step.current,
body[data-theme="high-contrast"] .canvas-tab.active {
  background: #ffeb00;
  border-color: #ffeb00;
  color: #000;
}

body[data-theme="high-contrast"] .canvas-tabs-bar {
  background: #000;
  border-color: #fff;
}

body[data-theme="high-contrast"] .ruler-corner,
body[data-theme="high-contrast"] .canvas-ruler {
  background: #000;
  border-color: #fff;
}

body[data-theme="high-contrast"] .canvas-guide,
body[data-theme="high-contrast"] .canvas-guide-preview {
  background: #00ffff;
}

body[data-theme="high-contrast"] .anchor-handle.anchor-selected {
  fill: #ffeb00 !important;
  stroke: #000 !important;
}

.theme-menu-item .theme-check {
  display: inline-block;
  width: 14px;
  margin-right: 6px;
}


/* =========================================================
   THEME CONSISTENCY PASS
   Final theme layer: explicit tokens + complete component coverage.
   ========================================================= */

body[data-theme="light"] {
  --ui-bg-0: #f7f8fa;
  --ui-bg-1: #f1f3f5;
  --ui-bg-2: #e9ecf0;
  --ui-bg-3: #ffffff;
  --ui-bg-4: #dde2e8;
  --ui-bg-hover: #dfe4ea;
  --ui-bg-selected: #ede9fe;
  --ui-border: #c2c8d0;
  --ui-border-strong: #9ea7b3;
  --ui-text: #18212f;
  --ui-text-muted: #4b5563;
  --ui-text-dim: #667085;
  --ui-text-disabled: #8a94a3;
  --ui-accent: #6d28d9;
  --ui-accent-soft: #ede9fe;
  --ui-danger: #b42318;
  --ui-focus: #6d28d9;
  --ui-shadow: rgba(15, 23, 42, .18);
  --accent: #6d28d9;
}

body[data-theme="high-contrast"] {
  --ui-bg-0: #000000;
  --ui-bg-1: #000000;
  --ui-bg-2: #080808;
  --ui-bg-3: #000000;
  --ui-bg-4: #1a1a1a;
  --ui-bg-hover: #ffffff;
  --ui-bg-selected: #ffeb00;
  --ui-border: #ffffff;
  --ui-border-strong: #ffffff;
  --ui-text: #ffffff;
  --ui-text-muted: #ffffff;
  --ui-text-dim: #ffffff;
  --ui-text-disabled: #bdbdbd;
  --ui-accent: #ffeb00;
  --ui-accent-soft: #ffeb00;
  --ui-danger: #ff6b6b;
  --ui-focus: #00ffff;
  --ui-shadow: transparent;
  --accent: #ffeb00;
}

/* Root text + native controls */
body[data-theme="light"],
body[data-theme="high-contrast"] {
  color: var(--ui-text) !important;
}

body[data-theme="light"] input,
body[data-theme="light"] select,
body[data-theme="light"] textarea,
body[data-theme="high-contrast"] input,
body[data-theme="high-contrast"] select,
body[data-theme="high-contrast"] textarea {
  background: var(--ui-bg-3) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
  caret-color: var(--ui-text) !important;
}

body[data-theme="light"] input::placeholder,
body[data-theme="light"] textarea::placeholder,
body[data-theme="high-contrast"] input::placeholder,
body[data-theme="high-contrast"] textarea::placeholder {
  color: var(--ui-text-dim) !important;
  opacity: 1;
}

body[data-theme="light"] select option,
body[data-theme="high-contrast"] select option {
  background: var(--ui-bg-3);
  color: var(--ui-text);
}

body[data-theme="light"] input:disabled,
body[data-theme="light"] select:disabled,
body[data-theme="light"] textarea:disabled,
body[data-theme="light"] button:disabled,
body[data-theme="high-contrast"] input:disabled,
body[data-theme="high-contrast"] select:disabled,
body[data-theme="high-contrast"] textarea:disabled,
body[data-theme="high-contrast"] button:disabled {
  color: var(--ui-text-disabled) !important;
  opacity: .72 !important;
}

/* Main application surfaces */
body[data-theme="light"] .menubar,
body[data-theme="light"] .topbar,
body[data-theme="light"] .toolbar,
body[data-theme="light"] .right-sidebar,
body[data-theme="light"] .panel-tabs,
body[data-theme="light"] .properties,
body[data-theme="light"] .properties > h2,
body[data-theme="light"] .panel-section,
body[data-theme="light"] .panel-section-header,
body[data-theme="light"] .canvas-info,
body[data-theme="light"] .canvas-tabs-bar,
body[data-theme="high-contrast"] .menubar,
body[data-theme="high-contrast"] .topbar,
body[data-theme="high-contrast"] .toolbar,
body[data-theme="high-contrast"] .right-sidebar,
body[data-theme="high-contrast"] .panel-tabs,
body[data-theme="high-contrast"] .properties,
body[data-theme="high-contrast"] .properties > h2,
body[data-theme="high-contrast"] .panel-section,
body[data-theme="high-contrast"] .panel-section-header,
body[data-theme="high-contrast"] .canvas-info,
body[data-theme="high-contrast"] .canvas-tabs-bar {
  background: var(--ui-bg-1) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

body[data-theme="light"] .panel-section:hover,
body[data-theme="high-contrast"] .panel-section:hover {
  background: var(--ui-bg-1) !important;
}

/* Menus */
body[data-theme="light"] .menu-trigger,
body[data-theme="light"] .menu-dropdown button,
body[data-theme="high-contrast"] .menu-trigger,
body[data-theme="high-contrast"] .menu-dropdown button {
  color: var(--ui-text) !important;
}

body[data-theme="light"] .menu-dropdown,
body[data-theme="high-contrast"] .menu-dropdown {
  background: var(--ui-bg-3) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
  box-shadow: 0 10px 28px var(--ui-shadow) !important;
}

body[data-theme="light"] .menu-trigger:hover,
body[data-theme="light"] .menu.open > .menu-trigger,
body[data-theme="light"] .menu-dropdown button:hover {
  background: var(--ui-bg-hover) !important;
  color: var(--ui-text) !important;
}

body[data-theme="high-contrast"] .menu-trigger:hover,
body[data-theme="high-contrast"] .menu.open > .menu-trigger,
body[data-theme="high-contrast"] .menu-dropdown button:hover {
  background: #ffffff !important;
  color: #000000 !important;
}

body[data-theme="light"] .menu-dropdown button span,
body[data-theme="high-contrast"] .menu-dropdown button span,
body[data-theme="light"] .theme-check,
body[data-theme="high-contrast"] .theme-check,
body[data-theme="light"] .snap-check,
body[data-theme="high-contrast"] .snap-check {
  color: inherit !important;
}

body[data-theme="light"] .menu-separator,
body[data-theme="high-contrast"] .menu-separator {
  background: var(--ui-border) !important;
}

/* Toolbar + tool SVGs */
body[data-theme="light"] .toolbar button,
body[data-theme="high-contrast"] .toolbar button {
  color: var(--ui-text) !important;
}

body[data-theme="light"] .toolbar button:hover {
  background: var(--ui-bg-hover) !important;
}

body[data-theme="high-contrast"] .toolbar button:hover {
  background: #ffffff !important;
  color: #000000 !important;
}

body[data-theme="light"] .toolbar .active {
  background: var(--ui-accent) !important;
  color: #ffffff !important;
}

body[data-theme="high-contrast"] .toolbar .active {
  background: #ffeb00 !important;
  color: #000000 !important;
  outline: 2px solid #ffffff;
  outline-offset: -2px;
}

body[data-theme="light"] .toolbar-divider,
body[data-theme="high-contrast"] .toolbar-divider {
  background: var(--ui-border) !important;
}

/* Property panel typography */
body[data-theme="light"] .panel-section-toggle,
body[data-theme="light"] .panel-section-title,
body[data-theme="light"] .panel-section-chevron,
body[data-theme="light"] .panel-section label,
body[data-theme="light"] .panel-section h3,
body[data-theme="light"] .align-label,
body[data-theme="light"] .transform-subheading,
body[data-theme="light"] .pathfinder-hint,
body[data-theme="light"] .path-editing-hint,
body[data-theme="high-contrast"] .panel-section-toggle,
body[data-theme="high-contrast"] .panel-section-title,
body[data-theme="high-contrast"] .panel-section-chevron,
body[data-theme="high-contrast"] .panel-section label,
body[data-theme="high-contrast"] .panel-section h3,
body[data-theme="high-contrast"] .align-label,
body[data-theme="high-contrast"] .transform-subheading,
body[data-theme="high-contrast"] .pathfinder-hint,
body[data-theme="high-contrast"] .path-editing-hint {
  color: var(--ui-text-muted) !important;
}

body[data-theme="light"] .panel-section-toggle:hover,
body[data-theme="high-contrast"] .panel-section-toggle:hover {
  color: var(--ui-text) !important;
}

/* Common panel buttons */
body[data-theme="light"] .swap-button,
body[data-theme="light"] .pathfinder-grid button,
body[data-theme="light"] .path-editing-grid button,
body[data-theme="light"] .history-toolbar button,
body[data-theme="light"] .history-footer button,
body[data-theme="light"] .google-font-import-row button,
body[data-theme="light"] .color-tool-button,
body[data-theme="light"] .swatch-clear-button,
body[data-theme="high-contrast"] .swap-button,
body[data-theme="high-contrast"] .pathfinder-grid button,
body[data-theme="high-contrast"] .path-editing-grid button,
body[data-theme="high-contrast"] .history-toolbar button,
body[data-theme="high-contrast"] .history-footer button,
body[data-theme="high-contrast"] .google-font-import-row button,
body[data-theme="high-contrast"] .color-tool-button,
body[data-theme="high-contrast"] .swatch-clear-button {
  background: var(--ui-bg-3) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

body[data-theme="light"] .swap-button:hover,
body[data-theme="light"] .pathfinder-grid button:hover:not(:disabled),
body[data-theme="light"] .path-editing-grid button:hover:not(:disabled),
body[data-theme="light"] .history-toolbar button:hover:not(:disabled),
body[data-theme="light"] .history-footer button:hover,
body[data-theme="light"] .google-font-import-row button:hover,
body[data-theme="light"] .color-tool-button:hover {
  background: var(--ui-bg-hover) !important;
  color: var(--ui-text) !important;
}

body[data-theme="high-contrast"] .swap-button:hover,
body[data-theme="high-contrast"] .pathfinder-grid button:hover:not(:disabled),
body[data-theme="high-contrast"] .path-editing-grid button:hover:not(:disabled),
body[data-theme="high-contrast"] .history-toolbar button:hover:not(:disabled),
body[data-theme="high-contrast"] .history-footer button:hover,
body[data-theme="high-contrast"] .google-font-import-row button:hover,
body[data-theme="high-contrast"] .color-tool-button:hover {
  background: #ffffff !important;
  color: #000000 !important;
}

/* Tabs */
body[data-theme="light"] .panel-tab,
body[data-theme="light"] .canvas-tab,
body[data-theme="light"] .new-canvas-tab,
body[data-theme="high-contrast"] .panel-tab,
body[data-theme="high-contrast"] .canvas-tab,
body[data-theme="high-contrast"] .new-canvas-tab {
  background: var(--ui-bg-2) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text-muted) !important;
}

body[data-theme="light"] .panel-tab:hover,
body[data-theme="light"] .canvas-tab:hover,
body[data-theme="light"] .new-canvas-tab:hover {
  background: var(--ui-bg-hover) !important;
  color: var(--ui-text) !important;
}

body[data-theme="high-contrast"] .panel-tab:hover,
body[data-theme="high-contrast"] .canvas-tab:hover,
body[data-theme="high-contrast"] .new-canvas-tab:hover {
  background: #ffffff !important;
  color: #000000 !important;
}

body[data-theme="light"] .panel-tab.active,
body[data-theme="light"] .canvas-tab.active {
  background: var(--ui-bg-3) !important;
  color: var(--ui-text) !important;
}

body[data-theme="high-contrast"] .panel-tab.active,
body[data-theme="high-contrast"] .canvas-tab.active {
  background: #ffeb00 !important;
  color: #000000 !important;
}

body[data-theme="light"] .canvas-tab-close {
  color: var(--ui-text-dim) !important;
}

body[data-theme="high-contrast"] .canvas-tab-close {
  color: inherit !important;
}

body[data-theme="light"] .canvas-tab-close:hover {
  background: var(--ui-bg-hover) !important;
  color: var(--ui-text) !important;
}

body[data-theme="high-contrast"] .canvas-tab-close:hover {
  background: #000000 !important;
  color: #ffffff !important;
}

body[data-theme="light"] .canvas-tab-rename,
body[data-theme="high-contrast"] .canvas-tab-rename {
  background: var(--ui-bg-3) !important;
  border-color: var(--ui-focus) !important;
  color: var(--ui-text) !important;
}

/* Layers */
body[data-theme="light"] .layer,
body[data-theme="light"] .layer-row,
body[data-theme="light"] .layer-control,
body[data-theme="high-contrast"] .layer,
body[data-theme="high-contrast"] .layer-row,
body[data-theme="high-contrast"] .layer-control {
  background: var(--ui-bg-3) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

body[data-theme="light"] .layer:hover,
body[data-theme="light"] .layer-row:hover {
  background: var(--ui-bg-hover) !important;
}

body[data-theme="high-contrast"] .layer:hover,
body[data-theme="high-contrast"] .layer-row:hover {
  background: #ffffff !important;
  color: #000000 !important;
}

body[data-theme="light"] .layer.selected,
body[data-theme="light"] .layer-row.selected {
  background: var(--ui-accent-soft) !important;
  border-color: var(--ui-accent) !important;
  color: var(--ui-text) !important;
}

body[data-theme="high-contrast"] .layer.selected,
body[data-theme="high-contrast"] .layer-row.selected {
  background: #ffeb00 !important;
  border-color: #ffeb00 !important;
  color: #000000 !important;
}

body[data-theme="light"] .layer-name,
body[data-theme="light"] .layer-icon,
body[data-theme="high-contrast"] .layer-name,
body[data-theme="high-contrast"] .layer-icon {
  color: inherit !important;
}

/* History */
body[data-theme="light"] .history-view,
body[data-theme="light"] .history-panel-header,
body[data-theme="light"] .history-panel-footer,
body[data-theme="light"] .history-toolbar,
body[data-theme="light"] .history-steps,
body[data-theme="high-contrast"] .history-view,
body[data-theme="high-contrast"] .history-panel-header,
body[data-theme="high-contrast"] .history-panel-footer,
body[data-theme="high-contrast"] .history-toolbar,
body[data-theme="high-contrast"] .history-steps {
  background: var(--ui-bg-1) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

body[data-theme="light"] .history-step,
body[data-theme="high-contrast"] .history-step {
  background: var(--ui-bg-3) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
  opacity: 1 !important;
}

body[data-theme="light"] .history-step:hover {
  background: var(--ui-bg-hover) !important;
}

body[data-theme="high-contrast"] .history-step:hover {
  background: #ffffff !important;
  color: #000000 !important;
}

body[data-theme="light"] .history-step.current {
  background: var(--ui-accent-soft) !important;
  border-color: var(--ui-accent) !important;
  color: var(--ui-text) !important;
}

body[data-theme="high-contrast"] .history-step.current {
  background: #ffeb00 !important;
  border-color: #ffeb00 !important;
  color: #000000 !important;
}

body[data-theme="light"] .history-step.future {
  background: var(--ui-bg-2) !important;
  color: var(--ui-text-dim) !important;
  opacity: .82 !important;
}

body[data-theme="high-contrast"] .history-step.future {
  background: #000000 !important;
  color: #bdbdbd !important;
  opacity: 1 !important;
  border-style: dashed !important;
}

body[data-theme="light"] .history-step-label,
body[data-theme="light"] .history-step-detail,
body[data-theme="light"] .history-step-state,
body[data-theme="light"] .history-step-index,
body[data-theme="light"] .history-position-label,
body[data-theme="light"] .history-panel-header p,
body[data-theme="high-contrast"] .history-step-label,
body[data-theme="high-contrast"] .history-step-detail,
body[data-theme="high-contrast"] .history-step-state,
body[data-theme="high-contrast"] .history-step-index,
body[data-theme="high-contrast"] .history-position-label,
body[data-theme="high-contrast"] .history-panel-header p {
  color: inherit !important;
}

/* Dialogs and overlays */
body[data-theme="light"] .modal,
body[data-theme="light"] .modal-card,
body[data-theme="light"] .dialog-card,
body[data-theme="light"] .save-project-dialog,
body[data-theme="light"] .history-dialog,
body[data-theme="light"] .history-titlebar,
body[data-theme="light"] .history-footer,
body[data-theme="high-contrast"] .modal,
body[data-theme="high-contrast"] .modal-card,
body[data-theme="high-contrast"] .dialog-card,
body[data-theme="high-contrast"] .save-project-dialog,
body[data-theme="high-contrast"] .history-dialog,
body[data-theme="high-contrast"] .history-titlebar,
body[data-theme="high-contrast"] .history-footer {
  background: var(--ui-bg-3) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

body[data-theme="light"] .history-titlebar p,
body[data-theme="light"] .history-position-label,
body[data-theme="light"] .export-caveat p,
body[data-theme="high-contrast"] .history-titlebar p,
body[data-theme="high-contrast"] .history-position-label,
body[data-theme="high-contrast"] .export-caveat p {
  color: var(--ui-text-muted) !important;
}

body[data-theme="light"] .history-close,
body[data-theme="high-contrast"] .history-close {
  color: var(--ui-text) !important;
}

body[data-theme="light"] .history-close:hover {
  background: var(--ui-bg-hover) !important;
}

body[data-theme="high-contrast"] .history-close:hover {
  background: #ffffff !important;
  color: #000000 !important;
}

body[data-theme="light"] .export-caveat,
body[data-theme="high-contrast"] .export-caveat {
  background: var(--ui-bg-2) !important;
  border-color: var(--ui-border) !important;
}

body[data-theme="light"] .export-caveat-icon,
body[data-theme="high-contrast"] .export-caveat-icon {
  background: var(--ui-bg-4) !important;
  color: var(--ui-text) !important;
}

/* Custom color picker and swatches */
body[data-theme="light"] .custom-color-picker,
body[data-theme="high-contrast"] .custom-color-picker {
  background: var(--ui-bg-3) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
  box-shadow: 0 18px 45px var(--ui-shadow) !important;
}

body[data-theme="light"] .color-picker-header strong,
body[data-theme="light"] .custom-swatches-header,
body[data-theme="light"] .color-value,
body[data-theme="high-contrast"] .color-picker-header strong,
body[data-theme="high-contrast"] .custom-swatches-header,
body[data-theme="high-contrast"] .color-value {
  color: var(--ui-text) !important;
}

body[data-theme="light"] .color-picker-header button,
body[data-theme="high-contrast"] .color-picker-header button {
  color: var(--ui-text-muted) !important;
}

body[data-theme="light"] .color-picker-header button:hover {
  background: var(--ui-bg-hover) !important;
  color: var(--ui-text) !important;
}

body[data-theme="high-contrast"] .color-picker-header button:hover {
  background: #ffffff !important;
  color: #000000 !important;
}

body[data-theme="light"] .color-picker-trigger,
body[data-theme="high-contrast"] .color-picker-trigger {
  background: var(--ui-bg-3) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

body[data-theme="light"] .color-picker-trigger:hover {
  background: var(--ui-bg-hover) !important;
  border-color: var(--ui-border-strong) !important;
}

body[data-theme="high-contrast"] .color-picker-trigger:hover {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
}

body[data-theme="light"] .custom-swatches-section,
body[data-theme="high-contrast"] .custom-swatches-section {
  border-color: var(--ui-border) !important;
}

body[data-theme="light"] .swatch-clear-button,
body[data-theme="high-contrast"] .swatch-clear-button {
  background: transparent !important;
  border: 0 !important;
  color: var(--ui-text-dim) !important;
}

body[data-theme="light"] .swatch-clear-button:hover,
body[data-theme="high-contrast"] .swatch-clear-button:hover {
  color: var(--ui-text) !important;
}

/* Floating menus */
body[data-theme="light"] .selection-quick-menu,
body[data-theme="light"] .canvas-context-menu,
body[data-theme="light"] .canvas-tab-context-menu,
body[data-theme="high-contrast"] .selection-quick-menu,
body[data-theme="high-contrast"] .canvas-context-menu,
body[data-theme="high-contrast"] .canvas-tab-context-menu {
  background: var(--ui-bg-3) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
  box-shadow: 0 8px 24px var(--ui-shadow) !important;
}

body[data-theme="high-contrast"] .selection-quick-menu,
body[data-theme="high-contrast"] .canvas-context-menu,
body[data-theme="high-contrast"] .canvas-tab-context-menu {
  border-width: 2px !important;
  backdrop-filter: none !important;
}

body[data-theme="light"] .selection-quick-menu button,
body[data-theme="light"] .canvas-context-menu button,
body[data-theme="light"] .canvas-tab-context-menu button,
body[data-theme="high-contrast"] .selection-quick-menu button,
body[data-theme="high-contrast"] .canvas-context-menu button,
body[data-theme="high-contrast"] .canvas-tab-context-menu button {
  background: transparent !important;
  color: var(--ui-text) !important;
}

body[data-theme="light"] .selection-quick-menu button:hover,
body[data-theme="light"] .canvas-context-menu button:hover,
body[data-theme="light"] .canvas-tab-context-menu button:hover {
  background: var(--ui-bg-hover) !important;
  color: var(--ui-text) !important;
}

body[data-theme="high-contrast"] .selection-quick-menu button:hover,
body[data-theme="high-contrast"] .canvas-context-menu button:hover,
body[data-theme="high-contrast"] .canvas-tab-context-menu button:hover {
  background: #ffffff !important;
  color: #000000 !important;
}

body[data-theme="light"] .quick-menu-divider,
body[data-theme="high-contrast"] .quick-menu-divider {
  background: var(--ui-border) !important;
}

/* Zoom controls */
body[data-theme="light"] .zoom-controls,
body[data-theme="high-contrast"] .zoom-controls {
  background: var(--ui-bg-3) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

body[data-theme="light"] .zoom-controls button,
body[data-theme="high-contrast"] .zoom-controls button,
body[data-theme="light"] #zoomLabel,
body[data-theme="high-contrast"] #zoomLabel {
  color: var(--ui-text) !important;
}

/* Scrollbars */
body[data-theme="light"] .properties::-webkit-scrollbar-thumb,
body[data-theme="light"] .right-panel-view::-webkit-scrollbar-thumb {
  background: #aeb6c1 !important;
  border-color: #f1f3f5 !important;
}

body[data-theme="light"] .properties::-webkit-scrollbar-track,
body[data-theme="light"] .right-panel-view::-webkit-scrollbar-track {
  background: #f1f3f5 !important;
}

body[data-theme="high-contrast"] .properties::-webkit-scrollbar-thumb,
body[data-theme="high-contrast"] .right-panel-view::-webkit-scrollbar-thumb {
  background: #ffffff !important;
  border-color: #000000 !important;
}

body[data-theme="high-contrast"] .properties::-webkit-scrollbar-track,
body[data-theme="high-contrast"] .right-panel-view::-webkit-scrollbar-track {
  background: #000000 !important;
}

/* Pasteboard / ruler chrome */
body[data-theme="light"] .canvas-area {
  background: #cbd0d7 !important;
}

body[data-theme="high-contrast"] .canvas-area {
  background: #111111 !important;
}

body[data-theme="light"] .ruler-corner,
body[data-theme="light"] .canvas-ruler,
body[data-theme="high-contrast"] .ruler-corner,
body[data-theme="high-contrast"] .canvas-ruler {
  background: var(--ui-bg-2) !important;
  border-color: var(--ui-border) !important;
}

/* Primary buttons preserve readable text */
body[data-theme="light"] .primary {
  background: var(--ui-accent) !important;
  color: #ffffff !important;
}

body[data-theme="light"] .primary:hover {
  background: #5b21b6 !important;
  color: #ffffff !important;
}

body[data-theme="high-contrast"] .primary {
  background: #ffeb00 !important;
  color: #000000 !important;
  border: 2px solid #ffffff !important;
}

body[data-theme="high-contrast"] .primary:hover {
  background: #ffffff !important;
  color: #000000 !important;
}

/* High-contrast focus visibility */
body[data-theme="high-contrast"] button:focus-visible,
body[data-theme="high-contrast"] input:focus-visible,
body[data-theme="high-contrast"] select:focus-visible,
body[data-theme="high-contrast"] textarea:focus-visible {
  outline: 3px solid #00ffff !important;
  outline-offset: 2px !important;
}

/* Don't let generic theme text rules recolor intentional artwork swatches. */
body[data-theme="light"] .color-swatch,
body[data-theme="high-contrast"] .color-swatch,
body[data-theme="light"] .custom-swatch,
body[data-theme="high-contrast"] .custom-swatch,
body[data-theme="light"] .transparent-swatch,
body[data-theme="high-contrast"] .transparent-swatch {
  color: initial !important;
}


/* =========================================================
   NEW DOCUMENT / STARTUP SETUP
   ========================================================= */
.new-document-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(8, 8, 10, .72);
  backdrop-filter: blur(9px);
}

.new-document-backdrop[hidden] {
  display: none;
}

.new-document-dialog {
  width: min(920px, calc(100vw - 48px));
  max-height: min(760px, calc(100vh - 48px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #49494f;
  border-radius: 14px;
  background: #252529;
  color: #f4f4f5;
  box-shadow: 0 28px 80px rgba(0,0,0,.5);
}

.new-document-titlebar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px 16px;
  border-bottom: 1px solid #3d3d43;
  background: #2b2b30;
}

.new-document-titlebar h2,
.new-document-section h3 {
  margin: 0;
}

.new-document-titlebar h2 {
  font-size: 18px;
}

.new-document-titlebar p,
.new-document-section-heading p {
  margin: 4px 0 0;
  color: #a1a1aa;
  font-size: 11px;
  line-height: 1.4;
}

.new-document-close {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #b4b4bc;
  font-size: 20px;
  cursor: pointer;
}

.new-document-close:hover {
  background: #3a3a40;
  color: #fff;
}

.new-document-body {
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(380px, 1.35fr);
  gap: 0;
}

.new-document-section {
  padding: 20px;
}

.page-setup-section {
  border-right: 1px solid #3d3d43;
}

.new-document-section-heading {
  margin-bottom: 16px;
}

.new-document-section h3 {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.new-document-field {
  display: block;
  margin-bottom: 12px;
  color: #b8b8c0;
  font-size: 11px;
}

.new-document-field > span:first-child {
  display: block;
  margin-bottom: 6px;
}

.new-document-field input[type="text"],
.new-document-field input[type="number"],
.new-document-field select {
  width: 100%;
  min-height: 35px;
  background: #303036;
  border: 1px solid #4a4a52;
  border-radius: 6px;
  color: #f4f4f5;
  padding: 7px 9px;
}

.new-document-size-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 34px minmax(0,1fr);
  gap: 8px;
  align-items: end;
}

.new-document-unit-input {
  position: relative;
}

.new-document-unit-input input {
  padding-right: 34px !important;
}

.new-document-unit-input span {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: #85858f;
  font-size: 10px;
  pointer-events: none;
}

.new-document-swap {
  width: 34px;
  height: 35px;
  margin-bottom: 12px;
  padding: 7px;
  border: 1px solid #4a4a52;
  border-radius: 6px;
  background: #303036;
  color: #c4c4cc;
  cursor: pointer;
}

.new-document-swap:hover {
  background: #393940;
  color: #fff;
}

.new-document-swap svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.new-document-background-row {
  display: grid;
  grid-template-columns: 104px minmax(0,1fr);
  gap: 12px;
  align-items: end;
}

.new-document-field input[type="color"] {
  width: 100%;
  height: 35px;
  background: #303036;
  border-color: #4a4a52;
}

.new-document-checkbox {
  min-height: 35px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  color: #c1c1c8;
  font-size: 11px;
}

.new-document-checkbox input {
  margin: 0;
}

.theme-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}

.theme-preview-card {
  position: relative;
  min-width: 0;
  padding: 7px;
  border: 1px solid #45454c;
  border-radius: 10px;
  background: #2b2b30;
  color: #d8d8df;
  text-align: left;
  cursor: pointer;
}

.theme-preview-card:hover {
  border-color: #686871;
  background: #303036;
}

.theme-preview-card.selected,
.theme-preview-card[aria-checked="true"] {
  border-color: #8b5cf6;
  box-shadow: inset 0 0 0 1px #8b5cf6;
}

.theme-preview-canvas {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 8px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 6px;
}

.theme-preview-menubar {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 13%;
}

.theme-preview-toolbar {
  position: absolute;
  left: 0;
  top: 13%;
  bottom: 0;
  width: 14%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 7px 4px;
}

.theme-preview-toolbar span {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 2px;
}

.theme-preview-artboard {
  position: absolute;
  left: 25%;
  top: 27%;
  width: 48%;
  height: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,.24);
}

.theme-preview-sidebar {
  position: absolute;
  right: 0;
  top: 13%;
  bottom: 0;
  width: 22%;
  padding: 8px 4px;
}

.theme-preview-sidebar span {
  display: block;
  height: 5px;
  margin-bottom: 5px;
  border-radius: 3px;
}

.theme-preview-dark {
  background: #343434;
}
.theme-preview-dark .theme-preview-menubar { background: #202020; }
.theme-preview-dark .theme-preview-toolbar,
.theme-preview-dark .theme-preview-sidebar { background: #242424; }
.theme-preview-dark .theme-preview-toolbar span,
.theme-preview-dark .theme-preview-sidebar span { background: #555; }
.theme-preview-dark .theme-preview-toolbar .active,
.theme-preview-dark .theme-preview-sidebar .accent { background: #7c3aed; }
.theme-preview-dark .theme-preview-artboard { background: #fff; }

.theme-preview-light {
  background: #cbd0d7;
}
.theme-preview-light .theme-preview-menubar { background: #f5f6f8; }
.theme-preview-light .theme-preview-toolbar,
.theme-preview-light .theme-preview-sidebar { background: #f0f1f4; }
.theme-preview-light .theme-preview-toolbar span,
.theme-preview-light .theme-preview-sidebar span { background: #9ba3ae; }
.theme-preview-light .theme-preview-toolbar .active,
.theme-preview-light .theme-preview-sidebar .accent { background: #6d28d9; }
.theme-preview-light .theme-preview-artboard { background: #fff; }

.theme-preview-high-contrast {
  background: #111;
}
.theme-preview-high-contrast .theme-preview-menubar,
.theme-preview-high-contrast .theme-preview-toolbar,
.theme-preview-high-contrast .theme-preview-sidebar { background: #000; }
.theme-preview-high-contrast .theme-preview-toolbar,
.theme-preview-high-contrast .theme-preview-sidebar { border-color: #fff; }
.theme-preview-high-contrast .theme-preview-toolbar span,
.theme-preview-high-contrast .theme-preview-sidebar span { background: #fff; }
.theme-preview-high-contrast .theme-preview-toolbar .active,
.theme-preview-high-contrast .theme-preview-sidebar .accent { background: #ffeb00; }
.theme-preview-high-contrast .theme-preview-artboard {
  background: #fff;
  outline: 1px solid #fff;
}

.theme-preview-label {
  display: block;
  min-width: 0;
  padding-right: 20px;
}

.theme-preview-label strong,
.theme-preview-label small {
  display: block;
}

.theme-preview-label strong {
  margin-bottom: 2px;
  color: inherit;
  font-size: 11px;
}

.theme-preview-label small {
  color: #92929c;
  font-size: 9px;
  line-height: 1.3;
}

.theme-preview-check {
  position: absolute;
  right: 9px;
  bottom: 9px;
  display: none;
  width: 17px;
  height: 17px;
  place-items: center;
  border-radius: 50%;
  background: #8b5cf6;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.theme-preview-card.selected .theme-preview-check,
.theme-preview-card[aria-checked="true"] .theme-preview-check {
  display: grid;
}

.new-document-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 13px 20px;
  border-top: 1px solid #3d3d43;
  background: #2b2b30;
}

.new-document-actions > button {
  min-width: 92px;
  min-height: 34px;
  border: 1px solid #4a4a52;
  border-radius: 6px;
  background: #303036;
  color: #e4e4e7;
  cursor: pointer;
}

.new-document-actions > button:hover {
  background: #3a3a40;
}

.new-document-actions .primary {
  border-color: transparent;
  background: #7c3aed;
  color: #fff;
}

.new-document-actions .primary:hover {
  background: #6d28d9;
}

.new-document-backdrop[data-startup="true"] .new-document-close,
.new-document-backdrop[data-startup="true"] #cancelNewDocument {
  visibility: hidden;
  pointer-events: none;
}

/* New Document modal theme integration */
body[data-theme="light"] .new-document-backdrop {
  background: rgba(71, 82, 98, .42);
}

body[data-theme="light"] .new-document-dialog,
body[data-theme="light"] .new-document-titlebar,
body[data-theme="light"] .new-document-actions,
body[data-theme="light"] .new-document-section {
  background: var(--ui-bg-3) !important;
  color: var(--ui-text) !important;
  border-color: var(--ui-border) !important;
}

body[data-theme="light"] .new-document-titlebar p,
body[data-theme="light"] .new-document-section-heading p,
body[data-theme="light"] .new-document-field,
body[data-theme="light"] .new-document-checkbox,
body[data-theme="light"] .theme-preview-label small {
  color: var(--ui-text-muted) !important;
}

body[data-theme="light"] .theme-preview-card,
body[data-theme="light"] .new-document-swap,
body[data-theme="light"] .new-document-actions > button:not(.primary) {
  background: var(--ui-bg-1) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

body[data-theme="light"] .theme-preview-card:hover,
body[data-theme="light"] .new-document-swap:hover,
body[data-theme="light"] .new-document-actions > button:not(.primary):hover {
  background: var(--ui-bg-hover) !important;
}

body[data-theme="high-contrast"] .new-document-backdrop {
  background: rgba(0,0,0,.88);
  backdrop-filter: none;
}

body[data-theme="high-contrast"] .new-document-dialog,
body[data-theme="high-contrast"] .new-document-titlebar,
body[data-theme="high-contrast"] .new-document-actions,
body[data-theme="high-contrast"] .new-document-section {
  background: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
}

body[data-theme="high-contrast"] .new-document-dialog {
  border-width: 2px;
}

body[data-theme="high-contrast"] .new-document-titlebar p,
body[data-theme="high-contrast"] .new-document-section-heading p,
body[data-theme="high-contrast"] .new-document-field,
body[data-theme="high-contrast"] .new-document-checkbox,
body[data-theme="high-contrast"] .theme-preview-label small {
  color: #fff !important;
}

body[data-theme="high-contrast"] .theme-preview-card,
body[data-theme="high-contrast"] .new-document-swap,
body[data-theme="high-contrast"] .new-document-actions > button:not(.primary) {
  background: #000 !important;
  border: 2px solid #fff !important;
  color: #fff !important;
}

body[data-theme="high-contrast"] .theme-preview-card:hover,
body[data-theme="high-contrast"] .new-document-swap:hover,
body[data-theme="high-contrast"] .new-document-actions > button:not(.primary):hover {
  background: #fff !important;
  color: #000 !important;
}

body[data-theme="high-contrast"] .theme-preview-card.selected,
body[data-theme="high-contrast"] .theme-preview-card[aria-checked="true"] {
  border-color: #ffeb00 !important;
  box-shadow: inset 0 0 0 2px #ffeb00 !important;
}

body[data-theme="high-contrast"] .theme-preview-check {
  background: #ffeb00;
  color: #000;
}

@media (max-width: 820px) {
  .new-document-body {
    grid-template-columns: 1fr;
  }

  .page-setup-section {
    border-right: 0;
    border-bottom: 1px solid #3d3d43;
  }

  .theme-preview-grid {
    grid-template-columns: 1fr;
  }

  .theme-preview-card {
    display: grid;
    grid-template-columns: 120px minmax(0,1fr);
    gap: 10px;
    align-items: center;
  }

  .theme-preview-canvas {
    margin-bottom: 0;
  }
}


/* TOOLBAR GROUPING */
.toolbar {
  gap: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}

.toolbar::-webkit-scrollbar {
  display: none;
}

.toolbar-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.toolbar-group-tools {
  padding-bottom: 2px;
}

.toolbar-group-primitives {
  padding: 2px 0;
}

.toolbar-group-actions {
  padding-top: 2px;
}

.toolbar-group-divider {
  margin: 7px 0;
}

.toolbar-actions-divider {
  margin: 7px 0 5px;
}

body[data-theme="light"] .toolbar-group-divider,
body[data-theme="light"] .toolbar-actions-divider,
body[data-theme="high-contrast"] .toolbar-group-divider,
body[data-theme="high-contrast"] .toolbar-actions-divider {
  background: var(--ui-border) !important;
}

body[data-theme="high-contrast"] .toolbar-group-divider,
body[data-theme="high-contrast"] .toolbar-actions-divider {
  height: 2px;
}


/* N-GON GENERATOR */
.polygon-sides-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(8, 8, 10, .58);
  backdrop-filter: blur(6px);
}

.polygon-sides-backdrop[hidden] {
  display: none;
}

.polygon-sides-dialog {
  width: min(360px, calc(100vw - 36px));
  overflow: hidden;
  border: 1px solid #49494f;
  border-radius: 12px;
  background: #252529;
  color: #f4f4f5;
  box-shadow: 0 22px 60px rgba(0,0,0,.48);
}

.polygon-sides-titlebar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 16px 13px;
  border-bottom: 1px solid #3d3d43;
  background: #2b2b30;
}

.polygon-sides-titlebar h2 {
  margin: 0;
  font-size: 15px;
}

.polygon-sides-titlebar p {
  margin: 3px 0 0;
  color: #a1a1aa;
  font-size: 10px;
}

.polygon-sides-titlebar > button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #aaa;
  font-size: 18px;
  cursor: pointer;
}

.polygon-sides-titlebar > button:hover {
  background: #38383e;
  color: #fff;
}

.polygon-sides-body {
  padding: 16px;
}

.polygon-sides-body > label {
  display: block;
  color: #b9b9c1;
  font-size: 11px;
}

.polygon-sides-body > label > span {
  display: block;
  margin-bottom: 6px;
}

.polygon-sides-input-row {
  display: grid;
  grid-template-columns: 36px minmax(0,1fr) 36px;
  gap: 6px;
}

.polygon-sides-input-row button,
.polygon-sides-input-row input {
  height: 36px;
  border: 1px solid #4a4a52;
  border-radius: 6px;
  background: #303036;
  color: #f4f4f5;
}

.polygon-sides-input-row button {
  cursor: pointer;
  font-size: 17px;
}

.polygon-sides-input-row button:hover {
  background: #3a3a40;
}

.polygon-sides-input-row input {
  width: 100%;
  padding: 6px 8px;
  text-align: center;
  font-weight: 650;
}

.polygon-sides-preview {
  width: 112px;
  height: 112px;
  margin: 15px auto 10px;
  display: grid;
  place-items: center;
  border: 1px solid #3f3f45;
  border-radius: 9px;
  background: #202024;
}

.polygon-sides-preview svg {
  width: 86px;
  height: 86px;
}

.polygon-sides-preview polygon {
  fill: rgba(139, 92, 246, .14);
  stroke: #8b5cf6;
  stroke-width: 2;
  stroke-linejoin: round;
}

.polygon-sides-note {
  margin: 0;
  color: #92929c;
  font-size: 9px;
  line-height: 1.45;
}

.polygon-sides-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  padding: 11px 16px;
  border-top: 1px solid #3d3d43;
  background: #2b2b30;
}

.polygon-sides-actions button {
  min-width: 78px;
  min-height: 32px;
  border: 1px solid #4a4a52;
  border-radius: 6px;
  background: #303036;
  color: #e4e4e7;
  cursor: pointer;
}

.polygon-sides-actions button:hover {
  background: #3a3a40;
}

.polygon-sides-actions .primary {
  border-color: transparent;
  background: #7c3aed;
  color: #fff;
}

body[data-theme="light"] .polygon-sides-dialog,
body[data-theme="light"] .polygon-sides-titlebar,
body[data-theme="light"] .polygon-sides-actions {
  background: var(--ui-bg-3) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

body[data-theme="light"] .polygon-sides-titlebar p,
body[data-theme="light"] .polygon-sides-body > label,
body[data-theme="light"] .polygon-sides-note {
  color: var(--ui-text-muted) !important;
}

body[data-theme="light"] .polygon-sides-input-row button,
body[data-theme="light"] .polygon-sides-input-row input,
body[data-theme="light"] .polygon-sides-actions button:not(.primary),
body[data-theme="light"] .polygon-sides-preview {
  background: var(--ui-bg-1) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

body[data-theme="high-contrast"] .polygon-sides-backdrop {
  background: rgba(0,0,0,.85);
  backdrop-filter: none;
}

body[data-theme="high-contrast"] .polygon-sides-dialog,
body[data-theme="high-contrast"] .polygon-sides-titlebar,
body[data-theme="high-contrast"] .polygon-sides-actions {
  background: #000 !important;
  border-color: #fff !important;
  color: #fff !important;
}

body[data-theme="high-contrast"] .polygon-sides-dialog {
  border-width: 2px;
}

body[data-theme="high-contrast"] .polygon-sides-titlebar p,
body[data-theme="high-contrast"] .polygon-sides-body > label,
body[data-theme="high-contrast"] .polygon-sides-note {
  color: #fff !important;
}

body[data-theme="high-contrast"] .polygon-sides-input-row button,
body[data-theme="high-contrast"] .polygon-sides-input-row input,
body[data-theme="high-contrast"] .polygon-sides-actions button:not(.primary),
body[data-theme="high-contrast"] .polygon-sides-preview {
  background: #000 !important;
  border: 2px solid #fff !important;
  color: #fff !important;
}

body[data-theme="high-contrast"] .polygon-sides-preview polygon {
  fill: rgba(255,235,0,.16);
  stroke: #ffeb00;
}


/* =========================================================
   SEARCHABLE HELP GUIDE
   ========================================================= */
.help-guide-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9400;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(8, 8, 10, .72);
  backdrop-filter: blur(9px);
}

.help-guide-backdrop[hidden] {
  display: none;
}

.help-guide-dialog {
  width: min(1040px, calc(100vw - 44px));
  height: min(760px, calc(100vh - 44px));
  min-height: 420px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #48484f;
  border-radius: 14px;
  background: #252529;
  color: #f4f4f5;
  box-shadow: 0 28px 80px rgba(0,0,0,.52);
}

.help-guide-titlebar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex: 0 0 auto;
  padding: 17px 19px 14px;
  border-bottom: 1px solid #3d3d43;
  background: #2b2b30;
}

.help-guide-titlebar h2 {
  margin: 0;
  font-size: 17px;
}

.help-guide-titlebar p {
  margin: 4px 0 0;
  color: #a1a1aa;
  font-size: 10px;
}

.help-guide-titlebar > button {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #b2b2bb;
  font-size: 20px;
  cursor: pointer;
}

.help-guide-titlebar > button:hover {
  background: #393940;
  color: #fff;
}

.help-guide-searchbar {
  position: relative;
  flex: 0 0 auto;
  padding: 11px 14px;
  border-bottom: 1px solid #3d3d43;
  background: #242428;
}

.help-guide-searchbar input {
  width: 100%;
  min-height: 37px;
  padding: 8px 38px 8px 38px;
  border: 1px solid #4a4a52;
  border-radius: 8px;
  background: #303036;
  color: #f4f4f5;
  outline: none;
}

.help-guide-searchbar input:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 2px rgba(139,92,246,.18);
}

.help-guide-search-icon {
  position: absolute;
  left: 26px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  color: #91919b;
  pointer-events: none;
}

.help-guide-search-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

#clearHelpGuideSearch {
  position: absolute;
  right: 24px;
  top: 50%;
  width: 25px;
  height: 25px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #9999a3;
  cursor: pointer;
}

#clearHelpGuideSearch:hover {
  background: #3b3b41;
  color: #fff;
}

.help-guide-layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 220px minmax(0,1fr);
}

.help-guide-nav {
  min-height: 0;
  overflow-y: auto;
  padding: 10px;
  border-right: 1px solid #3d3d43;
  background: #222226;
}

.help-nav-item {
  width: 100%;
  min-height: 31px;
  margin-bottom: 2px;
  padding: 6px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #aaaab3;
  font-size: 10px;
  text-align: left;
  cursor: pointer;
}

.help-nav-item:hover {
  background: #303035;
  color: #fff;
}

.help-nav-item.active {
  background: #3a2d53;
  color: #f5f3ff;
  box-shadow: inset 2px 0 0 #8b5cf6;
}

.help-guide-content {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  scroll-behavior: smooth;
  padding: 22px 26px 40px;
  background: #29292d;
}

.help-topic {
  max-width: 760px;
  margin: 0 auto 34px;
  padding-bottom: 28px;
  border-bottom: 1px solid #393940;
  scroll-margin-top: 18px;
}

.help-topic:last-of-type {
  border-bottom: 0;
}

.help-topic h3 {
  margin: 0 0 13px;
  color: #fff;
  font-size: 18px;
}

.help-topic h4 {
  margin: 18px 0 5px;
  color: #e4e4e7;
  font-size: 12px;
}

.help-topic p,
.help-topic li {
  color: #b6b6bf;
  font-size: 11px;
  line-height: 1.62;
}

.help-topic p {
  margin: 0 0 9px;
}

.help-topic ol,
.help-topic ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

.help-topic kbd,
.help-shortcut-grid kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 2px 6px;
  border: 1px solid #505058;
  border-bottom-color: #696972;
  border-radius: 5px;
  background: #202024;
  color: #f4f4f5;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.06);
  font: 600 9px/1 system-ui, sans-serif;
}

.help-callout {
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid #494055;
  border-radius: 8px;
  background: rgba(139,92,246,.08);
}

.help-callout strong {
  color: #ddd6fe;
  font-size: 11px;
}

.help-shortcut-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 6px;
}

.help-shortcut-grid > div {
  min-width: 0;
  min-height: 34px;
  display: grid;
  grid-template-columns: 112px minmax(0,1fr);
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid #3d3d43;
  border-radius: 7px;
  background: #252529;
}

.help-shortcut-grid span {
  color: #b7b7c0;
  font-size: 10px;
}

.help-search-summary {
  max-width: 760px;
  margin: 0 auto 18px;
  padding: 9px 11px;
  border: 1px solid #494055;
  border-radius: 7px;
  background: rgba(139,92,246,.07);
  color: #c4b5fd;
  font-size: 10px;
}

.help-topic.search-hidden,
.help-nav-item.search-hidden {
  display: none;
}

.help-topic mark {
  padding: 0 2px;
  border-radius: 2px;
  background: #facc15;
  color: #171717;
}

.help-no-results {
  max-width: 520px;
  margin: 70px auto 0;
  padding: 22px;
  text-align: center;
  color: #d4d4d8;
}

.help-no-results strong {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
}

.help-no-results p {
  margin: 0;
  color: #9999a3;
  font-size: 10px;
  line-height: 1.5;
}

/* Light theme */
body[data-theme="light"] .help-guide-backdrop {
  background: rgba(71,82,98,.42);
}

body[data-theme="light"] .help-guide-dialog,
body[data-theme="light"] .help-guide-titlebar,
body[data-theme="light"] .help-guide-searchbar,
body[data-theme="light"] .help-guide-nav,
body[data-theme="light"] .help-guide-content {
  background: var(--ui-bg-3) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

body[data-theme="light"] .help-guide-nav {
  background: var(--ui-bg-1) !important;
}

body[data-theme="light"] .help-guide-titlebar p,
body[data-theme="light"] .help-topic p,
body[data-theme="light"] .help-topic li,
body[data-theme="light"] .help-shortcut-grid span,
body[data-theme="light"] .help-no-results p {
  color: var(--ui-text-muted) !important;
}

body[data-theme="light"] .help-topic h3,
body[data-theme="light"] .help-topic h4 {
  color: var(--ui-text) !important;
}

body[data-theme="light"] .help-nav-item {
  color: var(--ui-text-muted) !important;
}

body[data-theme="light"] .help-nav-item:hover {
  background: var(--ui-bg-hover) !important;
  color: var(--ui-text) !important;
}

body[data-theme="light"] .help-nav-item.active {
  background: var(--ui-accent-soft) !important;
  color: var(--ui-text) !important;
}

body[data-theme="light"] .help-topic,
body[data-theme="light"] .help-shortcut-grid > div,
body[data-theme="light"] .help-guide-searchbar input {
  border-color: var(--ui-border) !important;
}

body[data-theme="light"] .help-guide-searchbar input,
body[data-theme="light"] .help-shortcut-grid > div {
  background: var(--ui-bg-1) !important;
  color: var(--ui-text) !important;
}

body[data-theme="light"] .help-topic kbd,
body[data-theme="light"] .help-shortcut-grid kbd {
  background: #fff !important;
  border-color: var(--ui-border-strong) !important;
  color: var(--ui-text) !important;
}

body[data-theme="light"] .help-callout,
body[data-theme="light"] .help-search-summary {
  background: var(--ui-accent-soft) !important;
  border-color: #c4b5fd !important;
  color: var(--ui-text) !important;
}

/* High contrast theme */
body[data-theme="high-contrast"] .help-guide-backdrop {
  background: rgba(0,0,0,.9);
  backdrop-filter: none;
}

body[data-theme="high-contrast"] .help-guide-dialog,
body[data-theme="high-contrast"] .help-guide-titlebar,
body[data-theme="high-contrast"] .help-guide-searchbar,
body[data-theme="high-contrast"] .help-guide-nav,
body[data-theme="high-contrast"] .help-guide-content {
  background: #000 !important;
  border-color: #fff !important;
  color: #fff !important;
}

body[data-theme="high-contrast"] .help-guide-dialog {
  border-width: 2px;
}

body[data-theme="high-contrast"] .help-guide-titlebar p,
body[data-theme="high-contrast"] .help-topic p,
body[data-theme="high-contrast"] .help-topic li,
body[data-theme="high-contrast"] .help-shortcut-grid span,
body[data-theme="high-contrast"] .help-no-results p {
  color: #fff !important;
}

body[data-theme="high-contrast"] .help-nav-item {
  color: #fff !important;
}

body[data-theme="high-contrast"] .help-nav-item:hover {
  background: #fff !important;
  color: #000 !important;
}

body[data-theme="high-contrast"] .help-nav-item.active {
  background: #ffeb00 !important;
  color: #000 !important;
  box-shadow: inset 3px 0 0 #00ffff !important;
}

body[data-theme="high-contrast"] .help-guide-searchbar input,
body[data-theme="high-contrast"] .help-shortcut-grid > div,
body[data-theme="high-contrast"] .help-topic kbd,
body[data-theme="high-contrast"] .help-shortcut-grid kbd,
body[data-theme="high-contrast"] .help-callout,
body[data-theme="high-contrast"] .help-search-summary {
  background: #000 !important;
  border: 2px solid #fff !important;
  color: #fff !important;
}

body[data-theme="high-contrast"] .help-topic {
  border-color: #fff !important;
}

body[data-theme="high-contrast"] .help-topic mark {
  background: #ffeb00;
  color: #000;
}

@media (max-width: 760px) {
  .help-guide-layout {
    grid-template-columns: 1fr;
  }

  .help-guide-nav {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid #3d3d43;
  }

  .help-nav-item {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .help-shortcut-grid {
    grid-template-columns: 1fr;
  }
}


/* OFFSET PATH JOIN OPTIONS */
.offset-path-options {
  padding: 0 14px 12px;
}

.offset-path-option {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: #aaaab3;
  font-size: 10px;
}

.offset-path-option select {
  width: 100%;
  min-height: 31px;
  margin: 0;
  padding: 5px 8px;
  border: 1px solid #4a4a52;
  border-radius: 6px;
  background: #303036;
  color: #f4f4f5;
}

body[data-theme="light"] .offset-path-option {
  color: var(--ui-text-muted) !important;
}

body[data-theme="light"] .offset-path-option select {
  background: var(--ui-bg-3) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

body[data-theme="high-contrast"] .offset-path-option {
  color: #fff !important;
}

body[data-theme="high-contrast"] .offset-path-option select {
  background: #000 !important;
  border: 2px solid #fff !important;
  color: #fff !important;
}


/* =========================================================
   VARIABLE-WIDTH STROKE PROFILES
   ========================================================= */
.stroke-profile-presets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin: 6px 0 5px;
}

.stroke-profile-presets button {
  min-width: 0;
  height: 31px;
  padding: 3px 5px;
  border: 1px solid var(--ui-border, #3c3c42);
  border-radius: 5px;
  background: var(--ui-bg-3, #2d2d32);
  color: var(--ui-text-muted, #a1a1aa);
  cursor: pointer;
}

.stroke-profile-presets button:hover {
  border-color: var(--ui-border-strong, #505058);
  background: var(--ui-bg-4, #37373d);
  color: var(--ui-text, #f4f4f5);
}

.stroke-profile-presets button.active {
  border-color: var(--accent, #8b5cf6);
  color: var(--ui-text, #f4f4f5);
  box-shadow: inset 0 0 0 1px var(--accent, #8b5cf6);
}

.stroke-profile-presets svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.stroke-profile-presets svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stroke-profile-presets svg .profile-fill {
  fill: currentColor;
  stroke: none;
}

.stroke-profile-hint {
  margin: 0 0 9px;
  color: var(--ui-text-dim, #777780);
  font-size: 9px;
  line-height: 1.35;
}

[data-stroke-profile-overlay="true"] {
  pointer-events: none;
}

body[data-theme="light"] .stroke-profile-presets button {
  background: var(--ui-bg-3) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text-muted) !important;
}

body[data-theme="light"] .stroke-profile-presets button:hover {
  background: var(--ui-bg-hover) !important;
  color: var(--ui-text) !important;
}

body[data-theme="high-contrast"] .stroke-profile-presets button {
  background: #000 !important;
  border: 2px solid #fff !important;
  color: #fff !important;
}

body[data-theme="high-contrast"] .stroke-profile-presets button:hover {
  background: #fff !important;
  color: #000 !important;
}

body[data-theme="high-contrast"] .stroke-profile-presets button.active {
  background: #ffeb00 !important;
  border-color: #ffeb00 !important;
  color: #000 !important;
  box-shadow: none !important;
}


/* =========================================================
   APPEARANCE RANGE + NUMBER CONTROLS
   ========================================================= */
.appearance-range-field {
  display: block;
  margin-top: 10px;
}

.appearance-range-label {
  display: block;
  margin-bottom: 7px;
  color: var(--ui-text-muted, #aaa);
  font-size: 10px;
}

.appearance-range-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px;
  align-items: center;
  gap: 9px;
}

.appearance-number-wrap {
  min-width: 0;
  height: 30px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--ui-border, #454545);
  border-radius: 6px;
  background: var(--ui-bg-3, #292929);
  transition:
    border-color .12s ease,
    box-shadow .12s ease,
    background .12s ease;
}

.appearance-number-wrap:focus-within {
  border-color: var(--ui-focus, #7c3aed);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-focus, #7c3aed) 20%, transparent);
}

.appearance-number-input {
  width: 100%;
  min-width: 0;
  height: 28px;
  margin: 0 !important;
  padding: 0 3px 0 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--ui-text, #eee) !important;
  font: 500 10px/1 system-ui, sans-serif;
  text-align: right;
  appearance: textfield;
  -moz-appearance: textfield;
}

.appearance-number-input::-webkit-inner-spin-button,
.appearance-number-input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.appearance-number-wrap > span {
  padding: 0 7px 0 3px;
  color: var(--ui-text-dim, #888);
  font-size: 9px;
  pointer-events: none;
}

/* Deliberately scoped so gradient and geometry sliders keep their own UI. */
.app-range {
  --range-progress: 50%;
  width: 100%;
  height: 18px;
  margin: 0 !important;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}

.app-range::-webkit-slider-runnable-track {
  height: 4px;
  border: 1px solid var(--ui-border, #454545);
  border-radius: 999px;
  background:
    linear-gradient(
      to right,
      var(--ui-accent, #7c3aed) 0,
      var(--ui-accent, #7c3aed) var(--range-progress),
      var(--ui-bg-4, #454545) var(--range-progress),
      var(--ui-bg-4, #454545) 100%
    );
}

.app-range::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  margin-top: -6px;
  border: 2px solid var(--ui-bg-3, #292929);
  border-radius: 50%;
  background: var(--ui-accent, #8b5cf6);
  box-shadow:
    0 0 0 1px var(--ui-border-strong, #666),
    0 1px 3px rgba(0, 0, 0, .32);
  appearance: none;
  -webkit-appearance: none;
}

.app-range::-moz-range-track {
  height: 4px;
  border: 1px solid var(--ui-border, #454545);
  border-radius: 999px;
  background: var(--ui-bg-4, #454545);
}

.app-range::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--ui-accent, #8b5cf6);
}

.app-range::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 2px solid var(--ui-bg-3, #292929);
  border-radius: 50%;
  background: var(--ui-accent, #8b5cf6);
  box-shadow:
    0 0 0 1px var(--ui-border-strong, #666),
    0 1px 3px rgba(0, 0, 0, .32);
}

.app-range:focus-visible {
  outline: none !important;
}

.app-range:focus-visible::-webkit-slider-thumb {
  box-shadow:
    0 0 0 2px var(--ui-bg-3, #292929),
    0 0 0 4px var(--ui-focus, #8b5cf6);
}

.app-range:focus-visible::-moz-range-thumb {
  box-shadow:
    0 0 0 2px var(--ui-bg-3, #292929),
    0 0 0 4px var(--ui-focus, #8b5cf6);
}

body[data-theme="light"] .appearance-number-wrap {
  background: var(--ui-bg-3) !important;
  border-color: var(--ui-border) !important;
}

body[data-theme="high-contrast"] .appearance-number-wrap {
  height: 32px;
  border: 2px solid #fff !important;
  background: #000 !important;
}

body[data-theme="high-contrast"] .appearance-number-input,
body[data-theme="high-contrast"] .appearance-number-wrap > span {
  color: #fff !important;
}

body[data-theme="high-contrast"] .app-range::-webkit-slider-runnable-track {
  height: 6px;
  border: 1px solid #fff;
  background:
    linear-gradient(
      to right,
      #ffeb00 0,
      #ffeb00 var(--range-progress),
      #333 var(--range-progress),
      #333 100%
    );
}

body[data-theme="high-contrast"] .app-range::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border: 2px solid #000;
  background: #ffeb00;
  box-shadow: 0 0 0 2px #fff;
}

body[data-theme="high-contrast"] .app-range::-moz-range-track {
  height: 6px;
  border: 1px solid #fff;
  background: #333;
}

body[data-theme="high-contrast"] .app-range::-moz-range-progress {
  height: 6px;
  background: #ffeb00;
}

body[data-theme="high-contrast"] .app-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 2px solid #000;
  background: #ffeb00;
  box-shadow: 0 0 0 2px #fff;
}


/* DASH OFFSET — MATCH APPEARANCE SLIDERS */
.appearance-range-row-single {
  grid-template-columns: minmax(0, 1fr);
}

.stroke-dash-offset-field #strokeDashOffsetValue {
  display: inline-block;
  margin-top: 4px;
  color: var(--ui-text-dim, #888);
  font-size: 9px;
}

body[data-theme="light"] .stroke-dash-offset-field #strokeDashOffsetValue {
  color: var(--ui-text-dim) !important;
}

body[data-theme="high-contrast"] .stroke-dash-offset-field #strokeDashOffsetValue {
  color: #fff !important;
}


/* =========================================================
   THEMED TRANSFORM NUMBER STEPPERS — GRID ALIGNED
   ========================================================= */
.transform-input-stepper {
  height: 30px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 23px;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--ui-border, #444);
  border-radius: 5px;
  background: var(--ui-bg-1, #242424);
}

.transform-number-cell {
  position: relative;
  min-width: 0;
  height: 100%;
}

.transform-input-stepper .transform-number-cell input[type="number"] {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0 27px 0 8px;
  border: 0 !important;
  border-radius: 0 !important;
  outline: none;
  background: transparent !important;
  color: var(--ui-text, #eee);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  appearance: textfield;
  -moz-appearance: textfield;
}

.transform-input-stepper .transform-number-cell input[type="number"]::-webkit-inner-spin-button,
.transform-input-stepper .transform-number-cell input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.transform-input-stepper:focus-within {
  border-color: var(--ui-focus, #7c3aed);
  box-shadow: 0 0 0 1px var(--ui-focus, #7c3aed);
}

.transform-input-stepper .transform-unit {
  position: absolute;
  top: 50%;
  right: 7px;
  transform: translateY(-50%);
  color: var(--ui-text-dim, #777);
  font-size: 9px;
  pointer-events: none;
}

.transform-stepper-buttons {
  position: static;
  width: auto;
  height: auto;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  align-self: stretch;
  overflow: hidden;
  border-left: 1px solid var(--ui-border, #444);
  border-radius: 0;
}

.transform-stepper-buttons button {
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--ui-bg-2, #2c2c2c);
  color: var(--ui-text-dim, #858585);
  cursor: pointer;
  font: 600 6px/1 system-ui, sans-serif;
}

.transform-stepper-buttons button + button {
  border-top: 1px solid var(--ui-border, #444);
}

.transform-stepper-buttons button:hover {
  background: var(--ui-bg-hover, #3a3a3a);
  color: var(--ui-text, #eee);
}

.transform-stepper-buttons button:active {
  background: var(--ui-accent-soft, rgba(124,58,237,.18));
  color: var(--ui-accent, #8b5cf6);
}

.transform-stepper-buttons button:focus-visible {
  position: relative;
  z-index: 1;
  outline: 1px solid var(--ui-focus, #8b5cf6);
  outline-offset: -1px;
}

body[data-theme="light"] .transform-input-stepper {
  background: var(--ui-bg-3) !important;
  border-color: var(--ui-border) !important;
}

body[data-theme="light"] .transform-stepper-buttons {
  border-left-color: var(--ui-border) !important;
}

body[data-theme="light"] .transform-stepper-buttons button {
  background: var(--ui-bg-1) !important;
  color: var(--ui-text-dim) !important;
}

body[data-theme="light"] .transform-stepper-buttons button:hover {
  background: var(--ui-bg-hover) !important;
  color: var(--ui-text) !important;
}

body[data-theme="high-contrast"] .transform-input-stepper {
  height: 30px;
  border: 2px solid #fff !important;
  background: #000 !important;
}

body[data-theme="high-contrast"] .transform-stepper-buttons {
  border-left: 2px solid #fff !important;
}

body[data-theme="high-contrast"] .transform-stepper-buttons button {
  background: #000 !important;
  color: #fff !important;
}

body[data-theme="high-contrast"] .transform-stepper-buttons button + button {
  border-top: 2px solid #fff !important;
}

body[data-theme="high-contrast"] .transform-stepper-buttons button:hover,
body[data-theme="high-contrast"] .transform-stepper-buttons button:active {
  background: #ffeb00 !important;
  color: #000 !important;
}



/* =========================================================
   GLOBAL THEMED NUMBER STEPPERS
   ========================================================= */
.number-stepper-wrap {
  height: 30px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 23px;
  align-items: stretch;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid var(--ui-border, #444);
  border-radius: 5px;
  background: var(--ui-bg-1, #242424);
}

.number-stepper-value {
  position: relative;
  min-width: 0;
  height: 100%;
}

.number-stepper-value input[type="number"] {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0 27px 0 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: var(--ui-text, #eee) !important;
  appearance: textfield;
  -moz-appearance: textfield;
}

.number-stepper-value input[type="number"]::-webkit-inner-spin-button,
.number-stepper-value input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.number-stepper-wrap:focus-within {
  border-color: var(--ui-focus, #7c3aed);
  box-shadow: 0 0 0 1px var(--ui-focus, #7c3aed);
}

.number-stepper-unit {
  position: absolute;
  top: 50%;
  right: 7px;
  transform: translateY(-50%);
  color: var(--ui-text-dim, #777);
  font-size: 9px;
  pointer-events: none;
}

.number-stepper-buttons {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  align-self: stretch;
  overflow: hidden;
  border-left: 1px solid var(--ui-border, #444);
}

.number-stepper-buttons button {
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--ui-bg-2, #2c2c2c);
  color: var(--ui-text-dim, #858585);
  cursor: pointer;
  font: 600 6px/1 system-ui, sans-serif;
}

.number-stepper-buttons button + button {
  border-top: 1px solid var(--ui-border, #444);
}

.number-stepper-buttons button:hover {
  background: var(--ui-bg-hover, #3a3a3a);
  color: var(--ui-text, #eee);
}

.number-stepper-buttons button:active {
  background: var(--ui-accent-soft, rgba(124,58,237,.18));
  color: var(--ui-accent, #8b5cf6);
}

.number-stepper-buttons button:focus-visible {
  position: relative;
  z-index: 1;
  outline: 1px solid var(--ui-focus, #8b5cf6);
  outline-offset: -1px;
}

/* Appearance numeric controls already live in a compact right-hand column. */
.appearance-number-wrap {
  height: auto;
  display: block;
  overflow: visible;
  border: 0;
  background: transparent;
}

.appearance-number-wrap:focus-within {
  border: 0;
  box-shadow: none;
}

.appearance-inline-stepper {
  width: 100%;
}

body[data-theme="light"] .number-stepper-wrap {
  background: var(--ui-bg-3) !important;
  border-color: var(--ui-border) !important;
}

body[data-theme="light"] .number-stepper-buttons {
  border-left-color: var(--ui-border) !important;
}

body[data-theme="light"] .number-stepper-buttons button {
  background: var(--ui-bg-1) !important;
  color: var(--ui-text-dim) !important;
}

body[data-theme="light"] .number-stepper-buttons button:hover {
  background: var(--ui-bg-hover) !important;
  color: var(--ui-text) !important;
}

body[data-theme="high-contrast"] .number-stepper-wrap {
  height: 30px;
  border: 2px solid #fff !important;
  background: #000 !important;
}

body[data-theme="high-contrast"] .number-stepper-buttons {
  border-left: 2px solid #fff !important;
}

body[data-theme="high-contrast"] .number-stepper-buttons button {
  background: #000 !important;
  color: #fff !important;
}

body[data-theme="high-contrast"] .number-stepper-buttons button + button {
  border-top: 2px solid #fff !important;
}

body[data-theme="high-contrast"] .number-stepper-buttons button:hover,
body[data-theme="high-contrast"] .number-stepper-buttons button:active {
  background: #ffeb00 !important;
  color: #000 !important;
}


/* PRIMITIVE VERTEX DRAG */
.primitive-vertex-handle {
  cursor: move;
}

.primitive-vertex-handle:hover {
  stroke-width: 1.5;
}


/* MULTI-VERTEX SELECTION */
.anchor-handle.anchor-selected,
.primitive-vertex-handle.anchor-selected {
  stroke-width: 1.5;
}


/* =========================================================
   LIVE CORNERS — PATH + PRIMITIVE WIDGETS
   ========================================================= */
.corner-round-widget {
  fill: #f59e0b;
  stroke: #1f1f1f;
  stroke-width: 1;
  cursor: pointer;
}

.corner-round-widget:hover,
.corner-round-widget.active {
  fill: #fbbf24;
  stroke: #fff;
}

.corner-round-widget.disabled {
  opacity: .28;
  cursor: default;
}

.path-live-corner-handle {
  fill: #f59e0b;
  stroke: #fff;
  stroke-width: 1;
  cursor: nwse-resize;
}

.path-live-corner-handle:hover {
  fill: #fbbf24;
}

.path-live-corner-line {
  stroke: #f59e0b;
}

body[data-theme="light"] .corner-round-widget {
  stroke: #fff;
}

body[data-theme="high-contrast"] .corner-round-widget,
body[data-theme="high-contrast"] .path-live-corner-handle {
  fill: #ffeb00 !important;
  stroke: #000 !important;
  stroke-width: 2 !important;
}

body[data-theme="high-contrast"] .path-live-corner-line {
  stroke: #ffeb00 !important;
}


/* =========================================================
   SMART GUIDES
   ========================================================= */
.smart-guide {
  stroke: #ff4fd8;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
  shape-rendering: crispEdges;
}

.smart-guide-spacing {
  stroke-dasharray: 3 2;
}

.smart-guide-angle {
  stroke-dasharray: 5 3;
}

.smart-guide-intersection {
  fill: #ff4fd8;
  stroke: #fff;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.smart-guide-label {
  pointer-events: none;
}

.smart-guide-label text {
  fill: #fff;
  font: 600 10px/1 system-ui, sans-serif;
  vector-effect: non-scaling-stroke;
}

.smart-guide-label-bg {
  fill: rgba(116, 20, 98, .94);
  stroke: #ff8ee9;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

body[data-theme="light"] .smart-guide-label text {
  fill: #fff;
}

body[data-theme="high-contrast"] .smart-guide {
  stroke: #ffeb00 !important;
  stroke-width: 2 !important;
}

body[data-theme="high-contrast"] .smart-guide-intersection {
  fill: #ffeb00 !important;
  stroke: #000 !important;
  stroke-width: 2 !important;
}

body[data-theme="high-contrast"] .smart-guide-label-bg {
  fill: #000 !important;
  stroke: #ffeb00 !important;
  stroke-width: 2 !important;
}

body[data-theme="high-contrast"] .smart-guide-label text {
  fill: #ffeb00 !important;
}




.smart-guide-spacing-equal {
  stroke: #22d3ee;
  stroke-width: 1.5;
  stroke-dasharray: none;
}

.smart-guide-label-spacing-equal .smart-guide-label-bg {
  fill: rgba(8, 92, 112, .96);
  stroke: #67e8f9;
}

body[data-theme="high-contrast"] .smart-guide-spacing-equal {
  stroke: #00ffff !important;
  stroke-width: 2 !important;
}


/* =========================================================
   SELECTED OBJECT CENTER MOVE HANDLE
   ========================================================= */
.selected-center-move-handle {
  fill: rgba(139, 92, 246, .92);
  stroke: #fff;
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
  cursor: move;
  pointer-events: all;
}

.selected-center-move-handle:hover {
  fill: #a78bfa;
  stroke-width: 1.75;
}

.selected-center-move-dot {
  fill: #fff;
  vector-effect: non-scaling-stroke;
}

body[data-theme="light"] .selected-center-move-handle {
  stroke: #fff;
}

body[data-theme="high-contrast"] .selected-center-move-handle {
  fill: #ffeb00 !important;
  stroke: #000 !important;
  stroke-width: 2 !important;
}

body[data-theme="high-contrast"] .selected-center-move-dot {
  fill: #000 !important;
}


/* =========================================================
   DRAGGABLE SELECTION QUICK MENU
   ========================================================= */
.selection-quick-menu.quick-menu-manual-position {
  transform: none;
}

.selection-quick-menu .quick-menu-drag-grip {
  width: 20px;
  min-width: 20px;
  height: 27px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  color: #8d8d8d;
  font-size: 15px;
  line-height: 1;
  touch-action: none;
}

.selection-quick-menu .quick-menu-drag-grip:hover {
  color: #fff;
  background: #343434;
}

.selection-quick-menu .quick-menu-drag-grip:active {
  cursor: grabbing;
}

body[data-theme="light"] .selection-quick-menu .quick-menu-drag-grip {
  color: #737b87;
}

body[data-theme="light"] .selection-quick-menu .quick-menu-drag-grip:hover {
  color: #111827;
  background: #e5e7eb;
}

body[data-theme="high-contrast"] .selection-quick-menu .quick-menu-drag-grip {
  color: #ffeb00 !important;
}


/* =========================================================
   FREE DRAW / PENCIL
   ========================================================= */
.free-draw-section .free-draw-smoothing-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: center;
  gap: 8px;
}

.free-draw-smoothing-value {
  color: #b8b8b8;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.free-draw-preview {
  vector-effect: non-scaling-stroke;
}

body[data-theme="light"] .free-draw-smoothing-value {
  color: #5f6875;
}

body[data-theme="high-contrast"] .free-draw-smoothing-value {
  color: #fff;
}


.free-draw-detect-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: #d7d7d7;
  font-size: 11px;
}

.free-draw-detect-toggle input {
  accent-color: #8b5cf6;
}

body[data-theme="light"] .free-draw-detect-toggle {
  color: #374151;
}

body[data-theme="high-contrast"] .free-draw-detect-toggle {
  color: #fff;
}