:root {
  --bg: #1e1e1e;
  --panel: #262626;
  --panel-border: #3a3a3a;
  --text: #e8e8e8;
  --text-dim: #9a9a9a;
  --accent: #3caaff;
  --danger: #ff3c3c;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  overflow: hidden;
}

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

header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--panel-border);
  flex-wrap: wrap;
}

header h1 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 12px 0 0;
  white-space: nowrap;
}

.spacer { flex: 1; }

button {
  background: #333;
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
}
button:hover { background: #3d3d3d; }
button:active { background: #444; }
button.primary { background: var(--accent); border-color: var(--accent); color: #06121c; font-weight: 600; }
button.primary:hover { filter: brightness(1.08); }
button.danger { border-color: var(--danger); color: var(--danger); }
button:disabled { opacity: 0.45; cursor: default; }

#scaleIndicator {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 5px;
  background: #111;
  color: var(--text-dim);
  white-space: nowrap;
}
#scaleIndicator.calibrated { color: #7be08a; }

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

#sidebar {
  /* Narrowed (Mehran's request: "make it a little narrower, enough to
     fit the widest text") -- 178px is the smallest width that still fits
     "Leg Lengths Difference" (the single longest button label, edging out
     "Calibrate Magnification") on one line without wrapping, measured
     empirically against this app's own real rendered buttons (not just a
     canvas text-width estimate, which was off by a few px from actual
     layout). 184px adds a few px of headroom on top of that for
     font-metric differences across browsers/OSes. Was 190px. */
  width: 184px;
  background: var(--panel);
  border-left: 1px solid var(--panel-border);
  padding: 10px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Per-boundary override for the gap above: "same spacing here" (pointing
   at the Calibrate Magnification / Leg Lengths Difference boundary) asked
   for that ONE group-to-group gap to match ordinary intra-group button
   spacing (.tool-grid's own 4px gap below), not for every group boundary
   in the sidebar to shrink -- so this targets just the group placed right
   before the one that needs to sit closer, rather than changing #sidebar's
   shared `gap` (which would tighten every boundary at once). */
.tool-group.tight-gap-below { margin-bottom: -10px; }

/* Once dragged (see sidebarPanel.js), the panel leaves the normal flex
   flow and floats wherever the user dropped it -- same idea as the
   desktop app's dock widget becoming a free-floating window. */
#sidebar.floating {
  position: fixed;
  z-index: 500;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  max-height: calc(100vh - 20px);
}

#sidebarHandle {
  display: flex;
  align-items: center;
  justify-content: center; /* center the "Quick Access" label -- Mehran's request, matching desktop's own centered panel title */
  gap: 6px;
  margin: -10px -10px 0 -10px;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: #1a1a1a;
  border-bottom: 1px solid var(--panel-border);
  cursor: move;
  user-select: none;
  touch-action: none;
}
#sidebarHandle:hover { color: var(--text); }

/* Hidden per direct user feedback -- the sidebar reads cleaner without
   section labels once the button names themselves are self-explanatory.
   Kept as real (non-visual) DOM elements rather than deleted so screen
   readers and existing ":has(h2:text(...))" section lookups still work. */
.tool-group h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.tool-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tool-btn {
  /* Centered (Mehran's request: "the texts are adjusted left, not
     center!"), matching Open Image/Import Image above -- those are
     plain <button> elements with no text-align override, so they use
     the browser's own default centered button text; .tool-btn's own
     left-align was the odd one out. */
  text-align: center;
  background: transparent;
  border: 1px solid transparent;
}
.tool-btn.active {
  background: #1c3a52;
  border-color: var(--accent);
  color: #bfe2ff;
}

.palette {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.swatch {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  border: 2px solid #444;
  cursor: pointer;
  padding: 0;
}
.swatch.selected { border-color: #fff; box-shadow: 0 0 0 1px #fff; }

#canvasWrap {
  flex: 1;
  position: relative;
  background: #000;
  min-width: 0;
}

#canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
}
#canvas.tool-select { cursor: default; }
#canvas.tool-pan { cursor: grab; }

#dropHint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  color: var(--text-dim);
  pointer-events: none;
}
#dropHint.hidden { display: none; }
#dropHint button { pointer-events: auto; }

footer {
  padding: 6px 12px;
  background: var(--panel);
  border-top: 1px solid var(--panel-border);
  font-size: 12px;
  color: var(--text-dim);
  min-height: 18px;
}

.file-input { display: none; }