@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500;600;700;800;900&display=swap');

:root {
  color-scheme: light;
  --ink: #233326;
  --muted: #6b786b;
  --leaf: #2c6840;
  --apple: #df4138;
  --cream: #fffdf5;
}
* { box-sizing: border-box; }
html, body {
  width: 100%; height: 100%; margin: 0; overflow: hidden;
  background: #17231b; font-family: Nunito, system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
body { min-height: 100svh; }
#app { position: fixed; inset: 0; overflow: hidden; background: #17231b; }
a-scene.ar-scene {
  position: fixed !important; inset: 0; width: 100%; height: 100%;
  z-index: 1; background: transparent;
}
a-scene.ar-scene canvas {
  position: absolute !important; inset: 0;
}
.ui-layer { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.ui-layer button, .ui-layer a { pointer-events: auto; }
.topbar {
  position: absolute; top: max(12px, env(safe-area-inset-top)); left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 0 16px; color: #fff; pointer-events: none;
  text-shadow: 0 2px 10px #0007;
}
.wordmark { font-size: 12px; font-weight: 900; letter-spacing: .09em; }
.wordmark-apple { display: inline-block; margin-right: 6px; color: #ff6255; font-size: 15px; }
.status-pill {
  display: inline-flex; align-items: center; gap: 7px; max-width: 58%;
  padding: 8px 11px; border: 1px solid #ffffff35; border-radius: 99px;
  background: #17231bba; color: white; font-size: 11px; font-weight: 800;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #b6c6ad; }
.status-pill[data-state="found"] .status-dot { background: #7ee28a; }
.status-pill[data-state="error"] .status-dot { background: #ff766e; }
.status-pill[data-state="loading"] .status-dot { background: #ffd66e; }
.screen {
  position: absolute; inset: 0; display: grid; place-items: center;
  padding: max(76px, env(safe-area-inset-top) + 60px) 20px max(24px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #101d1470, #101d14a6);
  pointer-events: auto;
}
.welcome-card, .error-card {
  width: min(100%, 390px); padding: 24px 22px 20px; border-radius: 28px;
  text-align: center; color: var(--ink); background: var(--cream);
  box-shadow: 0 18px 60px #0004;
}
.apple-emoji { font-size: 54px; line-height: 1.15; }
.eyebrow {
  margin: 12px 0 6px; font-size: 10px; letter-spacing: .16em;
  font-weight: 900; color: var(--leaf);
}
h1 { margin: 0; font-size: clamp(25px, 7vw, 32px); line-height: 1.1; letter-spacing: -.04em; }
.intro-copy { max-width: 300px; margin: 10px auto 16px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.target-preview {
  display: flex; align-items: center; gap: 12px; padding: 10px;
  border: 1px solid #e6e9de; border-radius: 18px; background: #f8f8f0; text-align: left;
}
.target-preview img {
  width: 76px; height: 76px; flex: 0 0 76px; object-fit: cover;
  border-radius: 12px; border: 1px solid #e1e3d9;
}
.target-preview div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.target-preview strong { font-size: 13px; }
.target-preview span { color: var(--muted); font-size: 11px; }
.target-preview a { width: fit-content; margin-top: 3px; color: var(--leaf); font-size: 11px; font-weight: 900; text-decoration: none; }
.primary-button {
  display: flex; width: 100%; min-height: 52px; margin-top: 16px;
  align-items: center; justify-content: center; gap: 12px;
  border: 0; border-radius: 16px; background: var(--apple); color: #fff;
  font: 900 16px Nunito, system-ui, sans-serif; cursor: pointer;
  box-shadow: 0 4px 0 #ad302b; transition: transform .12s ease, opacity .12s ease;
}
.primary-button:active { transform: translateY(2px); box-shadow: 0 2px 0 #ad302b; }
.primary-button:disabled { opacity: .55; cursor: wait; }
.microcopy { margin: 13px 4px 0; color: #899385; font-size: 10px; line-height: 1.45; }
.scan-screen {
  position: absolute; inset: 0; pointer-events: none;
}
.scan-message {
  position: absolute; top: max(76px, env(safe-area-inset-top) + 68px);
  left: 50%; transform: translateX(-50%); width: min(calc(100% - 36px), 350px);
  display: flex; align-items: center; gap: 11px; padding: 13px 15px;
  color: white; border: 1px solid #ffffff35; border-radius: 18px;
  background: #17231bd9; box-shadow: 0 8px 30px #0004;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.scan-icon { font-size: 28px; line-height: 1; }
.scan-message div { display: flex; flex-direction: column; gap: 2px; }
.scan-message strong { font-size: 13px; }
.scan-message span:last-child { color: #d7e0d4; font-size: 11px; line-height: 1.35; }
.scan-corners {
  position: absolute; left: 50%; top: 50%; width: min(72vw, 310px); aspect-ratio: 1;
  transform: translate(-50%, -50%); opacity: .8;
}
.scan-corners i {
  position: absolute; width: 32px; height: 32px; border-color: #fff;
  border-style: solid; filter: drop-shadow(0 2px 3px #0008);
}
.scan-corners i:nth-child(1) { top: 0; left: 0; border-width: 3px 0 0 3px; border-radius: 9px 0 0; }
.scan-corners i:nth-child(2) { top: 0; right: 0; border-width: 3px 3px 0 0; border-radius: 0 9px 0 0; }
.scan-corners i:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 3px 3px; border-radius: 0 0 0 9px; }
.scan-corners i:nth-child(4) { bottom: 0; right: 0; border-width: 0 3px 3px 0; border-radius: 0 0 9px 0; }
.stop-button {
  position: absolute; bottom: max(24px, env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%); padding: 12px 22px;
  border: 1px solid #ffffff55; border-radius: 99px; background: #17231bd9;
  color: white; font: 800 13px Nunito, system-ui, sans-serif;
  pointer-events: auto; backdrop-filter: blur(12px);
}
.success-toast {
  position: absolute; bottom: max(88px, env(safe-area-inset-bottom) + 70px);
  left: 50%; transform: translateX(-50%); padding: 11px 17px;
  border: 1px solid #ffffff65; border-radius: 99px; color: white;
  background: #2e6844e8; font-size: 13px; font-weight: 900;
  box-shadow: 0 8px 24px #0003; white-space: nowrap;
}
.error-card { max-width: 350px; }
.error-symbol {
  display: grid; place-items: center; width: 42px; height: 42px; margin: 0 auto 10px;
  border-radius: 50%; color: #fff; background: #df4138; font-size: 24px; font-weight: 900;
}
.error-card h2 { margin: 0; font-size: 23px; }
.error-card p { color: var(--muted); font-size: 13px; line-height: 1.5; }
.text-link { display: inline-block; margin-top: 14px; color: var(--leaf); font-size: 12px; font-weight: 900; text-decoration: none; }
.hidden { display: none !important; }
@media (max-height: 680px) {
  .welcome-card { padding: 16px; }
  .apple-emoji { font-size: 40px; }
  .intro-copy { margin: 7px auto 11px; }
  .target-preview img { width: 62px; height: 62px; flex-basis: 62px; }
  .primary-button { min-height: 46px; margin-top: 12px; }
  .microcopy { margin-top: 8px; }
}