/* Cyberhell editor — dark ink/neon, matching the game's palette. */
:root {
  --ink: #06080c;
  --ink2: #0c1018;
  --ink3: #121826;
  --line: #1e2a3d;
  --text: #c8d6e5;
  --dim: #6b7d94;
  --neon: #00ffee;
  --neon2: #00aacc;
  --hot: #ff6600;
  --bad: #ff3355;
  --ok: #44dd88;
}
* { box-sizing: border-box; }
/* An inline display: on an element beats the UA's [hidden] rule, so a panel
   that sets both stays visible. Lanes do exactly that (the auth overlay ships
   hidden=true and display:flex in one cssText), so make hidden mean hidden. */
[hidden] { display: none !important; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--ink); color: var(--text);
  font: 12px/1.4 "Consolas", "Menlo", monospace;
  user-select: none;
}
button, select, input {
  font: inherit; color: var(--text);
  background: var(--ink3); border: 1px solid var(--line);
  padding: 3px 7px; border-radius: 2px;
}
button:hover { border-color: var(--neon2); color: var(--neon); cursor: pointer; }
button:disabled { opacity: .35; cursor: default; }
input[type=text], input[type=number] { background: var(--ink); }

#ed-root { display: flex; flex-direction: column; height: 100%; }

/* ---- menu bar ---- */
#ed-menubar {
  display: flex; align-items: center; gap: 2px;
  background: var(--ink2); border-bottom: 1px solid var(--line);
  padding: 3px 6px; flex: 0 0 auto;
}
#ed-menubar .ed-brand {
  color: var(--neon); letter-spacing: .18em; font-weight: bold;
  padding: 0 12px 0 4px; text-shadow: 0 0 8px var(--neon2);
}
.ed-menu { position: relative; }
.ed-menu > button { background: transparent; border-color: transparent; }
.ed-menu-items {
  display: none; position: absolute; top: 100%; left: 0; z-index: 40;
  min-width: 190px; background: var(--ink3);
  border: 1px solid var(--line); box-shadow: 0 6px 22px #000a;
}
.ed-menu.open .ed-menu-items { display: block; }
.ed-menu-items button {
  display: block; width: 100%; text-align: left; border: 0; border-radius: 0;
  background: transparent; padding: 5px 12px;
}
.ed-menu-items button:hover { background: var(--ink2); }
#ed-menubar .ed-spacer { flex: 1; }
#ed-test-btn { border-color: var(--hot); color: var(--hot); }
#ed-test-btn:hover { background: var(--hot); color: #000; }

/* ---- body ---- */
#ed-body { flex: 1; display: flex; min-height: 0; }

#ed-tools {
  flex: 0 0 52px; background: var(--ink2); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 3px; padding: 5px 4px;
}
#ed-tools button {
  width: 100%; height: 38px; padding: 0; font-size: 10px; line-height: 1.1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
#ed-tools button.active {
  border-color: var(--neon); color: var(--neon); background: #04222a;
  box-shadow: inset 0 0 10px #00ffee22;
}
#ed-tools button b { font-size: 15px; font-weight: normal; }

#ed-centre {
  flex: 1 1 0; position: relative; min-width: 200px; min-height: 0;
  display: flex; flex-direction: column; background: #04060a;
}
#ed-drawer {
  flex: 0 0 auto; display: flex; flex-direction: column;
  border-top: 1px solid var(--line); background: var(--ink2);
  max-height: 40%; min-height: 0;
}
#ed-drawer[hidden] { display: none; }
#ed-drawer-bar { display: flex; align-items: center; border-bottom: 1px solid var(--line); }
#ed-drawer-tabs { display: flex; flex: 1; overflow-x: auto; }
#ed-drawer-tabs button {
  border: 0; border-radius: 0; background: transparent; padding: 5px 10px;
  border-bottom: 2px solid transparent; color: var(--dim); white-space: nowrap;
}
#ed-drawer-tabs button.active { color: var(--neon); border-bottom-color: var(--neon); }
#ed-drawer-toggle { border: 0; background: transparent; padding: 4px 10px; }
#ed-drawer-panels { flex: 1 1 auto; min-height: 0; max-height: 260px; overflow: auto; }
#ed-drawer.collapsed #ed-drawer-panels { display: none; }
#ed-canvas { display: block; flex: 1 1 0; width: 100%; min-height: 140px; cursor: crosshair; }
#ed-canvas.panning { cursor: grabbing; }

/* width is fixed: a wide panel (the MIDI piano roll, a 3D preview canvas) must
   scroll inside its own tab, never push the map canvas out of the layout. */
#ed-right {
  flex: 0 0 320px; width: 320px; max-width: 320px; min-width: 0;
  display: flex; flex-direction: column;
  background: var(--ink2); border-left: 1px solid var(--line);
  min-height: 0; overflow: hidden;
}
#ed-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
#ed-tabs button {
  border: 0; border-radius: 0; background: transparent; padding: 6px 9px;
  border-bottom: 2px solid transparent; color: var(--dim);
}
#ed-tabs button.active { color: var(--neon); border-bottom-color: var(--neon); }
#ed-panels { flex: 1; min-width: 0; overflow: auto; }
.ed-panel { display: none; padding: 8px; max-width: 100%; overflow-x: auto; }
.ed-panel.active { display: block; }
/* Tab visibility is the shell's contract, not a panel's. A lane that sets an
   inline display on its own root would otherwise show through every tab. */
.ed-panel:not(.active) { display: none !important; }
.ed-panel canvas, .ed-panel img, .ed-panel svg { max-width: 100%; }

#ed-bottom {
  flex: 0 0 auto; background: var(--ink2); border-top: 1px solid var(--line);
  display: flex; gap: 14px; padding: 4px 9px; color: var(--dim);
}
#ed-status { display: flex; flex: 1; gap: 16px; align-items: center; }
#ed-bottom .ed-stat b { color: var(--text); font-weight: normal; }
#ed-bottom .ed-spacer { flex: 1; }

/* ---- forms inside panels ---- */
.ed-row { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.ed-row label { flex: 0 0 92px; color: var(--dim); }
.ed-row input, .ed-row select { flex: 1; min-width: 0; }
.ed-row input[type=color] { flex: 0 0 34px; padding: 0; height: 22px; }
.ed-head {
  color: var(--neon); letter-spacing: .12em; margin: 10px 0 6px;
  border-bottom: 1px solid var(--line); padding-bottom: 3px;
}
.ed-head:first-child { margin-top: 0; }
.ed-hint { color: var(--dim); margin: 4px 0 8px; }
.ed-list { border: 1px solid var(--line); max-height: 190px; overflow: auto; }
.ed-list .ed-item {
  padding: 4px 7px; border-bottom: 1px solid #ffffff08; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
}
.ed-list .ed-item:hover { background: var(--ink3); }
.ed-list .ed-item.sel { background: #04222a; color: var(--neon); }
.ed-list .ed-item .ed-grow { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-list .ed-item.drag-over { border-top: 2px solid var(--neon); }
.ed-tag { color: var(--dim); font-size: 10px; }
.ed-btns { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }

.ed-dialog {
  border: 1px solid var(--neon2); border-radius: 2px; padding: 0;
  background: var(--ink2); color: var(--text); min-width: 340px; max-width: 480px;
  box-shadow: 0 12px 40px #000c;
}
.ed-dialog::backdrop { background: #04060acc; }
.ed-dialog form { padding: 14px 16px; }
.ed-dialog h3 {
  margin: 0 0 10px; color: var(--neon); letter-spacing: .12em; font-size: 12px;
  font-weight: bold; border-bottom: 1px solid var(--line); padding-bottom: 6px;
}
.ed-dialog .ed-row label { flex: 0 0 88px; }
.ed-dialog .ed-hint { margin: -2px 0 8px 94px; }
.ed-dialog-btns { display: flex; justify-content: flex-end; gap: 6px; margin-top: 12px; }
.ed-dialog-btns button { padding: 5px 14px; }
.ed-dialog-btns button.primary { border-color: var(--neon); color: var(--neon); }
.ed-dialog-btns button.danger { border-color: var(--bad); color: var(--bad); }

/* ---- toasts ---- */
#ed-toasts {
  position: fixed; right: 336px; bottom: 34px; z-index: 90;
  display: flex; flex-direction: column; gap: 5px; align-items: flex-end;
  pointer-events: none;
}
.ed-toast {
  background: var(--ink3); border: 1px solid var(--neon2); color: var(--text);
  padding: 6px 12px; box-shadow: 0 0 16px #000c;
}
.ed-toast.bad { border-color: var(--bad); color: #ffb0bd; }
.ed-toast.ok { border-color: var(--ok); color: #b6f2d2; }
.ed-toast.warn { border-color: #d7a53c; color: #f2dcae; }