  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      background: #0a0a0a;
      color: #eee;
      font-family: system-ui, -apple-system, sans-serif;
      display: flex;
      flex-direction: column;
      height: 100dvh;
    }
    video {
      width: 100%;
      flex: 1;
      background: #000;
      object-fit: cover;
    }
    .bar {
      padding: 12px 16px;
      display: flex;
      gap: 10px;
      background: #111;
    }
    button {
      flex: 1;
      padding: 14px;
      font-size: 1.05rem;
      font-weight: 600;
      border: none;
      border-radius: 10px;
      cursor: pointer;
    }
    #start { background: #16a34a; color: white; }
    #stop  { background: #dc2626; color: white; }
    button:disabled { opacity: 0.4; cursor: not-allowed; }
    #status {
      padding: 8px 16px 4px;
      font-size: 0.9rem;
      opacity: 0.85;
      text-align: center;
    }
    .name-row {
      padding: 0 16px 14px;
      font-size: 0.8rem;
      opacity: 0.7;
      text-align: center;
    }
    .name-row button {
      flex: none;
      background: none;
      color: #60a5fa;
      padding: 2px 6px;
      font-size: 0.8rem;
      font-weight: 500;
      text-decoration: underline;
    }
    input[type="submit"] {
     background-color: #4CAF50; /* Green background */
     color: black;              /* black text color */
     border: none;              /* Removes default border */
     padding: 10px 20px;        /* Adds space inside the button */
     cursor: pointer;           /* Changes mouse cursor to a hand */
   }
   a {
           color: yellow;
   }
  </style>
