@font-face {
  font-family: "Vazirmatn";
  src: url("/assets/Vazirmatn.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  font-family: Vazirmatn,  sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --ink: #f8faf7;
  --muted: rgba(248, 250, 247, .7);
  --panel: rgba(9, 13, 12, .76);
  --line: rgba(255, 255, 255, .16);
  --lime: #d7ff36;
  --green: #64e6a5;
  --amber: #ffc760;
  --red: #ff7f7f;
}

* { box-sizing: border-box; }

html, body, button, input, textarea, select, a { font-family: "Vazirmatn", Tahoma, Arial, sans-serif; }

html,
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: #090c0b;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

button,
a { font: inherit; }

button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(215, 255, 54, .9);
  outline-offset: 3px;
}

.camera-guide {
  position: fixed;
  inset: 0;
  isolation: isolate;
  width: 100%;
  height: 100dvh;
  min-height: 100svh;
  overflow: hidden;
  overscroll-behavior: none;
  color: var(--ink);
  background: #090c0b;
  contain: layout paint style;
}

.camera-guide__video,
.camera-guide__fallback,
.camera-guide__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.camera-guide__video {
  z-index: -4;
  object-fit: cover;
  background: #090c0b;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.camera-guide__fallback {
  z-index: -5;
  background:
    radial-gradient(circle at 72% 28%, rgba(215, 255, 54, .14), transparent 32%),
    radial-gradient(circle at 24% 72%, rgba(63, 147, 127, .24), transparent 40%),
    linear-gradient(145deg, #16211e, #080b0a 64%);
}

.camera-guide__shade {
  z-index: -3;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 6, 6, .68), transparent 27%),
    linear-gradient(0deg, rgba(4, 6, 6, .88), transparent 44%),
    linear-gradient(90deg, rgba(4, 6, 6, .18), transparent 28%, transparent 72%, rgba(4, 6, 6, .18));
}

.camera-guide__header {
  position: absolute;
  z-index: 20;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 12px;
  padding: calc(14px + var(--safe-top)) calc(14px + var(--safe-right)) 12px calc(14px + var(--safe-left));
}

.camera-guide__icon-button {
  display: grid;
  width: 48px;
  height: 48px;
  padding: 0;
  place-items: center;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 17px;
  background: rgba(9, 13, 12, .58);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .24);
  backdrop-filter: blur(15px);
  cursor: pointer;
}

.camera-guide__icon-button:active { transform: scale(.96); }

.camera-guide__icon-button svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.camera-guide__destination {
  min-width: 0;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .7);
}

.camera-guide__destination small,
.camera-guide__destination strong { display: block; }

.camera-guide__destination small {
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 11px;
}

.camera-guide__destination strong {
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.camera-guide__status {
  position: absolute;
  z-index: 20;
  top: calc(78px + var(--safe-top));
  left: 50%;
  display: flex;
  max-width: calc(100vw - 42px);
  padding: 7px 11px;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(9, 13, 12, .55);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
  backdrop-filter: blur(14px);
  transform: translateX(-50%);
  font-size: 11px;
  white-space: nowrap;
}

.camera-guide__signal {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(255, 199, 96, .16);
}

.camera-guide__status[data-level="good"] .camera-guide__signal {
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(100, 230, 165, .16);
}

.camera-guide__status[data-level="poor"] .camera-guide__signal {
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(255, 127, 127, .16);
}

.camera-guide__scene {
  position: absolute;
  z-index: 10;
  inset: 116px 0 210px;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
}

.camera-guide__direction {
  position: absolute;
  top: 45%;
  left: 50%;
  display: grid;
  width: min(230px, 58vw);
  justify-items: center;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .7));
}

.camera-guide__arrow {
  width: clamp(70px, 20vw, 96px);
  height: clamp(82px, 24vw, 112px);
  transform-origin: 50% 58%;
  transition: transform .25s cubic-bezier(.22, .8, .32, 1);
}

.camera-guide__direction.is-uncertain .camera-guide__arrow {
  opacity: .48;
  filter: saturate(.15);
}

.camera-guide__arrow svg { width: 100%; height: 100%; }

.camera-guide__arrow path {
  fill: var(--lime);
  stroke: #0a0d0c;
  stroke-width: 5;
  stroke-linejoin: round;
}

.camera-guide__direction strong {
  max-width: 100%;
  margin-top: -5px;
  padding: 7px 13px 5px;
  overflow: hidden;
  border-radius: 999px 999px 5px 999px;
  background: #0a0d0c;
  color: #fff;
  font-size: 14px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.camera-guide__direction span {
  margin-top: 5px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-shadow: 0 2px 10px #000;
}

.camera-guide__route-anchor-layer,
.camera-guide__poi-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.camera-guide__route-anchor-layer { z-index: 1; }
.camera-guide__poi-layer { z-index: 3; }

.camera-guide__route-anchor {
  position: absolute;
  display: grid;
  width: 1em;
  height: 1em;
  place-items: center;
  color: var(--lime);
  font-family: Arial, sans-serif;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 3px 8px rgba(0, 0, 0, .9);
  transform: translate3d(-50%, -50%, 0);
  transform-origin: center;
  will-change: left, top, opacity, transform;
}

.camera-guide__route-anchor::before {
  content: "⌃";
  display: block;
}

.camera-guide__direction { z-index: 4; }

.camera-guide__poi-label {
  position: absolute;
  display: grid;
  max-width: min(190px, 48vw);
  padding: 7px 10px;
  gap: 2px;
  color: #101312;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 13px 13px 4px 13px;
  background: rgba(248, 250, 247, .9);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
  backdrop-filter: blur(10px);
  transform: translate3d(-50%, -50%, 0);
  transition: top .16s linear, left .16s linear, opacity .16s ease;
  will-change: left, top, opacity;
  pointer-events: none;
}

.camera-guide__poi-label strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.camera-guide__poi-label small {
  color: #4e5753;
  font-size: 9px;
  direction: rtl;
}

.camera-guide__route-card {
  position: absolute;
  z-index: 20;
  right: calc(14px + var(--safe-right));
  bottom: calc(16px + var(--safe-bottom));
  left: calc(14px + var(--safe-left));
  display: grid;
  grid-template-columns: clamp(54px, 17vw, 76px) minmax(0, 1fr);
  min-height: 112px;
  padding: 11px;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 24px 24px 8px 24px;
  background: var(--panel);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .38);
  backdrop-filter: blur(20px);
}

.camera-guide__radar {
  position: relative;
  width: clamp(54px, 17vw, 76px);
  aspect-ratio: 1;
  align-self: center;
  direction: ltr;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  background: rgba(5, 10, 9, .58);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28), inset 0 0 0 3px rgba(255, 255, 255, .025);
  pointer-events: none;
}

.camera-guide__mini-map {
  position: absolute;
  inset: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02) 68%, transparent 70%);
}

.camera-guide__compass {
  position: absolute;
  z-index: 3;
  color: rgba(248, 250, 247, .68);
  font-family: Arial, sans-serif;
  font-size: clamp(5px, 1.55vw, 7px);
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 1px 4px #000;
}

.camera-guide__compass--north { top: 3px; left: 50%; color: var(--lime); transform: translateX(-50%); }
.camera-guide__compass--east { top: 50%; right: 3px; transform: translateY(-50%); }
.camera-guide__compass--south { bottom: 3px; left: 50%; transform: translateX(-50%); }
.camera-guide__compass--west { top: 50%; left: 3px; transform: translateY(-50%); }

.camera-guide__heading-needle {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-right: 4px solid transparent;
  border-bottom: 10px solid #fff;
  border-left: 4px solid transparent;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .8));
  transform: translate(-50%, -78%) rotate(0deg);
  transform-origin: 50% 78%;
  transition: transform .2s linear, opacity .2s ease;
}

.camera-guide__heading-needle.is-uncertain { opacity: .38; }

.camera-guide__wind {
  position: absolute;
  z-index: 6;
  bottom: -8px;
  left: 50%;
  display: flex;
  min-height: 16px;
  padding: 2px 5px;
  align-items: center;
  gap: 2px;
  color: rgba(248, 250, 247, .88);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(7, 12, 11, .82);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .28);
  backdrop-filter: blur(8px);
  transform: translateX(-50%);
  direction: ltr;
  white-space: nowrap;
}

.camera-guide__wind svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: var(--green);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-origin: 50% 50%;
  transition: transform .28s ease;
}

.camera-guide__wind span { font-size: 8px; font-weight: 900; }
.camera-guide__wind small { color: rgba(248, 250, 247, .55); font-size: 6px; }
.camera-guide__wind[hidden] { display: none; }

@supports not (aspect-ratio: 1) {
  .camera-guide__radar { height: clamp(54px, 17vw, 76px); }
}

.camera-guide__route-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.camera-guide__route-copy small { color: var(--lime); font-size: 10px; }
.camera-guide__route-copy strong { font-size: 17px; line-height: 1.45; }
.camera-guide__route-copy span { color: var(--muted); font-size: 11px; line-height: 1.6; }

.camera-guide__verify-button {
  display: inline-flex;
  width: fit-content;
  min-height: 30px;
  margin-top: 2px;
  padding: 4px 9px;
  align-items: center;
  gap: 6px;
  color: #111412;
  border: 0;
  border-radius: 10px 10px 3px 10px;
  background: rgba(255, 255, 255, .9);
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.camera-guide__verify-button:disabled { opacity: .55; cursor: wait; }

.camera-guide__verify-button svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.camera-guide__direction.is-ground-verified {
  top: 62%;
  perspective: 500px;
}

.camera-guide__direction.is-ground-verified .camera-guide__arrow {
  transform-origin: 50% 85%;
}

.camera-guide__permission {
  position: absolute;
  z-index: 40;
  right: calc(14px + var(--safe-right));
  bottom: calc(14px + var(--safe-bottom));
  left: calc(14px + var(--safe-left));
  display: grid;
  padding: 22px;
  gap: 18px;
  color: #111412;
  border-radius: 30px 30px 9px 30px;
  background: rgba(250, 251, 247, .97);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .48);
}

.camera-guide__permission--compact { top: 50%; bottom: auto; transform: translateY(-50%); }

.camera-guide__permission-icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 18px 18px 5px 18px;
  background: var(--lime);
}

.camera-guide__permission-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: #111412;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.camera-guide__eyebrow {
  margin: 0 0 5px;
  color: #5e655f;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
}

.camera-guide__permission h1 { margin: 0 0 8px; font-size: clamp(24px, 7vw, 34px); line-height: 1.35; }
.camera-guide__permission p { margin: 0; color: #5e655f; font-size: 13px; line-height: 1.8; }

.camera-guide__primary-button {
  display: grid;
  min-height: 52px;
  padding: 0 18px;
  place-items: center;
  color: #fff;
  border: 0;
  border-radius: 17px 17px 5px 17px;
  background: #111412;
  text-decoration: none;
  font-weight: 900;
  cursor: pointer;
}

.camera-guide__primary-button:disabled { opacity: .55; cursor: wait; }
.camera-guide__privacy { text-align: center; font-size: 10px !important; }

.camera-guide__toast {
  position: absolute;
  z-index: 60;
  bottom: calc(158px + var(--safe-bottom));
  left: 50%;
  max-width: calc(100vw - 36px);
  padding: 9px 13px;
  opacity: 0;
  color: #111412;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 12px 38px rgba(0, 0, 0, .3);
  transform: translate(-50%, 12px);
  transition: opacity .2s ease, transform .2s ease;
  font-size: 11px;
  pointer-events: none;
  white-space: nowrap;
}

.camera-guide__toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

[hidden] { display: none !important; }

@media (min-width: 740px) {
  .camera-guide__header { right: 50%; left: auto; width: min(680px, 100%); transform: translateX(50%); }
  .camera-guide__permission,
  .camera-guide__route-card { right: 50%; left: auto; width: min(560px, calc(100% - 28px)); transform: translateX(50%); }
  .camera-guide__permission--compact { transform: translate(50%, -50%); }
}

@media (max-height: 620px) {
  .camera-guide__permission { gap: 11px; padding: 16px; }
  .camera-guide__permission-icon { width: 44px; height: 44px; }
  .camera-guide__privacy { display: none; }
  .camera-guide__scene { bottom: 165px; }
  .camera-guide__route-card { min-height: 102px; }
}

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

.camera-guide__audio-button[aria-pressed="false"] { opacity:.68; }
.camera-guide__audio-button svg { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* AR-core synchronization: projected anchors, sensor states and camera fallbacks. */
.camera-guide__status {
  overflow: hidden;
}

.camera-guide__status > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.camera-guide__direction[data-projected="false"] .camera-guide__arrow {
  opacity: .64;
  filter: saturate(.55);
}

.camera-guide__direction[data-projected="true"] .camera-guide__arrow {
  opacity: 1;
}

.camera-guide__direction,
.camera-guide__poi-label,
.camera-guide__route-anchor {
  backface-visibility: hidden;
}

.camera-guide__mini-map {
  image-rendering: auto;
}

.camera-guide__route-card,
.camera-guide__permission,
.camera-guide__icon-button,
.camera-guide__status,
.camera-guide__wind {
  -webkit-backdrop-filter: blur(18px);
}

.camera-guide__sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.camera-guide__permission[aria-hidden="true"] {
  pointer-events: none;
}

.camera-guide__verify-label {
  display: inline;
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .camera-guide__route-card,
  .camera-guide__icon-button,
  .camera-guide__status,
  .camera-guide__wind {
    background: rgba(9, 13, 12, .94);
  }
}

/* Short landscape screens need a side card so the camera remains usable. */
@media (orientation: landscape) and (max-height: 560px) {
  .camera-guide__header {
    right: 0;
    left: auto;
    width: min(58vw, 560px);
  }

  .camera-guide__status {
    top: calc(12px + var(--safe-top));
    left: calc(18px + var(--safe-left));
    max-width: min(36vw, 320px);
    transform: none;
  }

  .camera-guide__scene {
    inset: 76px min(42vw, 430px) 16px 0;
  }

  .camera-guide__route-card {
    top: calc(76px + var(--safe-top));
    right: calc(14px + var(--safe-right));
    bottom: calc(14px + var(--safe-bottom));
    left: auto;
    width: min(40vw, 410px);
    min-height: 0;
    align-content: center;
  }

  .camera-guide__permission {
    top: 50%;
    right: calc(14px + var(--safe-right));
    bottom: auto;
    left: auto;
    width: min(430px, calc(100vw - 28px));
    max-height: calc(100dvh - 28px);
    overflow: auto;
    transform: translateY(-50%);
  }

  .camera-guide__toast {
    bottom: calc(18px + var(--safe-bottom));
  }
}

@media (prefers-contrast: more) {
  .camera-guide__route-card,
  .camera-guide__status,
  .camera-guide__icon-button,
  .camera-guide__wind {
    border-color: rgba(255, 255, 255, .44);
  }

  .camera-guide__poi-label {
    border-color: #fff;
    background: #fff;
  }
}

@media (forced-colors: active) {
  .camera-guide__arrow path {
    fill: Highlight;
    stroke: CanvasText;
  }

  .camera-guide__route-anchor,
  .camera-guide__compass--north {
    color: Highlight;
  }
}

/* ==========================================================================\n   Discovera Spatial UI — visionOS-inspired refinement (2026-08-01)\n   Pure CSS enhancement: existing JS hooks and IDs remain unchanged.\n   ========================================================================== */
:root {
  --spatial-glass: rgba(24, 29, 28, .48);
  --spatial-glass-strong: rgba(19, 23, 22, .68);
  --spatial-glass-light: rgba(255, 255, 255, .14);
  --spatial-stroke: rgba(255, 255, 255, .26);
  --spatial-highlight: rgba(255, 255, 255, .44);
  --spatial-shadow: 0 24px 70px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255,255,255,.2);
  --spatial-radius: 26px;
}

.camera-guide::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 42%, transparent 28%, rgba(2,4,4,.08) 68%, rgba(2,4,4,.33) 100%);
}

.spatial-ambient { position:absolute; z-index:-2; inset:0; overflow:hidden; pointer-events:none; }
.spatial-ambient__orb { position:absolute; width:42vw; aspect-ratio:1; border-radius:50%; filter:blur(80px); opacity:.12; }
.spatial-ambient__orb--one { top:-18%; right:-16%; background:#bdffb8; }
.spatial-ambient__orb--two { bottom:-22%; left:-14%; background:#72a7ff; }
.spatial-ambient__vignette { position:absolute; inset:0; box-shadow:inset 0 0 100px rgba(0,0,0,.22); }

.camera-guide__header {
  top: calc(10px + var(--safe-top)); right: 12px; left: 12px;
  padding: 7px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(255,255,255,.13), rgba(14,18,17,.42));
  box-shadow: 0 18px 60px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(30px) saturate(1.45);
  backdrop-filter: blur(30px) saturate(1.45);
}

.camera-guide__icon-button {
  width:46px; height:46px; border-radius:50%;
  border-color:rgba(255,255,255,.19);
  background:linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.055));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 8px 24px rgba(0,0,0,.16);
  transition:transform .22s cubic-bezier(.2,.8,.2,1), background .22s ease, box-shadow .22s ease;
}
.camera-guide__icon-button:hover { background:rgba(255,255,255,.19); transform:translateY(-1px) scale(1.02); }
.camera-guide__icon-button:active { transform:scale(.92); }

.camera-guide__destination small { color:rgba(255,255,255,.58); letter-spacing:.02em; }
.camera-guide__destination strong { font-size:16px; letter-spacing:-.01em; }

.camera-guide__status {
  padding:8px 13px;
  border-color:rgba(255,255,255,.2);
  background:linear-gradient(135deg, rgba(255,255,255,.12), rgba(12,16,15,.5));
  box-shadow:0 12px 34px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(24px) saturate(1.5); backdrop-filter:blur(24px) saturate(1.5);
}
.camera-guide__signal { animation:spatial-pulse 2.4s ease-out infinite; }
@keyframes spatial-pulse { 0%,45%{box-shadow:0 0 0 3px rgba(255,199,96,.15)} 75%,100%{box-shadow:0 0 0 10px rgba(255,199,96,0)} }

.spatial-reticle { position:absolute; z-index:8; top:50%; left:50%; width:54px; height:54px; border:1px solid rgba(255,255,255,.25); border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; opacity:.42; box-shadow:0 0 0 7px rgba(255,255,255,.025), inset 0 0 18px rgba(255,255,255,.08); }
.spatial-reticle::before,.spatial-reticle::after{content:"";position:absolute;background:rgba(255,255,255,.45)}
.spatial-reticle::before{width:10px;height:1px;left:50%;top:50%;transform:translate(-50%,-50%)}
.spatial-reticle::after{width:1px;height:10px;left:50%;top:50%;transform:translate(-50%,-50%)}
.spatial-reticle span{position:absolute;inset:8px;border:1px solid rgba(215,255,54,.35);border-radius:50%}

.camera-guide__modes {
  top:calc(84px + var(--safe-top)); padding:5px;
  border-color:rgba(255,255,255,.2);
  background:linear-gradient(135deg, rgba(255,255,255,.14), rgba(13,17,16,.48));
  box-shadow:0 14px 40px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(28px) saturate(1.45); backdrop-filter:blur(28px) saturate(1.45);
}
.camera-guide__modes a { min-width:62px; padding:7px 13px 6px; transition:all .28s cubic-bezier(.2,.8,.2,1); }
.camera-guide__modes a[aria-current="page"] { color:#101310; background:rgba(244,255,216,.94); box-shadow:0 5px 16px rgba(0,0,0,.18), inset 0 1px 0 #fff; transform:scale(1.02); }

.camera-guide:has(.camera-guide__modes) > .camera-guide__status,.awareness-camera__status { top:calc(132px + var(--safe-top)); }
.camera-guide__scene { inset:160px 0 190px; }

.camera-guide__direction { filter:drop-shadow(0 18px 30px rgba(0,0,0,.5)); }
.camera-guide__arrow { animation:spatial-float 3.8s ease-in-out infinite; }
@keyframes spatial-float { 0%,100%{translate:0 0} 50%{translate:0 -7px} }
.camera-guide__arrow path { fill:url(#unused); fill:var(--lime); stroke:rgba(8,12,11,.82); stroke-width:4; filter:drop-shadow(0 0 12px rgba(215,255,54,.35)); }
.camera-guide__direction strong { padding:9px 16px 7px; border:1px solid rgba(255,255,255,.22); border-radius:999px; background:rgba(17,20,19,.58); box-shadow:inset 0 1px rgba(255,255,255,.16); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }

.camera-guide__poi-label {
  padding:9px 12px; border-color:rgba(255,255,255,.38); border-radius:18px;
  background:linear-gradient(145deg, rgba(255,255,255,.82), rgba(235,241,238,.66));
  box-shadow:0 16px 44px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(24px) saturate(1.4); backdrop-filter:blur(24px) saturate(1.4);
}
.camera-guide__poi-label::after { content:""; position:absolute; left:50%; bottom:-7px; width:12px; height:12px; background:rgba(242,247,244,.78); transform:translateX(-50%) rotate(45deg); border-right:1px solid rgba(255,255,255,.35); border-bottom:1px solid rgba(255,255,255,.35); }

.camera-guide__route-card {
  right:calc(12px + var(--safe-right)); bottom:calc(14px + var(--safe-bottom)); left:calc(12px + var(--safe-left));
  grid-template-columns:clamp(70px,20vw,92px) minmax(0,1fr); min-height:126px; padding:13px;
  border-color:rgba(255,255,255,.24); border-radius:30px;
  background:linear-gradient(145deg, rgba(255,255,255,.17), rgba(12,16,15,.58));
  box-shadow:var(--spatial-shadow);
  -webkit-backdrop-filter:blur(34px) saturate(1.55); backdrop-filter:blur(34px) saturate(1.55);
  animation:spatial-card-in .45s cubic-bezier(.18,.9,.25,1) both;
}
@keyframes spatial-card-in { from{opacity:0;transform:translateY(18px) scale(.97)} to{opacity:1;transform:none} }
.camera-guide__radar { width:clamp(70px,20vw,92px); border-color:rgba(255,255,255,.25); background:radial-gradient(circle, rgba(215,255,54,.12), rgba(6,11,9,.55) 65%); box-shadow:inset 0 0 25px rgba(215,255,54,.06), 0 12px 30px rgba(0,0,0,.24); }
.camera-guide__route-copy strong { font-size:18px; }
.spatial-route-metrics { display:flex; gap:6px; flex-wrap:wrap; }
.spatial-route-metrics span { padding:3px 7px; border:1px solid rgba(255,255,255,.12); border-radius:999px; color:rgba(255,255,255,.68); background:rgba(255,255,255,.055); font-size:8px; }
.camera-guide__verify-button { min-height:34px; padding:6px 11px; border:1px solid rgba(255,255,255,.4); border-radius:999px; background:rgba(255,255,255,.88); box-shadow:0 6px 18px rgba(0,0,0,.18); }

.spatial-action-rail { position:absolute; z-index:27; top:50%; right:calc(12px + var(--safe-right)); display:grid; gap:8px; padding:7px; border:1px solid rgba(255,255,255,.2); border-radius:999px; background:linear-gradient(145deg, rgba(255,255,255,.14), rgba(12,16,15,.48)); box-shadow:0 20px 50px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.17); -webkit-backdrop-filter:blur(28px) saturate(1.5); backdrop-filter:blur(28px) saturate(1.5); transform:translateY(-50%); }
.spatial-action-rail button { display:grid; width:42px; height:42px; padding:0; place-items:center; color:rgba(255,255,255,.82); border:0; border-radius:50%; background:transparent; cursor:pointer; transition:.22s ease; }
.spatial-action-rail button:hover,.spatial-action-rail button:focus-visible { color:#111; background:rgba(242,255,214,.94); transform:scale(1.06); }
.spatial-action-rail button svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

.spatial-context-chip { position:absolute; z-index:21; top:calc(176px + var(--safe-top)); left:calc(14px + var(--safe-left)); display:flex; max-width:min(210px,58vw); padding:8px 12px 8px 9px; align-items:center; gap:9px; border:1px solid rgba(255,255,255,.18); border-radius:18px; background:linear-gradient(145deg, rgba(255,255,255,.13), rgba(11,15,14,.48)); box-shadow:0 14px 38px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.16); -webkit-backdrop-filter:blur(24px) saturate(1.45); backdrop-filter:blur(24px) saturate(1.45); pointer-events:none; }
.spatial-context-chip__icon,.spatial-context-chip__pulse { display:grid; width:30px; height:30px; flex:0 0 auto; place-items:center; border-radius:50%; color:#111; background:var(--lime); box-shadow:0 0 22px rgba(215,255,54,.26); font-size:16px; }
.spatial-context-chip__pulse::after { content:""; width:7px; height:7px; border-radius:50%; background:#111; animation:spatial-pulse-dot 1.7s ease-out infinite; }
@keyframes spatial-pulse-dot { 0%{box-shadow:0 0 0 0 rgba(17,17,17,.45)} 100%{box-shadow:0 0 0 10px rgba(17,17,17,0)} }
.spatial-context-chip span:last-child { display:grid; min-width:0; }
.spatial-context-chip small { color:rgba(255,255,255,.58); font-size:8px; }
.spatial-context-chip strong { overflow:hidden; color:#fff; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }

.camera-guide__permission { border:1px solid rgba(255,255,255,.5); border-radius:34px; background:linear-gradient(145deg, rgba(255,255,255,.94), rgba(235,240,236,.82)); box-shadow:0 35px 100px rgba(0,0,0,.48), inset 0 1px 0 #fff; -webkit-backdrop-filter:blur(34px) saturate(1.4); backdrop-filter:blur(34px) saturate(1.4); }
.camera-guide__permission-icon { border-radius:50%; box-shadow:0 10px 26px rgba(138,169,30,.22), inset 0 1px 0 rgba(255,255,255,.6); }
.camera-guide__primary-button { border-radius:999px; background:linear-gradient(180deg,#1c211f,#0b0e0d); box-shadow:0 12px 28px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.14); }

@media (max-width:600px) {
  .camera-guide__header { right:10px; left:10px; }
  .camera-guide__modes a { min-width:55px; }
  .spatial-action-rail { right:8px; }
  .spatial-action-rail button { width:38px; height:38px; }
  .spatial-context-chip { top:calc(174px + var(--safe-top)); left:10px; }
}

@media (max-height:700px) {
  .spatial-context-chip { display:none; }
  .camera-guide__scene { inset:148px 0 165px; }
  .camera-guide__route-card { min-height:110px; }
}

/* Discovera Spatial Frontend v2 — sensor HUD, depth, radial tools and timeline */
.camera-guide {
  --spatial-x: 0;
  --spatial-y: 0;
  --spatial-roll: 0deg;
  --spatial-pitch: 0deg;
}
.spatial-enhancer { position:absolute; inset:0; z-index:65; pointer-events:none; }
.spatial-sensor-hud {
  position:absolute; z-index:3; top:calc(148px + var(--safe-top)); left:50%;
  display:grid; grid-template-columns:repeat(4,minmax(48px,1fr)); width:min(390px,calc(100vw - 30px));
  padding:7px; gap:5px; border:1px solid rgba(255,255,255,.16); border-radius:20px;
  background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(9,13,12,.44));
  box-shadow:0 16px 40px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.16);
  backdrop-filter:blur(22px) saturate(1.25); -webkit-backdrop-filter:blur(22px) saturate(1.25);
  transform:translate3d(-50%,calc(var(--spatial-y) * -3px),0); transition:.34s cubic-bezier(.22,.8,.24,1); pointer-events:none;
}
.spatial-sensor-hud>span{display:grid;min-width:0;padding:4px 6px;text-align:center;border-radius:13px;background:rgba(255,255,255,.055)}
.spatial-sensor-hud small{color:rgba(255,255,255,.56);font-size:8px}.spatial-sensor-hud strong{margin-top:2px;color:#fff;font-size:11px;direction:ltr}
.camera-guide.is-user-moving .spatial-sensor-hud{width:150px;grid-template-columns:1fr 1fr;opacity:.72;transform:translate3d(-50%,-5px,0) scale(.94)}
.camera-guide.is-user-moving .spatial-sensor-hud>span:nth-child(n+3){display:none}
.spatial-horizon{position:absolute;z-index:1;top:50%;left:50%;width:min(420px,78vw);height:50px;opacity:0;transform:translate3d(-50%,-50%,0);transition:opacity .25s;pointer-events:none}
.spatial-horizon span{position:absolute;top:50%;right:0;left:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.72) 20%,rgba(215,255,54,.95) 50%,rgba(255,255,255,.72) 80%,transparent);box-shadow:0 0 14px rgba(215,255,54,.26)}
.spatial-horizon i{position:absolute;top:calc(50% - 8px);left:50%;width:18px;height:8px;border:1px solid rgba(215,255,54,.9);border-top:0;transform:translateX(-50%)}
.camera-guide.is-horizon-visible .spatial-horizon,.camera-guide.is-focus-mode .spatial-horizon{opacity:.88}
.spatial-orb{position:absolute;z-index:5;right:calc(18px + var(--safe-right));bottom:calc(164px + var(--safe-bottom));display:grid;width:52px;height:52px;padding:0;place-items:center;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.55),rgba(255,255,255,.12) 38%,rgba(8,14,12,.7) 72%);box-shadow:0 16px 34px rgba(0,0,0,.34),inset 0 1px 1px rgba(255,255,255,.34);backdrop-filter:blur(18px);pointer-events:auto;cursor:pointer;transition:.28s cubic-bezier(.2,.9,.25,1)}
.spatial-orb span{width:14px;height:14px;border:2px solid var(--lime);border-radius:50%;box-shadow:0 0 18px rgba(215,255,54,.65)}.spatial-orb i{position:absolute;width:28px;height:28px;border:1px solid rgba(255,255,255,.3);border-radius:50%;animation:spatial-orbit 5s linear infinite}
.spatial-orb:active{transform:scale(.92)}.spatial-orb[aria-expanded=true]{transform:scale(1.08);box-shadow:0 18px 44px rgba(0,0,0,.44),0 0 0 8px rgba(215,255,54,.08)}
@keyframes spatial-orbit{to{transform:rotate(360deg)}}
.spatial-radial-menu{position:absolute;z-index:4;right:calc(18px + var(--safe-right));bottom:calc(225px + var(--safe-bottom));width:190px;height:190px;pointer-events:none}
.spatial-radial-menu button{position:absolute;display:grid;width:64px;height:64px;padding:6px;place-items:center;color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:22px;background:rgba(10,14,13,.72);box-shadow:0 14px 32px rgba(0,0,0,.32);backdrop-filter:blur(20px);pointer-events:auto;cursor:pointer;animation:spatial-pop .3s cubic-bezier(.2,1.25,.3,1) both}
.spatial-radial-menu button:nth-child(1){right:0;bottom:0}.spatial-radial-menu button:nth-child(2){right:72px;bottom:8px}.spatial-radial-menu button:nth-child(3){right:8px;bottom:72px}.spatial-radial-menu button:nth-child(4){right:78px;bottom:82px}
.spatial-radial-menu b{font-size:20px;line-height:1}.spatial-radial-menu span{font-size:8px;font-weight:800}@keyframes spatial-pop{from{opacity:0;transform:translate(20px,20px) scale(.55)}}
.spatial-timeline{position:absolute;z-index:8;right:calc(12px + var(--safe-right));bottom:calc(12px + var(--safe-bottom));left:calc(12px + var(--safe-left));max-height:min(66vh,560px);padding:15px;overflow:auto;color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:28px;background:linear-gradient(145deg,rgba(24,30,28,.82),rgba(5,8,8,.74));box-shadow:0 30px 90px rgba(0,0,0,.54);backdrop-filter:blur(30px) saturate(1.3);pointer-events:auto;animation:spatial-sheet-in .34s cubic-bezier(.2,.9,.25,1)}
@keyframes spatial-sheet-in{from{opacity:0;transform:translateY(24px) scale(.97)}}
.spatial-timeline header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.spatial-timeline header div{display:grid}.spatial-timeline header small{color:var(--lime);font-size:9px}.spatial-timeline header strong{font-size:19px}.spatial-timeline header button{width:38px;height:38px;padding:0;color:#fff;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:rgba(255,255,255,.08);font-size:25px}
.spatial-timeline__items{display:grid;gap:7px}.spatial-timeline__items>button{display:grid;grid-template-columns:42px minmax(0,1fr) auto;min-height:58px;padding:8px;align-items:center;gap:9px;color:#fff;border:1px solid rgba(255,255,255,.11);border-radius:18px;background:rgba(255,255,255,.075);text-align:right}.spatial-timeline__icon{display:grid;width:42px;height:42px;place-items:center;border-radius:14px;background:rgba(215,255,54,.14);color:var(--lime);font-size:20px}.spatial-timeline__items button>span:nth-child(2){display:grid;min-width:0}.spatial-timeline__items strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.spatial-timeline__items small,.spatial-timeline time{color:rgba(255,255,255,.55);font-size:9px}.spatial-timeline__empty{padding:30px;text-align:center;color:rgba(255,255,255,.55)}
.spatial-touch-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none}.spatial-touch-pulse{position:absolute;width:14px;height:14px;border:1px solid var(--lime);border-radius:50%;transform:translate(-50%,-50%);animation:spatial-touch .8s ease-out forwards}@keyframes spatial-touch{to{width:90px;height:90px;opacity:0}}
.camera-guide__header,.camera-guide__modes,.camera-guide__status,.camera-guide__route-card,.awareness-camera__toolbar,.spatial-action-rail,.spatial-context-chip{transform:translate3d(calc(var(--spatial-x) * var(--depth-x,4px)),calc(var(--spatial-y) * var(--depth-y,4px)),0);transition:transform .18s linear,opacity .28s ease,filter .28s ease}
.camera-guide__header{--depth-x:3px;--depth-y:3px}.camera-guide__modes{--depth-x:6px;--depth-y:5px}.camera-guide__route-card,.awareness-camera__toolbar{--depth-x:8px;--depth-y:7px}.spatial-action-rail,.spatial-context-chip{--depth-x:11px;--depth-y:9px}
.camera-guide.is-fast-motion .camera-guide__poi-label,.camera-guide.is-fast-motion .camera-guide__route-anchor,.camera-guide.is-fast-motion .spatial-context-chip{filter:blur(1.5px);opacity:.62}
.camera-guide.is-focus-mode .camera-guide__header,.camera-guide.is-focus-mode .camera-guide__modes,.camera-guide.is-focus-mode .camera-guide__status,.camera-guide.is-focus-mode .spatial-action-rail,.camera-guide.is-focus-mode .spatial-context-chip,.camera-guide.is-focus-mode .spatial-sensor-hud{opacity:.18}
.camera-guide.is-focus-mode .spatial-reticle{opacity:1;transform:translate(-50%,-50%) scale(1.18)}
.camera-guide__radar{transform-style:preserve-3d;perspective:400px}.camera-guide__radar::before,.camera-guide__radar::after{content:"";position:absolute;z-index:2;inset:11%;border:1px solid rgba(215,255,54,.22);border-radius:50%;pointer-events:none}.camera-guide__radar::before{transform:rotateX(62deg)}.camera-guide__radar::after{transform:rotateY(62deg)}
.camera-guide__route-card.is-map-expanded{grid-template-columns:minmax(110px,40%) minmax(0,1fr);min-height:170px}.camera-guide__route-card.is-map-expanded .camera-guide__radar{width:100%;max-width:160px}.camera-guide__route-card.is-map-expanded .camera-guide__mini-map{border-radius:28px}
.camera-guide.is-red-night-mode{filter:sepia(.18) hue-rotate(305deg) saturate(1.7)}.camera-guide.is-red-night-mode .camera-guide__video{filter:brightness(.72) sepia(.3) hue-rotate(310deg) saturate(1.25)}
.camera-guide.is-sky-highlighted .awareness-camera__canvas{filter:drop-shadow(0 0 7px rgba(215,255,54,.52)) brightness(1.12)}
@media(max-width:600px){.spatial-sensor-hud{top:calc(144px + var(--safe-top));width:calc(100vw - 24px)}.spatial-orb{right:calc(12px + var(--safe-right));bottom:calc(154px + var(--safe-bottom));width:48px;height:48px}.spatial-radial-menu{right:calc(10px + var(--safe-right));bottom:calc(207px + var(--safe-bottom))}}
@media(orientation:landscape) and (max-height:560px){.spatial-sensor-hud{top:calc(12px + var(--safe-top));left:50%;width:min(310px,42vw)}.spatial-orb{right:auto;left:calc(18px + var(--safe-left));bottom:calc(18px + var(--safe-bottom))}.spatial-radial-menu{right:auto;left:calc(18px + var(--safe-left));bottom:72px;transform:scaleX(-1)}.spatial-radial-menu button>*{transform:scaleX(-1)}}
@media(prefers-reduced-motion:reduce){.spatial-orb i{animation:none}.spatial-touch-pulse{display:none}.camera-guide__header,.camera-guide__modes,.camera-guide__status,.camera-guide__route-card,.awareness-camera__toolbar,.spatial-action-rail,.spatial-context-chip{transform:none!important}}

/* Spatial UI v3 — low-risk front-end enhancements */
.camera-guide__poi-label{pointer-events:auto;cursor:pointer;user-select:none}
.camera-guide__poi-label:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
.spatial-heatmap{position:absolute;z-index:0;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.82}
.spatial-dynamic-compass{position:absolute;z-index:4;top:calc(194px + var(--safe-top));right:calc(16px + var(--safe-right));display:grid;width:76px;height:76px;place-items:center;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.16),rgba(7,11,10,.62));box-shadow:0 14px 34px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.2);backdrop-filter:blur(22px);pointer-events:none}
.spatial-dynamic-compass__dial{position:absolute;inset:7px;border:1px solid rgba(255,255,255,.18);border-radius:50%;transition:none;will-change:transform}
.spatial-dynamic-compass__dial span{position:absolute;color:rgba(255,255,255,.62);font:800 7px Arial}.spatial-dynamic-compass__dial span:nth-child(1){top:3px;left:50%;color:var(--lime);transform:translateX(-50%)}.spatial-dynamic-compass__dial span:nth-child(2){right:3px;top:50%;transform:translateY(-50%)}.spatial-dynamic-compass__dial span:nth-child(3){bottom:3px;left:50%;transform:translateX(-50%)}.spatial-dynamic-compass__dial span:nth-child(4){left:3px;top:50%;transform:translateY(-50%)}
.spatial-dynamic-compass__dial i{position:absolute;top:5px;left:50%;width:0;height:0;border-right:4px solid transparent;border-bottom:11px solid var(--lime);border-left:4px solid transparent;transform:translateX(-50%);filter:drop-shadow(0 0 5px rgba(215,255,54,.5))}
.spatial-dynamic-compass>strong{position:relative;z-index:2;padding:3px 6px;color:#fff;border-radius:999px;background:rgba(5,8,7,.72);font-size:9px;direction:ltr}
.spatial-object-card{position:fixed;z-index:90;display:grid;width:min(250px,calc(100vw - 24px));padding:15px 14px 13px;gap:5px;color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:25px 25px 8px 25px;background:linear-gradient(145deg,rgba(34,42,39,.82),rgba(7,10,9,.7));box-shadow:0 24px 68px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.2);backdrop-filter:blur(30px) saturate(1.35);pointer-events:auto;animation:spatial-object-in .28s cubic-bezier(.2,.9,.25,1)}
.spatial-object-card[hidden],.spatial-object-radial[hidden]{display:none!important}@keyframes spatial-object-in{from{opacity:0;transform:scale(.88) translateY(8px)}}
.spatial-object-card::before{content:"";position:absolute;left:clamp(12px,var(--anchor-x),calc(100% - 12px));top:clamp(12px,var(--anchor-y),calc(100% - 12px));width:9px;height:9px;border:2px solid var(--lime);border-radius:50%;box-shadow:0 0 0 7px rgba(215,255,54,.1),0 0 18px rgba(215,255,54,.5);transform:translate(-50%,-50%)}
.spatial-object-card__close{position:absolute;top:9px;left:9px;width:30px;height:30px;padding:0;color:#fff;border:1px solid rgba(255,255,255,.14);border-radius:50%;background:rgba(255,255,255,.08);font-size:20px}.spatial-object-card>small{padding-left:34px;color:var(--lime);font-size:8px}.spatial-object-card>strong{font-size:16px;line-height:1.45}.spatial-object-card>span{color:rgba(255,255,255,.62);font-size:10px}.spatial-object-card__actions{display:grid;grid-template-columns:repeat(3,1fr);margin-top:7px;gap:5px}.spatial-object-card__actions button{min-height:34px;padding:4px;color:#fff;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(255,255,255,.08);font-size:9px;font-weight:800}.spatial-object-card__actions button:first-child{color:#111;background:var(--lime);border-color:var(--lime)}.spatial-object-card.is-saved{box-shadow:0 24px 68px rgba(0,0,0,.45),0 0 0 4px rgba(215,255,54,.22)}
.spatial-object-radial{position:fixed;z-index:94;width:170px;height:150px;pointer-events:none}.spatial-object-radial button{position:absolute;display:grid;width:60px;height:60px;padding:5px;place-items:center;color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:21px;background:rgba(8,12,11,.82);box-shadow:0 15px 36px rgba(0,0,0,.38);backdrop-filter:blur(22px);pointer-events:auto;font-size:19px}.spatial-object-radial button span{font-size:7px}.spatial-object-radial button:nth-child(1){right:0;bottom:0}.spatial-object-radial button:nth-child(2){left:0;bottom:0}.spatial-object-radial button:nth-child(3){left:50%;top:0;transform:translateX(-50%)}
.camera-guide.is-fast-motion .camera-guide__poi-label,.camera-guide.is-fast-motion .camera-guide__route-anchor,.camera-guide.is-fast-motion .spatial-context-chip,.camera-guide.is-fast-motion .spatial-object-card{filter:blur(var(--motion-blur,1.5px));translate:var(--motion-x,0) var(--motion-y,0);opacity:.68}
.camera-guide__radar::before{content:"";position:absolute;inset:8px;border:1px solid rgba(115,199,255,.24);border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 8px,rgba(126,199,255,.08) 9px 10px),repeating-linear-gradient(90deg,transparent 0 13px,rgba(255,255,255,.045) 14px 15px);transform:rotateX(58deg) rotateZ(-18deg);box-shadow:inset -10px -8px 18px rgba(24,98,160,.16),inset 8px 6px 16px rgba(215,255,54,.08);pointer-events:none}
.camera-guide__radar{perspective:180px;transform-style:preserve-3d}.camera-guide__mini-map{transform:rotateX(8deg);transition:transform .4s ease}
.camera-guide__route-card.is-map-expanded{position:fixed!important;z-index:88!important;top:var(--pip-top,calc(22% + var(--safe-top)))!important;right:auto!important;bottom:auto!important;left:var(--pip-left,16px)!important;width:min(360px,calc(100vw - 32px))!important;min-height:190px!important;resize:both;overflow:auto;transform:none!important;border-radius:28px!important}.camera-guide__route-card.is-map-expanded .camera-guide__radar{width:128px}.camera-guide__route-card.is-map-expanded .camera-guide__mini-map{transform:rotateX(0)}
.spatial-pip-handle,.spatial-pip-close{display:none}.camera-guide__route-card.is-map-expanded .spatial-pip-handle{position:absolute;z-index:4;top:7px;right:50%;display:flex;width:48px;height:25px;padding:0;align-items:center;justify-content:center;gap:3px;color:#fff;border:0;border-radius:999px;background:rgba(255,255,255,.08);transform:translateX(50%);cursor:grab;touch-action:none}.spatial-pip-handle i{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.58)}.camera-guide__route-card.is-map-expanded .spatial-pip-close{position:absolute;z-index:5;top:7px;left:8px;display:grid;width:28px;height:28px;padding:0;place-items:center;color:#fff;border:1px solid rgba(255,255,255,.13);border-radius:50%;background:rgba(0,0,0,.22);font-size:19px}
@media(max-width:600px){.spatial-dynamic-compass{top:calc(188px + var(--safe-top));right:10px;width:66px;height:66px}.spatial-object-card{width:min(225px,calc(100vw - 20px))}}
@media(prefers-reduced-motion:reduce){.spatial-object-card{animation:none}.camera-guide.is-fast-motion .camera-guide__poi-label,.camera-guide.is-fast-motion .camera-guide__route-anchor,.camera-guide.is-fast-motion .spatial-context-chip,.camera-guide.is-fast-motion .spatial-object-card{filter:none;translate:none}}


/* Discovera Spatial UI v4 — typography and premium visual polish */
:root {
  --spatial-shadow-soft: 0 14px 42px rgba(0,0,0,.24), 0 3px 12px rgba(0,0,0,.18);
  --spatial-shadow-deep: 0 30px 90px rgba(0,0,0,.48), 0 10px 28px rgba(0,0,0,.28);
  --spatial-rim: inset 0 1px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(255,255,255,.06);
  --spatial-glow: 0 0 34px rgba(215,255,54,.14);
}

.camera-guide,
.camera-guide button,
.camera-guide a,
.camera-guide input,
.camera-guide output {
  font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
  font-variation-settings: "wght" 500;
}

.camera-guide__destination strong,
.camera-guide__route-copy strong,
.awareness-sheet h2,
.spatial-object-card > strong {
  letter-spacing: -.025em;
  text-shadow: 0 2px 14px rgba(0,0,0,.38);
}

.camera-guide__header,
.camera-guide__modes,
.camera-guide__status,
.camera-guide__route-card,
.awareness-camera__toolbar,
.spatial-action-rail,
.spatial-context-chip,
.spatial-sensor-hud,
.spatial-dynamic-compass,
.spatial-object-card,
.spatial-object-radial button {
  box-shadow: var(--spatial-shadow-soft), var(--spatial-rim);
}

.camera-guide__header,
.camera-guide__route-card,
.spatial-object-card,
.awareness-sheet,
.camera-guide__permission {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.camera-guide__header::after,
.camera-guide__route-card::after,
.spatial-object-card::after,
.awareness-sheet::after,
.camera-guide__permission::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -45%;
  right: -20%;
  width: 72%;
  height: 115%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.22), rgba(255,255,255,.05) 42%, transparent 72%);
  filter: blur(10px);
  pointer-events: none;
}

.camera-guide__icon-button,
.awareness-camera__toolbar button,
.spatial-action-rail button,
.spatial-object-card__actions button,
.camera-guide__verify-button,
.camera-guide__primary-button {
  transition: transform .22s cubic-bezier(.2,.9,.25,1), box-shadow .22s ease, background .22s ease, border-color .22s ease, filter .22s ease;
}

.camera-guide__icon-button {
  box-shadow: 0 12px 30px rgba(0,0,0,.24), 0 3px 10px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.27);
}
.camera-guide__icon-button:hover,
.camera-guide__icon-button:focus-visible {
  transform: translateY(-2px) scale(1.025);
  box-shadow: 0 18px 38px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.12), var(--spatial-glow);
}
.camera-guide__icon-button:active { transform: translateY(0) scale(.95); }

.camera-guide__modes {
  box-shadow: 0 18px 44px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.24), inset 0 -1px 0 rgba(0,0,0,.18);
}
.camera-guide__modes a {
  text-shadow: 0 1px 8px rgba(0,0,0,.36);
  transition: color .22s ease, background .22s ease, transform .22s cubic-bezier(.2,.9,.25,1), box-shadow .22s ease;
}
.camera-guide__modes a:hover { transform: translateY(-1px); color:#fff; }
.camera-guide__modes a[aria-current="page"] {
  box-shadow: 0 8px 22px rgba(215,255,54,.22), inset 0 1px 0 rgba(255,255,255,.65);
  text-shadow: none;
}

.camera-guide__status {
  box-shadow: 0 12px 32px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.18);
}
.camera-guide__signal { animation: spatial-signal-breathe 2.4s ease-in-out infinite; }
@keyframes spatial-signal-breathe {
  0%,100% { transform: scale(.88); filter: brightness(.95); }
  50% { transform: scale(1.12); filter: brightness(1.22); }
}

.camera-guide__route-card {
  box-shadow: var(--spatial-shadow-deep), 0 0 0 1px rgba(255,255,255,.04), var(--spatial-rim);
}
.camera-guide__route-card:hover { box-shadow: 0 34px 96px rgba(0,0,0,.52), 0 0 40px rgba(215,255,54,.08), var(--spatial-rim); }
.camera-guide__radar {
  box-shadow: 0 16px 40px rgba(0,0,0,.34), 0 0 28px rgba(115,199,255,.10), inset 0 0 34px rgba(215,255,54,.09), inset 0 1px 0 rgba(255,255,255,.22);
}
.camera-guide__radar::after { filter: drop-shadow(0 0 10px rgba(215,255,54,.18)); }
.camera-guide__mini-map { filter: drop-shadow(0 8px 18px rgba(0,0,0,.34)); }

.camera-guide__poi-label {
  border-color: rgba(255,255,255,.72);
  box-shadow: 0 16px 42px rgba(0,0,0,.34), 0 4px 12px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.88);
  backdrop-filter: blur(18px) saturate(1.25);
}
.camera-guide__poi-label:hover,
.camera-guide__poi-label:focus-visible {
  transform: translate3d(-50%,-50%,0) scale(1.055);
  box-shadow: 0 22px 54px rgba(0,0,0,.4), 0 0 30px rgba(215,255,54,.14), inset 0 1px 0 #fff;
}

.spatial-object-card {
  box-shadow: 0 30px 88px rgba(0,0,0,.52), 0 10px 26px rgba(0,0,0,.28), 0 0 42px rgba(215,255,54,.08), var(--spatial-rim);
}
.spatial-object-card::before { animation: spatial-anchor-pulse 2.2s ease-in-out infinite; }
@keyframes spatial-anchor-pulse {
  0%,100% { box-shadow: 0 0 0 6px rgba(215,255,54,.08), 0 0 15px rgba(215,255,54,.42); }
  50% { box-shadow: 0 0 0 10px rgba(215,255,54,.02), 0 0 28px rgba(215,255,54,.74); }
}
.spatial-object-card__actions button:hover,
.spatial-object-radial button:hover,
.awareness-camera__toolbar button:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 14px 30px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.24);
  filter: brightness(1.08);
}

.spatial-sensor-hud {
  box-shadow: 0 20px 54px rgba(0,0,0,.3), 0 0 34px rgba(120,180,255,.05), var(--spatial-rim);
}
.spatial-sensor-hud > span {
  border: 1px solid rgba(255,255,255,.055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.spatial-dynamic-compass {
  box-shadow: 0 22px 52px rgba(0,0,0,.34), 0 0 32px rgba(215,255,54,.09), var(--spatial-rim);
}
.spatial-dynamic-compass__dial { filter: drop-shadow(0 7px 13px rgba(0,0,0,.32)); }

.awareness-sheet,
.camera-guide__permission {
  box-shadow: 0 38px 110px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.9);
}
.awareness-sheet__facts > div,
.explore-result__section {
  box-shadow: 0 9px 24px rgba(22,30,27,.08), inset 0 1px 0 rgba(255,255,255,.9);
}
.camera-guide__primary-button:hover,
.camera-guide__verify-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(0,0,0,.3), 0 0 24px rgba(215,255,54,.1), inset 0 1px 0 rgba(255,255,255,.24);
}

.explore-selector__box {
  box-shadow: 0 0 0 9999px rgba(3,5,5,.19), 0 0 42px rgba(215,255,54,.18), inset 0 0 36px rgba(215,255,54,.07);
}
.explore-selector__box::before,
.explore-selector__box::after { filter: drop-shadow(0 0 9px rgba(255,255,255,.42)); }
.awareness-progress {
  box-shadow: 0 34px 100px rgba(0,0,0,.56), 0 0 42px rgba(215,255,54,.08), var(--spatial-rim);
}
.awareness-progress__scan { box-shadow: inset 0 0 28px rgba(215,255,54,.08), 0 15px 34px rgba(0,0,0,.22); }

@media (hover:none) {
  .camera-guide__icon-button:hover,
  .camera-guide__route-card:hover,
  .camera-guide__poi-label:hover,
  .spatial-object-card__actions button:hover,
  .spatial-object-radial button:hover,
  .awareness-camera__toolbar button:hover,
  .camera-guide__primary-button:hover,
  .camera-guide__verify-button:hover { transform:none; }
}

@media (prefers-reduced-motion: reduce) {
  .camera-guide__signal,
  .spatial-object-card::before { animation:none; }
}