/* Minimal, clean UI */ 
:root {
  --bg: #0b1018;
  --card: #121826;
  --muted: #8aa0b4;
  --text: #f4f7fb;
  --accent: #5aa9e6;
  --ok: #22c55e;
  --warn: #f59e0b;
  --danger: #ef4444;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif; }

.container { width: min(1100px, 92vw); margin: 24px auto; }
header h1 { margin: 0 0 8px; font-size: 28px; }
header p { margin: 0; color: var(--muted); }

.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 16px; }

.card { display: block; background: linear-gradient(135deg, #121826, #171f30); border: 1px solid #202a3c; padding: 18px; border-radius: 16px; text-decoration: none; color: inherit; box-shadow: 0 10px 30px rgba(0,0,0,0.25); transition: transform .2s ease, border-color .2s ease; }
.card:hover { transform: translateY(-2px); border-color: var(--accent); }
.card h2 { margin: 0 0 8px; font-size: 22px; }
.card p { margin: 0; color: var(--muted); }

.toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
button, .btn { background: var(--accent); color: #fff; border: none; padding: 10px 14px; border-radius: 10px; cursor: pointer; font-weight: 600; }
button.ghost, .btn.ghost { background: transparent; border: 1px solid #2a3a55; color: var(--text); }
button:disabled { opacity: .6; cursor: not-allowed; }

.panel { background: var(--card); border: 1px solid #202a3c; border-radius: 16px; padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); }

.row { display:flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.col { flex: 1 1 320px; }

label { display:block; margin: 8px 0 6px; color: var(--muted); }
input, select { width: 100%; padding: 10px 12px; background: #0f1520; border: 1px solid #243045; color: var(--text); border-radius: 10px; }
table { width: 100%; border-collapse: collapse; }
th, td { border-bottom: 1px solid #223049; padding: 10px 8px; text-align: left; }
th { color: var(--muted); font-weight: 600; }
tr:last-child td { border-bottom: none; }

.badge { display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:12px; padding: 4px 8px; border-radius: 999px; border:1px solid #2a3a55; }
.badge.ok { color: #bbf7d0; border-color: #14532d; background: #052e18; }
.badge.warn { color: #fef3c7; border-color: #78350f; background: #2a1603; }
.badge.danger { color: #fee2e2; border-color: #7f1d1d; background: #2a0e0e; }

.muted { color: var(--muted); }

.video-wrap { position: relative; }
video, canvas { width: 100%; border-radius: 12px; border:1px solid #243045; background: #000; }
.overlay { position: absolute; inset: 0; pointer-events: none; }

.kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.kpi .box { background: #0f1520; border:1px solid #203048; border-radius: 12px; padding: 12px; }
.kpi .title { color: var(--muted); font-size: 12px; }
.kpi .value { font-size: 22px; font-weight: 800; }

footer { margin: 24px 0 32px; }
small { color: var(--muted); }
.toast { position: fixed; right: 16px; bottom: 16px; padding: 10px 14px; background: #122037; border: 1px solid #2a3a55; border-radius: 12px; display:none; }
.toast.show { display:block; }