/* BACKLOT — editor shell
   Dark, low-chroma UI so the 3D world and the render are the only bright things. */

/* Refined scrollbars — thin, muted, navy-tinted so panels read as one surface. */
* { scrollbar-width: thin; scrollbar-color: #26324c transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #26324c; border: 3px solid transparent; background-clip: padding-box; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #33436a; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

:root {
  --bg:          #080b13;
  --bg-2:        #0b0f1b;
  --panel:       #0d1322;
  --panel-2:     #131c30;
  --line:        #1c2740;
  --line-2:      #2a3a5a;
  --text:        #e3e9f5;
  --text-2:      #93a0bc;
  --text-3:      #5e6c8a;
  --accent:      #3d7bff;
  --accent-2:    #9a7bff;
  --accent-ink:  #eef4ff;
  --glow:        rgba(61,123,255,.55);
  --good:        #4ad991;
  --warn:        #ffc46b;
  --bad:         #ff6b6b;
  --left-w:      258px;
  --right-w:     320px;
  --split:       58%;
  --r:           10px;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background:
    radial-gradient(120% 90% at 50% -10%, #101c39 0%, rgba(16,28,57,0) 55%),
    var(--bg);
  color: var(--text);
  font: 13px/1.45 var(--sans);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

body {
  display: grid;
  grid-template-rows: 44px 1fr 138px;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input  { font: inherit; color: inherit; background: none; border: 0; outline: none; }
kbd {
  font: 11px var(--mono); background: var(--panel-2); border: 1px solid var(--line-2);
  border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px;
}
.spacer { flex: 1; }
.hidden { display: none !important; }
.quiet  { color: var(--text-2); }
.small  { font-size: 11px; }

/* ── TOP BAR ─────────────────────────────────────────────────────────── */
#topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px;
  background: linear-gradient(180deg, #101a30, var(--panel));
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; transition: opacity .12s; }
.brand:hover { opacity: .82; }
.brand .mark {
  width: 28px; height: 28px; display: block; object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.55));
}
.brand span { font: 600 13px/1 var(--sans); letter-spacing: .04em; color: var(--text); }

.project-name {
  width: 190px; padding: 5px 9px; border-radius: 6px;
  background: var(--bg-2); border: 1px solid transparent;
  color: var(--text); font-weight: 500;
}
.project-name:hover  { border-color: var(--line-2); }
.project-name:focus  { border-color: var(--accent); background: var(--bg); }

.tb-group { display: flex; gap: 2px; }
.tb {
  padding: 5px 10px; border-radius: 6px; color: var(--text-2);
  transition: background .12s, color .12s;
}
.tb:hover:not(:disabled) { background: var(--panel-2); color: var(--text); }
.tb:disabled { opacity: .3; cursor: default; }
.tb-sep { width: 1px; height: 18px; background: var(--line); }

.pill {
  padding: 3px 9px; border-radius: 999px; font-size: 11px;
  background: var(--panel-2); border: 1px solid var(--line);
  color: var(--text-2); white-space: nowrap;
}
.pill.ok   { color: var(--good); border-color: #1d4536; }
.pill.warn { color: var(--warn); border-color: #4a3a1c; }
.pill.busy { color: var(--accent); border-color: #26365e; }

/* ── MAIN GRID ───────────────────────────────────────────────────────── */
#main {
  display: grid;
  grid-template-columns: var(--left-w) 4px 1fr 4px var(--right-w);
  min-height: 0;
}
.gutter { cursor: col-resize; background: var(--line); transition: background .15s; }
.gutter:hover, .gutter.dragging { background: var(--accent); }

#left, #right {
  background: var(--panel);
  display: flex; flex-direction: column;
  min-height: 0; min-width: 0;
}
#left  { border-right: 1px solid var(--line); }
#right { border-left:  1px solid var(--line); }

.panel-head {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.panel-head.slim { padding: 6px 10px; }
.panel-title {
  font-size: 10px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--text-3);
}
.count {
  font: 10px var(--mono); color: var(--text-3);
  background: var(--bg-2); padding: 1px 6px; border-radius: 999px;
}
.panel-foot {
  display: flex; gap: 5px; padding: 8px 10px;
  border-top: 1px solid var(--line); flex-shrink: 0;
}
.mini {
  padding: 4px 9px; border-radius: 5px; font-size: 11px;
  background: var(--panel-2); border: 1px solid var(--line-2); color: var(--text-2);
}
.mini:hover  { background: var(--line); color: var(--text); }
.mini.danger:hover { background: #3a1d22; color: var(--bad); border-color: #5a2b32; }
.mini:disabled { opacity: .35; cursor: default; }

/* ── LAYER TREE ──────────────────────────────────────────────────────── */
.search-row { padding: 8px 10px 4px; }
.search-row input {
  width: 100%; padding: 5px 9px; border-radius: 6px;
  background: var(--bg-2); border: 1px solid var(--line);
}
.search-row input:focus { border-color: var(--accent); }

.filter-row { display: flex; gap: 4px; padding: 4px 10px 8px; flex-wrap: wrap; }
.chip {
  padding: 3px 8px; border-radius: 999px; font-size: 11px;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--text-2);
}
.chip:hover  { border-color: var(--line-2); color: var(--text); }
.chip.active { background: rgba(61,123,255,.16); border-color: var(--accent); color: #cfe0ff; }

.tree { flex: 1; overflow-y: auto; padding: 2px 6px 10px; }

.tree-section {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 6px 4px; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3); font-weight: 700;
}

.row {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px; border-radius: 6px; cursor: pointer;
  border: 1px solid transparent; user-select: none;
}
.row:hover { background: var(--panel-2); }
.row.selected { background: #1a2340; border-color: #2f4380; }
.row.locked .row-name { color: var(--text-3); }
.row.hidden-layer { opacity: .45; }
.row[data-depth="1"] { margin-left: 14px; }
.row[data-depth="2"] { margin-left: 28px; }

/* An uploaded world, as one openable line. Reads as a heading rather than a peer of
 * the layers inside it — otherwise the folder is just another row in the pile it was
 * introduced to tidy up. */
.world-folder {
  margin-top: 3px; padding: 5px 6px;
  background: var(--bg-2); border-color: var(--line);
  font-weight: 600; letter-spacing: .01em;
}
.world-folder:hover { background: var(--panel-2); border-color: var(--line-2); }
.world-folder.open { background: #171d2b; }
.world-folder .row-name { color: var(--text); text-transform: none; }
/* The arrow is the control that opens the folder, so it has to look like one. At 9px
 * in the dimmest text colour it read as a speck of punctuation and the row looked like
 * it did nothing. */
.fold-arrow {
  width: 14px; text-align: center; font-size: 12px; line-height: 1;
  color: var(--text-2); flex-shrink: 0; cursor: pointer;
  transition: color .12s;
}
.world-folder:hover .fold-arrow,
.world-folder.open .fold-arrow { color: var(--accent); }
/* The children of an open world hang off it, so where one place ends and the next
 * begins is visible without reading a single name. */
.world-folder.open + .row { margin-top: 1px; }

.swatch {
  width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14);
}
.row-icon { width: 14px; text-align: center; font-size: 11px; color: var(--text-3); flex-shrink: 0; }
.row-name {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row-name[contenteditable="true"] {
  background: var(--bg); outline: 1px solid var(--accent);
  border-radius: 3px; padding: 0 3px;
}
.row-badge {
  font: 10px var(--mono); color: var(--text-3);
  background: var(--bg-2); padding: 0 5px; border-radius: 4px;
}
.row-badge.hero { color: var(--warn); background: #3a2e18; }
.row-btn {
  width: 18px; height: 18px; border-radius: 4px; font-size: 11px;
  color: var(--text-3); display: grid; place-items: center; flex-shrink: 0;
}
.row-btn:hover { background: var(--line); color: var(--text); }
.row-btn.on { color: var(--accent); }

/* ── VIEWPORT ────────────────────────────────────────────────────────── */
#center { display: grid; grid-template-rows: var(--split) 5px 1fr; min-height: 0; min-width: 0; }
#viewport-wrap { position: relative; min-height: 0; background: #15171c; overflow: hidden; }
#viewport { position: absolute; inset: 0; }
#viewport canvas { display: block; }

.split-handle { background: var(--line); cursor: row-resize; }
.split-handle:hover, .split-handle.dragging { background: var(--accent); }

/* A COLUMN down the left edge, not a bar across the top.
 *
 * Laid out horizontally it ran across the widest part of the viewport, sitting over
 * the scene at exactly the height most sets are built at, and it read like a browser
 * toolbar rather than an editor's. Every tool that does this puts its tools in a
 * vertical strip against the frame: it costs the narrowest part of the screen, it is
 * one flick of the wrist from anywhere, and it leaves the picture alone. */
.vp-toolbar {
  position: absolute; top: 10px; left: 10px; z-index: 5;
  display: flex; flex-direction: column; align-items: stretch; gap: 3px; padding: 4px;
  background: rgba(14,17,24,.86); backdrop-filter: blur(10px);
  border: 1px solid var(--line-2); border-radius: 10px;
  box-shadow: 0 6px 22px rgba(0,0,0,.4);
}
.vpb {
  width: 30px; height: 28px; padding: 0; border-radius: 7px;
  font-size: 12px; color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
}
.vpb:hover  { background: var(--line); color: var(--text); }
.vpb.active {
  background: linear-gradient(180deg, #4d86ff, #2f63f0); color: var(--accent-ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 3px 10px -4px var(--glow);
}
/* Horizontal rule between groups now that the strip runs downward. */
.vp-sep { width: 100%; height: 1px; background: var(--line-2); margin: 2px 0; }

.vp-hint {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  color: #4b5364; font-size: 13px; pointer-events: none; text-align: center;
}

/* Marquee (box) selection — Shift+drag on empty ground. */
.marquee-box {
  position: absolute; z-index: 7; pointer-events: none;
  border: 1px solid var(--accent);
  background: rgba(90,120,220,.15);
  border-radius: 2px;
}
.vp-readout {
  position: absolute; left: 10px; bottom: 10px; z-index: 5;
  font: 11px var(--mono); color: var(--text-3);
  background: rgba(14,17,24,.8); padding: 4px 8px; border-radius: 6px;
  border: 1px solid var(--line); pointer-events: none; white-space: pre;
}
.camera-hud {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  z-index: 6; padding: 7px 14px; border-radius: 999px;
  background: rgba(124,156,255,.13); border: 1px solid var(--accent);
  color: var(--accent); font-size: 12px; pointer-events: none;
}

/* Paint tool — palette + crosshair. */
body.tool-paint #viewport canvas { cursor: crosshair; }
.paint-palette {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  z-index: 7; width: 320px; padding: 10px 12px; border-radius: 12px;
  background: rgba(14,17,24,.96); border: 1px solid var(--line-2);
  box-shadow: 0 12px 34px rgba(0,0,0,.55);
}
.pp-title { font-size: 11.5px; color: var(--text-2); margin-bottom: 8px; }
.pp-swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; margin-bottom: 8px; }
.pp-sw {
  height: 22px; border-radius: 6px; border: 1px solid rgba(255,255,255,.14); cursor: pointer; padding: 0;
}
.pp-sw.on { outline: 2px solid #fff; outline-offset: 1px; }
.pp-row { display: flex; align-items: center; gap: 7px; }
.pp-picker { width: 30px; height: 28px; padding: 2px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.pp-text {
  flex: 1; min-width: 0; padding: 6px 8px; border-radius: 6px;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--text); font-size: 11.5px;
}
.pp-text:focus { outline: none; border-color: var(--accent); }
.pp-current { width: 26px; height: 26px; border-radius: 6px; border: 1px solid rgba(255,255,255,.2); }
.pp-whole { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11px; color: var(--text-2); cursor: pointer; }
.pp-whole input { width: 13px; height: 13px; accent-color: var(--accent); }

/* Cut tool — crosshair cursor + the smart "make more?" prompt. */
body.tool-cut #viewport canvas { cursor: crosshair; }
.cut-hint {
  position: absolute; top: 52px; left: 50%; transform: translateX(-50%);
  z-index: 6; display: none; padding: 6px 14px; border-radius: 999px;
  background: rgba(90,209,255,.14); border: 1px solid #5ad1ff; color: #bfe9ff;
  font-size: 12px; white-space: nowrap; pointer-events: none;
}
.cut-hint b { color: #fff; }
body.tool-cut .cut-hint { display: block; }
.cut-prompt {
  position: fixed; z-index: 60; min-width: 190px;
  background: rgba(14,17,24,.97); border: 1px solid var(--line-2); border-radius: 10px;
  padding: 10px; box-shadow: 0 12px 34px rgba(0,0,0,.55);
  display: flex; flex-direction: column; gap: 6px;
}
.cp-title { font-size: 11.5px; color: var(--text-2); margin-bottom: 2px; }
.cp-btn {
  width: 100%; padding: 7px 10px; border-radius: 7px; cursor: pointer;
  background: var(--accent); border: none; color: #0a0c11; font-size: 12px; font-weight: 600;
}
.cp-btn.ghost { background: transparent; border: 1px solid var(--line-2); color: var(--text-2); font-weight: 400; }
.cp-btn:hover { filter: brightness(1.08); }

/* Vertical height column (left of the viewport). */
/* The object/character height rail sits BELOW the vertical tool strip and aligned
 * under it, not down the middle of the left edge where it used to overlap the tools.
 * Compact on purpose — the non-linear mapping (see manipulate.js) keeps it precise
 * despite the short travel, so a small rail still reaches from a ledge to the sky. */
/* Left side of the engineering view: the tool strip lives top-left, and the height
 * control sits BOTTOM-left, small — one column of controls down the left edge. The
 * non-linear mapping keeps this compact rail precise from a ledge to the sky (see
 * manipulate.js). Bottom-right is taken by the nav buttons and camera preview. */
.vp-height {
  position: absolute; left: 12px; bottom: 22px; top: auto; width: 38px;
  z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 5px;
  user-select: none;
}
.vh-track {
  position: relative; width: 8px; height: 118px; border-radius: 5px;
  background: rgba(14,17,24,.85); border: 1px solid var(--line-2); cursor: ns-resize;
}
.vh-fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0;
  background: linear-gradient(var(--accent), #4ad991); border-radius: 5px; opacity: .5;
}
.vh-handle {
  position: absolute; left: 50%; bottom: 0; width: 15px; height: 15px;
  transform: translate(-50%, 50%); border-radius: 50%;
  background: var(--accent); border: 2px solid #fff; cursor: grab; box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.vh-handle:active { cursor: grabbing; }
.vh-rest {
  position: absolute; left: 14px; bottom: -6px; font: 8px var(--mono);
  color: var(--text-3); white-space: nowrap; pointer-events: none;
}
.vh-label {
  font: 10px var(--mono); color: var(--text-2); background: rgba(14,17,24,.85);
  padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line);
}

/* Camera height rail. A taller track than the object column, because it spans
   ground level all the way to an aerial plate, and it sits above the HUD. */
/* Height adapts to the viewport so the title and readout are never clipped off
   the top and bottom in a short window. */
/* The camera rail shares the bottom-left spot (it only shows during camera placement,
 * when the object rail is hidden). A touch taller than the object rail because it
 * spans ground to an aerial plate, but still compact. */
.cam-height { z-index: 8; gap: 6px; bottom: 22px; top: auto; transform: none; }
.cam-height .vh-track { height: min(170px, 34vh); width: 10px; cursor: ns-resize; }
.cam-height .vh-label { font-size: 10px; padding: 1px 6px; }
.cam-height .vh-fill { background: linear-gradient(#ff5566, #ffc46b); opacity: .6; }
.cam-height .vh-handle { background: #ff5566; width: 16px; height: 16px; }
.ch-title {
  font: 9px/1.3 var(--mono); letter-spacing: .08em; color: var(--text-3);
  text-align: center; white-space: nowrap;
}
.ch-note {
  font: 9px var(--mono); color: var(--text-3); white-space: nowrap;
  background: rgba(14,17,24,.85); padding: 1px 6px; border-radius: 5px;
}

/* On-screen navigation cluster + help. */
.vp-nav {
  position: absolute; right: 10px; bottom: 10px; z-index: 6;
  display: flex; flex-direction: column; gap: 5px;
}
.navb {
  width: 30px; height: 30px; border-radius: 7px; cursor: pointer;
  background: rgba(14,17,24,.85); border: 1px solid var(--line-2);
  color: var(--text-2); font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.navb:hover { background: var(--panel-2); color: var(--text); border-color: var(--accent); }
.nav-help {
  position: absolute; right: 48px; bottom: 10px; z-index: 7; width: 268px;
  background: rgba(14,17,24,.96); border: 1px solid var(--line-2); border-radius: 10px;
  padding: 12px 13px; font-size: 11.5px; color: var(--text-2); line-height: 1.55;
  box-shadow: 0 10px 34px rgba(0,0,0,.5);
}
.nav-help b { color: var(--text); display: block; margin-bottom: 4px; font-size: 12px; }
.nav-help div { display: flex; gap: 8px; }
.nav-help div span:first-child { color: var(--accent); min-width: 78px; display: inline-block; }
.nav-help kbd {
  font: 10px var(--mono); background: var(--panel-2); border: 1px solid var(--line-2);
  border-radius: 4px; padding: 0 4px; color: var(--text);
}

/* Turn row: slider + quick 90° buttons. */
.turn-row { display: flex; align-items: center; gap: 6px; }
.turn-row input[type="range"] { flex: 1; }
.btn.mini {
  width: auto; margin: 0; padding: 4px 8px; font-size: 11px; white-space: nowrap;
  flex: 0 0 auto;
}
.pip {
  position: absolute; right: 10px; bottom: 10px; z-index: 5;
  border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden;
  background: #000; box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
/* The panel's width is a variable so it can be dragged. Height follows from the
   shot's aspect ratio — a 9:16 shot must stay 9:16, so only ONE dimension is the
   user's to set; letting them drag both would let them make a portrait shot look
   landscape, which is the one thing this preview exists to prevent. */
.pip { --pip-w: 320px; }
.pip canvas { display: block; width: var(--pip-w); height: auto; }
.pip-grip {
  position: absolute; left: 0; top: 0; width: 20px; height: 20px;
  cursor: nwse-resize; z-index: 2;
  background:
    linear-gradient(135deg, rgba(255,255,255,.55) 0 1.5px, transparent 1.5px 4px,
                            rgba(255,255,255,.55) 4px 5.5px, transparent 5.5px 8px,
                            rgba(255,255,255,.55) 8px 9.5px, transparent 9.5px);
}
.pip.resizing { user-select: none; }
.pip-label {
  position: absolute; left: 6px; top: 4px; font: 10px var(--mono);
  color: rgba(255,255,255,.75); text-shadow: 0 1px 3px #000;
}

/* ── OUTPUT ──────────────────────────────────────────────────────────── */
#output-wrap { display: flex; flex-direction: column; min-height: 0; background: var(--bg-2); }
.out-tabs { display: flex; gap: 4px; }
#output-body { flex: 1; overflow: auto; display: grid; place-items: center; padding: 10px; }
#output-body .empty { color: var(--text-3); font-size: 12px; }
#output-body img { max-width: 100%; max-height: 100%; border-radius: 6px; display: block; }
.maps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; width: 100%; }
.map-card { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #000; }
.map-card img { width: 100%; display: block; }
.map-card .cap { font: 10px var(--mono); color: var(--text-3); padding: 3px 6px; background: var(--panel); }
.xray { width: 100%; font: 11.5px/1.6 var(--mono); color: var(--text-2); white-space: pre-wrap; padding: 4px; }
.xray .src { color: var(--accent); }
.note-banner {
  width: 100%; padding: 8px 11px; border-radius: 6px; font-size: 11.5px;
  background: #2a2416; border: 1px solid #4a3a1c; color: var(--warn); margin-bottom: 8px;
}

/* ── RIGHT RAIL ──────────────────────────────────────────────────────── */
.rail { flex: 1; overflow-y: auto; padding: 4px 0 14px; }
.step { border-bottom: 1px solid var(--line); }
.step-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 12px; text-align: left;
}
.step-head:hover { background: var(--panel-2); }
.step-num {
  width: 17px; height: 17px; border-radius: 5px; flex-shrink: 0;
  display: grid; place-items: center; font: 10px var(--mono);
  background: var(--bg-2); border: 1px solid var(--line-2); color: var(--text-3);
}
.step.open .step-num {
  background: linear-gradient(180deg, #4d86ff, #2f63f0);
  border-color: #5a90ff; color: var(--accent-ink);
  box-shadow: 0 3px 10px -3px var(--glow);
}
.step-title { flex: 1; font-size: 12px; font-weight: 500; }
.step-caret { color: var(--text-3); font-size: 10px; transition: transform .15s; }
.step.open .step-caret { transform: rotate(90deg); }
.step-body { padding: 2px 12px 14px; display: none; }
.step.open .step-body { display: block; }

.field { margin-bottom: 9px; }
.field > label {
  display: block; font-size: 10.5px; color: var(--text-3);
  margin-bottom: 4px; letter-spacing: .04em;
}
.field input[type="text"], .field textarea, .field select {
  width: 100%; padding: 6px 8px; border-radius: 6px;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--text);
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); }
.field textarea { resize: vertical; min-height: 62px; font: 12px/1.5 var(--sans); }
.field select { cursor: pointer; }

.row-fields { display: flex; gap: 6px; }
.row-fields .field { flex: 1; margin-bottom: 9px; }

.num-row { display: flex; gap: 5px; }
.num {
  flex: 1; display: flex; align-items: center; gap: 4px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px;
}
.num span { font: 9px var(--mono); color: var(--text-3); }
.num input { width: 100%; font: 11px var(--mono); }

input[type="range"] { width: 100%; accent-color: var(--accent); }

.btn {
  width: 100%; padding: 8px 12px; border-radius: 7px; font-size: 12px; font-weight: 500;
  background: var(--panel-2); border: 1px solid var(--line-2); color: var(--text);
  transition: background .12s, border-color .12s;
}
.btn:hover:not(:disabled) { background: var(--line); border-color: #38425c; }
.btn:disabled { opacity: .4; cursor: default; }
.btn.primary {
  background: linear-gradient(180deg, #4d86ff, #2f63f0);
  border-color: #5a90ff; color: var(--accent-ink); font-weight: 600;
  box-shadow: 0 6px 18px -6px var(--glow), inset 0 1px 0 rgba(255,255,255,.15);
}
.btn.primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #5c92ff, #3a6ff5);
  box-shadow: 0 8px 22px -6px var(--glow), inset 0 1px 0 rgba(255,255,255,.2);
}
.btn.ghost { background: transparent; }
.btn + .btn { margin-top: 6px; }

.obj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.obj-btn {
  padding: 9px 4px; border-radius: 7px; text-align: center; font-size: 10.5px;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--text-2);
}
.obj-btn:hover { border-color: var(--accent); color: var(--text); background: #161c2c; }
.obj-btn .glyph { display: block; font-size: 17px; margin-bottom: 2px; color: var(--text-3); }
.obj-btn:hover .glyph { color: var(--accent); }

.char-card {
  display: flex; align-items: center; gap: 8px; padding: 7px;
  border-radius: 7px; background: var(--bg-2); border: 1px solid var(--line);
  margin-bottom: 6px;
}
.char-card .dot { width: 11px; height: 11px; border-radius: 4px; flex-shrink: 0; }
.char-card .nm { flex: 1; font-size: 12px; }

.hint { font-size: 10.5px; color: var(--text-3); line-height: 1.5; margin-top: 6px; }
.hint b { color: var(--text-2); font-weight: 600; }

.kv { display: flex; justify-content: space-between; font-size: 11px; padding: 2px 0; }
.kv span:first-child { color: var(--text-3); }
.kv span:last-child { font-family: var(--mono); }

.warn-list { margin-top: 8px; }
.warn-item {
  display: flex; gap: 6px; padding: 5px 7px; border-radius: 5px; font-size: 11px;
  background: #2a2416; color: var(--warn); margin-bottom: 4px; line-height: 1.4;
}
.warn-item.bad { background: #2f1a1c; color: var(--bad); }
.warn-item.ok  { background: #172b22; color: var(--good); }

.progress { height: 3px; background: var(--line); border-radius: 999px; overflow: hidden; margin-top: 8px; }
.progress > i { display: block; height: 100%; background: var(--accent); transition: width .25s; }

/* ── TIMELINE ────────────────────────────────────────────────────────── */
#timeline {
  background: var(--panel); border-top: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0;
}
.tl-head { display: flex; align-items: center; gap: 8px; padding: 7px 12px; flex-shrink: 0; }
.delta { font: 10.5px var(--mono); color: var(--text-3); margin-right: 8px;
         overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw; }
.strip { flex: 1; display: flex; gap: 8px; padding: 0 12px 10px; overflow-x: auto; align-items: stretch; }

.shot {
  width: 138px; flex-shrink: 0; border-radius: 8px; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--line);
  display: flex; flex-direction: column; overflow: hidden;
  transition: border-color .12s, transform .12s;
}
.shot:hover  { border-color: var(--line-2); }
.shot.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.shot-thumb {
  flex: 1; background: #0b0d12; display: grid; place-items: center;
  color: #363d4d; font-size: 10px; overflow: hidden; min-height: 0;
}
.shot-thumb img { width: 100%; height: 100%; object-fit: cover; }
.shot-foot { display: flex; align-items: center; gap: 5px; padding: 4px 7px; border-top: 1px solid var(--line); }
.shot-idx { font: 10px var(--mono); color: var(--text-3); }
.shot-name { flex: 1; font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shot-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--text-3); }
.shot-dot.generated { background: var(--accent); }
.shot-dot.approved  { background: var(--good); }
.shot-add {
  width: 44px; flex-shrink: 0; border: 1px dashed var(--line-2); border-radius: 8px;
  color: var(--text-3); font-size: 17px; background: transparent;
}
.shot-add:hover { border-color: var(--accent); color: var(--accent); }

/* ── TOASTS / MODAL ──────────────────────────────────────────────────── */
#toasts { position: fixed; right: 14px; bottom: 152px; z-index: 100; display: flex;
          flex-direction: column; gap: 6px; align-items: flex-end; }
.toast {
  padding: 8px 13px; border-radius: 7px; font-size: 12px; max-width: 340px;
  background: var(--panel-2); border: 1px solid var(--line-2);
  box-shadow: 0 8px 26px rgba(0,0,0,.5); animation: slidein .18s ease;
}
.toast.warn { border-color: #4a3a1c; color: var(--warn); }
.toast.bad  { border-color: #5a2b32; color: var(--bad); }
.toast.ok   { border-color: #1d4536; color: var(--good); }
@keyframes slidein { from { opacity: 0; transform: translateX(14px); } }

#modal-root:empty { display: none; }
.modal-back {
  position: fixed; inset: 0; z-index: 200; background: rgba(4,6,10,.68);
  display: grid; place-items: center; backdrop-filter: blur(3px);
}
.modal {
  width: 460px; max-width: 92vw; max-height: 80vh; overflow: auto;
  background: var(--panel); border: 1px solid var(--line-2);
  border-radius: 12px; box-shadow: 0 24px 70px rgba(0,0,0,.6);
}
.modal h3 { padding: 14px 16px; font-size: 13px; border-bottom: 1px solid var(--line); font-weight: 600; }
.modal .body { padding: 14px 16px; }
.modal .foot { padding: 12px 16px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; }
.modal .foot .btn { width: auto; padding: 7px 16px; }
.proj-item {
  display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 7px; cursor: pointer;
}
.proj-item:hover { background: var(--panel-2); }
.proj-item .nm { flex: 1; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #262d3c; border-radius: 999px; border: 2px solid var(--panel); }
::-webkit-scrollbar-thumb:hover { background: #354055; }

/* ── floating viewport labels ────────────────────────────────────────── */
.label-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.vp-label {
  position: absolute; top: 0; left: 0; pointer-events: auto; cursor: pointer;
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 2px 8px 2px 6px; border-radius: 999px; font-size: 11px;
  background: rgba(12,15,22,.85); border: 1px solid var(--line-2);
  color: var(--text); backdrop-filter: blur(6px);
}
.vp-label i { width: 7px; height: 7px; border-radius: 2px; display: block; }
.vp-label.sel { border-color: var(--accent); color: var(--accent); }
.vp-label::after {
  content: ''; position: absolute; left: 50%; bottom: -5px; width: 1px; height: 5px;
  background: var(--line-2); transform: translateX(-50%);
}

/* The world's own name — the one piece of text that stays on the board.
 * Quiet by default so it titles the set instead of competing with it, and it
 * brightens on hover because it is also the control that renames it. */
.vp-title {
  position: absolute; top: 0; left: 0; pointer-events: auto; cursor: text;
  white-space: nowrap; padding: 3px 12px; border-radius: 8px;
  font-size: 15px; font-weight: 600; letter-spacing: .01em;
  color: var(--text-2); background: rgba(12,15,22,.42);
  border: 1px solid transparent; backdrop-filter: blur(3px);
  transition: color .12s, border-color .12s, background .12s;
}
.vp-title:hover {
  color: var(--text); border-color: var(--line-2); background: rgba(12,15,22,.8);
}

/* @-mention picker in the prompt box — pick a defined character by name. */
.mention-pop {
  position: absolute; left: 8px; right: 8px; top: 100%; margin-top: 4px; z-index: 40;
  background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 9px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5); overflow: hidden; padding: 4px;
}
.mention-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px;
  cursor: pointer; font-size: 13px; color: var(--text);
}
.mention-item.sel, .mention-item:hover { background: #24325c; }
.mention-dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(255,255,255,.15); }
.mention-name { flex: 1; }
.mention-face { font-size: 10px; color: var(--accent); background: rgba(90,120,220,.14); padding: 1px 6px; border-radius: 999px; }

/* ── control-map preview overlay ─────────────────────────────────────── */
.map-overlay {
  position: absolute; inset: 0; z-index: 4; background: #000;
  display: grid; place-items: center;
}
.map-overlay img { max-width: 100%; max-height: 100%; display: block; }
.map-tag {
  position: absolute; left: 12px; bottom: 12px; font: 11px var(--mono);
  color: var(--text-2); background: rgba(12,15,22,.85);
  padding: 4px 9px; border-radius: 6px; border: 1px solid var(--line);
}

/* ── misc panel bits ─────────────────────────────────────────────────── */
.ref-thumb {
  width: 100%; border-radius: 7px; display: block; margin-bottom: 8px;
  border: 1px solid var(--line-2); max-height: 120px; object-fit: cover;
}

/* Upload zone — accepts click, drag-and-drop, and paste (⌘V). */
.dropzone {
  border: 1.5px dashed var(--line-2); border-radius: 9px;
  padding: 10px; margin-bottom: 8px; outline: none;
  transition: border-color .12s, background .12s;
}
.dropzone:focus-within { border-color: var(--line-2); }
.dropzone.drag {
  border-color: var(--accent); background: rgba(124,156,255,.10);
}
.dropzone .btn { margin-bottom: 0; }
.dz-hint {
  margin-top: 8px; text-align: center; font-size: 10.5px;
  color: var(--text-3); letter-spacing: .01em; pointer-events: none;
}
.dropzone.drag .dz-hint { color: var(--accent); }

/* Thumbnail strip for multiple reference photos. */
.ref-strip {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px;
}
.ref-tile {
  position: relative; width: 64px; height: 64px; border-radius: 7px;
  overflow: hidden; border: 1px solid var(--line-2);
}
.ref-tile.primary { border-color: var(--accent); }
.ref-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ref-del {
  position: absolute; top: 2px; right: 2px; width: 17px; height: 17px;
  border: none; border-radius: 50%; background: rgba(0,0,0,.66); color: #fff;
  font-size: 13px; line-height: 15px; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.ref-del:hover { background: #d3405a; }
.ref-badge {
  position: absolute; bottom: 2px; left: 2px; font: 8.5px var(--mono);
  color: #fff; background: rgba(124,156,255,.85); padding: 1px 4px; border-radius: 3px;
}

/* Summon an object — name field + button, wrapped in a dropzone. */
.summon-row { display: flex; gap: 6px; align-items: center; }
.summon-row input {
  flex: 1; min-width: 0; padding: 7px 9px; border-radius: 7px;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--text); font-size: 12px;
}
.summon-row input:focus { border-color: var(--accent); outline: none; }
.obj-cat-label {
  font: 10px var(--mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3); margin: 11px 0 5px;
}

.chk {
  display: flex; align-items: center; gap: 7px; margin: 8px 0 2px;
  font-size: 12px; color: var(--text-2); cursor: pointer;
}
.chk input { width: 14px; height: 14px; accent-color: var(--accent); }

/* Time-of-day: a sky strip with a sun/moon that rides the hour. */
.sky-strip {
  position: relative; height: 40px; border-radius: 9px; overflow: hidden;
  border: 1px solid var(--line-2); margin: 6px 0 8px;
}
.sky-orb {
  position: absolute; width: 16px; height: 16px; border-radius: 50%;
  transform: translate(-50%, 50%);
}
.sky-orb.sun  { background: #ffe08a; box-shadow: 0 0 14px 4px rgba(255,214,120,.75); }
.sky-orb.moon { background: #dfe6f2; box-shadow: 0 0 10px 2px rgba(210,224,246,.5); }

/* Weather — visual tiles, each drawing its own little scene. */
.weather-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.wx-tile {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 5px 2px 6px; border-radius: 9px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line);
}
.wx-tile:hover { border-color: var(--line-2); }
.wx-tile.on { border-color: var(--accent); background: #18203a; }
.wx-name { font-size: 9.5px; color: var(--text-2); }
.wx-tile.on .wx-name { color: var(--accent); }
.wx-art {
  position: relative; width: 100%; height: 30px; border-radius: 6px; overflow: hidden;
  background: linear-gradient(#3f7fd6, #a9cbef);
}
/* clear: a sun */
.wx-clear::before {
  content: ''; position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
  width: 12px; height: 12px; border-radius: 50%; background: #ffdf7a;
  box-shadow: 0 0 8px 2px rgba(255,223,122,.8);
}
/* a reusable cloud for overcast/rain/snow */
.wx-overcast, .wx-rain, .wx-snow { background: linear-gradient(#8a96a8, #b9c2cf); }
.wx-overcast::before, .wx-rain::before, .wx-snow::before {
  content: ''; position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 26px; height: 11px; border-radius: 8px; background: #eef1f5;
  box-shadow: -8px 2px 0 -1px #e2e7ee, 8px 2px 0 -1px #e2e7ee;
}
/* rain: streaks */
.wx-rain::after {
  content: ''; position: absolute; inset: 17px 6px 0; border-radius: 2px;
  background-image: repeating-linear-gradient(20deg, #cfe0f2 0 1.5px, transparent 1.5px 6px);
}
/* snow: dots */
.wx-snow::after {
  content: ''; position: absolute; inset: 17px 4px 0;
  background-image: radial-gradient(#fff 40%, transparent 42%);
  background-size: 8px 8px; opacity: .9;
}
/* fog: soft bands */
.wx-fog { background: linear-gradient(#9aa2ac, #c9cfd7); }
.wx-fog::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.55) 0 3px, transparent 3px 8px);
}

/* Worlds in the scene — one card per uploaded reference/world. */
.world-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 9px; }
.world-tile {
  position: relative; width: 92px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--line-2); background: var(--panel-2);
}
.world-tile.primary { border-color: var(--accent); }
.world-tile img, .world-tile .world-noimg {
  width: 100%; height: 64px; object-fit: cover; display: flex;
  align-items: center; justify-content: center; color: var(--text-3); font: 14px var(--mono);
}
.world-name {
  display: block; padding: 3px 5px; font-size: 10px; line-height: 1.25;
  color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tree-empty {
  padding: 22px 14px; text-align: center; color: var(--text-3);
  font-size: 11.5px; line-height: 1.7;
}
.obj-btn.active { border-color: var(--accent); color: var(--accent); background: #18203a; }
.inspector { background: var(--panel-2); border-bottom: 2px solid var(--line-2); }
.inspector .step-num { border-radius: 4px; }
.cmp-tag {
  font: 10px var(--mono); color: #fff; background: rgba(0,0,0,.6);
  padding: 2px 7px; border-radius: 4px; pointer-events: none;
}
.cmp-range { accent-color: var(--accent); }

/* ── cinema mode (Tab) ───────────────────────────────────────────────── */
body.cinema #left, body.cinema #right, body.cinema #timeline,
body.cinema .gutter { display: none; }
body.cinema #main { grid-template-columns: 1fr; }
body.cinema { grid-template-rows: 44px 1fr; }

/* ── direct manipulation ─────────────────────────────────────────────── */
.drag-readout {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%);
  z-index: 7; padding: 5px 13px; border-radius: 999px;
  background: rgba(124,156,255,.16); border: 1px solid var(--accent);
  color: var(--accent); font: 12px var(--mono); pointer-events: none;
  white-space: nowrap;
}
.drag-readout.hidden { display: none; }

/* ── context menu ────────────────────────────────────────────────────── */
.ctx-menu {
  position: fixed; z-index: 300; min-width: 178px; padding: 4px;
  background: var(--panel); border: 1px solid var(--line-2);
  border-radius: 9px; box-shadow: 0 14px 40px rgba(0,0,0,.6);
}
.ctx-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 6px 10px; border-radius: 6px; font-size: 12px; text-align: left;
  color: var(--text-2);
}
.ctx-item:hover { background: var(--panel-2); color: var(--text); }
.ctx-item.danger:hover { background: #3a1d22; color: var(--bad); }
.ctx-item .k { margin-left: auto; font: 10px var(--mono); color: var(--text-3); }
.ctx-sep { height: 1px; margin: 4px 6px; background: var(--line); }
.ctx-head {
  padding: 6px 10px 4px; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3); display: flex; gap: 7px; align-items: center;
}
.ctx-head i { width: 8px; height: 8px; border-radius: 3px; display: block; }

/* ── composition overlay ─────────────────────────────────────────────── */
.comp-overlay { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.comp-overlay svg { position: absolute; inset: 0; }
.comp-overlay .g-third   { stroke: rgba(255,255,255,.28); stroke-width: 1; }
.comp-overlay .g-safe    { fill: none; stroke: rgba(255,255,255,.34); stroke-width: 1; stroke-dasharray: 7 6; }
.comp-overlay .g-title   { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 1; stroke-dasharray: 3 7; }
.comp-overlay .g-centre  { stroke: rgba(255,255,255,.6); stroke-width: 1.5; }
.comp-overlay .g-horizon { stroke: rgba(124,196,255,.75); stroke-width: 1.5; stroke-dasharray: 12 7; }
.comp-warn {
  position: absolute; left: 12px; top: 12px; display: flex;
  flex-direction: column; gap: 4px; align-items: flex-start;
}
.comp-warn span {
  padding: 3px 9px; border-radius: 5px; font-size: 11px;
  background: rgba(42,36,22,.92); color: var(--warn); border: 1px solid #4a3a1c;
}

/* ── guide toggles ───────────────────────────────────────────────────── */
.guide-row { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
.guide-row .chip.on { background: #1b2544; border-color: var(--accent); color: var(--accent); }


/* ── output actions ──────────────────────────────────────────────────── */
.out-actions { display: flex; gap: 3px; margin-left: 8px; }
.out-btn {
  width: 26px; height: 22px; border-radius: 5px; font-size: 12px;
  color: var(--text-2); background: var(--bg-2);
  border: 1px solid var(--line); display: grid; place-items: center;
}
.out-btn:hover { background: var(--line); color: var(--text); border-color: var(--line-2); }

#output-body img.clickable { cursor: zoom-in; }

/* ── fullscreen lightbox ─────────────────────────────────────────────── */
.lightbox {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(4,6,10,.96);
  display: grid; place-items: center;
  padding: 26px 26px 62px;
  animation: lbin .14s ease;
}
.lightbox.hidden { display: none; }
@keyframes lbin { from { opacity: 0; } }
.lightbox img {
  max-width: 100%; max-height: 100%;
  object-fit: contain; display: block;
  border-radius: 4px; box-shadow: 0 18px 60px rgba(0,0,0,.7);
}
.lb-bar {
  position: fixed; left: 0; right: 0; bottom: 0; height: 50px;
  display: flex; align-items: center; gap: 6px; padding: 0 16px;
  background: linear-gradient(180deg, transparent, rgba(8,10,15,.92) 45%);
}
.lb-meta { font: 11.5px var(--mono); color: var(--text-2); }
.lb-btn {
  padding: 6px 12px; border-radius: 7px; font-size: 12px;
  background: rgba(255,255,255,.07); border: 1px solid var(--line-2); color: var(--text);
}
.lb-btn:hover { background: rgba(255,255,255,.14); border-color: var(--accent); }


/* ── reference package view ──────────────────────────────────────────── */
.pkg { width: 100%; padding: 2px 4px 12px; }
.pkg-head { font-size: 12px; color: var(--text-2); padding: 4px 2px 10px; }
.pkg-head b { color: var(--accent); }
.warn-inline { color: var(--warn); }
.pkg-sub {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3); font-weight: 700; padding: 14px 2px 6px;
}
.pkg-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.pkg-table th {
  text-align: left; font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600; padding: 4px 8px; border-bottom: 1px solid var(--line);
}
.pkg-table td { padding: 5px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.pkg-table tr:hover td { background: var(--panel-2); }
.pkg-table .slot-n { font: 10px var(--mono); color: var(--text-3); width: 26px; }
.pkg-table .slot-role { font-weight: 600; white-space: nowrap; }
.pkg-table .mono { font: 11px var(--mono); color: var(--text-2); white-space: nowrap; }
.pkg-table .dot {
  width: 8px; height: 8px; border-radius: 2px; display: inline-block;
  margin-right: 7px; vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(255,255,255,.15);
}
.pkg-pre {
  font: 11.5px/1.6 var(--mono); color: var(--text-2); white-space: pre-wrap;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 14px; margin-top: 4px; max-height: none;
}

/* ── continuity anchor ───────────────────────────────────────────────── */
.shot.anchor { border-color: var(--good); }
.shot.anchor.active { box-shadow: 0 0 0 1px var(--good); }
.shot-thumb { position: relative; }
.anchor-tag {
  position: absolute; left: 4px; top: 4px;
  font: 9px var(--mono); color: #0b1a14; background: var(--good);
  padding: 1px 5px; border-radius: 4px; letter-spacing: .04em;
}

/* ── reference slot labels ───────────────────────────────────────────── */
.ref-slot-label {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); font-weight: 700; margin: 4px 0 6px;
}

/* Eraser — a real eraser cursor, so the mode is obvious before you click.
   Drawn inline as an SVG data URI rather than shipped as a file: it is eleven
   lines of markup and this way the cursor can never 404 into a default arrow. */
body.tool-erase #viewport canvas {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><g transform='rotate(-40 14 14)'><rect x='7' y='5' width='14' height='11' rx='2' fill='%23ff8f8f' stroke='%23231416' stroke-width='1.5'/><rect x='7' y='14' width='14' height='7' rx='2' fill='%23f2f2f0' stroke='%23231416' stroke-width='1.5'/></g></svg>") 6 22, crosshair;
}

/* What is about to go, named before you commit to it. */
.erase-hud {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  z-index: 7; display: flex; align-items: center; gap: 14px;
  padding: 8px 14px; border-radius: 11px;
  background: rgba(14, 17, 24, .96); border: 1px solid var(--line-2);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .55);
  font-size: 12px; color: var(--text);
}
.erase-hud.hidden { display: none; }
.erase-hud .eh-what { color: #ffb4b4; }
.erase-hud .eh-whole { display: flex; align-items: center; gap: 6px; color: var(--dim); cursor: pointer; }

/* ── object catalogue ─────────────────────────────────────────────────────
   Folders first, contents on demand. The old panel laid every category out at
   once, which made a short list feel long and left no room to grow — this holds
   ten times as many objects in less space, because you only ever see the one
   drawer you opened. */
.cat-search {
  width: 100%; margin: 10px 0 8px; padding: 7px 10px;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 7px;
  color: var(--text); font-size: 12px; font-family: inherit;
}
.cat-search::placeholder { color: var(--text-3); }
.cat-search:focus { outline: none; border-color: var(--accent); }

.cat-head {
  display: flex; align-items: center; gap: 8px;
  margin: 4px 0 7px; font-size: 12px; color: var(--dim);
}
.cat-back {
  background: none; border: none; color: var(--accent);
  font: inherit; cursor: pointer; padding: 2px 4px; border-radius: 5px;
}
.cat-back:hover { background: rgba(124,156,255,.12); }

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

.cat-folder, .cat-item {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 10px 4px 8px; cursor: pointer;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 8px;
  color: var(--text); font: inherit; text-align: center;
}
.cat-folder:hover, .cat-item:hover { border-color: var(--accent); background: rgba(124,156,255,.10); }
.cf-icon { font-size: 20px; line-height: 1; }
.ci-icon { font-size: 17px; line-height: 1; }
.cf-name, .ci-name {
  font-size: 10.5px; color: var(--dim); line-height: 1.25;
  /* Two lines then ellipsis — "Articulated lorry" must not blow the tile up. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word;
}
.cf-count {
  position: absolute; right: 5px; top: 4px;
  font: 9px var(--mono); color: var(--text-3);
}