/* Profile header skins: a small visual identity for each profile. */
.profile-card.profile-card--styled {
  overflow: hidden;
  padding: 0;
  background: #09090c;
  border-color: #1f1f28;
}
.profile-card--styled .profile-banner {
  position: relative;
  min-height: 148px;
  overflow: hidden;
  isolation: isolate;
  background: #211638;
}
.profile-editor .banner-canvas.banner-skin-classic { background: linear-gradient(135deg, #0d0b14, #39205d 58%, #9064d7); }
.profile-editor .banner-canvas.banner-skin-neon { background: linear-gradient(120deg, #071d2a, #075d70 45%, #ee3d86); }
.profile-editor .banner-canvas.banner-skin-aurora { background: linear-gradient(125deg, #092f37, #207d74 45%, #5d3f91 85%); }
.profile-editor .banner-canvas.banner-skin-graphite { background: linear-gradient(135deg, #11181c, #34464b 55%, #62cdb8); }
.profile-editor .banner-canvas.banner-skin-sunset { background: linear-gradient(125deg, #3a1827, #a94f48 52%, #f1ae63); }
.profile-editor .banner-canvas.banner-skin-ice { background: linear-gradient(125deg, #173557, #3577aa 52%, #9de1e7); }
.profile-card--styled .profile-banner::before,
.profile-card--styled .profile-banner::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
.profile-card--styled .profile-banner::before {
  z-index: -2;
  inset: 0;
  background: inherit;
}
.profile-card--styled .profile-banner::after {
  z-index: -1;
  inset: -30%;
  opacity: .45;
  transform: rotate(-12deg);
  background: repeating-linear-gradient(118deg, transparent 0 28px, rgba(255,255,255,.12) 29px 31px, transparent 32px 64px);
}
.profile-card--styled .profile-banner-mark {
  position: absolute;
  right: 24px;
  bottom: 18px;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 18px;
  opacity: .82;
  transform: rotate(12deg);
  background: rgba(255,255,255,.08);
}
.profile-card--styled .profile-banner-mark::before,
.profile-card--styled .profile-banner-mark::after {
  content: '';
  position: absolute;
  inset: 15px 11px;
  border: 2px solid rgba(255,255,255,.7);
  border-radius: 50%;
}
.profile-card--styled .profile-banner-mark::after {
  inset: 10px 20px;
  transform: rotate(45deg);
}
.profile-card--styled .profile-top {
  position: relative;
  z-index: 1;
  align-items: flex-end;
  margin-top: -38px;
  padding: 0 24px;
}
.profile-card--styled .profile-top .avatar.lg {
  flex: 0 0 auto;
  border: 4px solid var(--panel);
  box-shadow: 0 8px 22px rgba(0,0,0,.28);
}
.profile-card--styled .profile-identity {
  padding-bottom: 4px;
}
.profile-card--styled .profile-bio,
.profile-card--styled .profile-stats,
.profile-card--styled .spark-card,
.profile-card--styled .profile-actions {
  margin-right: 24px;
  margin-left: 24px;
}
.profile-card--styled .profile-bio { margin-top: 16px; }
.profile-card--styled .profile-stats { margin-top: 16px; }
.profile-card--styled .spark-card { margin-bottom: 0; }
.profile-card--styled .profile-actions { margin-bottom: 24px; }

.profile-card.profile-card--styled .profile-banner.profile-banner--classic { background: linear-gradient(135deg, #0d0b14, #39205d 58%, #9064d7); }
.profile-card.profile-card--styled .profile-banner.profile-banner--neon { background: linear-gradient(120deg, #071d2a, #075d70 45%, #ee3d86); }
.profile-card.profile-card--styled .profile-banner.profile-banner--aurora { background: linear-gradient(125deg, #092f37, #207d74 45%, #5d3f91 85%); }
.profile-card.profile-card--styled .profile-banner.profile-banner--graphite { background: linear-gradient(135deg, #11181c, #34464b 55%, #62cdb8); }
.profile-card.profile-card--styled .profile-banner.profile-banner--sunset { background: linear-gradient(125deg, #3a1827, #a94f48 52%, #f1ae63); }
.profile-card.profile-card--styled .profile-banner.profile-banner--ice { background: linear-gradient(125deg, #173557, #3577aa 52%, #9de1e7); }
.profile-card.profile-card--styled .profile-banner.profile-banner--neon::after { background: repeating-linear-gradient(105deg, transparent 0 20px, rgba(94,245,255,.22) 21px 23px, transparent 24px 58px); }
.profile-card.profile-card--styled .profile-banner.profile-banner--aurora::after { background: linear-gradient(125deg, transparent 25%, rgba(148,255,221,.5), transparent 60%, rgba(226,159,255,.35)); filter: blur(12px); }
.profile-card.profile-card--styled .profile-banner.profile-banner--graphite::after { background: repeating-linear-gradient(90deg, transparent 0 17px, rgba(187,255,239,.12) 18px 19px); }
.profile-card.profile-card--styled .profile-banner.profile-banner--sunset::after { background: radial-gradient(ellipse at 70% 20%, rgba(255,245,181,.48), transparent 35%); }
.profile-card.profile-card--styled .profile-banner.profile-banner--ice::after { background: repeating-linear-gradient(130deg, transparent 0 24px, rgba(220,255,255,.2) 25px 28px, transparent 29px 58px); }

.profile-header-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}
.profile-header-fieldset legend {
  margin-bottom: 5px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}
.profile-header-copy {
  display: block;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}
.profile-header-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.profile-header-option {
  position: relative;
  display: grid;
  gap: 7px;
  min-height: 82px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--text);
  background: var(--panel-2);
  cursor: pointer;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.profile-header-option:hover,
.profile-header-option:focus-within { border-color: var(--purple); transform: translateY(-1px); }
.profile-header-option:has(input:checked) { border-color: var(--purple); box-shadow: 0 0 0 2px rgba(139,92,246,.2); }
.profile-header-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.profile-header-preview {
  position: relative;
  display: block;
  height: 38px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--header-color);
}
.profile-header-preview::after {
  content: '';
  position: absolute;
  right: 8px;
  bottom: 7px;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 5px;
  transform: rotate(18deg);
}
.profile-header-option strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.profile-header-preview.classic { --header-color: linear-gradient(135deg, #0d0b14, #9064d7); }
.profile-header-preview.neon { --header-color: linear-gradient(120deg, #075d70, #ee3d86); }
.profile-header-preview.aurora { --header-color: linear-gradient(125deg, #092f37, #5d3f91); }
.profile-header-preview.graphite { --header-color: linear-gradient(135deg, #11181c, #62cdb8); }
.profile-header-preview.sunset { --header-color: linear-gradient(125deg, #3a1827, #f1ae63); }
.profile-header-preview.ice { --header-color: linear-gradient(125deg, #173557, #9de1e7); }
@media (max-width: 430px) {
  .profile-card--styled .profile-top { padding: 0 16px; }
  .profile-card--styled .profile-bio,
  .profile-card--styled .profile-stats,
  .profile-card--styled .spark-card,
  .profile-card--styled .profile-actions { margin-right: 16px; margin-left: 16px; }
  .profile-card--styled .profile-banner { min-height: 128px; }
}

/* Keep the profile surface flush with the app background. */
.profile-card.profile-card--styled {
  border-color: transparent;
  box-shadow: none;
  background: transparent !important;
}
.profile-card.profile-card--styled .profile-top,
.profile-card.profile-card--styled .profile-identity,
.profile-card.profile-card--styled .profile-bio,
.profile-card.profile-card--styled .profile-stats,
.profile-card.profile-card--styled .spark-card,
.profile-card.profile-card--styled .profile-actions {
  background: transparent !important;
}
.profile-card.profile-card--styled > *:not(.profile-banner) {
  background-color: transparent !important;
}
.profile-card.profile-card--styled .profile-banner {
  background-color: transparent;
}