.auth-shell {
  width:
    min(
      var(--bdl-auth-width),
      calc(100% - 32px)
    );

  margin:
    6vh auto
    var(--bdl-space-8);
}

.auth-card {
  background:
    var(--bdl-color-surface);

  border:
    1px solid
    var(--bdl-color-border);

  border-radius:
    var(--bdl-radius-lg);

  padding:
    var(--bdl-space-6);
}

.auth-brand {
  margin-bottom:
    var(--bdl-space-5);

  font-size: 1.15rem;
  font-weight: 750;
}

.auth-card .bdl-form input {
  width: 100%;
  min-height: 44px;
}

.auth-card .bdl-form button {
  width: 100%;
  min-height: 44px;

  margin-top:
    var(--bdl-space-2);

  font-weight: 700;
}

.auth-qr {
  display: block;

  width:
    min(280px, 100%);

  height: auto;

  margin:
    22px auto;

  image-rendering:
    pixelated;
}

.auth-secret {
  overflow-wrap:
    anywhere;
}

.auth-meta {
  padding:
    var(--bdl-space-3);

  border:
    1px solid
    var(--bdl-color-border);

  border-radius:
    var(--bdl-radius-sm);

  background:
    var(--bdl-color-surface-soft);
}