:root {
  color-scheme: dark;
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
  background: #0d1117;
  color: #e6edf3;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
button, input { font: inherit; }
button {
  border: 1px solid #30363d;
  border-radius: 8px;
  background: #21262d;
  color: #e6edf3;
  padding: 9px 14px;
  cursor: pointer;
}
button:hover { background: #30363d; }
button:disabled { opacity: 0.5; cursor: default; }
main { max-width: 1500px; margin: 0 auto; padding: 20px; }
header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
h1 { margin: 0 0 4px; font-size: 24px; }
h2 { margin: 18px 0 10px; font-size: 15px; }
p { margin: 0; }
#status, .muted { color: #8b949e; }
.panel { background: #161b22; border: 1px solid #30363d; border-radius: 12px; padding: 18px; }
.login-panel { max-width: 460px; display: grid; gap: 14px; }
label { display: grid; gap: 6px; color: #c9d1d9; }
input { border: 1px solid #30363d; border-radius: 8px; padding: 10px; background: #0d1117; color: #fff; }
.session { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; }
.desktop-panel { position: relative; min-height: 520px; display: grid; place-items: center; background: #000; border: 1px solid #30363d; border-radius: 12px; overflow: hidden; }
video { width: 100%; height: 100%; object-fit: contain; display: none; outline: none; }
video.active { display: block; }
#empty-video { color: #6e7681; }
.rate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
dl { display: grid; grid-template-columns: 90px 1fr; gap: 7px; margin: 0; }
dt { color: #8b949e; }
dd { margin: 0; }
.hidden { display: none !important; }
@media (max-width: 850px) {
  .session { grid-template-columns: 1fr; }
  .desktop-panel { min-height: 320px; }
}