:root {
  --bg: #1e1f22;
  --bg2: #2b2d31;
  --bg3: #35373c;
  --border: #3f4147;
  --fg: #dcdee3;
  --fg-dim: #9a9da5;
  --accent: #4f8cff;
  --accent-hover: #6ba0ff;
  --ai: #b07cff;
  --danger: #ff6b6b;
  --radius: 6px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  background: var(--bg); color: var(--fg);
  font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow: hidden;
  user-select: none;
}

body { display: flex; flex-direction: column; }

button {
  background: var(--bg3); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 5px 10px; font: inherit; cursor: pointer;
}
button:hover:not(:disabled) { background: #43464d; }
button:disabled { opacity: .4; cursor: default; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.primary:hover:not(:disabled) { background: var(--accent-hover); }
button.secondary { background: transparent; }
button.danger { color: var(--danger); }

input[type="text"], input[type="password"], input[type="number"], select {
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 4px 6px; font: inherit; width: 100%;
}
input[type="range"] { width: 100%; }
input[type="color"] { border: none; background: none; padding: 0; width: 32px; height: 24px; cursor: pointer; }
label { display: block; color: var(--fg-dim); }
label.chk { display: flex; align-items: center; gap: 6px; color: var(--fg); }
label.chk input { width: auto; }
label.block { margin: 8px 0; }

/* ---------- Topbar ---------- */
#topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; background: var(--bg2);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.brand { font-weight: 700; letter-spacing: .5px; margin-right: 6px; }
.topbar-group { display: flex; gap: 4px; padding: 0 6px; border-left: 1px solid var(--border); }
.topbar-spacer { flex: 1; }
#spend-counter { color: var(--fg-dim); font-variant-numeric: tabular-nums; }

/* ---------- Layout ---------- */
#main { flex: 1; display: flex; min-height: 0; }

#toolbar {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px;
  padding: 8px 6px; background: var(--bg2); border-right: 1px solid var(--border);
}
.tool {
  width: 38px; height: 38px; font-size: 17px; line-height: 1;
  display: grid; place-items: center; padding: 0;
}
.tool.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.tool.ai { color: var(--ai); }
.tool.ai.active { background: var(--ai); border-color: var(--ai); color: #fff; }
.tool-sep { height: 1px; background: var(--border); margin: 4px 2px; }

#canvas-area { flex: 1; position: relative; min-width: 0; background: var(--bg); }
#canvas-wrap { position: absolute; inset: 0; }
#canvas-wrap canvas { display: block; }

#drop-hint {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center; color: var(--fg-dim);
}
#drop-hint.hidden { display: none; }
.drop-hint-inner { text-align: center; border: 2px dashed var(--border); border-radius: 12px; padding: 40px 60px; }
#canvas-area.dragover .drop-hint-inner { border-color: var(--accent); color: var(--accent); }

/* ---------- Sidebar ---------- */
#sidebar {
  flex: 0 0 260px; overflow-y: auto;
  background: var(--bg2); border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
}
#sidebar section { padding: 10px 12px; border-bottom: 1px solid var(--border); }
#sidebar h3 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--fg-dim); }
#sidebar .hint { color: var(--fg-dim); font-size: 12px; }
#tool-options-body > * { margin-bottom: 8px; }
#tool-options-body .row, .dlg .row { display: flex; gap: 6px; align-items: center; }
.row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.row.right { justify-content: flex-end; margin-top: 12px; }
.field-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.field-row label { flex: 0 0 auto; margin: 0; }

/* Candidates */
#candidates-body { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.candidate {
  border: 2px solid var(--border); border-radius: var(--radius);
  cursor: pointer; overflow: hidden; position: relative; padding: 0; background: none;
}
.candidate img { display: block; width: 100%; }
.candidate:hover, .candidate.previewing { border-color: var(--ai); }
.candidate.selected { border-color: var(--accent); }
.candidate .tag { position: absolute; top: 2px; left: 4px; font-size: 10px; color: #fff; text-shadow: 0 1px 2px #000; }

/* History */
#history-body { display: flex; flex-direction: column; gap: 6px; }
.history-item { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--fg-dim); }
.history-item img { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border); }

/* ---------- Statusbar ---------- */
#statusbar {
  flex: 0 0 auto; display: flex; gap: 18px; padding: 3px 12px;
  background: var(--bg2); border-top: 1px solid var(--border);
  color: var(--fg-dim); font-size: 12px; font-variant-numeric: tabular-nums;
}
#status-hint { margin-left: auto; }

/* ---------- Dialogs ---------- */
dialog {
  background: var(--bg2); color: var(--fg);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 18px; min-width: 340px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
dialog::backdrop { background: rgba(0,0,0,.55); }
dialog h3 { margin: 0 0 12px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.grid2 .span2 { grid-column: span 2; }
.hint { color: var(--fg-dim); font-size: 12px; }

/* misc */
.swatch-row { display: flex; gap: 4px; flex-wrap: wrap; }
.swatch { width: 20px; height: 20px; border-radius: 4px; border: 1px solid var(--border); cursor: pointer; padding: 0; }
.shape-btns { display: flex; gap: 4px; }
.shape-btns button { width: 34px; height: 30px; padding: 0; }
.shape-btns button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
textarea {
  background: var(--bg); color: var(--fg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 6px; font: inherit; width: 100%; resize: vertical;
}
.cost-line { font-size: 12px; color: var(--ai); }
.spinner {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--fg-dim); border-top-color: transparent;
  animation: spin .8s linear infinite; vertical-align: -2px; margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }