:root {
  --accent: #f97316;
  --accent-hover: #ea580c;
  --hazard-a: #fbbf24;
  --hazard-b: #111827;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(1200px 400px at 10% -10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent),
    var(--bs-body-bg);
}

.hazard-bar {
  height: 6px;
  background: repeating-linear-gradient(
    45deg,
    var(--hazard-a) 0 14px,
    var(--hazard-b) 14px 28px
  );
}

.app-nav {
  background: color-mix(in srgb, var(--bs-body-bg) 92%, var(--accent));
}

.brand-mark {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: var(--accent);
  color: #111;
}

.btn-accent {
  --bs-btn-color: #111;
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-color: #111;
  --bs-btn-hover-bg: var(--accent-hover);
  --bs-btn-hover-border-color: var(--accent-hover);
  --bs-btn-active-color: #111;
  --bs-btn-active-bg: var(--accent-hover);
  --bs-btn-active-border-color: var(--accent-hover);
  font-weight: 600;
}

.source-switch .btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #111;
}

.status-banner {
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.7rem 1rem;
}

.status-banner.idle {
  background: color-mix(in srgb, var(--bs-secondary-bg) 80%, #64748b);
  color: var(--bs-body-color);
}

.status-banner.safe {
  background: #15803d;
  color: #fff;
}

.status-banner.bad {
  background: #b91c1c;
  color: #fff;
}

.dropzone {
  border: 1px dashed color-mix(in srgb, var(--bs-border-color) 70%, var(--accent));
  border-radius: 0.75rem;
  padding: 1.1rem 0.75rem;
  text-align: center;
  cursor: pointer;
  color: var(--bs-secondary-color);
  background: color-mix(in srgb, var(--bs-body-bg) 80%, var(--bs-secondary-bg));
}

.dropzone.is-on,
.dropzone:hover {
  border-color: var(--accent);
  color: var(--bs-body-color);
}

.stage {
  min-height: 460px;
  background: #0b0f14;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

[data-bs-theme="light"] .stage {
  background: #1c2430;
}

.stage img,
.stage video {
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  display: block;
}

.stage-empty {
  color: #94a3b8;
  text-align: center;
  padding: 2rem;
}

.stage-empty i {
  font-size: 2.4rem;
  display: block;
  margin-bottom: 0.6rem;
  color: var(--accent);
}

.metric-num {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.1;
}

.metric-bad .metric-num { color: #ef4444; }
.metric-ok .metric-num { color: #22c55e; }

.log-box {
  min-height: 8rem;
  max-height: 14rem;
  overflow: auto;
  font-size: 0.75rem;
  white-space: pre-wrap;
  color: var(--bs-secondary-color);
}

.legend span { margin-left: 0.75rem; }