:root {
  --bg: #0e0e18;
  --bg-1: #141423;
  --bg-2: #1a1a2a;
  --bg-3: #24243a;
  --bg-input: #26263a;
  --bg-input-hi: #32324a;
  --bd: rgba(255,255,255,0.07);
  --bd-hi: rgba(255,120,150,0.3);
  --tx: rgba(255,255,255,0.88);
  --tx-dim: rgba(255,255,255,0.5);
  --tx-faint: rgba(255,255,255,0.3);
  --accent: #ff7898;
  --accent-bg: rgba(255,120,150,0.12);
  --success: #74d681;
  --danger: #ef6f6f;
  --r: 4px;
  --h: 26px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Inter, sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', Consolas, 'Courier New', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body {
  background: var(--bg);
  color: var(--tx);
  font-family: var(--ui);
  font-size: 12px;
  user-select: none;
}

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

/* ---- Top bar ---- */
#topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--s4);
  height: 44px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--bd);
  flex-shrink: 0;
}
#topbar .brand { display: flex; align-items: center; gap: var(--s3); }
#topbar .title-logo {
  height: 22px;
  width: auto;
  aspect-ratio: 100 / 150;
  flex-shrink: 0;
  display: block;
}
#topbar .title {
  font-weight: 600; font-size: 12px; letter-spacing: 2px;
  color: var(--accent);
  font-family: var(--mono);
}
#topbar .gh-link {
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--h);
  padding: 0 10px;
  color: var(--tx-dim);
  background: transparent;
  border: 1px solid var(--bd);
  border-radius: var(--r);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-decoration: none;
  transition: color .12s, border-color .12s, background .12s;
}
#topbar .gh-link:hover {
  color: var(--tx);
  border-color: var(--bd-hi);
  background: var(--bg-input-hi);
}
#topbar .gh-link svg { width: 14px; height: 14px; display: block; }
#topbar button.gh-link {
  cursor: pointer;
  font-family: var(--ui);
}
.changelog-box { width: 600px; max-width: 92vw; }
.changelog-body {
  max-height: 60vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s2) 0;
}
.changelog-entry {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}
.changelog-entry-head {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
}
.changelog-date {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--tx-faint);
  letter-spacing: 0.5px;
}
.changelog-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--accent);
}
.changelog-entry ul {
  margin: 0;
  padding-left: 18px;
  color: var(--tx);
  font-size: 12px;
  line-height: 1.5;
}
.changelog-entry li { margin-bottom: 2px; }
#topbar .gh-stars {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 6px;
  margin-left: 2px;
  border-radius: 10px;
  background: var(--bg-input);
  color: var(--tx);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}
#topbar .gh-stars.hidden { display: none; }
#topbar .gh-stars svg { width: 10px; height: 10px; color: #f1c232; }
#topbar .actions { display: flex; gap: var(--s1); }

/* ---- Buttons (base) ---- */
button {
  background: var(--bg-input);
  color: var(--tx);
  border: 1px solid var(--bd);
  height: var(--h);
  padding: 0 10px;
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  cursor: pointer;
  border-radius: var(--r);
  transition: background .12s, border-color .12s;
  white-space: nowrap;
}
button:hover { background: var(--bg-input-hi); border-color: var(--bd-hi); }
button:active { transform: translateY(1px); }
button.primary { background: var(--accent); color: #1a0010; border-color: var(--accent); font-weight: 600; }
button.primary:hover { background: #ff8fa9; }
button.danger { background: transparent; color: var(--danger); border-color: rgba(239,111,111,0.3); }
button.danger:hover { background: rgba(239,111,111,0.15); border-color: var(--danger); }
button.full { width: 100%; }

/* ---- Main layout ---- */
#main { display: flex; flex: 1; overflow: hidden; min-height: 0; }

#sidebar, #props {
  background: var(--bg-1);
  border-right: 1px solid var(--bd);
  display: flex; flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--bd-hi) transparent;
}
#sidebar::-webkit-scrollbar, #props::-webkit-scrollbar { width: 6px; }
#sidebar::-webkit-scrollbar-thumb, #props::-webkit-scrollbar-thumb { background: var(--bd-hi); border-radius: 3px; }
#sidebar { width: 240px; }
#props   { width: 280px; border-right: none; border-left: 1px solid var(--bd); }

#canvasArea {
  flex: 1; position: relative;
  background: var(--bg);
  display: flex; flex-direction: column;
  min-width: 0;
}
#canvasInner {
  flex: 1; position: relative;
  background: repeating-conic-gradient(rgba(255,255,255,0.04) 0% 25%, rgba(255,255,255,0.015) 0% 50%) 0 0 / 20px 20px;
  cursor: crosshair;
  overflow: hidden;
}
.inline-text-edit {
  position: absolute;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  outline: none;
  color: inherit;
  z-index: 60;
  resize: none;
  overflow: hidden;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
}

#canvasInner.drop-hover::after {
  content: 'Drop to import';
  position: absolute;
  inset: 6px;
  border: 2px dashed var(--accent);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: rgba(255,120,150,0.08);
  pointer-events: none;
  z-index: 50;
}
#svgCanvas { display: block; width: 100%; height: 100%; }
/* Draw axis-aligned rect edges on whole pixels so abutting shapes touch
   without an anti-aliasing seam. Curves (circle/ellipse/path) still get
   the default smooth rendering. */
#svgCanvas rect,
#svgCanvas path[data-rect="1"] { shape-rendering: crispEdges; }

.hint {
  padding: var(--s2) var(--s4);
  background: var(--bg-1);
  font-size: 10px;
  color: var(--tx-faint);
  letter-spacing: 0.5px;
  border-top: 1px solid var(--bd);
  font-family: var(--ui);
}

/* ---- Panel ---- */
.panel {
  border-bottom: 1px solid var(--bd);
  flex-shrink: 0;
}
.panel:last-child { border-bottom: none; }
.panel-head {
  padding: var(--s3) var(--s3) var(--s1);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--tx-dim);
  display: flex; align-items: center; justify-content: space-between;
}
.panel-body {
  padding: var(--s1) var(--s3) var(--s3);
  display: flex; flex-direction: column;
  gap: var(--s1);
}

/* ---- Field (label | control) ---- */
.field {
  display: flex; align-items: center; gap: var(--s2);
  min-height: var(--h);
}
.field-label {
  flex: 0 0 56px;
  font-size: 10px;
  color: var(--tx-dim);
  letter-spacing: 0.3px;
}
.field-ctrl {
  flex: 1;
  display: flex; align-items: center; gap: var(--s1);
  min-width: 0;
}
.field-ctrl > input[type=number],
.field-ctrl > input[type=text] { flex: 1; min-width: 0; }

/* mini inline group: multiple small number inputs inline with pinned labels */
.mini {
  display: flex; align-items: center; gap: 3px;
  background: var(--bg-input);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  padding: 0 6px;
  height: var(--h);
  flex: 1;
}
.mini:focus-within { border-color: var(--bd-hi); }
.mini > span {
  font-size: 9px;
  color: var(--tx-faint);
  font-family: var(--ui);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.mini > input {
  background: transparent;
  border: none;
  color: var(--tx);
  font-family: var(--mono);
  font-size: 11px;
  padding: 0;
  width: 100%;
  min-width: 0;
  outline: none;
}
.mini > input::-webkit-outer-spin-button,
.mini > input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mini > input[type=number] { -moz-appearance: textfield; }

.corner-toggle {
  flex: 0 0 auto;
  height: var(--h);
  width: var(--h);
  padding: 0;
  font-size: 11px;
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.corner-toggle.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #1a0010;
}
.mini > span > .corner-ico {
  width: 11px; height: 11px; display: block;
}

.row { display: flex; align-items: center; gap: var(--s1); }
.row.wrap { flex-wrap: wrap; }

/* ---- Inputs ---- */
input[type=color] {
  width: 28px; height: var(--h);
  border: 1px solid var(--bd); border-radius: var(--r);
  padding: 2px; background: var(--bg-input); cursor: pointer;
}
input[type=color]:hover { border-color: var(--bd-hi); }

/* ---- Color swatch button (replaces native input[type=color]) ---- */
.swatch-btn {
  width: 28px; height: var(--h);
  padding: 3px;
  border: 1px solid var(--bd);
  border-radius: var(--r);
  background: var(--bg-input);
  cursor: pointer;
  flex-shrink: 0;
}
.swatch-btn:hover { border-color: var(--bd-hi); }
.swatch-btn .swatch-fill {
  display: block;
  width: 100%; height: 100%;
  border-radius: 2px;
  background-color: var(--swatch-color, #888);
  background-image:
    linear-gradient(45deg, rgba(255,255,255,0.08) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.08) 75%),
    linear-gradient(45deg, rgba(255,255,255,0.08) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.08) 75%);
  background-size: 8px 8px;
  background-position: 0 0, 4px 4px;
  background-blend-mode: overlay;
}

/* ---- Color popover ---- */
#colorPopover {
  position: fixed;
  width: 208px;
  padding: 10px;
  background: var(--bg-1);
  border: 1px solid var(--bd-hi);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#colorPopover.hidden { display: none; }
.cp-sv {
  position: relative;
  width: 100%; height: 140px;
  border-radius: 3px;
  overflow: hidden;
  cursor: crosshair;
  touch-action: none;
}
.cp-sv-sat, .cp-sv-val { position: absolute; inset: 0; }
.cp-sv-val { background: linear-gradient(to top, #000, transparent); }
.cp-sv-thumb {
  position: absolute;
  width: 10px; height: 10px;
  border: 2px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
  pointer-events: none;
}
.cp-hue {
  position: relative;
  height: 12px;
  border-radius: 6px;
  cursor: pointer;
  touch-action: none;
  background: linear-gradient(to right,
    #ff0000 0%, #ffff00 17%, #00ff00 33%,
    #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
}
.cp-hue-thumb {
  position: absolute;
  top: -2px; bottom: -2px;
  width: 5px;
  border: 1px solid #111;
  border-radius: 3px;
  background: #fff;
  transform: translateX(-50%);
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.3);
}
.cp-row { display: flex; gap: 6px; align-items: center; }
.cp-hex { flex: 1; text-transform: uppercase; min-width: 0; }
.cp-pick {
  width: var(--h); height: var(--h);
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cp-pick svg { width: 14px; height: 14px; }
.cp-palette-label {
  font-size: 9px;
  color: var(--tx-faint);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: 2px;
}
.cp-palette {
  display: flex; flex-wrap: wrap; gap: 3px;
}
.cp-palette-empty {
  font-size: 10px;
  color: var(--tx-faint);
  font-style: italic;
}
.cp-swatch {
  width: 16px; height: 16px;
  padding: 0;
  border-radius: 2px;
  border: 1px solid var(--bd);
  cursor: pointer;
}
.cp-swatch:hover { border-color: #fff; }

body.cp-picking, body.cp-picking * { cursor: crosshair !important; }

input[type=number], input[type=text] {
  background: var(--bg-input);
  color: var(--tx);
  border: 1px solid var(--bd);
  height: var(--h);
  padding: 0 8px;
  font-family: var(--mono);
  font-size: 11px;
  border-radius: var(--r);
  outline: none;
  transition: border-color .12s;
}
input[type=number]:focus, input[type=text]:focus { border-color: var(--bd-hi); }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

input[type=range] { flex: 1; accent-color: var(--accent); }

select {
  background: var(--bg-input);
  color: var(--tx);
  border: 1px solid var(--bd);
  height: var(--h);
  padding: 0 8px;
  font-family: var(--ui);
  font-size: 11px;
  border-radius: var(--r);
  outline: none;
  cursor: pointer;
  min-width: 0;
}
select:focus { border-color: var(--bd-hi); }

textarea {
  background: var(--bg-input);
  color: var(--tx);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  font-family: var(--mono);
  font-size: 11px;
  padding: 6px 8px;
  resize: vertical;
  width: 100%;
  outline: none;
}
textarea:focus { border-color: var(--bd-hi); }

.times { color: var(--tx-faint); font-size: 11px; padding: 0 2px; }

/* ---- Chips (size presets) ---- */
.chips {
  display: flex; flex-wrap: wrap; gap: 3px;
}
.chips button {
  height: 22px; padding: 0 8px;
  font-size: 10px;
  background: transparent;
  border: 1px solid var(--bd);
  color: var(--tx-dim);
}
.chips button:hover { background: var(--bg-input-hi); color: var(--tx); }

/* ---- Floating tool pill (bottom-center of canvas) ---- */
.floating-tools {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 56px;
  display: flex;
  gap: 2px;
  padding: 4px;
  background: rgba(20, 20, 35, 0.92);
  border: 1px solid var(--bd);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
  z-index: 20;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.floating-tools button {
  width: 34px;
  height: 34px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--tx);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background .1s, color .1s, border-color .1s;
}
.floating-tools button:hover:not(.active) {
  background: var(--bg-input-hi);
  color: var(--tx);
}
.floating-tools button.active {
  background: var(--accent);
  color: #1a0010;
  border-color: var(--accent);
}

/* ---- Drawing list ---- */
#iconList {
  display: flex; flex-direction: column;
  gap: 1px;
  max-height: 260px; overflow-y: auto;
  margin: 0 calc(-1 * var(--s3));
  padding: 0 var(--s3);
}
.icon-item {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s1) var(--s2);
  cursor: pointer;
  border-radius: var(--r);
  color: var(--tx-dim);
  font-size: 11px;
}
.icon-item:hover { background: var(--bg-input); color: var(--tx); }
.icon-item:focus { outline: none; box-shadow: inset 0 0 0 1px var(--bd-hi); }
.icon-item:focus-visible { box-shadow: inset 0 0 0 1px var(--accent); }
.icon-item.active {
  background: var(--accent-bg);
  color: var(--accent);
  font-weight: 600;
}
.icon-item .preview {
  width: 22px; height: 22px; flex-shrink: 0;
  background: rgba(255,255,255,0.04);
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  padding: 2px;
}
.icon-item .preview svg { width: 100%; height: 100%; }
.icon-item .meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.icon-item .meta .n { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.icon-item .meta .d { font-size: 9px; color: var(--tx-faint); font-family: var(--mono); }

/* ---- Element list ---- */
#elementList {
  display: flex; flex-direction: column;
  gap: 1px;
  max-height: 180px; overflow-y: auto;
  margin: 0 calc(-1 * var(--s3));
  padding: 0 var(--s3);
}
.elem-item {
  display: flex; align-items: center; gap: var(--s1);
  padding: 3px var(--s2);
  cursor: pointer;
  border-radius: var(--r);
  font-size: 11px;
  color: var(--tx-dim);
  font-family: var(--mono);
  position: relative;
}
.elem-item:hover { background: var(--bg-input); color: var(--tx); }
.elem-item.active {
  background: var(--accent-bg);
  color: var(--accent);
}
.elem-item.is-hidden { opacity: 0.5; }
.elem-item.is-dragging { opacity: 0.4; }
.elem-item.drop-before::before,
.elem-item.drop-after::after {
  content: '';
  position: absolute;
  left: 4px; right: 4px;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
}
.elem-item.drop-before::before { top: -1px; }
.elem-item.drop-after::after  { bottom: -1px; }
.elem-item.drop-into {
  box-shadow: inset 0 0 0 2px var(--accent);
  background: var(--accent-bg);
}
.elem-item .dot {
  width: 10px; height: 10px; border-radius: 2px;
  border: 1px solid rgba(255,255,255,0.15);
  flex-shrink: 0;
}
.elem-item .elem-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.elem-item .layer-icon {
  width: 18px; height: 18px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--tx-faint);
  opacity: 0;
  transition: opacity .1s, color .1s;
  cursor: pointer;
  flex-shrink: 0;
}
.elem-item:hover .layer-icon,
.elem-item .layer-icon.is-on,
.elem-item .layer-icon.is-off { opacity: 1; }
.elem-item .layer-icon:hover { color: var(--tx); background: var(--bg-input-hi); }
.elem-item .layer-icon.is-on  { color: var(--accent); }
.elem-item .layer-icon.is-off { color: var(--tx-faint); }
.elem-item .layer-icon svg { width: 14px; height: 14px; display: block; }
.elem-item .layer-caret {
  width: 14px; height: 14px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  color: var(--tx-faint);
  cursor: pointer;
  flex-shrink: 0;
}
.elem-item .layer-caret:hover { color: var(--tx); }
.elem-item .layer-caret svg { width: 10px; height: 10px; display: block; }
.elem-item .layer-caret.is-leaf { visibility: hidden; }

/* ---- Misc ---- */
.muted { color: var(--tx-faint); font-size: 10px; }
.label { color: var(--tx-dim); font-size: 10px; letter-spacing: 0.3px; }

.path-ref {
  font-size: 9px; color: var(--tx-faint);
  margin-top: var(--s1); line-height: 1.6;
  font-family: var(--mono);
  background: var(--bg-2);
  border-radius: var(--r);
  padding: 6px 8px;
}
.path-ref b { color: var(--accent); }
.path-hint {
  font-size: 10px; color: var(--tx-dim);
  line-height: 1.4;
  background: var(--bg-2);
  border-radius: var(--r);
  padding: 6px 8px;
  margin-bottom: var(--s1);
}

/* ---- Align & distribute toolbar (shown when 2+ selected) ---- */
.align-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  margin-top: var(--s2);
}
.align-btn {
  height: 30px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-2);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  color: var(--tx);
  cursor: pointer;
}
.align-btn:hover:not(.is-disabled) {
  background: var(--bg-input-hi);
  border-color: var(--bd-hi);
  color: var(--accent);
}
.align-btn.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.align-btn svg { width: 16px; height: 16px; display: block; }

/* ---- Property panel specifics ---- */
.act-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  margin-top: var(--s2);
}
.act-row button { padding: 0; font-size: 10px; }

.empty {
  font-size: 10px;
  color: var(--tx-faint);
  padding: var(--s2);
  text-align: center;
  font-style: italic;
}

/* ---- Right-click context menu ---- */
.ctx-menu {
  position: fixed;
  min-width: 180px;
  background: var(--bg-2);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  padding: 4px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ctx-menu.hidden { display: none; }
.ctx-menu button {
  text-align: left;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r);
  color: var(--tx);
  font-family: var(--ui);
  font-size: 11px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  height: auto;
}
.ctx-menu button:hover:not(:disabled) {
  background: var(--bg-input-hi);
  border-color: var(--bd-hi);
}
.ctx-menu button:disabled { opacity: 0.35; cursor: not-allowed; }
.ctx-menu button.danger { color: var(--danger); border-color: transparent; background: transparent; }
.ctx-menu button.danger:hover:not(:disabled) { background: rgba(239,111,111,0.12); border-color: rgba(239,111,111,0.3); }
.ctx-menu .shortcut {
  color: var(--tx-faint);
  font-family: var(--mono);
  font-size: 10px;
}
.ctx-menu .sep {
  height: 1px;
  background: var(--bd);
  margin: 4px 4px;
}

/* ---- Floating tooltip (positioned by JS) ---- */
#hintTip {
  position: fixed;
  background: #0a0a14;
  color: var(--tx);
  border: 1px solid var(--bd-hi);
  border-radius: var(--r);
  padding: 6px 10px;
  font-size: 11px;
  font-family: var(--ui);
  max-width: 280px;
  line-height: 1.4;
  white-space: normal;
  pointer-events: none;
  z-index: 10000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  display: none;
}

/* ---- Dialog ---- */
.dialog {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
}
.dialog.hidden { display: none; }
.dialog-box {
  background: var(--bg-1);
  border: 1px solid var(--bd);
  border-radius: 6px;
  padding: var(--s4);
  width: 500px; max-width: 90vw;
  display: flex; flex-direction: column; gap: var(--s2);
}
.dialog-title {
  font-size: 13px; font-weight: 600; letter-spacing: 1px;
  color: var(--accent);
  margin-bottom: var(--s1);
}
.dialog textarea { height: 180px; }
.dialog .row.end { justify-content: flex-end; margin-top: var(--s2); }
.import-mode {
  border: 1px solid var(--bd);
  border-radius: var(--r);
  padding: var(--s1) var(--s2);
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}
.import-mode label {
  display: flex;
  align-items: center;
  gap: var(--s1);
  font-size: 12px;
  color: var(--tx);
  cursor: pointer;
}
.import-mode input[type=radio] {
  accent-color: var(--accent);
  margin: 0;
}

/* ---- New drawing preset tiles ---- */
.new-size-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: var(--s1);
}
.new-size-tile {
  padding: 10px 6px 8px;
  background: var(--bg-2);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: auto;
  transition: border-color .12s, background .12s, transform .08s;
  color: var(--tx);
  font-family: var(--ui);
}
.new-size-tile:hover {
  border-color: var(--bd-hi);
  background: var(--bg-input-hi);
}
.new-size-tile:active { transform: translateY(1px); }
.new-size-tile.active {
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--accent);
}
.new-size-tile .tile-shape {
  width: 40px; height: 32px;
  display: flex; align-items: center; justify-content: center;
}
.new-size-tile .tile-aspect {
  background: transparent;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  opacity: 0.7;
}
.new-size-tile.active .tile-aspect { opacity: 1; }
.new-size-tile .tile-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.new-size-tile .tile-dim {
  font-size: 9px;
  color: var(--tx-dim);
  font-family: var(--mono);
}
.new-size-tile.active .tile-dim { color: var(--accent); opacity: 0.8; }
.new-size-row {
  display: flex; align-items: center; gap: var(--s1);
  margin-top: var(--s1);
}
.new-size-row .mini { flex: 1; }

/* ---- Export dropdown menu ---- */
.menu-wrap { position: relative; display: inline-block; }
.menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 180px;
  background: var(--bg-2);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 50;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.menu.hidden { display: none; }
.menu-item {
  text-align: left;
  padding: 6px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r);
  color: var(--tx);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s2);
  font-family: var(--ui);
}
.menu-item:hover {
  background: var(--bg-input-hi);
  border-color: var(--bd-hi);
}
.menu-sub {
  font-size: 10px;
  color: var(--tx-faint);
}