:root{--primary-color: #3b82f6;--danger-color: #ef4444;--bg-dark: #0f172a;--card-bg: #1e293b}body{margin:0;font-family:Inter,system-ui,-apple-system,sans-serif;background-color:var(--bg-dark);color:#f8fafc}.encoder-container{max-width:1000px;margin:0 auto;padding:2rem}.header{text-align:center;margin-bottom:2rem}.text-gradient{background:linear-gradient(135deg,#60a5fa,#3b82f6);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.video-preview{position:relative;width:100%;aspect-ratio:16 / 9;background:#000;border-radius:1rem;overflow:hidden;border:1px solid rgba(255,255,255,.1)}video{width:100%;height:100%;object-fit:cover}.overlay-status{position:absolute;top:1rem;left:1rem;background:#0009;padding:.5rem 1rem;border-radius:.5rem;font-weight:700;display:flex;align-items:center;gap:.5rem}.live-dot{width:10px;height:10px;background-color:var(--danger-color);border-radius:50%;box-shadow:0 0 10px var(--danger-color);animation:pulse 1.5s infinite}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.controls{background:var(--card-bg);padding:1.5rem;border-radius:1rem;margin-top:1.5rem;display:flex;flex-direction:column;gap:1rem}.status-info,.uuid-info{display:flex;align-items:center;gap:.5rem}.label{color:#94a3b8;font-size:.9rem;text-transform:uppercase;font-weight:600}.uuid-text{font-family:monospace;background:#ffffff0d;padding:.2rem .5rem;border-radius:.3rem;color:#60a5fa}.actions{display:flex;justify-content:center;margin-top:.5rem;gap:1rem}.btn{padding:.8rem 2rem;border-radius:.6rem;font-weight:600;cursor:pointer;border:none;transition:all .2s}.btn-primary{background-color:var(--primary-color);color:#fff}.btn-primary:hover{background-color:#2563eb;transform:translateY(-2px)}.btn-danger{background-color:var(--danger-color);color:#fff}.btn-danger:hover{background-color:#dc2626;transform:translateY(-2px)}.text-success{color:#10b981}.text-warning{color:#f59e0b}