/* Classic black/white theme (mobile-first) */
:root {
  --app-bg: #ffffff;
  --app-bg-alt: #f8f9fa;
  --app-text: #111111;
  --app-muted: #6c757d;
  --app-border: #dee2e6;
  --app-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  --app-radius: 14px;
}

html, body {
  height: 100%;
}

body {
  background: var(--app-bg-alt);
  color: var(--app-text);
}

.app-nav {
  background: #111111 !important;
  border-bottom: 1px solid #000000;
}

.app-nav .text-muted-soft {
  color: rgba(255, 255, 255, 0.75) !important;
}

.app-card {
  background: var(--app-bg);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow);
}

.app-card .card-header {
  background: var(--app-bg);
  border-bottom: 1px solid var(--app-border);
}

.btn-brand {
  background: #111111;
  border: 1px solid #111111;
  color: #ffffff;
}

.btn-brand:hover,
.btn-brand:focus {
  background: #000000;
  border-color: #000000;
  color: #ffffff;
}

.text-muted-soft {
  color: var(--app-muted) !important;
}

/* QR scanner stage */
.qr-stage {
  background: #000000;
  border-radius: var(--app-radius);
  border: 1px solid var(--app-border);
  overflow: hidden;
}