:root {
  color-scheme: dark;
  --bg: #07111f;
  --panel: #101d2d;
  --line: #26384d;
  --text: #edf5ff;
  --muted: #9db0c6;
  --accent: #63c7ff;
  --warning: #ffc857;
  --good: #78dfa8;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: radial-gradient(circle at top, #122641 0, var(--bg) 44rem);
  color: var(--text);
  font: 16px/1.45 system-ui, sans-serif;
}
header, main { width: min(1180px, calc(100% - 2rem)); margin: auto; }
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 2rem 0 1rem;
}
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: .25rem; }
.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; }
#summary, .back, small, figcaption { color: var(--muted); }
.back, button, select {
  border: 1px solid var(--line);
  border-radius: .6rem;
  background: var(--panel);
  color: var(--text);
  padding: .65rem .9rem;
}
.back { text-decoration: none; white-space: nowrap; }
.controls {
  display: grid;
  grid-template-columns: auto auto auto 1fr;
  align-items: end;
  gap: 1rem;
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 1rem;
}
label { display: grid; gap: .4rem; color: var(--muted); font-size: .85rem; }
.stepper { display: flex; align-items: center; gap: .7rem; }
button { cursor: pointer; }
button:hover, .back:hover { border-color: var(--accent); }
button:disabled { opacity: .45; cursor: default; }
.scrubber { grid-column: 1 / -1; }
.scrubber input { width: 100%; accent-color: var(--accent); }
.favorites-control {
  display: grid;
  gap: .35rem;
  align-content: end;
}
#favorites-filter.active,
.favorite-current.active {
  border-color: var(--warning);
  color: var(--warning);
}
.viewer {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, .8fr);
  gap: 1rem;
  margin: 1rem 0 2rem;
}
.viewer figure, .viewer article {
  margin: 0;
  min-height: 360px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 1rem;
  overflow: hidden;
}
.viewer figure { display: grid; place-items: center; position: relative; }
.viewer figure img { display: block; width: 100%; height: 100%; max-height: 70vh; object-fit: contain; background: #02060b; }
.viewer figcaption { position: absolute; inset: auto .75rem .75rem; background: #07111fd9; padding: .25rem .5rem; border-radius: .4rem; }
.viewer article { padding: 1.25rem; }
.badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.badge { border-radius: 999px; background: #174b66; color: #bdeaff; padding: .25rem .65rem; font-size: .8rem; text-transform: capitalize; }
.badge.secondary { background: #443819; color: var(--warning); }
.badge.owner-favorite { background: #4d3c12; color: var(--warning); }
.favorite-current { margin: 0 0 1rem; }
dl { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1rem; }
dt { color: var(--muted); }
dd { margin: 0; overflow-wrap: anywhere; }
.gallery-heading { display: flex; justify-content: space-between; align-items: baseline; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .8rem; padding-bottom: 3rem; }
.card {
  position: relative;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: .6rem;
}
.card-select {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
}
.card-select:hover { border-color: transparent; }
.card img { width: 100%; aspect-ratio: 4/3; display: block; object-fit: cover; background: #02060b; }
.card-copy { display: grid; gap: .15rem; padding: .65rem; }
.card-favorite {
  position: absolute;
  top: .45rem;
  right: .45rem;
  z-index: 2;
  width: 2.3rem;
  height: 2.3rem;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 999px;
  background: #07111fe8;
  font-size: 1.25rem;
  line-height: 1;
}
.card.favorite .card-favorite { color: var(--warning); border-color: var(--warning); }
.card.owner-favorite-card::after {
  content: "FEATURED";
  position: absolute;
  left: .45rem;
  top: .45rem;
  padding: .18rem .42rem;
  border-radius: 999px;
  background: #4d3c12e8;
  color: var(--warning);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .05em;
  pointer-events: none;
}
.card.active { outline: 2px solid var(--accent); border-color: var(--accent); }
.raw-link {
  display: inline-block;
  margin-top: .75rem;
  padding: .6rem .8rem;
  border: 1px solid var(--accent);
  border-radius: .55rem;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.raw-link:hover { background: #123149; }
.card-raw {
  position: absolute;
  right: .45rem;
  bottom: .45rem;
  z-index: 3;
  padding: .25rem .5rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: #07111fe8;
  color: var(--accent);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.2;
}
.card-raw:hover, .card-raw:focus { background: #123149; outline: 1px solid var(--accent); }
.error { color: #ff9a9a; }
@media (max-width: 900px) {
  .controls { grid-template-columns: 1fr 1fr; }
  .favorites-control, .stepper { align-self: stretch; }
}
@media (max-width: 760px) {
  header { align-items: flex-start; }
  .controls { grid-template-columns: 1fr; align-items: stretch; }
  .stepper { justify-content: space-between; }
  .scrubber { grid-column: auto; }
  .viewer { grid-template-columns: 1fr; }
  .viewer figure, .viewer article { min-height: 0; }
  .viewer figure { aspect-ratio: 1; }
}

.event-actions { display:flex; flex-wrap:wrap; gap:.6rem; margin:0 0 .75rem; }
.context-btn { border-color:var(--accent); color:var(--accent); }
.context-status { min-height:1.4em; color:var(--muted); font-size:.9rem; }
.context-dialog { width:min(94vw,1120px); max-height:94vh; padding:0; border:1px solid var(--line); border-radius:1rem; background:var(--panel); color:var(--text); }
.context-dialog::backdrop { background:rgba(0,0,0,.78); }
.context-dialog-head { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.75rem 1rem; }
.context-dialog video { display:block; width:100%; max-height:78vh; background:#000; }
.context-dialog p { margin:.75rem 1rem 1rem; color:var(--muted); }

.frames-image { display:block; width:100%; height:auto; max-height:78vh; object-fit:contain; background:#000; }
.frames-stepper { justify-content:center; padding:.75rem 1rem 0; }

.zoom-stage { position:relative; overflow:hidden; display:grid; place-items:center; width:100%; background:#000; }
.main-zoom-stage { height:100%; min-height:360px; }
.context-zoom-stage, .frames-zoom-stage { max-height:78vh; }
.zoomable-media { user-select:none; touch-action:none; will-change:transform; }
.zoom-toolbar { display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem; width:100%; padding:.55rem .7rem; background:#0b1726; border-top:1px solid var(--line); }
.zoom-toolbar button { padding:.4rem .65rem; font-size:.82rem; }
.zoom-toolbar button[aria-pressed="true"] { border-color:var(--accent); color:var(--accent); outline:1px solid var(--accent); }
@media (max-width:760px) { .main-zoom-stage { min-height:0; aspect-ratio:1; } }

/* HomeOps zoom/pan */
.zoom-stage{position:relative;overflow:hidden;display:grid;place-items:center;width:100%;background:#000}
.main-zoom-stage{height:100%;min-height:360px}
.context-zoom-stage{max-height:78vh}
.zoomable-media{user-select:none;touch-action:none;will-change:transform}
.zoom-toolbar{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;width:100%;padding:.55rem .7rem;background:#0b1726;border-top:1px solid var(--line)}
.zoom-toolbar button{padding:.4rem .65rem;font-size:.82rem}
.zoom-toolbar button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);outline:1px solid var(--accent)}
.context-zoom-stage video{display:block;width:100%;max-height:78vh;background:#000}
@media(max-width:760px){.main-zoom-stage{min-height:0;aspect-ratio:1}}


/* detection target marker */
.detection-target {
  position:absolute;
  width:30px;
  height:30px;
  margin:0;
  border:2px solid #ffc857;
  border-radius:50%;
  transform:translate(-50%,-50%);
  z-index:6;
  pointer-events:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.75),0 0 12px rgba(255,200,87,.65);
}
.detection-target::before,.detection-target::after {
  content:"";
  position:absolute;
  background:#ffc857;
  box-shadow:0 0 0 1px rgba(0,0,0,.45);
}
.detection-target::before { width:2px; height:42px; left:12px; top:-8px; }
.detection-target::after { width:42px; height:2px; left:-8px; top:12px; }
.zoom-toolbar button[data-target] { border-color:var(--warning); color:var(--warning); }
.zoom-toolbar button[data-target]:disabled { opacity:.4; }