:root {
  --charcoal: #2b2f33;
  --steel: #4a5560;
  --steel-light: #8a97a3;
  --rust: #b5562f;
  --bg: #f4f2ee;
  --panel: #ffffff;
  --border: #dcd8d1;
  --text: #23262a;
  --text-muted: #6b7178;

  --status-amber: #d99a2b;
  --status-green: #5c8a5c;
  --status-gray: #9a9a94;
  --status-blue: #4f7cac;
  --status-purple: #a89bd1;
  --status-teal: #4a9490;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
  /* Clears the notch/Dynamic Island and the home-indicator bar on iPhone —
     without viewport-fit=cover + this, fixed panels can sit underneath
     them and look like they're overlapping the phone's own UI. */
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

#root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.25rem;
  background: var(--charcoal);
  color: #f4f2ee;
}

.app-header h1 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.01em;
}

.app-header .accent {
  color: var(--rust);
}

.markup-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.25rem;
  gap: 1rem;
}

.dropzone {
  width: 100%;
  max-width: 640px;
  border: 2px dashed var(--steel-light);
  border-radius: 16px;
  background: var(--panel);
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.dropzone:hover,
.dropzone.dragover {
  border-color: var(--rust);
  background: #fbf3ee;
}

.dropzone input { display: none; }

.dropzone .primary {
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.25rem;
}

.toolbar {
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.65rem 0.9rem;
}

.toolbar .group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.toolbar .spacer { flex: 1; }

.btn {
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  border-radius: 10px;
  padding: 0.45rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.btn:hover { border-color: var(--steel-light); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn.primary {
  background: var(--rust);
  border-color: var(--rust);
  color: #fff;
}

.btn.primary:hover { background: #9c4a27; }

.btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--steel);
}

.swatch-row {
  display: flex;
  gap: 0.35rem;
}

.swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}

.swatch.active {
  border-color: var(--charcoal);
}

.thickness-row {
  display: flex;
  gap: 0.3rem;
}

.thickness-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.thickness-btn.active {
  border-color: var(--rust);
  background: rgba(181, 86, 47, 0.08);
}

.thickness-btn span {
  display: block;
  pointer-events: none;
}

.page-indicator {
  font-size: 0.85rem;
  color: var(--text-muted);
  min-width: 5.5rem;
  text-align: center;
}

.canvas-scroll {
  width: 100%;
  max-width: 900px;
  max-height: 70vh;
  overflow: auto;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  background: #fff;
}

.canvas-stage {
  position: relative;
  display: inline-block;
}

/* No max-width/height:auto here on purpose — the canvas's own pixel
   dimensions (computed from the zoom level in PdfMarkup.js) ARE the zoom.
   Letting CSS scale it back down to fit the container would silently
   cancel out any zoom level greater than 1. */
.canvas-stage canvas {
  display: block;
}

.canvas-stage canvas.draw-layer {
  position: absolute;
  top: 0;
  left: 0;
}

.status-line {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.status-line.error {
  color: var(--rust);
}