:root {
  --ui-bg: #1c1e23;
  --ui-panel: #25282e;
  --ui-panel-2: #2e3239;
  --ui-hover: #383d46;
  --ui-border: #3a3f48;
  --ui-border-soft: #2f333a;
  --ui-text: #d9dce2;
  --ui-dim: #8b919c;
  --accent: #5fb0ff;
  --accent-ink: #0d1b2a;
  --stage-bg: #141518;
  --danger: #ff6b6b;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: var(--ui-bg);
  color: var(--ui-text);
  font: 12px/1.3 "Segoe UI", system-ui, sans-serif;
  user-select: none;
}
button { font: inherit; color: inherit; }
kbd {
  font: 10px/1 Consolas, "Cascadia Mono", monospace;
  color: var(--ui-dim);
}

#app {
  display: grid;
  grid-template-rows: 30px 40px 1fr 24px;
  height: 100vh;
}

/* ---------- menu bar ---------- */
#menubar {
  display: flex; align-items: center; gap: 6px;
  padding: 0 8px;
  background: var(--ui-panel);
  border-bottom: 1px solid var(--ui-border-soft);
}
.brand { display: flex; align-items: center; gap: 7px; padding-right: 10px; color: var(--ui-text); font-weight: 600; letter-spacing: .3px; }
.menus { display: flex; }
.menu { position: relative; }
.menu-title {
  background: none; border: 0; padding: 5px 10px; border-radius: 4px; cursor: default;
}
.menu-title:hover, .menu.open .menu-title { background: var(--ui-hover); }
.menu-drop {
  display: none; position: absolute; top: calc(100% + 3px); left: 0; z-index: 50;
  min-width: 210px; padding: 4px;
  background: var(--ui-panel-2); border: 1px solid var(--ui-border);
  border-radius: 6px; box-shadow: 0 10px 28px rgba(0,0,0,.45);
}
.menu.open .menu-drop { display: block; }
.menu-drop button {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  width: 100%; padding: 6px 10px; background: none; border: 0; border-radius: 4px; text-align: left; cursor: default;
}
.menu-drop button:hover { background: var(--accent); color: var(--accent-ink); }
.menu-drop button:hover kbd { color: var(--accent-ink); }
.menu-drop hr { border: 0; border-top: 1px solid var(--ui-border); margin: 4px 2px; }
/* menus with on/off items keep a column for the tick */
.menu-drop.checks button { position: relative; padding-left: 26px; }
.menu-drop.checks button.on::before { content: '✓'; position: absolute; left: 9px; color: var(--accent); }
.menu-drop.checks button.on:hover::before { color: var(--accent-ink); }

/* ---------- context bar ---------- */
#ctxbar {
  display: flex; align-items: center; gap: 14px;
  padding: 0 12px;
  background: var(--ui-panel);
  border-bottom: 1px solid var(--ui-border);
  white-space: nowrap; overflow: hidden;
}
.ctx-group { display: flex; align-items: center; gap: 8px; }
.ctx-group[hidden], .ctx-sep[hidden] { display: none; }
.ctx-label { color: var(--ui-dim); text-transform: uppercase; font-size: 10.5px; letter-spacing: .8px; }
.ctx-note { color: var(--ui-dim); }
.ctx-sep { width: 1px; height: 22px; background: var(--ui-border); }
#curveIcon { background: var(--ui-bg); border: 1px solid var(--ui-border-soft); border-radius: 4px; }
.val { min-width: 18px; font-variant-numeric: tabular-nums; }
.unit { color: var(--ui-dim); margin-left: -5px; }

input[type=range] { width: 150px; accent-color: var(--accent); }
#width, #dotSize { width: 100px; }
input[type=number] {
  width: 46px; padding: 3px 4px;
  background: var(--ui-bg); color: var(--ui-text);
  border: 1px solid var(--ui-border); border-radius: 4px;
  font: inherit; font-variant-numeric: tabular-nums; text-align: right;
}
input[type=number]:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 4px;
  background: var(--ui-panel-2); border: 1px solid var(--ui-border); cursor: pointer;
}
.chip:hover { background: var(--ui-hover); }
.chip kbd { padding: 1px 4px; border: 1px solid var(--ui-border); border-bottom-width: 2px; border-radius: 3px; }

/* ---------- main ---------- */
#main {
  display: grid;
  grid-template-columns: 48px 1fr 196px;
  min-height: 0;
}

#tools {
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  padding: 8px 0;
  background: var(--ui-panel);
  border-right: 1px solid var(--ui-border);
}
.tool {
  position: relative;
  width: 36px; height: 36px; display: grid; place-items: center;
  background: none; border: 1px solid transparent; border-radius: 6px; cursor: pointer;
  color: var(--ui-dim);
}
.tool svg { width: 20px; height: 20px; }
.tool kbd { position: absolute; right: 2px; bottom: 1px; font-size: 8.5px; }
.tool:hover { background: var(--ui-hover); color: var(--ui-text); }
.tool.active { background: var(--accent); color: var(--accent-ink); }
.tool.active kbd { color: var(--accent-ink); }

#work { display: grid; grid-template-rows: 32px 1fr auto; min-width: 0; min-height: 0; }

/* ---------- tabs ---------- */
#tabbar {
  display: flex; align-items: flex-end; gap: 4px; min-width: 0;
  padding: 0 6px 0 4px;
  /* the rule under the tabs; the active tab paints over it to join the canvas */
  background: linear-gradient(to top, var(--ui-border) 1px, transparent 1px), var(--ui-bg);
}
#tabs {
  position: relative; display: flex; align-items: flex-end; gap: 2px;
  height: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
#tabs::-webkit-scrollbar { display: none; }
.tab {
  /* a set width that only gives way when the strip runs out of room; past min-width it scrolls */
  display: flex; align-items: center; gap: 6px; flex: 0 1 auto; width: 170px; min-width: 108px;
  height: 27px; padding: 0 5px 0 12px;
  background: var(--ui-panel); color: var(--ui-dim);
  border: 1px solid var(--ui-border-soft); border-bottom: 0; border-radius: 6px 6px 0 0;
  box-shadow: inset 0 -1px 0 var(--ui-border);
  cursor: default; white-space: nowrap;
}
.tab:hover { background: var(--ui-panel-2); color: var(--ui-text); }
.tab.active {
  height: 29px; background: var(--stage-bg); color: var(--ui-text);
  border-color: var(--ui-border); box-shadow: inset 0 2px 0 var(--accent);
}
.tab.lifted { opacity: .75; }
#tabs.dragging, #tabs.dragging .tab { cursor: grabbing; }
.tab-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tab-x {
  flex: none; width: 18px; height: 18px; padding: 0; display: grid; place-items: center;
  background: none; border: 0; border-radius: 4px; color: var(--ui-dim); cursor: pointer;
}
.tab-x svg { width: 10px; height: 10px; }
.tab-x:hover { background: var(--ui-hover); color: var(--ui-text); }
/* unsaved: a dot where the cross is, until you point at the tab */
.tab.dirty .tab-x svg { display: none; }
.tab.dirty .tab-x::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tab.dirty:hover .tab-x svg { display: block; }
.tab.dirty:hover .tab-x::after { display: none; }
#tabNew {
  flex: none; width: 28px; height: 25px; margin-bottom: 2px; display: grid; place-items: center;
  background: none; border: 1px solid transparent; border-radius: 5px; color: var(--ui-dim); cursor: pointer;
}
#tabNew:hover { background: var(--ui-hover); color: var(--ui-text); }
.tab-film { flex: none; display: grid; place-items: center; margin-left: -4px; color: var(--accent); }
#gifToggle {
  flex: none; display: flex; align-items: center; gap: 5px; height: 23px; margin: 0 0 3px auto; padding: 0 9px;
  background: none; border: 1px solid var(--ui-border); border-radius: 5px; color: var(--ui-dim); cursor: pointer;
  font-size: 11px; font-weight: 600; letter-spacing: .6px;
}
#gifToggle:hover { background: var(--ui-hover); color: var(--ui-text); }
#gifToggle.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ---------- timeline (GIF mode) ---------- */
#timeline {
  --tl-lw: 184px;    /* layer column */
  --tl-cw: 26px;     /* one frame */
  display: flex; flex-direction: column; min-width: 0;
  background: var(--ui-panel); border-top: 1px solid var(--ui-border);
}
#tlBar {
  display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 8px;
  border-bottom: 1px solid var(--ui-border-soft);
  white-space: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
#tlBar::-webkit-scrollbar { display: none; }
.tl-group { display: flex; align-items: center; gap: 6px; }
.tl-spacer { flex: 1; }
.tl-btn {
  width: 23px; height: 24px; padding: 0; display: grid; place-items: center;
  background: none; border: 1px solid transparent; border-radius: 4px; color: var(--ui-dim); cursor: pointer;
}
.tl-btn svg { width: 15px; height: 15px; }
.tl-btn:hover { background: var(--ui-hover); color: var(--ui-text); }
.tl-play { color: var(--ui-text); background: var(--ui-panel-2); border-color: var(--ui-border); }
.tl-play.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
#tlDur { width: 48px; }
#tlOnion.on, #onTint.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.onion-opts { display: flex; align-items: center; gap: 6px; transition: opacity .12s; }
.onion-opts.dim { opacity: .4; }
.onion-opts label { display: flex; align-items: center; gap: 4px; }
.onion-opts input[type=number] { width: 30px; }
#onAlpha { width: 56px; }
#tlOpacity { width: 72px; }
.tl-gap { width: 6px; }
#onAlphaVal, #tlOpacityVal { min-width: 32px; }

#tlScroll { position: relative; max-height: calc(146px + var(--tl-tagh, 0px)); overflow: auto; scrollbar-width: thin; }
#tlGrid { display: grid; grid-auto-rows: 24px; width: max-content; min-width: 100%; }
#tlGrid.dragging, #tlGrid.dragging * { cursor: grabbing; }
#tlGrid > * { border-bottom: 1px solid var(--ui-border-soft); }
.tl-corner, .fh { position: sticky; top: var(--tl-tagh, 0px); z-index: 2; height: 24px; background: var(--ui-panel-2); }
.tl-corner, .lh { position: sticky; left: 0; border-right: 1px solid var(--ui-border); }
.tl-corner { z-index: 3; display: flex; align-items: center; gap: 2px; padding: 0 4px 0 10px; }
.tl-corner span { flex: 1; color: var(--ui-dim); text-transform: uppercase; font-size: 10px; letter-spacing: .8px; }
.tl-mini {
  width: 22px; height: 20px; padding: 0; display: grid; place-items: center;
  background: none; border: 0; border-radius: 4px; color: var(--ui-dim); cursor: pointer;
}
.tl-mini svg { width: 14px; height: 14px; }
.tl-mini:hover { background: var(--ui-hover); color: var(--ui-text); }
.fh {
  display: grid; place-items: center; color: var(--ui-dim); font-size: 10.5px; font-variant-numeric: tabular-nums;
  border-right: 1px solid var(--ui-border-soft); cursor: grab;
}
.fh:hover { color: var(--ui-text); }
.fh.cur { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.fh.on-prev { box-shadow: inset 0 -3px 0 rgba(229,72,77,.75); }
.fh.on-next { box-shadow: inset 0 -3px 0 rgba(59,130,246,.85); }
.lh {
  z-index: 1; display: flex; align-items: center; gap: 1px; padding: 0 8px 0 3px;
  background: var(--ui-panel); color: var(--ui-dim); cursor: default;
}
.lh:hover { color: var(--ui-text); }
.lh.cur { background: #2d3d52; color: var(--ui-text); box-shadow: inset 2px 0 0 var(--accent); }
.lh .eye, .lh .lock {
  flex: none; width: 22px; height: 20px; padding: 0; display: grid; place-items: center;
  background: none; border: 0; border-radius: 4px; color: inherit; cursor: pointer;
}
.lh .eye svg, .lh .lock svg { width: 14px; height: 14px; }
.lh .eye:hover, .lh .lock:hover { background: var(--ui-hover); }
.lh .lock { opacity: .22; }
.lh.locked .lock { opacity: 1; color: #f0b44c; }
.lh.off .lname { opacity: .45; }
.lname { flex: 1; min-width: 0; margin-left: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lop { flex: none; margin-left: 6px; font-size: 10px; color: var(--accent); font-variant-numeric: tabular-nums; }
.cel {
  display: grid; place-items: center; color: #6c7380;
  border-right: 1px solid var(--ui-border-soft); cursor: pointer;
}
.cel::after { content: ''; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; }
.cel.full::after { background: currentColor; }
.cel:hover { background: var(--ui-hover); }
.cel.cf, .cel.cl { background: rgba(95,176,255,.07); }
.cel.cf.cl { background: rgba(95,176,255,.30); color: #cfe6ff; }
.cel.off { color: #474d57; }

/* a picked range of frames, and where a dragged cel will land */
.fh.sel { background: rgba(95,176,255,.32); color: var(--ui-text); }
.fh.sel.cur { background: var(--accent); color: var(--accent-ink); }
.cel.rf { background: rgba(95,176,255,.13); }
.cel.rf.cl { background: rgba(95,176,255,.22); }
.cel.rf.cf.cl { background: rgba(95,176,255,.34); }
.cel.drop { outline: 2px dashed var(--accent); outline-offset: -3px; background: rgba(95,176,255,.18); }

/* tags: lanes above the frame numbers */
#tlTags {
  position: sticky; top: 0; z-index: 4; display: grid; width: max-content; min-width: 100%;
  background: var(--ui-panel); border-bottom: 1px solid var(--ui-border-soft);
}
.tags-corner {
  grid-column: 1; position: sticky; left: 0; z-index: 1; display: flex; align-items: center; padding-left: 10px;
  background: var(--ui-panel); border-right: 1px solid var(--ui-border);
}
.tags-corner span { color: var(--ui-dim); text-transform: uppercase; font-size: 10px; letter-spacing: .8px; }
.tag {
  display: flex; align-items: center; gap: 4px; min-width: 0; margin: 2px 1px 1px; padding: 0 5px;
  border-radius: 3px; border-left: 3px solid var(--tag);
  background: color-mix(in srgb, var(--tag) 30%, var(--ui-panel));
  color: var(--ui-text); font-size: 10.5px; line-height: 15px; white-space: nowrap; overflow: hidden; cursor: pointer;
}
.tag:hover { background: color-mix(in srgb, var(--tag) 45%, var(--ui-panel)); }
.tag.cur { box-shadow: inset 0 0 0 1px var(--tag); }
.tag-dir { flex: none; color: var(--tag); font-weight: 700; }
.tag-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#tlPreview.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* the preview window floats over the canvas */
#preview {
  position: absolute; z-index: 5; display: flex; flex-direction: column; overflow: hidden;
  background: var(--ui-panel); border: 1px solid var(--ui-border); border-radius: 8px;
  box-shadow: 0 12px 34px rgba(0,0,0,.5);
}
.pv-head {
  flex: none; display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 3px 0 10px;
  border-bottom: 1px solid var(--ui-border-soft); cursor: move;
}
.pv-label { color: var(--ui-dim); text-transform: uppercase; font-size: 10px; letter-spacing: .8px; }
.pv-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pv-btn {
  flex: none; width: 22px; height: 20px; padding: 0; display: grid; place-items: center;
  background: none; border: 0; border-radius: 4px; color: var(--ui-dim); cursor: pointer;
}
.pv-btn svg { width: 12px; height: 12px; }
.pv-btn:hover { background: var(--ui-hover); color: var(--ui-text); }
#pvCanvas { flex: 1; min-height: 0; width: 100%; display: block; background: var(--stage-bg); }
.pv-grip {
  position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, var(--ui-dim) 50%, var(--ui-dim) 58%, transparent 58%, transparent 70%, var(--ui-dim) 70%, var(--ui-dim) 78%, transparent 78%);
}

#stage { position: relative; min-width: 0; min-height: 0; background: var(--stage-bg); overflow: hidden; }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; touch-action: none; }
#cv.panning { cursor: grab; }
#cv.panning.dragging { cursor: grabbing; }
#cv.erasing { cursor: none; }

#side {
  padding: 10px;
  background: var(--ui-panel);
  border-left: 1px solid var(--ui-border);
  overflow-y: auto;
}
.panel-title { color: var(--ui-dim); text-transform: uppercase; font-size: 10.5px; letter-spacing: .8px; margin-bottom: 8px; }
.current { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.swatch-big { width: 40px; height: 40px; border-radius: 6px; border: 1px solid var(--ui-border); box-shadow: inset 0 0 0 2px rgba(0,0,0,.25); }
.current-meta { display: flex; flex-direction: column; gap: 4px; }
#curHex { font: 12px Consolas, "Cascadia Mono", monospace; }
.picker { position: relative; color: var(--accent); cursor: pointer; }
.picker input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.palette { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; }
.sw {
  aspect-ratio: 1; border-radius: 3px; border: 1px solid rgba(255,255,255,.08); cursor: pointer; padding: 0;
}
.sw:hover { transform: scale(1.15); }
.sw.on { outline: 2px solid var(--accent); outline-offset: 1px; }

#side section { padding-bottom: 14px; margin-bottom: 12px; border-bottom: 1px solid var(--ui-border-soft); }
#side section:last-child { border-bottom: 0; }
.panel-sub { float: right; text-transform: none; letter-spacing: 0; color: var(--accent); font-size: 11px; }
.panel-note { color: var(--ui-dim); font-size: 11px; line-height: 1.4; margin-top: 8px; }
.row { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.row .unit { margin-left: -3px; }
#side .chip { justify-content: center; padding: 5px 8px; }

.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.seg button {
  height: 32px; display: grid; place-items: center;
  background: var(--ui-panel-2); border: 1px solid var(--ui-border); border-radius: 5px; cursor: pointer; color: var(--ui-dim);
}
.seg button svg { width: 20px; height: 20px; }
.seg button:hover { background: var(--ui-hover); color: var(--ui-text); }
.seg button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
#symPlace.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.xf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
#angle { width: 56px; }

.ctx-badge {
  padding: 3px 8px; border-radius: 4px;
  background: rgba(95,176,255,.14); color: var(--accent);
  text-transform: uppercase; font-size: 10px; letter-spacing: .9px; font-weight: 600;
}
.ctx-badge[hidden] { display: none; }

/* ---------- dialogs ---------- */
dialog {
  padding: 18px 20px 16px; min-width: 340px;
  background: var(--ui-panel-2); color: var(--ui-text);
  border: 1px solid var(--ui-border); border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
dialog::backdrop { background: rgba(8,9,12,.55); }
dialog h2 { margin: 0 0 14px; font-size: 15px; font-weight: 600; }
dialog menu { display: flex; justify-content: flex-end; gap: 8px; margin: 16px 0 0; padding: 0; }
.btn {
  padding: 6px 16px; border-radius: 5px; cursor: pointer;
  background: var(--ui-panel); border: 1px solid var(--ui-border);
}
.btn:hover { background: var(--ui-hover); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); }
.presets { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; max-width: 380px; }
.presets button {
  padding: 5px 10px; border-radius: 4px; cursor: pointer;
  background: var(--ui-panel); border: 1px solid var(--ui-border);
}
.presets button:hover { background: var(--ui-hover); }
.fields { display: flex; gap: 14px; }
.fields label, .export-opts > label { display: flex; flex-direction: column; gap: 5px; color: var(--ui-dim); }
.fields input { width: 90px; text-align: left; }
.check { display: flex; align-items: center; gap: 7px; margin-top: 12px; cursor: pointer; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); margin: 0; }
.note { color: var(--ui-dim); margin: 10px 0 0; min-height: 16px; }
select {
  padding: 4px 6px; background: var(--ui-bg); color: var(--ui-text);
  border: 1px solid var(--ui-border); border-radius: 4px; font: inherit; width: 110px;
}
.name-row { display: flex; flex-direction: column; gap: 5px; color: var(--ui-dim); margin-bottom: 14px; }
.name-row input {
  padding: 5px 8px; background: var(--ui-bg); color: var(--ui-text);
  border: 1px solid var(--ui-border); border-radius: 4px; font: inherit; user-select: text;
}
.name-row input:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
.radios.inline { flex-direction: row; align-items: center; gap: 14px; margin-top: 14px; }
.radios.inline > span { color: var(--ui-dim); }
.close-msg { max-width: 360px; line-height: 1.45; }
.export-body { display: flex; gap: 16px; }
#exPreview, #gxPreview {
  width: 150px; height: 150px; border-radius: 6px; border: 1px solid var(--ui-border);
  background: repeating-conic-gradient(#2a2d33 0% 25%, #33373e 0% 50%) 50% / 14px 14px;
}
#gxPreview { width: 160px; height: 160px; }
/* the new export previews show transparency on a light checkerboard, so dark ink stays readable */
#gxPreview, #shPreview { background: repeating-conic-gradient(#d9dbdf 0% 25%, #eef0f2 0% 50%) 50% / 14px 14px; }
#dlgGif > form > .note { max-width: 420px; line-height: 1.45; }
.export-opts > label.check { flex-direction: row; margin-top: 0; color: var(--ui-text); }
select.wide { width: 220px; }
#shPreview { width: 160px; height: 160px; border-radius: 6px; border: 1px solid var(--ui-border); }
.text-in {
  padding: 4px 7px; background: var(--ui-bg); color: var(--ui-text);
  border: 1px solid var(--ui-border); border-radius: 4px; font: inherit; user-select: text; width: 220px;
}
.text-in:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
#shNote { max-width: 240px; line-height: 1.45; }
.tag-cols-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; color: var(--ui-dim); }
.tag-cols { display: flex; gap: 5px; }
.tag-col { width: 20px; height: 20px; padding: 0; border-radius: 4px; border: 1px solid rgba(255,255,255,.12); cursor: pointer; }
.tag-col.on { outline: 2px solid var(--ui-text); outline-offset: 1px; }
#dlgTag .fields { margin-top: 0; }
#dlgTag .note { max-width: 380px; line-height: 1.45; }
.menu-gap { flex: 1; }
.btn.danger { color: var(--danger); }
.btn.danger:hover { background: rgba(255,107,107,.12); }
.btn:disabled { opacity: .45; cursor: default; }
.op-row { display: flex; align-items: center; gap: 10px; color: var(--ui-dim); }
.op-row input[type=range] { flex: 1; }
.op-row .val { min-width: 36px; color: var(--ui-text); }
.export-opts { display: flex; flex-direction: column; gap: 12px; }
.radios { display: flex; flex-direction: column; gap: 6px; }
.radios label { display: flex; align-items: center; gap: 7px; cursor: pointer; }

.help-cols { display: flex; gap: 26px; }
.help-cols table { border-collapse: collapse; }
.help-cols th { text-align: left; color: var(--accent); font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; padding: 10px 0 4px; }
.help-cols tr:first-child th { padding-top: 0; }
.help-cols td { padding: 3px 14px 3px 0; vertical-align: top; }
.help-cols td:first-child { white-space: nowrap; color: var(--ui-dim); }
.help-cols kbd { padding: 1px 4px; border: 1px solid var(--ui-border); border-bottom-width: 2px; border-radius: 3px; color: var(--ui-text); }

/* ---------- status ---------- */
#status {
  display: flex; align-items: center; gap: 18px;
  padding: 0 12px;
  background: var(--ui-panel);
  border-top: 1px solid var(--ui-border);
  color: var(--ui-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden;
}
#stFile { color: var(--ui-text); max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
#stCoord { min-width: 70px; color: var(--ui-text); }
#cv.moving { cursor: move; }
#cv.placing { cursor: cell; }
.hint { margin-left: auto; }

#toast {
  position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%) translateY(8px);
  padding: 7px 14px; border-radius: 6px;
  background: var(--ui-panel-2); border: 1px solid var(--ui-border); color: var(--ui-text);
  opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }