:root {
  --bg:        #1f2430;
  --panel:     #2a3040;
  --panel-2:   #323a4d;
  --text:      #e7ebf3;
  --muted:     #9aa4b8;
  --border:    #3a4256;
  --accent:    #5b8cff;
  --green:     #34c759;
  --yellow:    #ffcc00;
  --red:       #ff3b30;
  --shadow:    0 6px 20px rgba(0,0,0,.35);
  --toolbar-h: 56px;
}

* { box-sizing: border-box; }

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

/* ── Toolbar (desktop: top sticky) ────────────────────────────────── */
#toolbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--toolbar-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow-x: auto;
}

.brand {
  display: flex; align-items: center; gap: 7px;
  font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.brand-dot {
  width: 13px; height: 13px; border-radius: 50%;
  background: linear-gradient(135deg, var(--green), var(--yellow) 50%, var(--red));
}

.tools {
  display: flex; align-items: center;
  gap: 10px; flex: 1;
}
.colors { display: flex; gap: 5px; }

.color-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px;
  background: var(--panel-2);
  border: 2px solid transparent;
  border-radius: 10px;
  color: var(--text);
  cursor: pointer; font-size: 13px;
  transition: border-color .12s, transform .06s;
  white-space: nowrap;
}
.color-btn:hover                              { transform: translateY(-1px); }
.color-btn[aria-pressed="true"]               { border-color: var(--accent); background: #3b445e; }
.color-btn[aria-pressed="true"][data-color="green"]  { border-color: var(--green); }
.color-btn[aria-pressed="true"][data-color="yellow"] { border-color: var(--yellow); }
.color-btn[aria-pressed="true"][data-color="red"]    { border-color: var(--red); }

.swatch { width: 15px; height: 15px; border-radius: 4px; display: inline-block; flex: none; }
.swatch-green  { background: var(--green); }
.swatch-yellow { background: var(--yellow); }
.swatch-red    { background: var(--red); }

.divider { width: 1px; height: 26px; background: var(--border); flex-shrink: 0; }

.size-control { display: flex; align-items: center; gap: 7px; }
.label { color: var(--muted); font-size: 12px; white-space: nowrap; }
#brush-size { width: 80px; accent-color: var(--accent); }

.actions { display: flex; gap: 5px; }
.actions button {
  padding: 7px 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text); cursor: pointer; font-size: 13px;
  white-space: nowrap;
}
.actions button:hover:not(:disabled) { background: #3b445e; border-color: var(--accent); }
.actions button:disabled { opacity: .4; cursor: not-allowed; }

.status { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.reader-name { color: var(--muted); font-size: 13px; white-space: nowrap; }
.save-status { font-size: 12px; color: var(--muted); white-space: nowrap; }
.save-status.saving { color: var(--yellow); }
.save-status.saved  { color: var(--green); }
.save-status.error  { color: var(--red); }

/* ── Viewer ────────────────────────────────────────────────────────── */
#viewer {
  width: 100%;
  padding: 20px 12px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* allow horizontal scroll when user zooms in on mobile */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#pages {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  /* zoom is set via JS; transform-origin is implicit top-center in column layout */
  transform-origin: top center;
}

.page-wrap {
  position: relative;
  box-shadow: var(--shadow);
  border-radius: 4px;
  overflow: hidden;
  background: #e8e8e8;   /* shows while PDF renders */
  flex-shrink: 0;
}

.page-canvas,
.overlay-canvas {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  display: block;
}
/* touch-action: none prevents browser scroll while drawing (1 finger).
   Pinch (2 fingers) is handled manually via touch events on #viewer. */
.overlay-canvas { cursor: crosshair; touch-action: none; }

.page-label {
  font-size: 12px; color: var(--muted);
  text-align: center; user-select: none;
  margin-top: -10px; margin-bottom: 4px;
}

.loading {
  color: var(--muted); padding: 40px 24px;
  font-size: 15px; text-align: center;
  display: flex; flex-direction: column; gap: 12px;
}
.loading-hint {
  font-size: 13px; line-height: 1.5; max-width: 360px; margin: 0 auto;
}

/* ── Modal ─────────────────────────────────────────────────────────── */
.modal {
  position: fixed; inset: 0;
  background: rgba(10,12,18,.75);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
}
.modal.hidden { display: none; }

.modal-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px;
  width: min(420px, 92vw);
  box-shadow: var(--shadow);
}
.modal-card h2 { margin: 0 0 8px; }
.modal-card p  { color: var(--muted); margin: 0 0 12px; }
.legend { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 8px; }
.legend li { display: flex; align-items: center; gap: 10px; }
.name-label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }

#name-input {
  width: 100%; padding: 11px 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text); font-size: 15px;
  margin-bottom: 14px;
}
#name-input:focus { outline: 2px solid var(--accent); border-color: transparent; }

button.primary {
  width: 100%; padding: 12px;
  background: var(--accent); color: #fff;
  border: none; border-radius: 10px;
  font-size: 15px; font-weight: 600; cursor: pointer;
}
button.primary:hover { filter: brightness(1.08); }
.error { color: var(--red); font-size: 13px; margin-top: 10px; }
.hidden { display: none; }

/* ── Mobile: toolbar moves to bottom ──────────────────────────────── */
@media (max-width: 640px) {
  #toolbar {
    position: fixed;
    top: auto;
    bottom: 0; left: 0; right: 0;
    /* stack in two rows if needed */
    height: auto;
    min-height: var(--toolbar-h);
    flex-wrap: wrap;
    padding: 8px 10px;
    border-top: 1px solid var(--border);
    border-bottom: none;
    box-shadow: 0 -4px 16px rgba(0,0,0,.3);
    /* viewer scrolls behind it */
    z-index: 50;
  }

  /* Viewer: no top padding (no top toolbar), bottom padding = toolbar height */
  #viewer {
    padding-top: 16px;
    padding-bottom: 120px;  /* room for bottom toolbar */
  }

  /* Color buttons: bigger tap targets, hide text labels */
  .color-btn { padding: 10px 12px; }
  .color-btn .label { display: none; }
  .swatch { width: 18px; height: 18px; }

  /* Brand: hide text, keep dot */
  .brand-name { display: none; }

  /* Brush: narrower */
  #brush-size { width: 64px; }

  /* Actions: compact */
  .actions button { padding: 8px 9px; font-size: 12px; }

  /* Hide reader name — save status is enough */
  .reader-name { display: none; }

  /* Hint text on loading */
  .loading { padding: 24px 16px; }
}