:root {
  --brand-blue: #2863da;        /* Pulses.ai primary (official) */
  --brand-blue-dark: #1c47a0;
  --brand-blue-light: #8fb0ff;  /* readable accent on dark */
  --brand-tint-bg: #18233f;     /* blue-tinted section background */
  --brand-tint-border: #2f4f9c;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  /* Transparent so the native camera SurfaceView shows through in native mode.
     In web/dev mode the canvas paints its own black background. */
  background: transparent;
  color: #eee;
  font: 14px/1.4 system-ui, -apple-system, sans-serif;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}

/* ── Live feed stage ─────────────────────────────────────────────── */
#stage { position: fixed; inset: 0; overflow: hidden; }
#video {
  /* Hidden by default; app.js reveals it only in web/dev mode for drawImage.
     Even then it sits under the canvas, which is what actually paints. */
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; display: none;
}
#overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
#message {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; text-align: center; padding: 24px; color: #f66;
  font-size: 16px; background: rgba(0,0,0,0.55);
}
#statusbar {
  position: absolute; top: env(safe-area-inset-top, 8px); left: 0; right: 0;
  display: flex; justify-content: center; pointer-events: none;
}
#statusbar .muted {
  color: #dde6ff; background: rgba(0,0,0,0.5); padding: 3px 10px; border-radius: 12px;
  font-variant-numeric: tabular-nums; font-size: 12px;
}

/* Brand watermark on the live view (top-left, subtle). */
#brandMark {
  position: absolute; top: calc(env(safe-area-inset-top, 8px) + 6px); left: 12px;
  height: 18px; width: auto; opacity: 0.85; pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}

/* ── Bottom-sheet toggle ─────────────────────────────────────────── */
#sheetToggle {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
  z-index: 30; background: var(--brand-blue); color: #fff;
  border: 1px solid var(--brand-tint-border); border-radius: 18px; padding: 8px 18px;
  font: inherit; font-weight: 600;
}

/* ── Bottom sheet panel ──────────────────────────────────────────── */
#panel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  max-height: 78vh; overflow-y: auto;
  background: #131313; border-top: 1px solid #333;
  border-radius: 16px 16px 0 0;
  padding: 8px 16px calc(env(safe-area-inset-bottom, 0px) + 20px);
  transition: transform 0.22s ease;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.5);
}
#panel.collapsed { transform: translateY(105%); }

/* Tap-handle at the top of the sheet to collapse it */
.sheet-grab {
  display: block; width: 100%; min-height: 26px; padding: 0; margin: 0 0 2px;
  background: transparent; border: none; position: relative;
}
.sheet-grab::before {
  content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 4px; border-radius: 2px; background: #555;
}
.sheet-grab:active::before { background: var(--brand-blue-light); }

/* Brand header inside the sheet */
.brandbar {
  display: flex; align-items: center; gap: 8px; padding: 4px 2px 6px;
}
.brandbar .brandlogo { height: 22px; width: auto; }
.brandbar .brandapp {
  color: var(--brand-blue-light); font-weight: 600; font-size: 15px;
  letter-spacing: 0.04em; opacity: 0.95;
}
.brandbar .sheet-close {
  margin-left: auto; width: 40px; min-width: 40px; min-height: 36px; flex: 0 0 auto;
  background: #202020; color: #ccc; border: 1px solid #333; border-radius: 8px;
  font-size: 18px; line-height: 1; padding: 0;
}

.tabbar {
  position: sticky; top: 0; display: flex; gap: 8px; padding: 8px 0;
  background: #131313; z-index: 1;
}
.tab-btn {
  flex: 1; min-height: 44px; background: #202020; color: #bbb;
  border: 1px solid #333; border-radius: 8px; font: inherit; font-weight: 600;
}
.tab-btn.active {
  background: var(--brand-tint-bg); color: var(--brand-blue-light);
  border-color: var(--brand-tint-border);
}
.tab { display: none; }
.tab.active { display: block; }

/* ── Form fields (large touch targets) ───────────────────────────── */
.field { margin-bottom: 12px; }
.field label { display: block; color: #bbb; margin-bottom: 5px; }
.field small { color: #777; display: block; margin-top: 3px; }
.field.two { display: flex; gap: 10px; }
.field.two > div { flex: 1; }
input, select, button {
  width: 100%; min-height: 44px; background: #232323; color: #eee;
  border: 1px solid #444; border-radius: 8px; padding: 8px 10px; font: inherit;
}
input:focus, select:focus {
  outline: none; border-color: var(--brand-blue-light);
  box-shadow: 0 0 0 2px rgba(125,162,255,0.25);
}
button { cursor: pointer; }
button:active { background: #383838; }
/* Primary action buttons in the Aim tab */
#save { background: var(--brand-blue); border-color: var(--brand-tint-border); color: #fff; }
#save:active { background: var(--brand-blue-dark); }
.btn-row { display: flex; gap: 8px; margin-bottom: 12px; }
.btn-row > * { flex: 1; }
.adv { margin-bottom: 12px; }
.adv summary { cursor: pointer; color: #aaa; min-height: 36px; padding: 6px 0; }
hr { border: none; border-top: 1px solid #2a2a2a; margin: 12px 0; }

/* ── Planner results (reused from desktop) ───────────────────────── */
.results { font-size: 14px; margin-top: 6px; }
.results .row { display: flex; justify-content: space-between; gap: 10px;
  padding: 5px 0; border-bottom: 1px solid #222; }
.results .row .k { color: #999; }
.results .row .v { color: #eee; text-align: right; font-variant-numeric: tabular-nums; }
.results .ok { color: #6f6; }
.results .warn { color: #fb4; }
.results .bad { color: #f55; }
.results .headline { font-size: 14px; margin: 8px 0; padding: 10px;
  border-radius: 6px; background: var(--brand-tint-bg); color: #dbe5ff;
  border-left: 3px solid var(--brand-blue-light); }
.results .headline.bad { background: #2a1d1d; color: #fcc; border-left-color: #f55; }
.results .lens-list { margin: 6px 0 0; padding: 0; list-style: none; }
.results .lens-list li { padding: 3px 0; color: #ccc; }
.results .lens-list li.rec { color: #6f6; font-weight: 600; }
.results .lens-list li.invalid { color: #777; }
.results .subhead { margin-top: 8px; color: #999; }

/* App version footer at the bottom of the planner sheet */
.app-version {
  margin-top: 14px; padding-top: 10px; border-top: 1px solid #2a2a2a;
  text-align: center; color: #777; font-size: 12px;
  font-variant-numeric: tabular-nums;
}