/* What a member wears from «Магазин» — one file for shop/, social/ and account/ (the keys come from assistant/shop-catalog.mjs):
     .av.fr-<key>   the avatar frame (.av — any round avatar; sizes .sm / .xl / .lg)
     .nm-<key>      the colour of the name
     .ttl           the title next to the name
     .pbg-<key>     the background of the profile card
   A new item of the catalog → its class here. */
.av[class*="fr-"]{position:relative}
.av[class*="fr-"]::after{content:"";position:absolute;inset:-4px;border-radius:50%;padding:2.5px;background:var(--fr,#c9d2e3);pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.av.sm[class*="fr-"]::after{inset:-3px;padding:2px}
.av.xl[class*="fr-"]::after,.av.lg[class*="fr-"]::after{inset:-6px;padding:3.5px}
.av.fr-steel{--fr:linear-gradient(135deg,#eef2f8,#8e99ad 55%,#dfe5ee)}
.av.fr-sky{--fr:linear-gradient(135deg,#7fd3ff,#2b5cff)}
.av.fr-emerald{--fr:linear-gradient(135deg,#7ff0c0,#0f8f6a)}
.av.fr-gold{--fr:conic-gradient(from 20deg,#ffe9a8,#c9932b,#fff3c9,#b07a1c,#ffe9a8)}
.av.fr-neon{--fr:conic-gradient(#ff3df2,#36d6ff,#7cff6b,#ffd23d,#ff3df2)}
.av.fr-aurora{--fr:conic-gradient(#3ddc97,#7fd3ff,#b39bff,#3ddc97)}
.av.fr-neon::after,.av.fr-aurora::after{animation:fr-spin 7s linear infinite}
@keyframes fr-spin{to{transform:rotate(1turn)}}
@media (prefers-reduced-motion:reduce){.av.fr-neon::after,.av.fr-aurora::after{animation:none}}

.nm-sky{color:#7fd3ff}.nm-mint{color:#3ddc97}.nm-amber{color:#ffb020}.nm-rose{color:#ff8fb1}.nm-violet{color:#b39bff}
.nm-gold{background:linear-gradient(90deg,#ffe9a8,#e0a93a 50%,#fff3c9);-webkit-background-clip:text;background-clip:text;color:transparent}

.ttl{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.03em;line-height:1.5;padding:0 8px;border-radius:999px;margin-left:6px;vertical-align:middle;white-space:nowrap;
  color:#ffe2a8;-webkit-text-fill-color:#ffe2a8;background:rgba(255,197,66,.12);border:1px solid rgba(255,197,66,.28)}

.pbg-graphite,.card.pbg-graphite{background:linear-gradient(135deg,#232a38,#12151c 55%,#1c2029)}
.pbg-ocean,.card.pbg-ocean{background:linear-gradient(135deg,#0b2b4a,#0f5a7a 50%,#12151c)}
.pbg-sunset,.card.pbg-sunset{background:linear-gradient(135deg,#4a1d3a,#a3482f 50%,#1a1420)}
.pbg-forest,.card.pbg-forest{background:linear-gradient(135deg,#0d3327,#1d6a4a 50%,#11181a)}
.pbg-cosmos,.card.pbg-cosmos{background:radial-gradient(circle at 18% 20%,#3b2a7a,transparent 55%),radial-gradient(circle at 85% 35%,#143a6b,transparent 50%),#0b0d18}