:root {
  --page-bg: #0b1015;
  --card-bg: #111827;
  --muted: #94a3b8;
  --ring: #1f2937;
}

body { background: linear-gradient(180deg, #0b1015, #0f172a); color: #e5e7eb; }
.navbar-brand { letter-spacing: .5px; font-weight: 700; }
.card { background-color: var(--card-bg); border: 1px solid var(--ring); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.form-label { color: #cbd5e1; font-weight: 600; }
.subtle { color: var(--muted); }

.card h2 {
  color: #f8fafc;
}

.qr-stage {
  aspect-ratio: 1/1;
  background: #fff;
  border-radius: 1rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
  max-width: 100%;
  margin: auto;
}

.qr-canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#logoDot {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.preview-wrapper {
  width: 100%;
  max-width: 100%;
  margin: auto;
}

footer { color: var(--muted); }
.badge-soft {
  background: rgba(148,163,184,.15);
  color: #cbd5e1;
  border: 1px solid rgba(148,163,184,.25);
}