* { box-sizing: border-box; }
:root {
  --bg: #0b1220;
  --fg: #e5e7eb;
  --muted: #9ca3af;
  --card: #111827;
  --accent: #34d399;
}
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--fg); font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji'; }
header, footer { padding: .75rem 1rem; background: var(--card); display:flex; align-items:center; gap: .75rem; }
header h1 { font-size: 1.1rem; margin: 0; flex:1; }
#installBtn { border: 0; padding: .5rem .75rem; border-radius: .75rem; background: var(--accent); color: #03281f; font-weight: 700; cursor:pointer; }
main { display: grid; grid-template-columns: 1fr 320px; gap: 1rem; padding: 1rem; }
#video-wrap { position: relative; width: 100%; max-height: calc(100vh - 150px); overflow: hidden; border-radius: 1rem; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
video, canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#panel { background: var(--card); border-radius: 1rem; padding: 1rem; display: flex; flex-direction: column; gap: .5rem; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.row { display:flex; align-items:center; gap:.5rem; }
.row label { width: 140px; color: var(--muted); }
details { margin-top: .5rem; }
summary { cursor: pointer; }
ul { margin: .25rem 0 0; padding-left: 1rem; }
footer small { color: var(--muted); }
@media (max-width: 900px) {
  main { grid-template-columns: 1fr; }
  #panel { order: -1; }
}