/* Public member profile only. Palette and typography inherit from Twinks. */
.profile-page .mp-banner {
  background: linear-gradient(135deg, #0f1620 0%, #162030 50%, #0f1620 100%);
}

html.light .profile-page .mp-banner {
  background: linear-gradient(135deg, #e8f2f8 0%, #d0e6f2 50%, #e8f2f8 100%);
}

.profile-page .mp-completion__fill {
  background: linear-gradient(90deg, var(--theme-hover-color, #3cbff0), #0098c8);
}

html.light .profile-page .mp-banner__btn--primary {
  background: linear-gradient(135deg, #0098c8, var(--theme-hover-color, #3cbff0));
}

.profile-page .mp-hero__socials {
  flex-wrap: wrap;
}

.profile-page .mp-hero__social-label {
  white-space: nowrap;
}

.profile-page .mp-body {
  padding-top: 0;
}

.profile-page .mp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px 20px;
  text-align: center;
}

.profile-page .mp-empty p {
  margin: 0;
  color: var(--profile-color2);
}

.profile-page .mp-empty__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 20px;
  border-radius: 10px;
  background: var(--theme-hover-color, #3cbff0);
  color: #071116;
  font-weight: 700;
  text-decoration: none;
}

.profile-page .member-profile-wall {
  margin-top: 32px;
}

.profile-page .member-profile-wall__count {
  opacity: .55;
  font-size: .7em;
}

.profile-page .wall-form {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 20px;
}

.profile-page .wall-input {
  flex: 1 1 260px;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid var(--btn-tags-border);
  border-radius: 10px;
  background: var(--btn-tags-bg);
  color: var(--profile-color);
  font: inherit;
  resize: vertical;
}

.profile-page .wall-input:focus {
  border-color: var(--theme-hover-color, #3cbff0);
}

.profile-page .wall-submit {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 0 20px;
  border: 0;
  border-radius: 10px;
  background: var(--theme-hover-color, #3cbff0);
  color: #071116;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.profile-page .wall-form .generic-error {
  flex-basis: 100%;
  order: 3;
}

.profile-page .wall-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.profile-page .wall-item {
  display: flex;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--btn-tags-border);
  border-radius: 10px;
  background: var(--btn-tags-bg);
}

.profile-page .wall-avatar {
  display: block;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--thumb-placeholder-bg);
}

.profile-page .wall-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-page .wall-avatar__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--profile-color2);
}

.profile-page .wall-avatar__placeholder svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.profile-page .wall-body {
  flex: 1 1 auto;
  min-width: 0;
}

.profile-page .wall-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-page .wall-name {
  color: var(--profile-color);
  font-weight: 700;
}

.profile-page .wall-name:hover {
  color: var(--theme-hover-color, #3cbff0);
}

.profile-page .wall-date {
  color: var(--profile-color2);
  font-size: 12px;
}

.profile-page .wall-text {
  margin-top: 4px;
  overflow-wrap: anywhere;
  color: var(--profile-color);
  line-height: 1.5;
}

@media (max-width: 479px) {
  .profile-page .wall-submit {
    flex-basis: 100%;
  }
}