@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap");

:root {
  color-scheme: dark;
  --ink: #f7fbef;
  --muted: #b9c4bb;
  --lime: #c8f24a;
  --lime-strong: #aee62e;
  --amber: #ff8a2b;
  --deep: #061513;
  --panel: rgba(6, 31, 23, .78);
  --line: rgba(211, 249, 99, .62);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--deep); }
body { color: var(--ink); overflow-x: hidden; }
.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;
}
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.skip-link { position: fixed; z-index: 99; left: 1rem; top: -4rem; padding: .75rem 1rem; color: #07120d; background: var(--lime); border-radius: .5rem; }
.skip-link:focus { top: 1rem; }
.app-shell {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  overflow: hidden;
  background: #0c2520;
}

.camera-feed,
.camera-fallback,
.camera-shade {
  position: fixed;
  inset: 0;
  width: min(100%, 760px);
  height: 100%;
  margin-inline: auto;
  object-fit: cover;
}
.camera-feed { z-index: -5; background: #0d2621; }
.photo-preview { object-position: center; }
.camera-fallback {
  z-index: -6;
  background:
    linear-gradient(180deg, rgba(0, 14, 13, .05), rgba(2, 15, 11, .62)),
    url("./scanner-bg.jpg") 70% center / cover no-repeat;
  filter: saturate(.78) brightness(.66);
  transform: scale(1.03);
}
.camera-shade {
  z-index: -4;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 15, 15, .56) 0%, transparent 23%, transparent 58%, rgba(0, 16, 10, .34) 74%, rgba(1, 10, 8, .92) 100%),
    radial-gradient(circle at 50% 54%, transparent 25%, rgba(0, 13, 9, .18) 78%);
}

.topbar {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  height: calc(76px + var(--safe-top));
  padding: calc(12px + var(--safe-top)) 17px 9px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(180deg, rgba(2, 18, 19, .82), rgba(2, 18, 19, .18));
  border-bottom: 1px solid rgba(215, 255, 178, .12);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  font: 800 clamp(1.55rem, 6.5vw, 2.25rem)/1 "Barlow Condensed", sans-serif;
  letter-spacing: .055em;
  text-shadow: 0 2px 12px #001;
  cursor: pointer;
}
.brand > span:last-child > span { color: var(--lime); }
.brand-mark {
  position: relative;
  width: 35px;
  height: 35px;
  border-radius: 50% 4% 50% 50%;
  transform: rotate(-44deg);
  background: var(--lime);
  box-shadow: 0 0 20px rgba(200, 242, 74, .35);
}
.brand-mark::before, .brand-mark::after, .brand-mark span {
  content: "";
  position: absolute;
  left: 7px;
  top: 16px;
  width: 24px;
  height: 2px;
  background: #214531;
  transform: rotate(44deg);
  transform-origin: left;
}
.brand-mark::after { width: 13px; transform: rotate(82deg); }
.brand-mark span { width: 11px; left: 13px; top: 13px; transform: rotate(8deg); }
.top-actions { display: flex; align-items: center; gap: 18px; }
.streak, .sync-state {
  border: 0;
  padding: 5px 0;
  background: none;
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-family: "Barlow Condensed", sans-serif;
  letter-spacing: .06em;
  cursor: pointer;
}
.streak > span { color: var(--amber); transform: rotate(180deg); font-size: 1.15rem; }
.streak strong { color: var(--amber); font-size: 1.4rem; }
.streak small, .sync-state { font-size: .98rem; font-weight: 600; }
.sync-state { align-items: center; }
.sync-state .cloud { font: 700 1.3rem Inter, sans-serif; }
.sync-state i { width: 8px; height: 8px; border-radius: 50%; background: #6dff57; box-shadow: 0 0 9px #6dff57; }
.sync-state.offline i { background: var(--amber); box-shadow: 0 0 9px var(--amber); }

.map-panel {
  position: relative;
  z-index: 2;
  height: clamp(265px, 31svh, 330px);
  border-bottom: 1px solid rgba(204, 239, 151, .45);
  overflow: hidden;
  background: rgba(4, 29, 27, .76);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .2);
}
#mapCanvas { width: 100%; height: 100%; opacity: .94; touch-action: none; cursor: grab; outline: none; }
#mapCanvas:active { cursor: grabbing; }
#mapCanvas:focus-visible { box-shadow: inset 0 0 0 3px rgba(200, 242, 74, .72); }
.map-vignette { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(3, 27, 30, .1), transparent 30%, rgba(0, 16, 12, .33)); }
.map-controls {
  position: absolute;
  z-index: 3;
  top: calc(142px + var(--safe-top));
  right: 18px;
  display: flex;
  gap: 6px;
}
.map-controls button {
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid rgba(215, 255, 109, .48);
  border-radius: 7px;
  background: rgba(3, 23, 20, .72);
  color: #e9f3e4;
  backdrop-filter: blur(5px);
  font: 700 .58rem "Barlow Condensed", sans-serif;
  letter-spacing: .07em;
  cursor: pointer;
}
.map-controls button[aria-pressed="true"] { border-color: var(--lime); color: var(--lime); }
.map-profile {
  position: absolute;
  top: calc(86px + var(--safe-top));
  left: 18px;
  display: flex;
  gap: 11px;
  align-items: center;
  text-shadow: 0 2px 10px #001;
}
.avatar {
  width: 55px;
  height: 55px;
  flex: 0 0 auto;
  border: 3px solid var(--lime);
  border-radius: 50%;
  background: linear-gradient(135deg, #a1d746, #173725 58%);
  box-shadow: 0 0 0 3px rgba(211, 255, 123, .25), 0 5px 15px #0019;
  color: white;
  font-weight: 800;
  cursor: pointer;
}
.map-profile p { margin: 0; font: 600 1rem/1.2 "Barlow Condensed", sans-serif; letter-spacing: .04em; }
.map-profile p:first-of-type { display: flex; gap: 9px; font-size: 1.08rem; }
.map-profile p span { color: #d8dfd6; }
.xp-line { display: flex; align-items: center; gap: 6px; margin-top: 4px !important; }
.xp-line > span { color: var(--lime); }
.xp-track { margin-top: 5px; width: 150px; height: 6px; border: 1px solid rgba(206, 243, 77, .5); background: rgba(2, 10, 4, .68); border-radius: 99px; overflow: hidden; }
.xp-track span { display: block; width: 0; height: 100%; background: var(--lime); box-shadow: 0 0 9px var(--lime); transition: width .5s ease; }
.place-label {
  position: absolute;
  left: 23px;
  bottom: 21px;
  display: grid;
  font: 600 1.2rem/1 "Barlow Condensed", sans-serif;
  letter-spacing: .2em;
  color: rgba(232, 237, 228, .84);
  text-shadow: 0 2px 7px #001;
}
.place-label span { margin-top: 5px; font-size: .8rem; letter-spacing: .12em; }
.map-legend {
  position: absolute;
  right: 18px;
  top: calc(92px + var(--safe-top));
  display: grid;
  gap: 5px;
  padding: 8px 10px;
  border: 1px solid rgba(214, 245, 177, .16);
  border-radius: 9px;
  background: rgba(2, 19, 17, .52);
  backdrop-filter: blur(5px);
  font: 600 .67rem/1 "Barlow Condensed", sans-serif;
  letter-spacing: .08em;
  color: #e7eee7;
}
.map-legend span { display: flex; align-items: center; gap: 6px; }
.map-legend i { width: 7px; height: 7px; border-radius: 50%; }
.map-legend .verified { background: var(--lime); }
.map-legend .unverified { background: #f6c96d; }
.map-legend .opportunity { border: 1px solid var(--amber); background: transparent; }
.priority-pill {
  position: absolute;
  right: 20px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--amber);
  border-radius: 7px;
  background: rgba(7, 24, 16, .83);
  box-shadow: 0 0 15px rgba(255, 138, 43, .17);
  color: var(--amber);
  font: 700 .85rem "Barlow Condensed", sans-serif;
  letter-spacing: .06em;
}
.priority-pill > span { width: 8px; height: 8px; border: 2px solid var(--amber); border-radius: 50%; animation: pulse 1.6s ease-out infinite; }

.scan-stage {
  position: relative;
  min-height: clamp(355px, 48svh, 580px);
  border-bottom: 1px solid rgba(218, 255, 131, .16);
}
.target-brackets { position: absolute; inset: 9% 8% 18%; pointer-events: none; }
.target-brackets i { position: absolute; width: 51px; height: 51px; filter: drop-shadow(0 0 5px rgba(202, 255, 85, .75)); }
.target-brackets i:nth-child(1) { left: 0; top: 0; border-left: 3px solid #d7ff6d; border-top: 3px solid #d7ff6d; border-radius: 17px 0 0; }
.target-brackets i:nth-child(2) { right: 0; top: 0; border-right: 3px solid #d7ff6d; border-top: 3px solid #d7ff6d; border-radius: 0 17px 0 0; }
.target-brackets i:nth-child(3) { left: 0; bottom: 0; border-left: 3px solid #d7ff6d; border-bottom: 3px solid #d7ff6d; border-radius: 0 0 0 17px; }
.target-brackets i:nth-child(4) { right: 0; bottom: 0; border-right: 3px solid #d7ff6d; border-bottom: 3px solid #d7ff6d; border-radius: 0 0 17px; }
.scan-line {
  position: absolute;
  z-index: 2;
  left: 12%;
  right: 12%;
  top: 18%;
  height: 1px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, var(--lime), transparent);
  box-shadow: 0 0 12px var(--lime);
}
.scanning .scan-line { opacity: 1; animation: scan 2s ease-in-out infinite; }
.measure-rail { position: absolute; left: 44%; top: 16%; bottom: 20%; width: 1px; border-left: 2px dotted rgba(255, 255, 255, .76); filter: drop-shadow(0 1px 2px #001); }
.measure-rail span {
  position: absolute;
  top: var(--p);
  left: 8px;
  white-space: nowrap;
  font: 500 .75rem "Barlow Condensed", sans-serif;
  letter-spacing: .06em;
}
.measure-rail span::before { content: ""; position: absolute; left: -13px; top: 50%; width: 9px; border-top: 2px solid white; }
.scan-dots {
  position: absolute;
  inset: 14% 16% 19% 18%;
  opacity: .7;
  background-image:
    radial-gradient(circle at 9% 28%, #68ff61 0 2px, transparent 3px),
    radial-gradient(circle at 71% 14%, #59ff73 0 2px, transparent 3px),
    radial-gradient(circle at 83% 52%, #68ff61 0 2px, transparent 3px),
    radial-gradient(circle at 22% 67%, #6bff6e 0 2px, transparent 3px),
    radial-gradient(circle at 58% 79%, #6bff6e 0 2px, transparent 3px);
  filter: drop-shadow(0 0 4px #57ff61);
}
.analysis-card {
  position: absolute;
  z-index: 3;
  top: 24%;
  right: 4%;
  width: min(36%, 230px);
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: linear-gradient(150deg, rgba(44, 90, 35, .48), rgba(7, 43, 28, .58));
  box-shadow: inset 0 0 16px rgba(173, 239, 46, .05), 0 6px 18px rgba(0, 0, 0, .2);
  backdrop-filter: blur(5px);
}
.analysis-kicker { display: flex; align-items: center; gap: 4px; font: 600 .58rem "Barlow Condensed", sans-serif; letter-spacing: .06em; }
.analysis-kicker > span { display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid #d8ff81; border-radius: 50%; }
.analysis-kicker i { margin-left: auto; color: #dce5d8; font-size: .46rem; font-style: normal; }
.analysis-card h2 { display: flex; justify-content: space-between; gap: 5px; margin: 6px 0; font: 700 clamp(.76rem, 2.8vw, 1.05rem)/1 "Barlow Condensed", sans-serif; letter-spacing: .04em; }
.analysis-card h2 span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.analysis-card h2 strong { color: var(--lime); }
.analysis-card dl { margin: 0; display: grid; gap: 4px; }
.analysis-card dl div { display: flex; align-items: center; justify-content: space-between; min-height: 25px; padding: 3px 6px; border: 1px solid rgba(218, 255, 173, .24); border-radius: 7px; }
.analysis-card dt, .analysis-card dd { font: 600 .66rem "Barlow Condensed", sans-serif; letter-spacing: .04em; }
.analysis-card dt { display: flex; align-items: center; gap: 4px; color: #e0e8de; }
.analysis-card dt span { color: #d8ff87; font-size: .82rem; }
.analysis-card dd { margin: 0; font-size: .72rem; }
.analysis-card dl div:last-child dd { color: var(--lime); }
.analysis-card > p { margin: 5px 2px 0; color: #c0ccc0; font: 500 .46rem Inter, sans-serif; }
.field-strip {
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 28px);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 13px;
  overflow: hidden;
  border: 1px solid rgba(214, 244, 146, .53);
  border-radius: 9px;
  background: rgba(10, 33, 21, .76);
  backdrop-filter: blur(8px);
  box-shadow: 0 5px 15px rgba(0,0,0,.25);
  font: 500 .72rem "Barlow Condensed", sans-serif;
  letter-spacing: .065em;
  white-space: nowrap;
}
.field-strip > span { color: var(--lime); font-size: 1rem; }
.field-strip i { color: #b8c5b9; font-style: normal; }

.capture-zone {
  position: relative;
  z-index: 4;
  min-height: calc(215px + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: linear-gradient(180deg, rgba(3, 18, 13, .28), rgba(2, 11, 9, .96) 68%);
}
.capture-status { padding: 12px 15px 2px; display: grid; place-items: center; text-align: center; font-family: "Barlow Condensed", sans-serif; letter-spacing: .055em; text-shadow: 0 2px 8px #001; }
.capture-status strong { color: var(--lime); font-size: 1.3rem; }
.capture-status span { color: #eef3eb; font-size: .85rem; }
.capture-status em { margin-top: 7px; padding: 4px 13px; border: 1px solid rgba(200, 242, 74, .5); border-radius: 8px; color: var(--lime); background: rgba(91, 124, 34, .24); font-size: .85rem; font-style: normal; font-weight: 700; }
.share-button { min-height: 34px; margin-top: 7px; padding: 4px 13px; border: 1px solid rgba(255, 255, 255, .42); border-radius: 8px; background: rgba(2, 18, 13, .58); color: white; font: 700 .72rem "Barlow Condensed", sans-serif; letter-spacing: .08em; cursor: pointer; }
.share-button[hidden] { display: none; }
.bottom-nav { height: 142px; display: grid; grid-template-columns: 1fr 1.25fr 1fr; align-items: end; padding: 4px 18px 10px; }
.nav-action { position: relative; min-width: 84px; min-height: 104px; padding: 0; border: 0; background: none; display: grid; justify-items: center; align-content: end; gap: 5px; cursor: pointer; }
.nav-action strong { font: 700 .9rem "Barlow Condensed", sans-serif; letter-spacing: .09em; }
.nav-action small { position: absolute; top: 5px; right: calc(50% - 38px); width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--amber); font-size: .65rem; font-weight: 800; }
.nav-icon { width: 67px; height: 67px; display: grid; place-items: center; border: 1px solid #e2f58e; border-radius: 50%; background: radial-gradient(circle, rgba(75, 106, 47, .4), rgba(8, 29, 22, .8)); color: #f9e795; box-shadow: 0 0 16px rgba(214, 250, 112, .12); font-size: 1.65rem; }
.capture-button {
  position: relative;
  width: 112px;
  height: 112px;
  justify-self: center;
  align-self: end;
  margin-bottom: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  filter: drop-shadow(0 0 15px rgba(187, 255, 48, .45));
  cursor: pointer;
}
.capture-button:active { transform: scale(.97); }
.capture-rings { position: absolute; inset: 0; border: 6px solid var(--lime); border-radius: 50%; background: rgba(19, 51, 28, .64); box-shadow: inset 0 0 0 7px white, inset 0 0 0 13px rgba(7, 40, 18, .95), 0 0 0 2px #fff, 0 0 0 7px rgba(189, 243, 56, .28); }
.aperture { position: absolute; inset: 33px; border-radius: 50%; overflow: hidden; }
.aperture i { position: absolute; inset: 0; background: linear-gradient(120deg, #dbff67, #6fa622); clip-path: polygon(50% 50%, 100% 8%, 100% 48%); transform: rotate(calc(var(--n) * 60deg)); transform-origin: center; }
.aperture i:nth-child(1) { --n: 0; } .aperture i:nth-child(2) { --n: 1; } .aperture i:nth-child(3) { --n: 2; } .aperture i:nth-child(4) { --n: 3; } .aperture i:nth-child(5) { --n: 4; } .aperture i:nth-child(6) { --n: 5; }
.capture-label { position: absolute; inset: auto 0 -19px; font: 800 .58rem "Barlow Condensed", sans-serif; letter-spacing: .12em; color: var(--lime); }
.scanning .capture-button { animation: captureGlow 1s ease-in-out infinite alternate; }

dialog {
  border: 0;
  color: var(--ink);
  background: transparent;
}
dialog::backdrop { background: rgba(0, 10, 9, .68); backdrop-filter: blur(4px); }
.sheet {
  width: min(100% - 24px, 620px);
  max-height: min(88svh, 760px);
  margin: auto auto 12px;
  padding: 0;
  border: 1px solid rgba(206, 244, 90, .46);
  border-radius: 23px;
  overflow: auto;
  background: linear-gradient(155deg, rgba(14, 52, 38, .98), rgba(3, 23, 19, .99));
  box-shadow: 0 30px 80px #001;
}
.sheet[open] { animation: sheetIn .28s ease-out; }
.sheet > form { position: relative; padding: 28px 24px 24px; }
.close-sheet { position: absolute; top: 13px; right: 14px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,255,255,.07); color: white; font-size: 1.6rem; cursor: pointer; }
.sheet-eyebrow { margin: 0; color: var(--lime); font: 700 .7rem "Barlow Condensed", sans-serif; letter-spacing: .16em; }
.sheet h2 { max-width: 450px; margin: 5px 0 10px; font: 800 clamp(1.8rem, 7vw, 2.6rem)/.96 "Barlow Condensed", sans-serif; letter-spacing: .02em; }
.sheet > form > p:not(.sheet-eyebrow) { color: #c4d0c5; line-height: 1.55; }
.permission-list { display: grid; gap: 10px; margin: 20px 0; }
.permission-list > div { display: flex; gap: 12px; align-items: center; padding: 12px; border: 1px solid rgba(220, 255, 161, .13); border-radius: 12px; background: rgba(255,255,255,.035); }
.permission-list > div > span { width: 33px; color: var(--lime); font-size: 1.3rem; text-align: center; }
.permission-list p { margin: 0; display: grid; gap: 3px; }
.permission-list small { color: #aebdaf; line-height: 1.35; }
.primary-button, .secondary-button, .text-button, .link-button { min-height: 48px; border-radius: 10px; font-weight: 800; letter-spacing: .04em; cursor: pointer; }
.primary-button { width: 100%; border: 1px solid var(--lime); background: var(--lime); color: #102514; }
.secondary-button { width: 100%; border: 1px solid var(--lime); color: var(--lime); background: transparent; }
.photo-button { margin-top: 10px; }
.field-mode-button { margin-top: 5px; color: var(--lime); }
.text-button { width: 100%; border: 0; background: transparent; color: #d7e0d7; }
.link-button { display: grid; place-items: center; text-decoration: none; }
.sheet label { display: grid; gap: 7px; margin-top: 16px; color: #e8eee7; font-size: .82rem; font-weight: 700; }
.sheet input, .sheet select, .sheet textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 12px;
  border: 1px solid rgba(210, 244, 161, .3);
  border-radius: 9px;
  outline: none;
  background: rgba(0, 13, 10, .42);
  color: white;
}
.sheet input:focus, .sheet select:focus, .sheet textarea:focus { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(200, 242, 74, .13); }
.check-row { grid-template-columns: auto 1fr !important; align-items: start; font-weight: 500 !important; line-height: 1.4; }
.check-row input { width: 21px; min-height: 21px; accent-color: var(--lime); }
.confirm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.confirm-grid label:last-child { grid-column: 1 / -1; }
.match-notice, .notice-card { margin: 17px 0; padding: 12px; border-left: 3px solid var(--lime); background: rgba(203, 244, 82, .08); color: #dbe5d9; font-size: .8rem; line-height: 1.45; }
.leaf-proof { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; margin: 12px 0; padding: 12px; border: 1px solid rgba(255, 177, 94, .48); border-radius: 10px; background: rgba(255, 151, 65, .08); }
.leaf-proof div { display: grid; gap: 3px; }
.leaf-proof strong { color: var(--amber); font: 800 .78rem "Barlow Condensed", sans-serif; letter-spacing: .06em; }
.leaf-proof span { color: #dbe5d9; font-size: .72rem; line-height: 1.35; }
.leaf-proof button { min-height: 42px; padding: 8px 12px; white-space: nowrap; }
.notice-card p { margin-bottom: 0; }
.inline-status {
  min-height: 40px;
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid rgba(203, 244, 82, .28);
  border-radius: 9px;
  background: rgba(0, 13, 10, .34);
  color: #e4eee0 !important;
  font: 700 .73rem/1.35 "Barlow Condensed", sans-serif;
  letter-spacing: .045em;
}
.inline-status[data-tone="warning"] { border-color: var(--amber); color: #ffd2a8 !important; }
.inline-status[data-tone="success"] { border-color: var(--lime); color: var(--lime) !important; }
.confirm-actions { display: grid; grid-template-columns: .7fr 1.3fr; gap: 10px; }
.completion-sheet { text-align: center; }
.completion-sheet > form { display: grid; justify-items: stretch; }
.completion-sheet .sheet-eyebrow { text-align: center; }
.completion-sheet h2 { max-width: none; text-align: center; }
.completion-sheet > form > p:not(.sheet-eyebrow) { text-align: center; }
.completion-check {
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  border: 2px solid var(--lime);
  border-radius: 50%;
  background: rgba(200, 242, 74, .12);
  color: var(--lime);
  box-shadow: 0 0 28px rgba(200, 242, 74, .32);
  font: 800 2rem Inter, sans-serif;
}
.completion-rewards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
.completion-rewards > * {
  min-height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(211, 249, 99, .35);
  border-radius: 10px;
  background: rgba(200, 242, 74, .07);
  color: var(--lime);
  font: 800 .9rem "Barlow Condensed", sans-serif;
  letter-spacing: .06em;
}
.completion-sheet .inline-status { text-align: center; }
.completion-sheet #completionLocationButton { margin: 0 0 9px; }
.next-tree-button { margin-top: 4px; }
.completion-sheet .secondary-button { margin-top: 9px; }
.completion-sheet .discard-button { min-height: 40px; margin-top: 6px; color: #ffd2a8; font-size: .72rem; }
.quest-list { display: grid; gap: 10px; margin-top: 20px; }
.quest-card { padding: 14px; border: 1px solid rgba(220, 255, 151, .18); border-radius: 13px; background: rgba(255,255,255,.035); }
.quest-card header { display: flex; justify-content: space-between; gap: 14px; }
.quest-card h3 { margin: 0; font: 700 1.08rem "Barlow Condensed", sans-serif; letter-spacing: .03em; }
.quest-card em { color: var(--lime); font: 700 .8rem "Barlow Condensed", sans-serif; font-style: normal; }
.quest-card p { margin: 6px 0 10px; color: #adbbaf; font-size: .75rem; }
.quest-progress { height: 7px; overflow: hidden; border-radius: 99px; background: rgba(0,0,0,.36); }
.quest-progress span { display: block; height: 100%; border-radius: inherit; background: var(--lime); }
.tabs { display: flex; gap: 7px; margin: 14px 0; }
.tabs button { min-height: 38px; padding: 0 13px; border: 1px solid rgba(210, 245, 158, .2); border-radius: 9px; background: rgba(255,255,255,.03); font: 700 .75rem "Barlow Condensed", sans-serif; cursor: pointer; }
.tabs button.active { border-color: var(--lime); color: var(--lime); background: rgba(200, 242, 74, .08); }
.leader-list { margin: 0; padding: 0; list-style: none; counter-reset: leaders; }
.leader-list li { counter-increment: leaders; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; min-height: 50px; border-bottom: 1px solid rgba(255,255,255,.07); }
.leader-list li::before { content: counter(leaders, decimal-leading-zero); color: #87978a; font: 700 .8rem "Barlow Condensed", sans-serif; }
.leader-list strong { font-size: .84rem; }
.leader-list span { color: var(--lime); font: 700 .9rem "Barlow Condensed", sans-serif; }

.toast {
  position: fixed;
  z-index: 100;
  left: 50%;
  bottom: calc(20px + var(--safe-bottom));
  transform: translate(-50%, 140%);
  width: min(90%, 480px);
  padding: 12px 14px;
  border: 1px solid rgba(205, 244, 85, .5);
  border-radius: 10px;
  background: rgba(4, 29, 20, .95);
  box-shadow: 0 12px 38px #001;
  text-align: center;
  color: #eaf1e7;
  font-size: .8rem;
  transition: transform .28s ease;
}
.toast.show { transform: translate(-50%, 0); }
.reward-burst { position: fixed; z-index: 98; inset: 50% auto auto 50%; transform: translate(-50%, -50%) scale(.6); opacity: 0; pointer-events: none; }
.reward-burst span { display: block; padding: 13px 25px; border: 2px solid var(--lime); border-radius: 99px; background: #173c1ce8; color: var(--lime); box-shadow: 0 0 45px var(--lime); font: 800 2rem "Barlow Condensed", sans-serif; }
.reward-burst.show { animation: reward .9s ease both; }

@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 138, 43, .7); } 100% { box-shadow: 0 0 0 14px transparent; } }
@keyframes scan { 0%,100% { top: 18%; } 50% { top: 72%; } }
@keyframes captureGlow { from { filter: drop-shadow(0 0 10px rgba(187, 255, 48, .45)); } to { filter: drop-shadow(0 0 27px rgba(187, 255, 48, .9)); } }
@keyframes sheetIn { from { opacity: 0; transform: translateY(30px); } }
@keyframes reward { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 35% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 100% { opacity: 0; transform: translate(-50%, -70%) scale(1); } }

@media (min-width: 761px) {
  body { background: radial-gradient(circle at top, #1a473b, #020a08 60%); }
  .app-shell { box-shadow: 0 0 0 1px rgba(211,255,163,.18), 0 25px 100px #001; }
  .camera-feed, .camera-fallback, .camera-shade { left: 50%; right: auto; transform: translateX(-50%); }
  .camera-fallback { transform: translateX(-50%) scale(1.03); }
}

@media (max-width: 390px) {
  .top-actions { gap: 11px; }
  .brand { font-size: 1.42rem; }
  .brand-mark { width: 29px; height: 29px; }
  .map-profile { top: calc(79px + var(--safe-top)); }
  .map-legend { display: none; }
  .analysis-card { width: 40%; right: 3%; }
  .field-strip { gap: 5px; font-size: .63rem; }
  .bottom-nav { padding-inline: 8px; }
  .capture-button { width: 102px; height: 102px; }
  .capture-zone { min-height: calc(203px + var(--safe-bottom)); }
}

@media (max-height: 700px) and (orientation: portrait) {
  .map-panel { height: 235px; }
  .scan-stage { min-height: 300px; }
  .capture-zone { min-height: calc(190px + var(--safe-bottom)); }
  .bottom-nav { height: 128px; }
  .nav-icon { width: 56px; height: 56px; }
  .nav-action { min-height: 91px; }
}

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