.loq-account-app {
  --loq-account-card-bg: var(--loq-surface, #fff);
  --loq-account-card-border: rgb(17 19 28 / 0.07);
  --loq-account-card-radius: 18px;
  --loq-account-card-shadow: 0 10px 28px rgb(17 19 28 / 0.08);
  --loq-account-title-color: var(--loq-text, #11131a);
  --loq-account-muted-color: var(--loq-muted, #6b7280);
  --loq-account-primary: var(--loq-primary, #5a38e5);
  --loq-account-primary-rgb: var(--loq-primary-rgb, 90 56 229);
  --loq-account-club-mid: #7c45ee;
  --loq-account-club-end: #6335d7;
  --loq-account-title-size: 18px;
  --loq-account-subtitle-size: 14px;
  --loq-account-label-size: 13px;
  --loq-account-caption-size: 12px;
  --loq-account-title-weight: 760;
  --loq-account-label-weight: 680;
  --loq-account-body-weight: 500;
  position: relative;
  min-height: 100%;
}

.loq-account-app .loq-app-card {
  border-color: var(--loq-account-card-border);
  border-radius: var(--loq-account-card-radius);
  background: var(--loq-account-card-bg);
  box-shadow: var(--loq-account-card-shadow);
}

.loq-account-view {
  display: none;
}

.loq-account-view.is-active {
  display: block;
}

.loq-account-view__topbar {
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.loq-account-view__back {
  width: 38px;
  height: 38px;
  border: 1px solid rgb(17 19 28 / 0.08);
  border-radius: var(--loq-radius-pill, 999px);
  display: inline-grid;
  place-items: center;
  color: var(--loq-text, #11131a);
  background: var(--loq-surface, #ffffff);
  box-shadow: var(--loq-shadow-card, 2px 4px 12px #00000014);
}

.loq-account-view__topbar span {
  color: var(--loq-account-muted-color);
  font-size: var(--loq-account-caption-size);
  font-weight: var(--loq-account-label-weight);
}

[data-loq-account-logout].is-loading {
  opacity: 0.68;
  pointer-events: none;
}