body { margin: 0; padding: 0; font-family: 'Segoe UI', sans-serif; background: #111; color: #eee; text-align: center; }

h1 { color: #0f0; margin-top: 20px; }

video { width: 95%; max-width: 640px; margin: 10px auto; border: 4px solid #0f0; border-radius: 12px; background: #000; box-shadow: 0 0 20px #0f08; }

.controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 20px 0; }

input, button, select { padding: 10px 14px; font-size: 16px; border-radius: 8px; border: none; outline: none; }

input { background: #222; color: #eee; border: 1px solid #444; }

button { background: #0f0; color: #000; cursor: pointer; transition: background 0.2s; }

button:hover { background: #0c0; }

select { background: #222; color: #eee; border: 1px solid #444; }

#status { margin-top: 16px; font-weight: bold; color: #0f0; }

.badge { padding: 8px 16px; background: #333; border: 1px solid #555; border-radius: 8px; cursor: pointer; display: inline-block; margin-top: 10px; color: #ccc; transition: all 0.3s; }

.badge:hover { background: #444; border-color: #888; }