* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: #1c1f24;
  color: #e6e8ec;
  overflow: hidden;
  user-select: none;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: #14171b;
  border-bottom: 1px solid #2a2f36;
  height: 48px;
  flex-shrink: 0;
}

.toolbar .title {
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #f2c57c;
  padding-right: 12px;
  border-right: 1px solid #2a2f36;
  white-space: nowrap;
}

.tools {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.tools .sep {
  width: 1px;
  height: 22px;
  background: #2a2f36;
  margin: 0 4px;
}

button {
  background: #242932;
  color: #e6e8ec;
  border: 1px solid #333a44;
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
button:hover { background: #2e343f; }
button:active { background: #1c2028; }
button.danger { border-color: #663131; color: #ffb0b0; }
button.danger:hover { background: #3a1e1e; }

.zoom {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.zoom input[type=range] { width: 120px; }
.zoom #zoom-label { width: 42px; text-align: right; color: #9aa3af; }

.main {
  display: flex;
  height: calc(100% - 48px);
}

.palette {
  width: 280px;
  background: #181b20;
  border-right: 1px solid #2a2f36;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.palette-search {
  padding: 8px;
  border-bottom: 1px solid #2a2f36;
}
.palette-search input {
  width: 100%;
  background: #0f1114;
  color: #e6e8ec;
  border: 1px solid #2a2f36;
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 13px;
  font-family: inherit;
}

#palette-list {
  overflow-y: auto;
  flex: 1;
  padding: 6px;
}

.theme {
  margin-bottom: 6px;
}
.theme-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  cursor: pointer;
  background: #1f232a;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #cbd2da;
}
.theme-header:hover { background: #262b33; }
.theme-header .count { color: #6b7380; font-weight: 400; font-size: 12px; }
.theme-header .caret { transition: transform 0.15s; }
.theme.collapsed .theme-header .caret { transform: rotate(-90deg); }

.theme-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 4px;
  padding: 6px 4px 2px;
}
.theme.collapsed .theme-tiles { display: none; }

.palette-tile {
  background: #0f1114;
  border: 1px solid #2a2f36;
  border-radius: 3px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: grab;
  position: relative;
}
.palette-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  image-rendering: auto;
}
.palette-tile:hover { border-color: #f2c57c; }
.palette-tile .tile-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,0.65);
  color: #e6e8ec;
  font-size: 9px;
  padding: 1px 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity 0.1s;
}
.palette-tile:hover .tile-label { opacity: 1; }

.canvas-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, #1f232a 0%, #14171b 100%);
}

.canvas {
  position: absolute;
  left: 0; top: 0;
  transform-origin: 0 0;
  width: 1px; height: 1px; /* transform-origin anchor only — children positioned absolutely */
}

.grid-bg {
  position: absolute;
  left: -5000px; top: -5000px;
  width: 20000px; height: 20000px;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 1260px 1260px;
  pointer-events: none;
}

.tiles-layer {
  position: absolute;
  left: 0; top: 0;
}

.tile {
  position: absolute;
  left: 0; top: 0;
  transform-origin: center center;
  cursor: grab;
  outline: 2px solid transparent;
  outline-offset: -2px;
  transition: outline-color 0.1s;
}
.tile.dragging { cursor: grabbing; opacity: 0.85; z-index: 9999; }
.tile.selected { outline-color: #f2c57c; box-shadow: 0 0 0 4px rgba(242,197,124,0.2); }
.tile img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hint {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  background: rgba(20,23,27,0.85);
  border: 1px solid #2a2f36;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 12px;
  color: #9aa3af;
  pointer-events: none;
  max-width: 90%;
  text-align: center;
}
.hint b { color: #f2c57c; }

.drag-ghost {
  position: fixed;
  pointer-events: none;
  opacity: 0.7;
  z-index: 10000;
  border: 2px dashed #f2c57c;
  background: rgba(242,197,124,0.1);
}

/* ---- Arrows layer ---- */
.arrows-layer {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 50;
}
.arrow-marker {
  position: absolute;
  width: 38px; height: 38px;
  margin-left: -19px; margin-top: -19px;
  border-radius: 50%;
  background: rgba(20,23,27,0.85);
  border: 2px solid #f2c57c;
  color: #f2c57c;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  transition: transform 0.1s, background 0.1s;
  font-size: 20px;
  line-height: 1;
  user-select: none;
}
.arrow-marker:hover {
  background: #f2c57c;
  color: #14171b;
  transform: scale(1.15);
}
.arrow-marker.dir-n::after { content: '↑'; }
.arrow-marker.dir-e::after { content: '→'; }
.arrow-marker.dir-s::after { content: '↓'; }
.arrow-marker.dir-w::after { content: '←'; }

/* ---- Toggle button ---- */
button.toggle.on {
  border-color: #f2c57c;
  color: #f2c57c;
}

/* ---- Popover (themes) ---- */
.popover-host { position: relative; }
.popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  max-height: 60vh;
  overflow-y: auto;
  background: #14171b;
  border: 1px solid #2a2f36;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  padding: 8px;
  z-index: 200;
}
.popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 8px;
  border-bottom: 1px solid #2a2f36;
  margin-bottom: 6px;
  font-size: 12px;
  color: #9aa3af;
}
.popover-actions { display: flex; gap: 4px; }
button.link {
  background: transparent;
  border: none;
  color: #f2c57c;
  padding: 2px 6px;
  font-size: 12px;
  cursor: pointer;
}
button.link:hover { text-decoration: underline; }

.theme-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 4px;
}
.theme-check:hover { background: #1f232a; }
.theme-check input { accent-color: #f2c57c; }

/* ---- Modal (tile picker) ---- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}
.modal-panel {
  position: relative;
  background: #181b20;
  border: 1px solid #2a2f36;
  border-radius: 8px;
  width: min(920px, 90vw);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #2a2f36;
}
.modal-title {
  font-size: 15px;
  font-weight: 600;
  color: #e6e8ec;
}
.modal-title #picker-direction { color: #f2c57c; text-transform: capitalize; }
.modal-hint {
  font-size: 12px;
  color: #9aa3af;
  font-weight: 400;
  margin-left: 8px;
}
.modal-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid #2a2f36;
}
.modal-toolbar input[type=search] {
  flex: 1;
  background: #0f1114;
  color: #e6e8ec;
  border: 1px solid #2a2f36;
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 13px;
  font-family: inherit;
}
.pick-mode-flag {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #cbd2da;
  white-space: nowrap;
}
.pick-mode-flag input { accent-color: #f2c57c; }

.picker-list {
  overflow-y: auto;
  padding: 10px 16px;
  flex: 1;
}
.picker-section {
  margin-bottom: 14px;
}
.picker-section-title {
  font-size: 12px;
  font-weight: 600;
  color: #9aa3af;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 6px;
}
.picker-tile {
  background: #0f1114;
  border: 1px solid #2a2f36;
  border-radius: 4px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.picker-tile img {
  width: 100%; height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.picker-tile:hover { border-color: #f2c57c; transform: scale(1.02); }
.picker-tile .tile-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7);
  color: #e6e8ec;
  font-size: 9px;
  padding: 1px 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity 0.1s;
}
.picker-tile:hover .tile-label { opacity: 1; }

.modal-footer {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border-top: 1px solid #2a2f36;
  font-size: 12px;
  color: #9aa3af;
}
.modal-footer .spacer { flex: 1; }

.icon-btn {
  background: transparent;
  border: none;
  color: #9aa3af;
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
}
.icon-btn:hover { color: #f2c57c; }

[hidden] { display: none !important; }

/* ---- Exit review modal ---- */
.review-panel { width: min(1200px, 95vw); max-height: 92vh; }
.review-panel .modal-toolbar { flex-wrap: wrap; }
.review-panel .modal-toolbar input[type=search] { flex: 0 1 280px; }
#review-stats { font-size: 12px; color: #9aa3af; }
.review-list {
  overflow-y: auto;
  padding: 10px 16px;
  flex: 1;
}
.review-section { margin-bottom: 18px; }
.review-section-title {
  font-size: 13px;
  font-weight: 600;
  color: #cbd2da;
  margin-bottom: 8px;
  padding: 4px 0;
  border-bottom: 1px solid #2a2f36;
}
.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.review-tile {
  background: #0f1114;
  border: 1px solid #2a2f36;
  border-radius: 4px;
  padding: 22px;
  position: relative;
}
.review-tile.reviewed { border-color: #3e4b38; }
.review-tile-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
  object-fit: contain;
  background: #000;
}
.review-tile-name {
  font-size: 10px;
  color: #9aa3af;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.edge-dot {
  position: absolute;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid #14171b;
  cursor: pointer;
  z-index: 2;
  transition: transform 0.1s;
}
.edge-dot:hover { transform: scale(1.2); }
.edge-dot.open  { background: #4ecb7a; }
.edge-dot.closed{ background: #d94848; }
.edge-dot.dir-n { top: 0;       left: 50%; transform: translate(-50%, -50%); }
.edge-dot.dir-s { bottom: 0;    left: 50%; transform: translate(-50%,  50%); }
.edge-dot.dir-w { top: 50%;     left: 0;   transform: translate(-50%, -50%); }
.edge-dot.dir-e { top: 50%;     right: 0;  transform: translate( 50%, -50%); }
.edge-dot.dir-n:hover { transform: translate(-50%, -50%) scale(1.2); }
.edge-dot.dir-s:hover { transform: translate(-50%,  50%) scale(1.2); }
.edge-dot.dir-w:hover { transform: translate(-50%, -50%) scale(1.2); }
.edge-dot.dir-e:hover { transform: translate( 50%, -50%) scale(1.2); }

.modal-footer code {
  background: #14171b;
  padding: 1px 5px;
  border-radius: 3px;
  color: #f2c57c;
  font-family: Menlo, Consolas, monospace;
  font-size: 11px;
}