@font-face {
            font-family: 'BFA Font';
            src: url('../uploads/fonts/ku/bfa.ttf') format('truetype');
            font-display: swap;
        }

        @font-face {
            font-family: 'BFA Rêbaz';
            src: url('../uploads/fonts/ku/bfa1.ttf') format('truetype');
            font-display: swap;
        }

        @font-face {
            font-family: 'BFA Sarwar';
            src: url('../uploads/fonts/ku/bfa2.ttf') format('truetype');
            font-display: swap;
        }

        @font-face {
            font-family: 'BFA Hawler';
            src: url('../uploads/fonts/ku/bfa3.ttf') format('truetype');
            font-display: swap;
        }

        @font-face {
            font-family: 'BFA Zanko';
            src: url('../uploads/fonts/ku/bfa4.ttf') format('truetype');
            font-display: swap;
        }

        @font-face {
            font-family: 'BFA Nali';
            src: url('../uploads/fonts/ku/bfa5.ttf') format('truetype');
            font-display: swap;
        }

        @font-face {
            font-family: 'Aligarh Arabic';
            src: url('../uploads/fonts/ar/AligarhArabicFREEPERSONALUSE-SemiBold.otf') format('opentype');
            font-display: swap;
        }

        @font-face {
            font-family: 'Lutfey Arabic';
            src: url('../uploads/fonts/ar/LutfeyArabicDEMO-Regular.otf') format('opentype');
            font-display: swap;
        }

        @font-face {
            font-family: 'Lutfey Outline';
            src: url('../uploads/fonts/ar/LutfeyArabicDEMO-Outline.otf') format('opentype');
            font-display: swap;
        }

        @font-face {
            font-family: 'Naveid Arabic';
            src: url('../uploads/fonts/ar/NaveidArabicDEMO-Regular.otf') format('opentype');
            font-display: swap;
        }

        @font-face {
            font-family: 'Naveid Black';
            src: url('../uploads/fonts/ar/NaveidArabicDEMO-ExtraBold.otf') format('opentype');
            font-display: swap;
        }

        @font-face {
            font-family: 'Naveid Thin';
            src: url('../uploads/fonts/ar/NaveidArabicDEMO-Thin.otf') format('opentype');
            font-display: swap;
        }

        @font-face {
            font-family: 'Tufuli Arabic';
            src: url('../uploads/fonts/ar/TufuliArabicDEMO-Regular.otf') format('opentype');
            font-display: swap;
        }

        @font-face {
            font-family: 'Tufuli Bold';
            src: url('../uploads/fonts/ar/TufuliArabicDEMO-Bold.otf') format('opentype');
            font-display: swap;
        }

        /* ---------- avatar border animations ---------- */
        @keyframes spinKf { to { transform: rotate(360deg); } }
        .arc-ring {
            position: absolute; inset: -6px; border-radius: 9999px;
            background: conic-gradient(#fff 0 30%, transparent 30% 100%);
            -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
            animation: spinKf 2.2s linear infinite;
        }
        .av-white, .av-white2, .av-wpulse { position: relative; }
        .av-white::after, .av-white2::after, .av-wpulse::after {
            content: ''; position: absolute; border-radius: 9999px; pointer-events: none;
        }
        .av-white::after  { inset: -5px; border: 2px solid rgba(255,255,255,.9); }
        .av-white2::after { inset: -7px; border: 2px solid rgba(255,255,255,.85); box-shadow: 0 0 0 3px rgba(255,255,255,.16); }
        .av-wpulse::after { inset: -5px; border: 2px solid rgba(255,255,255,.9); animation: wpulseKf 1.9s ease-out infinite; }
        @keyframes wpulseKf { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.2); opacity: 0; } }

        body {
            font-family: 'BFA Font', 'Noto Kufi Arabic', sans-serif;
        }

        .font-numbers {
            font-family: 'Space Mono', monospace;
        }

        [x-cloak] {
            display: none !important;
        }

        .hide-scrollbar::-webkit-scrollbar {
            display: none;
        }

        .hide-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        /* Scrollbars hidden site-wide (scrolling itself still works). */
        html,
        body,
        * {
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        html::-webkit-scrollbar,
        body::-webkit-scrollbar,
        *::-webkit-scrollbar {
            width: 0;
            height: 0;
            display: none;
        }

        .bento {
            background: #0F1117;
            border: 1px solid #1A1D24;
            border-radius: 20px;
            transition: border-color .2s ease;
        }

        .bento:hover {
            border-color: #242832;
        }

        /* Same surface token as .bento, slightly larger radius for the
           full-width wizard panels on the add-bio page. */
        .bento-card {
            background: #0F1117;
            border: 1px solid #1A1D24;
            border-radius: 22px;
            transition: border-color .2s ease;
        }

        .b-title {
            font-size: 13px;
            font-weight: 700;
            color: #E0E2E8;
            letter-spacing: -0.01em;
        }

        .b-sub {
            font-size: 10.5px;
            font-weight: 500;
            color: #5A5F6B;
        }

        /* Desktop legibility pass for the edit modal: its markup is built around
           7-13px type that reads fine on a phone but is too small on a monitor.
           Scoped to .em-scale so nothing else on the page is affected. */
        @media (min-width: 1024px) {
            .em-scale [class*="text-[7px]"] { font-size: 9.5px; }
            .em-scale [class*="text-[8px]"] { font-size: 10.5px; }
            .em-scale [class*="text-[9px]"] { font-size: 11.5px; }
            .em-scale [class*="text-[10px]"] { font-size: 12.5px; }
            .em-scale [class*="text-[11px]"] { font-size: 13.5px; }
            .em-scale [class*="text-[12px]"] { font-size: 14.5px; }
            .em-scale [class*="text-[13px]"] { font-size: 15.5px; }
            .em-scale [class*="text-[15px]"] { font-size: 17.5px; }
            .em-scale [class*="text-[16px]"] { font-size: 18.5px; }
            .em-scale input,
            .em-scale textarea { font-size: 14px; }
        }

        @keyframes fadeUp {
            from {
                opacity: 0;
                transform: translateY(8px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .rise {
            opacity: 0;
            animation: fadeUp .34s cubic-bezier(.33, 1, .68, 1) forwards;
        }

        @keyframes slideInFade {
            from {
                opacity: 0;
                transform: translateY(6px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .stagger-item {
            opacity: 0;
            animation: slideInFade .28s cubic-bezier(.33, 1, .68, 1) forwards;
        }

        @keyframes drawLine {
            to {
                stroke-dashoffset: 0;
            }
        }

        .draw-anim {
            stroke-dasharray: 420;
            stroke-dashoffset: 420;
            animation: drawLine 1.5s cubic-bezier(.4, 0, .2, 1) forwards;
        }

        @keyframes fadeArea {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .area-anim {
            animation: fadeArea 1.1s .35s both;
        }

        @keyframes popIn {
            from {
                opacity: 0;
                transform: scale(0);
            }

            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        .pop-anim {
            animation: popIn .5s 1s cubic-bezier(.34, 1.56, .64, 1) both;
        }

        @keyframes floaty {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-8px);
            }
        }

        .floaty {
            animation: floaty 3s ease-in-out infinite;
        }

        @keyframes spinKf {
            to {
                transform: rotate(360deg);
            }
        }

        .spin-slow {
            animation: spinKf 4s linear infinite;
        }

        .a-spin {
            animation: spinKf 3s linear infinite;
        }

        @keyframes sPulse {

            0%,
            100% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.14);
            }
        }

        .a-pulse {
            animation: sPulse 1.6s ease-in-out infinite;
        }

        @keyframes sShake {

            0%,
            100% {
                transform: translateX(0);
            }

            25% {
                transform: translateX(-2.5px);
            }

            75% {
                transform: translateX(2.5px);
            }
        }

        .a-shake {
            animation: sShake .5s ease-in-out infinite;
        }

        @keyframes sWiggle {

            0%,
            100% {
                transform: rotate(-8deg);
            }

            50% {
                transform: rotate(8deg);
            }
        }

        .a-wiggle {
            animation: sWiggle .8s ease-in-out infinite;
        }

        @keyframes sTada {

            0%,
            100% {
                transform: scale(1) rotate(0);
            }

            20% {
                transform: scale(.92) rotate(-4deg);
            }

            45% {
                transform: scale(1.12) rotate(4deg);
            }

            70% {
                transform: scale(1.12) rotate(-4deg);
            }
        }

        .a-tada {
            animation: sTada 1.6s ease-in-out infinite;
        }

        @keyframes sGlow {

            0%,
            100% {
                box-shadow: 0 0 6px rgba(255, 255, 255, .15);
            }

            50% {
                box-shadow: 0 0 22px rgba(255, 255, 255, .45);
            }
        }

        .a-glow {
            animation: sGlow 1.6s ease-in-out infinite;
        }

        .a-bounce {
            animation: sBounce 1.2s ease-in-out infinite;
        }

        @keyframes sBounce {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-7px);
            }
        }

        .a-float {
            animation: floaty 2.6s ease-in-out infinite;
        }

        /* --- card animations: a line that travels around the edge ---
           The moving angle needs @property so the browser can interpolate it;
           without it the gradient renders static (acceptable fallback). */
        @property --ang {
            syntax: '<angle>';
            initial-value: 0deg;
            inherits: false;
        }

        @keyframes angRun {
            to {
                --ang: 360deg;
            }
        }

        .a-line,
        .a-line2 {
            position: relative;
        }

        .a-line::before,
        .a-line2::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            padding: 1.5px;
            -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, linear-gradient(#000 0 0);
            mask-composite: exclude;
            animation: angRun 2.8s linear infinite;
            pointer-events: none;
        }

        .a-line::before {
            background: conic-gradient(from var(--ang), transparent 0 72%, currentColor 86%, transparent 95%);
        }

        .a-line2::before {
            background: conic-gradient(from var(--ang),
                    currentColor 0 5%, transparent 12% 45%,
                    currentColor 50% 55%, transparent 62% 100%);
        }

        .a-sheen {
            position: relative;
            overflow: hidden;
        }

        .a-sheen::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .20) 48%, transparent 62%);
            background-size: 260% 100%;
            background-repeat: no-repeat;
            animation: sheenRun 3s ease-in-out infinite;
            pointer-events: none;
        }

        @keyframes sheenRun {
            0% {
                background-position: 200% 0;
            }

            60%,
            100% {
                background-position: -60% 0;
            }
        }

        @keyframes fall {
            0% {
                transform: translateY(-40px);
                opacity: 0;
            }

            12% {
                opacity: .9;
            }

            100% {
                transform: translateY(280px);
                opacity: .15;
            }
        }

        .flake {
            position: absolute;
            top: -20px;
            animation: fall linear infinite;
            pointer-events: none;
            user-select: none;
        }

        @keyframes shrinkBar {
            from {
                width: 100%;
            }

            to {
                width: 0%;
            }
        }

        .toast-bar {
            animation: shrinkBar 5s linear forwards;
        }

        .seek {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 6px;
            border-radius: 9999px;
            background: linear-gradient(to left, #4C9B8A var(--p, 50%), #141720 var(--p, 50%));
            outline: none;
            cursor: pointer;
        }

        /* LTR (English): fill the seekbar from the left instead of the right */
        [dir="ltr"] .seek:not(.hue) {
            background: linear-gradient(to right, #4C9B8A var(--p, 50%), #141720 var(--p, 50%));
        }

        .seek::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #fff;
            border: 3px solid #4C9B8A;
            transition: transform .15s ease;
        }

        .seek::-webkit-slider-thumb:hover {
            transform: scale(1.12);
        }

        .seek::-moz-range-thumb {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #fff;
            border: 3px solid #4C9B8A;
        }

        .swatch {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 44px;
            border: none;
            border-radius: 14px;
            background: none;
            cursor: pointer;
            padding: 0;
        }

        .swatch::-webkit-color-swatch-wrapper {
            padding: 0;
        }

        .swatch::-webkit-color-swatch {
            border: 2px solid #2A2B31;
            border-radius: 14px;
        }

        .swatch::-moz-color-swatch {
            border: 2px solid #2A2B31;
            border-radius: 14px;
        }

        .ants {
            --ac: #2A2B31;
            background-image: linear-gradient(90deg, var(--ac) 55%, transparent 45%), linear-gradient(90deg, var(--ac) 55%, transparent 45%), linear-gradient(0deg, var(--ac) 55%, transparent 45%), linear-gradient(0deg, var(--ac) 55%, transparent 45%);
            background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
            background-size: 14px 2px, 14px 2px, 2px 14px, 2px 14px;
            background-position: 0 0, 0 100%, 0 0, 100% 0;
        }

        .ants:hover {
            --ac: #3b82f6;
            animation: antsMove .7s linear infinite;
        }

        .ants-drag {
            --ac: #34d399 !important;
            animation: antsMove .45s linear infinite !important;
        }

        @keyframes antsMove {
            to {
                background-position: 14px 0, -14px 100%, 0 -14px, 100% 14px;
            }
        }

        .av-white,
        .av-white2,
        .av-wpulse {
            position: relative;
        }

        .av-white::after,
        .av-white2::after,
        .av-wpulse::after {
            content: '';
            position: absolute;
            border-radius: 9999px;
            pointer-events: none;
        }

        .av-white::after {
            inset: -4px;
            border: 2px solid rgba(255, 255, 255, .9);
        }

        .av-white2::after {
            inset: -6px;
            border: 2px solid rgba(255, 255, 255, .85);
            box-shadow: 0 0 0 3px rgba(255, 255, 255, .16);
        }

        .av-wpulse::after {
            inset: -4px;
            border: 2px solid rgba(255, 255, 255, .9);
            animation: wpulseKf 1.9s ease-out infinite;
        }

        @keyframes wpulseKf {
            0% {
                transform: scale(1);
                opacity: .9;
            }

            100% {
                transform: scale(1.2);
                opacity: 0;
            }
        }

        .arc-ring {
            position: absolute;
            inset: -6px;
            border-radius: 9999px;
            background: conic-gradient(#ffffff 0 30%, transparent 30% 100%);
            -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
            animation: spinKf 2.2s linear infinite;
        }

        .flake-sm {
            position: absolute;
            top: -14px;
            pointer-events: none;
            user-select: none;
            line-height: 1;
        }

        .fx-fall,
        .fx-fast {
            animation: fallSm linear infinite;
        }

        @keyframes riseKf {
            0% {
                transform: translateY(56px) scale(.7);
                opacity: 0;
            }

            25% {
                opacity: 1;
            }

            100% {
                transform: translateY(-6px) scale(1.05);
                opacity: 0;
            }
        }

        .fx-rise {
            top: auto;
            bottom: -12px;
            animation: riseKf linear infinite;
        }

        @keyframes swayKf {
            0% {
                transform: translate(0, 0) rotate(0deg);
                opacity: 0;
            }

            15% {
                opacity: 1;
            }

            50% {
                transform: translate(10px, 34px) rotate(140deg);
            }

            100% {
                transform: translate(-8px, 70px) rotate(300deg);
                opacity: .1;
            }
        }

        .fx-sway {
            animation: swayKf linear infinite;
        }

        @keyframes spinKf2 {
            0% {
                transform: translateY(0) rotate(0deg) scaleY(1);
                opacity: 0;
            }

            15% {
                opacity: 1;
            }

            100% {
                transform: translateY(72px) rotate(720deg) scaleY(.4);
                opacity: .15;
            }
        }

        .fx-spin {
            animation: spinKf2 linear infinite;
        }

        @keyframes twinkleKf {

            0%,
            100% {
                transform: scale(.4);
                opacity: .15;
            }

            50% {
                transform: scale(1.15);
                opacity: 1;
            }
        }

        .fx-twinkle {
            animation: twinkleKf ease-in-out infinite;
        }

        @keyframes waveKf {
            0% {
                transform: translate(0, 56px) rotate(-8deg);
                opacity: 0;
            }

            20% {
                opacity: 1;
            }

            50% {
                transform: translate(12px, 26px) rotate(8deg);
            }

            100% {
                transform: translate(-4px, -8px) rotate(-8deg);
                opacity: 0;
            }
        }

        .fx-wave {
            animation: waveKf ease-in-out infinite;
        }

        @keyframes driftKf {
            0% {
                transform: translate(-14px, -6px) rotate(0deg);
                opacity: 0;
            }

            20% {
                opacity: .95;
            }

            100% {
                transform: translate(22px, 66px) rotate(190deg);
                opacity: .1;
            }
        }

        .fx-drift {
            animation: driftKf linear infinite;
        }

        @keyframes flashKf {

            0%,
            72%,
            100% {
                opacity: 0;
                transform: scale(.7);
            }

            78% {
                opacity: 1;
                transform: scale(1.2);
            }

            84% {
                opacity: .25;
                transform: scale(1);
            }

            90% {
                opacity: 1;
                transform: scale(1.1);
            }
        }

        .fx-flash {
            animation: flashKf ease-out infinite;
        }

        @keyframes gemKf {

            0%,
            100% {
                transform: rotate(0deg) scale(.85);
                opacity: .45;
            }

            50% {
                transform: rotate(180deg) scale(1.15);
                opacity: 1;
            }
        }

        .fx-gem {
            animation: gemKf ease-in-out infinite;
        }

        @keyframes flutterKf {
            0% {
                transform: translate(-10px, 46px) rotate(-12deg) scale(.85);
                opacity: 0;
            }

            20% {
                opacity: 1;
            }

            45% {
                transform: translate(14px, 26px) rotate(10deg) scale(1.05);
            }

            75% {
                transform: translate(-6px, 8px) rotate(-8deg) scale(.95);
            }

            100% {
                transform: translate(10px, -10px) rotate(6deg) scale(.9);
                opacity: 0;
            }
        }

        .fx-flutter {
            animation: flutterKf ease-in-out infinite;
        }

        @keyframes floatKf {

            0%,
            100% {
                transform: translateY(0) scale(1);
                opacity: .55;
            }

            50% {
                transform: translateY(-7px) scale(1.12);
                opacity: 1;
            }
        }

        .fx-float {
            animation: floatKf ease-in-out infinite;
        }

        @keyframes fallSm {
            0% {
                transform: translateY(0);
                opacity: 0;
            }

            15% {
                opacity: 1;
            }

            100% {
                transform: translateY(78px);
                opacity: .1;
            }
        }

        .seek.hue {
            background: linear-gradient(to left, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
        }

        @keyframes heartKf {

            0%,
            100% {
                transform: scale(1);
            }

            14% {
                transform: scale(1.12);
            }

            28% {
                transform: scale(1);
            }

            42% {
                transform: scale(1.12);
            }

            56% {
                transform: scale(1);
            }
        }

        .a-heartbeat {
            animation: heartKf 1.4s ease-in-out infinite;
        }

        @keyframes shimmerKf {
            to {
                background-position: -200% 0;
            }
        }

        .name-shimmer {
            background: linear-gradient(90deg, #ffffff 0%, #3b82f6 30%, #ffffff 60%);
            background-size: 200% 100%;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent !important;
            animation: shimmerKf 2.4s linear infinite;
        }

        @keyframes nameGlowKf {

            0%,
            100% {
                text-shadow: 0 0 4px rgba(255, 255, 255, .2);
            }

            50% {
                text-shadow: 0 0 16px rgba(255, 255, 255, .75);
            }
        }

        .name-glow {
            animation: nameGlowKf 1.8s ease-in-out infinite;
        }

        /* types the name out, holds, then repeats */
        @keyframes typeKf {
            0% {
                width: 0;
            }

            55%,
            100% {
                width: 100%;
            }
        }

        @keyframes caretKf {
            50% {
                border-color: transparent;
            }
        }

        .name-type {
            display: inline-block;
            overflow: hidden;
            white-space: nowrap;
            vertical-align: bottom;
            border-inline-end: 2px solid currentColor;
            animation: typeKf 3.4s steps(26, end) infinite, caretKf .8s step-end infinite;
        }

        /* glow that takes the name's own colour instead of white */
        @keyframes nameCGlowKf {

            0%,
            100% {
                text-shadow: 0 0 6px currentColor;
            }

            50% {
                text-shadow: 0 0 20px currentColor, 0 0 34px currentColor;
            }
        }

        .name-cglow {
            animation: nameCGlowKf 1.9s ease-in-out infinite;
        }

        @media (prefers-reduced-motion: reduce) {

            .rise,
            .stagger-item,
            .draw-anim,
            .area-anim,
            .pop-anim,
            .floaty,
            .flake,
            .a-pulse,
            .a-shake,
            .a-wiggle,
            .a-tada,
            .a-glow,
            .a-bounce,
            .a-line,
            .a-line2,
            .a-sheen,
            .a-float,
            .a-spin,
            .av-wpulse::after,
            .fx-fall,
            .fx-fast,
            .fx-rise,
            .fx-sway,
            .fx-spin,
            .fx-twinkle,
            .fx-wave,
            .fx-drift,
            .fx-flash,
            .fx-gem,
            .fx-flutter,
            .fx-float,
            .spin-slow,
            .name-shimmer,
            .name-glow,
            .name-cglow {
                animation: none;
                opacity: 1;
                stroke-dashoffset: 0;
            }

            .name-type {
                animation: none;
                width: auto;
                border-inline-end: 0;
            }
        }

        /* --- extra social-card animations (batch B) --- */
        @keyframes sShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-2px)} 75%{transform:translateX(2px)} }
        .a-shake { animation: sShake 2.6s ease-in-out infinite; }
        @keyframes sFloat2 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
        .a-float { animation: sFloat2 2.6s ease-in-out infinite; }
        @keyframes sBreathe { 0%,100%{opacity:.82} 50%{opacity:1} }
        .a-breathe { animation: sBreathe 2.4s ease-in-out infinite; }
        @keyframes sTilt { 0%,100%{transform:rotate(-.7deg)} 50%{transform:rotate(.7deg)} }
        .a-tilt { animation: sTilt 3s ease-in-out infinite; }
        .a-ring { position: relative; }
        .a-ring::after { content:''; position:absolute; inset:0; border-radius:inherit; border:1.5px solid currentColor; opacity:.5; animation: sRingKf 2s ease-out infinite; pointer-events:none; }
        @keyframes sRingKf { 0%{transform:scale(1);opacity:.5} 100%{transform:scale(1.05);opacity:0} }
        /* --- extra name (text motion) animations (batch B) --- */
        @keyframes nWaveKf { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
        .name-wave { animation: nWaveKf 1.7s ease-in-out infinite; }
        @keyframes nFadeKf { 0%,100%{opacity:1} 50%{opacity:.5} }
        .name-fade { animation: nFadeKf 2s ease-in-out infinite; }
        @keyframes nRainbowKf { to { filter: hue-rotate(360deg); } }
        .name-rainbow { animation: nRainbowKf 4s linear infinite; }
        @keyframes nFlickerKf { 0%,19%,21%,23%,25%,54%,56%,100%{opacity:1} 20%,24%,55%{opacity:.35} }
        .name-flicker { animation: nFlickerKf 3.2s linear infinite; }
        @keyframes nPulseKf { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
        .name-pulse { animation: nPulseKf 1.8s ease-in-out infinite; }

        /* --- screen fx: tv scanlines / glitch --- */
        .bg-fx-overlay { position: fixed; inset: 0; z-index: -10; pointer-events: none; }
        .bg-fx-scanline { background: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, rgba(0,0,0,.10) 1px 3px); animation: scanMoveKf .5s steps(2) infinite; opacity: .55; }
        @keyframes scanMoveKf { to { background-position: 0 3px; } }
        .bg-fx-glitch { background: repeating-linear-gradient(0deg, rgba(255,0,80,.06) 0 2px, rgba(0,225,255,.06) 2px 4px, transparent 4px 9px); animation: glitchShiftKf 2s steps(3) infinite; mix-blend-mode: screen; opacity: .6; }
        @keyframes glitchShiftKf { 0%,100%{transform:translateX(0)} 33%{transform:translateX(-3px)} 66%{transform:translateX(3px)} }

        /* --- extra avatar borders (batch F) --- */
        .av-glow, .av-dashed, .av-dotted, .av-double2, .av-spin, .av-rainbow, .av-neon, .av-thick, .av-gradient, .av-ping { position: relative; }
        .av-glow::after, .av-dashed::after, .av-dotted::after, .av-double2::after, .av-neon::after, .av-thick::after { content:''; position:absolute; border-radius:9999px; pointer-events:none; }
        .av-glow::after { inset:-4px; border:2px solid rgba(255,255,255,.85); animation: avGlowKf 2s ease-in-out infinite; }
        @keyframes avGlowKf { 0%,100%{box-shadow:0 0 8px rgba(255,255,255,.35)} 50%{box-shadow:0 0 20px rgba(255,255,255,.75)} }
        .av-dashed::after { inset:-5px; border:2px dashed rgba(255,255,255,.9); animation: spinKf 16s linear infinite; }
        .av-dotted::after { inset:-5px; border:3px dotted rgba(255,255,255,.9); }
        .av-double2::after { inset:-6px; border:3px double rgba(255,255,255,.9); }
        .av-neon::after { inset:-4px; border:2px solid #34e3c4; box-shadow:0 0 10px #34e3c4, inset 0 0 6px rgba(52,227,196,.6); }
        .av-thick::after { inset:-6px; border:4px solid rgba(255,255,255,.92); }
        .av-spin::after, .av-rainbow::after, .av-gradient::after {
            content:''; position:absolute; inset:-5px; border-radius:9999px; pointer-events:none;
            -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
        }
        .av-spin::after { background: conic-gradient(from 0deg, #fff, transparent 55%, #fff); animation: spinKf 2.4s linear infinite; }
        .av-rainbow::after { background: conic-gradient(from 0deg, #ff004c, #ffb800, #37ff5c, #00e1ff, #7a5cff, #ff004c); animation: spinKf 3s linear infinite; }
        .av-gradient::after { background: conic-gradient(#fff, #9ad9c9, #6ea8ff, #fff); }
        .av-ping::after, .av-ping::before { content:''; position:absolute; inset:-4px; border-radius:9999px; border:2px solid rgba(255,255,255,.8); pointer-events:none; animation: wpulseKf 2s ease-out infinite; }
        .av-ping::before { animation-delay: 1s; }