/* Avatar (pfp) frames and profile-card frames. Catalog and SVG ornaments: /assets/js/frames.js */
.avf { position: relative; display: inline-grid; place-items: center; width: var(--s); height: var(--s); flex-shrink: 0; border-radius: 50%; vertical-align: middle; }
.avf > img, .avf > span:not(.avf-ov) { position: relative; z-index: 1; }
.avf::before, .avf::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
/* ::before is the ring itself (a masked disc); ::after is an optional glow behind it. */
.avf::before { inset: calc(var(--s) * -0.075); z-index: 2; --rw: calc(var(--s) * 0.075);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--rw)), #000 calc(100% - var(--rw) + 0.6px));
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--rw)), #000 calc(100% - var(--rw) + 0.6px)); }
.avf::after { inset: calc(var(--s) * -0.07); z-index: 0; }
.avf-ov { position: absolute; inset: -25%; z-index: 3; pointer-events: none; }
.avf-ov svg { width: 100%; height: 100%; display: block; overflow: visible; }

.avf-af_steel::before { background: conic-gradient(from 20deg, #f6f9fc, #8a97a1, #e8edf2, #4f5a64, #f6f9fc, #9aa6b0, #f6f9fc); }
.avf-af_steel::after { box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.avf-af_pixel::before { --rw: calc(var(--s) * 0.09); background: repeating-conic-gradient(#9bbc0f 0 8deg, #306230 8deg 10deg, #0f380f 10deg 18deg, #306230 18deg 20deg); }
.avf-af_pixel::after { box-shadow: 0 0 0 2px #0f380f; }
.avf-af_neon::before { background: conic-gradient(#2ee6ff, #b06bff, #ff2e88, #b06bff, #2ee6ff); }
.avf-af_neon::after { box-shadow: 0 0 calc(var(--s) * .16) rgba(46,230,255,.55), 0 0 calc(var(--s) * .3) rgba(255,46,136,.3); animation: avfBreathe 2.4s ease-in-out infinite; }
.avf-af_laurel::before { --rw: calc(var(--s) * 0.05); background: conic-gradient(#fff1b0, #e8b02a, #9a6a00, #e8b02a, #fff1b0); }
.avf-af_laurel::after { box-shadow: 0 0 calc(var(--s) * .14) rgba(255,200,80,.35); }
.avf-af_thorns::before { --rw: calc(var(--s) * 0.05); background: conic-gradient(#ff3b57, #7a0016, #ff3b57, #3a0008, #ff3b57); }
.avf-af_thorns::after { box-shadow: 0 0 calc(var(--s) * .16) rgba(255,30,60,.45); }
.avf-af_halo::before { --rw: calc(var(--s) * 0.055); background: conic-gradient(#ffffff, #f0c45a, #ffffff, #e8d9a8, #ffffff); }
.avf-af_halo::after { box-shadow: 0 0 calc(var(--s) * .2) rgba(255,230,160,.5); }
.avf-af_balance::before { --rw: calc(var(--s) * 0.085); background: conic-gradient(#f4f4f6 0 50%, #0b0b10 0 100%); animation: avfSpin 6s linear infinite; }
.avf-af_balance::after { box-shadow: 0 0 0 1.5px rgba(255,255,255,.6), 0 0 calc(var(--s) * .14) rgba(255,255,255,.25); }
.avf-af_prism::before { --rw: calc(var(--s) * 0.08); background: conic-gradient(#ff3b57, #ffb020, #ffe14a, #3ccf7a, #4ea8ff, #b06bff, #ff3b57); animation: avfSpin 3s linear infinite; }
.avf-af_prism::after { box-shadow: 0 0 calc(var(--s) * .2) rgba(255,122,224,.45); animation: avfHue 3s linear infinite; }
@keyframes avfSpin { to { transform: rotate(360deg); } }
@keyframes avfBreathe { 50% { opacity: .45; } }
@keyframes avfHue { to { filter: hue-rotate(360deg); } }

/* Profile frames: ::before is a gradient border, ::after carries corner ornaments and glow. */
.pf { position: relative; }
.pf::before, .pf::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 4; }
.pf::before { padding: 2px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.pf-pf_clean::before { background: linear-gradient(135deg, #ffffff, #9aa4ad 40%, #ffffff 60%, #8a97a1); opacity: .8; }
.pf-pf_neon::before { background: linear-gradient(90deg, #2ee6ff, #b06bff, #ff2e88, #2ee6ff); background-size: 300% 100%; animation: pfFlow 4s linear infinite; }
.pf-pf_neon::after { box-shadow: inset 0 0 22px rgba(46,230,255,.18), inset 0 0 40px rgba(255,46,136,.08); }
.pf-pf_gold::before { padding: 3px; background: linear-gradient(135deg, #fff3b0, #e8b02a 30%, #8a5a00 50%, #e8b02a 70%, #fff3b0); }
.pf-pf_gold::after { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2060%2060%22%3E%3Cg%20transform%3D%22rotate%280%2030%2030%29%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fff3b0%22/%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23e8b02a%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%238a5a00%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d%3D%22M3%2046%20V14%20Q3%203%2014%203%20H46%22%20fill%3D%22none%22%20stroke%3D%22url%28%23g%29%22%20stroke-width%3D%223.2%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M9%2036%20V17%20Q9%209%2017%209%20H36%22%20fill%3D%22none%22%20stroke%3D%22url%28%23g%29%22%20stroke-width%3D%221.4%22/%3E%3Cpath%20d%3D%22M14%2014%20q8%20-2%2010%206%20q-6%202%20-10%20-6z%20M14%2014%20q-2%208%206%2010%20q2%20-6%20-6%20-10z%22%20fill%3D%22url%28%23g%29%22/%3E%3Cpath%20d%3D%22M3%203%20l7%200%20l-7%207z%22%20fill%3D%22url%28%23g%29%22/%3E%3Ccircle%20cx%3D%2246%22%20cy%3D%223%22%20r%3D%222.6%22%20fill%3D%22url%28%23g%29%22/%3E%3Ccircle%20cx%3D%223%22%20cy%3D%2246%22%20r%3D%222.6%22%20fill%3D%22url%28%23g%29%22/%3E%3Cpath%20d%3D%22M22%204.5%20l3%20-2.5%20l3%202.5%20l-3%202.5z%20M4.5%2022%20l-2.5%203%20l2.5%203%20l2.5%20-3z%22%20fill%3D%22%23fff3b0%22/%3E%3C/g%3E%3C/svg%3E") top left / 46px 46px no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2060%2060%22%3E%3Cg%20transform%3D%22rotate%2890%2030%2030%29%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fff3b0%22/%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23e8b02a%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%238a5a00%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d%3D%22M3%2046%20V14%20Q3%203%2014%203%20H46%22%20fill%3D%22none%22%20stroke%3D%22url%28%23g%29%22%20stroke-width%3D%223.2%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M9%2036%20V17%20Q9%209%2017%209%20H36%22%20fill%3D%22none%22%20stroke%3D%22url%28%23g%29%22%20stroke-width%3D%221.4%22/%3E%3Cpath%20d%3D%22M14%2014%20q8%20-2%2010%206%20q-6%202%20-10%20-6z%20M14%2014%20q-2%208%206%2010%20q2%20-6%20-6%20-10z%22%20fill%3D%22url%28%23g%29%22/%3E%3Cpath%20d%3D%22M3%203%20l7%200%20l-7%207z%22%20fill%3D%22url%28%23g%29%22/%3E%3Ccircle%20cx%3D%2246%22%20cy%3D%223%22%20r%3D%222.6%22%20fill%3D%22url%28%23g%29%22/%3E%3Ccircle%20cx%3D%223%22%20cy%3D%2246%22%20r%3D%222.6%22%20fill%3D%22url%28%23g%29%22/%3E%3Cpath%20d%3D%22M22%204.5%20l3%20-2.5%20l3%202.5%20l-3%202.5z%20M4.5%2022%20l-2.5%203%20l2.5%203%20l2.5%20-3z%22%20fill%3D%22%23fff3b0%22/%3E%3C/g%3E%3C/svg%3E") top right / 46px 46px no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2060%2060%22%3E%3Cg%20transform%3D%22rotate%28270%2030%2030%29%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fff3b0%22/%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23e8b02a%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%238a5a00%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d%3D%22M3%2046%20V14%20Q3%203%2014%203%20H46%22%20fill%3D%22none%22%20stroke%3D%22url%28%23g%29%22%20stroke-width%3D%223.2%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M9%2036%20V17%20Q9%209%2017%209%20H36%22%20fill%3D%22none%22%20stroke%3D%22url%28%23g%29%22%20stroke-width%3D%221.4%22/%3E%3Cpath%20d%3D%22M14%2014%20q8%20-2%2010%206%20q-6%202%20-10%20-6z%20M14%2014%20q-2%208%206%2010%20q2%20-6%20-6%20-10z%22%20fill%3D%22url%28%23g%29%22/%3E%3Cpath%20d%3D%22M3%203%20l7%200%20l-7%207z%22%20fill%3D%22url%28%23g%29%22/%3E%3Ccircle%20cx%3D%2246%22%20cy%3D%223%22%20r%3D%222.6%22%20fill%3D%22url%28%23g%29%22/%3E%3Ccircle%20cx%3D%223%22%20cy%3D%2246%22%20r%3D%222.6%22%20fill%3D%22url%28%23g%29%22/%3E%3Cpath%20d%3D%22M22%204.5%20l3%20-2.5%20l3%202.5%20l-3%202.5z%20M4.5%2022%20l-2.5%203%20l2.5%203%20l2.5%20-3z%22%20fill%3D%22%23fff3b0%22/%3E%3C/g%3E%3C/svg%3E") bottom left / 46px 46px no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2060%2060%22%3E%3Cg%20transform%3D%22rotate%28180%2030%2030%29%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fff3b0%22/%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23e8b02a%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%238a5a00%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d%3D%22M3%2046%20V14%20Q3%203%2014%203%20H46%22%20fill%3D%22none%22%20stroke%3D%22url%28%23g%29%22%20stroke-width%3D%223.2%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M9%2036%20V17%20Q9%209%2017%209%20H36%22%20fill%3D%22none%22%20stroke%3D%22url%28%23g%29%22%20stroke-width%3D%221.4%22/%3E%3Cpath%20d%3D%22M14%2014%20q8%20-2%2010%206%20q-6%202%20-10%20-6z%20M14%2014%20q-2%208%206%2010%20q2%20-6%20-6%20-10z%22%20fill%3D%22url%28%23g%29%22/%3E%3Cpath%20d%3D%22M3%203%20l7%200%20l-7%207z%22%20fill%3D%22url%28%23g%29%22/%3E%3Ccircle%20cx%3D%2246%22%20cy%3D%223%22%20r%3D%222.6%22%20fill%3D%22url%28%23g%29%22/%3E%3Ccircle%20cx%3D%223%22%20cy%3D%2246%22%20r%3D%222.6%22%20fill%3D%22url%28%23g%29%22/%3E%3Cpath%20d%3D%22M22%204.5%20l3%20-2.5%20l3%202.5%20l-3%202.5z%20M4.5%2022%20l-2.5%203%20l2.5%203%20l2.5%20-3z%22%20fill%3D%22%23fff3b0%22/%3E%3C/g%3E%3C/svg%3E") bottom right / 46px 46px no-repeat; box-shadow: inset 0 0 30px rgba(255,200,80,.12); }
.pf-pf_blood::before { background: linear-gradient(135deg, #ff3b57, #5a0010 50%, #ff3b57); }
.pf-pf_blood::after { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2060%2060%22%3E%3Cg%20transform%3D%22rotate%280%2030%2030%29%22%3E%3Cpath%20d%3D%22M3%2048%20V12%20Q3%203%2012%203%20H48%22%20fill%3D%22none%22%20stroke%3D%22%237a0016%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M3%2048%20V12%20Q3%203%2012%203%20H48%22%20fill%3D%22none%22%20stroke%3D%22%23ff3b57%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M14%203%20l3%20-3%20l1%204z%20M26%203%20l3%20-3%20l1%204z%20M38%203%20l3%20-3%20l1%204z%20M3%2014%20l-3%203%20l4%201z%20M3%2026%20l-3%203%20l4%201z%20M3%2038%20l-3%203%20l4%201z%22%20fill%3D%22%23a8102a%22/%3E%3Cg%20transform%3D%22translate%2812%2012%29%22%3E%3Ccircle%20r%3D%226.5%22%20fill%3D%22%23a8001e%22/%3E%3Cpath%20d%3D%22M-4.5%20-1.5%20Q0%20-6.5%204.5%20-1.5%20Q1.5%203.5%200%201%20Q-1.5%203.5%20-4.5%20-1.5Z%22%20fill%3D%22%23e8304a%22/%3E%3Ccircle%20r%3D%222.2%22%20fill%3D%22%23ff6b80%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") top left / 46px 46px no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2060%2060%22%3E%3Cg%20transform%3D%22rotate%2890%2030%2030%29%22%3E%3Cpath%20d%3D%22M3%2048%20V12%20Q3%203%2012%203%20H48%22%20fill%3D%22none%22%20stroke%3D%22%237a0016%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M3%2048%20V12%20Q3%203%2012%203%20H48%22%20fill%3D%22none%22%20stroke%3D%22%23ff3b57%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M14%203%20l3%20-3%20l1%204z%20M26%203%20l3%20-3%20l1%204z%20M38%203%20l3%20-3%20l1%204z%20M3%2014%20l-3%203%20l4%201z%20M3%2026%20l-3%203%20l4%201z%20M3%2038%20l-3%203%20l4%201z%22%20fill%3D%22%23a8102a%22/%3E%3Cg%20transform%3D%22translate%2812%2012%29%22%3E%3Ccircle%20r%3D%226.5%22%20fill%3D%22%23a8001e%22/%3E%3Cpath%20d%3D%22M-4.5%20-1.5%20Q0%20-6.5%204.5%20-1.5%20Q1.5%203.5%200%201%20Q-1.5%203.5%20-4.5%20-1.5Z%22%20fill%3D%22%23e8304a%22/%3E%3Ccircle%20r%3D%222.2%22%20fill%3D%22%23ff6b80%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") top right / 46px 46px no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2060%2060%22%3E%3Cg%20transform%3D%22rotate%28270%2030%2030%29%22%3E%3Cpath%20d%3D%22M3%2048%20V12%20Q3%203%2012%203%20H48%22%20fill%3D%22none%22%20stroke%3D%22%237a0016%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M3%2048%20V12%20Q3%203%2012%203%20H48%22%20fill%3D%22none%22%20stroke%3D%22%23ff3b57%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M14%203%20l3%20-3%20l1%204z%20M26%203%20l3%20-3%20l1%204z%20M38%203%20l3%20-3%20l1%204z%20M3%2014%20l-3%203%20l4%201z%20M3%2026%20l-3%203%20l4%201z%20M3%2038%20l-3%203%20l4%201z%22%20fill%3D%22%23a8102a%22/%3E%3Cg%20transform%3D%22translate%2812%2012%29%22%3E%3Ccircle%20r%3D%226.5%22%20fill%3D%22%23a8001e%22/%3E%3Cpath%20d%3D%22M-4.5%20-1.5%20Q0%20-6.5%204.5%20-1.5%20Q1.5%203.5%200%201%20Q-1.5%203.5%20-4.5%20-1.5Z%22%20fill%3D%22%23e8304a%22/%3E%3Ccircle%20r%3D%222.2%22%20fill%3D%22%23ff6b80%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") bottom left / 46px 46px no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2060%2060%22%3E%3Cg%20transform%3D%22rotate%28180%2030%2030%29%22%3E%3Cpath%20d%3D%22M3%2048%20V12%20Q3%203%2012%203%20H48%22%20fill%3D%22none%22%20stroke%3D%22%237a0016%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M3%2048%20V12%20Q3%203%2012%203%20H48%22%20fill%3D%22none%22%20stroke%3D%22%23ff3b57%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M14%203%20l3%20-3%20l1%204z%20M26%203%20l3%20-3%20l1%204z%20M38%203%20l3%20-3%20l1%204z%20M3%2014%20l-3%203%20l4%201z%20M3%2026%20l-3%203%20l4%201z%20M3%2038%20l-3%203%20l4%201z%22%20fill%3D%22%23a8102a%22/%3E%3Cg%20transform%3D%22translate%2812%2012%29%22%3E%3Ccircle%20r%3D%226.5%22%20fill%3D%22%23a8001e%22/%3E%3Cpath%20d%3D%22M-4.5%20-1.5%20Q0%20-6.5%204.5%20-1.5%20Q1.5%203.5%200%201%20Q-1.5%203.5%20-4.5%20-1.5Z%22%20fill%3D%22%23e8304a%22/%3E%3Ccircle%20r%3D%222.2%22%20fill%3D%22%23ff6b80%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") bottom right / 46px 46px no-repeat; box-shadow: inset 0 0 34px rgba(255,30,60,.22); }
.pf-pf_heaven::before { background: linear-gradient(135deg, #ffffff, #f0c45a 35%, #ffffff 55%, #e8d9a8); }
.pf-pf_heaven::after { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2060%2060%22%3E%3Cg%20transform%3D%22rotate%280%2030%2030%29%22%3E%3Cpath%20d%3D%22M3%2046%20V14%20Q3%203%2014%203%20H46%22%20fill%3D%22none%22%20stroke%3D%22%23f0c45a%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22/%3E%3Cg%20fill%3D%22%23ffffff%22%20stroke%3D%22%23c9b27a%22%20stroke-width%3D%22.7%22%3E%3Cellipse%20cx%3D%2222%22%20cy%3D%2210%22%20rx%3D%2212%22%20ry%3D%223.4%22%20transform%3D%22rotate%28-12%2022%2010%29%22/%3E%3Cellipse%20cx%3D%2218%22%20cy%3D%2215%22%20rx%3D%2210%22%20ry%3D%223%22%20transform%3D%22rotate%28-30%2018%2015%29%22/%3E%3Cellipse%20cx%3D%2210%22%20cy%3D%2222%22%20rx%3D%2212%22%20ry%3D%223.4%22%20transform%3D%22rotate%28-78%2010%2022%29%22/%3E%3Cellipse%20cx%3D%2215%22%20cy%3D%2218%22%20rx%3D%2210%22%20ry%3D%223%22%20transform%3D%22rotate%28-60%2015%2018%29%22/%3E%3C/g%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%223%22%20fill%3D%22%23fff6d6%22%20stroke%3D%22%23f0c45a%22%20stroke-width%3D%221%22/%3E%3C/g%3E%3C/svg%3E") top left / 46px 46px no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2060%2060%22%3E%3Cg%20transform%3D%22rotate%2890%2030%2030%29%22%3E%3Cpath%20d%3D%22M3%2046%20V14%20Q3%203%2014%203%20H46%22%20fill%3D%22none%22%20stroke%3D%22%23f0c45a%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22/%3E%3Cg%20fill%3D%22%23ffffff%22%20stroke%3D%22%23c9b27a%22%20stroke-width%3D%22.7%22%3E%3Cellipse%20cx%3D%2222%22%20cy%3D%2210%22%20rx%3D%2212%22%20ry%3D%223.4%22%20transform%3D%22rotate%28-12%2022%2010%29%22/%3E%3Cellipse%20cx%3D%2218%22%20cy%3D%2215%22%20rx%3D%2210%22%20ry%3D%223%22%20transform%3D%22rotate%28-30%2018%2015%29%22/%3E%3Cellipse%20cx%3D%2210%22%20cy%3D%2222%22%20rx%3D%2212%22%20ry%3D%223.4%22%20transform%3D%22rotate%28-78%2010%2022%29%22/%3E%3Cellipse%20cx%3D%2215%22%20cy%3D%2218%22%20rx%3D%2210%22%20ry%3D%223%22%20transform%3D%22rotate%28-60%2015%2018%29%22/%3E%3C/g%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%223%22%20fill%3D%22%23fff6d6%22%20stroke%3D%22%23f0c45a%22%20stroke-width%3D%221%22/%3E%3C/g%3E%3C/svg%3E") top right / 46px 46px no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2060%2060%22%3E%3Cg%20transform%3D%22rotate%28270%2030%2030%29%22%3E%3Cpath%20d%3D%22M3%2046%20V14%20Q3%203%2014%203%20H46%22%20fill%3D%22none%22%20stroke%3D%22%23f0c45a%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22/%3E%3Cg%20fill%3D%22%23ffffff%22%20stroke%3D%22%23c9b27a%22%20stroke-width%3D%22.7%22%3E%3Cellipse%20cx%3D%2222%22%20cy%3D%2210%22%20rx%3D%2212%22%20ry%3D%223.4%22%20transform%3D%22rotate%28-12%2022%2010%29%22/%3E%3Cellipse%20cx%3D%2218%22%20cy%3D%2215%22%20rx%3D%2210%22%20ry%3D%223%22%20transform%3D%22rotate%28-30%2018%2015%29%22/%3E%3Cellipse%20cx%3D%2210%22%20cy%3D%2222%22%20rx%3D%2212%22%20ry%3D%223.4%22%20transform%3D%22rotate%28-78%2010%2022%29%22/%3E%3Cellipse%20cx%3D%2215%22%20cy%3D%2218%22%20rx%3D%2210%22%20ry%3D%223%22%20transform%3D%22rotate%28-60%2015%2018%29%22/%3E%3C/g%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%223%22%20fill%3D%22%23fff6d6%22%20stroke%3D%22%23f0c45a%22%20stroke-width%3D%221%22/%3E%3C/g%3E%3C/svg%3E") bottom left / 46px 46px no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2060%2060%22%3E%3Cg%20transform%3D%22rotate%28180%2030%2030%29%22%3E%3Cpath%20d%3D%22M3%2046%20V14%20Q3%203%2014%203%20H46%22%20fill%3D%22none%22%20stroke%3D%22%23f0c45a%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22/%3E%3Cg%20fill%3D%22%23ffffff%22%20stroke%3D%22%23c9b27a%22%20stroke-width%3D%22.7%22%3E%3Cellipse%20cx%3D%2222%22%20cy%3D%2210%22%20rx%3D%2212%22%20ry%3D%223.4%22%20transform%3D%22rotate%28-12%2022%2010%29%22/%3E%3Cellipse%20cx%3D%2218%22%20cy%3D%2215%22%20rx%3D%2210%22%20ry%3D%223%22%20transform%3D%22rotate%28-30%2018%2015%29%22/%3E%3Cellipse%20cx%3D%2210%22%20cy%3D%2222%22%20rx%3D%2212%22%20ry%3D%223.4%22%20transform%3D%22rotate%28-78%2010%2022%29%22/%3E%3Cellipse%20cx%3D%2215%22%20cy%3D%2218%22%20rx%3D%2210%22%20ry%3D%223%22%20transform%3D%22rotate%28-60%2015%2018%29%22/%3E%3C/g%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%223%22%20fill%3D%22%23fff6d6%22%20stroke%3D%22%23f0c45a%22%20stroke-width%3D%221%22/%3E%3C/g%3E%3C/svg%3E") bottom right / 46px 46px no-repeat; box-shadow: inset 0 0 34px rgba(255,236,180,.2); }
.pf-pf_prism::before { padding: 3px; background: linear-gradient(90deg, #ff3b57, #ffb020, #ffe14a, #3ccf7a, #4ea8ff, #b06bff, #ff3b57); background-size: 300% 100%; animation: pfFlow 3s linear infinite; }
.pf-pf_prism::after { box-shadow: inset 0 0 30px rgba(255,122,224,.14); }
@keyframes pfFlow { to { background-position: 300% 0; } }
@media (prefers-reduced-motion: reduce) { .avf::before, .avf::after, .pf::before { animation: none !important; } }

/* Frame pickers (account Customize) */
.frame-h { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted, #8a8494); margin: 4px 0 10px; font-weight: 700; }
.frame-h:not(:first-child) { margin-top: 22px; }
.frame-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.frame-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 8px 12px; border-radius: 12px; border: 2px solid var(--line-2, rgba(255,255,255,.12)); background: rgba(255,255,255,.03); color: inherit; cursor: pointer; font: inherit; transition: border-color .15s ease, transform .15s ease; }
.frame-tile:hover { border-color: rgba(255,255,255,.4); transform: translateY(-2px); }
.frame-tile.equipped { border-color: var(--accent, #2ee6ff); }
.frame-tile .swatch-check { position: absolute; top: 6px; right: 6px; }
.ft-prev { height: 78px; display: grid; place-items: center; }
.ft-name { font-size: 12.5px; font-weight: 600; }
.ft-card { display: flex; flex-direction: column; gap: 6px; justify-content: center; width: 96px; height: 64px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.ft-card i { display: block; height: 6px; border-radius: 3px; background: rgba(255,255,255,.18); }
.ft-card i:first-child { width: 60%; background: rgba(255,255,255,.35); }
.ft-card i:last-child { width: 40%; }
.frame-empty { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted, #8a8494); padding: 8px 2px; }