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

.camera-guide__modes {
  position: absolute;
  z-index: 24;
  top: calc(76px + var(--safe-top));
  left: 50%;
  display: flex;
  padding: 3px;
  gap: 2px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(7, 10, 10, .62);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
  backdrop-filter: blur(14px);
  transform: translateX(-50%);
  white-space: nowrap;
}

.camera-guide__modes a {
  min-width: 48px;
  padding: 5px 10px 4px;
  color: rgba(248, 250, 247, .72);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
}

.camera-guide__modes a[aria-current="page"] {
  color: #0a0d0c;
  background: var(--lime);
}

.camera-guide:has(.camera-guide__modes) > .camera-guide__status,
.awareness-camera__status {
  top: calc(114px + var(--safe-top));
}

.awareness-camera__header { z-index: 25; }

.awareness-camera__shade {
  background:
    linear-gradient(180deg, rgba(4, 6, 9, .72), transparent 31%),
    linear-gradient(0deg, rgba(4, 6, 9, .82), transparent 43%);
}

.awareness-camera__sky-fallback {
  background:
    radial-gradient(circle at 22% 22%, rgba(120, 156, 255, .25), transparent 24%),
    radial-gradient(circle at 73% 39%, rgba(215, 255, 54, .11), transparent 18%),
    linear-gradient(180deg, #081020, #05070c 62%, #0a0d0c);
}

.awareness-camera__canvas {
  position: absolute;
  z-index: 9;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: manipulation;
}

.awareness-camera__toolbar {
  position: absolute;
  z-index: 28;
  right: calc(16px + var(--safe-right));
  bottom: calc(20px + var(--safe-bottom));
  left: calc(16px + var(--safe-left));
  display: flex;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
}

.awareness-camera__toolbar button {
  min-height: 44px;
  padding: 9px 14px;
  color: #f7faf7;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(8, 12, 11, .76);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .26);
  backdrop-filter: blur(16px);
  cursor: pointer;
  pointer-events: auto;
  font-size: 12px;
  font-weight: 800;
}

.awareness-camera__toolbar button[aria-pressed="true"] {
  color: #0a0d0c;
  border-color: var(--lime);
  background: var(--lime);
}

.awareness-sheet {
  position: absolute;
  z-index: 72;
  right: calc(12px + var(--safe-right));
  bottom: calc(12px + var(--safe-bottom));
  left: calc(12px + var(--safe-left));
  max-height: min(76vh, 650px);
  padding: 20px 18px 16px;
  overflow: auto;
  color: #0b0e0d;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 28px 28px 10px 28px;
  background: rgba(248, 249, 244, .96);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .46);
  backdrop-filter: blur(22px);
}

.awareness-sheet[hidden] { display: none; }

.awareness-sheet__close {
  position: sticky;
  z-index: 2;
  top: 0;
  float: left;
  width: 38px;
  height: 38px;
  padding: 0;
  color: #111;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  font-size: 25px;
  line-height: 1;
}

.awareness-sheet__eyebrow {
  margin: 0 0 6px;
  color: #66706c;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .02em;
}

.awareness-sheet h2 {
  margin: 0 0 10px;
  padding-left: 46px;
  font-size: clamp(22px, 7vw, 31px);
  line-height: 1.25;
}

.awareness-sheet > p:not(.awareness-sheet__eyebrow) {
  margin: 0 0 14px;
  color: #424b47;
  font-size: 14px;
  line-height: 1.9;
}

.awareness-sheet__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 14px;
  gap: 8px;
}

.awareness-sheet__facts > div {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid rgba(12, 18, 16, .08);
  border-radius: 15px;
  background: #fff;
}

.awareness-sheet__facts dt {
  margin-bottom: 4px;
  color: #717976;
  font-size: 10px;
}

.awareness-sheet__facts dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 900;
}

.awareness-sheet__action {
  width: 100%;
  margin-top: 4px;
}

.sky-find {
  position: absolute;
  z-index: 26;
  top: 50%;
  left: 50%;
  display: grid;
  width: min(250px, 64vw);
  padding: 12px;
  justify-items: center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 22px;
  background: rgba(7, 10, 11, .72);
  box-shadow: 0 16px 46px rgba(0, 0, 0, .36);
  backdrop-filter: blur(16px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.sky-find[hidden] { display: none; }

.sky-find__arrow {
  color: var(--lime);
  filter: drop-shadow(0 4px 10px #000);
  font-size: 52px;
  font-weight: 900;
  line-height: 1;
  transform-origin: 50% 50%;
}

.sky-find strong { margin-top: 5px; font-size: 15px; }
.sky-find span { margin-top: 4px; color: rgba(255,255,255,.72); font-size: 11px; }

.sky-find button {
  margin-top: 10px;
  padding: 6px 11px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  font-size: 10px;
}

.sky-calibration__value {
  display: flex;
  margin: 17px 0 8px;
  align-items: center;
  justify-content: space-between;
  color: #303734;
  font-size: 12px;
  font-weight: 800;
}

.sky-calibration__value output {
  min-width: 55px;
  color: #0a0d0c;
  font-size: 18px;
  text-align: left;
}

#skyCalibrationRange {
  width: 100%;
  accent-color: #111;
}

.explore-selector {
  position: absolute;
  z-index: 14;
  inset: calc(142px + var(--safe-top)) 0 calc(102px + var(--safe-bottom));
  overflow: hidden;
  touch-action: none;
}

.explore-selector__box {
  --box-size: min(48vw, 260px);
  position: absolute;
  top: 48%;
  left: 50%;
  width: var(--box-size);
  height: var(--box-size);
  border: 2px solid var(--lime);
  border-radius: 28px 28px 8px 28px;
  box-shadow: 0 0 0 9999px rgba(3, 5, 5, .17), inset 0 0 30px rgba(215,255,54,.05);
  transform: translate(-50%, -50%);
  transition: width .2s ease, height .2s ease;
}

.explore-selector__box::before,
.explore-selector__box::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  border-color: #fff;
}

.explore-selector__box::before {
  top: -3px;
  right: -3px;
  border-top: 4px solid;
  border-right: 4px solid;
  border-radius: 0 12px 0 0;
}

.explore-selector__box::after {
  bottom: -3px;
  left: -3px;
  border-bottom: 4px solid;
  border-left: 4px solid;
  border-radius: 0 0 0 12px;
}

.explore-selector__box span {
  position: absolute;
  top: -32px;
  right: 0;
  padding: 5px 9px;
  color: #0a0d0c;
  border-radius: 999px 999px 4px 999px;
  background: var(--lime);
  font-size: 10px;
  font-weight: 900;
}

.explore-selector p {
  position: absolute;
  right: 22px;
  bottom: 8px;
  left: 22px;
  margin: 0;
  color: rgba(255, 255, 255, .82);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.7;
  text-align: center;
  text-shadow: 0 2px 10px #000;
  pointer-events: none;
}

.explore-toolbar__scan {
  display: flex;
  min-width: 172px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #0a0d0c !important;
  border-color: var(--lime) !important;
  background: var(--lime) !important;
}

.explore-toolbar__scan svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.awareness-progress {
  position: absolute;
  z-index: 78;
  top: 50%;
  left: 50%;
  display: grid;
  width: min(310px, calc(100vw - 40px));
  padding: 24px 20px;
  justify-items: center;
  color: #fff;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 30px 30px 10px 30px;
  background: rgba(7,10,10,.9);
  box-shadow: 0 26px 80px rgba(0,0,0,.5);
  backdrop-filter: blur(20px);
  transform: translate(-50%, -50%);
}

.awareness-progress[hidden] { display: none; }

.awareness-progress__scan {
  position: relative;
  width: 130px;
  height: 88px;
  margin-bottom: 18px;
  overflow: hidden;
  border: 1px solid rgba(215,255,54,.4);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(215,255,54,.12), rgba(255,255,255,.03));
}

.awareness-progress__scan::before {
  content: "";
  position: absolute;
  right: 10px;
  left: 10px;
  height: 2px;
  background: var(--lime);
  box-shadow: 0 0 20px 5px rgba(215,255,54,.38);
  animation: awareness-scan 1.45s ease-in-out infinite alternate;
}

@keyframes awareness-scan {
  from { top: 10px; }
  to { top: 76px; }
}

.awareness-progress strong { font-size: 16px; }
.awareness-progress span { margin-top: 7px; color: rgba(255,255,255,.66); font-size: 11px; }

.awareness-sheet--result { max-height: min(82vh, 720px); }

.explore-result__confidence {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 12px 0;
  align-items: center;
  gap: 10px;
}

.explore-result__confidence span {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--lime) var(--confidence, 0%), #e6e8e3 var(--confidence, 0%));
}

.explore-result__confidence strong { font-size: 12px; }

.explore-result__sections { display: grid; gap: 8px; }

.explore-result__section {
  padding: 12px 13px;
  border: 1px solid rgba(10,14,13,.08);
  border-radius: 17px;
  background: #fff;
}

.explore-result__section h3 { margin: 0 0 5px; font-size: 13px; }
.explore-result__section p { margin: 0; color: #4f5754; font-size: 12px; line-height: 1.8; }
.explore-result__section ul { margin: 7px 0 0; padding: 0 18px 0 0; color: #343b38; font-size: 11px; line-height: 1.9; }

.explore-result__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 12px;
  gap: 8px;
}

.explore-result__assistant-link {
  display: grid;
  min-height: 48px;
  padding: 10px;
  place-items: center;
  color: #0b0e0d;
  border: 1px solid rgba(10,14,13,.14);
  border-radius: 999px 999px 10px 999px;
  background: #fff;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

@media (min-width: 760px) {
  .awareness-sheet {
    right: max(calc((100vw - 560px) / 2), 20px);
    left: max(calc((100vw - 560px) / 2), 20px);
  }
  .explore-selector__box { --box-size: 250px; }
}

@media (prefers-reduced-motion: reduce) {
  .awareness-progress__scan::before { animation-duration: 3s; }
  .explore-selector__box { transition: none; }
}

/* Discovera Spatial UI extensions for Explore and Sky. */
.awareness-camera__toolbar { bottom:calc(18px + var(--safe-bottom)); }
.awareness-camera__toolbar button {
  min-height:48px; padding:10px 17px;
  border-color:rgba(255,255,255,.22);
  background:linear-gradient(145deg, rgba(255,255,255,.14), rgba(10,14,13,.58));
  box-shadow:0 18px 45px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.17);
  -webkit-backdrop-filter:blur(30px) saturate(1.5); backdrop-filter:blur(30px) saturate(1.5);
  transition:transform .22s cubic-bezier(.2,.8,.2,1), background .22s ease;
}
.awareness-camera__toolbar button:hover { transform:translateY(-2px); }
.awareness-camera__toolbar button[aria-pressed="true"] { background:rgba(244,255,216,.94); box-shadow:0 10px 28px rgba(0,0,0,.24), 0 0 30px rgba(215,255,54,.14); }

.awareness-sheet {
  right:max(calc((100vw - 610px)/2),12px); left:max(calc((100vw - 610px)/2),12px);
  border-color:rgba(255,255,255,.55); border-radius:34px;
  background:linear-gradient(145deg, rgba(250,252,248,.93), rgba(226,233,228,.83));
  box-shadow:0 34px 100px rgba(0,0,0,.48), inset 0 1px 0 #fff;
  -webkit-backdrop-filter:blur(38px) saturate(1.35); backdrop-filter:blur(38px) saturate(1.35);
  animation:spatial-sheet-in .4s cubic-bezier(.18,.9,.25,1) both;
}
@keyframes spatial-sheet-in { from{opacity:0;transform:translateY(24px) scale(.97)} to{opacity:1;transform:none} }
.awareness-sheet__close { border-radius:50%; background:rgba(255,255,255,.78); box-shadow:0 8px 20px rgba(0,0,0,.12); }
.awareness-sheet__facts > div,.explore-result__section { border-color:rgba(15,20,18,.07); border-radius:20px; background:rgba(255,255,255,.62); box-shadow:inset 0 1px 0 rgba(255,255,255,.9); }

.explore-selector { inset:calc(162px + var(--safe-top)) 0 calc(112px + var(--safe-bottom)); }
.explore-selector__box {
  border:1.5px solid rgba(226,255,115,.95); border-radius:36px;
  box-shadow:0 0 0 9999px rgba(3,5,5,.12), 0 0 42px rgba(215,255,54,.14), inset 0 0 40px rgba(215,255,54,.05);
}
.explore-selector__box::before,.explore-selector__box::after { width:38px; height:38px; border-color:rgba(255,255,255,.9); filter:drop-shadow(0 2px 8px rgba(0,0,0,.35)); }
.explore-selector__box span { top:-39px; padding:7px 12px; border:1px solid rgba(255,255,255,.3); border-radius:999px; background:rgba(240,255,190,.9); box-shadow:0 10px 25px rgba(0,0,0,.2); -webkit-backdrop-filter:blur(15px); backdrop-filter:blur(15px); }
.explore-toolbar__scan { min-width:190px; color:#111!important; background:rgba(244,255,216,.95)!important; box-shadow:0 16px 40px rgba(0,0,0,.3), 0 0 32px rgba(215,255,54,.14)!important; }

.awareness-progress { border-color:rgba(255,255,255,.23); border-radius:36px; background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(6,10,9,.84)); -webkit-backdrop-filter:blur(34px) saturate(1.4); backdrop-filter:blur(34px) saturate(1.4); }
.awareness-progress__scan { border-radius:26px; }

.sky-find { padding:18px; border-color:rgba(255,255,255,.22); border-radius:30px; background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(6,9,13,.72)); box-shadow:0 25px 70px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.16); -webkit-backdrop-filter:blur(32px) saturate(1.45); backdrop-filter:blur(32px) saturate(1.45); }
.sky-find__arrow { text-shadow:0 0 25px rgba(215,255,54,.45); animation:sky-guide-float 2.6s ease-in-out infinite; }
@keyframes sky-guide-float { 0%,100%{translate:0 0}50%{translate:0 -8px} }
.spatial-action-rail--sky { top:56%; }
.spatial-context-chip--sky .spatial-context-chip__icon { background:linear-gradient(145deg,#dce9ff,#8fb3ff); }

@media (orientation:landscape) and (max-height:560px) {
  .spatial-action-rail { left:12px; right:auto; top:50%; }
  .spatial-context-chip { display:none; }
  .awareness-camera__toolbar { right:44%; left:12px; }
}

/* Camera production controls: kept intentionally compact for one-handed mobile use. */
.spatial-action-rail button[aria-pressed="true"] {
  color:#111;
  background:rgba(242,255,214,.96);
  box-shadow:0 8px 20px rgba(0,0,0,.25),0 0 24px rgba(215,255,54,.16);
}
.spatial-action-rail button > span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.explore-poi-layer,.explore-object-layer {
  position:absolute; z-index:24; inset:0; overflow:hidden; pointer-events:none;
}
.explore-poi-marker,.explore-object-box {
  position:absolute; pointer-events:auto; color:#fff; border:1px solid rgba(215,255,54,.8);
  background:rgba(5,9,8,.7); box-shadow:0 12px 30px rgba(0,0,0,.38),0 0 20px rgba(215,255,54,.1);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); cursor:pointer;
}
.explore-poi-marker {
  display:grid; min-width:132px; max-width:210px; padding:9px 11px; text-align:right;
  border-radius:15px 15px 4px 15px; transform:translateX(-50%);
}
.explore-poi-marker::after { content:""; position:absolute; top:100%; left:50%; width:1px; height:22px; background:linear-gradient(rgba(215,255,54,.8),transparent); }
.explore-poi-marker strong { overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.explore-poi-marker span { margin-top:2px; color:rgba(255,255,255,.7); font-size:9px; }
.explore-object-box {
  padding:0; border-width:1.5px; border-radius:12px; color:#111; background:transparent;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 0 22px rgba(215,255,54,.16);
  font:800 10px Vazirmatn,Tahoma,sans-serif; text-indent:-9999px;
}
.explore-object-box::before {
  content:attr(aria-label); position:absolute; right:0; bottom:100%; margin-bottom:4px; padding:4px 7px;
  border-radius:8px; color:#111; background:#eaff86; text-indent:0; white-space:nowrap;
}
.explore-selector { z-index:23; }
.awareness-camera[data-explore-mode="around"] .explore-selector__box { opacity:0; pointer-events:none; }
.awareness-camera[data-explore-mode="codes"] .explore-selector__box { --box-size:min(56vw,240px); }

.explore-live-tools {
  position:absolute; z-index:29; right:calc(12px + var(--safe-right)); left:calc(12px + var(--safe-left));
  bottom:calc(82px + var(--safe-bottom)); display:grid; gap:7px; pointer-events:none;
}
.explore-quality { justify-self:start; display:flex; align-items:center; gap:7px; padding:7px 10px; border:1px solid rgba(255,255,255,.18); border-radius:999px; color:#fff; background:rgba(6,10,9,.58); box-shadow:0 10px 24px rgba(0,0,0,.25); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); font-size:10px; }
.explore-quality__dot { width:7px; height:7px; border-radius:50%; background:#ffc95a; box-shadow:0 0 12px currentColor; }
.explore-quality[data-level="good"] .explore-quality__dot { background:#d7ff36; }
.explore-device-controls,.explore-nature-parts { display:flex; flex-wrap:wrap; gap:6px; pointer-events:auto; }
.explore-device-controls button,.explore-nature-parts button,.explore-device-controls label {
  min-height:34px; padding:7px 10px; color:#fff; border:1px solid rgba(255,255,255,.18); border-radius:999px; background:rgba(6,10,9,.58); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); font:800 9px Vazirmatn,Tahoma,sans-serif;
}
.explore-device-controls button[aria-pressed="true"],.explore-nature-parts button[aria-pressed="true"] { color:#111; background:#eaff86; }
.explore-device-controls label { display:flex; align-items:center; gap:7px; }
.explore-device-controls input { width:76px; accent-color:#d7ff36; }
.explore-nature-parts { padding:7px; border-radius:16px; color:#fff; background:rgba(6,10,9,.46); }
.explore-nature-parts > span { align-self:center; padding:0 4px; font-size:9px; }
.explore-toolbar { gap:7px; }
.explore-toolbar__retry { color:#fff!important; background:rgba(8,12,11,.76)!important; }
.explore-code-action { width:100%; margin-top:8px; }

.sky-light-card {
  position:absolute; z-index:24; top:calc(164px + var(--safe-top)); right:calc(12px + var(--safe-right));
  display:grid; max-width:min(72vw,290px); gap:2px; padding:11px 13px; color:#fff;
  border:1px solid rgba(255,255,255,.18); border-radius:19px 19px 5px 19px;
  background:linear-gradient(145deg,rgba(7,12,18,.68),rgba(24,35,48,.44));
  box-shadow:0 18px 42px rgba(0,0,0,.35); -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
}
.sky-light-card > span:first-child { color:#d7ff36; font-size:10px; font-weight:900; }
.sky-light-card strong { font-size:12px; }
.sky-light-card small,.sky-light-card > span:last-child { color:rgba(255,255,255,.7); font-size:9px; line-height:1.6; }
.sky-night-red .camera-guide__video,.sky-night-red .awareness-camera__sky-fallback { filter:grayscale(1) sepia(1) saturate(5) hue-rotate(315deg) brightness(.62); }
.sky-night-red .awareness-camera__canvas { filter:sepia(1) saturate(4) hue-rotate(315deg); }
.sky-night-red .sky-light-card { background:rgba(34,0,0,.72); }

@media (max-width:520px) {
  .camera-guide__permission {
    top:max(calc(108px + var(--safe-top)),12vh); bottom:auto; max-height:calc(100dvh - 132px - var(--safe-top) - var(--safe-bottom));
    overflow:auto; gap:9px!important; padding:15px!important; border-radius:25px!important;
  }
  .camera-guide__permission h1 { font-size:clamp(21px,6vw,28px)!important; line-height:1.28!important; }
  .camera-guide__permission p { font-size:11px!important; line-height:1.72!important; }
  .camera-guide:has(.camera-guide__permission:not([hidden])) .spatial-dynamic-compass,
  .camera-guide:has(.camera-guide__permission:not([hidden])) .spatial-sensor-hud,
  .camera-guide:has(.camera-guide__permission:not([hidden])) .spatial-context-chip { opacity:0!important; pointer-events:none!important; }
  .spatial-action-rail { top:52%; }
  .explore-poi-marker { min-width:112px; max-width:165px; padding:7px 9px; }
  .explore-live-tools { right:8px; left:8px; bottom:calc(78px + var(--safe-bottom)); }
  .sky-light-card { top:calc(150px + var(--safe-top)); max-width:76vw; }
  .sky-toolbar { overflow-x:auto; justify-content:flex-start; max-width:calc(100vw - 24px); }
  .sky-toolbar button { flex:0 0 auto; min-height:42px; padding:8px 12px; }
}

@media (orientation:landscape) and (max-height:560px) {
  .sky-light-card { top:calc(92px + var(--safe-top)); right:50%; max-width:42vw; }
  .explore-live-tools { right:48%; bottom:calc(12px + var(--safe-bottom)); }
}