/* Focused styles for the account cosmetics feature.  These rules are scoped
   to Blur cosmetics and intentionally do not restyle shared controls. */
.profile-settings-subtabs {
  display: flex;
  gap: 4px;
  margin: 0 0 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--border, #ffffff1a) 70%, transparent);
}
.profile-settings-subtabs button {
  appearance: none;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted, #92919a);
  cursor: pointer;
  font: inherit;
  padding: 8px 12px 10px;
}
.profile-settings-subtabs button:hover,
.profile-settings-subtabs button.is-active { color: var(--text, #f2f1ed); }
.profile-settings-subtabs button.is-active { border-bottom-color: var(--accent, #c9c39a); }
.profile-settings-shop[hidden],
.profile-settings-subtabs ~ .acct-editor-inline[hidden] { display: none !important; }

.blur-cosmetics-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.blur-cosmetics-heading h3 { margin: 4px 0 6px; font-size: 20px; }
.blur-cosmetics-heading p { color: var(--muted, #92919a); margin: 0; font-size: 13px; }
.blur-token-balance {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  white-space: nowrap;
  color: var(--accent, #c9c39a);
}
.blur-token-balance span { font-size: 18px; }
.blur-token-balance strong { font-size: 20px; color: var(--text, #f2f1ed); }
.blur-token-balance small { color: var(--muted, #92919a); font-size: 11px; }

.blur-achievement-list { display: grid; gap: 8px; }
.blur-achievement-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid var(--border, #ffffff1a);
  border-radius: 10px;
  background: var(--surface, #17171b);
}
.blur-achievement-row.is-complete { border-color: color-mix(in srgb, var(--accent, #c9c39a) 48%, var(--border, #ffffff1a)); }
.blur-achievement-row.is-claimed { opacity: .68; }
.blur-achievement-icon {
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 9px; background: var(--surface-2, #202025); color: var(--accent, #c9c39a);
}
.blur-achievement-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.blur-achievement-copy { min-width: 0; display: grid; gap: 3px; }
.blur-achievement-copy strong { font-size: 13px; }
.blur-achievement-copy span { color: var(--muted, #92919a); font-size: 12px; }
.blur-achievement-copy small { color: var(--muted-strong, #b9b7bd); font-size: 11px; }
.blur-achievement-progress { height: 4px; max-width: 260px; margin-top: 3px; background: var(--surface-2, #202025); border-radius: 4px; overflow: hidden; }
.blur-achievement-progress i { display: block; height: 100%; background: var(--accent, #c9c39a); border-radius: inherit; }
.blur-achievement-reward { display: grid; grid-template-columns: auto auto; gap: 0 4px; align-items: center; justify-items: end; }
.blur-achievement-reward > span { color: var(--accent, #c9c39a); }
.blur-achievement-reward strong { font-size: 13px; }
.blur-achievement-reward small { grid-column: 1 / -1; color: var(--muted, #92919a); font-size: 10px; }
.blur-achievement-reward button { grid-column: 1 / -1; margin-top: 6px; }
.blur-achievement-reward em, .blur-shop-error, .blur-profile-effects-error { color: var(--danger, #ef6b72); font-size: 11px; font-style: normal; }

.blur-shop-sections { display: grid; gap: 20px; }
.blur-shop-section { display: grid; gap: 8px; }
.blur-shop-section .blur-effects-group-label { margin: 0 2px; }
.blur-shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.blur-shop-card { min-width: 0; padding: 12px; border: 1px solid var(--border, #ffffff1a); border-radius: 10px; background: var(--surface, #17171b); }
.blur-shop-card.is-equipped { border-color: color-mix(in srgb, var(--accent, #c9c39a) 55%, var(--border, #ffffff1a)); }
.blur-shop-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.blur-shop-card > strong { display: block; margin-top: 8px; font-size: 13px; }
.blur-shop-card p { min-height: 32px; margin: 4px 0 11px; color: var(--muted, #92919a); font-size: 11px; line-height: 1.45; }
.blur-effect-rarity { color: var(--muted, #92919a); font: 10px/1.2 var(--font-mono, monospace); text-transform: uppercase; letter-spacing: .08em; }
.rarity-rare { color: #8bb4db; } .rarity-epic { color: #c99be8; }
.blur-shop-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.blur-effect-price { color: var(--accent, #c9c39a); font-size: 12px; }
.blur-shop-owned { color: var(--muted-strong, #b9b7bd); font-size: 11px; }
.blur-effect-preview { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--surface-2, #202025); }
.blur-effect-preview--owned { width: 30px; height: 30px; flex: 0 0 30px; }
.blur-effect-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--surface-3, #29292e); color: var(--text, #f2f1ed); font-size: 17px; }
.blur-effect-avatar--empty { background: transparent; color: transparent; }
.blur-effect-preview--owned .blur-effect-avatar { width: 22px; height: 22px; font-size: 11px; }
@keyframes blur-effect-pulse { 50% { box-shadow: 0 0 0 var(--blur-pulse-ring, 5px) color-mix(in srgb, var(--accent, #c9c39a) 20%, transparent); } }
@keyframes blur-effect-holo { 50% { box-shadow: 0 0 0 var(--blur-holo-ring, 2px) #89c2d9, 0 0 var(--blur-holo-glow, 12px) rgba(207, 164, 232, .4); } }
@keyframes blur-effect-flame { 50% { box-shadow: 0 0 0 var(--blur-flame-ring, 2px) #f0a06b, 0 var(--blur-flame-y, -8px) var(--blur-flame-blur, 17px) rgba(222, 125, 74, .6); } }

.blur-avatar-borders-section,
.blur-profile-effects-section { grid-column: 1; grid-row: 3; }
.profile-settings-editor .blur-avatar-borders-section,
.profile-settings-editor .blur-profile-effects-section {
  grid-column: 1 / -1;
  grid-row: auto;
}
.blur-avatar-borders-section .blur-effects-intro,
.blur-profile-effects-section .blur-effects-intro {
  display: grid;
  gap: 3px;
  margin: -2px 0 1px;
}
.blur-avatar-borders-section .blur-effects-intro strong,
.blur-profile-effects-section .blur-effects-intro strong {
  color: var(--text, #f2f1ed);
  font: 600 12px/1.25 var(--font-body);
}
.blur-avatar-borders-section .blur-effects-intro small,
.blur-profile-effects-section .blur-effects-intro small {
  max-width: 420px;
  color: var(--muted-dim, #77767d);
  font: 400 10px/1.35 var(--font-body);
}
.blur-owned-effects { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.blur-owned-effect { display: inline-flex; align-items: center; gap: 8px; min-width: 142px; padding: 8px; border: 1px solid var(--border, #ffffff1a); border-radius: 9px; background: var(--surface, #17171b); color: var(--text, #f2f1ed); cursor: pointer; text-align: left; font: inherit; }
.blur-owned-effect:hover, .blur-owned-effect.is-equipped { border-color: var(--accent, #c9c39a); }
.blur-owned-effect span:last-child { display: grid; gap: 2px; }
.blur-owned-effect strong { font-size: 11px; }
.blur-owned-effect small { color: var(--muted, #92919a); font-size: 10px; }
.blur-effect-none-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2, #202025); color: var(--muted, #92919a); font-size: 20px; }
.blur-owned-effect--none .blur-profile-none-label { display: grid; place-items: center; width: 100%; height: 100%; color: var(--muted, #92919a); font: 11px/1 var(--font-body, sans-serif); }
.blur-owned-effects-empty { color: var(--muted, #92919a); font-size: 12px; }

.blur-cosmetics-unavailable small { display: block; max-width: 560px; margin-top: 8px; color: var(--muted, #92919a); }
.blur-cosmetics-unavailable code { color: var(--text, #f2f1ed); }
@media (max-width: 680px) {
  .blur-cosmetics-heading { flex-direction: column; }
  .blur-achievement-row { grid-template-columns: 34px minmax(0, 1fr); }
  .blur-achievement-reward { grid-column: 2; justify-items: start; display: flex; flex-wrap: wrap; justify-content: flex-start; }
  .blur-achievement-reward small { order: 2; }
  .blur-achievement-reward button { order: 3; }
}
@media (prefers-reduced-motion: reduce) {
  .blur-profile-effect-host, .blur-profile-effect-target[data-blur-profile-effect] { animation: none !important; }
}

/* Sprite effects are authored as held visual frames. Keep this explicit frame
   loop alive even when a broad site/performance motion rule is present; this
   is the cosmetic's actual artwork playback, not a decorative transform. */
.blur-profile-effect-sprite > .blur-profile-effect-asset {
  animation-name: blur-profile-effect-sprite-6 !important;
  animation-duration: 4s !important;
  animation-delay: 0s !important;
  animation-iteration-count: infinite !important;
  animation-timing-function: steps(5, end) !important;
  animation-play-state: running !important;
}

/* Settings alignment: cosmetics use the same quiet connected surfaces and
   compact hierarchy as the existing Settings rows. */
.settings-panel .achievements-settings-group .blur-cosmetics-heading,
.settings-panel .profile-settings-shop .blur-cosmetics-heading {
  margin: 0 2px 10px;
}
.settings-panel .blur-cosmetics-heading h3 {
  margin: 3px 0 4px;
  color: var(--text);
  font: 600 15px/1.25 var(--font-body);
}
.settings-panel .blur-cosmetics-heading p {
  color: var(--muted-dim);
  font: 400 10px/1.4 var(--font-body);
}
.settings-panel .blur-achievement-list {
  gap: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.settings-panel .blur-achievement-row {
  min-height: 62px;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  background: var(--surface);
}
.settings-panel .blur-achievement-row:last-child { border-bottom: 0; }
.settings-panel .blur-achievement-row.is-complete { background: color-mix(in srgb, var(--accent-dim, rgba(201,195,154,.1)) 40%, var(--surface)); }
.settings-panel .blur-achievement-icon { width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--surface-2); }
.settings-panel .blur-achievement-copy strong { font: 500 12px/1.25 var(--font-body); }
.settings-panel .blur-achievement-copy span { font-size: 10px; color: var(--muted-dim); }
.settings-panel .blur-achievement-copy small { font: 400 9px/1.2 var(--font-mono); color: var(--muted-dim); }
.settings-panel .blur-achievement-reward { font-family: var(--font-mono); }
.settings-panel .blur-shop-grid { gap: 8px; }
.settings-panel .blur-shop-card {
  padding: 11px;
  border-color: var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: none;
}
.settings-panel .blur-shop-card.is-equipped { border-color: var(--accent); }
.settings-panel .blur-shop-card > strong { font: 500 12px/1.25 var(--font-body); }
.settings-panel .blur-shop-card p { min-height: 30px; font-size: 10px; color: var(--muted-dim); }
.settings-panel .blur-effect-preview { width: 54px; height: 54px; background: var(--surface-2); }
.settings-panel .blur-effect-avatar { width: 34px; height: 34px; background: var(--surface-3); }
.settings-panel .blur-effect-avatar--empty { background: transparent; }
.settings-panel .blur-owned-effect {
  min-width: 132px;
  padding: 7px;
  border-color: var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.settings-panel .blur-owned-effect:hover,
.settings-panel .blur-owned-effect.is-equipped { border-color: var(--accent); background: var(--surface-2); }
.settings-panel .blur-cosmetics-unavailable,
.settings-panel .blur-cosmetics-signed-out { padding: 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface); }

/* Achievements intentionally uses the native Settings group rhythm: a small
   mono section label, one connected summary row, then hairline-divided rows. */
.settings-panel .achievements-settings-group > h3 {
  margin: 0 0 8px;
  color: var(--muted-dim);
  font: 500 10px/1.2 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.settings-panel .achievements-settings-group > .theme-section-caption {
  margin: -2px 0 10px;
  padding: 0;
  color: var(--muted-dim);
  font-size: 11px;
}
.settings-panel .achievements-token-row {
  min-height: 64px;
  margin: 0;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--surface);
}
.settings-panel .achievements-token-row .blur-token-balance {
  gap: 5px;
  color: var(--accent);
  font-family: var(--font-mono);
}
.settings-panel .achievements-token-row .blur-token-balance span { font-size: 13px; }
.settings-panel .achievements-token-row .blur-token-balance strong { color: var(--text); font: 500 14px/1 var(--font-mono); }
.settings-panel .achievements-token-row .blur-token-balance small { color: var(--muted-dim); font-size: 9px; }
.settings-panel .blur-achievement-list {
  border-color: var(--border);
  border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.settings-panel .blur-achievement-row { min-height: 64px; }
.settings-panel .blur-achievement-row.is-complete { background: var(--surface); }
.settings-panel .blur-achievement-row.is-claimed { opacity: .58; }
.settings-panel .blur-achievement-reward strong { font-size: 12px; }
.settings-panel .blur-achievement-reward small { font-size: 9px; }
.settings-panel .blur-achievement-reward button { margin-top: 5px; }

/* Profile settings: use a compact segmented control rather than a second
   settings navigation rail. The active state uses the current theme accent,
   so the control stays native to every built-in and community theme. */
.profile-settings-v2 .profile-settings-subtabs {
  width: max-content;
  max-width: 100%;
  gap: 2px;
  margin: 0 0 18px;
  padding: 3px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.profile-settings-v2 .profile-settings-subtabs button {
  min-width: 88px;
  padding: 7px 14px;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--muted-dim);
  font: 500 11px/1.2 var(--font-body);
  letter-spacing: .01em;
  transition: background var(--speed, .15s) var(--curve), color var(--speed, .15s) var(--curve);
}
.profile-settings-v2 .profile-settings-subtabs button:hover,
.profile-settings-v2 .profile-settings-subtabs button:focus-visible {
  outline: none;
  background: var(--surface-3);
  color: var(--text);
}
.profile-settings-v2 .profile-settings-subtabs button.is-active {
  border-bottom: 0;
  background: var(--accent);
  color: var(--accent-contrast, var(--surface));
  box-shadow: var(--shadow-soft);
}
.profile-settings-v2 .profile-settings-shop {
  min-width: 0;
  padding-top: 4px;
}

/* The profile editor already uses section surfaces. Remove the small internal
   heading rules so the page has one clear divider only before cosmetics. */
.profile-settings-v2 .profile-settings-editor .acct-section-heading {
  padding-bottom: 0;
  border-bottom: 0;
}
.profile-settings-v2 .profile-settings-editor .blur-avatar-borders-section,
.profile-settings-v2 .profile-settings-editor .blur-profile-effects-section {
  margin-top: 4px;
  padding-top: 22px;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  border: 0;
  border-top: 1px solid var(--border-strong);
  border-radius: 0;
  background: transparent;
}
.profile-settings-v2 .profile-settings-editor .blur-effects-section-heading {
  margin-bottom: 14px;
}
.profile-settings-v2 .profile-settings-editor .blur-effects-section-heading .acct-section-label {
  color: var(--muted-dim);
}
.profile-settings-v2 .profile-settings-editor .blur-effects-section-heading .acct-section-note {
  color: var(--muted-dim);
}
.blur-effects-intro { display: grid; gap: 3px; margin: 0 0 10px; }
.blur-effects-intro strong { color: var(--text); font: 500 12px/1.25 var(--font-body); }
.blur-effects-intro small { color: var(--muted-dim); font-size: 10px; }

/* Owned effects borrow the visual rhythm of a customization picker: one
   current selection row followed by small, preview-first tiles. */
.settings-panel .blur-owned-effects {
  display: block;
  width: 100%;
}
.blur-effects-groups { display: grid; gap: 16px; margin-top: 0; }
.blur-effects-group { display: grid; gap: 8px; }
.blur-effects-group-label { color: var(--muted-dim); font: 500 9px/1 var(--font-mono); letter-spacing: .1em; }
.blur-owned-effects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 7px; }
.blur-owned-effects-grid--preview { grid-auto-flow: column; grid-auto-columns: 62px; grid-template-columns: none; overflow-x: auto; padding-bottom: 2px; }
.blur-effects-view-all { justify-self: start; margin-top: 3px; }
.settings-panel .blur-owned-effect {
  width: 62px;
  min-width: 0;
  min-height: 62px;
  box-sizing: border-box;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0;
  padding: 7px;
  border-color: var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  text-align: center;
}
.settings-panel .blur-owned-effect:hover,
.settings-panel .blur-owned-effect:focus-visible,
.settings-panel .blur-owned-effect.is-equipped {
  outline: none;
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
}
.settings-panel .blur-owned-effect .blur-effect-preview--owned { width: 46px; height: 46px; background: var(--surface); }
.settings-panel .blur-owned-effect .blur-effect-preview--owned .blur-effect-avatar { width: 29px; height: 29px; font-size: 13px; }

/* An effect needs an actual frame around the avatar, not just a shadow on the
   image element. These lightweight pseudo-elements stay outside the avatar
   without changing message/profile layout. */
.blur-profile-effect-host {
  position: relative;
  isolation: isolate;
  z-index: 0;
  /* One effect recipe, with only proportional values adjusted for tiny
     surfaces. The colors and textures remain identical everywhere. */
  --blur-effect-gap: -2px;
  --blur-effect-outline: 2px;
  --blur-glow-ring: 2px;
  --blur-glow-blur: 16px;
  --blur-pulse-ring: 5px;
  --blur-holo-ring: 2px;
  --blur-holo-glow: 12px;
  --blur-flame-ring: 2px;
  --blur-flame-y: -8px;
  --blur-flame-blur: 17px;
  --blur-flame-static-ring: 2px;
  --blur-flame-static-y: -5px;
  --blur-flame-static-blur: 12px;
  --blur-spark-ring: 2px;
  --blur-spark-x: 8px;
  --blur-spark-y: -5px;
  --blur-spark-spread: -3px;
  --blur-spark-left-x: -7px;
  --blur-spark-left-y: 6px;
  --blur-spark-left-spread: -4px;
  --blur-pixel-gap: -2px;
  --blur-pixel-shadow: 3px;
}
.blur-profile-effect-renderer {
  display: inline-grid;
  place-items: center;
  width: max-content;
  height: max-content;
  flex: 0 0 auto;
}
.blur-profile-effect-asset {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
}
.blur-profile-surface-host {
  position: relative;
  isolation: isolate;
}
.acct-pcard.blur-profile-surface-host { overflow-x: hidden; overflow-y: auto; }
.acct-preview.blur-profile-surface-host { overflow: hidden; }
.blur-profile-effect-surface-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}
.blur-profile-effect-surface-intro,
.blur-profile-effect-surface-loop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  z-index: 1;
}
.blur-profile-effect-surface-intro[hidden],
.blur-profile-effect-surface-loop[hidden] { display: none; }
.acct-pcard.blur-profile-surface-host,
.acct-preview.blur-profile-surface-host { isolation: isolate; }
.acct-pcard.blur-profile-surface-host > .acct-pcard-accent,
.acct-pcard.blur-profile-surface-host > .acct-pcard-body,
.acct-preview.blur-profile-surface-host > .acct-preview-banner,
.acct-preview.blur-profile-surface-host > .acct-preview-info {
  position: relative;
  z-index: 2;
}
.acct-pcard.blur-profile-surface-host > .acct-modal-close {
  position: absolute;
  z-index: 6;
}
.acct-pcard .acct-status-bubble {
  /* Chat cohesion styles pin this pill to a fixed top/left coordinate. Keep
     it in the identity flow so profile effects cannot make it drift. */
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  display: block;
  width: max-content;
  max-width: 185px !important;
  margin: 8px 0 0 !important;
}
body:has(#chat-root) .acct-pcard .acct-status-bubble {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  margin: 8px 0 0 !important;
}
body:has(#chat-root) .acct-pcard .acct-avatar-wrap > .acct-status-bubble {
  position: absolute !important;
  top: calc(50% + 22px) !important;
  right: auto !important;
  bottom: auto !important;
  left: calc(100% + 4px) !important;
  z-index: 4 !important;
  width: max-content;
  max-width: 185px !important;
  margin: 0 !important;
  transform: translateY(-50%);
}
.blur-profile-effect-sprite {
  position: absolute;
  inset: -10%;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.blur-profile-effect-sprite > .blur-profile-effect-asset {
  inset: 0 auto auto 0;
  width: 600%;
  height: 200%;
  max-width: none;
  object-fit: fill;
  image-rendering: pixelated;
  transform: none;
  animation: blur-profile-effect-sprite-6 4s steps(5, end) infinite;
}
.blur-profile-effect-sprite[data-blur-sprite-ratio="square"] > .blur-profile-effect-asset {
  height: 100%;
  transform: none;
}
.blur-profile-effect-host[data-blur-asset-frames="12"] .blur-profile-effect-sprite > .blur-profile-effect-asset {
  width: 1200%;
  height: 100%;
  transform: none;
  transform-origin: center;
  scale: 1;
  animation: blur-profile-effect-sprite-12 4.8s steps(11, end) infinite !important;
}
.blur-profile-effect-host[data-blur-asset-frames="18"] .blur-profile-effect-sprite > .blur-profile-effect-asset {
  width: 1800%;
  height: 100%;
  transform: none;
  transform-origin: center;
  scale: 1;
  animation: blur-profile-effect-sprite-18 5.8s steps(17, end) infinite !important;
}
.blur-profile-effect-host[data-blur-profile-effect="toast"] .blur-profile-effect-sprite > .blur-profile-effect-asset {
  animation: blur-profile-effect-sprite-12 4.8s steps(11, end) infinite !important;
}
@keyframes blur-effect-toast-eaten {
  from { left: 0; }
  to { left: -500%; }
}
@keyframes blur-profile-effect-sprite-6 {
  from { left: 0; }
  to { left: -500%; }
}
@keyframes blur-profile-effect-sprite-12 {
  from { left: 0; }
  to { left: -1100%; }
}
@keyframes blur-profile-effect-sprite-18 {
  from { left: 0; }
  to { left: -1700%; }
}
.blur-profile-effect-has-asset::before { display: none; }
.acct-avatar-wrap.blur-profile-effect-host {
  display: inline-grid;
  place-items: center;
  width: max-content;
  height: max-content;
}
.message-avatar-slot.blur-profile-effect-host:has(> .blur-profile-effect-target) {
  display: grid;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  margin-top: 2px;
  align-items: start;
}
.message-avatar-slot.blur-profile-effect-host > .message-avatar,
.message-avatar-slot.blur-profile-effect-host > .friend-row-avatar {
  margin-top: 0;
}
.blur-effect-preview .blur-profile-effect-renderer,
.message-avatar-slot.blur-profile-effect-host,
.blur-profile-effect-renderer:has(> .acct-nav-avatar),
.blur-profile-effect-renderer:has(> .user-bar-avatar),
.blur-profile-effect-renderer:has(> .friend-row-avatar) {
  --blur-effect-gap: -1px;
  --blur-effect-outline: 1px;
  --blur-glow-ring: 1px;
  --blur-glow-blur: 8px;
  --blur-pulse-ring: 3px;
  --blur-holo-ring: 1px;
  --blur-holo-glow: 7px;
  --blur-flame-ring: 1px;
  --blur-flame-y: -4px;
  --blur-flame-blur: 9px;
  --blur-flame-static-ring: 1px;
  --blur-flame-static-y: -3px;
  --blur-flame-static-blur: 7px;
  --blur-spark-ring: 1px;
  --blur-spark-x: 4px;
  --blur-spark-y: -3px;
  --blur-spark-spread: -2px;
  --blur-spark-left-x: -4px;
  --blur-spark-left-y: 4px;
  --blur-spark-left-spread: -3px;
  --blur-pixel-gap: -1px;
  --blur-pixel-shadow: 2px;
}
[data-blur-effect-preview^="profile-"] .blur-profile-effect-asset {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.blur-effect-preview--owned .blur-profile-effect-renderer {
  --blur-effect-gap: -1px;
  --blur-effect-outline: 1px;
  --blur-glow-ring: 1px;
  --blur-glow-blur: 5px;
  --blur-pulse-ring: 2px;
  --blur-holo-ring: 1px;
  --blur-holo-glow: 4px;
  --blur-flame-ring: 1px;
  --blur-flame-y: -2px;
  --blur-flame-blur: 5px;
  --blur-flame-static-ring: 1px;
  --blur-flame-static-y: -2px;
  --blur-flame-static-blur: 4px;
  --blur-spark-ring: 1px;
  --blur-spark-x: 2px;
  --blur-spark-y: -2px;
  --blur-spark-spread: -1px;
  --blur-spark-left-x: -2px;
  --blur-spark-left-y: 2px;
  --blur-spark-left-spread: -2px;
  --blur-pixel-gap: -1px;
  --blur-pixel-shadow: 1px;
}
.profile-settings-v2 .profile-settings-editor .acct-preview .blur-profile-effect-renderer {
  --blur-effect-gap: -2px;
  --blur-effect-outline: 2px;
  --blur-glow-ring: 2px;
  --blur-glow-blur: 12px;
  --blur-pulse-ring: 4px;
  --blur-holo-ring: 2px;
  --blur-holo-glow: 10px;
  --blur-flame-ring: 2px;
  --blur-flame-y: -6px;
  --blur-flame-blur: 13px;
  --blur-flame-static-ring: 2px;
  --blur-flame-static-y: -4px;
  --blur-flame-static-blur: 10px;
  --blur-spark-ring: 2px;
  --blur-spark-x: 6px;
  --blur-spark-y: -4px;
  --blur-spark-spread: -2px;
  --blur-spark-left-x: -5px;
  --blur-spark-left-y: 5px;
  --blur-spark-left-spread: -3px;
  --blur-pixel-gap: -2px;
  --blur-pixel-shadow: 2px;
}
.profile-settings-v2 .profile-settings-editor .acct-preview .blur-profile-effect-renderer {
  /* The preview avatar already has its own banner overlap rhythm. Keep the
     shared renderer in that same slot instead of lifting the effect host,
     which makes the frame look detached from the avatar. */
  margin: 18px 0 0;
}
.profile-settings-v2 .profile-settings-editor .acct-preview .blur-profile-effect-renderer > .acct-avatar,
.profile-settings-v2 .profile-settings-editor .acct-preview .blur-profile-effect-renderer > .acct-avatar-fallback {
  margin: 0 !important;
}
.profile-settings-v2 .profile-settings-editor .blur-profile-effect-target {
  /* Settings previews use the same flat avatar treatment as the shop. This
     prevents legacy profile-card transforms/filters from making the preview
     look like a separate 3D treatment. */
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}
.blur-profile-effect-host > .blur-profile-effect-target { position: relative; z-index: 1; }
.blur-profile-effect-host[data-blur-profile-effect] > .acct-avatar,
.blur-profile-effect-host[data-blur-profile-effect] > .acct-avatar-fallback {
  border-color: var(--surface-2) !important;
  box-shadow: none !important;
}
.blur-profile-effect-host::before {
  content: "";
  position: absolute;
  inset: var(--blur-effect-gap);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
@media (prefers-reduced-motion: reduce) {
  .blur-profile-effect-host::before,
  .blur-profile-effect-target.blur-profile-effect-host,
  .blur-profile-effect-host > .blur-profile-effect-asset { animation: none !important; }
}
@media (max-width: 560px) {
  .blur-avatar-borders-section,
  .blur-profile-effects-section { grid-column: 1; grid-row: 2; }
  .profile-settings-v2 .profile-settings-subtabs { width: 100%; }
  .profile-settings-v2 .profile-settings-subtabs button { flex: 1; }
}