:root {
  --ink: #0B0E14;
  --ink-2: #121724;
  --hair: rgba(255, 255, 255, .08);
  --text: #E7E9EE;
  --muted: #9aa3b2;
  --sunrise: linear-gradient(90deg, #ff7a59, #ffb347, #ffd56b);
  --glow: 0 0 24px rgba(255, 150, 90, .55);
  --glass: rgba(12, 15, 22, .55);
  font-family: Inter, -apple-system, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ink); color: var(--text); }

/* ---- login ---- */
.center { min-height: 100%; display: grid; place-items: center; }
.card { background: var(--ink-2); border: 1px solid var(--hair); border-radius: 18px; padding: 36px 32px; width: min(360px, 90vw); box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.wordmark { font-size: 26px; font-weight: 700; letter-spacing: -.5px; margin: 0 0 4px; }
.wordmark span { background: var(--sunrise); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sub { color: var(--muted); margin: 0 0 24px; font-size: 14px; }
input[type=password], input[type=text] { width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--hair); background: #0c1119; color: var(--text); font-size: 15px; }
button { width: 100%; margin-top: 14px; padding: 13px; border: 0; border-radius: 12px; font-weight: 600; font-size: 15px; color: #1a1206; background: var(--sunrise); cursor: pointer; }
.err { color: #ff8a73; font-size: 13px; min-height: 18px; margin-top: 10px; }

/* ---- map + chrome ---- */
#map { position: fixed; inset: 0; background: var(--ink); }
.leaflet-container { background: var(--ink); }
.topbar { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; z-index: 600; pointer-events: none; }
.topbar .wordmark.sm { font-size: 18px; font-weight: 700; pointer-events: auto; text-shadow: 0 2px 12px #000; }
.ghost { width: auto; margin: 0; background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--hair); color: var(--text); padding: 9px 14px; border-radius: 11px; font-weight: 600; pointer-events: auto; }
.glass { background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--hair); }

/* ---- timeline bar ---- */
.timeline { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; width: min(820px, 92vw); display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 16px; z-index: 600; box-shadow: 0 16px 50px rgba(0, 0, 0, .5); }
.play { width: 38px; height: 38px; flex: 0 0 auto; margin: 0; border-radius: 50%; font-size: 13px; color: #1a1206; background: var(--sunrise); display: grid; place-items: center; }
.slider { flex: 1; }
.cursorLabel { flex: 0 0 auto; color: var(--muted); font-size: 13px; min-width: 96px; text-align: right; }

/* ---- noUiSlider sunrise theme ---- */
.noUi-target { background: #1c2230; border: 0; box-shadow: none; height: 6px; }
.noUi-connect { background: var(--sunrise); }
.noUi-handle { border: 0; border-radius: 50%; width: 18px !important; height: 18px !important; right: -9px !important; top: -7px !important; background: #fff; box-shadow: var(--glow); cursor: grab; }
.noUi-handle:before, .noUi-handle:after { display: none; }

/* ---- pins ---- */
.pin { width: 14px; height: 14px; border-radius: 50%; background: #5b6280; }
.pin.past { width: 11px; height: 11px; background: #46506b; box-shadow: 0 0 0 2px rgba(0, 0, 0, .4); opacity: .7; }
.pin.active { width: 18px; height: 18px; background: #ffb347; box-shadow: var(--glow); }
.leaflet-popup-content-wrapper { background: var(--ink-2); color: var(--text); border-radius: 14px; border: 1px solid var(--hair); }
.leaflet-popup-tip { background: var(--ink-2); }
.pop img { width: 200px; max-width: 60vw; border-radius: 10px; display: block; cursor: zoom-in; }
.pop .meta { margin-top: 8px; }
.pop .place { color: #ffb347; font-weight: 600; font-size: 13px; }
.pop .cap { color: var(--text); font-size: 14px; margin-top: 2px; }
.pop .date { color: var(--muted); font-size: 12px; margin-top: 4px; }

/* ---- upload sheet ---- */
.sheet { position: fixed; inset: 0; z-index: 800; display: grid; place-items: center; background: rgba(0, 0, 0, .5); }
.sheet.hidden { display: none; }
.sheetCard { width: min(380px, 92vw); padding: 22px; border-radius: 18px; }
.sheetCard h3 { margin: 0 0 14px; }
.sheetCard input { width: 100%; margin-bottom: 10px; padding: 12px; border-radius: 11px; border: 1px solid var(--hair); background: #0c1119; color: var(--text); }
.row { display: flex; gap: 10px; }
.row button { margin-top: 6px; }

/* ---- lightbox ---- */
.lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, .92); z-index: 900; display: grid; place-items: center; }
.lightbox img { max-width: 94vw; max-height: 90vh; border-radius: 10px; }
.lightbox.hidden { display: none; }