:root {
  --bg: #0e1116; --panel: #171c24; --panel2: #1f2630; --line: #2a323d;
  --fg: #e8edf3; --muted: #93a1b0; --accent: #28c76f; --accent2: #1f9bcf;
  --warn: #ff9f43; --bad: #ea5455;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg);
  font: 15px/1.45 -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; }
a { color: inherit; text-decoration: none; }

.wrap { max-width: 760px; margin: 0 auto; padding: 16px; }
header.top { position: sticky; top: 0; background: var(--bg); padding: 14px 16px 8px;
  border-bottom: 1px solid var(--line); z-index: 5; }
h1 { font-size: 18px; margin: 0 0 10px; }
.sub { color: var(--muted); font-size: 13px; }

input.search { width: 100%; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel); color: var(--fg); font-size: 15px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel); color: var(--muted); font-size: 12px; cursor: pointer; }
.chip.on { background: var(--accent); color: #06210f; border-color: var(--accent); font-weight: 600; }

.list { display: grid; gap: 8px; padding: 12px 0 40px; }
.card { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line); cursor: pointer; }
.card:active { background: var(--panel2); }
.card .name { font-weight: 600; }
.card .meta { color: var(--muted); font-size: 12px; margin-top: 2px; }
.badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line);
  color: var(--muted); white-space: nowrap; }
.badge.side { color: var(--accent2); border-color: var(--accent2); }
.badge.front { color: var(--accent); border-color: var(--accent); }
.grow { flex: 1; min-width: 0; }
.rel { font-size: 11px; color: var(--muted); }
.rel.reliable { color: var(--accent); }
.rel.experimental, .rel.marginal { color: var(--warn); }
.empty { color: var(--muted); text-align: center; padding: 40px 0; }

/* session page */
.stage { position: fixed; inset: 0; background: #000; overflow: hidden; }
/* cover so the camera fills the screen (natural full-bleed camera look). The
   stream's aspect is requested to match the screen orientation (see session.js),
   so cover fills without big letterbox bars on phone or desktop. The overlay
   canvas uses the same object-fit + intrinsic size, so the skeleton stays aligned.
   (Display mode is cosmetic — MediaPipe always processes the full video frame.) */
video#cam { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scaleX(-1); }   /* mirror display only */
canvas#overlay { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scaleX(-1); }
.hud { position: absolute; inset: 0; pointer-events: none; display: flex; flex-direction: column;
  justify-content: space-between; padding: 16px; }
.hud .top, .hud .bottom { display: flex; gap: 10px; align-items: flex-start; }
.hud .pill { background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px; padding: 8px 12px; backdrop-filter: blur(4px); }
.reps { font-size: 44px; font-weight: 800; line-height: 1; }
.reps small { font-size: 16px; color: var(--muted); font-weight: 600; }
.angle-hint { color: var(--accent2); font-weight: 700; }
.form-ok { color: var(--accent); } .form-bad { color: var(--bad); }
.state-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.15); overflow: hidden; margin-top: 8px; }
.state-bar > i { display: block; height: 100%; background: var(--accent); width: 0%; }
.center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 14px; text-align: center; padding: 24px; pointer-events: auto; }
button.go { pointer-events: auto; background: var(--accent); color: #06210f; border: 0; font-weight: 700;
  padding: 14px 22px; border-radius: 12px; font-size: 16px; }
button.ghost { background: transparent; color: var(--fg); border: 1px solid var(--line);
  padding: 10px 16px; border-radius: 10px; }
.banner { position: absolute; left: 0; right: 0; top: 0; text-align: center; padding: 10px;
  background: var(--accent); color: #06210f; font-weight: 700; transform: translateY(-100%);
  transition: transform .3s; }
.banner.show { transform: translateY(0); }
.toast { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: rgba(0,0,0,.7); border: 1px solid var(--line); padding: 8px 14px; border-radius: 10px;
  color: var(--fg); font-size: 13px; }

/* tutorial picture-in-picture (bottom-right, over the camera) */
.pip { position: absolute; right: 12px; bottom: 12px; width: 34%; max-width: 200px;
  aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; z-index: 6;
  border: 1px solid rgba(255,255,255,.28); background: #000;
  box-shadow: 0 4px 16px rgba(0,0,0,.55); }
.pip.big { width: 62%; max-width: 360px; }
.pip video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pip-label { position: absolute; left: 6px; top: 5px; font-size: 10px; color: #fff;
  background: rgba(0,0,0,.5); padding: 1px 6px; border-radius: 6px; pointer-events: none; }
.pip-close { position: absolute; right: 3px; top: 3px; width: 22px; height: 22px; border: 0;
  border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 15px; line-height: 1;
  cursor: pointer; padding: 0; }
.pip-fallback { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; background: #11161d;
  color: var(--muted); font-size: 12px; }
.pip-fallback-icon { font-size: 22px; color: var(--accent); }

/* completion page */
.done-screen { position: fixed; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; text-align: center;
  padding: 24px; background: var(--bg); }
.spinner { width: 54px; height: 54px; border-radius: 50%;
  border: 5px solid var(--line); border-top-color: var(--accent);
  animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.done-title { font-size: 22px; font-weight: 800; }
.done-sub { font-size: 32px; font-weight: 800; color: var(--accent); }