:root {
  --bg: #0b0b10;
  --card: #151521;
  --text: #f1f1f1;
  --muted: #9aa0a6;
  --accent: #4f8cff;
  --danger: #ff5d5d;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg); color: var(--text);
}
header, footer {
  padding: 16px 20px; background: #0f0f18; border-bottom: 1px solid #232338;
}
header h1 { margin: 0 0 8px; font-size: 20px; }
nav a { color: var(--accent); text-decoration: none; margin-right: 12px; }
main { padding: 20px; max-width: 980px; margin: 0 auto; }
.card {
  background: var(--card); border: 1px solid #232338; border-radius: 10px;
  padding: 16px; margin-bottom: 18px;
}
.capture { display: grid; gap: 12px; }
video, .preview { width: 100%; border-radius: 8px; background:#000; }
.capture-controls { display: flex; gap: 10px; flex-wrap: wrap; }
button, .file-btn {
  background: #202033; border: 1px solid #2b2b44; color: var(--text);
  padding: 10px 14px; border-radius: 8px; cursor:pointer;
}
button.primary { background: var(--accent); border-color: var(--accent); color:#fff; }
button.danger { background: var(--danger); border-color: var(--danger); color:#000; }
.file-btn { display:inline-flex; align-items:center; gap:8px; }
.file-btn input { display:none; }
.hidden { display:none; }
.muted { color: var(--muted); font-size: 14px; }
.mono { white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background:#101019; padding:10px; border-radius:8px; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse: collapse; }
th, td { border-bottom:1px solid #2b2b44; padding:8px; text-align:left; white-space:nowrap; }
.toolbar { display:flex; gap:8px; margin-bottom:10px; flex-wrap: wrap; }
input[type="file"], input[type="text"], input[type="search"], input[type="date"] {
  background:#202033; border:1px solid #2b2b44; color:var(--text); padding:8px 10px; border-radius:8px;
}