/* Ehna - user identity: name colors, badges, tags, avatar frames & effects */
/*
  Loaded after style/features.css but before the inline _head.css.tpl rules, so every
  override uses a `:not(#i)` id-weight bump. Class names / CSS vars used by templates,
  admin.js and voice_rooms.js are kept: identity-name(-custom|-owner|-featured|-badged),
  identity-effect-*, --identity-*, user-badge-chip, avatar-frame-custom,
  avatar-frame-effect-*, --avatar-frame-*, owner-avatar-ring, featured-avatar-ring.
*/

@property --idf-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* ===================================================================
   1. Theme tokens (light default, dark for night mode & dark surfaces)
   =================================================================== */
:root,
.idt-light {
  --identity-plain: #111827;
  --idf-gap: #ffffff;
  --idn-contour: drop-shadow(0 0 .35px rgba(15, 23, 42, .55));
  --idn-halo-mix: 34%;
  --idn-mix-color: #000;
  --idn-neon-mix: 24%;
  --idn-pal-badged: linear-gradient(100deg, #0369a1 0%, #4f46e5 55%, #7c3aed 100%);
  --idn-pal-featured: linear-gradient(100deg, #6d28d9 0%, #2563eb 25%, #0891b2 50%, #2563eb 75%, #6d28d9 100%);
  --idn-pal-gold: linear-gradient(100deg, #7a4a05 0%, #b7791f 24%, #d9a43c 44%, #9a6410 66%, #7a4a05 100%);
  --idn-pal-chrome: linear-gradient(100deg, #1f2937 0%, #4b5563 26%, #8a94a3 46%, #374151 70%, #1f2937 100%);
  --idn-pal-fire: linear-gradient(100deg, #b91c1c 0%, #ea580c 25%, #d97706 50%, #ea580c 75%, #b91c1c 100%);
  --idn-pal-ice: linear-gradient(100deg, #0c4a6e 0%, #0284c7 30%, #0891b2 52%, #1d4ed8 78%, #0c4a6e 100%);
  --idn-pal-rainbow: linear-gradient(100deg, #dc2626 0%, #d97706 16%, #16a34a 33%, #0891b2 50%, #4f46e5 66%, #c026d3 83%, #dc2626 100%);
  --idn-pal-royal: linear-gradient(100deg, #4c1d95 0%, #7c3aed 32%, #a16207 52%, #7c3aed 72%, #4c1d95 100%);
  --idn-sheen: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(255, 255, 255, .85) 50%, transparent 60%, transparent 100%);
}

body.night-mode,
.idt-dark,
.vr-sugo,
.lightbox[data-live-post-id] {
  --identity-plain: #eef1ff;
  --idf-gap: #0c1129;
  --idn-contour: drop-shadow(0 1px 1px rgba(0, 0, 0, .55));
  --idn-halo-mix: 60%;
  --idn-mix-color: #fff;
  --idn-neon-mix: 52%;
  --idn-pal-badged: linear-gradient(100deg, #38bdf8 0%, #818cf8 55%, #c084fc 100%);
  --idn-pal-featured: linear-gradient(100deg, #a78bfa 0%, #67e8f9 25%, #818cf8 50%, #67e8f9 75%, #a78bfa 100%);
  --idn-pal-gold: linear-gradient(100deg, #b8860b 0%, #f6d77a 28%, #fff3c4 45%, #e2a93b 64%, #b07a0e 100%);
  --idn-pal-chrome: linear-gradient(100deg, #8d97a5 0%, #e9eef5 28%, #ffffff 45%, #b8c2cf 66%, #7b8494 100%);
  --idn-pal-fire: linear-gradient(100deg, #ef4444 0%, #f97316 25%, #fbbf24 50%, #f97316 75%, #ef4444 100%);
  --idn-pal-ice: linear-gradient(100deg, #7dd3fc 0%, #e0f2fe 30%, #67e8f9 52%, #93c5fd 78%, #7dd3fc 100%);
  --idn-pal-rainbow: linear-gradient(100deg, #f87171 0%, #fbbf24 16%, #4ade80 33%, #22d3ee 50%, #818cf8 66%, #e879f9 83%, #f87171 100%);
  --idn-pal-royal: linear-gradient(100deg, #a78bfa 0%, #c4b5fd 30%, #fcd34d 52%, #c4b5fd 72%, #a78bfa 100%);
}

.vr-sugo { --idf-gap: #1b1033; }
.lightbox[data-live-post-id] { --idf-gap: #111111; }

/* ===================================================================
   2. User names
   =================================================================== */

/* Regular users: clean solid name, no glow/underline (like big networks) */
html body .identity-name:not(#i) {
  --idn-weight: 700;
  font-weight: var(--idn-weight) !important;
  letter-spacing: normal !important;
  text-decoration: none !important;
  text-shadow: none !important;
  transform: none !important;
  transition: none !important;
  filter: none !important;
  animation: none !important;
  color: var(--identity-plain) !important;
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

html body a.identity-name:not(#i):hover,
html body .identity-name:not(#i) a:hover {
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
}

/* Decorated names: gradient text with a solid-color fallback */
html body .identity-name:is(.identity-name-custom, .identity-name-owner, .identity-name-featured, .identity-name-badged):not(#i) {
  --idn-fill: var(--identity-gradient, linear-gradient(var(--identity-solid), var(--identity-solid)));
  --idn-halo: drop-shadow(0 0 0 transparent);
  --idn-anim: none;
  color: var(--identity-solid, #2563eb) !important;
  background-image: var(--idn-fill) !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: 0 50% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: var(--idn-contour) var(--idn-halo) !important;
  animation: var(--idn-anim) !important;
}

/* Built-in defaults when no custom colors were picked */
html body .identity-name.identity-name-badged:not(.identity-name-custom):not(.identity-name-owner):not(.identity-name-featured):not(#i) {
  --identity-solid: #4f46e5;
  --idn-fill: var(--idn-pal-badged);
}

html body .identity-name.identity-name-featured:not(.identity-name-custom):not(#i) {
  --identity-solid: #7c3aed;
  --identity-glow: #8b5cf6;
  --idn-fill: var(--idn-pal-featured);
  --idn-halo: drop-shadow(0 0 4px color-mix(in srgb, #8b5cf6 var(--idn-halo-mix), transparent));
  --idn-anim: idn-flow 7s linear infinite;
  background-size: 200% 100% !important;
  background-repeat: repeat-x !important;
}

html body .identity-name.identity-name-owner:not(.identity-name-custom):not(#i) {
  --identity-solid: #b7791f;
  --idn-anim: idn-sheen 4.2s ease-in-out infinite;
  background-image: var(--idn-sheen), var(--idn-pal-gold) !important;
  background-size: 300% 100%, 100% 100% !important;
  background-position: 100% 0, 0 50% !important;
}

/* --- Name effects (keys stored in users.user_name_effect) --- */

/* glow: soft readable halo */
html body .identity-name.identity-effect-glow:not(#i) {
  --idn-halo: drop-shadow(0 0 4px color-mix(in srgb, var(--identity-glow, var(--identity-solid)) var(--idn-halo-mix), transparent));
}

/* shimmer: light sheen sweeping over the gradient */
html body .identity-name.identity-effect-shimmer:not(#i),
html body .identity-name.identity-effect-gold:not(#i),
html body .identity-name.identity-effect-chrome:not(#i),
html body .identity-name.identity-effect-ice:not(#i),
html body .identity-name.identity-effect-royal:not(#i) {
  --idn-anim: idn-sheen 3.8s ease-in-out infinite;
  background-image: var(--idn-sheen), var(--idn-fill) !important;
  background-size: 300% 100%, 100% 100% !important;
  background-position: 100% 0, 0 50% !important;
}

/* pulse: colors breathe back and forth + soft halo */
html body .identity-name.identity-effect-pulse:not(#i) {
  --idn-fill: var(--identity-loop, var(--identity-gradient));
  --idn-halo: drop-shadow(0 0 4px color-mix(in srgb, var(--identity-glow, var(--identity-solid)) var(--idn-halo-mix), transparent));
  --idn-anim: idn-breathe 2.6s ease-in-out infinite alternate;
  background-size: 200% 100% !important;
}

/* aurora: smooth endless color flow */
html body .identity-name.identity-effect-aurora:not(#i),
html body .identity-name.identity-effect-fire:not(#i),
html body .identity-name.identity-effect-rainbow:not(#i) {
  --idn-fill: var(--identity-loop, var(--identity-gradient));
  --idn-anim: idn-flow 6s linear infinite;
  background-size: 200% 100% !important;
  background-repeat: repeat-x !important;
}

/* neon: bright core + crisp tube glow, still readable on light pages */
html body .identity-name.identity-effect-neon:not(#i) {
  --idn-fill: linear-gradient(color-mix(in srgb, var(--identity-solid) , var(--idn-mix-color) var(--idn-neon-mix)), color-mix(in srgb, var(--identity-solid) , var(--idn-mix-color) var(--idn-neon-mix)));
  --idn-halo: drop-shadow(0 0 1.5px color-mix(in srgb, var(--identity-glow, var(--identity-solid)) 85%, transparent)) drop-shadow(0 0 6px color-mix(in srgb, var(--identity-glow, var(--identity-solid)) var(--idn-halo-mix), transparent));
}

/* fixed premium palettes (ignore the user colors on purpose) */
html body .identity-name.identity-effect-gold:not(#i) {
  --identity-solid: #b7791f;
  --idn-fill: var(--idn-pal-gold);
  --idn-anim: idn-sheen 4.2s ease-in-out infinite;
}

html body .identity-name.identity-effect-chrome:not(#i) {
  --identity-solid: #6b7280;
  --idn-fill: var(--idn-pal-chrome);
  --idn-anim: idn-sheen 4.6s ease-in-out infinite;
}

html body .identity-name.identity-effect-fire:not(#i) {
  --identity-solid: #ea580c;
  --idn-fill: var(--idn-pal-fire);
  --idn-halo: drop-shadow(0 0 3px color-mix(in srgb, #f97316 var(--idn-halo-mix), transparent));
  --idn-anim: idn-flow 2.8s linear infinite;
}

html body .identity-name.identity-effect-ice:not(#i) {
  --identity-solid: #0284c7;
  --idn-fill: var(--idn-pal-ice);
  --idn-anim: idn-sheen 4.4s ease-in-out infinite;
}

html body .identity-name.identity-effect-rainbow:not(#i) {
  --identity-solid: #4f46e5;
  --idn-fill: var(--idn-pal-rainbow);
  --idn-anim: idn-flow 9s linear infinite;
}

html body .identity-name.identity-effect-royal:not(#i) {
  --identity-solid: #7c3aed;
  --idn-fill: var(--idn-pal-royal);
  --idn-halo: drop-shadow(0 0 4px color-mix(in srgb, #a855f7 var(--idn-halo-mix), transparent));
  --idn-anim: idn-sheen 4.4s ease-in-out infinite;
}

html body .identity-name.identity-effect-none:not(#i) {
  --idn-anim: none;
}

/* contexts */
html body .profile-name-wrapper .identity-name:not(#i) {
  --idn-weight: 800;
  --identity-plain: #fff;
  --idn-contour: drop-shadow(0 1px 2px rgba(0, 0, 0, .7));
}

html body .profile-name-wrapper .identity-name:not(.identity-name-custom):not(.identity-name-owner):not(.identity-name-featured):not(.identity-name-badged):not(#i) {
  filter: var(--idn-contour) !important;
}

html body .vr-sugo :is(.voice-room-message, .voice-seat) .identity-name:not(#i),
html body .lightbox[data-live-post-id] .live-audience-comments .identity-name:not(#i) {
  --idn-weight: 600;
}

@keyframes idn-flow {
  from { background-position: 0% 50%; }
  to { background-position: 200% 50%; }
}

@keyframes idn-breathe {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

@keyframes idn-sheen {
  0% { background-position: 100% 0, 0 50%; }
  45%, 100% { background-position: 0% 0, 0 50%; }
}

/* no background-clip:text support -> solid color */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  html body .identity-name.identity-name:not(#i) {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
  }
}

/* ===================================================================
   3. Badges / tags (.user-badge-chip)
   =================================================================== */
html body .user-badge-chip:not(#i) {
  --ub-h: 20px;
  --ub-fs: 11px;
  --ub-ic: 10px;
  --ub-px: 8px;
  --ub-gap: 4px;
  --ub-c: var(--badge-color, #0ea5e9);
  --ub-g: var(--badge-glow, var(--ub-c));
  --ub-ring: rgba(255, 255, 255, .24);
  --ub-anim: none;
  --ub-shine: linear-gradient(105deg, transparent 15%, rgba(255, 255, 255, .55) 50%, transparent 85%);
  position: relative;
  isolation: isolate;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: var(--ub-gap) !important;
  height: var(--ub-h);
  min-height: 0 !important;
  max-width: 16em;
  margin: 0 !important;
  margin-inline-start: 6px !important;
  padding: 0 var(--ub-px) !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 999px !important;
  color: var(--badge-text-color, #fff) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 58%),
    linear-gradient(135deg, var(--ub-c) 0%, color-mix(in srgb, var(--ub-c) 52%, var(--ub-g)) 100%) !important;
  box-shadow:
    inset 0 0 0 1px var(--ub-ring),
    inset 0 -1px 0 rgba(0, 0, 0, .14),
    0 1px 2px rgba(15, 23, 42, .2),
    0 2px 8px -3px color-mix(in srgb, var(--ub-g) 70%, transparent) !important;
  font-size: var(--ub-fs) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .18) !important;
  white-space: nowrap;
  vertical-align: middle;
  transform: none !important;
  filter: none !important;
  zoom: 1;
  transition: box-shadow .18s ease !important;
}

html body .user-badge-chip:not(#i):hover {
  transform: none !important;
  filter: none !important;
  box-shadow:
    inset 0 0 0 1px var(--ub-ring),
    inset 0 -1px 0 rgba(0, 0, 0, .14),
    0 1px 2px rgba(15, 23, 42, .2),
    0 3px 12px -3px color-mix(in srgb, var(--ub-g) 85%, transparent) !important;
}

html body .user-badge-chip:not(#i) > i,
html body .user-badge-chip:not(#i) .js-user-badge-preview-icon {
  display: inline-block !important;
  flex: 0 0 auto;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--badge-icon-color, #fff) !important;
  font-size: var(--ub-ic) !important;
  line-height: 1 !important;
  text-shadow: none !important;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .22));
}

html body .user-badge-chip:not(#i) > span,
html body .user-badge-chip:not(#i) .js-user-badge-preview-label {
  display: block !important;
  min-width: 0;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--badge-text-color, #fff) !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: 1.25 !important;
  letter-spacing: normal !important;
  text-shadow: inherit !important;
}

html body .user-badge-chip:not(#i)::before {
  display: none !important;
}

/* shine sweep, used by premium tiers (transform-only animation) */
html body .user-badge-chip:not(#i)::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  z-index: 1;
  width: 45% !important;
  height: auto !important;
  border-radius: inherit;
  background: var(--ub-shine) !important;
  opacity: 0 !important;
  transform: translateX(-130%) !important;
  pointer-events: none;
  animation: var(--ub-anim) !important;
}

@keyframes ub-sheen {
  0% { opacity: 1; transform: translateX(-130%); }
  32% { opacity: 1; transform: translateX(260%); }
  33%, 100% { opacity: 0; transform: translateX(260%); }
}

/* tiers, detected from the badge icon (or explicit .user-badge-tier-* classes) */
html body .user-badge-chip:is(.user-badge-tier-royal, .user-badge-tier-gold, :has(> i:is(.fa-crown, .fa-chess-king, .fa-chess-queen))):not(#i) {
  --ub-ring: rgba(255, 228, 150, .7);
  --ub-anim: ub-sheen 4.8s ease-in-out infinite;
}

html body .user-badge-chip:is(.user-badge-tier-diamond, :has(> i:is(.fa-gem, .fa-diamond))):not(#i) {
  --ub-ring: rgba(207, 250, 254, .75);
  --ub-shine: linear-gradient(105deg, transparent 10%, rgba(165, 243, 252, .55) 38%, rgba(255, 255, 255, .8) 50%, rgba(240, 171, 252, .5) 62%, transparent 90%);
  --ub-anim: ub-sheen 4.2s ease-in-out infinite;
}

html body .user-badge-chip:is(.user-badge-tier-vip, :has(> i:is(.fa-star, .fa-award, .fa-medal, .fa-trophy, .fa-fire, .fa-bolt))):not(#i) {
  --ub-ring: rgba(255, 255, 255, .42);
  --ub-anim: ub-sheen 5.6s ease-in-out infinite;
}

html body .user-badge-chip:is(.user-badge-tier-verified, :has(> i:is(.fa-check, .fa-circle-check, .fa-check-circle, .fa-certificate, .fa-badge-check))):not(#i) {
  --ub-ring: rgba(255, 255, 255, .34);
}

html body .user-badge-chip:is(.user-badge-tier-mod, .user-badge-tier-admin, :has(> i:is(.fa-shield, .fa-shield-alt, .fa-shield-halved, .fa-user-shield, .fa-gavel, .fa-user-gear, .fa-user-cog))):not(#i) {
  --ub-ring: rgba(255, 255, 255, .3);
  box-shadow:
    inset 0 0 0 1px var(--ub-ring),
    inset 0 -1px 0 rgba(0, 0, 0, .2),
    0 1px 2px rgba(15, 23, 42, .25) !important;
}

html body .user-badge-chip:is(.user-badge-tier-creator, :has(> i:is(.fa-pen-nib, .fa-palette, .fa-video, .fa-camera, .fa-microphone, .fa-music, .fa-paintbrush, .fa-brush, .fa-wand-magic-sparkles))):not(#i) {
  --ub-ring: rgba(255, 255, 255, .38);
  --ub-anim: ub-sheen 6.4s ease-in-out infinite;
}

/* owner: black card with gold hairline */
html body .user-badge-chip.user-badge-owner:not(#i) {
  --ub-ring: rgba(246, 215, 122, .75);
  --ub-anim: ub-sheen 4.8s ease-in-out infinite;
  --ub-shine: linear-gradient(105deg, transparent 15%, rgba(255, 236, 170, .45) 50%, transparent 85%);
  color: #fde68a !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 55%),
    linear-gradient(120deg, #0b1220 0%, #1f2937 55%, #3b2a0a 100%) !important;
}

html body .user-badge-chip.user-badge-owner:not(#i) > i {
  color: #f6c945 !important;
}

html body .user-badge-chip.user-badge-owner:not(#i) > span {
  color: #fdf1c7 !important;
}

/* sizes per context */
html body :is(.comment, .comments, .voice-room-message, .live-audience-comments, .conversation, .chat-conversations, .chat-widget, .notification, .js_notifications, .dropdown-widget, .data-content .name):not(#i) .user-badge-chip,
html body .user-badge-chip.user-badge-xs:not(#i) {
  --ub-h: 16px;
  --ub-fs: 9.5px;
  --ub-ic: 8.5px;
  --ub-px: 6px;
  --ub-gap: 3px;
  margin-inline-start: 4px !important;
}

html body .profile-name-wrapper .user-badge-chip:not(#i),
html body .user-badge-preview-wrap .user-badge-chip:not(#i),
html body .user-badge-chip.user-badge-lg:not(#i) {
  --ub-h: 26px;
  --ub-fs: 12.5px;
  --ub-ic: 11.5px;
  --ub-px: 11px;
  --ub-gap: 6px;
  margin-inline-start: 8px !important;
}

/* undo old scale/zoom hacks in voice rooms (they made the chip blurry) */
html body .vr-sugo .voice-room-message .user-badge-chip:not(#i) {
  transform: none !important;
  zoom: 1 !important;
  margin: 0 !important;
  margin-inline: 4px 2px !important;
}

/* ===================================================================
   4. Avatar frames
   Ring is drawn inside the avatar footprint (no layout shift, no clipping):
   [conic ring --idf-w][gap --idf-gap / transparent][photo]
   =================================================================== */

/* neutralize legacy borders/outlines/filters (hue-rotate distorted the photo) */
html body :is(.avatar-frame-custom, .owner-avatar-ring, .featured-avatar-ring):not(.voice-seat-avatar):not(.voice-seat-video-placeholder > img):not(#i),
html body .profile-header[class*="avatar-frame-effect-"]:not(#i) {
  outline: 0 !important;
  outline-offset: 0 !important;
  filter: none !important;
  animation: none !important;
}

/* palettes */
html body :is(.owner-avatar-ring, .owner-luxury-profile):not(#i) {
  --idf-c1: #a8740d;
  --idf-c2: #f6d77a;
  --idf-c3: #fff4cf;
  --idf-c4: #d4a017;
  --idf-glow: #f5c542;
  --idf-anim: idf-spin 9s linear infinite;
}

html body :is(.featured-avatar-ring, .featured-identity-profile):not(#i) {
  --idf-c1: #7c3aed;
  --idf-c2: #22d3ee;
  --idf-c3: #a78bfa;
  --idf-c4: #6366f1;
  --idf-glow: #8b5cf6;
  --idf-anim: idf-spin 11s linear infinite;
}

html body :is(.avatar-frame-custom, .custom-avatar-profile):not(#i) {
  --idf-c1: var(--avatar-frame-start, #0ea5e9);
  --idf-c2: var(--avatar-frame-end, var(--avatar-frame-start, #8b5cf6));
  --idf-c3: var(--avatar-frame-glow, var(--avatar-frame-end, #22d3ee));
  --idf-c4: color-mix(in srgb, var(--avatar-frame-start, #0ea5e9) 50%, var(--avatar-frame-end, #8b5cf6));
  --idf-glow: var(--avatar-frame-glow, var(--avatar-frame-start, #22d3ee));
  --idf-anim: none;
}

/* frame effects (users.user_avatar_frame_effect) */
html body .avatar-frame-effect-none:not(#i) { --idf-anim: none; }
html body .avatar-frame-effect-pulse:not(#i) { --idf-anim: idf-sway 3.2s ease-in-out infinite alternate; }
html body .avatar-frame-effect-spin:not(#i) { --idf-anim: idf-spin 6s linear infinite; }
html body .avatar-frame-effect-halo:not(#i) { --idf-anim: none; --idf-glow-mix: 85%; --idf-blur-k: 1.6; }
html body .avatar-frame-effect-shine:not(#i) { --idf-hi: #ffffff; --idf-anim: idf-spin 3.6s linear infinite; }
html body .avatar-frame-effect-aurora:not(#i) { --idf-anim: idf-spin 14s linear infinite; --idf-glow-mix: 75%; --idf-blur-k: 1.4; }
html body .avatar-frame-effect-neon:not(#i) {
  --idf-c2: var(--idf-c1);
  --idf-c3: color-mix(in srgb, var(--idf-c1) 55%, #fff);
  --idf-c4: var(--idf-c1);
  --idf-glow: var(--idf-c1);
  --idf-glow-mix: 90%;
  --idf-anim: none;
}
html body .avatar-frame-effect-gold:not(#i) {
  --idf-c1: #a8740d; --idf-c2: #f6d77a; --idf-c3: #fff4cf; --idf-c4: #d4a017; --idf-glow: #f5c542;
  --idf-hi: #fffbe8;
  --idf-anim: idf-spin 7s linear infinite;
}
html body .avatar-frame-effect-royal:not(#i) {
  --idf-c1: #4c1d95; --idf-c2: #a855f7; --idf-c3: #fcd34d; --idf-c4: #7c3aed; --idf-glow: #a855f7;
  --idf-anim: idf-spin 9s linear infinite;
}
html body .avatar-frame-effect-diamond:not(#i) {
  --idf-c1: #67e8f9; --idf-c2: #e0f2fe; --idf-c3: #a5b4fc; --idf-c4: #f0abfc; --idf-glow: #67e8f9;
  --idf-hi: #ffffff;
  --idf-anim: idf-spin 5s linear infinite;
}
html body .avatar-frame-effect-fire:not(#i) {
  --idf-c1: #dc2626; --idf-c2: #f97316; --idf-c3: #fde047; --idf-c4: #ea580c; --idf-glow: #f97316;
  --idf-anim: idf-spin 2.8s linear infinite;
}

/* ring on <img> avatars (and the <img> inside framed wrappers) */
html body img:is(.avatar-frame-custom, .owner-avatar-ring, .featured-avatar-ring):not(.voice-seat-avatar):not(.voice-seat-video-placeholder > img):not(#i),
html body :is(.data-avatar, .chat-avatar):is(.avatar-frame-custom, .owner-avatar-ring, .featured-avatar-ring):not(#i) > img {
  box-sizing: border-box !important;
  padding: var(--idf-g, 1.5px) !important;
  border: var(--idf-w, 2px) solid transparent !important;
  outline: 0 !important;
  object-fit: cover;
  background:
    linear-gradient(var(--idf-gap), var(--idf-gap)) padding-box,
    conic-gradient(from var(--idf-angle), var(--idf-c1), var(--idf-c2) 25%, var(--idf-c3) 50%, var(--idf-hi, var(--idf-c4)) 72%, var(--idf-c1)) border-box !important;
  box-shadow:
    0 0 0 .5px rgba(0, 0, 0, .08),
    0 0 calc(var(--idf-blur, 7px) * var(--idf-blur-k, 1)) calc(var(--idf-blur, 7px) * -.2) color-mix(in srgb, var(--idf-glow) var(--idf-glow-mix, 55%), transparent) !important;
  filter: none !important;
  animation: var(--idf-anim, none) !important;
}

/* framed wrappers keep no frame of their own */
html body :is(.data-avatar, .chat-avatar):is(.avatar-frame-custom, .owner-avatar-ring, .featured-avatar-ring):not(#i) {
  border: 0 !important;
  box-shadow: none !important;
}

/* ring on background-image avatars (post/comment avatars, previews, story card) */
html body :is(.post-avatar-picture, .comment-avatar-picture, .user-identity-avatar-preview, .img):is(.avatar-frame-custom, .owner-avatar-ring, .featured-avatar-ring):not(#i) {
  position: relative !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow:
    0 0 calc(var(--idf-blur, 7px) * var(--idf-blur-k, 1)) calc(var(--idf-blur, 7px) * -.2) color-mix(in srgb, var(--idf-glow) var(--idf-glow-mix, 55%), transparent) !important;
  animation: none !important;
}

html body :is(.post-avatar-picture, .comment-avatar-picture, .user-identity-avatar-preview, .img):is(.avatar-frame-custom, .owner-avatar-ring, .featured-avatar-ring):not(#i)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  box-sizing: border-box;
  border: var(--idf-w, 2px) solid transparent;
  border-radius: inherit;
  padding: var(--idf-g, 1.5px);
  background:
    linear-gradient(var(--idf-gap), var(--idf-gap)) padding-box,
    conic-gradient(from var(--idf-angle), var(--idf-c1), var(--idf-c2) 25%, var(--idf-c3) 50%, var(--idf-hi, var(--idf-c4)) 72%, var(--idf-c1)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) border-box;
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0) border-box;
  pointer-events: none;
  animation: var(--idf-anim, none);
}

/* proportional ring sizes */
html body :is(.comment-avatar-picture, .user-menu img, img.avatar-xs, img.rounded-circle.mr10, .voice-room-message-avatar img, .live-audience-comment-avatar, .live-audience-comment-avatar *, .data-avatar img, .chat-avatar img, .conversation img):not(#i) {
  --idf-w: 1.5px;
  --idf-g: 1px;
  --idf-blur: 5px;
}

html body :is(.post-avatar-picture, img.publisher-avatar):not(#i) {
  --idf-w: 2px;
  --idf-g: 1.5px;
  --idf-blur: 7px;
}

html body :is(.user-box img, img.user-profile-picture, .user-identity-avatar-preview, .idt-avatar-lg):not(#i) {
  --idf-w: 3px;
  --idf-g: 2.5px;
  --idf-blur: 12px;
}

/* profile header avatar */
html body .profile-header:is(.owner-luxury-profile, .featured-identity-profile, .custom-avatar-profile) .profile-avatar-wrapper:not(#i) {
  padding: 4px !important;
  background: conic-gradient(from var(--idf-angle), var(--idf-c1), var(--idf-c2) 25%, var(--idf-c3) 50%, var(--idf-hi, var(--idf-c4)) 72%, var(--idf-c1)) !important;
  box-shadow:
    0 10px 26px rgba(0, 0, 0, .28),
    0 0 calc(22px * var(--idf-blur-k, 1)) -4px color-mix(in srgb, var(--idf-glow) var(--idf-glow-mix, 60%), transparent) !important;
  filter: none !important;
  animation: var(--idf-anim, none) !important;
}

html body .profile-header:is(.owner-luxury-profile, .featured-identity-profile, .custom-avatar-profile) .profile-avatar-wrapper:not(#i) > img {
  border: 4px solid var(--idf-gap) !important;
  background: var(--idf-gap) !important;
  outline: 0 !important;
  box-shadow: none !important;
}

html body .owner-avatar-crown:not(#i) {
  top: 2% !important;
  inset-inline-end: 2% !important;
  width: 30px !important;
  height: 30px !important;
  border: 1.5px solid #f6d77a !important;
  background: linear-gradient(145deg, #1f2937, #0b1220) !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .35), 0 0 10px -2px rgba(246, 201, 69, .7) !important;
  color: #f6c945 !important;
  font-size: 13px !important;
}

@keyframes idf-spin {
  to { --idf-angle: 360deg; }
}

@keyframes idf-sway {
  from { --idf-angle: 0deg; }
  to { --idf-angle: 120deg; }
}

/* ===================================================================
   5. Admin identity editor (live preview stage + preset grids)
   =================================================================== */
.idt-stage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 720px;
}

.idt-pane {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 16px;
}

.idt-pane.idt-light { background: #ffffff; }
.idt-pane.idt-dark { background: #0c1129; border-color: rgba(255, 255, 255, .08); }

.idt-pane-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #64748b;
}

.idt-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.idt-row .idt-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.idt-row .idt-meta .js-user-identity-name-preview { font-size: 15px; font-weight: 700; color: var(--identity-plain); }
.idt-row-lg .idt-meta .js-user-identity-name-preview { font-size: 20px; }
.idt-row-xs .idt-meta .js-user-identity-name-preview { font-size: 12.5px; }
.idt-row .idt-sub { display: block; width: 100%; font-size: 11px; color: #94a3b8; }

.idt-av { display: inline-flex; flex: 0 0 auto; }

html body .idt-av > .user-identity-avatar-preview:not(#i),
.user-identity-avatar-preview.idt-avatar {
  display: inline-block;
  width: var(--idt-size, 40px);
  height: var(--idt-size, 40px);
  min-width: var(--idt-size, 40px);
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.idt-av-lg { --idt-size: 64px; }
.idt-av-md { --idt-size: 40px; }
.idt-av-sm { --idt-size: 28px; }

html body .idt-av-md > .user-identity-avatar-preview:not(#i) { --idf-w: 2px; --idf-g: 1.5px; --idf-blur: 7px; }
html body .idt-av-sm > .user-identity-avatar-preview:not(#i) { --idf-w: 1.5px; --idf-g: 1px; --idf-blur: 5px; }

html body .idt-row-lg .user-badge-chip:not(#i) {
  --ub-h: 26px;
  --ub-fs: 12.5px;
  --ub-ic: 11.5px;
  --ub-px: 11px;
  --ub-gap: 6px;
}

html body .idt-row-xs .user-badge-chip:not(#i) {
  --ub-h: 16px;
  --ub-fs: 9.5px;
  --ub-ic: 8.5px;
  --ub-px: 6px;
  --ub-gap: 3px;
}

.idt-presets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px;
  max-width: 720px;
  margin-top: 10px;
}

.idt-preset {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-height: 74px;
  padding: 10px 6px 8px;
  border: 1px solid rgba(148, 163, 184, .3);
  border-radius: 12px;
  background: #0c1129;
  color: #cbd5e1;
  font-size: 11px;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.idt-preset:hover { border-color: #60a5fa; }

.idt-preset.active {
  border-color: #38bdf8;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, .35);
}

.idt-preset .identity-name { font-size: 15px; }
.idt-preset .idt-avatar { width: 40px; height: 40px; }
.idt-preset small { font-size: 10.5px; opacity: .85; }

.idt-badge-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 720px;
  margin-top: 10px;
}

.idt-badge-presets button {
  padding: 4px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.idt-badge-presets button:hover,
.idt-badge-presets button:focus-visible {
  border-color: rgba(56, 189, 248, .6);
}

.idt-badge-presets .user-badge-chip { pointer-events: none; }

@media (max-width: 575.98px) {
  .idt-stage { grid-template-columns: 1fr; }
}

/* ===================================================================
   6. Reduced motion: keep the look, drop the movement
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  * {
    --idn-anim: none !important;
    --idf-anim: none !important;
    --ub-anim: none !important;
  }
}