:root {
  --bg: #1e1f26;
  --panel: #262833;
  --panel2: #2e3040;
  --ink: #e8e9ee;
  --muted: #9aa0b0;
  --accent: #4f8cff;
  --accent2: #37c8a0;
  --danger: #e05b5b;
  --border: #3a3d4d;
  --shadow: 0 4px 24px rgba(0, 0, 0, .35);
}

/* bundled font library (self-contained; no CDN at runtime) */
@font-face { font-family: "Caveat"; src: url("../fonts/Caveat.ttf") format("truetype"); }
@font-face { font-family: "Dancing Script"; src: url("../fonts/DancingScript.ttf") format("truetype"); }
@font-face { font-family: "Shadows Into Light"; src: url("../fonts/ShadowsIntoLight.ttf") format("truetype"); }
@font-face { font-family: "Patrick Hand"; src: url("../fonts/PatrickHand.ttf") format("truetype"); }
@font-face { font-family: "Satisfy"; src: url("../fonts/Satisfy.ttf") format("truetype"); }
@font-face { font-family: "Kalam"; src: url("../fonts/Kalam.ttf") format("truetype"); }
@font-face { font-family: "Playfair Display"; src: url("../fonts/PlayfairDisplay.ttf") format("truetype"); }
@font-face { font-family: "Merriweather"; src: url("../fonts/Merriweather.ttf") format("truetype"); }
@font-face { font-family: "Roboto"; src: url("../fonts/Roboto.ttf") format("truetype"); }
@font-face { font-family: "Open Sans"; src: url("../fonts/OpenSans.ttf") format("truetype"); }
@font-face { font-family: "Courier Prime"; src: url("../fonts/CourierPrime.ttf") format("truetype"); }

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- top bar ---------- */

#topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 14px;
  background: linear-gradient(180deg, #2b2d39, #23242e);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.brand { display: flex; align-items: baseline; gap: 8px; margin-right: 6px; }
.brand .logo { font-size: 20px; }
.brand h1 { margin: 0; font-size: 19px; letter-spacing: .5px; color: #fff; }
.brand .tag { color: var(--muted); font-size: 12px; }

.toolbar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

button {
  font: inherit; color: var(--ink);
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 6px 11px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
button:hover { background: #3a3d4f; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.primary:hover { background: #3f7df0; }
button.danger { color: #f0a3a3; }
button.danger:hover { background: #4a2f33; border-color: var(--danger); }
button.wide { width: 100%; margin-top: 10px; padding: 9px; font-weight: 600; }
button.active {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 0 0 2px rgba(79, 140, 255, .35);
}
.toolbar .sep { width: 1px; height: 22px; background: var(--border); margin: 0 6px; }

.actions { margin-left: auto; display: flex; gap: 8px; }

/* ---------- stage ---------- */

#stage {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 14px;
  padding: 14px;
  height: calc(100vh - 57px);
  min-height: 480px;
}

#canvasWrap {
  position: relative;
  overflow: auto;
  background:
    radial-gradient(circle at 1px 1px, #33354a 1px, transparent 0) 0 0 / 22px 22px,
    var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
}

#paper {
  background: #fff;
  box-shadow: var(--shadow);
  border-radius: 2px;
  touch-action: none;
  cursor: crosshair;
}
#paper.selecting { cursor: default; }
#paper.cursor-move { cursor: grab; }
#paper.cursor-move.dragging { cursor: grabbing; }
#paper.cursor-draw { cursor: crosshair; }

.hint {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  color: #7d8299; font-size: 12px; background: rgba(30,31,38,.75);
  padding: 4px 12px; border-radius: 20px; pointer-events: none; white-space: nowrap;
}

/* ---------- side panel ---------- */

#side { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
}
.panel h2 {
  margin: 0 0 10px; font-size: 12px; text-transform: uppercase;
  letter-spacing: 1.2px; color: var(--muted);
  display: flex; align-items: center; gap: 8px;
}
.panel h2 .count { font-size: 11px; color: var(--accent2); letter-spacing: 0; }

.row { margin: 7px 0; display: flex; align-items: center; gap: 8px; }
.row label { display: flex; align-items: center; gap: 8px; flex: 1; color: var(--muted); font-size: 13px; }
.row label.check { gap: 6px; }
.row input[type="number"], .row select {
  background: var(--panel2); color: var(--ink);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 8px; width: 76px; font: inherit;
}
.row input[type="number"] { width: 64px; }
.row select { width: auto; flex: 1; }

.stats {
  margin-top: 10px; font-size: 12px; color: var(--accent2);
  min-height: 18px;
}

/* object list */
.objlist { list-style: none; margin: 0; padding: 0; max-height: 190px; overflow-y: auto; }
.objlist li {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 6px; font-size: 13px;
}
.objlist li:hover { background: var(--panel2); }
.objlist li.sel { background: rgba(79, 140, 255, .22); outline: 1px solid var(--accent); }
.objlist .ic { width: 18px; text-align: center; }
.objlist .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.objlist .del { padding: 1px 7px; font-size: 12px; opacity: .6; }
.objlist .del:hover { opacity: 1; }
.objlist .empty { color: var(--muted); font-style: italic; }

.designlist { list-style: none; margin: 0; padding: 0; max-height: 170px; overflow-y: auto; }
.designlist li {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 4px; border-bottom: 1px dashed var(--border); font-size: 13px;
}
.designlist li:last-child { border-bottom: none; }
.designlist .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.designlist .nm:hover { color: var(--accent); }
.designlist .meta { color: var(--muted); font-size: 11px; }
.designlist .del { padding: 1px 7px; font-size: 12px; opacity: .6; }

/* ---------- dialog ---------- */

.overlay {
  position: fixed; inset: 0; background: rgba(10, 10, 16, .6);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.overlay.hidden { display: none; }
.dlg {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 18px; width: 380px;
  box-shadow: var(--shadow);
}
.dlg h3 { margin: 0 0 12px; font-size: 16px; }
.dlg label { display: block; color: var(--muted); font-size: 13px; margin: 9px 0; }
.dlg textarea {
  width: 100%; margin-top: 4px; background: var(--panel2); color: var(--ink);
  border: 1px solid var(--border); border-radius: 6px; padding: 8px;
  font: inherit; resize: vertical; min-height: 64px;
}
.dlgrow { display: flex; gap: 10px; }
.dlgrow label { flex: 1; }
.dlg input[type="number"], .dlg select {
  width: 100%; margin-top: 4px; background: var(--panel2); color: var(--ink);
  border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font: inherit;
}
.dlgbtns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* ---------- toast ---------- */

.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: #101218; color: #dfe3ee; border: 1px solid var(--border);
  padding: 9px 18px; border-radius: 24px; font-size: 13px;
  box-shadow: var(--shadow); z-index: 60;
}
.toast.hidden { display: none; }
.toast.err { border-color: var(--danger); color: #f2b8b8; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  #stage { grid-template-columns: 1fr; height: auto; }
  #side { flex-direction: row; flex-wrap: wrap; }
  #side .panel { flex: 1 1 280px; }
}