:root {
  --bg: #15171c;
  --panel: #1e2128;
  --border: #2e333d;
  --text: #e8eaef;
  --muted: #8b93a3;
  --accent: #ffcc33;
  --danger: #ff6b6b;
}

* { box-sizing: border-box; }

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

body { display: flex; }

#viewer {
  position: relative;
  flex: 1;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}
#viewer.dragging { cursor: grabbing; }
#viewer.measuring { cursor: crosshair; }
#viewer canvas { display: block; }

#labels { position: absolute; inset: 0; pointer-events: none; }

.label {
  position: absolute;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.75);
  color: var(--accent);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  white-space: nowrap;
}

#hint, #cursor-info {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  padding: 6px 12px;
  border-radius: 6px;
  pointer-events: none;
}
#hint { top: 12px; }
#hint:empty, #cursor-info:empty { display: none; }
#cursor-info { bottom: 12px; font-variant-numeric: tabular-nums; }

#panel {
  width: 300px;
  padding: 16px;
  background: var(--panel);
  border-left: 1px solid var(--border);
  overflow-y: auto;
}

h1 { font-size: 18px; margin: 0 0 16px; }
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 0 0 8px; }
section { margin-bottom: 20px; }

.file { display: block; margin-bottom: 10px; }
.file span { display: block; margin-bottom: 4px; }
.file input { width: 100%; color: var(--muted); }

.row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 6px 0; }
.row input[type=number], .row select { width: 110px; }

input, select, button { font: inherit; }
input[type=number], select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 6px;
}

button {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 12px;
  cursor: pointer;
  color: var(--text);
  background: var(--bg);
}
button.primary { background: var(--accent); color: #111; border-color: var(--accent); font-weight: 600; width: 100%; }
button.primary.active { background: transparent; color: var(--accent); }
button:disabled { opacity: 0.4; cursor: default; }

.muted { color: var(--muted); }
.small { font-size: 12px; }

#measures { list-style: none; padding: 0; margin: 10px 0; }
#measures li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
#measures .dist { font-weight: 600; font-size: 16px; color: var(--accent); flex: 1; font-variant-numeric: tabular-nums; }
#measures .del { padding: 2px 8px; color: var(--danger); background: none; border: none; }

details summary { cursor: pointer; color: var(--muted); margin-bottom: 8px; }

@media (max-width: 700px) {
  body { flex-direction: column; }
  #viewer { flex: none; height: 60vh; }
  #panel { width: 100%; border-left: none; border-top: 1px solid var(--border); }
}

.dot {
  position: absolute;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
}

.dot.hover { border-color: #4ade80; width: 8px; height: 8px; background: none; }

#viewer.over-point { cursor: move; }

#loupe {
  position: absolute;
  width: 180px;
  height: 180px;
  border: 2px solid var(--accent);
  border-radius: 6px;
  box-sizing: content-box;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  background: #000;
  z-index: 2;
}
#loupe[hidden] { display: none; }
#loupe-canvas { display: block; width: 100%; height: 100%; }

/* Réticule : direction exacte du curseur */
#loupe::before, #loupe::after {
  content: '';
  position: absolute;
  background: rgba(255, 255, 255, 0.8);
  mix-blend-mode: difference;
}
#loupe::before { left: 50%; top: 30%; bottom: 30%; width: 1px; }
#loupe::after { top: 50%; left: 30%; right: 30%; height: 1px; }

#loupe-mark {
  position: absolute;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  border: 2px solid #4ade80;
  border-radius: 50%;
}

.label.aligned { color: #38bdf8; }
#measures .dist.aligned { color: #38bdf8; }
#measures .parts { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }

.tools { display: flex; gap: 8px; }
.tools button { flex: 1; }

.dot.area { border-color: #c084fc; }
#measures .dist.area { color: #c084fc; }

#drop-overlay {
  display: none;
  position: absolute;
  inset: 12px;
  z-index: 5;
  align-items: center;
  justify-content: center;
  border: 3px dashed var(--accent);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.6);
  font-size: 18px;
  font-weight: 600;
  pointer-events: none;
}
body.dropping #drop-overlay { display: flex; }

/* Interrupteur « Mesures droites » */
.toggle { cursor: pointer; margin: 12px 0; }
.toggle input {
  appearance: none;
  flex: none;
  width: 38px;
  height: 22px;
  border-radius: 11px;
  background: var(--border);
  position: relative;
  cursor: pointer;
  transition: background 0.15s;
}
.toggle input::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text);
  transition: transform 0.15s;
}
.toggle input:checked { background: #38bdf8; }
.toggle input:checked::after { transform: translateX(16px); }

.back-link { display: inline-block; margin-bottom: 8px; color: var(--muted); font-size: 13px; text-decoration: none; }
.back-link:hover { color: var(--text); }