*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f4;
  --bg-tertiary: #e8e7e3;
  --text-primary: #1a1a18;
  --text-secondary: #6b6b67;
  --border: rgba(0,0,0,0.12);
  --border-strong: rgba(0,0,0,0.22);
  --accent: #185FA5;
  --accent-hover: #0C447C;
  --accent-bg: #E6F1FB;
  --danger: #E24B4A;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
}
 
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #1e1e1c;
    --bg-secondary: #2a2a28;
    --bg-tertiary: #141413;
    --text-primary: #f0efeb;
    --text-secondary: #9a9a95;
    --border: rgba(255,255,255,0.10);
    --border-strong: rgba(255,255,255,0.20);
    --accent-bg: #0c2a45;
  }
}
 
html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; background: var(--bg-tertiary); color: var(--text-primary); }
 
#app { display: flex; flex-direction: column; height: 100vh; }
 
/* Toolbar */
#toolbar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-bottom: 0.5px solid var(--border);
  background: var(--bg-primary);
  flex-shrink: 0;
  user-select: none;
}
#app-title { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; margin-right: 4px; }
 
#toolbar button {
  padding: 5px 11px; font-size: 13px; border-radius: var(--radius-md);
  border: 0.5px solid var(--border-strong);
  background: var(--bg-primary); color: var(--text-primary);
  cursor: pointer; display: flex; align-items: center; gap: 5px;
  transition: background 0.1s;
  white-space: nowrap;
}
#toolbar button:hover { background: var(--bg-secondary); }
#toolbar button:disabled { opacity: 0.38; cursor: default; pointer-events: none; }
#toolbar button i { font-size: 15px; }
.zoom-unit { font-size: 13px; color: var(--text-secondary); min-width: 10px; text-align: left; }
.zoom-input {
  width: 68px; padding: 5px 8px; font-size: 13px; text-align: right;
  border-radius: var(--radius-md);
  border: 0.5px solid var(--border-strong);
  background: var(--bg-primary); color: var(--text-primary);
  appearance: textfield;
}
.zoom-input::-webkit-outer-spin-button,
.zoom-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#toolbar button + .zoom-input { margin-left: 2px; }
.sep { width: 0.5px; height: 20px; background: var(--border); margin: 0 3px; flex-shrink: 0; }
 
#mode-pin.active { background: var(--accent-bg); color: var(--accent); border-color: transparent; }
#file-input-tb { display: none; }
 
/* Main layout */
#main { display: flex; flex: 1; overflow: hidden; }
 
/* Canvas area */
#canvas-area {
  flex: 1; overflow: auto; position: relative;
  background: var(--bg-tertiary);
  cursor: grab;
}
#canvas-area.pin-mode { cursor: crosshair; }
#canvas-area.grabbing { cursor: grabbing; }
 
/* Drop zone */
#drop-zone {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-lg); margin: 32px;
  color: var(--text-secondary); font-size: 14px;
  transition: border-color 0.15s, background 0.15s;
}
#drop-zone.drag-over { border-color: var(--accent); background: rgba(24,95,165,0.04); }
#drop-zone i { font-size: 48px; opacity: 0.35; }
#drop-zone label {
  padding: 8px 20px; font-size: 13px; border-radius: var(--radius-md);
  border: 0.5px solid var(--border-strong);
  background: var(--bg-primary); color: var(--text-primary);
  cursor: pointer; transition: background 0.1s;
}
#drop-zone label:hover { background: var(--bg-secondary); }
#drop-zone input[type=file] { display: none; }
 
/* Map container */
#map-container {
  position: relative; display: none;
  transform-origin: 0 0;
}
#map-container.visible { display: block; }
#pdf-canvas { display: block; }
 
/* Pins */
.pin {
  position: absolute; transform: translate(-50%, -100%);
  background: none; border: none; padding: 0; appearance: none;
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer; z-index: 10;
}
.pin-dot {
  width: 22px; height: 22px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.24);
  transition: transform 0.15s, box-shadow 0.15s;
}
.pin:hover .pin-dot { transform: rotate(-45deg) scale(1.12); box-shadow: 0 4px 10px rgba(0,0,0,0.28); }
.pin-dot-inner { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.86); transform: rotate(45deg); }
.pin-label {
  margin-top: 4px; font-size: 10px; font-weight: 700;
  color: #000; text-shadow: none;
  background: #fff; border: 0.5px solid rgba(0,0,0,0.18);
  border-radius: 999px; padding: 1px 6px;
  white-space: nowrap; max-width: 140px;
  overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}
 
/* Pin modal */
#pin-modal {
  position: absolute; z-index: 100;
  background: var(--bg-primary);
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius-lg); padding: 14px; width: 230px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.14); display: none;
}
#pin-modal h3 { font-size: 13px; font-weight: 500; margin-bottom: 10px; }
#pin-modal input[type=text] {
  width: 100%; padding: 7px 10px; font-size: 13px;
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-secondary); color: var(--text-primary);
  margin-bottom: 10px; outline: none;
  transition: border-color 0.15s;
}
#pin-modal input[type=text]:focus { border-color: var(--accent); }
.color-row { display: flex; gap: 7px; margin-bottom: 12px; }
.color-chip {
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
  border: 2.5px solid transparent; transition: transform 0.1s, border-color 0.1s;
}
.color-chip:hover { transform: scale(1.18); }
.color-chip.selected { border-color: var(--text-primary); }
.btn-row { display: flex; gap: 7px; }
.btn-row button {
  flex: 1; padding: 7px; font-size: 13px;
  border-radius: var(--radius-md); cursor: pointer;
  border: 0.5px solid var(--border-strong);
  background: var(--bg-primary); color: var(--text-primary);
  transition: background 0.1s;
}
.btn-row button:hover { background: var(--bg-secondary); }
#btn-save-pin { background: var(--accent); color: #fff; border-color: transparent; }
#btn-save-pin:hover { background: var(--accent-hover); }
 
/* Sidebar */
#sidebar {
  width: 230px; border-left: 0.5px solid var(--border);
  display: flex; flex-direction: column;
  background: var(--bg-primary); flex-shrink: 0;
}
#sidebar-header {
  padding: 12px 14px; border-bottom: 0.5px solid var(--border);
  font-size: 13px; font-weight: 500; color: var(--text-secondary);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
#pin-count {
  font-size: 12px; background: var(--bg-secondary);
  padding: 2px 9px; border-radius: 99px;
}
#pin-list { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.pin-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 9px 10px; border-radius: var(--radius-md);
  border: 0.5px solid var(--border);
  cursor: pointer; transition: background 0.1s;
  background: var(--bg-primary);
}
.pin-item:hover { background: var(--bg-secondary); }
.pin-item.active { border-color: var(--accent); background: var(--accent-bg); }
.pin-color-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; }
.pin-item-info { flex: 1; min-width: 0; }
.pin-item-label { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pin-item-coords { font-size: 11px; color: var(--text-secondary); margin-top: 2px; font-family: monospace; }
.pin-delete {
  opacity: 0; background: none; border: none; cursor: pointer;
  color: var(--text-secondary); padding: 2px 4px;
  border-radius: 4px; flex-shrink: 0;
  transition: opacity 0.1s, color 0.1s;
  font-size: 15px;
}
.pin-item:hover .pin-delete { opacity: 1; }
.pin-delete:hover { color: var(--danger); }
 
#no-pins {
  padding: 28px 14px; text-align: center;
  font-size: 13px; color: var(--text-secondary);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
#no-pins i { font-size: 30px; opacity: 0.28; }
 
/* Page controls */
#page-controls {
  display: none; align-items: center; gap: 10px;
  padding: 7px 14px; border-top: 0.5px solid var(--border);
  background: var(--bg-primary);
  font-size: 13px; color: var(--text-secondary); flex-shrink: 0;
}
#page-controls.visible { display: flex; }
#page-controls button {
  padding: 4px 11px; font-size: 13px;
  border-radius: var(--radius-md);
  border: 0.5px solid var(--border-strong);
  background: var(--bg-primary); color: var(--text-primary);
  cursor: pointer; transition: background 0.1s;
}
#page-controls button:hover { background: var(--bg-secondary); }
#page-controls button:disabled { opacity: 0.38; cursor: default; }