/* ═══════════════════════════════════════════════════════════════
   JIFANA FORUM — molduras de avatar e tags de usuário (10 estilos)
   ═══════════════════════════════════════════════════════════════
   Carregado no front E no painel (prévia da Progressão). Usa os tokens do
   tema com fallback literal — o painel do WordPress não tem o :root do tema.

   Escala de prestígio (1 → 10):
   discreto → osso → crepúsculo → arcano → arcano vivo → brasa → brasa viva
   → ouro → ouro vivo → lendário (gradiente cônico animado).
   ═══════════════════════════════════════════════════════════════ */

/* ── Moldura: um anel desenhado pelo padding do invólucro ────── */
.jff-frame{
  position:relative; display:inline-flex; flex-shrink:0;
  padding:2px; border-radius:50%;
  background:var(--ink-700, #282035);
}
.jff-frame > *{ display:block; }
/* o avatar interno já tem a própria borda; o anel fica por fora dela */

.jff-frame-1{ background:var(--ink-600, #3A3049); }
.jff-frame-2{ background:var(--bone-muted, #A99FB8); }
.jff-frame-3{ background:linear-gradient(135deg, var(--dusk-light, #5A6FA8), var(--dusk, #2B3E6B)); }
.jff-frame-4{ background:var(--arcane, #5FE3C8); }
.jff-frame-5{
  padding:3px;
  background:linear-gradient(135deg, var(--arcane, #5FE3C8), var(--dusk-light, #5A6FA8));
  box-shadow:0 0 12px rgba(95,227,200,.35);
}
.jff-frame-6{ padding:3px; background:var(--ember, #FF6B2C); }
.jff-frame-7{
  padding:3px;
  background:linear-gradient(135deg, var(--ember-soft, #FF8F5A), var(--ember, #FF6B2C));
  box-shadow:0 0 14px rgba(255,107,44,.45);
}
.jff-frame-8{
  padding:3px;
  background:var(--gold, #FFC46B);
  box-shadow:0 0 12px rgba(255,196,107,.4);
}
.jff-frame-9{
  padding:4px;
  background:conic-gradient(from 210deg, var(--gold, #FFC46B), var(--ember, #FF6B2C), var(--gold, #FFC46B));
  box-shadow:0 0 18px rgba(255,196,107,.55);
}
.jff-frame-10{
  padding:4px;
  background:conic-gradient(from 0deg,
    var(--ember, #FF6B2C), var(--gold, #FFC46B), var(--arcane, #5FE3C8),
    var(--gold, #FFC46B), var(--ember, #FF6B2C));
  box-shadow:0 0 22px rgba(255,167,80,.6);
  animation:jffFrameSpin 5s linear infinite;
}
/* O anel gira; a foto não. Só o topo da escada anima. */
@keyframes jffFrameSpin{
  to{ transform:rotate(360deg); }
}
.jff-frame-10 > *{ animation:jffFrameCounter 5s linear infinite; }
@keyframes jffFrameCounter{
  to{ transform:rotate(-360deg); }
}
@media (prefers-reduced-motion:reduce){
  .jff-frame-10, .jff-frame-10 > *{ animation:none; }
}

/* ── Tags: pill mono uppercase, requinte crescente ───────────── */
.jff-utags{ display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.jff-utag{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--f-mono, 'Space Mono', monospace);
  font-size:.56rem; font-weight:700; font-style:normal;
  letter-spacing:.12em; text-transform:uppercase; line-height:1.4;
  border:1px solid; border-radius:999px; padding:3px 9px;
  white-space:nowrap;
}

.jff-tagstyle-1{ color:var(--ink-500, #584A6B); border-color:var(--ink-600, #3A3049); }
.jff-tagstyle-2{ color:var(--bone-muted, #A99FB8); border-color:var(--ink-500, #584A6B); }
.jff-tagstyle-3{ color:var(--dusk-light, #5A6FA8); border-color:rgba(90,111,168,.55); background:rgba(90,111,168,.08); }
.jff-tagstyle-4{ color:var(--arcane, #5FE3C8); border-color:rgba(95,227,200,.45); }
.jff-tagstyle-5{ color:var(--arcane, #5FE3C8); border-color:rgba(95,227,200,.55); background:rgba(95,227,200,.09);
  box-shadow:0 0 8px rgba(95,227,200,.18); }
.jff-tagstyle-6{ color:var(--ember, #FF6B2C); border-color:rgba(255,107,44,.5); }
.jff-tagstyle-7{ color:var(--ember-soft, #FF8F5A); border-color:rgba(255,107,44,.6); background:rgba(255,107,44,.1);
  box-shadow:0 0 10px rgba(255,107,44,.22); }
.jff-tagstyle-8{ color:var(--gold, #FFC46B); border-color:rgba(255,196,107,.5); }
.jff-tagstyle-8::before{ content:'★'; font-size:.72em; }
.jff-tagstyle-9{ color:var(--gold, #FFC46B); border-color:rgba(255,196,107,.65); background:rgba(255,196,107,.1);
  box-shadow:0 0 12px rgba(255,196,107,.3); }
.jff-tagstyle-9::before{ content:'★'; font-size:.72em; }
.jff-tagstyle-10{
  position:relative; color:#150C06;
  border-color:transparent;
  background:linear-gradient(110deg, var(--gold, #FFC46B) 0%, var(--ember-soft, #FF8F5A) 45%, var(--gold, #FFC46B) 90%);
  background-size:220% 100%;
  box-shadow:0 0 14px rgba(255,196,107,.45);
  animation:jffTagShimmer 2.8s linear infinite;
}
.jff-tagstyle-10::before{ content:'✦'; font-size:.78em; }
@keyframes jffTagShimmer{
  to{ background-position:-220% 0; }
}
@media (prefers-reduced-motion:reduce){
  .jff-tagstyle-10{ animation:none; }
}

/* ── Prévia no painel (Progressão / Usuários) ────────────────── */
.jff-preview-avatar{
  display:block; width:36px; height:36px; border-radius:50%;
  background:radial-gradient(circle at 50% 40%, rgba(255,107,44,.3), transparent 70%), #1C1729;
  border:1px solid #282035;
}
.jff-style-sample{ display:inline-flex; align-items:center; gap:10px; margin:0 22px 14px 0; }
.jff-styles-preview{ padding:16px 4px 2px; background:#110E1A; border-radius:8px; padding-left:16px; }
.jff-preview-cell{ display:flex; align-items:center; gap:10px; }
.jff-user-editor-preview{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 14px; background:#110E1A; border-radius:8px; margin-bottom:10px; }

/* ═══ MOLDURAS 11–60 — geradas para a v1.2 (variedade: sólidas,
   gradientes, brilhos, segmentadas, duotônicas, animadas, temáticas) ═══ */
.jff-frame-11{background:#A78BFA;}
.jff-frame-12{background:#F472B6;}
.jff-frame-13{background:#F43F5E;}
.jff-frame-14{background:#34D399;}
.jff-frame-15{background:#22D3EE;}
.jff-frame-16{background:#3B82F6;}
.jff-frame-17{background:#6366F1;}
.jff-frame-18{background:#F59E0B;}
.jff-frame-19{background:#CBD5E1;}
.jff-frame-20{background:#F5F1EA;}
.jff-frame-21{background:linear-gradient(135deg,#A78BFA,#F472B6);}
.jff-frame-22{background:linear-gradient(135deg,#F472B6,#F43F5E);}
.jff-frame-23{background:linear-gradient(135deg,#F43F5E,#F59E0B);}
.jff-frame-24{background:linear-gradient(135deg,#34D399,#A3E635);}
.jff-frame-25{background:linear-gradient(135deg,#22D3EE,#3B82F6);}
.jff-frame-26{background:linear-gradient(135deg,#3B82F6,#6366F1);}
.jff-frame-27{background:linear-gradient(135deg,#6366F1,#A78BFA);}
.jff-frame-28{background:linear-gradient(135deg,#F59E0B,#D97706);}
.jff-frame-29{background:linear-gradient(135deg,#CBD5E1,#94A3B8);}
.jff-frame-30{background:linear-gradient(135deg,#F43F5E,#F59E0B,#A3E635,#22D3EE,#A78BFA);}
.jff-frame-31{padding:3px;background:#A78BFA;box-shadow:0 0 14px rgba(167,139,250,0.5);}
.jff-frame-32{padding:3px;background:#F472B6;box-shadow:0 0 14px rgba(244,114,182,0.5);}
.jff-frame-33{padding:3px;background:#F43F5E;box-shadow:0 0 14px rgba(244,63,94,0.5);}
.jff-frame-34{padding:3px;background:#34D399;box-shadow:0 0 14px rgba(52,211,153,0.5);}
.jff-frame-35{padding:3px;background:#22D3EE;box-shadow:0 0 14px rgba(34,211,238,0.5);}
.jff-frame-36{padding:3px;background:#3B82F6;box-shadow:0 0 14px rgba(59,130,246,0.5);}
.jff-frame-37{padding:3px;background:#F59E0B;box-shadow:0 0 14px rgba(245,158,11,0.5);}
.jff-frame-38{padding:3px;background:#F5F1EA;box-shadow:0 0 14px rgba(245,241,234,0.5);}
.jff-frame-39{padding:3px;background:repeating-conic-gradient(#FF6B2C 0deg 22.5deg,transparent 22.5deg 45.0deg);}
.jff-frame-40{padding:3px;background:repeating-conic-gradient(#5FE3C8 0deg 22.5deg,transparent 22.5deg 45.0deg);}
.jff-frame-41{padding:3px;background:repeating-conic-gradient(#FFC46B 0deg 22.5deg,transparent 22.5deg 45.0deg);}
.jff-frame-42{padding:3px;background:repeating-conic-gradient(#A78BFA 0deg 22.5deg,transparent 22.5deg 45.0deg);}
.jff-frame-43{padding:2px;background:repeating-conic-gradient(#CBD5E1 0deg 6deg,transparent 6deg 18deg);}
.jff-frame-44{padding:2px;background:repeating-conic-gradient(#22D3EE 0deg 6deg,transparent 6deg 18deg);}
.jff-frame-45{padding:3px;background:conic-gradient(#FF6B2C 0 50%,#5FE3C8 50% 100%);}
.jff-frame-46{padding:3px;background:conic-gradient(#FFC46B 0 25%,#161221 25% 50%,#FFC46B 50% 75%,#161221 75% 100%);}
.jff-frame-47{padding:3px;background:conic-gradient(#FF6B2C 0 33.3%,#FFC46B 33.3% 66.6%,#5FE3C8 66.6% 100%);}
.jff-frame-48{padding:3px;background:conic-gradient(#A78BFA 0 25%,#F472B6 25% 50%,#BAE6FD 50% 75%,#34D399 75% 100%);}
.jff-frame-49{padding:3px;background:#FF6B2C;animation:jffPulseEmber 2.2s ease-in-out infinite;}
.jff-frame-50{padding:3px;background:#5FE3C8;animation:jffPulseArc 2.2s ease-in-out infinite;}
.jff-frame-51{padding:4px;background:conic-gradient(#F43F5E,#F59E0B,#A3E635,#22D3EE,#A78BFA,#F43F5E);animation:jffFrameSpin 8s linear infinite;}
.jff-frame-52{padding:4px;background:conic-gradient(#FFC46B,#A78BFA,#FFC46B,#A78BFA,#FFC46B);animation:jffFrameSpin 6s linear infinite reverse;}
.jff-frame-53{padding:3px;background:linear-gradient(110deg,#CBD5E1 0%,#FFFFFF 45%,#CBD5E1 90%);background-size:220% 100%;animation:jffTagShimmer 2.6s linear infinite;}
.jff-frame-54{padding:4px;background:conic-gradient(#FF6B2C,#FFC46B,#FF8F5A,#FF6B2C);box-shadow:0 0 18px rgba(255,107,44,.6);animation:jffFrameSpin 3.5s linear infinite;}
.jff-frame-55{padding:3px;background:linear-gradient(135deg,#BAE6FD,#FFFFFF);box-shadow:0 0 16px rgba(186,230,253,0.55);}
.jff-frame-56{padding:3px;background:linear-gradient(135deg,#34D399,#A3E635);box-shadow:0 0 14px rgba(52,211,153,.45);}
.jff-frame-57{padding:4px;background:radial-gradient(circle,#2B3E6B 0%,#0C0A14 70%);box-shadow:0 0 16px rgba(90,111,168,.5), inset 0 0 8px rgba(0,0,0,.8);}
.jff-frame-58{padding:4px;background:conic-gradient(#7C3AED 0 25%,#FFC46B 25% 50%,#7C3AED 50% 75%,#FFC46B 75% 100%);box-shadow:0 0 16px rgba(167,139,250,.5);}
.jff-frame-59{padding:4px;background:conic-gradient(#6366F1,#F472B6,#22D3EE,#6366F1);box-shadow:0 0 20px rgba(99,102,241,.6);animation:jffFrameSpin 7s linear infinite;}
.jff-frame-60{padding:5px;background:conic-gradient(#FF6B2C,#FFC46B,#F472B6,#A78BFA,#22D3EE,#5FE3C8,#FF6B2C);box-shadow:0 0 26px rgba(255,167,80,.7);animation:jffFrameSpin 4.5s linear infinite;}
/* contra-rotação: a foto fica parada dentro dos anéis giratórios */
.jff-frame-51 > *, .jff-frame-52 > *, .jff-frame-54 > *, .jff-frame-59 > *, .jff-frame-60 > *{animation:jffFrameCounter 8s linear infinite;}
.jff-frame-52 > *{animation-direction:reverse;animation-duration:6s}
.jff-frame-54 > *{animation-duration:3.5s}
.jff-frame-59 > *{animation-duration:7s}
.jff-frame-60 > *{animation-duration:4.5s}
@keyframes jffPulseEmber{0%,100%{box-shadow:0 0 6px rgba(255,107,44,.35)}50%{box-shadow:0 0 20px rgba(255,107,44,.75)}}
@keyframes jffPulseArc{0%,100%{box-shadow:0 0 6px rgba(95,227,200,.35)}50%{box-shadow:0 0 20px rgba(95,227,200,.75)}}
@media (prefers-reduced-motion:reduce){
  .jff-frame-49,.jff-frame-50,.jff-frame-51,.jff-frame-52,.jff-frame-53,.jff-frame-54,.jff-frame-59,.jff-frame-60,
  .jff-frame-51 > *,.jff-frame-52 > *,.jff-frame-54 > *,.jff-frame-59 > *,.jff-frame-60 > *{animation:none}
}

/* ═══ TAGS 11–60 — contorno, tonalizada e preenchida por matiz;
   depois ícones com brilho, texto gradiente e animadas ═══ */
.jff-tagstyle-11{color:#A78BFA;border-color:rgba(167,139,250,0.5);}
.jff-tagstyle-12{color:#A78BFA;border-color:rgba(167,139,250,0.55);background:rgba(167,139,250,0.1);}
.jff-tagstyle-13{color:#0C0A14;background:#A78BFA;border-color:#A78BFA;}
.jff-tagstyle-14{color:#F472B6;border-color:rgba(244,114,182,0.5);}
.jff-tagstyle-15{color:#F472B6;border-color:rgba(244,114,182,0.55);background:rgba(244,114,182,0.1);}
.jff-tagstyle-16{color:#0C0A14;background:#F472B6;border-color:#F472B6;}
.jff-tagstyle-17{color:#F43F5E;border-color:rgba(244,63,94,0.5);}
.jff-tagstyle-18{color:#F43F5E;border-color:rgba(244,63,94,0.55);background:rgba(244,63,94,0.1);}
.jff-tagstyle-19{color:#0C0A14;background:#F43F5E;border-color:#F43F5E;}
.jff-tagstyle-20{color:#34D399;border-color:rgba(52,211,153,0.5);}
.jff-tagstyle-21{color:#34D399;border-color:rgba(52,211,153,0.55);background:rgba(52,211,153,0.1);}
.jff-tagstyle-22{color:#0C0A14;background:#34D399;border-color:#34D399;}
.jff-tagstyle-23{color:#22D3EE;border-color:rgba(34,211,238,0.5);}
.jff-tagstyle-24{color:#22D3EE;border-color:rgba(34,211,238,0.55);background:rgba(34,211,238,0.1);}
.jff-tagstyle-25{color:#0C0A14;background:#22D3EE;border-color:#22D3EE;}
.jff-tagstyle-26{color:#3B82F6;border-color:rgba(59,130,246,0.5);}
.jff-tagstyle-27{color:#3B82F6;border-color:rgba(59,130,246,0.55);background:rgba(59,130,246,0.1);}
.jff-tagstyle-28{color:#0C0A14;background:#3B82F6;border-color:#3B82F6;}
.jff-tagstyle-29{color:#6366F1;border-color:rgba(99,102,241,0.5);}
.jff-tagstyle-30{color:#6366F1;border-color:rgba(99,102,241,0.55);background:rgba(99,102,241,0.1);}
.jff-tagstyle-31{color:#0C0A14;background:#6366F1;border-color:#6366F1;}
.jff-tagstyle-32{color:#F59E0B;border-color:rgba(245,158,11,0.5);}
.jff-tagstyle-33{color:#F59E0B;border-color:rgba(245,158,11,0.55);background:rgba(245,158,11,0.1);}
.jff-tagstyle-34{color:#0C0A14;background:#F59E0B;border-color:#F59E0B;}
.jff-tagstyle-35{color:#CBD5E1;border-color:rgba(203,213,225,0.5);}
.jff-tagstyle-36{color:#CBD5E1;border-color:rgba(203,213,225,0.55);background:rgba(203,213,225,0.1);}
.jff-tagstyle-37{color:#0C0A14;background:#CBD5E1;border-color:#CBD5E1;}
.jff-tagstyle-38{color:#F5F1EA;border-color:rgba(245,241,234,.55);}
.jff-tagstyle-39{color:#0C0A14;background:#F5F1EA;border-color:#F5F1EA;}
.jff-tagstyle-40{color:#D6CFE0;border-color:rgba(214,207,224,.35);background:rgba(214,207,224,.06);}
.jff-tagstyle-41{color:#A78BFA;border-color:rgba(167,139,250,0.6);background:rgba(167,139,250,0.09);box-shadow:0 0 10px rgba(167,139,250,0.3);--jff-ico:"◆";}
.jff-tagstyle-42{color:#F472B6;border-color:rgba(244,114,182,0.6);background:rgba(244,114,182,0.09);box-shadow:0 0 10px rgba(244,114,182,0.3);--jff-ico:"◆";}
.jff-tagstyle-43{color:#F43F5E;border-color:rgba(244,63,94,0.6);background:rgba(244,63,94,0.09);box-shadow:0 0 10px rgba(244,63,94,0.3);--jff-ico:"◆";}
.jff-tagstyle-44{color:#34D399;border-color:rgba(52,211,153,0.6);background:rgba(52,211,153,0.09);box-shadow:0 0 10px rgba(52,211,153,0.3);--jff-ico:"●";}
.jff-tagstyle-45{color:#22D3EE;border-color:rgba(34,211,238,0.6);background:rgba(34,211,238,0.09);box-shadow:0 0 10px rgba(34,211,238,0.3);--jff-ico:"●";}
.jff-tagstyle-46{color:#3B82F6;border-color:rgba(59,130,246,0.6);background:rgba(59,130,246,0.09);box-shadow:0 0 10px rgba(59,130,246,0.3);--jff-ico:"▲";}
.jff-tagstyle-47{color:#F59E0B;border-color:rgba(245,158,11,0.6);background:rgba(245,158,11,0.09);box-shadow:0 0 10px rgba(245,158,11,0.3);--jff-ico:"▲";}
.jff-tagstyle-48{color:#CBD5E1;border-color:rgba(203,213,225,0.6);background:rgba(203,213,225,0.09);box-shadow:0 0 10px rgba(203,213,225,0.3);--jff-ico:"♦";}
.jff-tagstyle-49{border-color:rgba(167,139,250,0.45);background-image:linear-gradient(100deg,#A78BFA,#F472B6);-webkit-background-clip:text;background-clip:text;color:transparent;}
.jff-tagstyle-50{border-color:rgba(34,211,238,0.45);background-image:linear-gradient(100deg,#22D3EE,#34D399);-webkit-background-clip:text;background-clip:text;color:transparent;}
.jff-tagstyle-51{border-color:rgba(245,158,11,0.45);background-image:linear-gradient(100deg,#F59E0B,#F43F5E);-webkit-background-clip:text;background-clip:text;color:transparent;}
.jff-tagstyle-52{border-color:rgba(244,114,182,.4);background-image:linear-gradient(100deg,#F43F5E,#F59E0B,#A3E635,#22D3EE,#A78BFA);-webkit-background-clip:text;background-clip:text;color:transparent;}
.jff-tagstyle-53{color:#0C0A14;border-color:transparent;background:linear-gradient(110deg,#A78BFA,#F472B6);box-shadow:0 0 12px rgba(167,139,250,0.4);}
.jff-tagstyle-54{color:#0C0A14;border-color:transparent;background:linear-gradient(110deg,#22D3EE,#3B82F6);box-shadow:0 0 12px rgba(34,211,238,0.4);}
.jff-tagstyle-55{color:#0C0A14;border-color:transparent;background:linear-gradient(110deg,#34D399,#A3E635);box-shadow:0 0 12px rgba(52,211,153,0.4);}
.jff-tagstyle-56{color:#0C0A14;border-color:transparent;background:linear-gradient(110deg,#F43F5E,#F59E0B);box-shadow:0 0 12px rgba(244,63,94,0.4);}
.jff-tagstyle-57{color:#0C0A14;border-color:transparent;background:linear-gradient(110deg,#CBD5E1 0%,#FFFFFF 45%,#CBD5E1 90%);background-size:220% 100%;animation:jffTagShimmer 2.8s linear infinite;}
.jff-tagstyle-58{color:#0C0A14;border-color:transparent;background:linear-gradient(110deg,#22D3EE 0%,#BAE6FD 45%,#22D3EE 90%);background-size:220% 100%;animation:jffTagShimmer 2.8s linear infinite;}
.jff-tagstyle-59{color:#0C0A14;border-color:transparent;background:linear-gradient(110deg,#F43F5E,#F59E0B,#A3E635,#22D3EE,#A78BFA,#F43F5E);background-size:300% 100%;animation:jffTagShimmer 3.4s linear infinite;box-shadow:0 0 12px rgba(167,139,250,.45);--jff-ico:"✦";}
.jff-tagstyle-60{color:#0C0A14;border-color:transparent;background:linear-gradient(110deg,#FFC46B,#FF8F5A,#F472B6,#FFC46B);background-size:260% 100%;animation:jffTagShimmer 2.4s linear infinite;box-shadow:0 0 16px rgba(255,196,107,.6);--jff-ico:"✦";}
/* ícone opcional via variável — os estilos que definem --jff-ico ganham o prefixo */
.jff-tagstyle-41::before, .jff-tagstyle-42::before, .jff-tagstyle-43::before, .jff-tagstyle-44::before, .jff-tagstyle-45::before, .jff-tagstyle-46::before, .jff-tagstyle-47::before, .jff-tagstyle-48::before, .jff-tagstyle-59::before, .jff-tagstyle-60::before{content:var(--jff-ico);font-size:.78em;}
@media (prefers-reduced-motion:reduce){.jff-tagstyle-57,.jff-tagstyle-58,.jff-tagstyle-59,.jff-tagstyle-60{animation:none}}