.bido-account-main {
  padding: 24px 32px 40px;
}

.bido-account-panel {
  display: grid;
  /* Side card flexes with the viewport instead of a fixed 320px (Rule 7). */
  grid-template-columns: minmax(0, 1fr) clamp(16rem, 24vw, 20rem);
  gap: 18px;
  align-items: start;
  max-width: 960px;
  margin-top: 18px;
}

.bido-account-form,
.bido-account-card {
  padding: 20px;
}

.bido-account-form {
  display: grid;
  gap: 14px;
}

.bido-account-actions {
  margin-top: 4px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.bido-account-card {
  display: grid;
  gap: 10px;
}

/* === Responsive — account ===
   The panel stacks once its form column + side card can no longer fit. */
@media (max-width: 64rem) {
  .bido-account-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 48rem) {
  .bido-account-main {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* 2FA enrolment QR — a white, quiet-zoned tile so the code scans against the
   account surface in either theme; the inline SVG scales to the box. White is a
   scan-contrast requirement, not a brand colour, so it stays fixed both ways. */
.bido-2fa-qr {
  inline-size: 168px;
  padding: 10px;
  margin: 4px 0 2px;
  background: rgb(var(--bx-white-rgb));
  border-radius: var(--bx-r-sm);
}

.bido-2fa-qr svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

/* The base32 setup key is one long unbroken token — let it wrap so it can't
   push the account card sideways on a phone. */
.bido-2fa-key {
  word-break: break-all;
}