:root {
  --bg: #10151a;
  --fg: #ffffff;
  --accent: #4ade80;
  --chip: rgba(16, 21, 26, 0.62);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
#cam, #overlay {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
}
#cam { object-fit: cover; background: #000; z-index: 0; }
#overlay { z-index: 1; touch-action: none; }

/* Start gate */
#gate {
  position: fixed; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 120% at 50% 0%, #1c2a33 0%, #0a0e12 70%);
  padding: 24px;
}
#gate.hidden { display: none; }
.gate-card { max-width: 340px; text-align: center; }
.gate-card h1 { font-size: 30px; margin: 0 0 8px; letter-spacing: 0.5px; }
.gate-card p { color: #b9c4cc; line-height: 1.5; margin: 8px 0; }
.gate-card .fine { font-size: 12px; color: #7b8792; margin-top: 18px; }
#startBtn {
  margin-top: 14px; padding: 14px 34px; font-size: 17px; font-weight: 600;
  color: #062012; background: var(--accent); border: none; border-radius: 999px;
}
#startBtn:active { transform: scale(0.97); }

/* HUD */
#hud {
  position: fixed; z-index: 2; left: 0; right: 0;
  top: calc(env(safe-area-inset-top) + 12px);
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 12px; gap: 8px; pointer-events: none;
}
#hud.hidden { display: none; }
.chip {
  background: var(--chip); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 999px;
  padding: 8px 12px; font-size: 13px; display: flex; align-items: center; gap: 8px;
  pointer-events: auto;
}
#calib button {
  width: 30px; height: 30px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.14); color: #fff; font-size: 14px;
}
#calib button:active { background: rgba(255,255,255,0.3); }
#offVal { min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; }

/* Accuracy mode chip (PRD 5.5 honesty UI): prominent, always visible. Tap = re-match. */
.mode { font-weight: 700; letter-spacing: 0.4px; }
.mode.locked { color: #062012; background: rgba(74, 222, 128, 0.92); }
.mode.approx { color: #241a02; background: rgba(251, 191, 36, 0.88); }
.mode.manual { color: #dbe4ea; background: rgba(90, 100, 110, 0.55); }