static/css/style.css

/* Dark theme, metric cards, terminal styles */
/* ── Base ─────────────────────────────────────────────────────────────────── */
body          { background: #0d1117; font-family: 'Segoe UI', system-ui, sans-serif; }
#main-nav     { background: #0d1117 !important; }

.active-link  { background: rgba(13,110,253,.15); color: #fff !important; }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card         { background: #161b22; border-radius: 12px; }
.bg-dark-subtle { background: #161b22 !important; }

/* ── Step bar ────────────────────────────────────────────────────────────── */
.step-bar     { padding: 8px 0; }
.step-item    { display: flex; align-items: center; gap: 6px; color: #666; }
.step-item.active  { color: #58a6ff; }
.step-num     { width: 24px; height: 24px; border-radius: 50%; background: #21262d;
                display: flex; align-items: center; justify-content: center;
                font-size: .75rem; font-weight: 700; }
.step-item.active .step-num { background: #58a6ff; color: #000; }
.step-label   { font-size: .8rem; font-weight: 600; }
.step-line    { height: 1px; background: #21262d; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero-banner  { background: linear-gradient(135deg, #0d1117 0%, #0d2137 100%);
                border: 1px solid #21262d; }

/* ── Step cards ──────────────────────────────────────────────────────────── */
.step-card    { border: 1px solid #21262d; transition: transform .2s, border-color .2s; }
.step-card:hover { transform: translateY(-3px); }
.step-card-1:hover { border-color: #0d6efd; }
.step-card-2:hover { border-color: #ffc107; }
.step-card-3:hover { border-color: #198754; }
.step-icon    { font-size: 2.5rem; }

/* ── Metric card ─────────────────────────────────────────────────────────── */
.metric-card  { background: #0d1117; border-radius: 10px; padding: 1rem; text-align: center; }
.metric-value { font-size: 1.6rem; font-weight: 700; font-family: 'Courier New', monospace; }

/* ── Log terminal ────────────────────────────────────────────────────────── */
.log-terminal {
  background: #010409;
  color: #3fb950;
  font-family: 'Courier New', Consolas, monospace;
  font-size: .8rem;
  height: 220px;
  overflow-y: auto;
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid #21262d;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ── Drop zone ───────────────────────────────────────────────────────────── */
.drop-zone {
  border: 2px dashed #30363d;
  border-radius: 12px;
  padding: 3rem;
  text-align: center;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.drop-zone:hover,
.drop-zone.drag-over {
  background: rgba(13,110,253,.07);
  border-color: #0d6efd;
}

/* ── Webcam container ─────────────────────────────────────────────────────── */
.webcam-container {
  position: relative;
  background: #010409;
  border-radius: 8px;
  overflow: hidden;
  min-height: 360px;
}
#webcam-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

/* ── Nav tabs ────────────────────────────────────────────────────────────── */
.nav-tabs .nav-link        { color: #8b949e; border: none; padding: .5rem 1.25rem; }
.nav-tabs .nav-link:hover  { color: #fff; }
.nav-tabs .nav-link.active {
  color: #fff;
  background: #21262d;
  border-radius: 6px 6px 0 0;
}

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0d1117; }
::-webkit-scrollbar-thumb { background: #30363d; border-radius: 3px; }