:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #04080d;
}

* { box-sizing: border-box; }
html, body, #app, #map { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { color: #f4f8fb; background: #04080d; }
button { font: inherit; }
#map { position: absolute; inset: 0; }

.shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(#03060942 0, transparent 27%, transparent 62%, #030609b8 100%);
}

.glass {
  background: rgba(7, 11, 16, 0.82);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 12px 34px rgba(0,0,0,0.24);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.top {
  position: absolute;
  z-index: 20;
  top: max(10px, env(safe-area-inset-top));
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}

.chip {
  max-width: 74vw;
  padding: 9px 11px;
  border-radius: 15px;
  pointer-events: auto;
}
.chip b, .chip span { display: block; }
.chip b { font-size: 12px; line-height: 1.25; }
.chip span { margin-top: 2px; color: #aab4c0; font-size: 10px; line-height: 1.35; }
.pose { display: none; }

.status {
  position: absolute;
  z-index: 30;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: min(82vw, 420px);
  border-radius: 999px;
  padding: 8px 12px;
  color: #aab4c0;
  font-size: 11px;
  text-align: center;
}
.status.ready { display: none; }

.navigator {
  position: absolute;
  z-index: 20;
  left: 10px;
  right: 10px;
  bottom: calc(max(10px, env(safe-area-inset-bottom)) + 88px);
  padding: 7px;
  border-radius: 18px;
  transition: opacity 0.35s ease;
}
.clusters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }

button {
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 11px;
  padding: 10px 7px;
  color: #fff;
  background: rgba(255,255,255,0.055);
  font-weight: 700;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button.active { border-color: rgba(190,169,255,0.52); background: rgba(170,148,255,0.23); }
button:disabled { opacity: 0.34; filter: saturate(0.25); }
button:focus-visible { outline: 2px solid #fff2ba; outline-offset: 2px; }

.cluster { min-width: 0; text-align: left; }
.cluster b, .cluster small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cluster b { font-size: 11px; }
.cluster small { color: #aab4c0; font-size: 9px; }
.observation-nav { display: grid; grid-template-columns: 42px minmax(0,1fr) 42px; gap: 6px; margin-top: 7px; }
.observation-info { min-width: 0; padding: 8px 10px; border: 1px solid rgba(255,255,255,0.09); border-radius: 12px; background: rgba(255,255,255,0.035); }
.observation-info b, .observation-info span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.observation-info b { font-size: 11px; }
.observation-info span { margin-top: 2px; color: #aab4c0; font-size: 9px; }
.arrow { padding: 0; font-size: 22px; }
.dots { display: flex; min-height: 15px; margin-top: 6px; align-items: center; justify-content: center; gap: 5px; overflow: hidden; }
.dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgba(135,145,157,0.4); box-shadow: none; }
.dot.active { transform: scale(1.35); background: #fff2ba; }
.dot.visited { background: #77dfcc; }

.tray {
  position: absolute;
  z-index: 20;
  left: 10px;
  right: 10px;
  bottom: max(10px, env(safe-area-inset-bottom));
  padding: 8px;
  border-radius: 17px;
}
.modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
#photoBtn[aria-disabled="true"] { opacity: 0.34; }
#photoBtn[aria-disabled="false"] { opacity: 1; box-shadow: inset 0 0 0 1px rgba(105,227,205,0.54); }
#photoBtn.loading::after { content: "…"; }
.note { min-height: 12px; margin-top: 6px; color: #aeb8c4; font-size: 9px; line-height: 1.35; }

.capture-dot {
  width: 18px;
  height: 18px;
  border: 3px solid #f2ffff;
  border-radius: 50%;
  background: #69e3cd;
  box-shadow: 0 0 0 7px rgba(105,227,205,0.25), 0 6px 18px rgba(0,0,0,0.6);
}
.photo-plane {
  position: relative;
  width: 24px;
  height: 32px;
  border: 4px solid #fff4e8;
  border-radius: 3px;
  background: #ffb66a;
  box-shadow: 0 0 0 6px rgba(255,182,106,0.25), 0 8px 20px rgba(0,0,0,0.67);
}
.photo-plane::after { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(155,84,32,0.66); }

.cluster-product .modes { grid-template-columns: repeat(3, 1fr); }
#uploadBtn { display: none; }
.cluster-product #uploadBtn { display: block; }
.cluster-product #pov, .cluster-product #photoBtn { display: none; }
html[data-mode="cluster"] .shade { background: linear-gradient(#03060975 0, transparent 24%, transparent 55%, #030609e0 100%); }

.upload-panel {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: grid;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  place-items: center;
  overflow: auto;
  background: rgba(2,5,8,0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.upload-panel[hidden] { display: none; }
.upload-sheet {
  width: min(940px, 100%);
  max-height: calc(100dvh - max(24px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
  padding: 18px;
  overflow: auto;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(13,20,27,0.98), rgba(6,10,15,0.98));
  box-shadow: 0 36px 110px rgba(0,0,0,0.7);
  overscroll-behavior: contain;
}
.upload-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.upload-header span { color: #78e2cf; font-size: 9px; font-weight: 850; letter-spacing: 0.16em; }
.upload-header h2 { margin: 3px 0 0; font-size: 24px; letter-spacing: -0.04em; }
.upload-close { width: 42px; height: 42px; flex: 0 0 auto; padding: 0; border-radius: 50%; font-size: 24px; }
.upload-intro { max-width: 720px; margin: 10px 0 13px; color: #b4c0c9; font-size: 11px; line-height: 1.55; }
.upload-dropzone {
  display: grid;
  min-height: 90px;
  padding: 16px;
  place-items: center;
  border: 1px dashed rgba(119,223,204,0.5);
  border-radius: 17px;
  text-align: center;
  background: rgba(105,227,205,0.07);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.upload-dropzone.dragging { border-color: #fff2ba; background: rgba(255,242,186,0.12); transform: scale(1.005); }
.upload-dropzone.busy { pointer-events: none; opacity: 0.58; }
.upload-dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.upload-dropzone b, .upload-dropzone span { display: block; }
.upload-dropzone b { font-size: 14px; }
.upload-dropzone span { max-width: 580px; margin-top: 4px; color: #9fadb7; font-size: 9px; line-height: 1.45; }
.upload-progress { min-height: 16px; margin: 8px 2px; color: #aab7c0; font-size: 10px; }
.upload-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 10px 0; }
.upload-summary[hidden], .upload-workspace[hidden] { display: none; }
.upload-summary > div { padding: 9px; border: 1px solid rgba(255,255,255,0.09); border-radius: 12px; background: rgba(255,255,255,0.035); }
.upload-summary b, .upload-summary span { display: block; }
.upload-summary b { color: #f9f3dc; font-size: 16px; }
.upload-summary span { margin-top: 1px; color: #92a3ae; font-size: 8px; text-transform: uppercase; letter-spacing: 0.06em; }
.upload-workspace { display: grid; grid-template-columns: minmax(260px, 0.9fr) minmax(300px, 1.1fr); gap: 12px; align-items: start; }
.upload-preview, .upload-review { min-width: 0; border: 1px solid rgba(255,255,255,0.1); border-radius: 17px; background: rgba(255,255,255,0.025); }
.upload-preview { position: sticky; top: -1px; padding: 10px; }
.upload-preview.pulse { animation: upload-pulse 0.72s ease-out; }
@keyframes upload-pulse { 50% { box-shadow: 0 0 0 4px rgba(119,223,204,0.2); border-color: rgba(119,223,204,0.7); } }
.upload-preview-heading { display: flex; min-height: 28px; align-items: flex-start; justify-content: space-between; gap: 8px; }
.upload-preview-heading span { color: #77dfcc; font-size: 8px; font-weight: 850; letter-spacing: 0.11em; }
.upload-preview-heading small { color: #83949f; font-size: 8px; }
.upload-preview-hero { position: relative; display: grid; height: min(37vh, 310px); min-height: 190px; overflow: hidden; place-items: center; border-radius: 13px; background: linear-gradient(145deg, #18242d, #090f14); }
.upload-preview-hero > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.upload-preview-fallback { padding: 24px; color: #9fb0ba; font-size: 11px; text-align: center; }
.upload-preview-copy { position: absolute; right: 0; bottom: 0; left: 0; padding: 38px 10px 9px; pointer-events: none; background: linear-gradient(transparent, rgba(2,5,8,0.94)); }
.upload-preview-copy b, .upload-preview-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-preview-copy b { font-size: 11px; }
.upload-preview-copy span { margin-top: 2px; color: #b9c6cd; font-size: 8px; }
.upload-filmstrip { display: flex; height: 58px; margin-top: 7px; padding: 2px; gap: 5px; overflow-x: auto; }
.upload-film { position: relative; width: 54px; height: 52px; flex: 0 0 auto; padding: 0; overflow: hidden; border-radius: 9px; opacity: 0.58; }
.upload-film.active { width: 65px; opacity: 1; border-color: #fff1b7; }
.upload-film img { display: block; width: 100%; height: 100%; object-fit: cover; }
.upload-film span { position: absolute; right: 2px; bottom: 2px; padding: 1px 3px; border-radius: 4px; background: rgba(2,5,8,0.78); font-size: 6px; }
.upload-review { display: grid; max-height: 435px; padding: 8px; gap: 7px; overflow-y: auto; }
.upload-card { padding: 9px; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; background: rgba(4,8,12,0.5); }
.upload-card.selected { border-color: rgba(255,240,182,0.48); background: rgba(255,240,182,0.055); }
.upload-card-select { display: block; width: 100%; padding: 0; border: 0; border-radius: 0; text-align: left; background: transparent; }
.upload-card-select b, .upload-card-select span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-card-select b { font-size: 11px; }
.upload-card-select span { margin-top: 2px; color: #92a3ae; font-size: 8px; }
.upload-badges { display: flex; margin: 7px 0; flex-wrap: wrap; gap: 4px; }
.upload-badge { padding: 3px 5px; border-radius: 999px; color: #c7d2d8; background: rgba(255,255,255,0.07); font-size: 7px; text-transform: uppercase; letter-spacing: 0.05em; }
.upload-badge.good, .upload-badge.strong { color: #9ff2df; background: rgba(105,227,205,0.12); }
.upload-badge.partial { color: #ffe0a4; background: rgba(255,193,101,0.12); }
.upload-badge.warning, .upload-badge.missing { color: #ffc0a5; background: rgba(255,130,93,0.13); }
.upload-card dl { display: grid; margin: 0; gap: 3px; }
.upload-card dl > div { display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 7px; }
.upload-card dt, .upload-card dd { margin: 0; font-size: 8px; line-height: 1.35; }
.upload-card dt { color: #82949f; }
.upload-card dd { overflow: hidden; color: #d8e2e7; text-overflow: ellipsis; white-space: nowrap; }
.upload-card dd.missing { color: #e39e84; }
.upload-actions { display: grid; margin-top: 12px; grid-template-columns: 88px minmax(0,1fr) 170px; gap: 8px; align-items: center; }
.upload-actions span { color: #81939e; font-size: 8px; text-align: center; }
.upload-actions button:last-child { border-color: rgba(119,223,204,0.42); background: rgba(105,227,205,0.11); }
.upload-active .top, .upload-active .navigator, .upload-active .tray { visibility: hidden; }

.cluster-memory-stage {
  --memory-image: none;
  position: absolute;
  z-index: 15;
  top: 12px;
  right: 12px;
  bottom: 12px;
  width: min(520px, 42vw);
  min-width: 360px;
  display: flex;
  flex-direction: column;
  padding: 14px;
  overflow: clip;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(9,14,20,0.82), rgba(6,9,13,0.68));
  box-shadow: 0 30px 90px rgba(0,0,0,0.42), inset 0 1px rgba(255,255,255,0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.cluster-memory-stage[hidden] { display: none; }
.memory-detail-scroll { position: relative; z-index: 1; min-height: 0; flex: 1 1 auto; padding-right: 4px; overflow-x: clip; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; }
.memory-ambient {
  position: absolute;
  inset: -45px;
  pointer-events: none;
  background-image: linear-gradient(90deg, rgba(5,9,13,0.88), rgba(5,9,13,0.35), rgba(5,9,13,0.88)), var(--memory-image);
  background-position: center;
  background-size: cover;
  opacity: 0.2;
  filter: blur(34px) saturate(0.8);
  transform: scale(1.14);
}
.memory-stage-header { position: relative; z-index: 1; display: flex; min-height: 38px; align-items: flex-start; justify-content: space-between; gap: 12px; }
.memory-stage-header div span, .memory-stage-header div b { display: block; }
.memory-stage-header div span { color: #79e4d0; font-size: 8px; font-weight: 850; letter-spacing: 0.18em; }
.memory-stage-header div b { margin-top: 2px; font-size: 15px; letter-spacing: -0.02em; }
.memory-stage-header > small { max-width: 50%; color: #aebbc3; font-size: 9px; text-align: right; }
.memory-stage-layout { position: relative; z-index: 1; display: block; height: auto; min-height: 0; }
.memory-hero { position: relative; width: 100%; height: clamp(320px, 52vh, 470px); min-height: 320px; padding: 0; overflow: hidden; border-color: rgba(255,244,216,0.36); border-radius: 18px; background: rgba(2,5,8,0.88); box-shadow: 0 20px 45px rgba(0,0,0,0.46), 0 0 0 1px rgba(255,255,255,0.04); }
.memory-hero:hover { border-color: rgba(255,240,190,0.72); transform: translateY(-2px); }
.memory-hero img { display: block; width: 100%; height: 100%; object-fit: contain; }
.memory-hero-copy { position: absolute; right: 0; bottom: 0; left: 0; padding: 34px 13px 11px; text-align: left; background: linear-gradient(transparent, rgba(2,5,8,0.9)); }
.memory-hero-copy small, .memory-hero-copy b, .memory-hero-copy em { display: block; }
.memory-hero-copy small { color: #78e0cd; font-size: 8px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.memory-hero-copy b { margin-top: 2px; font-size: 13px; }
.memory-hero-copy em { margin-top: 2px; color: #b7c2c9; font-size: 8px; font-style: normal; font-weight: 500; }
.memory-ai-card { position: relative; z-index: 1; padding: 10px 11px; border: 1px solid rgba(255,255,255,0.09); border-radius: 14px; background: rgba(5,10,15,0.62); }
.memory-ai-card[hidden] { display: none; }
.memory-ai-card.cluster-context { margin: 4px 0 10px; }
.memory-ai-card.photo-context { margin: 10px 0 6px; }
.memory-ai-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.memory-ai-label span { color: #7be3d0; font-size: 7px; font-weight: 850; letter-spacing: 0.16em; }
.memory-ai-label em { padding: 2px 5px; border: 1px solid rgba(255,208,138,0.24); border-radius: 999px; color: #ffd79a; background: rgba(255,190,93,0.08); font-size: 6px; font-style: normal; font-weight: 800; letter-spacing: 0.08em; }
.memory-ai-card h3 { margin: 5px 0 0; color: #f5f7f3; font-size: 14px; line-height: 1.2; letter-spacing: -0.02em; }
.memory-ai-card p { margin: 6px 0 0; color: #b8c4ca; font-size: 9px; line-height: 1.55; }
.memory-photo-lede { color: #d4dee2 !important; font-size: 10px !important; line-height: 1.55 !important; }
.memory-photo-story { margin-top: 10px; padding: 10px 11px; border-left: 2px solid rgba(121,228,208,0.55); border-radius: 0 10px 10px 0; background: rgba(119,223,204,0.055); }
.memory-photo-story > span { color: #7be3d0; font-size: 7px; font-weight: 850; letter-spacing: 0.14em; }
.memory-photo-story p { margin-top: 5px; color: #d1dade; font-size: 10.5px; line-height: 1.65; }
.memory-ai-tags { display: flex; margin-top: 8px; flex-wrap: wrap; gap: 4px; }
.memory-ai-tags span { padding: 3px 6px; border-radius: 999px; color: #b9ddd6; background: rgba(105,227,205,0.09); font-size: 7px; }
.memory-ai-sources { margin-top: 8px; color: #91a3ad; font-size: 8px; }
.memory-ai-sources summary { color: #aab9c1; cursor: pointer; }
.memory-ai-sources p { margin: 5px 0; color: #8799a3; font-size: 8px; }
.memory-ai-sources div { display: grid; gap: 3px; }
.memory-ai-sources a { color: #86d9cc; text-decoration: none; }
.memory-ai-sources a:hover { text-decoration: underline; }
.memory-ai-sources.photo-sources { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.07); }
.memory-ai-sources.photo-sources > p { color: #9babb3; line-height: 1.5; }
.memory-ai-disclosure { display: block; margin-top: 9px; padding-top: 7px; border-top: 1px solid rgba(255,255,255,0.07); color: #798b95; font-size: 7px; line-height: 1.45; }
.memory-thumb { position: relative; flex: 0 0 auto; padding: 0; overflow: hidden; border-radius: 10px; background: #101820; box-shadow: 0 9px 22px rgba(0,0,0,0.38); }
.memory-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.memory-thumb span { position: absolute; right: 3px; bottom: 3px; padding: 2px 4px; border-radius: 999px; color: #eef9f7; background: rgba(4,8,12,0.8); font-size: 7px; }
.memory-thumb:hover { opacity: 1; border-color: rgba(119,223,204,0.68); }
.memory-detail-nav { position: relative; z-index: 1; display: grid; height: 38px; margin-top: 7px; grid-template-columns: 38px minmax(0,1fr) 38px; gap: 6px; align-items: center; }
.memory-detail-nav button { width: 38px; height: 34px; padding: 0; font-size: 20px; }
.memory-detail-nav span { min-width: 0; text-align: center; }
.memory-detail-nav b, .memory-detail-nav small { display: block; }
.memory-detail-nav b { color: #f7f2db; font-size: 10px; }
.memory-detail-nav small { margin-top: 1px; color: #82949f; font-size: 7px; letter-spacing: 0.08em; text-transform: uppercase; }
.memory-filmstrip { position: relative; z-index: 1; display: flex; height: 58px; margin-top: 5px; padding: 3px 2px; gap: 5px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: thin; }
.memory-thumb.film { width: 52px; height: 50px; scroll-snap-align: center; opacity: 0.54; }
.memory-thumb.film.active { width: 68px; opacity: 1; border-color: #fff0b6; box-shadow: 0 0 0 2px rgba(255,240,182,0.18); }
.cluster-memory-stage.single .memory-filmstrip { display: none; }

.cluster-photo-viewer { position: fixed; z-index: 60; inset: 0; display: grid; padding: 28px 72px; place-items: center; background: rgba(2,4,7,0.92); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.cluster-photo-viewer[hidden] { display: none; }
.cluster-photo-viewer figure { display: grid; width: min(100%, 1040px); height: 100%; min-height: 0; margin: 0; grid-template-rows: minmax(0,1fr) auto; place-items: center; }
.cluster-photo-viewer figure img { display: block; width: 100%; height: 100%; min-height: 0; border-radius: 12px; object-fit: contain; box-shadow: 0 30px 100px rgba(0,0,0,0.72); }
.cluster-photo-viewer figcaption { width: min(760px, 100%); padding-top: 12px; text-align: center; }
.cluster-photo-viewer figcaption b, .cluster-photo-viewer figcaption span { display: block; }
.cluster-photo-viewer figcaption b { font-size: 14px; }
.cluster-photo-viewer figcaption span { margin-top: 3px; color: #aab8c0; font-size: 9px; }
.memory-viewer-close { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 16px; width: 42px; height: 42px; padding: 0; border-radius: 50%; font-size: 25px; }
.memory-viewer-arrow { position: absolute; top: 50%; width: 48px; height: 58px; padding: 0; transform: translateY(-50%); font-size: 29px; }
.memory-viewer-arrow.prev { left: 14px; }
.memory-viewer-arrow.next { right: 14px; }
.memory-viewer-active .top, .memory-viewer-active .navigator, .memory-viewer-active .tray { visibility: hidden; }

.cluster-marker-root { width: 94px; height: 100px; pointer-events: auto; }
.cluster-card {
  width: 94px;
  padding: 0;
  border: 0;
  color: #fff;
  background: transparent;
  filter: drop-shadow(0 9px 16px rgba(0,0,0,0.58));
  transition: opacity 0.38s ease, transform 0.5s cubic-bezier(.2,.75,.2,1);
}
.cluster-card .mosaic {
  position: relative;
  display: grid;
  width: 84px;
  height: 64px;
  margin: 0 auto;
  padding: 2px;
  gap: 2px;
  overflow: hidden;
  border: 2px solid rgba(244,255,252,0.94);
  border-radius: 13px;
  background: #14202a;
  box-shadow: 0 0 0 5px rgba(105,227,205,0.16);
}
.cluster-card.layout-1 .mosaic { grid-template-columns: 1fr; }
.cluster-card.layout-2 .mosaic { grid-template-columns: 1fr 1fr; }
.cluster-card.layout-3 .mosaic { grid-template-columns: 1.25fr .75fr; grid-template-rows: 1fr 1fr; }
.cluster-card.layout-4 .mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.cluster-card.layout-3 .mosaic > :first-child { grid-row: 1 / 3; }
.cluster-card .mosaic img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; background: #1a2732; }
.missing-photo { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; color: #8ea0ad; background: linear-gradient(145deg,#1b2833,#0d151c); font-size: 8px; letter-spacing: 0.12em; }
.more-badge { position: absolute; right: 5px; bottom: 5px; display: flex; min-width: 27px; height: 23px; padding: 0 6px; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.76); border-radius: 999px; background: rgba(4,8,13,0.86); font-size: 10px; font-weight: 800; }
.marker-label { display: block; margin-top: 7px; text-align: center; text-shadow: 0 2px 7px #000; }
.marker-label b, .marker-label small { display: block; line-height: 1.15; }
.marker-label b { font-size: 11px; }
.marker-label small { color: #c8d4dc; font-size: 9px; }
.cluster-card.world { opacity: 1; }
.cluster-card.transit { opacity: 0.7; transform: scale(0.86); }
.cluster-card.hidden { opacity: 0; transform: translateY(10px) scale(0.72); pointer-events: none; }

.maplibregl-ctrl-attrib { opacity: 0.42; font-size: 8px !important; }
.photo-active .maplibregl-canvas { cursor: default; }

.calibration-lab {
  position: absolute;
  z-index: 24;
  top: 70px;
  right: 10px;
  width: 224px;
  padding: 10px;
  border-radius: 15px;
}
.calibration-lab > b, .calibration-help, .calibration-readout { display: block; }
.calibration-lab > b { font-size: 12px; }
.calibration-help, .calibration-readout { margin: 2px 0 7px; color: #aeb8c4; font-size: 9px; }
.calibration-lab label { display: flex; margin-top: 4px; justify-content: space-between; color: #dbe5eb; font-size: 9px; }
.calibration-lab output { color: #fff2ba; font-variant-numeric: tabular-nums; }
.calibration-lab input { width: 100%; height: 14px; margin: 0; accent-color: #77dfcc; }
.calibration-actions { display: grid; grid-template-columns: 1fr 54px; gap: 5px; margin-top: 7px; }
.calibration-lab button { width: 100%; padding: 7px; font-size: 10px; }
.calibration-active .shade { opacity: 0.2; }
.three-camera-lab { width: 238px; }
.three-camera-lab #threeJump { margin: 1px 0 5px; }
.three-fixed-evidence {
  display: block;
  margin: -2px 0 8px;
  color: #83e8d5;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}
.three-calibration-active .shade { opacity: 0.12; }
.solver-lab { width: 244px; }
.solver-meter { height: 4px; margin: 7px 0; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,0.09); }
.solver-meter i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6ee0ca, #ffd08a); transition: width 0.16s ease; }
.solver-result, .solver-result b, .solver-result span { display: block; }
.solver-result { min-height: 29px; color: #e8f4f2; font-size: 10px; line-height: 1.35; }
.solver-result span { color: #9fb1bc; font-size: 9px; }
.solver-actions { grid-template-columns: 1fr 78px 48px; }
.solver-batch-results { display: grid; max-height: 158px; margin-top: 7px; gap: 2px; overflow-y: auto; scrollbar-width: thin; }
.solver-batch-row { display: grid; grid-template-columns: 35px 1fr 37px 46px; gap: 4px; align-items: center; padding: 3px 5px; border-radius: 6px; color: #dbe8e7; background: rgba(255,255,255,0.045); font-size: 8px; font-variant-numeric: tabular-nums; }
.solver-batch-row b { color: #fff; }
.solver-batch-row i { color: #9fb2bd; font-style: normal; }
.solver-batch-row em { color: #ffd494; font-style: normal; text-align: right; }
.solver-batch-row small { color: #8297a3; text-align: right; }
.solver-batch-row.high i { color: #7cf1d6; }
.solver-batch-row.medium i { color: #ffd494; }
.solver-batch-row.low i, .solver-batch-row.unavailable i { color: #bdc8ce; }
.solver-active .shade { opacity: 0.1; }

@media (min-width: 720px) {
  .navigator, .tray { left: 50%; right: auto; width: 560px; transform: translateX(-50%); }
  .navigator { bottom: 112px; }
}

@media (min-width: 840px) {
  html[data-mode="cluster"] .navigator,
  html[data-mode="cluster"] .tray { left: 12px; right: auto; width: min(560px, calc(58vw - 34px)); transform: none; }
  html[data-mode="cluster"] .navigator { bottom: 100px; }
  html[data-mode="cluster"] .observation-nav,
  html[data-mode="cluster"] .dots { display: none; }
}

@media (max-width: 680px) {
  .cluster-memory-stage { top: auto; right: 9px; bottom: 148px; left: 9px; width: auto; height: min(46dvh, 410px); min-width: 0; padding: 10px; border-radius: 19px; }
  .memory-stage-header { min-height: 34px; }
  .memory-stage-layout { height: auto; min-height: 0; }
  .memory-hero { height: min(40vh, 300px); min-height: 250px; }
  .memory-ai-card h3 { font-size: 13px; }
  .memory-ai-card p { font-size: 8px; }
  .memory-photo-lede { font-size: 9px !important; }
  .memory-photo-story { padding: 9px; }
  .memory-photo-story p { font-size: 9.5px; line-height: 1.6; }
  .memory-detail-nav { height: 34px; margin-top: 4px; }
  .memory-detail-nav button { height: 30px; }
  .memory-filmstrip { height: 50px; margin-top: 3px; }
  .memory-thumb.film { width: 46px; height: 44px; }
  .memory-thumb.film.active { width: 60px; }
  html[data-mode="cluster"] .navigator { bottom: 84px; }
  html[data-mode="cluster"] .navigator .observation-nav,
  html[data-mode="cluster"] .navigator .dots { display: none; }
  .cluster-photo-viewer { padding: 58px 10px 26px; }
  .memory-viewer-arrow { top: auto; bottom: 16px; width: 44px; height: 44px; }
  .memory-viewer-arrow.prev { left: 12px; }
  .memory-viewer-arrow.next { right: 12px; }
  .upload-panel { padding: 0; place-items: end center; }
  .upload-sheet { width: 100%; max-height: 94dvh; padding: 15px 12px max(13px, env(safe-area-inset-bottom)); border-right: 0; border-bottom: 0; border-left: 0; border-radius: 22px 22px 0 0; }
  .upload-header h2 { font-size: 21px; }
  .upload-intro { font-size: 10px; }
  .upload-dropzone { min-height: 98px; }
  .upload-summary { grid-template-columns: repeat(2, 1fr); }
  .upload-workspace { grid-template-columns: 1fr; }
  .upload-preview { position: static; }
  .upload-preview-hero { height: min(40vh, 330px); }
  .upload-review { max-height: none; }
  .upload-actions { position: sticky; bottom: -15px; z-index: 2; margin: 12px -12px -15px; padding: 9px 12px max(10px, env(safe-area-inset-bottom)); grid-template-columns: 72px minmax(0,1fr); background: rgba(6,10,15,0.96); box-shadow: 0 -12px 30px rgba(0,0,0,0.35); }
  .upload-actions span { display: none; }
  .upload-actions button:last-child { min-width: 0; }
}

@media (max-height: 650px) {
  .note { display: none; }
  .navigator { bottom: calc(max(8px, env(safe-area-inset-bottom)) + 66px); }
  .tray { bottom: max(8px, env(safe-area-inset-bottom)); padding: 6px; }
  button { padding-block: 8px; }
  .cluster-memory-stage { top: 8px; bottom: 8px; }
  .memory-stage-header { min-height: 32px; }
  .memory-hero { height: 280px; min-height: 240px; }
  .memory-filmstrip { height: 52px; }
  .memory-thumb.film { height: 46px; }
}

@media (max-width: 680px) and (max-height: 650px) {
  .cluster-memory-stage { top: auto; bottom: 128px; height: 45dvh; }
  .memory-stage-header > small { display: none; }
  .memory-hero { height: 250px; min-height: 220px; }
  .memory-filmstrip { height: 44px; }
  .memory-thumb.film { height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}