* { margin: 0; padding: 0; box-sizing: border-box; font-family: system-ui, sans-serif; }

body {
  background: #222;
  color: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 16px;
}

.player { position: relative; width: 100%; max-width: 1280px; }

#video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 10px;
  box-shadow:
    0 0 10.4px rgba(0, 0, 0, 0.045),
    0 0 25.1px rgba(0, 0, 0, 0.065),
    0 0 47.2px rgba(0, 0, 0, 0.08),
    0 0 84.2px rgba(0, 0, 0, 0.095),
    0 0 157.5px rgba(0, 0, 0, 0.115),
    0 0 377px rgba(0, 0, 0, 0.16);
}

.msg {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7); padding: 10px 16px; border-radius: 8px;
  font-size: 14px; text-align: center; max-width: 90%;
}

.index { width: 100%; max-width: 520px; }
.index h1 { font-size: 22px; font-weight: 600; margin-bottom: 16px; }
.cards { display: grid; gap: 10px; }
.card {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: 10px; background: #2d2d2d;
  color: inherit; text-decoration: none;
}
.card:hover { background: #363636; }
.card .name { font-weight: 500; }
.card .meta { font-size: 13px; color: #aaa; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #666; }
.dot.ok { background: #3c3; }
.dot.wait { background: #e8b730; }
.dot.bad { background: #e44; }