* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: #111; color: #eee; font-family: system-ui, sans-serif; }

/* #login-view/#viewer-view below set their own `display: flex`, which beats
   the browser's default [hidden] { display: none } rule on specificity -
   without this, toggling .hidden via JS has no visual effect at all. */
[hidden] { display: none !important; }

#login-view {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#login-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 20rem;
  padding: 2rem;
  background: #1c1c1c;
  border-radius: 0.5rem;
}
#login-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; }
#login-form input { padding: 0.5rem; border-radius: 0.25rem; border: 1px solid #444; background: #0c0c0c; color: #eee; }
#login-form button { padding: 0.6rem; border: none; border-radius: 0.25rem; background: #3a6; color: #fff; cursor: pointer; }
.error { color: #f66; font-size: 0.85rem; }

#viewer-view { height: 100%; display: flex; flex-direction: column; }
#toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  background: #1c1c1c;
}
#remote-video {
  flex: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  outline: none;
}