.profile-name-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 13px; }
.profile-featured-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.featured-badge { display: grid; place-items: center; width: 29px; height: 34px; padding: 0; border: 0; border-radius: 7px; background: transparent; cursor: pointer; transition: background 140ms, translate 140ms; }
.featured-badge .badge-emblem { width: 26px; height: 31px; }
.featured-badge:hover { background: #a7b8f00a; translate: 0 -1px; }
.badge-emblem { display: block; flex: 0 0 auto; width: 60px; height: 70px; overflow: visible; color: var(--badge-accent,#aebdff); filter: drop-shadow(0 3px 9px color-mix(in srgb,var(--badge-accent) 12%,transparent)); }
.badge-crest { fill: color-mix(in srgb,var(--badge-accent) 12%,#101725); stroke: currentColor; stroke-width: 1.3; stroke-opacity: .75; }
.badge-crest-inset { fill: none; stroke: currentColor; stroke-width: .6; stroke-opacity: .3; }
.badge-crest-shine { fill: none; stroke: #fff; stroke-width: 1; stroke-opacity: .35; stroke-linecap: round; }
.profile-badge-customize { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: 0 0 auto; min-height: 32px; padding: 0 10px; border: 1px solid #a6b8ef23; border-radius: 8px; background: #a6b8ef05; color: #b2c3eb; font: inherit; font-size: .66rem; cursor: pointer; transition: background 140ms,border-color 140ms; }
.profile-badge-customize svg { width: 13px; height: 13px; }
.profile-badge-customize:hover { background: #a6b8ef10; border-color: #a6b8ef45; }
.profile-achievements .profile-section-heading { margin-bottom: 16px; }
.achievement-list { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; }
.achievement { min-width: 0; padding: 14px 7px 12px; border: 1px solid transparent; border-radius: 13px; background: transparent; color: #bdc9e1; font: inherit; cursor: help; transition: border-color 140ms,background 140ms,translate 140ms; }
.achievement .badge-emblem { margin-bottom: 12px; }
.achievement strong { color: #a7b3cd; font-size: .7rem; font-weight: 600; line-height: 1.5; }
.achievement[data-unlocked="true"] strong { color: #e1e8fa; }
.achievement-progress { margin-top: 5px; color: #8290ae; font-size: .61rem; line-height: 1.6; }
.achievement[data-unlocked="true"] .achievement-progress { color: var(--badge-accent); }
.achievement[data-unlocked="false"] .badge-emblem { opacity: .6; filter: saturate(.65); }
.achievement-meter { width: min(66px,100%); height: 3px; margin-top: 11px; overflow: hidden; border-radius: 4px; background: #a7b8ed10; }
.achievement-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--badge-accent); opacity: .65; }
.achievement:hover, .achievement:focus-visible { border-color: color-mix(in srgb,var(--badge-accent) 22%,transparent); background: color-mix(in srgb,var(--badge-accent) 4%,transparent); translate: 0 -2px; }
.profile-badge-tooltip { position: fixed; z-index: 10050; width: 260px; max-width: calc(100vw - 24px); margin: 0; padding: 15px 17px; border: 1px solid color-mix(in srgb,var(--badge-accent) 30%,#26304b); border-radius: 12px; background: #101624; box-shadow: 0 10px 35px #0007; color: #d6e1f6; text-align: left; animation: badge-tip-in 120ms ease-out; }
.profile-badge-tooltip[hidden] { display: none !important; }
.profile-badge-tooltip strong { display: block; color: #edf2ff; font-size: .8rem; font-weight: 600; }
.profile-badge-tooltip p { margin: 7px 0 10px; color: #a7b5d0; font-size: .72rem; line-height: 1.65; }
.profile-badge-tooltip > span { display: block; padding-top: 9px; border-top: 1px solid #a3b8e317; color: var(--badge-accent); font-size: .65rem; line-height: 1.6; }
.profile-badge-tooltip[data-unlocked="false"] > span { color: #8393b5; }
@keyframes badge-tip-in { from { opacity: .6; translate: 0 3px; } to { opacity: 1; translate: 0; } }
.profile-editor { width: min(720px,calc(100vw - 28px)); height: min(690px,calc(100dvh - 32px)); max-height: calc(100dvh - 32px); padding: 0; overflow: hidden; border-color: #a0b3e42e; border-radius: 20px; background: #10141f; }
.profile-editor[open] { display: flex; flex-direction: column; }
.profile-editor > .member-close { top: 17px; right: 17px; }
.profile-editor > .member-dialog-heading { flex: 0 0 auto; margin: 0; padding: 24px 62px 20px 28px; }
.profile-editor .member-dialog-heading h2 { margin: 9px 0 7px; font-size: 1.5rem; line-height: 1.2; }
.profile-editor .member-dialog-heading p { color: #96a5c1; font-size: .74rem; }
.profile-settings-tabs { display: flex; flex: 0 0 auto; gap: 6px; padding: 0 24px 15px; border-bottom: 1px solid #a7b9ef14; }
.profile-settings-tabs > button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 1; min-height: 39px; padding: 0 13px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #899bbd; font: inherit; font-size: .74rem; font-weight: 600; cursor: pointer; transition: background 140ms,border-color 140ms,color 140ms; }
.profile-settings-tabs > button svg { width: 16px; height: 16px; }
.profile-settings-tabs > button:hover { background: #a5b8f008; color: #c2d2f5; }
.profile-settings-tabs > button[aria-selected="true"] { border-color: #a9b6f02e; background: #9facf00e; color: #d6ddff; box-shadow: inset 0 1px 0 #ffffff04; }
.profile-settings-form { display: flex; flex: 1; flex-direction: column; min-height: 0; margin: 0; }
.profile-settings-panel { flex: 1; min-height: 0; padding: 24px 28px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #35415c transparent; }
.profile-settings-panel.member-form { align-content: start; gap: 9px; }
.settings-section-heading { margin-bottom: 14px; }
.settings-section-heading h3 { margin: 0 0 7px; color: #e5edff; font-size: .91rem; font-weight: 600; letter-spacing: -.02em; }
.settings-section-heading p { margin: 0; color: #8d9fbe; font-size: .71rem; line-height: 1.65; }
.settings-bio-label { display: flex; align-items: center; justify-content: space-between; }
.member-form .settings-bio-label > span { color: #7e90b1; font-size: .63rem; font-variant-numeric: tabular-nums; }
.settings-links { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 7px; }
.settings-links > div { display: grid; gap: 9px; min-width: 0; }
.settings-links label { margin: 0; }
.profile-settings-panel .member-field-hint { color: #7f91b1; font-size: .63rem; line-height: 1.7; }
.profile-settings-footer { flex: 0 0 auto; padding: 15px 24px; border-top: 1px solid #a5b5e81a; background: #0c111b; }
.profile-settings-footer > .profile-extras-status { margin: 0 0 10px; font-size: .7rem; }
.profile-settings-footer-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.profile-settings-footer-actions > div { display: flex; align-items: center; gap: 9px; }
.profile-settings-footer .member-primary { justify-content: center; min-height: 39px; margin: 0; padding-inline: 17px; font-size: .72rem; }
.settings-cancel { min-height: 39px; padding: 0 15px; border: 1px solid #a4b7e822; border-radius: 9px; background: #a4b7e806; color: #b6c6e8; font: inherit; font-size: .72rem; cursor: pointer; }
.settings-cancel:hover { background: #a4b7e812; }
.settings-signout { display: inline-flex; align-items: center; gap: 7px; min-height: 35px; padding: 0; border: 0; background: transparent; color: #7f91b2; font: inherit; font-size: .68rem; cursor: pointer; }
.settings-signout svg { width: 14px; height: 14px; }
.settings-signout:hover { color: #edacb5; }
.profile-editor :focus-visible, .featured-badge:focus-visible, .profile-badge-customize:focus-visible { outline: 2px solid #aebaff; outline-offset: 3px; }
.settings-photo-row { display: flex; align-items: center; gap: 20px; padding: 4px 0 5px; }
.settings-avatar-preview { display: grid; place-items: center; flex: 0 0 84px; width: 84px; height: 84px; overflow: hidden; border: 1px solid #adbef139; border-radius: 50%; background: #28334f; color: #c9d6fa; font-size: 1.6rem; }
.settings-avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.profile-settings-panel h4 { margin: 0 0 12px; color: #cedcf6; font-size: .75rem; font-weight: 600; }
.settings-image-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 13px; }
.settings-image-actions .member-small-button, .profile-banner-actions .member-small-button { min-height: 34px; font-size: .68rem; }
.settings-image-actions + p, .settings-image-hint { margin: 10px 0 0; color: #8295b7; font-size: .65rem; line-height: 1.75; }
.settings-image-remove { min-height: 31px; padding: 0; border: 0; background: transparent; color: #8395b5; font: inherit; font-size: .67rem; cursor: pointer; }
.settings-image-remove:hover { color: #eab4bf; }
.settings-banner-section { margin-top: 22px; padding-top: 19px; border-top: 1px solid #a5b8e514; }
.profile-editor [data-avatar-editor].is-busy { opacity: .5; pointer-events: none; }
.profile-editor .profile-extras-status { font-size: .69rem; color: #9badce; }
.profile-editor .profile-extras-status[data-tone="success"] { color: #8cd3b7; }
.profile-editor .profile-extras-status[data-tone="danger"] { color: #efb0bc; }
.settings-badge-preview { padding: 16px 18px; border: 1px solid #a4b7ed24; border-radius: 12px; background: radial-gradient(ellipse at 90% 0%,#b2a0ff0a,transparent 70%),#0d121e; }
.settings-preview-label { display: block; margin-bottom: 12px; color: #7f90b2; font-size: .54rem; font-weight: 700; letter-spacing: .12em; }
.settings-badge-preview > div { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-height: 34px; }
.settings-badge-preview strong { color: #dbe5ff; font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; }
.settings-badge-preview > p { margin: 7px 0 0; color: #7c8ead; font-size: .64rem; line-height: 1.65; }
.settings-badge-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 0 12px; }
.settings-badge-heading h4 { margin: 0; }
.settings-badge-heading > span { color: #97a9d2; font-size: .65rem; font-variant-numeric: tabular-nums; }
.settings-badge-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.badge-picker-item { display: flex; align-items: center; gap: 11px; min-width: 0; min-height: 80px; padding: 12px; border: 1px solid #a6b8e71a; border-radius: 11px; background: #a6b8e703; color: #bac9e8; font: inherit; text-align: left; cursor: pointer; transition: border-color 140ms,background 140ms; }
.badge-picker-item > .badge-emblem { width: 34px; height: 40px; }
.badge-picker-copy { display: grid; gap: 4px; min-width: 0; }
.badge-picker-copy > strong { color: #c8d7f4; font-size: .68rem; font-weight: 600; line-height: 1.5; }
.badge-picker-copy > span { color: #7e92b6; font-size: .6rem; line-height: 1.6; }
.badge-picker-item[data-unlocked="false"] .badge-emblem { opacity: .45; filter: saturate(.5); }
.badge-picker-item[aria-pressed="true"] { border-color: color-mix(in srgb,var(--badge-accent) 45%,transparent); background: color-mix(in srgb,var(--badge-accent) 5%,transparent); }
.badge-picker-item:hover { border-color: #a6b8e744; }
.badge-picker-mark { display: grid; place-items: center; flex: 0 0 18px; height: 18px; margin-left: auto; border: 1px solid #a3b5e32b; border-radius: 50%; color: #7f93b8; font-size: .64rem; font-weight: 600; }
.badge-picker-item[aria-pressed="true"] .badge-picker-mark { border-color: transparent; background: var(--badge-accent); color: #15203a; }
@media (max-width: 900px) { .achievement-list { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; } }
@media (max-width: 520px) {
  .profile-name-row { gap: 4px 8px; }
  .featured-badge { width: 24px; height: 29px; }
  .featured-badge .badge-emblem { width: 22px; height: 26px; }
  .profile-editor { border-radius: 16px; }
  .profile-editor > .member-dialog-heading { padding: 22px 52px 18px 20px; }
  .profile-settings-tabs { gap: 4px; padding-inline: 15px; }
  .profile-settings-tabs > button { padding-inline: 9px; font-size: .69rem; gap: 6px; }
  .profile-settings-panel { padding: 21px 20px; }
  .settings-links { grid-template-columns: 1fr; gap: 14px; }
  .profile-settings-footer { padding: 13px 16px; }
  .settings-cancel { padding-inline: 12px; }
  .settings-signout { font-size: .63rem; gap: 5px; }
  .settings-photo-row { gap: 15px; align-items: flex-start; }
  .settings-avatar-preview { flex-basis: 68px; width: 68px; height: 68px; }
  .settings-image-actions { gap: 3px 12px; }
  .settings-badge-picker { grid-template-columns: 1fr; }
  .badge-picker-item { min-height: 72px; }
  .achievement .badge-emblem { width: 48px; height: 56px; }
  .achievement strong { font-size: .66rem; }
  .profile-badge-customize { font-size: .61rem; padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) { .featured-badge,.achievement,.profile-badge-tooltip,.badge-picker-item { transition: none; animation: none; } .featured-badge:hover,.achievement:hover { translate: none; } }