:root {
  --slate:  #16202b;
  --panel:  #1d2a38;
  --raise:  #243347;
  --edge:   #2f4257;
  --mist:   #e6edf4;
  --dim:    #8497aa;
  --brass:  #d6a03d;
  --oxide:  #c75b45;
  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --disp: "Bricolage Grotesque", "IBM Plex Sans", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  --r: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--slate);
  color: var(--mist);
  font: 400 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--disp); font-weight: 800; letter-spacing: -0.02em; margin: 0; }
h2 { font-size: 24px; }
h3 { font-size: 15px; font-weight: 600; margin: 26px 0 8px; letter-spacing: 0; }
p { margin: 0; }

.lede { color: var(--dim); font-size: 14px; max-width: 62ch; }
code { font-family: var(--mono); font-size: 0.9em; color: var(--brass); }

button { font: inherit; cursor: pointer; border-radius: var(--r); transition: .15s ease; }
button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--brass); outline-offset: 2px;
}

.solid {
  background: var(--brass); color: #16202b; border: 0;
  font-weight: 600; padding: 10px 18px;
}
.solid:hover { filter: brightness(1.08); }
.solid:disabled { background: var(--raise); color: var(--dim); cursor: not-allowed; filter: none; }

.ghost {
  background: transparent; color: var(--dim);
  border: 1px solid var(--edge); padding: 8px 14px;
}
.ghost:hover { color: var(--mist); border-color: var(--dim); }

.wide { width: 100%; margin-top: 14px; padding: 12px; }
.center { text-align: center; margin: 0 auto; }

/* ----------------------------------------------------------------- icons -- */
.ic {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; overflow: visible;
}
.ic-lg { width: 30px; height: 30px; }

/* -------------------------------------------------------------- topbar -- */
.topbar {
  display: flex; flex-wrap: wrap; gap: 18px 26px;
  align-items: center; justify-content: space-between;
  padding: 18px 28px;
  border-bottom: 1px solid var(--edge);
  background: linear-gradient(180deg, #1a2531, var(--slate));
  position: sticky; top: 0; z-index: 20;
}
.mark { display: flex; align-items: center; gap: 14px; }
.mark h1 { font-size: 21px; }
.sub { color: var(--dim); font: 400 12px/1.4 var(--mono); }

/* the peephole: the one motif the whole page is built around */
.peep {
  display: inline-block; width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #3d5470, #131c26 68%);
  box-shadow: 0 0 0 1px var(--edge), inset 0 0 0 3px #101820, 0 0 14px rgba(214,160,61,.16);
  flex: none;
}
.peep-lg { width: 56px; height: 56px; margin: 0 auto 18px; box-shadow: 0 0 0 1px var(--edge), inset 0 0 0 5px #101820, 0 0 22px rgba(214,160,61,.2); }

.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tab {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 0; color: var(--dim);
  padding: 8px 14px; font-size: 14px;
}
.tab:hover { color: var(--mist); }
.tab.is-on { background: var(--panel); color: var(--mist); box-shadow: inset 0 -2px 0 var(--brass); }
.tab .ic { width: 16px; height: 16px; }

.signout { display: inline-flex; align-items: center; gap: 8px; }

/* -------------------------------------------------------------- login --- */
.login-screen {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(ellipse at 50% -10%, #21324580, transparent 60%), var(--slate);
}
.login-screen[hidden] { display: none; }
.login-card {
  width: 100%; max-width: 340px; background: var(--panel);
  border: 1px solid var(--edge); border-radius: 14px;
  padding: 34px 30px; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.login-card h1 { font-size: 24px; margin-bottom: 6px; }
.login-card .field { text-align: left; margin-top: 22px; }
.login-error { min-height: 18px; margin-top: 12px; color: var(--oxide); font-size: 13px; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 30px 24px 80px; }
.view { display: none; }
.view.is-on { display: block; animation: rise .28s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

/* -------------------------------------------------------------- meters -- */
.meters {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 26px;
}
.meter {
  position: relative; background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r);
  padding: 14px 16px;
}
.meter-ic { position: absolute; top: 14px; right: 16px; color: var(--dim); opacity: .5; }
.meter-k { display: block; color: var(--dim); font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding-right: 22px; }
.meter b { font-family: var(--disp); font-size: 30px; display: block; margin-top: 8px; }
.meter-wide b { font-size: 17px; line-height: 1.35; margin-top: 10px; }

/* ------------------------------------------------------------- filters -- */
.rowhead { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.filters { display: flex; gap: 6px; }
.chip {
  background: var(--panel); border: 1px solid var(--edge); color: var(--dim);
  padding: 6px 14px; font-size: 13px; border-radius: 999px;
}
.chip.is-on { background: var(--raise); color: var(--mist); border-color: var(--dim); }
.rowhead-right { display: flex; align-items: center; gap: 14px; }
.live { color: var(--dim); font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; display: flex; align-items: center; gap: 7px; }
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--brass); animation: beat 2.4s ease-in-out infinite; }
@keyframes beat { 50% { opacity: .25; } }

/* ---------------------------------------------------------- the tape ---- */
.tape { position: relative; padding-left: 92px; }
.tape::before {
  content: ""; position: absolute; left: 91px; top: 6px; bottom: 6px;
  width: 1px; background: linear-gradient(180deg, transparent, var(--edge) 8%, var(--edge) 92%, transparent);
}
.entry { position: relative; display: flex; gap: 16px; align-items: center; padding: 12px 0; animation: rise .3s ease both; }
.entry .face { margin-left: 14px; }
.entry .clock {
  position: absolute; left: -92px; width: 76px; text-align: right;
  font: 500 13px/1.3 var(--mono); color: var(--mist);
}
.entry .clock small { display: block; color: var(--dim); font-size: 11px; }
.entry::before {
  content: ""; position: absolute; left: -1px; top: 50%; width: 10px; height: 1px;
  background: var(--edge);
}

.face {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none;
  background: var(--raise);
  box-shadow: 0 0 0 2px var(--slate), 0 0 0 3px var(--edge);
}
.entry.granted .face { box-shadow: 0 0 0 2px var(--slate), 0 0 0 3px var(--brass); }
.entry.denied .face  { box-shadow: 0 0 0 2px var(--slate), 0 0 0 3px var(--oxide); }
.face.blank { display: grid; place-items: center; font-family: var(--disp); color: var(--dim); font-size: 20px; }

.entry-body { min-width: 0; flex: 1; }
.entry-name { font-family: var(--disp); font-size: 18px; font-weight: 600; }
.entry-meta { font: 400 12px/1.5 var(--mono); color: var(--dim); }
.verdict-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font: 500 11px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 999px; flex: none;
}
.verdict-tag .ic { width: 12px; height: 12px; }
.granted .verdict-tag { color: var(--brass); background: rgba(214,160,61,.12); }
.denied  .verdict-tag { color: var(--oxide); background: rgba(199,91,69,.12); }
.no_face .verdict-tag { color: var(--dim); background: rgba(132,151,170,.12); }

.empty { border: 1px dashed var(--edge); border-radius: var(--r); padding: 34px; text-align: center; color: var(--dim); }

/* ----------------------------------------------------------- household -- */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 20px; }
.card { background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r); padding: 18px; }
.card-top { display: flex; gap: 14px; align-items: center; }
.card h3 { margin: 0; font-family: var(--disp); font-size: 18px; font-weight: 600; }
.card .rel { color: var(--dim); font-size: 13px; }
.card-meta { font: 400 12px/1.7 var(--mono); color: var(--dim); margin-top: 14px; }
.card-actions { display: flex; gap: 8px; margin-top: 14px; }
.card-actions .ghost { padding: 6px 12px; font-size: 13px; }
.danger:hover { color: var(--oxide); border-color: var(--oxide); }

/* -------------------------------------------------------------- enroll -- */
.enroll { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }

/* the scanner: a peephole you fill in by moving your head */
.scanner { position: relative; width: 340px; max-width: 100%; aspect-ratio: 1; margin: 0 auto; }
.ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.ring .seg { fill: none; stroke-width: 5; stroke-linecap: round; stroke: var(--edge); transition: stroke .3s ease; }
.ring .seg.active { stroke: var(--brass); animation: seg 1.4s ease-in-out infinite; }
.ring .seg.done { stroke: var(--brass); }
@keyframes seg { 50% { opacity: .3; } }

.lens {
  position: absolute; inset: 22px; border-radius: 50%; overflow: hidden;
  background: #101820; box-shadow: inset 0 0 0 1px var(--edge), inset 0 0 40px rgba(0,0,0,.7);
}
.lens video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.lens-off { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--dim); background: #101820; font: 400 13px var(--mono); }
.lens-off.hide { display: none; }

/* box drawn where the server says the face is, mirrored to match the preview */
.reticle {
  position: absolute; border: 1px solid var(--brass); border-radius: 8px;
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
  box-shadow: 0 0 12px rgba(214,160,61,.25);
}
.reticle.on { opacity: .85; }
.reticle.bad { border-color: var(--oxide); box-shadow: 0 0 12px rgba(199,91,69,.25); }

.flash { position: absolute; inset: 0; background: var(--mist); opacity: 0; pointer-events: none; }
.flash.pop { animation: pop .45s ease-out; }
@keyframes pop { 0% { opacity: .55; } 100% { opacity: 0; } }

.prompt { font-family: var(--disp); font-size: 20px; font-weight: 600; text-align: center; margin-top: 20px; min-height: 28px; }
.prompt.good { color: var(--brass); }
.prompt.warn { color: var(--oxide); }
.hint { text-align: center; color: var(--dim); font-size: 13px; margin-top: 6px; min-height: 20px; }
.readout { text-align: center; color: var(--dim); font: 400 11px/1.4 var(--mono); margin-top: 10px; min-height: 16px; opacity: .7; }

.camctl { display: flex; gap: 8px; margin-top: 16px; justify-content: center; }
.shots { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; justify-content: center; }
.shot { position: relative; text-align: center; }
.shot img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--slate), 0 0 0 3px var(--brass); }
.shot span { display: block; font: 400 10px var(--mono); color: var(--dim); margin-top: 5px; }

.field { display: block; margin-top: 16px; }
.field > span { display: block; font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin-bottom: 7px; }
.field em { font-style: normal; opacity: .6; }
.field input, .field select {
  width: 100%; padding: 11px 13px; border-radius: var(--r);
  background: var(--slate); border: 1px solid var(--edge); color: var(--mist);
  font: 400 15px var(--sans);
}
.field input[type=file] { padding: 9px; font-size: 13px; color: var(--dim); }
.or { text-align: center; color: var(--dim); font: 400 12px var(--mono); margin: 18px 0 0; }

.result { margin-top: 16px; font-size: 14px; }
.result .ok  { color: var(--brass); }
.result .bad { color: var(--oxide); }
.result ul { margin: 8px 0 0; padding-left: 18px; color: var(--dim); font-size: 13px; }

/* -------------------------------------------------------------- device -- */
.device { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
.code {
  background: #101820; border: 1px solid var(--edge); border-radius: var(--r);
  padding: 14px; font: 400 12.5px/1.6 var(--mono); color: var(--mist);
  overflow-x: auto; white-space: pre-wrap; word-break: break-all; margin: 0;
  flex: 1;
}
.endpoint-row { display: flex; gap: 8px; align-items: stretch; }
.icon-btn { flex: none; display: grid; place-items: center; padding: 0; width: 42px; }
.icon-btn.copied { color: var(--brass); border-color: var(--brass); }
.test { background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r); padding: 20px; }
.test h3 { margin-top: 0; }
.camwrap {
  position: relative; aspect-ratio: 4/3; background: #101820;
  border: 1px solid var(--edge); border-radius: var(--r); overflow: hidden;
}
.camwrap-sm { margin-top: 12px; }
.camwrap video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.camoff { position: absolute; inset: 0; display: grid; place-content: center; gap: 12px; justify-items: center; color: var(--dim); background: #101820; }
.camoff.hide { display: none; }
.verdict { margin-top: 14px; font-family: var(--mono); font-size: 13px; line-height: 1.7; color: var(--dim); }
.verdict b { font-family: var(--disp); font-size: 20px; display: block; }
.verdict.granted b { color: var(--brass); }
.verdict.denied b  { color: var(--oxide); }

@media (max-width: 820px) {
  .topbar { padding: 14px 16px; }
  .signout span { display: none; }
  .tab span { display: none; }
  .tab .ic { width: 19px; height: 19px; }
  .wrap { padding: 22px 16px 60px; }
  .meters { grid-template-columns: repeat(2, 1fr); }
  .meter-wide { grid-column: span 2; }
  .enroll, .device { grid-template-columns: 1fr; }
  .tape { padding-left: 0; }
  .tape::before { display: none; }
  .entry { border-bottom: 1px solid var(--edge); padding: 14px 0; }
  .entry::before { display: none; }
  .entry .clock { position: static; width: auto; text-align: left; order: 3; }
  .entry .clock small { display: inline; margin-left: 6px; }
  .entry .face { margin-left: 0; }
}

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