@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');
:root {
  --porr-blue:#143E6F;
  --porr-blue-dark:#0e2d52;
  --porr-yellow:#FFED00;
  --porr-yellow-dim:#d4c600;
  --bg:#0a1929;
  --surface:rgba(20,62,111,0.35);
  --surface-solid:#122a4a;
  --text:#e8edf3;
  --text-dim:#8fa4bf;
  --border:rgba(255,237,0,0.12);
  --radius:14px;
}
/* Sun mode — high-contrast UI for daylight readability (toggled in ☰ menu) */
body.sun-mode {
  --surface:#15355f;        /* opaque (was 0.35 alpha) */
  --surface-solid:#0e2d52;
  --text:#ffffff;
  --text-dim:#cfddf0;       /* far brighter than #8fa4bf */
  --border:rgba(255,237,0,0.5);
}
body.sun-mode .hud-inner {
  background:#0c2647;
  backdrop-filter:none;
}
body.sun-mode .top-action,
body.sun-mode .lang-select {
  background:#15355f;
  border-color:rgba(255,237,0,0.5);
}
body.sun-mode .top-action.active {
  background:var(--porr-yellow);
  color:var(--porr-blue-dark);
  border-color:var(--porr-yellow);
}
body.sun-mode .metric-value { font-size:32px; }
body.sun-mode .metric-value.offset { font-size:26px; }

* { margin:0; padding:0; box-sizing:border-box; }
html, body {
  height:100%;
  overflow:hidden;
  font-family:'IBM Plex Sans', sans-serif;
  background:var(--bg);
  color:var(--text);
}
#viewDiv {
  width:100%;
  height:100%;
  position:absolute;
  inset:0;
}
.top-bar {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:10;
  padding:calc(env(safe-area-inset-top) + 8px) 12px 8px;
  background:linear-gradient(180deg, rgba(10,25,41,0.95) 0%, transparent 100%);
  display:flex;
  align-items:center;
  gap:10px;
  pointer-events:none;
}
.top-bar > * { pointer-events:auto; }
.top-left-actions {
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-start;
}
.menu-toggle {
  font-size:16px;
  line-height:1;
  padding:9px 12px;
}
.top-menu {
  display:none;
  flex-direction:column;
  gap:6px;
}
.top-menu.open {
  display:flex;
}
.top-action {
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(18,42,74,0.88);
  color:var(--text);
  font-family:'IBM Plex Sans', sans-serif;
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
}
.top-action.active {
  background:var(--porr-yellow);
  color:var(--porr-blue-dark);
  border-color:var(--porr-yellow);
}
.lang-select {
  padding:6px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(18,42,74,0.88);
  color:var(--text);
  font-family:'IBM Plex Sans', sans-serif;
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  outline:none;
  appearance:none;
  -webkit-appearance:none;
  text-align:center;
}
.alignment-name {
  flex:1;
  text-align:center;
  font-size:12px;
  font-weight:600;
  color:var(--text-dim);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.gps-indicator {
  width:10px;
  height:10px;
  border-radius:50%;
  background:#4ade80;
  animation:pulse 2s infinite;
}
.gps-indicator.inactive {
  background:#6b7280;
  animation:none;
}
.gps-indicator.error {
  background:#ef4444;
  animation:none;
}
@keyframes pulse {
  0%, 100% { box-shadow:0 0 0 0 rgba(74,222,128,0.4); }
  50% { box-shadow:0 0 0 6px rgba(74,222,128,0); }
}
.gps-accuracy {
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  font-weight:600;
  padding:2px 5px;
  border-radius:4px;
  white-space:nowrap;
  display:none;
}
.gps-accuracy.good {
  display:inline;
  background:rgba(74,222,128,0.15);
  color:#4ade80;
}
.gps-accuracy.warn {
  display:inline;
  background:rgba(255,237,0,0.15);
  color:var(--porr-yellow);
}
.gps-accuracy.bad {
  display:inline;
  background:rgba(239,68,68,0.15);
  color:#ef4444;
}
.hud {
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:10;
  pointer-events:none;
}
.hud-inner {
  pointer-events:auto;
  background:linear-gradient(170deg, rgba(14,45,82,0.95) 0%, rgba(10,25,41,0.97) 100%);
  backdrop-filter:blur(20px);
  border-top:1px solid var(--border);
  padding:8px 14px calc(12px + env(safe-area-inset-bottom));
  transition:padding 0.2s ease;
}
.hud-toggle {
  display:block;
  width:40px;
  height:4px;
  margin:0 auto 8px;
  background:rgba(255,237,0,0.25);
  border:none;
  border-radius:999px;
  cursor:pointer;
  padding:0;
  position:relative;
}
/* Filter-summary line (always visible); doubles as the "pull up for filters" affordance */
.hud-context {
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 4px 2px;
  cursor:pointer;
  color:var(--text-dim);
  font-size:11px;
  font-weight:600;
}
.hud-context #hudContextText {
  flex:1;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.hud-chevron {
  font-size:9px;
  color:rgba(255,237,0,0.5);
  transition:transform 0.2s ease;
}
.hud-inner.expanded .hud-chevron { transform:rotate(180deg); }
.hud-toggle::after {
  content:"";
  position:absolute;
  inset:-10px;
}
.hud-inner:not(.expanded) .selector-grid,
.hud-inner:not(.expanded) .status-msg,
.hud-inner:not(.expanded) .stakeout-row {
  display:none !important;
}
.station-display {
  display:flex;
  gap:10px;
  margin-bottom:10px;
}
.share-row {
  margin-bottom:8px;
  display:flex;
  gap:10px;
}
.share-row .btn {
  flex:1;
}
.mode-toggle {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
  margin-bottom:8px;
}
.scope-toggle {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
  margin-bottom:8px;
}
/* Scope-based show/hide (Axes vs Structures) */
.hud-inner.scope-structuri .mode-toggle { display:none; }
.hud-inner.scope-structuri .stakeout-row { display:none !important; }
.hud-inner.scope-axe #structureSelectorWrap { display:none; }
.hud-inner.scope-axe #structureTypeWrap { display:none; }
.hud-inner.scope-structuri #alignmentSelectorWrap { display:none; }
/* Structures show a single Distance card */
.hud-inner.scope-structuri .station-display .metric-card:nth-child(2) { display:none; }
.mode-btn {
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  color:var(--text);
  font-family:'IBM Plex Sans', sans-serif;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
}
.mode-btn.active {
  background:var(--porr-yellow);
  color:var(--porr-blue-dark);
  border-color:var(--porr-yellow);
}
.mode-btn:disabled {
  opacity:0.4;
  cursor:not-allowed;
}
.metric-card {
  flex:1;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:8px 12px;
  text-align:center;
  transition:border-color 0.3s, background 0.3s;
}
.metric-card.arrived {
  border-color:#4ade80;
  background:rgba(74,222,128,0.12);
}
.metric-label {
  font-size:10px;
  font-weight:600;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:4px;
}
.metric-value {
  font-family:'IBM Plex Mono', monospace;
  font-size:28px;
  font-weight:600;
  line-height:1.1;
  color:var(--porr-yellow);
}
.metric-value.offset {
  color:var(--text);
  font-size:22px;
}
.metric-unit {
  font-size:11px;
  color:var(--text-dim);
  margin-top:2px;
}
.offset-direction {
  display:inline-block;
  font-size:11px;
  font-weight:600;
  padding:2px 6px;
  border-radius:4px;
  margin-top:4px;
}
.offset-direction.left {
  background:rgba(59,130,246,0.25);
  color:#93bbfc;
}
.offset-direction.right {
  background:rgba(249,115,22,0.25);
  color:#fdba74;
}
.selector-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  margin-bottom:12px;
}
.selector {
  min-width:0;
}
.selector label {
  display:block;
  font-size:10px;
  font-weight:600;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:6px;
}
.selector select {
  width:100%;
  min-width:0;
  padding:11px 12px;
  background:var(--surface);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:10px;
  font-family:'IBM Plex Sans', sans-serif;
  font-size:13px;
  outline:none;
}
.selector select:focus {
  border-color:var(--porr-yellow);
}
.selector select:disabled {
  color:var(--text-dim);
  opacity:0.75;
}
.controls-row {
  display:flex;
  gap:8px;
}
.btn {
  flex:1;
  min-width:0;
  padding:9px 10px;
  font-family:'IBM Plex Sans', sans-serif;
  font-size:13px;
  font-weight:600;
  border:1px solid var(--border);
  border-radius:10px;
  cursor:pointer;
  transition:all 0.15s;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  white-space:nowrap;
}
.btn-primary {
  background:var(--porr-yellow);
  color:var(--porr-blue-dark);
  border-color:var(--porr-yellow);
}
.btn-primary:active {
  background:var(--porr-yellow-dim);
}
.btn-secondary {
  background:var(--surface);
  color:var(--text);
}
.btn-secondary:active {
  background:var(--surface-solid);
}
.stakeout-row {
  display:flex;
  gap:8px;
  margin-bottom:12px;
}
.stakeout-row.hidden {
  display:none;
}
.stakeout-input {
  flex:1;
  min-width:0;
  padding:12px;
  background:var(--surface);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:10px;
  font-family:'IBM Plex Mono', monospace;
  font-size:14px;
  outline:none;
}
.stakeout-input:focus {
  border-color:var(--porr-yellow);
}
.status-msg {
  text-align:center;
  padding:8px 4px 12px;
  font-size:12px;
  color:var(--text-dim);
}
.debug-log {
  position:fixed;
  top:40px;
  right:8px;
  z-index:50;
  background:rgba(0,0,0,0.85);
  border-radius:8px;
  padding:8px;
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  color:#4ade80;
  max-width:280px;
  max-height:220px;
  overflow-y:auto;
  display:none;
}
.debug-log.visible {
  display:block;
}
.share-overlay {
  position:fixed;
  inset:0;
  z-index:80;
  background:rgba(6, 16, 28, 0.9);
  backdrop-filter:blur(14px);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.18s ease;
}
.share-overlay.visible {
  opacity:1;
  pointer-events:auto;
}
.share-screen {
  height:100%;
  display:flex;
  flex-direction:column;
  padding:calc(env(safe-area-inset-top) + 12px) 16px calc(env(safe-area-inset-bottom) + 16px);
  background:
    radial-gradient(circle at top right, rgba(255,237,0,0.08), transparent 34%),
    linear-gradient(180deg, rgba(14,45,82,0.98) 0%, rgba(7,18,32,0.98) 100%);
}
.share-header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}
.share-eyebrow {
  font-size:10px;
  font-weight:700;
  letter-spacing:1.8px;
  text-transform:uppercase;
  color:var(--porr-yellow);
  margin-bottom:4px;
}
.share-title {
  font-size:22px;
  font-weight:700;
  line-height:1.1;
  color:var(--text);
}
.share-body {
  flex:1;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding-right:2px;
}
.share-card {
  background:rgba(18,42,74,0.78);
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px;
}
.share-card-top {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.share-card-label {
  font-size:10px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:6px;
}
.share-subtext,
.share-support-note {
  font-size:12px;
  line-height:1.4;
  color:var(--text-dim);
}
.share-support-note {
  margin-bottom:12px;
}
.share-summary {
  display:grid;
  gap:10px;
}
.share-summary-row {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.share-summary-key {
  font-size:11px;
  font-weight:600;
  color:var(--text-dim);
  text-transform:uppercase;
  letter-spacing:1.2px;
}
.share-summary-value {
  flex:1;
  text-align:right;
  font-size:13px;
  font-weight:600;
  color:var(--text);
  word-break:break-word;
}
.share-take-btn {
  flex:0 0 auto;
  width:auto;
  padding-inline:14px;
}
.photo-grid {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}
.photo-empty {
  grid-column:1 / -1;
  padding:18px 14px;
  border:1px dashed rgba(255,237,0,0.25);
  border-radius:14px;
  background:rgba(10,25,41,0.45);
  font-size:13px;
  line-height:1.5;
  color:var(--text-dim);
  text-align:center;
}
.photo-item {
  position:relative;
  min-width:0;
}
.photo-thumb {
  width:100%;
  aspect-ratio:1;
  padding:0;
  border-radius:14px;
  border:1px solid rgba(255,237,0,0.18);
  background:rgba(10,25,41,0.55);
  overflow:hidden;
  cursor:pointer;
  position:relative;
  display:block;
}
.photo-thumb.selected {
  border-color:var(--porr-yellow);
  box-shadow:0 0 0 2px rgba(255,237,0,0.18);
}
.photo-thumb::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 45%, rgba(10,25,41,0.55) 100%);
}
.photo-thumb img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.photo-select-badge {
  position:absolute;
  left:8px;
  bottom:8px;
  z-index:1;
  min-width:26px;
  height:26px;
  padding:0 8px;
  border-radius:999px;
  background:rgba(10,25,41,0.82);
  border:1px solid rgba(255,255,255,0.18);
  color:var(--text);
  font-size:11px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
}
.photo-thumb.selected .photo-select-badge {
  background:var(--porr-yellow);
  border-color:var(--porr-yellow);
  color:var(--porr-blue-dark);
}
.photo-item-remove {
  position:absolute;
  top:8px;
  right:8px;
  width:28px;
  height:28px;
  border-radius:999px;
  background:#ef4444;
  border:1px solid rgba(255,255,255,0.2);
  color:white;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  padding:0;
  line-height:26px;
  text-align:center;
  z-index:2;
}
.photo-observation-input {
  width:100%;
  margin-top:6px;
  padding:7px 10px;
  border-radius:10px;
  border:1px solid rgba(255,237,0,0.22);
  background:rgba(10,25,41,0.55);
  color:var(--text);
  font-size:12px;
  line-height:1.4;
  resize:none;
  box-sizing:border-box;
  font-family:inherit;
}
.photo-observation-input::placeholder {
  color:var(--text-dim);
}
.photo-observation-input:focus {
  outline:none;
  border-color:rgba(255,237,0,0.55);
}
.share-footer {
  padding-top:12px;
}
.share-footer .btn {
  width:100%;
}
.esri-attribution {
  display:none !important;
}
@media (max-width: 480px) {
  .selector-grid {
    grid-template-columns:1fr;
  }
  .share-screen {
    padding-inline:12px;
  }
  .share-card-top,
  .share-summary-row {
    flex-direction:column;
    align-items:stretch;
  }
  .share-summary-value {
    text-align:left;
  }
  .photo-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

/* --- Navigate-with chooser (bottom sheet) --- */
.nav-sheet {
  position:fixed;
  inset:0;
  z-index:85;
  background:rgba(6,16,28,0.6);
  backdrop-filter:blur(4px);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.18s ease;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.nav-sheet.visible {
  opacity:1;
  pointer-events:auto;
}
.nav-card {
  width:100%;
  max-width:460px;
  background:linear-gradient(170deg, rgba(14,45,82,0.98) 0%, rgba(10,25,41,0.99) 100%);
  border-top:1px solid var(--border);
  border-radius:18px 18px 0 0;
  padding:16px 16px calc(16px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  gap:10px;
}
.nav-card-title {
  text-align:center;
  font-size:11px;
  font-weight:600;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:4px;
}
.nav-opt { width:100%; }
.nav-cancel {
  width:100%;
  background:transparent;
  color:var(--text-dim);
  border-color:transparent;
}

/* --- AR Stakeout overlay --- */
.ar-overlay {
  position:fixed;
  inset:0;
  z-index:90;
  background:#000;
  display:none;
  overflow:hidden;
}
.ar-overlay.visible {
  display:block;
}
.ar-video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#000;
}
.ar-scene {
  position:absolute;
  inset:0;
  pointer-events:none;
}
.ar-labels {
  position:absolute;
  inset:0;
  pointer-events:none;
}
.ar-label {
  position:absolute;
  transform:translate(-50%, -50%);
  display:none;
  align-items:center;
  gap:5px;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(6,16,28,0.62);
  border:1px solid rgba(255,255,255,0.18);
  color:#fff;
  font-size:11px;
  font-weight:600;
  white-space:nowrap;
  text-shadow:0 1px 4px rgba(0,0,0,0.8);
}
.ar-label::before {
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:#38bdf8;
  flex:0 0 auto;
}
.ar-label.visible { display:flex; }
.ar-label .ar-label-dist { color:var(--text-dim); font-weight:500; }
.ar-label.sel {
  background:rgba(74,222,128,0.22);
  border-color:#4ade80;
}
.ar-label.sel::before { background:#4ade80; }
.ar-radar {
  position:absolute;
  right:14px;
  bottom:calc(env(safe-area-inset-bottom) + 86px);
  width:108px;
  height:108px;
  z-index:2;
  display:none;
}
.ar-overlay.ar-structures .ar-radar { display:block; }
.ar-radar-ring { fill:rgba(6,16,28,0.45); stroke:rgba(255,255,255,0.18); stroke-width:0.8; }
.ar-radar-axis { stroke:rgba(255,255,255,0.12); stroke-width:0.6; }
.ar-radar-north { stroke:rgba(255,80,80,0.9); stroke-width:1.4; }
.ar-radar-me { fill:#4ade80; }
.ar-radar-dot { fill:#38bdf8; }
.ar-radar-dot.sel { fill:#4ade80; }
.ar-marker {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  opacity:0;
  transition:opacity 0.12s ease;
}
.ar-marker.visible {
  opacity:1;
}
.ar-marker-ring {
  width:74px;
  height:74px;
  border-radius:50%;
  border:4px solid #4ade80;
  box-shadow:0 0 0 4px rgba(74,222,128,0.25), 0 0 24px rgba(74,222,128,0.55);
  position:relative;
  animation:ar-pulse 1.6s ease-in-out infinite;
}
.ar-marker-ring::after {
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#4ade80;
  transform:translate(-50%, -50%);
}
.ar-marker-dist {
  font-family:'IBM Plex Mono', monospace;
  font-weight:600;
  font-size:18px;
  color:#fff;
  background:rgba(6,16,28,0.7);
  padding:3px 10px;
  border-radius:999px;
  white-space:nowrap;
}
@keyframes ar-pulse {
  0%, 100% { transform:scale(1); }
  50% { transform:scale(1.12); }
}
.ar-chevron {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-size:64px;
  line-height:1;
  color:#4ade80;
  text-shadow:0 2px 12px rgba(0,0,0,0.8);
  opacity:0;
  transition:opacity 0.12s ease;
  animation:ar-nudge 1s ease-in-out infinite;
}
.ar-chevron.left { left:18px; }
.ar-chevron.right { right:18px; }
.ar-chevron.visible { opacity:1; }
@keyframes ar-nudge {
  0%, 100% { margin-left:0; margin-right:0; }
  50% { margin-left:-6px; margin-right:-6px; }
}
.ar-topbar {
  position:absolute;
  top:0;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:calc(env(safe-area-inset-top) + 10px) 14px 10px;
  background:linear-gradient(180deg, rgba(6,16,28,0.75), transparent);
}
.ar-target-label {
  font-family:'IBM Plex Mono', monospace;
  font-weight:600;
  font-size:15px;
  color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,0.8);
}
.ar-compass {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:12px;
  font-weight:600;
  color:#fff;
  background:rgba(6,16,28,0.62);
  padding:5px 11px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.16);
  white-space:nowrap;
}
.ar-compass-dot {
  width:9px;
  height:9px;
  border-radius:50%;
  background:#f5b301;
  box-shadow:0 0 8px rgba(245,179,1,0.85);
  animation:ar-blink 1s ease-in-out infinite;
}
.ar-compass.ready {
  border-color:rgba(74,222,128,0.55);
}
.ar-compass.ready .ar-compass-dot {
  background:#4ade80;
  box-shadow:0 0 9px rgba(74,222,128,0.95);
  animation:none;
}
.ar-compass.none .ar-compass-dot {
  background:#8fa4bf;
  box-shadow:none;
  animation:none;
}
@keyframes ar-blink {
  0%, 100% { opacity:1; }
  50% { opacity:0.3; }
}
.ar-hud {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:18px 16px calc(env(safe-area-inset-bottom) + 22px);
  background:linear-gradient(0deg, rgba(6,16,28,0.82), transparent);
  text-align:center;
}
.ar-dist-big {
  font-family:'IBM Plex Mono', monospace;
  font-weight:600;
  font-size:46px;
  line-height:1;
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,0.8);
}
.ar-dist-unit {
  font-size:20px;
  color:var(--text-dim);
  margin-left:4px;
}
.ar-hint {
  font-size:13px;
  color:var(--text-dim);
  max-width:280px;
}
.ar-overlay.ar-arrived .ar-dist-big,
.ar-overlay.ar-arrived .ar-marker-dist { color:#4ade80; }
.ar-overlay.ar-arrived .ar-marker-ring {
  border-color:#4ade80;
  box-shadow:0 0 0 6px rgba(74,222,128,0.4), 0 0 40px rgba(74,222,128,0.8);
}

/* --- Branded launch splash (PORR FieldVision) --- */
#appSplash {
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 50% 32%, rgba(255,237,0,0.10), transparent 46%),
    linear-gradient(165deg, #143E6F 0%, #0a1929 100%);
  transition:opacity 0.4s ease;
}
#appSplash.hidden {
  opacity:0;
  pointer-events:none;
}
.splash-inner {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  padding:24px;
  text-align:center;
}
.splash-logo {
  width:248px;
  max-width:74vw;
  height:auto;
  filter:drop-shadow(0 4px 18px rgba(0,0,0,0.45));
}
.splash-bar {
  margin-top:6px;
  width:140px;
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,0.18);
  overflow:hidden;
}
.splash-bar span {
  display:block;
  width:40%;
  height:100%;
  border-radius:999px;
  background:var(--porr-yellow);
  animation:splash-slide 1.1s ease-in-out infinite;
}
@keyframes splash-slide {
  0% { transform:translateX(-120%); }
  100% { transform:translateX(360%); }
}