/* Shared chrome for the pages that live under one address: the tab bar, and
   the scan pane that renders beneath it. The kiosk deliberately does not load
   this, because the booth screen has no tab bar. */
:root {
  --navy: #0b1b2b;
  --navy-deep: #0a1622;
  --panel: #102638;
  --brand: #90b33e;
  --brand-deep: #7fa036;
  --white: #f7fafb;
  --mist: #c9d3da;
  --muted: #7f919e;
  --line: rgba(190, 215, 222, .16);
  --danger: #e98b85;
  --font-body: -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0 }
body {
  background: var(--navy-deep); color: var(--white); font-family: var(--font-body);
  -webkit-font-smoothing: antialiased; min-height: 100dvh;
}
button, input, textarea, select { font: inherit }
button { border: 0; cursor: pointer }
.hidden { display: none !important }

/* --- tab bar ------------------------------------------------------------ */
.tabbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .7rem clamp(1rem, 4vw, 2.5rem);
  padding-top: max(.7rem, env(safe-area-inset-top));
  background: rgba(10, 22, 34, .96); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
.tabbar-brand { display: flex; align-items: center; text-decoration: none }
.tabbar-brand img { height: 1.6rem; width: auto; display: block }
.tabs { display: flex; gap: .35rem; margin-left: auto }
.tab {
  padding: .5rem .95rem; border-radius: .45rem; text-decoration: none;
  color: var(--mist); font-size: .9rem; font-weight: 600;
  border: 1px solid transparent; white-space: nowrap;
}
.tab:hover { color: var(--white); border-color: var(--line) }
.tab.is-active { color: var(--brand); border-color: var(--brand);
  background: rgba(144, 179, 62, .1) }

/* --- panes -------------------------------------------------------------- */
.pane {
  width: min(46rem, 100%); margin: 0 auto;
  padding: clamp(1rem, 3vw, 2rem) clamp(1rem, 4vw, 2.5rem) 4rem;
  display: flex; flex-direction: column; gap: 1rem;
}
.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: .8rem; padding: clamp(1rem, 3vw, 1.6rem);
}
h1 { font-size: 1.5rem; letter-spacing: -.02em }
h2 { font-size: 1.25rem; letter-spacing: -.02em }
.sub { color: var(--muted); font-size: .88rem; margin-top: .35rem; line-height: 1.5 }
.eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .16em; color: var(--brand) }
.review-line { color: var(--mist); font-size: .95rem; margin-top: .2rem }
.review-warn { margin-top: .7rem; font-size: .85rem; color: var(--danger) }

/* --- viewfinder --------------------------------------------------------- */
.viewfinder {
  position: relative; margin-top: 1rem; border-radius: .7rem; overflow: hidden;
  background: #06111b; border: 1px solid var(--line); aspect-ratio: 4 / 3;
}
.viewfinder video { width: 100%; height: 100%; object-fit: cover; display: block }
.reticle {
  position: absolute; inset: 18% 14%; border: 2px solid var(--brand);
  border-radius: .5rem; box-shadow: 0 0 0 100vmax rgba(6, 17, 27, .45);
}
.camera-status {
  position: absolute; left: 0; right: 0; bottom: 0; padding: .5rem .8rem;
  background: rgba(6, 17, 27, .8); font-size: .8rem; color: var(--mist);
}

/* --- controls ----------------------------------------------------------- */
.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem }
.btn {
  min-height: 2.9rem; padding: .6rem 1.15rem; border-radius: .45rem;
  background: var(--brand); color: var(--navy-deep); font-weight: 700;
  font-size: .92rem; flex: 1 1 12rem;
}
.btn:hover { background: #a6c95e }
.btn.ghost { background: transparent; color: var(--white);
  border: 1px solid rgba(201, 211, 218, .38) }
.btn.ghost:hover { border-color: var(--brand); color: var(--brand) }
.btn:disabled { opacity: .55; cursor: not-allowed }

.field { display: block; margin-top: 1rem }
.field > span { display: block; font-size: .82rem; color: var(--mist);
  margin-bottom: .35rem }
.field textarea, .field input {
  width: 100%; background: #091724; border: 1px solid var(--line);
  border-radius: .45rem; color: var(--white); padding: .7rem;
  resize: vertical;
}
.field textarea:focus, .field input:focus { outline: 2px solid var(--brand);
  border-color: var(--brand) }
.check { display: flex; align-items: center; gap: .6rem; margin-top: .9rem;
  font-size: .92rem; color: var(--mist) }
.check input { width: 1.15rem; height: 1.15rem; accent-color: var(--brand) }

/* --- feedback ----------------------------------------------------------- */
.notice { padding: .85rem 1rem; border-radius: .5rem; font-size: .88rem;
  border: 1px solid var(--line) }
.notice.ok { background: rgba(144, 179, 62, .1); border-color: rgba(144, 179, 62, .45);
  color: #cfe4a2 }
.notice.err { background: rgba(233, 139, 133, .1);
  border-color: rgba(233, 139, 133, .45); color: #f2bcb8 }
.warn { padding: .85rem 1rem; border-radius: .5rem; font-size: .88rem;
  background: rgba(233, 139, 133, .12); border: 1px solid rgba(233, 139, 133, .5);
  color: #f2bcb8; font-weight: 600 }

.recent-heading { font-size: 1rem }
.sent-list { display: flex; flex-direction: column; gap: .45rem; margin-top: .8rem }
.sent-row { background: #0b1c2b; border: 1px solid var(--line);
  border-radius: .45rem; padding: .55rem .75rem; font-size: .88rem }
.sent-row .meta { color: var(--muted); font-size: .76rem; margin-top: .12rem }
.sent-row.failed { border-color: rgba(233, 139, 133, .5) }
.empty { color: var(--muted); font-size: .85rem }

.manual-dialog {
  width: min(28rem, 92vw); border: 1px solid var(--line); border-radius: .8rem;
  background: var(--panel); color: var(--white); padding: 1.5rem;
}
.manual-dialog::backdrop { background: rgba(3, 10, 16, .72) }

@media (prefers-reduced-motion: reduce) { * { animation: none !important } }