* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: system-ui, sans-serif; }
body { display: flex; flex-direction: column; background: #f5f6f8; color: #222; }

header {
  height: 96px; flex: 0 0 96px; display: flex; align-items: center;
  background: #fff; border-bottom: 1px solid #ddd; z-index: 1000;
}
header .app-title { font-size: 18px; flex: 0 0 360px; padding: 0 16px; }
.processing-mode { display: block; margin-top: 6px; font-size: 12px; }
.processing-mode select { margin-left: 6px; max-width: 180px; }
.always-local-metadata-setting {
  display: flex; align-items: flex-start; gap: 5px; margin-top: 4px;
  font-size: 11px; line-height: 14px; cursor: pointer;
}
.always-local-metadata-setting[hidden] { display: none; }
.always-local-metadata-setting input { margin: 1px 0 0; flex: 0 0 auto; }
#localMetadataWarning { max-width: 640px; width: calc(100% - 48px); }
#localMetadataWarningText { overflow-wrap: anywhere; }
.capture-timeline { flex: 1; min-width: 0; padding: 6px 12px; }
.timeline-empty { color: #777; font-size: 13px; }
.timeline-viewport { overflow: hidden; padding: 0 36px; }
.timeline-viewport.timeline-scrollable { overflow-x: auto; }
.timeline-track { position: relative; height: 68px; }
.time-slider-label, .timeline-endpoint {
  position: absolute; transform: translateX(-50%); white-space: pre;
  text-align: center; font-size: 11px; line-height: 14px; pointer-events: none;
}
.time-slider-label { top: calc(16px - .5em); color: #1769e0; }
.timeline-endpoint { top: calc(16px - .5em); color: #555; }
.timeline-endpoint-start { left: 0; }
.timeline-endpoint-end { left: 100%; }
.timeline-track::before { content: ""; position: absolute; left: 0; right: 0; top: 48px; border-top: 2px solid #1769e0; }
.timeline-selection {
  position: absolute; top: 45px; height: 8px; background: #1769e0;
  cursor: grab; touch-action: none; user-select: none;
}
.timeline-selection.dragging { cursor: grabbing; }
.timeline-dot { position: absolute; top: 44px; width: 10px; height: 10px; border-radius: 50%; background: #1769e0; z-index: 1; }
.timeline-dot-start { left: -5px; }
.timeline-dot-end { right: -5px; }
.timeline-hour { position: absolute; top: 33px; height: 32px; text-align: center; z-index: 2; pointer-events: none; }
.timeline-hour strong {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: 2px solid #1769e0; border-radius: 50%;
  background: #fff; color: #1769e0; pointer-events: auto;
}
.timeline-hour:hover { z-index: 4; }
.timeline-count-tooltip {
  display: none; position: absolute; bottom: calc(100% + 3px); left: 50%;
  transform: translateX(-50%); white-space: pre; text-align: center;
  font-size: 11px; line-height: 14px; font-weight: 400; color: #222;
  background: #fff; pointer-events: none;
}
.timeline-hour strong:hover .timeline-count-tooltip { display: block; }
.timeline-day { position: absolute; top: 42px; height: 14px; border-left: 2px solid #555; z-index: 2; pointer-events: none; }
.timeline-day span {
  position: absolute; bottom: 42px; transform: translateX(-50%);
  font-size: 11px; line-height: 14px; white-space: nowrap; color: #555;
}
#status.access-error { color: #b42318; font-size: 13px; }
@media (max-width: 700px) {
  header .app-title { flex-basis: 180px; }
}

button {
  border: 0; border-radius: 8px; padding: 9px 14px;
  background: #1769e0; color: white; cursor: pointer; font-weight: 600;
}
button:hover { background: #0d57c7; }

main { display: flex; min-height: 0; flex: 1; }
aside {
  width: 360px; min-width: 280px; background: #fff;
  border-right: 1px solid #ddd; display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
}
aside > :not(#photos) { flex-shrink: 0; }
#photos { flex: 1; min-height: 0; overflow-y: auto; }
.geo-progress { padding: 8px 12px; border-bottom: 1px solid #ddd; font-size: 12px; }
.geo-progress progress { display: block; width: 100%; height: 14px; margin-bottom: 4px; accent-color: #1769e0; }
.geo-progress button { margin-bottom: 4px; padding: 5px 10px; font-size: 12px; }
.geo-progress button:disabled { opacity: .6; cursor: default; }
.camera-types { max-height: 25%; overflow-y: auto; border-bottom: 1px solid #ddd; padding: 8px; }
.camera-types table { width: 100%; border-collapse: collapse; font-size: 12px; }
.camera-types th, .camera-types td { padding: 4px; }
.camera-types th:first-child, .camera-types td:first-child { text-align: left; overflow-wrap: anywhere; }
.camera-types th:nth-child(2), .camera-types td:nth-child(2) { text-align: center; }
.camera-types th:last-child, .camera-types td:last-child { text-align: right; }
aside.folder-dragover { box-shadow: inset 0 0 0 4px #1769e0; background: #eaf2ff; }
.folder-access { margin: 12px; max-width: calc(100% - 24px); }
.side-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid #eee;
}
.side-head h2 { margin: 0; font-size: 17px; min-width: 0; overflow-wrap: anywhere; }
#folderName { color: #1769e0; }
#count { color: #777; flex-shrink: 0; margin-left: 8px; }

.missing-geo-filter {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-bottom: 1px solid #eee;
  font-size: 13px; cursor: pointer;
}
.missing-geo-filter input { margin: 0; }
.missing-geo-filter #missingGeoPercent { color: #777; }
.missing-geo-filter #missingGeoCount { margin-left: auto; color: #777; }

.photo-sort { display: flex; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #eee; }
.photo-sort button { background: #eef2f7; color: #333; min-width: 54px; }
.photo-sort button[aria-pressed="true"] { background: #1769e0; color: #fff; }

.hint { padding: 20px; color: #777; font-size: 14px; line-height: 1.45; }

.photo {
  display: flex; align-items: center; gap: 10px; padding: 8px;
  border-bottom: 1px solid #eee; cursor: grab; user-select: none;
  background: white;
}
.photo:hover { background: #f4f7fb; }
.photo.selected { background: #eaf2ff; box-shadow: inset 4px 0 #1769e0; }
.photo.dragging { opacity: .45; }
.thumb {
  width: 72px; height: 72px; object-fit: cover; border-radius: 6px;
  background: #eee; flex: 0 0 72px;
}
.thumb.no-gps { outline: 3px solid #d92d20; outline-offset: -3px; }
.thumb.marker-match { outline: 6px solid #6ee36e; outline-offset: -6px; }
.thumb.can-focus { cursor: pointer; }
.marker-tooltip { width: max-content; white-space: nowrap; }
.marker-tooltip .more { color: #777; font-style: italic; }
.photo-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.photo-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.photo-meta {
  font-size: 12px; color: #666; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.photo-gps.missing { color: #d92d20; }
.badge { margin-left: auto; font-size: 15px; }

.map-wrap { flex: 1; min-width: 0; position: relative; }
#map { position: absolute; inset: 0; }
.location-search {
  position: absolute; z-index: 1000; top: 12px; right: 12px;
  display: flex; gap: 8px; width: min(480px, calc(100% - 24px));
  padding: 8px; background: rgba(255,255,255,.96);
  border-radius: 8px; box-shadow: 0 2px 10px #0002;
}
.location-search input {
  min-width: 0; flex: 1; padding: 9px 10px;
  border: 1px solid #ccc; border-radius: 6px; font: inherit;
}
.location-search button { white-space: nowrap; }
.location-search button:disabled { opacity: .6; cursor: wait; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
#mapHelp {
  position: absolute; z-index: 500; left: 12px; bottom: 12px;
  background: rgba(255,255,255,.94); padding: 10px 12px;
  border-radius: 8px; box-shadow: 0 2px 10px #0002; font-size: 13px;
}
.toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 3000;
  background: #222; color: white; padding: 11px 15px;
  border-radius: 8px; opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
.toast.show { opacity: 1; }

.photo-hover {
  position: fixed; z-index: 4000; display: flex; height: min(760px, calc(100vh - 16px));
  background: transparent; overflow: hidden;
}
.photo-hover[hidden] { display: none; }
.exif-tooltip {
  flex: 0 0 min(440px, 45%); min-width: 0; overflow: auto; padding: 8px 12px 10px;
  font-size: 12px; background: #fff; border: 1px solid #ccc; border-radius: 8px;
}
.hover-preview {
  flex: 1 1 0; min-width: 0; display: flex; align-items: flex-start; justify-content: flex-start;
  padding: 8px; background: transparent;
}
.hover-preview img { width: 100%; height: 100%; object-fit: contain; object-position: left top; }
.hover-preview img[hidden] { display: none; }
.hover-preview p { padding: 12px; font-size: 13px; color: #666; background: #fff; border-radius: 6px; }
.hover-preview p:empty { display: none; }
.exif-tooltip h4 {
  margin: 8px 0 4px; font-size: 12px; color: #1769e0;
  border-bottom: 1px solid #e3e8f0; padding-bottom: 2px;
}
.exif-tooltip table { width: 100%; border-collapse: collapse; }
.exif-tooltip td { padding: 1px 4px; vertical-align: top; word-break: break-word; }
.exif-tooltip td:first-child { width: 40%; color: #666; white-space: nowrap; }
.toast.error { background: #b42318; }

.marker-gallery {
  position: absolute; z-index: 1100; top: 164px; right: 12px;
  width: min(520px, calc(100% - 24px)); max-height: calc(100% - 238px);
  display: flex; flex-direction: column; background: #fff;
  border-radius: 8px; box-shadow: 0 4px 20px #0003;
}
.marker-gallery[hidden] { display: none; }
.marker-gallery-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid #ddd;
}
.marker-gallery-head h2 { margin: 0; font-size: 16px; }
.marker-gallery-images { overflow-y: auto; padding: 12px; }
.marker-gallery-images figure { margin: 0 0 16px; }
.marker-gallery-images figure:last-child { margin-bottom: 0; }
.marker-gallery-images img { display: block; width: 100%; max-height: 320px; object-fit: contain; background: #f5f6f8; }
.marker-gallery-images figcaption { margin-top: 6px; font-size: 12px; overflow-wrap: anywhere; }
.gallery-error { color: #d92d20; font-size: 13px; }

.photo-context-menu {
  position: fixed; z-index: 5000; padding: 4px; background: #fff;
  border: 1px solid #ccc; border-radius: 6px; box-shadow: 0 4px 16px #0003;
}
.photo-context-menu[hidden] { display: none; }
.photo-context-menu button { display: block; width: 100%; background: #fff; color: #222; text-align: left; }
.photo-context-menu button:hover, .photo-context-menu button:focus-visible { background: #eaf2ff; }
.photo-context-menu button:disabled { color: #888; cursor: default; }
.time-range-menu button { display: block; width: 100%; }

#googleLensDialog { max-width: 540px; width: calc(100% - 48px); }
#googleLensFilename { overflow-wrap: anywhere; }
#googleLensContext { display: block; box-sizing: border-box; width: 100%; margin: 8px 0; }
.google-lens-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.google-lens-link { padding: 8px 12px; background: #2563eb; color: #fff; border-radius: 6px; text-decoration: none; }
.google-lens-link[hidden] { display: none; }
.google-lens-link:hover { background: #1d4ed8; }
.google-lens-link:focus-visible { outline: 2px solid #222; outline-offset: 2px; }

.search-marker-pin {
  position: absolute; left: 2px; top: 3px; width: 24px; height: 24px;
  background: #d92d20; border: 2px solid #fff; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); box-shadow: -2px 2px 5px #0004;
}
.search-marker-pin::after {
  content: ""; position: absolute; left: 6px; top: 6px;
  width: 8px; height: 8px; border-radius: 50%; background: #fff;
}
.search-marker-label { color: #b42318; font-weight: 600; }

.show-movements {
  position: absolute; z-index: 1000; top: 76px; right: 12px;
  max-width: calc(100% - 24px); background: #fff; color: #333;
  box-shadow: 0 2px 10px #0002;
}
.show-movements[aria-pressed="true"] { background: #1769e0; color: #fff; }
.movement-legend {
  position: absolute; z-index: 1000; left: 12px; bottom: 76px;
  max-width: calc(100% - 24px); max-height: 25%; overflow-y: auto;
  padding: 10px 12px; background: #fff; border-radius: 8px;
  box-shadow: 0 2px 10px #0002; font-size: 12px;
}
.movement-legend[hidden] { display: none; }
.movement-legend-row { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.movement-legend-line { width: 28px; flex: 0 0 28px; border-top: 3px solid; }
.camera-colors {
  position: absolute; z-index: 1000; top: 120px; right: 12px;
  max-width: calc(100% - 24px); background: #fff; color: #333;
  box-shadow: 0 2px 10px #0002;
}
.camera-colors[aria-pressed="true"] { background: #1769e0; color: #fff; }
.camera-legend {
  position: absolute; z-index: 1000; top: 164px; right: 12px;
  max-width: min(420px, calc(40% - 18px)); max-height: calc(100% - 240px);
  overflow-y: auto; padding: 10px; background: #fff;
  border-radius: 8px; box-shadow: 0 2px 10px #0002; font-size: 12px;
}
.camera-legend[hidden] { display: none; }
.camera-colors-enabled .marker-gallery { left: 12px; right: auto; width: min(520px, calc(60% - 18px)); }
.camera-legend-row { display: flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.camera-legend-icon { position: relative; width: 28px; height: 38px; flex: 0 0 28px; padding: 0; background: transparent; }
.camera-legend-icon:hover { background: #eaf2ff; }
.camera-legend-icon[aria-pressed="false"] { opacity: .35; }
.camera-legend-icon:focus-visible { outline: 2px solid #1769e0; outline-offset: 2px; }
.camera-pin {
  position: absolute; left: 2px; top: 3px; width: 24px; height: 24px;
  border: 2px solid #fff; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); box-shadow: -2px 2px 5px #0004;
}
.camera-pin::after {
  content: ""; position: absolute; left: 6px; top: 6px;
  width: 8px; height: 8px; border-radius: 50%; background: #fff;
}

.time-slider {
  position: absolute; left: -8px; top: 40px; width: calc(100% + 16px);
  height: 18px; margin: 0; background: transparent; appearance: none;
  pointer-events: none; z-index: 3;
}
.time-slider::-webkit-slider-runnable-track { background: transparent; height: 2px; }
.time-slider::-webkit-slider-thumb {
  appearance: none; width: 16px; height: 22px; margin-top: -10px;
  background: #1769e0; border: 2px solid #fff; border-radius: 4px;
  box-shadow: 0 0 2px #333; cursor: ew-resize; pointer-events: auto;
}
.time-slider::-moz-range-track { background: transparent; }
.time-slider::-moz-range-thumb { width: 12px; height: 18px; background: #1769e0; border: 2px solid #fff; border-radius: 4px; pointer-events: auto; cursor: ew-resize; }
.time-slider:focus-visible::-webkit-slider-thumb { outline: 2px solid #222; }