:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  background:#050505;
  color:#f4f4f4;
}
* { box-sizing:border-box; }
html,body { margin:0; background:#050505; min-height:100%; }
body { min-height:100vh; min-height:100dvh; }
button { font:inherit; }
.app {
  width:min(100%,980px);
  margin:0 auto;
  padding:max(14px,env(safe-area-inset-top)) 14px max(40px,env(safe-area-inset-bottom));
}
.topbar {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:12px;
}
h1 { margin:0; font-size:clamp(21px,5vw,31px); letter-spacing:-.02em; }
.topbar p { margin:4px 0 0; color:#999; font-size:12px; }
.platform {
  border:1px solid #333; border-radius:999px; padding:7px 10px;
  font-size:12px; font-weight:800;
}
.viewer {
  position:relative; width:100%; overflow:hidden;
  background:#000; border:1px solid #242424; border-radius:16px;
  min-height:230px;
}
#camera { display:block; width:100%; height:auto; background:#000; }
#recordCanvas {
  position:absolute; width:1px; height:1px; opacity:.001;
  pointer-events:none; left:-9999px; top:-9999px;
}
.overlay {
  position:absolute; inset:0; display:grid; place-content:center;
  text-align:center; padding:20px; background:rgba(0,0,0,.72);
}
.overlay.hidden { display:none; }
.overlay span { margin-top:5px; color:#aaa; font-size:12px; }

.readout {
  display:grid; grid-template-columns:2fr repeat(5,1fr);
  gap:8px; margin-top:8px;
}
.angle-box,.stat,.quality,.storage-card,.export-card,.sessions-card,.info,.status {
  background:#101010; border:1px solid #242424; border-radius:14px;
}
.angle-box,.stat { padding:12px; }
.kicker,.stat span,.quality-meta span {
  display:block; color:#8b8b8b; font-size:9px; font-weight:800;
  letter-spacing:.11em; text-transform:uppercase;
}
.angle-box strong {
  display:block; direction:ltr; text-align:right; margin-top:3px;
  font-variant-numeric:tabular-nums; font-size:clamp(34px,8vw,58px); line-height:1;
}
.stat strong {
  display:block; direction:ltr; text-align:right; margin-top:5px;
  font-size:13px; font-variant-numeric:tabular-nums;
}
.quality {
  margin-top:8px; padding:12px;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.quality strong { display:block; margin-top:4px; font-size:14px; }
.quality-meta { display:flex; flex-wrap:wrap; gap:10px; direction:ltr; }
.good { color:#9ce3ad !important; }
.warn { color:#ffd37a !important; }
.bad { color:#ff9696 !important; }

.controls {
  margin-top:9px; display:grid; grid-template-columns:1fr 1fr auto; gap:8px;
}
.btn {
  appearance:none; border:0; border-radius:13px; padding:14px 14px;
  font-size:15px; font-weight:800; cursor:pointer;
}
.btn:disabled { opacity:.35; cursor:not-allowed; }
.primary { background:#fff; color:#000; }
.secondary { background:#242424; color:#fff; }
.danger { background:#681818; color:#fff; }

.storage-card,.export-card,.sessions-card,.info,.status {
  margin-top:8px; padding:12px;
}
.storage-card strong,.export-card strong,.sessions-card strong {
  display:block; margin-top:4px; font-size:14px;
}
.storage-card small,.export-card small {
  display:block; margin-top:4px; color:#8d8d8d; font-size:11px; line-height:1.4;
}
.export-card {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.hidden { display:none !important; }

.sessions-head {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.mini-btn,.session-btn {
  border:1px solid #3b3b3b; background:#181818; color:#fff;
  border-radius:10px; padding:8px 10px; font-size:12px; font-weight:700;
}
.sessions-list { margin-top:9px; display:grid; gap:7px; }
.session-row {
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; border-top:1px solid #262626; padding-top:8px;
}
.session-row:first-child { border-top:0; padding-top:0; }
.session-meta { min-width:0; }
.session-meta strong { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.session-meta small { display:block; color:#888; margin-top:3px; }
.muted { color:#777; font-size:12px; }
.info,.status { color:#ccc; font-size:12px; line-height:1.6; }
.status #statusText { margin-top:4px; }

@media (max-width:760px) {
  .readout { grid-template-columns:repeat(3,1fr); }
  .angle-box { grid-column:1/-1; }
  .quality { align-items:flex-start; flex-direction:column; }
  .controls { grid-template-columns:1fr 1fr; }
  #stopBtn { grid-column:1/-1; }
  .export-card { align-items:stretch; flex-direction:column; }
  #exportBtn { width:100%; }
}