/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 13px; background: #0F172A; color: #E2E8F0; }

/* ===== App Layout ===== */
#app { display: flex; flex-direction: column; height: 100vh; }
#main { display: flex; flex: 1; overflow: hidden; }

/* ===== Header ===== */
#header {
  display: flex; align-items: center; gap: 10px;
  height: 50px; padding: 0 10px;
  background: #1E293B; border-bottom: 1px solid #0F172A;
  flex-shrink: 0; z-index: 100;
}
.header-left { flex-shrink: 0; }
.header-center { flex: 1; overflow-x: auto; overflow-y: hidden; }
.header-center::-webkit-scrollbar { height: 0; }
.header-right { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }

.logo { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14px; color: #F8FAFC; letter-spacing: -0.3px; user-select: none; }

/* ===== Toolbar ===== */
#toolbar { display: flex; align-items: center; gap: 3px; padding: 0 4px; white-space: nowrap; }
.tool-group { display: flex; align-items: center; gap: 2px; }
.tool-divider { width: 1px; height: 22px; background: #334155; margin: 0 3px; flex-shrink: 0; }

.tool-btn {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 7px; border-radius: 5px; border: none;
  background: transparent; color: #94A3B8; cursor: pointer;
  font-size: 12px; transition: all 0.12s; white-space: nowrap;
}
.tool-btn:hover { background: #334155; color: #F1F5F9; }
.tool-btn.active { background: #2563EB; color: #fff; }

/* Stamp indicator */
#stamp-indicator {
  display: flex; align-items: center; gap: 6px;
  background: #1E3A5F; border: 1px solid #2563EB; border-radius: 6px;
  padding: 3px 8px; color: #93C5FD; font-size: 12px;
}
#stamp-cancel { background: none; border: none; color: #93C5FD; cursor: pointer; font-size: 13px; padding: 0 2px; }
#stamp-cancel:hover { color: #EF4444; }

/* ===== Icon / Action buttons ===== */
.icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 5px; border: none;
  background: transparent; color: #94A3B8; cursor: pointer; transition: all 0.12s;
}
.icon-btn:hover { background: #334155; color: #F1F5F9; }
.icon-btn.danger:hover { background: #450A0A; color: #FCA5A5; }
.icon-btn:disabled { opacity: 0.3; cursor: default; }

.btn-primary {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 5px; border: none;
  background: #2563EB; color: #fff; cursor: pointer;
  font-size: 12px; font-weight: 600; transition: all 0.12s;
}
.btn-primary:hover { background: #1D4ED8; }

.btn-secondary {
  padding: 5px 11px; border-radius: 5px;
  border: 1px solid #334155; background: transparent;
  color: #94A3B8; cursor: pointer; font-size: 12px; transition: all 0.12s;
}
.btn-secondary:hover { background: #334155; color: #F1F5F9; }

/* ===== Left Panel ===== */
#panel-left {
  width: 210px; flex-shrink: 0; display: flex; flex-direction: column;
  background: #1E293B; border-right: 1px solid #0F172A;
  overflow: hidden;
}

/* Library tabs */
#lib-tabs {
  display: flex; align-items: center;
  background: #0F172A; border-bottom: 1px solid #1E293B;
  padding: 3px 4px; gap: 1px; flex-shrink: 0;
}
.lib-tab {
  flex: 1; padding: 6px 4px; border: none; border-radius: 5px;
  background: transparent; cursor: pointer; font-size: 14px;
  transition: all 0.12s; opacity: 0.5;
}
.lib-tab:hover { background: #1E293B; opacity: 0.8; }
.lib-tab.active { background: #1E3A5F; opacity: 1; box-shadow: 0 0 0 1px #2563EB; }

/* Library panels */
.lib-panel {
  flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px;
}
.lib-panel::-webkit-scrollbar { width: 3px; }
.lib-panel::-webkit-scrollbar-thumb { background: #334155; border-radius: 2px; }

.lib-section-title {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.5px; color: #475569; margin-bottom: 5px;
}
.lib-hint { font-size: 11px; color: #475569; line-height: 1.4; margin-bottom: 8px; }

.lib-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }

.lib-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 4px; border-radius: 6px; border: 1px solid transparent;
  background: #0F172A; cursor: pointer; transition: all 0.12s;
  font-size: 10px; color: #64748B; text-align: center;
}
.lib-item:hover { background: #1E3A5F; border-color: #2563EB; color: #93C5FD; }
.lib-item.active-stamp { background: #1E3A5F; border-color: #22C55E; color: #86EFAC; }

.lib-thumb {
  font-size: 20px; line-height: 1; display: flex; align-items: center;
  justify-content: center; width: 32px; height: 28px;
  color: #64748B;
}
.lib-item:hover .lib-thumb { color: #93C5FD; }

/* Road thumb styles */
.road-h { font-size: 16px; color: #64748B; }
.road-v { font-size: 16px; letter-spacing: -2px; }
.highway-thumb { font-size: 13px; letter-spacing: 1px; color: #F59E0B; }
.urban-thumb { color: #94A3B8; font-size: 22px; }
.path-thumb { font-size: 14px; color: #92400E; letter-spacing: 2px; }
.parking-thumb { font-size: 16px; font-weight: 800; color: #2563EB; }
.crosswalk-thumb { font-size: 18px; }
.stopline-thumb { font-size: 22px; color: #EF4444; }
.dashes-thumb { font-size: 14px; letter-spacing: 2px; color: #94A3B8; }
.sign-stop-thumb { font-size: 8px; background: #EF4444; color: white; padding: 3px 4px; border-radius: 3px; font-weight: 800; }
.sign-priority-thumb { font-size: 22px; color: #EF4444; }
.sign-light-thumb { font-size: 18px; }
.sign-speed-thumb { font-size: 12px; font-weight: 800; color: #1E293B; background: white; border: 2px solid #EF4444; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.sign-nopark-thumb { font-size: 16px; font-weight: 800; color: #EF4444; text-decoration: line-through; }

/* Custom object form */
.custom-form { display: flex; flex-direction: column; gap: 4px; }
.custom-form label { font-size: 10px; color: #64748B; text-transform: uppercase; letter-spacing: 0.3px; }
.emoji-row { display: flex; align-items: center; gap: 6px; }
.emoji-input { width: 40px; height: 36px; font-size: 20px; text-align: center; background: #0F172A; border: 1px solid #334155; border-radius: 5px; color: #F1F5F9; outline: none; }
.emoji-input:focus { border-color: #2563EB; }
.emoji-presets { display: flex; flex-wrap: wrap; gap: 2px; flex: 1; }
.emoji-presets button { background: #0F172A; border: none; border-radius: 3px; padding: 2px 3px; font-size: 14px; cursor: pointer; transition: background 0.1s; }
.emoji-presets button:hover { background: #334155; }
.text-input { background: #0F172A; border: 1px solid #334155; border-radius: 4px; padding: 4px 6px; color: #F1F5F9; font-size: 11px; outline: none; }
.text-input:focus { border-color: #2563EB; }
.full-width { width: 100%; }
.btn-place {
  margin-top: 8px; padding: 7px; border-radius: 6px; border: none;
  background: #166534; color: #86EFAC; cursor: pointer; font-size: 12px;
  font-weight: 600; width: 100%; transition: all 0.12s;
}
.btn-place:hover { background: #15803D; }

/* Props panel inside lib-props */
#lib-props { padding: 8px; }
.props-placeholder { text-align: center; padding: 20px 8px; color: #334155; }
.props-placeholder svg { margin-bottom: 8px; }
.props-placeholder p { font-size: 11px; color: #475569; }

.prop-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 8px; }
.prop-row > label { font-size: 10px; color: #64748B; text-transform: uppercase; letter-spacing: 0.3px; flex-shrink: 0; }
.prop-row input[type="color"] { width: 30px; height: 20px; border: none; border-radius: 3px; cursor: pointer; background: none; padding: 0; }
.range-row { display: flex; align-items: center; gap: 5px; flex: 1; }
.range-row input[type="range"] { flex: 1; accent-color: #2563EB; height: 3px; }
.range-row span { font-size: 10px; color: #475569; min-width: 26px; text-align: right; }
.fill-row { display: flex; align-items: center; gap: 6px; }
.rotation-row { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.rotation-row input[type="range"] { width: 100%; accent-color: #2563EB; }
.rotation-row > span { font-size: 10px; color: #475569; }
.rot-presets { display: flex; gap: 3px; }
.rot-presets button {
  flex: 1; padding: 2px; border-radius: 3px; border: 1px solid #334155;
  background: #0F172A; color: #64748B; font-size: 9px; cursor: pointer; transition: all 0.1s;
}
.rot-presets button:hover { background: #334155; color: #F1F5F9; }
.select-input { flex: 1; background: #0F172A; border: 1px solid #334155; border-radius: 4px; padding: 3px 5px; color: #F1F5F9; font-size: 11px; outline: none; }

.prop-actions { display: flex; gap: 4px; margin-top: 10px; }
.btn-action {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 6px 4px; border-radius: 5px; border: 1px solid #334155;
  background: #0F172A; color: #94A3B8; cursor: pointer; font-size: 11px; transition: all 0.12s;
}
.btn-action:hover { background: #334155; color: #F1F5F9; border-color: #475569; }
.btn-action.danger { border-color: #450A0A; color: #FCA5A5; }
.btn-action.danger:hover { background: #450A0A; }

/* Bottom panel */
.panel-bottom {
  flex-shrink: 0; border-top: 1px solid #0F172A; padding: 8px;
  display: flex; flex-direction: column; gap: 8px;
}
.legend-compact { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.lc-item { display: flex; align-items: center; gap: 4px; font-size: 10px; color: #475569; }
.lc-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.quick-colors { display: flex; gap: 4px; flex-wrap: wrap; }
.qc-btn { width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: all 0.1s; }
.qc-btn:hover { transform: scale(1.2); border-color: #fff; }
.qc-btn.active { border-color: #fff; box-shadow: 0 0 0 2px #2563EB; }
.grid-toggles { display: flex; gap: 8px; }
.gt-row { display: flex; align-items: center; gap: 5px; font-size: 10px; color: #475569; }

/* Toggle */
.toggle { position: relative; display: inline-block; width: 28px; height: 16px; cursor: pointer; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; inset: 0; background: #334155; border-radius: 8px; transition: 0.2s; }
.toggle-slider::before { content:''; position: absolute; width: 12px; height: 12px; left: 2px; top: 2px; background: #64748B; border-radius: 50%; transition: 0.2s; }
.toggle input:checked + .toggle-slider { background: #2563EB; }
.toggle input:checked + .toggle-slider::before { transform: translateX(12px); background: #fff; }

/* ===== Right Panel ===== */
#panel-right {
  width: 190px; flex-shrink: 0;
  background: #1E293B; border-left: 1px solid #0F172A;
  overflow-y: auto; overflow-x: hidden;
}
#panel-right::-webkit-scrollbar { width: 3px; }
#panel-right::-webkit-scrollbar-thumb { background: #334155; border-radius: 2px; }

.panel-section { padding: 10px; border-bottom: 1px solid #0F172A; }
.panel-section h3 { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #475569; margin-bottom: 8px; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.section-header h3 { margin: 0; }

.mini-btn { width: 18px; height: 18px; border-radius: 3px; border: 1px solid #334155; background: #0F172A; color: #94A3B8; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; transition: all 0.1s; }
.mini-btn:hover { background: #334155; color: #F1F5F9; }

.layer-item { display: flex; align-items: center; gap: 5px; padding: 4px 5px; border-radius: 4px; cursor: pointer; margin-bottom: 2px; transition: background 0.1s; }
.layer-item:hover { background: #0F172A; }
.layer-item.active { background: #1E3A5F; }
.layer-item-name { flex: 1; font-size: 11px; color: #64748B; }
.layer-item.active .layer-item-name { color: #93C5FD; }
.layer-vis-btn { background: none; border: none; cursor: pointer; font-size: 12px; opacity: 0.5; }
.layer-vis-btn:hover { opacity: 1; }

.element-item { display: flex; align-items: center; gap: 5px; padding: 3px 5px; border-radius: 4px; cursor: pointer; font-size: 11px; color: #64748B; margin-bottom: 1px; transition: background 0.1s; }
.element-item:hover { background: #0F172A; }
.element-item.selected { background: #1E3A5F; color: #93C5FD; }
.element-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.element-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#notes-field { width: 100%; height: 90px; resize: none; background: #0F172A; border: 1px solid #334155; border-radius: 5px; padding: 6px; color: #E2E8F0; font-size: 11px; line-height: 1.5; font-family: inherit; outline: none; }
#notes-field:focus { border-color: #2563EB; }

.export-options { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.btn-export-opt { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 6px 3px; border-radius: 5px; border: 1px solid #334155; background: #0F172A; color: #64748B; cursor: pointer; font-size: 11px; transition: all 0.12s; }
.btn-export-opt:hover { background: #334155; color: #F1F5F9; }

/* ===== Canvas Area ===== */
#canvas-area { flex: 1; position: relative; overflow: hidden; background: #0F172A; }
#canvas-container { position: absolute; transform-origin: 0 0; }
#canvas-grid, #canvas-main, #canvas-overlay { position: absolute; top: 0; left: 0; }
#canvas-grid { z-index: 1; }
#canvas-main { z-index: 2; }
#canvas-overlay { z-index: 3; cursor: crosshair; }

/* Stamp cursor */
#canvas-overlay.stamp-mode { cursor: copy; }
#canvas-overlay.select-mode { cursor: default; }
#canvas-overlay.pan-mode { cursor: grab; }
#canvas-overlay.pan-mode.panning { cursor: grabbing; }
#canvas-overlay.text-mode { cursor: text; }
#canvas-overlay.eraser-mode { cursor: cell; }

/* Zoom */
#zoom-controls { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 3px; background: #1E293B; border: 1px solid #475569; border-radius: 7px; padding: 3px 7px; z-index: 10; box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.zoom-btn { width: 22px; height: 22px; border-radius: 4px; border: none; background: transparent; color: #CBD5E1; cursor: pointer; font-size: 16px; line-height: 1; transition: all 0.1s; display: flex; align-items: center; justify-content: center; }
.zoom-btn:hover { background: #334155; color: #F8FAFC; }
#zoom-label { font-size: 12px; font-weight: 600; color: #E2E8F0; min-width: 36px; text-align: center; }

#coords-display { position: absolute; bottom: 14px; right: 14px; font-size: 10px; color: #94A3B8; background: #1E293B; border: 1px solid #475569; padding: 2px 6px; border-radius: 4px; font-family: monospace; }
#measure-display { position: absolute; bottom: 46px; left: 50%; transform: translateX(-50%); background: #1E3A5F; border: 1px solid #2563EB; color: #93C5FD; padding: 3px 10px; border-radius: 5px; font-size: 12px; }

/* Text input */
#text-input-container { position: absolute; z-index: 20; }
#text-input-field { background: rgba(30,41,59,0.97); border: 2px solid #2563EB; color: #F1F5F9; font-size: 14px; padding: 3px 7px; border-radius: 4px; outline: none; min-width: 100px; font-family: inherit; }

/* ===== Modal ===== */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.75); display: flex; align-items: center; justify-content: center; z-index: 1000; backdrop-filter: blur(4px); }
.modal.hidden { display: none; }
.modal-content { background: #1E293B; border: 1px solid #334155; border-radius: 10px; width: 90vw; max-width: 860px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #334155; }
.modal-header h2 { font-size: 15px; font-weight: 600; }
.modal-body { flex: 1; overflow: auto; padding: 16px; display: flex; justify-content: center; }
#preview-canvas { max-width: 100%; border: 1px solid #334155; border-radius: 3px; }
.modal-footer { padding: 12px 18px; border-top: 1px solid #334155; display: flex; align-items: center; gap: 12px; }
.modal-notes-preview { flex: 1; font-size: 11px; color: #64748B; line-height: 1.5; max-height: 60px; overflow-y: auto; }
.modal-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ===== Toast ===== */
.toast { position: fixed; bottom: 70px; left: 50%; transform: translateX(-50%); background: #1E293B; border: 1px solid #334155; color: #F1F5F9; padding: 7px 14px; border-radius: 7px; font-size: 12px; z-index: 2000; transition: opacity 0.3s; pointer-events: none; }
.toast.hidden { opacity: 0; }
.toast.success { border-color: #166534; background: #14532D; color: #86EFAC; }
.toast.error { border-color: #7F1D1D; background: #450A0A; color: #FCA5A5; }

/* ===== Scrollbars ===== */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 2px; }
.hidden { display: none !important; }