/* Vexel UI — dark by default, `body.light` switches tokens. */
:root {
  --bg: #1e1f24;
  --bg2: #26272d;
  --bg3: #2f3037;
  --bg4: #3a3b44;
  --fg: #e4e5ea;
  --fg2: #a9abb5;
  --fg3: #747682;
  --line: #3b3c45;
  --accent: #4c9aff;
  --accent2: #2f7de0;
  --accent-bg: rgba(76, 154, 255, 0.18);
  --danger: #ff5c5c;
  --desk: #3a3a40;
  --ruler-bg: #26272d;
  --ruler-fg: #8c8e99;
  --handle: #ffffff;
  --handle-stroke: #1a1a1a;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif;
  color-scheme: dark;
}
body.light {
  --bg: #f3f4f7;
  --bg2: #ffffff;
  --bg3: #eceef2;
  --bg4: #dfe2e8;
  --fg: #1f2128;
  --fg2: #4c4f5a;
  --fg3: #8a8d98;
  --line: #d7dae1;
  --accent: #2f7de0;
  --accent2: #1d64be;
  --accent-bg: rgba(47, 125, 224, 0.14);
  --desk: #d9dbe0;
  --ruler-bg: #f7f8fa;
  --ruler-fg: #6b6e79;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--fg); font: 12px/1.35 var(--font); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
kbd { font: 11px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--bg3); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }

#app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
#vx-top { flex: none; background: var(--bg2); border-bottom: 1px solid var(--line); }
#vx-main { flex: 1; display: flex; min-height: 0; }
#vx-toolbox { flex: none; background: var(--bg2); border-right: 1px solid var(--line); overflow: hidden; }
#vx-canvas-area { flex: 1; position: relative; min-width: 0; overflow: hidden; background: var(--desk); }
#vx-dock { flex: none; display: flex; }
#vx-bottom { flex: none; background: var(--bg2); border-top: 1px solid var(--line); }

/* ---------- menubar ---------- */
.menubar { display: flex; align-items: center; height: 28px; padding: 0 4px; user-select: none; }
.menu-top { padding: 4px 9px; border-radius: 5px; cursor: default; color: var(--fg); }
.menu-top:hover, .menu-top.open { background: var(--bg4); }
.doc-title { color: var(--fg2); padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.spacer { flex: 1; }

.popup-menu { position: fixed; z-index: 1000; min-width: 220px; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 4px; box-shadow: 0 10px 30px rgba(0,0,0,.35); max-height: calc(100vh - 20px); overflow-y: auto; user-select: none; }
.menu-item { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 5px; cursor: default; white-space: nowrap; }
.menu-item:hover { background: var(--accent); color: #fff; }
.menu-item.disabled { opacity: .4; }
.menu-item.disabled:hover { background: none; color: inherit; }
.mi-check { width: 12px; text-align: center; }
.mi-icon { width: 16px; display: inline-flex; }
.mi-label { flex: 1; }
.mi-key { color: var(--fg3); margin-left: 18px; font-size: 11px; }
.menu-item:hover .mi-key { color: #fff; }
.menu-sep { height: 1px; background: var(--line); margin: 4px 6px; }

/* ---------- bars & buttons ---------- */
.commandbar, .toolcontrols { display: flex; align-items: center; gap: 2px; padding: 3px 6px; flex-wrap: wrap; row-gap: 3px; }
.commandbar { border-top: 1px solid var(--line); }
.toolcontrols { border-top: 1px solid var(--line); min-height: 36px; gap: 6px; }
.sep { width: 1px; align-self: stretch; background: var(--line); margin: 3px 4px; flex: none; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 4px; border: 1px solid transparent; background: none; border-radius: 6px; color: var(--fg); cursor: pointer; flex: none; }
.icon-btn:hover:not(:disabled) { background: var(--bg4); }
.icon-btn.active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.icon-btn:disabled { opacity: .35; cursor: default; }
.icon-btn.tiny { min-width: 20px; height: 20px; padding: 0 2px; }
.btn { border: 1px solid var(--line); background: var(--bg3); border-radius: 6px; padding: 5px 12px; cursor: pointer; white-space: nowrap; }
.btn:hover:not(:disabled) { background: var(--bg4); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent2); }
.btn.small { padding: 3px 8px; font-size: 11px; }
.btn.active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.btn:disabled { opacity: .4; cursor: default; }
.radio-group { display: inline-flex; gap: 1px; flex: none; }
.ic { display: block; pointer-events: none; }

.tc-title { display: inline-flex; align-items: center; gap: 6px; color: var(--fg2); white-space: nowrap; padding-right: 6px; border-right: 1px solid var(--line); margin-right: 2px; flex: none; }
.tc-label { color: var(--fg2); white-space: nowrap; }
.tc-field { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.tc-select, select { background: var(--bg3); border: 1px solid var(--line); border-radius: 5px; padding: 3px 4px; max-width: 100%; }
.tc-font { width: 150px; min-width: 110px; background: var(--bg3); border: 1px solid var(--line); border-radius: 5px; padding: 4px 6px; }
input[type=text], input[type=search], input[type=number], textarea { background: var(--bg3); border: 1px solid var(--line); border-radius: 5px; padding: 4px 6px; min-width: 0; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
input[type=color] { width: 34px; height: 26px; padding: 1px; border: 1px solid var(--line); border-radius: 5px; background: var(--bg3); flex: none; }
input[type=range] { accent-color: var(--accent); flex: 1; min-width: 60px; }
input[type=checkbox] { accent-color: var(--accent); }
.num-wrap { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; flex: none; }
.num-lbl { color: var(--fg2); user-select: none; }
.num { width: 64px; -moz-appearance: textfield; }
.num::-webkit-inner-spin-button, .num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.num.small { width: 54px; }
.num-unit { color: var(--fg3); }
.xywh { display: inline-flex; align-items: center; gap: 6px; }
.xywh .num { width: 72px; }

/* ---------- toolbox ---------- */
.toolbox { display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; align-items: center; padding: 6px 4px; gap: 2px; height: 100%; }
.tool-btn { width: 36px; height: 36px; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--fg); display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.tool-btn:hover { background: var(--bg4); }
.tool-btn.active { background: var(--accent); color: #fff; }
.tsep { width: 24px; height: 1px; background: var(--line); margin: 4px 0; flex: none; }

/* ---------- canvas & rulers ---------- */
#vx-canvas { position: absolute; left: 20px; top: 20px; right: 0; bottom: 0; overflow: hidden; touch-action: none; }
.no-rulers #vx-canvas { left: 0; top: 0; }
.ruler { position: absolute; display: block; z-index: 2; }
.ruler-h { left: 20px; top: 0; right: 0; height: 20px; width: calc(100% - 20px); cursor: s-resize; border-bottom: 1px solid var(--line); }
.ruler-v { left: 0; top: 20px; bottom: 0; width: 20px; height: calc(100% - 20px); cursor: e-resize; border-right: 1px solid var(--line); }
.ruler-corner { position: absolute; left: 0; top: 0; width: 20px; height: 20px; font-size: 9px; line-height: 20px; text-align: center; color: var(--ruler-fg); overflow: hidden; background: var(--ruler-bg); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); z-index: 3; cursor: pointer; }
.no-rulers .ruler, .no-rulers .ruler-corner { display: none; }
#vx-workspace { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; }
#vx-pageborder { stroke: rgba(0,0,0,.45); stroke-width: 1; }
#vx-content.outline * { fill: none !important; stroke: #000 !important; stroke-width: 1px !important; vector-effect: non-scaling-stroke; filter: none !important; opacity: 1 !important; stroke-dasharray: none !important; }
#vx-content.outline text, #vx-content.outline tspan { fill: #000 !important; stroke: none !important; fill-opacity: .6 !important; }
#vx-content.outline image { opacity: .5 !important; }
#vx-overlay { pointer-events: none; }
#vx-overlay .handle, #vx-overlay .node, #vx-overlay .hdot, #vx-overlay .shape-h, #vx-overlay .grad-h, #vx-overlay .grad-line, #vx-overlay .guide-hit, #vx-overlay .sb-frag { pointer-events: all; }
.sb-frag { fill: rgba(76,154,255,.08); stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 2; cursor: pointer; }
.sb-frag:hover { fill: rgba(76,154,255,.4); stroke-width: 2; stroke-dasharray: none; }
.sb-frag.on { fill: rgba(76,154,255,.55); }
.sb-frag.rm { fill: rgba(255,59,107,.5); }
.palette-dlg input { width: 100%; font-size: 14px; padding: 8px; }
.palette-list { max-height: 50vh; overflow: auto; margin-top: 6px; }
.palette-item { display: flex; justify-content: space-between; padding: 6px 8px; border-radius: 5px; cursor: pointer; }
.palette-item.active, .palette-item:hover { background: var(--accent); color: #fff; }
.palette-item kbd { opacity: .8; }

.sel-cue { fill: none; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 4 3; }
.context-cue { fill: none; stroke: #ff9f1a; stroke-width: 1; stroke-dasharray: 6 4; }
.rubber { fill: rgba(76,154,255,.12); stroke: var(--accent); stroke-width: 1; stroke-dasharray: 4 3; }
.touch-path { fill: none; stroke: #ff3b6b; stroke-width: 1.5; }
.handle path, .handle circle { fill: var(--handle); stroke: var(--handle-stroke); stroke-width: 1; cursor: pointer; }
.handle:hover path, .handle:hover circle { fill: var(--accent); }
.handle.center path { fill: none; stroke: var(--handle-stroke); stroke-width: 3; }
.handle.center path + path { stroke: var(--handle); }
.handle.center circle { fill: none; stroke: #fff; }
.handle.center { cursor: move; }
.handle.rotate { cursor: grab; }
.handle.skew { cursor: ew-resize; }

.node-outline { fill: none; stroke: #ff3b6b; stroke-width: 1; opacity: .8; }
.node { fill: #fff; stroke: #333; stroke-width: 1; cursor: pointer; }
.node.sel { fill: var(--accent); stroke: #fff; }
.node.end { stroke-width: 1.5; }
.node:hover { fill: #ffd34d; }
.hline { stroke: #9aa0b0; stroke-width: 1; }
.hdot { fill: #fff; stroke: #333; stroke-width: 1; cursor: pointer; }
.hdot:hover { fill: #ffd34d; }
.shape-h { fill: #fff; stroke: #333; stroke-width: 1; cursor: pointer; }
.shape-h:hover { fill: #ffd34d; }
.draw-preview { fill: none; stroke: #ff3b6b; stroke-width: 1.5; }
.draw-rubber { fill: none; stroke: #ff3b6b; stroke-width: 1; stroke-dasharray: 4 3; }
.pen-node { fill: #fff; stroke: #ff3b6b; stroke-width: 1; }
.pen-node.first { fill: #ff3b6b; }
.cal-preview { fill: rgba(30,30,30,.45); stroke: #ff3b6b; stroke-width: .5; }
.eraser-preview { fill: none; stroke: rgba(255,59,107,.45); stroke-linecap: round; stroke-linejoin: round; }
.brush { fill: none; stroke: #ff3b6b; stroke-width: 1; stroke-dasharray: 3 3; }
.text-caret { stroke: var(--accent); stroke-width: 2; animation: blink 1s steps(1) infinite; }
.text-sel { fill: var(--accent); opacity: .3; }
.text-frame { fill: none; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 2 3; }
@keyframes blink { 50% { opacity: 0; } }
.grad-line { stroke: #fff; stroke-width: 1.5; stroke-dasharray: 5 3; cursor: copy; }
.grad-h { stroke: #333; stroke-width: 1.5; cursor: pointer; }
.grad-h.sel { stroke: var(--accent); stroke-width: 3; }
.measure-line { stroke: #ff0066; stroke-width: 1.5; }
.measure-end { fill: #ff0066; }
.measure-hit { fill: none; stroke: #ff0066; stroke-width: 1.5; }
.measure-label { fill: #fff; font: 11px var(--font); }
.measure-bg { fill: rgba(0,0,0,.75); }
.conn-target { fill: rgba(76,154,255,.15); stroke: var(--accent); stroke-width: 1.5; }
.snap-line { stroke: #ff3b9a; stroke-width: 1; stroke-dasharray: 4 3; }
.snap-line.grid, .snap-line.guide { stroke: #ffa000; }
.snap-pt { fill: none; stroke: #ff3b9a; stroke-width: 2; }
.guide-line { stroke: #3f7fff; stroke-width: 1; opacity: .85; }
.guide-hit { stroke: transparent; stroke-width: 9; cursor: move; }
.guide:hover .guide-line { stroke: #ff3b6b; }

/* ---------- dock ---------- */
.dock { position: relative; width: 300px; height: 100%; background: var(--bg2); border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.dock-hidden #vx-dock { display: none; }
.dock-resizer { position: absolute; left: -3px; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 5; }
.dock-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px 4px 0; border-bottom: 1px solid var(--line); flex: none; }
.dock-tab { display: flex; align-items: center; gap: 4px; padding: 4px 4px 5px 7px; border-radius: 6px 6px 0 0; cursor: pointer; color: var(--fg2); max-width: 160px; }
.dock-tab:hover { background: var(--bg3); }
.dock-tab.active { background: var(--bg3); color: var(--fg); box-shadow: inset 0 -2px 0 var(--accent); }
.dt-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-close { border: 0; background: none; color: var(--fg3); padding: 2px; border-radius: 4px; cursor: pointer; display: flex; }
.dt-close:hover { background: var(--bg4); color: var(--fg); }
.dock-body { flex: 1; overflow: auto; min-height: 0; }
.panel { padding: 8px 10px 16px; }
.p-section { margin: 8px 0 12px; }
.p-title { font-weight: 600; color: var(--fg2); text-transform: uppercase; font-size: 10.5px; letter-spacing: .04em; margin: 10px 0 6px; }
.p-row { display: flex; align-items: center; gap: 6px; margin: 5px 0; flex-wrap: wrap; }
.p-row > input[type=text], .p-row > input[type=search] { flex: 1; }
.p-row > select { flex: 1; min-width: 64px; }
.lbl { color: var(--fg2); min-width: 70px; }
.p-check { display: flex; align-items: center; gap: 6px; margin: 4px 0; cursor: pointer; }
.p-inline { display: inline-flex; align-items: center; gap: 6px; }
.p-tabs { display: flex; gap: 2px; background: var(--bg3); padding: 3px; border-radius: 8px; margin-bottom: 8px; }
.p-tab { flex: 1; border: 0; background: none; padding: 5px 4px; border-radius: 6px; cursor: pointer; color: var(--fg2); white-space: nowrap; }
.p-tab.active { background: var(--bg2); color: var(--fg); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.p-toolbar { display: flex; align-items: center; gap: 1px; padding-bottom: 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; flex-wrap: wrap; }
.p-common { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 6px; }
.note { color: var(--fg3); margin: 6px 0; font-size: 11.5px; }
.btn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(32px, 1fr)); gap: 3px; }
.btn-grid .icon-btn { width: 100%; height: 32px; background: var(--bg3); }
.paint-types { margin-bottom: 8px; }

/* colour picker */
.cp { display: flex; flex-direction: column; gap: 8px; margin: 6px 0; }
.cp-sv { position: relative; height: 150px; border-radius: 6px; cursor: crosshair; touch-action: none; overflow: hidden; }
.cp-sv-w { position: absolute; inset: 0; background: linear-gradient(90deg, #fff, rgba(255,255,255,0)); }
.cp-sv-b { position: absolute; inset: 0; background: linear-gradient(0deg, #000, rgba(0,0,0,0)); }
.cp-knob { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.5); pointer-events: none; }
.cp-bars { display: flex; flex-direction: column; gap: 6px; }
.cp-hue, .cp-alpha { position: relative; height: 12px; border-radius: 6px; cursor: pointer; touch-action: none; }
.cp-hue { background: linear-gradient(90deg, red, #ff0, lime, cyan, blue, #f0f, red); }
.cp-alpha { background: repeating-conic-gradient(#ccc 0 25%, #fff 0 50%) 0 0 / 10px 10px; }
.cp-alpha-grad { position: absolute; inset: 0; border-radius: 6px; }
.cp-bar-knob { position: absolute; top: -2px; width: 8px; height: 16px; margin-left: -4px; border: 2px solid #fff; border-radius: 4px; box-shadow: 0 0 0 1px rgba(0,0,0,.5); pointer-events: none; }
.cp-row { display: flex; align-items: center; gap: 6px; }
.cp-row.nums { justify-content: space-between; }
.cp-row.nums .num { width: 46px; }
.cp-hex { flex: 1; font-family: ui-monospace, Menlo, Consolas, monospace; }
.cp-preview { width: 30px; height: 26px; border-radius: 5px; border: 1px solid var(--line); flex: none; background-clip: padding-box; }

/* gradients & patterns */
.grad-lib { display: flex; flex-wrap: wrap; gap: 4px; }
.grad-sw { width: 40px; height: 18px; border-radius: 4px; border: 1px solid var(--line); cursor: pointer; }
.grad-sw.active { outline: 2px solid var(--accent); }
.stop-bar { position: relative; height: 22px; border-radius: 5px; border: 1px solid var(--line); margin: 8px 7px 14px; }
.stop-knob { position: absolute; bottom: -9px; width: 14px; height: 14px; margin-left: -7px; border: 2px solid #fff; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.6); cursor: ew-resize; touch-action: none; }
.stop-knob.active { border-color: var(--accent); transform: scale(1.15); }
.pattern-grid, .symbol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 5px; }
.pat-sw { aspect-ratio: 1; border: 1px solid var(--line); border-radius: 5px; cursor: pointer; color: var(--fg); background: var(--bg3); overflow: hidden; }
.pat-sw.active { outline: 2px solid var(--accent); }
.symbol { aspect-ratio: 1; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; background: var(--bg3); padding: 6px; }
.symbol:hover { border-color: var(--accent); }
.symbol svg { width: 100%; height: 100%; fill: var(--fg); }

/* layers tree */
.tree { user-select: none; }
.tree-row { display: flex; align-items: center; gap: 4px; padding: 2px 4px; border-radius: 5px; cursor: pointer; border: 1px solid transparent; min-height: 24px; }
.tree-row:hover { background: var(--bg3); }
.tree-row.layer { font-weight: 600; }
.tree-row.current { background: var(--bg3); box-shadow: inset 2px 0 0 var(--accent); }
.tree-row.sel { background: var(--accent-bg); }
.tree-row.hidden .tree-name { opacity: .45; }
.tree-row.drop-above { border-top-color: var(--accent); }
.tree-row.drop-below { border-bottom-color: var(--accent); }
.tree-row.drop-into { border-color: var(--accent); }
.twisty { width: 14px; display: inline-flex; justify-content: center; color: var(--fg3); flex: none; }
.tree-icon { color: var(--fg3); display: inline-flex; flex: none; }
.tree-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tree-row .icon-btn { opacity: .55; }
.tree-row:hover .icon-btn, .tree-row.hidden .icon-btn { opacity: 1; }

/* xml editor */
.xml-tree { max-height: 46vh; overflow: auto; border: 1px solid var(--line); border-radius: 6px; padding: 3px; font: 11.5px ui-monospace, Menlo, Consolas, monospace; }
.xml-row { display: flex; align-items: center; gap: 2px; padding: 1px 3px; border-radius: 4px; cursor: pointer; white-space: nowrap; }
.xml-row:hover { background: var(--bg3); }
.xml-row.sel { background: var(--accent-bg); }
.xml-tag { color: #6cb6ff; }
body.light .xml-tag { color: #1f62b8; }
.xml-id { color: #f69d50; }
.xml-lab { color: var(--fg3); font-style: italic; }
.xml-text { color: #8ddb8c; }
body.light .xml-text { color: #2a7a2a; }
.xml-attrs { margin-top: 8px; }
.xml-attr { display: grid; grid-template-columns: 90px 1fr 22px; gap: 4px; align-items: start; margin: 3px 0; }
.xml-attr.new { grid-template-columns: 90px 1fr 22px; }
.xml-aname { color: var(--fg2); font: 11.5px ui-monospace, Menlo, Consolas, monospace; padding-top: 4px; word-break: break-all; }
.xml-val { width: 100%; resize: vertical; font: 11.5px ui-monospace, Menlo, Consolas, monospace; }
.matrix-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

/* fonts, swatches, history */
.font-list { max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: 6px; margin-top: 6px; }
.font-item { padding: 5px 8px; cursor: pointer; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.font-item:hover { background: var(--bg3); }
.font-item.active { background: var(--accent-bg); }
.text-edit { width: 100%; resize: vertical; font-size: 14px; }
.swatch-grid { display: flex; flex-wrap: wrap; gap: 3px; }
.history-list .history-row { padding: 4px 8px; border-radius: 4px; cursor: pointer; }
.history-row:hover { background: var(--bg3); }
.history-row.cur { background: var(--accent-bg); font-weight: 600; }
.history-row.future { opacity: .5; }

/* ---------- palette & status ---------- */
.palette { display: flex; gap: 1px; padding: 3px 6px; overflow-x: auto; scrollbar-width: thin; border-bottom: 1px solid var(--line); }
.swatch { width: 18px; height: 18px; flex: none; border-radius: 3px; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.swatch:hover { transform: scale(1.25); position: relative; z-index: 2; box-shadow: 0 0 0 1px var(--fg); }
.swatch.big { width: 24px; height: 24px; }
.swatch.none, .st-swatch.none { background: #fff linear-gradient(to top left, transparent calc(50% - 1px), #e33 calc(50% - 1px), #e33 calc(50% + 1px), transparent calc(50% + 1px)) !important; }
.statusbar { display: flex; align-items: center; gap: 10px; height: 28px; padding: 0 8px; white-space: nowrap; }
.st-style { display: flex; align-items: center; gap: 4px; }
.st-lbl { color: var(--fg3); font-size: 10px; }
.st-swatch { width: 30px; height: 16px; border-radius: 3px; border: 1px solid var(--line); cursor: pointer; font-size: 10px; text-align: center; line-height: 14px; color: #000; background-color: transparent; }
.st-swatch.stroke { box-shadow: inset 0 0 0 3px var(--bg2); }
.st-sw { color: var(--fg2); min-width: 26px; }
.st-layer-wrap { display: flex; align-items: center; gap: 1px; }
.st-layer { max-width: 140px; }
.st-msg { flex: 1; color: var(--fg2); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.st-coords { color: var(--fg2); font-variant-numeric: tabular-nums; min-width: 150px; }
.st-coords b { color: var(--fg); font-weight: 500; }
.st-zoomwrap { display: flex; align-items: center; gap: 4px; color: var(--fg3); }
.st-zoom { width: 56px; text-align: right; }

/* ---------- dialogs ---------- */
.dlg-wrap { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.dlg-wrap.modal { background: rgba(0,0,0,.35); pointer-events: all; }
.dlg-wrap:not(.modal) { align-items: flex-start; justify-content: flex-end; padding: 110px 330px 0 0; }
@media (max-width: 900px) { .dlg-wrap:not(.modal) { justify-content: center; padding: 60px 0 0; } }
.dlg { pointer-events: all; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); display: flex; flex-direction: column; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.dlg-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--line); cursor: move; user-select: none; }
.dlg-title { font-weight: 600; font-size: 13px; }
.dlg-body { padding: 12px 14px; overflow: auto; }
.dlg-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); }
.form-row { display: flex; align-items: center; gap: 8px; margin: 7px 0; }
.form-row .lbl { flex: none; width: 130px; }
.form-row > input, .form-row > select, .form-row > textarea { flex: 1; }
.form-row.col { flex-direction: column; align-items: stretch; }
.form-row.col .lbl { width: auto; }
.form-row.check { cursor: pointer; justify-content: flex-start; }
.form-row > input[type=checkbox] { flex: none; }
.range-wrap { display: flex; gap: 6px; flex: 1; }
.template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-bottom: 12px; }
.template { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border: 1px solid var(--line); background: var(--bg3); border-radius: 8px; cursor: pointer; }
.template:hover { border-color: var(--accent); }
.tpl-page { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); margin: 6px 0; }
.tpl-name { font-weight: 600; text-align: center; }
.tpl-size { color: var(--fg3); font-size: 11px; }
.shortcuts { columns: 2 280px; column-gap: 24px; }
.sc-section { break-inside: avoid; }
.sc-table { width: 100%; border-collapse: collapse; }
.sc-table td { padding: 3px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
.sc-table td:last-child { text-align: right; white-space: nowrap; }
.about { text-align: center; }
.about-logo { color: var(--accent); display: flex; justify-content: center; }
.about h2 { margin: 6px 0; }
.tips ul { padding-left: 18px; margin: 0; }
.tips li { margin: 6px 0; }

/* ---------- toasts & drop ---------- */
#vx-toasts { position: fixed; left: 50%; bottom: 70px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; z-index: 2000; pointer-events: none; }
.toast { background: var(--bg4); color: var(--fg); padding: 8px 14px; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.35); transition: opacity .4s, transform .4s; max-width: 80vw; }
.toast.warn { background: #6b4e00; color: #fff; }
.toast.error { background: #8a1f2b; color: #fff; }
.toast.out { opacity: 0; transform: translateY(8px); }
body.dropping #vx-canvas-area::after { content: 'Drop SVG or image files to import'; position: absolute; inset: 10px; border: 3px dashed var(--accent); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; background: rgba(76,154,255,.12); color: var(--fg); pointer-events: none; z-index: 10; }
#vx-text-ta { position: fixed; left: -1000px; top: 0; width: 300px; height: 100px; opacity: 0; }

#vx-content [data-vx-hairline] { vector-effect: non-scaling-stroke; stroke-width: 1px !important; }

/* living hinge dialog */
.hinge-preview { height: 170px; border: 1px solid var(--line); border-radius: 6px; background: #fff; margin-bottom: 4px; }
.hinge-preview svg { width: 100%; height: 100%; display: block; }
.hinge-preview .hp-outline { fill: #f4efe6; stroke: #888; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.hinge-preview .hp-cuts { fill: none; stroke: #e11; stroke-width: 1px; }
.hinge-dlg .num { width: 70px; }

/* start screen */
.start-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.start-list { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow: auto; }
.start-file { display: flex; justify-content: space-between; gap: 10px; text-align: left; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg3); cursor: pointer; }
.start-file:hover { border-color: var(--accent); }
.sf-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-meta { color: var(--fg3); white-space: nowrap; }

/* view modes */
#vx-viewport.grayscale { filter: grayscale(1); }
body.quick-preview #vx-handles, body.quick-preview #vx-sel, body.quick-preview #vx-grid, body.quick-preview #vx-guides { display: none; }
body.focus-mode #vx-top, body.focus-mode #vx-toolbox, body.focus-mode #vx-dock, body.focus-mode #vx-bottom { display: none !important; }
body.no-palette .palette { display: none; }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .dock { width: 260px; }
  .doc-title { display: none; }
}
@media (max-width: 700px) {
  #vx-dock { position: absolute; right: 0; top: 0; bottom: 0; z-index: 50; }
  #vx-main { position: relative; }
  .dock { width: min(300px, 85vw); box-shadow: -10px 0 30px rgba(0,0,0,.4); }
  .commandbar .sep { display: none; }
  .tool-btn { width: 32px; height: 32px; }
  .st-coords, .st-layer-wrap { display: none; }
}