/* ============================================================
   SVG Studio — application stylesheet (dark professional theme)
   ============================================================ */

:root {
  --bg:        #1c1d1e;
  --panel:     #181818;
  --panel-2:   #1b1a1a;
  --panel-3:   #1b2330;
  --border:    #2e3031;
  --border-2:  #2e3031;
  --text:      #777777;
  --muted:     #9d9d9d;
  --faint:     #9d9d9d;
  --accent:    #25AEF3;
  --accent-2:  #0090e5;
  --accent-soft: #e0f1f6;
  --amber:     #f5a524;
  --sel:       #f5a524;
  --guide:     #ec4899;
  --danger:    #ef4444;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius: 4px;
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
  --header-h: 52px;
  --status-h: 28px;

  /* Component-level theme tokens (dark defaults) */
  --btn-hover-bg:    #383939;
  --btn-hover-border:#cfcfcf;
  --swatch-outline:  rgba(255, 255, 255, 0.12);
  --swatch-selected: #ffffff;
  --swatch-light-outline: rgba(255, 255, 255, 0.45);
  --code-bg:         #1e1e1e;
  --gutter-bg:       #1e1e1e;
  --gutter-border:   rgba(255, 255, 255, 0.07);
  --gutter-num:      #858585;
  --code-fg:         #d4d4d4;
  --tok-t:           #569cd6;
  --tok-a:           #9cdcfe;
  --tok-s:           #ce9178;
  --tok-c:           #6a9955;
  --tok-p:           #808080;
  --stage-dot:       #1a2230;
  --sb-track:        rgba(16, 22, 32, 0.55);
  --sb-thumb:        #2f2f2f;
  --sb-thumb-hover:  #373737;
  --checker-a:       #1b212b;
  --checker-b:       #12161e;
  --canvas-shadow:   0 8px 40px rgba(0, 0, 0, 0.45);
  --fab-shadow:      0 4px 16px rgba(0, 0, 0, 0.4);
  --status-sep:      #2f2f2f;
  --scroll-thumb:    #2f2f2f;
  --scroll-thumb-hover: #373737;
}

/* ---------- Light theme (system colors) ---------- */
html[data-theme="light"] {
  --bg:        #f7f7f7;
  --panel:     #ffffff;
  --panel-2:   #ffffff;
  --panel-3:   #e8ecf3;
  --border:    #dfe4ed;
  --border-2:  #c9d2e0;
  --text:      #1b2432;
  --muted:     #5a6778;
  --faint:     #8d99ab;
  --accent:    #25AEF3;
  --accent-2:  #0090e5;
  --accent-soft: #e0f1f6;
  --shadow-pop: 0 12px 32px rgba(15, 23, 42, 0.16), 0 2px 8px rgba(15, 23, 42, 0.08);

  --btn-hover-bg:    #eef1f6;
  --btn-hover-border:#b9c4d4;
  --swatch-outline:  rgba(15, 23, 42, 0.18);
  --swatch-selected: #1b2432;
  --swatch-light-outline: rgba(15, 23, 42, 0.4);
  /* Code panel — always Visual-Studio dark, independent of the theme */
  --code-bg:         #1e1e1e;
  --gutter-bg:       #1e1e1e;
  --gutter-border:   rgba(255, 255, 255, 0.07);
  --gutter-num:      #858585;
  --code-fg:         #d4d4d4;
  --tok-t:           #569cd6;
  --tok-a:           #9cdcfe;
  --tok-s:           #ce9178;
  --tok-c:           #6a9955;
  --tok-p:           #808080;
  --stage-dot:       #dde3ec;
  --sb-track:        rgba(226, 232, 240, 0.72);
  --sb-thumb:        #b6c1d2;
  --sb-thumb-hover:  #94a2b8;
  --checker-a:       #e3e8f0;
  --checker-b:       #f5f7fb;
  --canvas-shadow:   0 8px 40px rgba(15, 23, 42, 0.16);
  --fab-shadow:      0 4px 16px rgba(15, 23, 42, 0.14);
  --status-sep:      #c9d2e0;
  --scroll-thumb:    #a7a7a7;
  --scroll-thumb-hover: #b2b2b2;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text);
  background: var(--bg);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

svg { display: block; }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; color: inherit; }

/* ---------- App shell ---------- */
#app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

.app-header {
  height: var(--header-h);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 40;
}

.app-main { flex: 1; display: flex; min-height: 0; position: relative; }

/* ---------- Header widgets ---------- */
.brand { display: flex; align-items: center; gap: 8px; padding-right: 6px; user-select: none; }
.brand-logo { width: 22px; height: 22px; color: var(--accent); }
.brand-name { font-weight: 700; font-size: 14px; letter-spacing: 0.2px; }
.brand-name em { font-style: normal; color: var(--accent); }

.file-name { display: flex; align-items: center; gap: 4px; min-width: 0; }
.file-name input {
  width: 150px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 2px;
  padding: 6px 10px;
  font-size: 12.5px;
  outline: none;
  transition: border-color 0.15s;
}
.file-name input:focus { border-color: var(--accent); }
.file-ext { color: var(--faint); font-family: var(--mono); font-size: 12px; }

.header-spacer { flex: 1; }
.flex-spacer { flex: 1; }

.divider-v { width: 1px; height: 24px; background: var(--border); margin: 0 4px; flex: 0 0 auto; }

.zoom-cluster { display: flex; align-items: center; gap: 2px; }
.zoom-label { min-width: 48px; text-align: center; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

.icon-btn {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  flex: 0 0 auto;
}
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn:hover { background: var(--panel-3); color: var(--text); }
.icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.icon-btn:disabled:hover { background: transparent; color: var(--muted); }

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px;
  padding: 0 12px;
  background: var(--panel-3);
  border: none;
  border-radius: 30px;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
  flex: 0 0 auto;
}
.btn svg { width: 15px; height: 15px; }
.btn:hover { background: var(--btn-hover-bg); border-color: var(--btn-hover-border); }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}
.btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); }

.btn-sm { height: 26px; padding: 0 9px; font-size: 11.5px; gap: 5px; }
.btn-sm svg { width: 13px; height: 13px; }
.btn-block { width: 100%; justify-content: center; }

/* ---------- Recolor popover ---------- */
.recolor-wrap { position: relative; }
.popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 250px;
  background: var(--panel-2);
  border: 1px solid var(--border-2);
  border-radius: 2;
  box-shadow: var(--shadow-pop);
  padding: 12px;
  z-index: 60;
}
.popover-title { margin: 0 0 10px; font-weight: 600; font-size: 12.5px; }
.swatch-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.swatch {
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  outline: 1px solid var(--swatch-outline);
  transition: transform 0.1s, border-color 0.1s;
}
.swatch:hover { transform: scale(1.12); }
.swatch.selected { border-color: var(--swatch-selected); }
#recolorColor {
  width: 30px; height: 26px;
  padding: 0; border: 1px solid var(--border-2);
  border-radius: 6px; background: var(--panel-3); cursor: pointer;
}
.hint { margin: 10px 0 0; color: var(--faint); font-size: 11px; line-height: 1.5; }

/* ---------- Generic panels ---------- */
.panel {
  background: var(--panel);
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 0 0 auto;
}

.panel-head {
  padding: 10px 12px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.panel-head.sub { padding-top: 12px; border-top: 1px solid var(--border); }
.panel-title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: var(--faint);
}

.badge {
  font-family: var(--mono);
  font-size: 10px;
  color: #3a3a3a;
  background: #cfcfcf;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 8px;
}

/* ---------- Library panel ---------- */
.panel-library { width: 224px; min-width: 224px; border-right: 1px solid var(--border); transition: width 0.15s; }
.panel-library.collapsed { display: none; }
.lib-toggle svg { width: 14px; height: 14px; }

/* Library header: search row (form + collapse toggle OUTSIDE the form,
   to its right, inside the sidebar) and the category dropdown stack
   vertically instead of sharing one horizontal row. */
.panel-library .panel-head {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.search-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.search-row .search-wrap { flex: 1 1 auto; min-width: 0; }
.search-row .lib-toggle {
  flex: 0 0 auto;
  width: 28px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--muted);
  border-radius: 8px;
  cursor: pointer;
}
.search-row .lib-toggle:hover { border-color: var(--accent); color: var(--text); }

.search-wrap { position: relative; width: 100%; }
.search-wrap svg {
  position: absolute; left: 9px; top: 50%;
  width: 14px; height: 14px;
  transform: translateY(-50%);
  color: var(--faint);
  pointer-events: none;
}
.search-wrap input {
  width: 100%;
  height: 32px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 0 10px 0 30px;
  font-size: 12.5px;
  outline: none;
  transition: border-color 0.15s;
}
.search-wrap input:focus { border-color: var(--accent); }
.search-wrap input::placeholder { color: var(--faint); }

#categorySelect, .fld select {
  width: 100%;
  height: 30px;
  margin-top: 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 0 8px;
  font-size: 12px;
  color: var(--text);
  outline: none;
  cursor: pointer;
}
#categorySelect:focus, .fld select:focus { border-color: var(--accent); }

.list-meta {
  padding: 6px 12px;
  font-size: 11px;
  color: var(--faint);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}

/* Library icon color — tint previews & icons loaded onto the canvas */
.lib-color-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.lib-color-row .lib-color-label { font-size: 11px; color: var(--muted); }
.lib-color-row .lib-color-note { font-size: 10px; color: var(--faint); margin-left: auto; }
.lib-color-row input[type="color"] {
  width: 30px; height: 24px; padding: 0; margin: 0;
  border: 1px solid var(--border-2); border-radius: 6px;
  background: none; cursor: pointer;
}

/* Text 3D effect controls (tool options + properties) */
.text3d-toggle { padding: 6px 2px; }
.text3d-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
  padding: 2px 0 8px;
}
.text3d-row .text3d-grad { display: contents; }
.text3d-row [data-3d-solid][hidden], .text3d-row .text3d-grad[hidden] { display: none; }

/* Canvas gradient background controls */
.bg-colorline { display: flex; align-items: center; gap: 6px; }
.bg-colorline input[type="color"] { width: 30px; height: 24px; padding: 0; border: 1px solid var(--border-2); border-radius: 6px; background: none; cursor: pointer; }
.bg-colorline input[type="text"] { width: 78px; }

/* Icon grid — 2 tiles per row (same thumbnail size as before), paginated */
.icon-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  align-content: start;
  align-items: start;
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px;
  min-width: 0;
  padding: 6px 3px 5px;
  border-radius: 9px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.12s, border-color 0.12s;
}
.icon-item:hover { background: #fff }
.icon-item.active { background: var(--accent-soft); border-color: rgba(16, 185, 129, 0.4); }

.icon-item .thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  background: #f5f5f5;
  color: #000; /* black glyphs — clearly visible in dark mode */
  border-radius: 4px;
  border: none;
  overflow: hidden;
}
.icon-item .thumb:hover {
    background: #f1f1f1;
}

.icon-item .thumb svg { width: 25px; height: 25px; }
.icon-item .meta { width: 100%; min-width: 0; display: block; text-align: center; }
.icon-item .meta .name {
  font-size: 9.5px; font-weight: 500; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: none;
}
.icon-item .meta .cat { display: none; }

.lib-more {
  grid-column: 1 / -1;
  height: 30px;
  margin-top: 2px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--panel-2);
  border: 1px solid var(--border-2);
  border-radius: 2px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.13s;
}
.lib-more:hover { background: var(--panel-3); color: var(--text); border-color: var(--accent); }
.lib-more svg { width: 13px; height: 13px; }

.list-empty { grid-column: 1 / -1; padding: 24px 12px; text-align: center; color: var(--faint); font-size: 12px; line-height: 1.6; }

/* ---------- Code panel (always editable — highlight underlay + transparent textarea) ---------- */
.code-area {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--code-bg);
}

.code-gutter {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 44px;
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
  background: var(--gutter-bg);
  border-right: 1px solid var(--gutter-border);
}
.code-gutter-inner {
  padding: 8px 0 40px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--gutter-num);
  text-align: right;
  user-select: none;
  will-change: transform;
}
.code-gutter-inner div { padding-right: 12px; font-variant-numeric: tabular-nums; }

.code-highlight {
  position: absolute;
  top: 0; left: 0;
  margin: 0;
  padding: 8px 24px 40px 58px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.6;
  white-space: pre;
  color: var(--code-fg);
  z-index: 1;
  pointer-events: none;
  will-change: transform;
  min-width: 100%;
}
.tok-t { color: var(--tok-t); }
.tok-a { color: var(--tok-a); }
.tok-s { color: var(--tok-s); }
.tok-c { color: var(--tok-c); font-style: italic; }
.tok-p { color: var(--tok-p); }

/* Clickable color cube shown in front of every hex color in the code
   panel, followed by the COMPLETE hex value including the leading `#` as
   normal editable text. Each hex token gets its own relative wrapper
   (.tok-hex); the cube is absolutely positioned one cell to the LEFT of it
   (over the opening quote / separator — zero flow impact), so the line
   stays perfectly aligned with the textarea: the full `#rrggbb` can be
   selected and typed directly (live-applied to the canvas element) and
   clicking the cube (through the caret detection on the textarea) opens
   the standard browser color picker. scale() makes the cube bigger WITHOUT
   touching layout. Several hexes inside one attribute value each get
   their own cube. */
.tok-hex { position: relative; }
.tok-swatch {
  position: absolute;
  left: -1ch;
  top: 50%;
  display: inline-block;
  width: 1ch;
  height: 1.02em;
  border-radius: 0.16em;
  transform: translateY(-50%) scale(1.42);
  box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.55), 0 1px 3px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.code-input.swatch-hover { cursor: pointer; }

.code-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  color: transparent;
  caret-color: var(--accent-2);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.6;
  padding: 8px 24px 40px 58px;
  white-space: pre;
  overflow: auto;
  tab-size: 2;
  z-index: 3;
  user-select: text;
  -webkit-user-select: text;
}
.code-input::selection { background: rgba(16, 185, 129, 0.28); color: transparent; }
.code-input::placeholder { color: var(--faint); }

#codeResize {
  position: absolute;
  top: 0; right: -3px;
  width: 7px; height: 100%;
  cursor: col-resize;
  z-index: 10;
}
#codeResize:hover, #codeResize.dragging { background: rgba(16, 185, 129, 0.25); }

/* ---------- Stage / canvas ---------- */
.stage {
  flex: 1;
  position: relative;
  overflow: hidden;
  background-color: var(--bg);
 /* background-image: radial-gradient(circle, var(--stage-dot) 1px, transparent 1px);*/
  background-size: 24px 24px;
  min-width: 0;
  touch-action: none;
}

/* Custom scrollbars for panning around a large / zoomed canvas */
.stage-scrollbar-x,
.stage-scrollbar-y {
  position: absolute;
  z-index: 30;
  background: var(--sb-track);
  border-radius: 6px;
}
.stage-scrollbar-x {
  left: 10px; right: 10px; bottom: 8px;
  height: 10px;
  cursor: pointer;
}
.stage-scrollbar-y {
  top: 10px; bottom: 10px; right: 8px;
  width: 10px;
  cursor: pointer;
}
.stage-scrollbar-x .sb-thumb,
.stage-scrollbar-y .sb-thumb {
  position: absolute;
  background: var(--sb-thumb);
  border-radius: 5px;
}
.stage-scrollbar-x .sb-thumb { top: 2px; bottom: 2px; left: 0; width: 60px; cursor: pointer; }
.stage-scrollbar-y .sb-thumb { left: 2px; right: 2px; top: 0; height: 60px; cursor: pointer; }
.stage-scrollbar-x .sb-thumb:hover,
.stage-scrollbar-y .sb-thumb:hover { background: var(--sb-thumb-hover); }
.stage-scrollbar-x.dragging .sb-thumb,
.stage-scrollbar-y.dragging .sb-thumb { background: var(--accent); }
.stage-scrollbar-x[hidden], .stage-scrollbar-y[hidden] { display: none; }

/* SVG canvas: never let the browser select glyph text while dragging */
#canvas, #canvas text {
  user-select: none;
  -webkit-user-select: none;
}

/* In-place text editor (double-click on a text element) */
.text-inline-editor {
  position: fixed;
  z-index: 70;
  margin: 0;
  padding: 0;
  background: rgba(245, 165, 36, 0.07);
  border: 1px dashed var(--amber);
  border-radius: 2px;
  outline: none;
  line-height: 1.15;
  white-space: pre;
}

#viewport { position: absolute; top: 0; left: 0; will-change: transform; }

#canvasWrap {
  position: relative;
  outline: 1px solid var(--border-2);
  box-shadow: var(--canvas-shadow);
}
#canvasWrap.bg-checker {
  background: repeating-conic-gradient(var(--checker-a) 0% 25%, var(--checker-b) 0% 50%) 0 0 / 20px 20px;
}
#canvasWrap.bg-white { background: #ffffff; }
#canvasWrap.bg-dark { background: #0f1218; }

#canvas, #overlay { position: absolute; top: 0; left: 0; }
#overlay { pointer-events: none; overflow: visible; }
#overlay .handle { pointer-events: all; cursor: nwse-resize; }
#overlay .handle-rot { pointer-events: all; cursor: grab; }
#overlay .handle-rot:active { cursor: grabbing; }

/* ---------- Rulers (top + left) — mirror the frozen mesh grid ---------- */
.ruler {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 34;
  pointer-events: none;
  overflow: hidden;
  background: var(--panel-2);
}
.ruler-top {
  height: 22px;
  right: 0;
  border-bottom: 1px solid var(--border);
}
.ruler-left {
  width: 22px;
  bottom: 0;
  border-right: 1px solid var(--border);
}
.ruler-corner {
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  z-index: 34;
  pointer-events: none;
  background: var(--panel-2);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.ruler svg { display: block; }
.ruler .rline { stroke: var(--muted); stroke-width: 1; }
.ruler .rline-min { stroke: var(--border-2); stroke-width: 1; }
.ruler .rlabel { fill: var(--muted); font-size: 8.5px; font-weight: 600; font-family: inherit; }
.ruler .rhi { fill: rgba(16, 185, 129, 0.10); }
@media (max-width: 760px) {
  .ruler, .ruler-corner { display: none; }
}

/* ---------- Node tool overlay ---------- */
#overlay .node-anchor { pointer-events: all; cursor: move; }
#overlay .node-handle { pointer-events: all; cursor: crosshair; }
#overlay .node-seg { pointer-events: all; cursor: cell; }

/* Whole bounding-box of an element is clickable (easier selection) */
#content g[data-el-id] { pointer-events: bounding-box; }

/* ---------- Crop tool — full-canvas crop frame ---------- */
.crop-layer {
  position: absolute;
  inset: 0;
  z-index: 25;
  overflow: visible; /* the solid outline hugs the canvas from the outside */
  user-select: none;
  touch-action: none;
}
/* Dimmed area around the frame — four strips (keeps the layer
   overflow-visible so the crop outline can sit outside the canvas). */
.crop-shade {
  position: absolute;
  background: rgba(2, 6, 17, 0.55);
  pointer-events: none;
}
.crop-box {
  position: absolute;
  pointer-events: none;
  /* Solid frame in #24bff5 drawn OUTSIDE the canvas edge — never over
     the canvas pixels and never dashed. */
  outline: 2px solid #24bff5;
  outline-offset: 1px;
}
.crop-h, .crop-c {
  position: absolute;
  background: #24bff5;
  border: 1px solid #0d8fc9;
  border-radius: 4px;
  pointer-events: all;
  touch-action: none;
}
.crop-h { width: 42px; height: 9px; }
.crop-c { width: 13px; height: 13px; border-radius: 4px; }
.crop-h-n { top: 0; left: 50%; transform: translate(-50%, -1px); cursor: ns-resize; }
.crop-h-s { bottom: 0; left: 50%; transform: translate(-50%, 1px); cursor: ns-resize; }
.crop-h-w { left: 0; top: 50%; transform: translate(-1px, -50%); width: 9px; height: 42px; cursor: ew-resize; }
.crop-h-e { right: 0; top: 50%; transform: translate(1px, -50%); width: 9px; height: 42px; cursor: ew-resize; }
.crop-c-nw { top: 0; left: 0; transform: translate(-2px, -2px); cursor: nwse-resize; }
.crop-c-ne { top: 0; right: 0; transform: translate(2px, -2px); cursor: nesw-resize; }
.crop-c-sw { bottom: 0; left: 0; transform: translate(-2px, 2px); cursor: nesw-resize; }
.crop-c-se { bottom: 0; right: 0; transform: translate(2px, 2px); cursor: nwse-resize; }
.crop-h:hover, .crop-c:hover { background: #63d3fa; }
.crop-actions {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  background: var(--panel-2);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  box-shadow: var(--shadow-pop);
  z-index: 3;
}
.crop-size {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 10px;
  border-radius: 7px;
  background: rgba(2, 6, 17, 0.78);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  z-index: 3;
}

/* ---------- Corner radius (properties panel) ---------- */
.corners-row {
  display: flex;
  align-items: flex-end;
  gap: 4px;
}
.corner-fld { flex: 1; min-width: 0; }
.corner-fld input {
  width: 100%;
  height: 28px;
  background: var(--panel-3);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  font-size: 12.5px;
  padding: 0 4px 0 8px;
  outline: none;
  transition: border-color 0.15s;
}
.corner-fld input:focus { border-color: var(--accent); }
.corner-link {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 7px;
}
.corner-link svg { width: 14px; height: 14px; }
.corner-link.active {
  color: var(--accent-2);
  background: var(--accent-soft);
  border-color: rgba(16, 185, 129, 0.45);
}

/* Stroke width per side (properties panel) — same row layout as the
   corner radius control, spanning the full width of the paint grid. */
.props-grid .sw-full { grid-column: 1 / -1; }
.props-grid .sw-row { margin-top: 2px; }

/* ---------- Font dropdown (search + list + upload) ---------- */
.font-host { display: block; }
.font-dd-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 30px;
  padding: 0 8px;
  background: var(--panel-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.font-dd-btn:hover, .font-dd-btn[aria-expanded="true"] { border-color: var(--accent); }
.font-dd-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.font-dd-btn svg { width: 13px; height: 13px; color: var(--faint); flex: 0 0 auto; }
.font-dd-pop {
  position: fixed;
  top: 0;
  left: 0;
  width: 236px;
  padding: 8px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.font-dd-searchwrap { position: relative; }
.font-dd-searchwrap svg {
  position: absolute; left: 8px; top: 50%;
  width: 13px; height: 13px;
  transform: translateY(-50%);
  color: var(--faint);
  pointer-events: none;
}
.font-dd-search {
  width: 100%;
  height: 30px;
  background: var(--panel-3);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  font-size: 12.5px;
  padding: 0 8px 0 27px;
  outline: none;
}
.font-dd-search:focus { border-color: var(--accent); }
.font-dd-list {
  max-height: 218px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--panel-2);
}
.font-dd-group {
  position: sticky;
  top: 0;
  padding: 5px 9px 4px;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--faint);
  background: var(--panel-3);
}
.font-dd-item {
  display: block;
  width: 100%;
  padding: 6px 10px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.font-dd-item:hover { background: var(--panel-3); }
.font-dd-item.active { color: var(--accent-2); background: var(--accent-soft); }
.font-dd-empty { padding: 12px 10px; font-size: 12px; color: var(--faint); text-align: center; }
.font-dd-upload {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  height: 30px;
  background: var(--panel-3);
  border: 1px dashed var(--border-2);
  border-radius: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.font-dd-upload:hover { color: var(--accent-2); border-color: var(--accent); }
.font-dd-upload svg { width: 14px; height: 14px; }

#emptyHint {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  color: var(--faint);
  text-align: center;
  pointer-events: none;
  font-size: 13px;
  line-height: 1.7;
}
#emptyHint svg { width: 42px; height: 42px; opacity: 0.6; }
#emptyHint[hidden] { display: none; }

/* ---------- Tools panel ---------- */
.panel-tools {
  width: 300px;
  border-left: 1px solid var(--border);
  overflow-y: auto;
  overflow-x: hidden;
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 0 12px 4px;
}
.tool-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  height: 56px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.13s;
}
.tool-btn svg { width: 18px; height: 18px; }
.tool-btn:hover { border-color: var(--border-2); color: var(--text); }
.tool-btn.active {
    background: rgb(16 148 185 / 13%);
    border-color: rgb(16 144 185 / 55%);
    color: #000000;
}

.tool-options, .properties, .canvas-settings { padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 8px; }

.tool-grid-label { font-size: 11px; color: var(--muted); margin: 2px 0; }
.shape-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.shape-btn {
  height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.13s;
}
.shape-btn svg { width: 20px; height: 20px; }
.shape-btn:hover { color: var(--text); border-color: var(--border-2); }
.shape-btn.active {
  background: rgb(16 148 185 / 13%);
    border-color: rgb(16 144 185 / 55%);
    color: #000000;
}

.form-row { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.fld {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; color: var(--muted);
  flex: 1; min-width: 70px;
}
.fld input[type="number"], .fld input[type="text"], .fld select, .fld textarea {
  height: 30px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 0 8px;
  font-size: 12px;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
}
.fld textarea { height: 58px; padding: 6px 8px; resize: vertical; min-height: 40px; }
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--accent); }

.fld input[type="color"] {
  width: 100%; height: 30px;
  padding: 2px 3px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 7px;
  cursor: pointer;
}
.fld input[type="range"] { width: 100%; accent-color: var(--accent); }

.props-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.props-grid .fld.wide { grid-column: 1 / -1; }

.empty-note { color: var(--faint); font-size: 12px; margin: 4px 0 0; }

.sel-name {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600;
  color: var(--amber);
}
.sel-name .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sel); }

.align-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.align-btn {
  height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--muted);
  cursor: pointer;
}
.align-btn svg { width: 15px; height: 15px; }
.align-btn:hover { color: var(--text); border-color: var(--border-2); }

.check-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.check-row input { accent-color: var(--accent); }

/* ---------- Status bar (sticky footer) ---------- */
.statusbar {
  height: var(--status-h);
  flex: 0 0 auto;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  background: var(--panel);
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--muted);
  user-select: none;
}
.status-right { display: flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; }
.status-sep { color: var(--status-sep); }
#statusHint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#statusSel.has-sel { color: var(--amber); font-weight: 600; }

/* ---------- Context menu ---------- */
.ctx-menu {
  position: fixed;
  min-width: 210px;
  background: var(--panel-2);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  box-shadow: var(--shadow-pop);
  padding: 5px;
  z-index: 100;
}
.ctx-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
  cursor: pointer;
  text-align: left;
}
.ctx-item:hover { background: var(--accent-soft); }
.ctx-item.danger { color: var(--danger); }
.ctx-item.danger:hover { background: rgba(239, 68, 68, 0.12); }
.ctx-item kbd {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--faint);
  background: var(--panel-3);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
}
.ctx-item:disabled { opacity: 0.4; cursor: not-allowed; }
.ctx-sep { height: 1px; background: var(--border); margin: 5px 6px; }

/* ---------- Toasts ---------- */
#toasts {
  position: fixed;
  right: 16px;
  bottom: calc(var(--status-h) + 14px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 120;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--panel-2);
  border: 1px solid var(--border-2);
  border-left: 3px solid var(--accent);
  border-radius: 9px;
  padding: 9px 14px;
  font-size: 12.5px;
  box-shadow: var(--shadow-pop);
  animation: toast-in 0.22s ease;
  max-width: 320px;
}
.toast.error { border-left-color: var(--danger); }
.toast.out { animation: toast-out 0.25s ease forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }

/* ---------- Floating stage buttons (Code / Tools) ---------- */
.stage-fab {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 35;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 13px;
  background: var(--panel-2);
  border: 1px solid var(--border-2);
  border-radius: 9px;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--fab-shadow);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.stage-fab svg { width: 15px; height: 15px; }
.stage-fab:hover { background: var(--panel-3); border-color: var(--btn-hover-border); }
.stage-fab.active {
  background: var(--accent-soft);
  border-color: rgba(16, 185, 129, 0.55);
  color: var(--accent-2);
}
.stage-fab.right { left: auto; right: 28px; }
.stage-fab.below { top: 54px; }

/* ---------- Stage docks (bottom-left zoom, bottom-right background) ---------- */
.stage-dock {
  position: absolute;
  bottom: 12px;
  z-index: 35;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  background: var(--panel-2);
  border: 1px solid var(--border-2);
  border-radius: 30px;
  box-shadow: var(--fab-shadow);
}
.stage-dock.center { left: 50%; transform: translateX(-50%); }
.stage-dock.right { right: 12px; }

.dock-btn {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  padding: 0;
}
.dock-btn svg { width: 16px; height: 16px; }
.dock-btn:hover { background: var(--panel-3); color: var(--text); }
.dock-btn.active { background: var(--accent-soft); color: var(--accent-2); border-color: #1090b98c; }
.dock-btn.custom { position: relative; overflow: hidden; }
.dock-btn.custom input[type="color"] {
  position: absolute; inset: -4px;
  width: calc(100% + 8px); height: calc(100% + 8px);
  border: none; padding: 0; cursor: pointer; background: transparent;
}
.dock-sep { width: 1px; height: 16px; background: var(--border); margin: 0 3px; flex: 0 0 auto; }
.dock-wrap { position: relative; display: inline-flex; }

/* Canvas-size dropdown — opens UPWARD above the bottom dock. */
.canvas-size-pop {
  top: auto;
  bottom: calc(100% + 12px);
  right: 0;
  left: auto;
  width: 248px;
}

/* Size dropdowns (icon size + canvas size): Width / Height side by side
 * in the same horizontal row, with Apply right next to them. */
.size-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
.size-fld {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--faint);
}
.size-fld input {
  width: 100%;
  height: 28px;
  background: var(--panel-3);
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--text);
  font-size: 12.5px;
  padding: 0 8px;
  outline: none;
  transition: border-color 0.15s;
}
.size-fld input:focus { border-color: var(--accent); }
.size-row .btn { flex: 0 0 auto; }
.size-pop .hint, .canvas-size-pop .hint { margin: 9px 0 0; }

/* Icon-size dropdown — opens below the code toolbar (like colors-pop). */
.size-pop {
  top: 32px;
  right: auto;
  left: 0;
  width: 248px;
}

/* ---------- Export format bar (top edge of the stage) ---------- */
.export-bar {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 36;
  display: flex;
  align-items: center;
  gap: 5px;
}
.export-btn {
  height: 30px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 11px;
  background: var(--panel-2);
  border: 1px solid var(--border-2);
  border-radius: 30px;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--fab-shadow);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.export-btn svg { width: 14px; height: 14px; color: var(--muted); }
.export-btn:hover { background: var(--panel-3); border-color: var(--btn-hover-border); }
.export-btn.active {
  background: var(--accent-soft);
  border-color: rgba(16, 185, 129, 0.55);
  color: var(--accent-2);
}
.export-btn.active svg { color: var(--accent-2); }

/* ---------- Stage export views (React / RN / PNG / Data URI) ---------- */
.stage-view {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding: 52px 14px 14px;
  gap: 10px;
  overflow: auto;
}
.stage-view[hidden] { display: none; }

.view-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.view-title { font-size: 13px; font-weight: 700; letter-spacing: 0.2px; }
.view-title span { color: var(--muted); font-weight: 500; font-size: 11.5px; margin-left: 8px; }
.view-actions { display: flex; gap: 6px; margin-left: auto; }

.code-view {
  flex: 1;
  min-height: 0;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
  color: var(--code-fg);
  white-space: pre;
  overflow: auto;
  margin: 0;
}

/* PNG / raster view */
.raster-controls {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}
.raster-controls .fld { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--muted); }
.raster-controls .fld input, .raster-controls .fld select {
  height: 30px;
  width: 92px;
  background: var(--panel-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 0 8px;
  font-size: 12.5px;
  outline: none;
}
.raster-controls .fld input:focus, .raster-controls .fld select:focus { border-color: var(--accent); }
.raster-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-conic-gradient(var(--checker-a) 0% 25%, var(--checker-b) 0% 50%) 0 0 / 20px 20px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.raster-stage img { max-width: 96%; max-height: 96%; object-fit: contain; box-shadow: 0 8px 30px rgba(0,0,0,0.45); }
.raster-note { font-size: 11px; color: var(--faint); flex: 0 0 auto; }

/* Data URI cards */
.du-list { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; overflow: auto; padding-bottom: 4px; }
.du-card {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: copy;
  transition: border-color 0.15s, background 0.15s;
}
.du-card:hover { border-color: rgba(16, 185, 129, 0.55); background: var(--panel-3); }
.du-card .du-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.du-card .du-name { font-size: 12px; font-weight: 700; color: var(--text); }
.du-card .du-size { font-size: 10.5px; color: var(--faint); font-family: var(--mono); }
.du-card .du-copy { margin-left: auto; font-size: 10.5px; font-weight: 600; color: var(--accent-2); opacity: 0; transition: opacity 0.15s; }
.du-card:hover .du-copy { opacity: 1; }
.du-card pre {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--code-fg);
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 96px;
  overflow: auto;
}

/* Solid background modes */
#canvasWrap.bg-black { background: #000000; }

/* ---------- Editable code panel ---------- */
.panel-code {
  width: 340px;
  min-width: 220px;
  max-width: 620px;
  border-right: 1px solid var(--border);
  position: relative;
  background: var(--code-bg);
}
.panel-code.collapsed { display: none; }

.code-head { border-bottom: 1px solid var(--border); }
#codeToggle svg { transition: transform 0.2s; }

/* ---------- Collapsible tools panel ---------- */
.panel-tools.collapsed { display: none; }

/* ---------- White swatch (visible on any UI theme) ---------- */
.swatch-light { outline: 1px solid var(--swatch-light-outline) !important; }

/* ---------- Theme toggle (sun / moon) ---------- */
#btnTheme .theme-ic-moon { display: none; }
html[data-theme="light"] #btnTheme .theme-ic-sun { display: none; }
html[data-theme="light"] #btnTheme .theme-ic-moon { display: block; }

/* ---------- Live-code invalid indicator ---------- */
.badge.invalid {
  color: #f87171;
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.45);
}
html[data-theme="light"] .badge.invalid {
  color: #b91c1c;
  background: rgba(239, 68, 68, 0.08);
}

/* ---------- Error pages ---------- */
.error-page {
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px;
  text-align: center;
}
.error-code { font-family: var(--mono); font-size: 64px; font-weight: 700; color: var(--accent); margin: 0; }
.error-page h1 { margin: 0 0 6px; font-size: 22px; }
.error-path { color: var(--muted); font-family: var(--mono); font-size: 12.5px; }
.error-page .btn { margin-top: 16px; text-decoration: none; display: inline-flex; }

/* ---------- Scrollbars ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 8px; border: 2px solid var(--panel); }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }
* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }


/* ---------- Code toolbar (rotate / flip / colors / size) ---------- */
.code-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
/* lines badge sits LEFT of the rotate button inside the toolbar */
.code-toolbar .code-count-badge {
  margin-right: 8px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.tb-btn {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #969696;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  padding: 0;
}
.tb-btn svg { width: 15px; height: 15px; }
.tb-btn:hover:not(:disabled) { background: var(--panel-3); color: var(--text); }
.tb-btn:disabled { opacity: 0.35; cursor: default; }
.tb-btn.active { background: var(--accent-soft); color: var(--accent-2); border-color: rgba(16, 185, 129, 0.45); }
.tb-wrap { position: relative; display: inline-flex; }
.colors-pop {
  position: absolute;
  top: 30px; left: 0;
  width: 240px;
  max-height: 260px;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.colors-pop .colors-empty { font-size: 11px; color: var(--faint); margin: 2px; }
.color-row { display: flex; align-items: center; gap: 6px; }
.color-swatch { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--border-2); flex: 0 0 auto; }
.color-hex {
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 0 auto;
}
.color-input {
  flex: 1; height: 26px; min-width: 0;
  background: var(--panel-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 11.5px; font-family: var(--mono);
  padding: 0 6px; outline: none;
}
.color-input:focus { border-color: var(--accent); }
.color-row input[type="color"] {
  width: 26px; height: 26px; padding: 2px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--panel-3); cursor: pointer; flex: 0 0 auto;
}

/* ---------- Library footer (Contact / More) ---------- */
.lib-foot {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-top: 1px solid var(--border);
  flex: 0 0 auto;
}
.lib-foot-btn {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  background: transparent; border: none; color: var(--muted);
  font-size: 9.5px; cursor: pointer; padding: 3px 7px; border-radius: 7px;
  transition: background 0.15s, color 0.15s;
}
.lib-foot-btn svg { width: 15px; height: 15px; }
.lib-foot-btn:hover { background: var(--panel-3); color: var(--text); }
.more-wrap { position: relative; }
.more-pop {
    position: absolute;
    top: calc(-390% + 0px);
    left: calc(100% - 1px);
    right: auto;
    width: 160px;
    padding: 5px;
}
.more-item {
  display: block; width: 100%; text-align: left;
  background: transparent; border: none; color: var(--text);
  font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 8px 9px; border-radius: 7px;
}
.more-item:hover { background: var(--panel-3); }

/* ---------- Code panel library toggle (top-left when sidebar collapsed) ---------- */
.code-lib-toggle { margin-right: 2px; }
.code-lib-toggle svg { width: 14px; height: 14px; }

/* ---------- Editor modals (size / canvas size / contact) ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(4, 6, 10, 0.62);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-overlay[hidden] { display: none; }
.modal {
  width: min(410px, 100%);
  background: var(--panel-2);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column;
  max-height: min(86vh, 640px);
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
}
.modal-head h3 { margin: 0; font-size: 14.5px; }
.modal-body { padding: 14px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--border);
}
.modal .field { display: flex; flex-direction: column; gap: 5px; }
.modal .field label { font-size: 11px; color: var(--muted); font-weight: 600; }
.fld-input {
  width: 100%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--text);
  padding: 8px 10px;
  font-size: 13px;
  outline: none;
  font-family: inherit;
  resize: vertical;
}
.fld-input:focus { border-color: var(--accent); }


/* ---------- Browse / category pages (public SEO grid) ---------- */
.browse-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 18px 16px 40px;
}
.browse-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.browse-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
}
.browse-brand svg { width: 20px; height: 20px; color: var(--accent-2); }
.browse-brand em { color: var(--accent-2); font-style: normal; }
.browse-nav { display: flex; gap: 6px; }
.browse-nav-link {
  color: var(--muted);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 11px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  transition: background 0.15s, color 0.15s;
}
.browse-nav-link:hover { color: var(--text); background: var(--panel-3); }
.browse-nav-link.active { color: var(--accent-2); border-color: rgba(16, 185, 129, 0.45); background: var(--accent-soft); }
.browse-search {
  position: relative;
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.browse-search svg {
  position: absolute; left: 11px; top: 50%;
  width: 15px; height: 15px;
  transform: translateY(-50%);
  color: var(--faint);
  pointer-events: none;
}
.browse-search input {
  flex: 1;
  height: 40px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 12px 0 34px;
  font-size: 13.5px;
  color: var(--text);
  outline: none;
}
.browse-search input:focus { border-color: var(--accent); }
.btn-search {
  height: 40px;
  padding: 0 16px;
  background: var(--accent-soft);
  color: var(--accent-2);
  border: 1px solid rgba(16, 185, 129, 0.45);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.btn-search:hover { filter: brightness(1.08); }
.browse-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.cat-chip {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  transition: background 0.15s, color 0.15s;
}
.cat-chip:hover { color: var(--text); background: var(--panel-3); }
.cat-chip.active { color: var(--accent-2); border-color: rgba(16, 185, 129, 0.45); background: var(--accent-soft); }
.browse-count { font-size: 12px; color: var(--faint); margin: 0 0 12px; }
.browse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 10px;
}
.svg-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.svg-card:hover { border-color: rgba(16, 185, 129, 0.55); background: var(--panel-3); transform: translateY(-2px); }
.svg-thumb { display: flex; align-items: center; justify-content: center; height: 52px; color: var(--text); }
.svg-thumb svg { width: 42px; height: 42px; }
.svg-name {
  font-size: 11.5px;
  font-weight: 600;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.svg-cat { font-size: 9.5px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.4px; }
.browse-empty { padding: 40px 10px; text-align: center; color: var(--muted); font-size: 13.5px; }
.browse-empty a { color: var(--accent-2); }
.browse-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}
.pager-btn {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
}
.pager-btn:hover { background: var(--panel-3); }
.pager-btn.disabled { opacity: 0.4; pointer-events: none; }
.pager-btn.current {
  color: var(--accent-2);
  border-color: rgba(16, 185, 129, 0.45);
  background: var(--accent-soft);
  pointer-events: none;
}
.pager-ellipsis { font-size: 12px; color: var(--faint); padding: 0 1px; user-select: none; }
.pager-info { font-size: 12px; color: var(--faint); }

/* Public pages (browse / category) scroll the whole document normally —
   the app-shell overflow lock only applies to the editor screen. */
body.page-public { overflow-y: auto; overflow-x: hidden; }
.browse-footer { margin-top: 30px; text-align: center; font-size: 12px; color: var(--faint); }
.browse-footer a { color: var(--accent-2); }

/* ---------- Mobile nav & responsive ---------- */
.mobile-nav { display: none; gap: 2px; }

@media (max-width: 1400px) {
  .panel-code { width: 290px; }
  .panel-library { width: 216px; min-width: 216px; }
  .panel-tools { width: 280px; }
  .file-name input { width: 110px; }
}

@media (max-width: 1080px) {
  .mobile-nav { display: flex; }
  .file-name { display: none; }

  .panel-library, .panel-code, .panel-tools {
    position: absolute;
    top: 0; bottom: 0;
    z-index: 50;
    box-shadow: var(--shadow-pop);
    transition: transform 0.22s ease;
    width: 300px;
  }
  .panel-library { left: 0; transform: translateX(-105%); }
  .panel-code { left: 0; transform: translateX(-105%); width: 320px; }
  .panel-tools { right: 0; left: auto; transform: translateX(105%); }
  .panel-library.open, .panel-code.open, .panel-tools.open { transform: translateX(0); }
  .panel-library.collapsed { display: flex; } /* mobile drawer ignores desktop collapse */
  .panel-tools.collapsed { display: flex; } /* mobile drawer ignores desktop collapse */
  .stage-fab span { display: none; }
  .stage-fab { padding: 0 10px; }
  .export-btn span { display: none; }
  .export-btn { padding: 0 9px; }
  .stage-view { padding: 52px 10px 10px; }

  #codeResize { display: none; }
  .btn span { display: none; }
  .btn { padding: 0 9px; }
}

@media (max-width: 640px) {
  .zoom-label { display: none; }
  .statusbar .status-left { display: none; }
  .panel-library, .panel-code, .panel-tools { width: min(84vw, 320px); }
}

/* Eraser cursor on stage (circle preview is drawn on the overlay) */
.stage[data-tool="eraser"] { cursor: crosshair; }
.stage[data-tool="brush"], .stage[data-tool="pen"] { cursor: crosshair; }
.stage[data-tool="shapes"], .stage[data-tool="text"] { cursor: crosshair; }
.stage[data-tool="select"] { cursor: default; }

/* ---------- Structure panel — floating restack modal ---------- */
.struct-modal {
  position: fixed;
  z-index: 140;
  top: 62px;
  right: 14px;
  width: 302px;
  max-width: calc(100vw - 16px);
  background: var(--panel);
  border: 1px solid var(--border-2);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
}
.struct-modal[hidden] { display: none; }

.struct-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
  cursor: grab;
  touch-action: none;
}
.struct-modal.dragging-win,
.struct-modal.dragging-win .struct-head { cursor: grabbing; }
.struct-grip-w { display: inline-flex; color: var(--faint); }
.struct-grip-w svg { width: 14px; height: 14px; }
.struct-title { font-size: 12.5px; font-weight: 700; letter-spacing: 0.2px; color: var(--text); }
.struct-count {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  background: var(--panel-3);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.struct-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.struct-close:hover { background: var(--btn-hover-bg); color: var(--text); }
.struct-close svg { width: 13px; height: 13px; }

.struct-hint {
  margin: 0;
  padding: 7px 12px;
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--faint);
  border-bottom: 1px solid var(--border);
}

.struct-list {
  position: relative;
  padding: 6px;
  max-height: min(420px, 52vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.struct-list::-webkit-scrollbar { width: 8px; }
.struct-list::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 8px; }
.struct-list::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }

.struct-row {
  display: grid;
  grid-template-columns: 14px 14px 16px 1fr;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  border-radius: 8px;
  border: 1px solid transparent;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.struct-row:hover { background: var(--panel-3); }
.struct-row.active {
  border-color: rgba(245, 165, 36, 0.55);
  background: rgba(245, 165, 36, 0.12);
}
.struct-row.dragging { opacity: 0.35; }

.struct-twist {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
}
.struct-twist svg { width: 10px; height: 10px; transition: transform 0.15s; }
.struct-row.expanded .struct-twist svg { transform: rotate(90deg); }
.struct-twist:hover { color: var(--text); background: var(--btn-hover-bg); }

.struct-grip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 18px;
  color: var(--faint);
  cursor: grab;
  touch-action: none;
  border-radius: 4px;
}
.struct-grip svg { width: 12px; height: 12px; }
.struct-grip:hover { color: var(--text); }
body.struct-dragging,
body.struct-dragging * { cursor: grabbing !important; }

.struct-ico { display: inline-flex; color: var(--muted); }
.struct-ico svg { width: 14px; height: 14px; }

.struct-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.struct-row.is-group .struct-name { font-weight: 700; }

.struct-child {
  margin-left: 26px;
  grid-template-columns: 14px 1fr;
  font-size: 11.5px;
  color: var(--muted);
  padding-block: 3.5px;
}

.struct-empty {
  padding: 26px 10px;
  text-align: center;
  color: var(--faint);
  font-size: 12px;
}

.struct-dropmark {
  position: absolute;
  left: 6px;
  right: 6px;
  height: 0;
  border-top: 2px solid var(--accent);
  pointer-events: none;
  z-index: 2;
}
.struct-dropmark::before {
  content: '';
  position: absolute;
  left: -2px;
  top: -5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

@media (max-width: 640px) {
  .struct-modal { left: 8px; right: 8px; width: auto; }
}

/* ---------- Collapsible property groups (right sidebar) ---------- */
.prop-group {
  border: 1px solid var(--border);
  border-radius: 9px;
  margin-top: 8px;
  background: var(--panel-2);
  overflow: hidden;
}
.prop-group-head {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-align: left;
  cursor: pointer;
  user-select: none;
}
.prop-group-head:hover { background: var(--btn-hover-bg); }
.prop-group-head .chev {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: var(--muted);
  transition: transform 0.15s ease;
}
.prop-group.open .prop-group-head .chev { transform: rotate(180deg); }
.prop-group-body {
  padding: 6px 10px 10px;
  border-top: 1px solid var(--border);
}
.prop-group:not(.open) .prop-group-body { display: none; }
.prop-group .tool-grid-label { margin-top: 2px; }
.prop-group .form-row,
.prop-group .align-row { margin-top: 8px; }
.prop-group .props-grid { margin-top: 6px; }

/* Text shadow controls (inside the Text group / Text options) */
.text-shadow-row .fld { min-width: 0; }

/* ---------- Tools FAB opens from the RIGHT edge of the stage ---------- */
.stage-fab.below { top: 54px; left: auto; right: 14px; }

/* ---------- Stroke gradient controls (properties paint grid) ---------- */
.prop-grad-btn {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--muted);
  cursor: pointer;
}
.prop-grad-btn svg { width: 14px; height: 14px; }
.prop-grad-btn:hover { background: var(--btn-hover-bg); color: var(--text); }
.prop-grad-btn.active {
  background: var(--accent-soft);
  border-color: rgba(16, 185, 129, 0.55);
  color: var(--accent-2);
}
.prop-grad-row { margin-top: 6px; }

/* Stroke color + gradient toggle in one row */
.stroke-line2 {
  display: flex;
  align-items: center;
  gap: 6px;
}
.stroke-line2 input[type="color"] { flex: 1 1 auto; min-width: 0; }