:root{
  --bg:#14171c; --card:#1e232b; --line:#2f3742; --fg:#e8ecf1; --dim:#98a4b3;
  --ok:#4ade80; --warn:#fbbf24; --bad:#f87171; --accent:#f7a600;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  padding:12px; padding-bottom:32px;
}
header{margin:4px 0 14px}
.headrow{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
h1{font-size:20px; margin:0}
button.linklike{
  width:auto; flex:0 0 auto; background:transparent; color:var(--accent);
  border:1px solid var(--line); padding:8px 12px; font-size:13px; border-radius:8px;
}
h2{font-size:15px; margin:0 0 8px; text-transform:uppercase; letter-spacing:.06em; color:var(--dim)}
p{margin:0 0 10px}
.dim{color:var(--dim)}
.small{font-size:13px}
.hide{display:none !important}

.card{
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:14px; margin-bottom:12px;
}

button{
  font:inherit; font-weight:600; color:var(--fg); background:#333b47;
  border:0; border-radius:8px; padding:14px 16px; cursor:pointer; width:100%;
}
button.primary{background:var(--accent); color:#14171c}
button:disabled{opacity:.4; cursor:not-allowed}
.buttons{display:flex; flex-direction:column; gap:8px; margin-top:10px}

.videowrap{background:#000; border-radius:8px; overflow:hidden}
video{width:100%; display:block; aspect-ratio:3/4; object-fit:contain; background:#000}
img#shot{width:100%; display:block; border-radius:8px; background:#000}

.hint{margin:10px 0 0; font-size:13px; color:var(--dim)}
.status{font-size:14px}
.status.ok{border-color:#2b5b3c}
.status.bad{border-color:#5b2b2b}
.ok{color:var(--ok)} .warn{color:var(--warn)} .bad{color:var(--bad)}
footer{margin-top:6px; font-size:12px; text-align:center}