/* Mobile-first dark UI. Sized for one-handed phone use: nothing tappable is
   under 44px, and the layout respects iPhone safe areas. */
:root {
  --bg: #0b0e13;
  --surface: #151a22;
  --surface-2: #1e2530;
  --border: #2a3340;
  --text: #e8edf4;
  --muted: #8b98a9;
  --accent: #3b9dff;
  --danger: #ff4d4f;
  --success: #33d17a;
  --warn: #ffb020;
  --radius: 14px;
  --nav-h: 60px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--text);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior-y: none;
}

body { display: flex; flex-direction: column; }

/* --- header --- */
header {
  position: sticky; top: 0; z-index: 20;
  padding: calc(var(--safe-t) + 10px) 14px 10px;
  background: rgba(11,14,19,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
header h1 { font-size: 16px; font-weight: 650; margin: 0; flex: 1; letter-spacing: -.01em; }

.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; }
.dot.live { background: var(--success); box-shadow: 0 0 0 0 rgba(51,209,122,.6); animation: pulse 2s infinite; }
.dot.err  { background: var(--danger); }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px rgba(51,209,122,0); } 100% { box-shadow: 0 0 0 0 rgba(51,209,122,0); } }

.hstat { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* --- layout --- */
main { flex: 1; overflow-y: auto; padding-bottom: calc(var(--nav-h) + var(--safe-b) + 12px); -webkit-overflow-scrolling: touch; }
.view { display: none; padding: 12px; }
.view.active { display: block; }
#view-live.active { padding: 0; }

/* --- live video --- */
.stage {
  position: relative; background: #000; width: 100%;
  aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.stage img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .2s; }
.stage img.r90  { transform: rotate(90deg)  scale(.5625); }
.stage img.r180 { transform: rotate(180deg); }
.stage img.r270 { transform: rotate(270deg) scale(.5625); }

.stage-msg {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  color: var(--muted); font-size: 14px; text-align: center; padding: 20px;
}
.rec-badge {
  position: absolute; top: 10px; left: 10px; display: none;
  align-items: center; gap: 6px; padding: 5px 10px; border-radius: 20px;
  background: rgba(255,77,79,.9); font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.rec-badge.on { display: flex; }
.rec-badge::before { content:''; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .2; } }

/* --- controls --- */
.controls { display: flex; gap: 10px; padding: 14px 12px; }
.ctl {
  flex: 1; min-height: 56px; border: none; border-radius: var(--radius);
  background: var(--surface-2); color: var(--text);
  font-size: 14px; font-weight: 600; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  transition: transform .1s, background .15s;
}
.ctl:active { transform: scale(.96); }
.ctl svg { width: 20px; height: 20px; }
.ctl.rec.on { background: var(--danger); }
.ctl.primary { background: var(--accent); }

.meta { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 12px 12px; }
.chip {
  background: var(--surface); border: 1px solid var(--border); color: var(--muted);
  padding: 5px 10px; border-radius: 20px; font-size: 12px; font-variant-numeric: tabular-nums;
}
.chip b { color: var(--text); font-weight: 600; }

/* --- cards / forms --- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin-bottom: 12px; }
.card h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 12px; font-weight: 600; }

.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.row:last-child { border-bottom: none; }
.row label { font-size: 14px; flex: 1; }
.row .hint { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }

select, input[type=text], input[type=password], input[type=number] {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 9px; padding: 10px 12px; font-size: 16px; /* 16px stops iOS zooming on focus */
  min-height: 44px; width: 100%;
}
select { max-width: 165px; }
input[type=range] { width: 130px; accent-color: var(--accent); height: 30px; }

/* iOS-style switch */
.switch { position: relative; width: 50px; height: 30px; flex: none; }
.switch input { opacity: 0; width: 100%; height: 100%; margin: 0; position: absolute; z-index: 2; }
.switch span { position: absolute; inset: 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: 30px; transition: .2s; }
.switch span::after { content: ''; position: absolute; width: 24px; height: 24px; border-radius: 50%; background: #fff; top: 2px; left: 2px; transition: .2s; }
.switch input:checked + span { background: var(--accent); border-color: var(--accent); }
.switch input:checked + span::after { transform: translateX(20px); }

.btn {
  width: 100%; min-height: 48px; border: none; border-radius: var(--radius);
  background: var(--surface-2); color: var(--text); font-size: 15px; font-weight: 600; cursor: pointer;
}
.btn.primary { background: var(--accent); }
.btn.danger  { background: var(--danger); }
.btn:active  { transform: scale(.98); }
.btn + .btn  { margin-top: 8px; }

/* --- gallery --- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 8px; }
.tile { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--surface-2); cursor: pointer; }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile .tag { position: absolute; bottom: 0; left: 0; right: 0; padding: 12px 6px 4px; font-size: 10px;
             background: linear-gradient(transparent, rgba(0,0,0,.85)); color: #fff; }
.tile .play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
              font-size: 26px; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.7); pointer-events: none; }

/* --- events --- */
.event { display: flex; gap: 11px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.event:last-child { border-bottom: none; }
.event img { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; flex: none; background: var(--surface-2); }
.event .info { flex: 1; min-width: 0; }
.event .info b { font-size: 14px; display: block; }
.event .info small { color: var(--muted); font-size: 12px; }
.badge { font-size: 10px; padding: 2px 7px; border-radius: 5px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.badge.motion { background: rgba(255,176,32,.18); color: var(--warn); }
.badge.face   { background: rgba(59,157,255,.18); color: var(--accent); }
.badge.nsfw   { background: rgba(255,77,79,.18);  color: var(--danger); }

.empty { text-align: center; color: var(--muted); padding: 36px 16px; font-size: 14px; }

/* --- bottom nav --- */
nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  height: calc(var(--nav-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  display: flex; background: rgba(21,26,34,.96); backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
}
nav button {
  flex: 1; background: none; border: none; color: var(--muted); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 10px; font-weight: 600; padding: 0;
}
nav button svg { width: 21px; height: 21px; }
nav button.active { color: var(--accent); }

/* --- viewer overlay --- */
.viewer { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.96); display: none;
          flex-direction: column; align-items: center; justify-content: center; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.viewer.open { display: flex; }
.viewer img, .viewer video { max-width: 100%; max-height: 78%; object-fit: contain; }
.viewer .bar { display: flex; gap: 8px; padding: 14px; width: 100%; max-width: 460px; }
.viewer .bar .btn { margin: 0; }
.viewer .name { color: var(--muted); font-size: 12px; padding: 8px 14px; word-break: break-all; text-align: center; }

.cardnote { color: var(--muted); font-size: 12px; margin: -4px 0 10px; }
.secs { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; flex: none; }
.secs input { width: 84px; max-width: 84px; text-align: right; }

/* --- naming a face --- */
.nameface { display: block; width: 132px; height: 132px; border-radius: 18px;
            object-fit: cover; margin: 8px auto 16px; background: var(--surface-2); }
.namepick { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
            background: var(--surface-2); border: 1px solid var(--border);
            border-radius: 12px; padding: 8px 12px; margin-bottom: 8px;
            color: var(--text); font-size: 15px; font-weight: 600; cursor: pointer; }
.namepick img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
                flex: none; background: var(--border); }
.namepick small { color: var(--muted); font-weight: 400; font-size: 12px; margin-left: auto; }
.namepick:active { transform: scale(.99); border-color: var(--accent); }

/* --- push diagnostics --- */
.diag {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 11px 12px; font-size: 12px; line-height: 1.6; margin-top: 10px;
  white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.diag .ok   { color: var(--success); }
.diag .bad  { color: var(--danger); }
.diag .warn { color: var(--warn); }

/* --- people --- */
.person { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.person:last-child { border-bottom: none; }
.person img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; background: var(--surface-2); }
.person .info { flex: 1; min-width: 0; }
.person .info b { font-size: 15px; display: block; }
.person .info small { color: var(--muted); font-size: 12px; }
.iconbtn { background: none; border: none; color: var(--muted); font-size: 13px;
           padding: 8px 6px; cursor: pointer; font-weight: 600; }
.iconbtn.danger { color: var(--danger); }

/* --- faces on an alert --- */
.facestrip { display: flex; gap: 6px; flex-wrap: wrap; padding: 2px 0 8px 75px; }
.facechip { display: flex; align-items: center; gap: 6px; background: var(--surface-2);
            border: 1px solid var(--border); border-radius: 20px; padding: 3px 10px 3px 3px;
            font-size: 12px; cursor: pointer; }
.facechip img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.facechip.known { border-color: var(--accent); }
.facechip.known span { color: var(--accent); font-weight: 600; }
.event .clip { color: var(--accent); font-size: 12px; text-decoration: none; }

/* --- image-control sheet ---
   Anchored above the tab bar rather than covering the screen, so the live view
   stays visible while a slider is moving -- seeing the effect is the point. */
.sheet {
  position: fixed; left: 0; right: 0; z-index: 70;
  bottom: calc(var(--nav-h) + var(--safe-b));
  max-height: 62vh; display: flex; flex-direction: column;
  background: var(--surface); border-top: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: 0 -18px 40px rgba(0,0,0,.55);
  animation: sheet-up .22s ease-out;
}
.sheet[hidden] { display: none; }
@keyframes sheet-up { from { transform: translateY(100%); } }
.sheet-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px;
              border-bottom: 1px solid var(--border); flex: none; }
.sheet-head h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
                 color: var(--muted); margin: 0; flex: 1; font-weight: 600; }
.sheet-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 14px 16px; }
.sheet-actions { margin-top: 14px; }
.btn.inline { width: auto; min-height: 38px; padding: 0 16px; font-size: 14px; flex: none; }

.presets { display: flex; gap: 8px; overflow-x: auto; padding: 12px 0 4px; scrollbar-width: none; }
.presets::-webkit-scrollbar { display: none; }
.preset {
  flex: none; padding: 9px 15px; border-radius: 20px; font-size: 14px; font-weight: 600;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border); cursor: pointer;
}
.preset.on { background: var(--accent); border-color: var(--accent); }
.preset-hint { color: var(--muted); font-size: 12px; margin: 6px 0 4px; min-height: 16px; }

.ctrl-group { font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
              color: var(--muted); font-weight: 600; margin: 14px 0 2px; }
.ctrl { display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: 9px 0; border-bottom: 1px solid var(--border); }
.ctrl:last-child { border-bottom: none; }
.ctrl .lab { font-size: 14px; flex: 1; min-width: 0; }
.ctrl .val { display: block; font-size: 12px; color: var(--accent);
             font-variant-numeric: tabular-nums; margin-top: 2px; }
.ctrl .hint { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
/* Greyed rather than hidden: a shutter slider that does nothing while the
   camera is metering should still be visible, with the reason under it. */
.ctrl.inactive { opacity: .5; }
.ctrl.inactive .val { color: var(--muted); }

/* --- stage overlay button --- */
.stage-btn {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(11,14,19,.62); color: var(--text); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
}
.stage-btn svg { width: 20px; height: 20px; }
.stage-btn:active { transform: scale(.94); }
.stage-btn.on { background: var(--accent); }

/* --- toast --- */
#toast {
  position: fixed; left: 50%; bottom: calc(var(--nav-h) + var(--safe-b) + 16px);
  transform: translate(-50%, 20px); z-index: 80;
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 11px 18px; border-radius: 24px; font-size: 14px; font-weight: 500;
  opacity: 0; transition: .25s; pointer-events: none; max-width: 88vw; text-align: center;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.err { border-color: var(--danger); color: #ffd7d7; }

/* --- login --- */
.login-wrap { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login { width: 100%; max-width: 340px; }
.login .logo { text-align: center; font-size: 46px; margin-bottom: 8px; }
.login h1 { text-align: center; font-size: 21px; margin: 0 0 4px; }
.login p.sub { text-align: center; color: var(--muted); font-size: 13px; margin: 0 0 22px; }
.login input { margin-bottom: 10px; }
.error { background: rgba(255,77,79,.12); border: 1px solid rgba(255,77,79,.35); color: #ffc9c9;
         padding: 10px 12px; border-radius: 10px; font-size: 13px; margin-bottom: 12px; display: none; }
.error.show { display: block; }

@media (min-width: 720px) {
  main { max-width: 720px; margin: 0 auto; width: 100%; }
  .stage { border-radius: var(--radius); margin-top: 12px; }
  #view-live.active { padding: 0 12px; }
}