/* ── Gallery Editor UI ───────────────────────────────────────────────────── */

/* EDIT toggle — fixed bottom-right, invisible until hovered */
.ge-toggle {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 900;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.2);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 3px;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.25s, border-color 0.2s, color 0.2s;
}
body:hover .ge-toggle     { opacity: 0.3; }
.ge-toggle:hover,
.ge-editing .ge-toggle    { opacity: 1; border-color: var(--accent); color: var(--accent); }

/* Top toolbar */
.ge-toolbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 950;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 2rem;
  height: 48px;
  background: #050505;
  border-bottom: 1px solid var(--accent);
  transform: translateY(-100%);
  transition: transform 0.3s var(--ease-out, ease);
  pointer-events: none;
}
.ge-toolbar.ge-visible    { transform: translateY(0); pointer-events: all; }

.ge-toolbar-label {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 3px;
  color: var(--accent);
}
.ge-toolbar-btn {
  background: transparent;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 2px;
  padding: 0.35rem 0.9rem;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s;
}
.ge-toolbar-reset { border: 1px solid rgba(255, 60, 60, 0.4); color: rgba(255, 60, 60, 0.6); }
.ge-toolbar-reset:hover { border-color: #ff3c3c; color: #ff3c3c; }
.ge-toolbar-done  { border: 1px solid var(--accent); color: var(--accent); }
.ge-toolbar-done:hover { background: var(--accent); color: #000; }

/* Push content down when toolbar is open */
.ge-editing .project-hero { padding-top: calc(var(--nav-height, 70px) + 4rem + 48px); }

/* Edit-mode item states */
.ge-editing .gallery__item {
  cursor: grab;
  outline: 1px dashed rgba(255, 255, 255, 0.1);
  outline-offset: 2px;
  transition: outline-color 0.15s, opacity 0.15s;
  overflow: visible;
}
.ge-editing .gallery__item:hover { outline-color: rgba(213, 254, 0, 0.5); }
.ge-editing .gallery__item.ge-dragging   { opacity: 0.3; cursor: grabbing; }
.ge-editing .gallery__item.ge-drag-target { outline: 2px solid var(--accent) !important; }

/* Delete button */
.ge-delete {
  position: absolute;
  top: 0.5rem; right: 0.5rem;
  z-index: 10;
  width: 1.75rem; height: 1.75rem;
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(255, 60, 60, 0.6);
  color: rgba(255, 60, 60, 0.85);
  font-size: 1.15rem; line-height: 1;
  cursor: pointer;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}
.ge-delete:hover { background: #ff3c3c; border-color: #ff3c3c; color: #000; }

/* ── Ratio picker ─────────────────────────────────────────────────────────── */

.ge-ratio-btn {
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  z-index: 10;
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 1px;
  padding: 0.25rem 0.55rem;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.ge-ratio-btn:hover { border-color: var(--accent); color: var(--accent); }

.ge-ratio-picker {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 30;
  background: #0c0c0c;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 0.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  width: max-content;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
}
.ge-ratio-opt {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.45);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 1px;
  padding: 0.25rem 0.55rem;
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.ge-ratio-opt:hover { border-color: var(--accent); color: var(--accent); }
.ge-ratio-opt.ge-ratio-active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(213, 254, 0, 0.08);
}

/* ── Drop zone cell ───────────────────────────────────────────────────────── */

.ge-dropzone {
  aspect-ratio: 16 / 9;
  background: transparent;
  border: 1px dashed rgba(213, 254, 0, 0.2);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, background 0.2s;
}
.ge-dropzone:hover,
.ge-dropzone.ge-dz-hover {
  border-color: var(--accent);
  background: rgba(213, 254, 0, 0.04);
}
.ge-dz-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  pointer-events: none;
}
.ge-dz-icon  { font-size: 2.2rem; line-height: 1; color: rgba(213, 254, 0, 0.35); transition: color 0.2s; }
.ge-dz-label { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 3px; color: rgba(213, 254, 0, 0.4); transition: color 0.2s; }
.ge-dz-sub   { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 1px; color: rgba(255, 255, 255, 0.2); }

.ge-dropzone:hover .ge-dz-icon,
.ge-dropzone.ge-dz-hover .ge-dz-icon  { color: var(--accent); }
.ge-dropzone:hover .ge-dz-label,
.ge-dropzone.ge-dz-hover .ge-dz-label { color: var(--accent); }

/* ── Admin Login Modal ──────────────────────────────────────────────────────── */
.ge-login-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.ge-login-modal.ge-login-visible {
  opacity: 1;
  pointer-events: all;
}
.ge-login-box {
  background: #080808;
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 2.5rem 2.75rem;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 0 60px rgba(213, 254, 0, 0.08);
}
.ge-login-title {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 5px;
  color: var(--accent);
}
.ge-login-sub {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.25);
  margin-top: -0.4rem;
}
.ge-login-input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 4px;
  padding: 0.75rem 1rem;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.ge-login-input:focus { border-color: var(--accent); }
.ge-login-input::placeholder { color: rgba(255, 255, 255, 0.18); letter-spacing: 2px; }
.ge-login-error {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 2px;
  color: #ff3c3c;
  min-height: 1em;
  margin-top: -0.35rem;
}
.ge-login-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 0.25rem;
}
.ge-login-cancel {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.3);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 2px;
  padding: 0.45rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.ge-login-cancel:hover { border-color: rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.6); }
.ge-login-submit {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 2px;
  padding: 0.45rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.ge-login-submit:hover { background: var(--accent); color: #000; }