style.css

:root {
  --bg:#f6f7fb; --panel:#fff; --accent:#0a84ff; --accent2:#30d158;
  --text:#111; --muted:#6e6e73; --border:#d2d2d7; --radius:14px;
  --shadow:0 8px 20px rgba(0,0,0,.08);
}

* { box-sizing:border-box; margin:0; padding:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }

body { background:var(--bg); color:var(--text); }
.wrap { max-width:1000px; margin:40px auto; padding:0 20px; }

header { display:flex; align-items:center; gap:10px; margin-bottom:30px; }
.logo { width:40px; height:40px; border-radius:12px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:var(--shadow); }
h1 { font-size:22px; font-weight:600; }

.panel { background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; margin-bottom:30px; }
h2 { margin-bottom:16px; font-size:18px; font-weight:600; }

.grid { display:grid; grid-template-columns:1.3fr 1fr; gap:18px; }
@media (max-width:900px){ .grid { grid-template-columns:1fr; } }

.card { padding:16px; border-radius:var(--radius); border:1px solid var(--border);
  background:var(--panel); box-shadow:var(--shadow); }
.card h3 { margin-bottom:10px; font-size:17px; }

.video-wrap { position:relative; border-radius:10px; overflow:hidden; background:#000; }
#stream { display:block; width:100%; height:auto; }

.row { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:10px; }

button { border:none; border-radius:10px; padding:8px 14px; cursor:pointer;
  transition:.2s; font-weight:500; }
.primary { background:var(--accent); color:#fff; }
.secondary { background:#f1f1f1; color:#111; }
.danger { background:#ff3b30; color:#fff; }

textarea { width:100%; border:1px solid var(--border); border-radius:10px;
  padding:10px; resize:vertical; min-height:120px; font:inherit; }
.status { font-size:13px; color:var(--muted); margin-top:6px; }