/* ═══════════════════════════════════════════════════════════════════════════
   YN HUD KIT — Cyberpunk UI Components
   AfrikaBurn Mission Control Aesthetic
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Core palette */
  --hud-stroke: #ffde17;
  --hud-stroke-dim: rgba(255, 222, 23, 0.45);
  --hud-glow: rgba(255, 222, 23, 0.35);
  --hud-glow-strong: rgba(255, 222, 23, 0.6);
  --hud-bg: rgba(0, 0, 0, 0.85);
  --hud-bg-inner: rgba(0, 0, 0, 0.92);

  /* Stroke widths */
  --hud-stroke-w: 2px;
  --hud-stroke-w-thick: 3px;

  /* Sizing */
  --hud-radius-sm: 6px;
  --hud-radius-md: 12px;
  --hud-radius-lg: 18px;
  --hud-bevel: 16px;
  --hud-bevel-lg: 28px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   1. RECTANGULAR PANELS — Beveled corners, inner stroke, outer glow
   ═══════════════════════════════════════════════════════════════════════════ */

/* Base panel */
.hud-panel {
  position: relative;
  background: var(--hud-bg);
  border: var(--hud-stroke-w) solid var(--hud-stroke);
  box-shadow:
    0 0 12px var(--hud-glow),
    inset 0 0 20px rgba(0, 0, 0, 0.6);
  transition: box-shadow 0.2s ease;
}

.hud-panel:hover {
  box-shadow:
    0 0 18px var(--hud-glow-strong),
    inset 0 0 20px rgba(0, 0, 0, 0.6);
}

/* Small panel — subtle bevel */
.hud-panel--sm {
  min-height: 60px;
  padding: 12px 16px;
  clip-path: polygon(
    0 var(--hud-bevel),
    var(--hud-bevel) 0,
    100% 0,
    100% calc(100% - var(--hud-bevel)),
    calc(100% - var(--hud-bevel)) 100%,
    0 100%
  );
}

/* Medium panel — balanced bevel */
.hud-panel--md {
  min-height: 100px;
  padding: 16px 20px;
  clip-path: polygon(
    0 var(--hud-bevel),
    var(--hud-bevel) 0,
    calc(100% - var(--hud-bevel)) 0,
    100% var(--hud-bevel),
    100% 100%,
    0 100%
  );
}

/* Large panel — dramatic bevel */
.hud-panel--lg {
  min-height: 160px;
  padding: 20px 24px;
  clip-path: polygon(
    0 var(--hud-bevel-lg),
    var(--hud-bevel-lg) 0,
    100% 0,
    100% calc(100% - var(--hud-bevel-lg)),
    calc(100% - var(--hud-bevel-lg)) 100%,
    0 100%
  );
}

/* Arrow panel (pointed right) */
.hud-panel--arrow {
  min-height: 80px;
  padding: 14px 32px 14px 18px;
  clip-path: polygon(
    0 8px,
    8px 0,
    calc(100% - 24px) 0,
    100% 50%,
    calc(100% - 24px) 100%,
    8px 100%,
    0 calc(100% - 8px)
  );
}

/* Notched panel (sci-fi cutout) */
.hud-panel--notched {
  min-height: 120px;
  padding: 18px;
  clip-path: polygon(
    0 16px,
    16px 0,
    calc(100% - 40px) 0,
    calc(100% - 40px) 8px,
    calc(100% - 8px) 8px,
    100% 24px,
    100% calc(100% - 16px),
    calc(100% - 16px) 100%,
    16px 100%,
    0 calc(100% - 16px)
  );
}

/* Double-stroke effect using pseudo-element */
.hud-panel--double::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--hud-stroke-dim);
  clip-path: inherit;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. CIRCULAR MODULES — Rings, arcs, gauges
   ═══════════════════════════════════════════════════════════════════════════ */

/* Base ring */
.hud-ring {
  position: relative;
  border-radius: 50%;
  background: var(--hud-bg-inner);
  border: var(--hud-stroke-w) solid var(--hud-stroke);
  box-shadow:
    0 0 14px var(--hud-glow),
    inset 0 0 12px rgba(0, 0, 0, 0.7);
  aspect-ratio: 1;
}

/* Small ring */
.hud-ring--sm {
  width: 64px;
}

/* Medium ring */
.hud-ring--md {
  width: 100px;
}

/* Large ring */
.hud-ring--lg {
  width: 160px;
}

/* Double ring (concentric) */
.hud-ring--double::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px solid var(--hud-stroke-dim);
}

/* Triple ring */
.hud-ring--triple::before,
.hud-ring--triple::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--hud-stroke-dim);
}
.hud-ring--triple::before { inset: 6px; }
.hud-ring--triple::after { inset: 14px; border-color: var(--hud-stroke); }

/* Dashed ring */
.hud-ring--dashed {
  border-style: dashed;
  border-width: 2px;
}

/* Segmented ring (tick marks) */
.hud-ring--segmented {
  background:
    var(--hud-bg-inner),
    repeating-conic-gradient(
      from 0deg,
      var(--hud-stroke) 0deg 2deg,
      transparent 2deg 15deg
    );
  background-blend-mode: normal;
}

/* Arc / partial ring using conic-gradient mask */
.hud-arc {
  position: relative;
  width: 120px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    from 220deg,
    var(--hud-stroke) 0deg,
    var(--hud-stroke) 280deg,
    transparent 280deg
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 4px),
    #000 calc(100% - 4px)
  );
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 4px),
    #000 calc(100% - 4px)
  );
  filter: drop-shadow(0 0 8px var(--hud-glow));
}

/* Arc variants */
.hud-arc--quarter {
  background: conic-gradient(
    from 0deg,
    var(--hud-stroke) 0deg,
    var(--hud-stroke) 90deg,
    transparent 90deg
  );
}

.hud-arc--half {
  background: conic-gradient(
    from 270deg,
    var(--hud-stroke) 0deg,
    var(--hud-stroke) 180deg,
    transparent 180deg
  );
}

.hud-arc--three-quarter {
  background: conic-gradient(
    from 180deg,
    var(--hud-stroke) 0deg,
    var(--hud-stroke) 270deg,
    transparent 270deg
  );
}

/* Gauge ring with gradient */
.hud-gauge {
  position: relative;
  width: 140px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    from 135deg,
    transparent 0deg,
    var(--hud-stroke-dim) 0deg,
    var(--hud-stroke) 200deg,
    transparent 200deg
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 6px),
    #000 calc(100% - 6px) calc(100% - 2px),
    transparent calc(100% - 2px)
  );
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 6px),
    #000 calc(100% - 6px) calc(100% - 2px),
    transparent calc(100% - 2px)
  );
  filter: drop-shadow(0 0 10px var(--hud-glow));
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. DIVIDERS & CONNECTORS — Lines, circuits, nodes
   ═══════════════════════════════════════════════════════════════════════════ */

/* Horizontal divider */
.hud-divider {
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--hud-stroke) 15%,
    var(--hud-stroke) 85%,
    transparent
  );
  box-shadow: 0 0 8px var(--hud-glow);
}

/* Divider with end caps */
.hud-divider--capped {
  position: relative;
  height: 2px;
  background: var(--hud-stroke);
  margin: 0 12px;
}
.hud-divider--capped::before,
.hud-divider--capped::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  background: var(--hud-stroke);
  transform: translateY(-50%) rotate(45deg);
  box-shadow: 0 0 6px var(--hud-glow);
}
.hud-divider--capped::before { left: -12px; }
.hud-divider--capped::after { right: -12px; }

/* Dashed divider */
.hud-divider--dashed {
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    var(--hud-stroke) 0,
    var(--hud-stroke) 8px,
    transparent 8px,
    transparent 14px
  );
  filter: drop-shadow(0 0 4px var(--hud-glow));
}

/* Circuit line (horizontal) */
.hud-circuit {
  display: flex;
  align-items: center;
  gap: 0;
  height: 20px;
}

.hud-circuit__line {
  flex: 1;
  height: 2px;
  background: var(--hud-stroke);
  box-shadow: 0 0 6px var(--hud-glow);
}

.hud-circuit__node {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--hud-bg-inner);
  border: 2px solid var(--hud-stroke);
  box-shadow: 0 0 8px var(--hud-glow);
  flex-shrink: 0;
}

.hud-circuit__node--solid {
  background: var(--hud-stroke);
}

/* Vertical connector */
.hud-connector {
  width: 2px;
  min-height: 40px;
  background: linear-gradient(
    180deg,
    transparent,
    var(--hud-stroke) 20%,
    var(--hud-stroke) 80%,
    transparent
  );
  box-shadow: 0 0 6px var(--hud-glow);
}

/* Corner connector (L-shaped) */
.hud-corner {
  position: relative;
  width: 40px;
  height: 40px;
}
.hud-corner::before,
.hud-corner::after {
  content: "";
  position: absolute;
  background: var(--hud-stroke);
  box-shadow: 0 0 6px var(--hud-glow);
}
.hud-corner::before {
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
}
.hud-corner::after {
  width: 2px;
  height: 100%;
  top: 0;
  left: 0;
}

/* Corner with node */
.hud-corner--node::before {
  content: "";
  position: absolute;
  bottom: -4px;
  left: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--hud-stroke);
  box-shadow: 0 0 8px var(--hud-glow);
  z-index: 1;
}

/* Node dot (standalone) */
.hud-node {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--hud-bg-inner);
  border: 2px solid var(--hud-stroke);
  box-shadow: 0 0 10px var(--hud-glow);
}

.hud-node--solid {
  background: var(--hud-stroke);
}

.hud-node--lg {
  width: 18px;
  height: 18px;
  border-width: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. ACCENT FRAMES — Title bars, containers, brackets
   ═══════════════════════════════════════════════════════════════════════════ */

/* Title bar */
.hud-titlebar {
  position: relative;
  padding: 10px 18px;
  background: linear-gradient(
    90deg,
    var(--hud-stroke) 0%,
    rgba(255, 222, 23, 0.15) 30%,
    transparent 100%
  );
  clip-path: polygon(
    0 0,
    calc(100% - 20px) 0,
    100% 100%,
    0 100%
  );
  box-shadow: 0 0 12px var(--hud-glow);
}

.hud-titlebar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--hud-stroke);
}

/* Corner brackets */
.hud-brackets {
  position: relative;
  padding: 20px;
  min-height: 80px;
}

.hud-brackets::before,
.hud-brackets::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  border-color: var(--hud-stroke);
  border-style: solid;
  filter: drop-shadow(0 0 4px var(--hud-glow));
}

.hud-brackets::before {
  top: 0;
  left: 0;
  border-width: 2px 0 0 2px;
}

.hud-brackets::after {
  bottom: 0;
  right: 0;
  border-width: 0 2px 2px 0;
}

/* Full corner frame (all 4 corners) */
.hud-frame {
  position: relative;
  padding: 24px;
  min-height: 100px;
}

.hud-frame__corner {
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: var(--hud-stroke);
  border-style: solid;
  filter: drop-shadow(0 0 4px var(--hud-glow));
}

.hud-frame__corner--tl { top: 0; left: 0; border-width: 2px 0 0 2px; }
.hud-frame__corner--tr { top: 0; right: 0; border-width: 2px 2px 0 0; }
.hud-frame__corner--bl { bottom: 0; left: 0; border-width: 0 0 2px 2px; }
.hud-frame__corner--br { bottom: 0; right: 0; border-width: 0 2px 2px 0; }

/* Tech frame (angular) */
.hud-techframe {
  position: relative;
  padding: 20px;
  background: var(--hud-bg);
  border: 1px solid var(--hud-stroke-dim);
  clip-path: polygon(
    0 12px,
    12px 0,
    calc(100% - 12px) 0,
    100% 12px,
    100% calc(100% - 12px),
    calc(100% - 12px) 100%,
    12px 100%,
    0 calc(100% - 12px)
  );
  box-shadow: 0 0 16px var(--hud-glow);
}

/* Thick accent border on one side */
.hud-techframe--accent-left::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 4px;
  background: var(--hud-stroke);
}

.hud-techframe--accent-top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12px;
  right: 12px;
  height: 4px;
  background: var(--hud-stroke);
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. DECORATIVE ELEMENTS — Scanlines, tick marks, hash marks
   ═══════════════════════════════════════════════════════════════════════════ */

/* Scanline overlay */
.hud-scanlines {
  position: relative;
}
.hud-scanlines::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.15) 2px,
    rgba(0, 0, 0, 0.15) 4px
  );
  pointer-events: none;
}

/* Hash marks (ruler style) */
.hud-hashmarks {
  height: 12px;
  background: repeating-linear-gradient(
    90deg,
    var(--hud-stroke) 0,
    var(--hud-stroke) 2px,
    transparent 2px,
    transparent 8px
  );
  filter: drop-shadow(0 0 3px var(--hud-glow));
}

/* Long + short alternating */
.hud-ruler {
  position: relative;
  height: 16px;
  background: repeating-linear-gradient(
    90deg,
    var(--hud-stroke) 0,
    var(--hud-stroke) 2px,
    transparent 2px,
    transparent 20px
  );
}
.hud-ruler::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10px;
  right: 0;
  height: 8px;
  background: repeating-linear-gradient(
    90deg,
    var(--hud-stroke-dim) 0,
    var(--hud-stroke-dim) 1px,
    transparent 1px,
    transparent 20px
  );
}

/* Chevron marks */
.hud-chevrons {
  display: flex;
  gap: 6px;
}
.hud-chevron {
  width: 10px;
  height: 16px;
  background: var(--hud-stroke);
  clip-path: polygon(0 0, 100% 50%, 0 100%, 30% 50%);
  filter: drop-shadow(0 0 4px var(--hud-glow));
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. ANIMATIONS — Pulse, glow, rotate
   ═══════════════════════════════════════════════════════════════════════════ */

/* Pulse glow */
@keyframes hud-pulse {
  0%, 100% { opacity: 0.6; filter: drop-shadow(0 0 6px var(--hud-glow)); }
  50% { opacity: 1; filter: drop-shadow(0 0 14px var(--hud-glow-strong)); }
}

.hud-pulse {
  animation: hud-pulse 2.5s ease-in-out infinite;
}

/* Slow rotation */
@keyframes hud-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.hud-rotate {
  animation: hud-rotate 20s linear infinite;
}

.hud-rotate--slow {
  animation-duration: 40s;
}

.hud-rotate--reverse {
  animation-direction: reverse;
}

/* Scan line sweep */
@keyframes hud-scan {
  0% { transform: translateY(-100%); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}

.hud-scan::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--hud-stroke),
    transparent
  );
  animation: hud-scan 3s ease-in-out infinite;
}

/* Flicker */
@keyframes hud-flicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.4; }
  94% { opacity: 1; }
  96% { opacity: 0.7; }
  97% { opacity: 1; }
}

.hud-flicker {
  animation: hud-flicker 4s steps(1) infinite;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Glow intensities */
.hud-glow-none { filter: none !important; box-shadow: none !important; }
.hud-glow-subtle { filter: drop-shadow(0 0 4px var(--hud-glow)); }
.hud-glow-medium { filter: drop-shadow(0 0 10px var(--hud-glow)); }
.hud-glow-strong { filter: drop-shadow(0 0 18px var(--hud-glow-strong)); }

/* Stroke variants */
.hud-stroke-thin { --hud-stroke-w: 1px; }
.hud-stroke-thick { --hud-stroke-w: 3px; }

/* Opacity variants */
.hud-dim { opacity: 0.5; }
.hud-bright { opacity: 1; filter: brightness(1.1); }

/* Interaction states */
.hud-interactive {
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.hud-interactive:hover {
  transform: scale(1.02);
  filter: drop-shadow(0 0 16px var(--hud-glow-strong));
}
.hud-interactive:active {
  transform: scale(0.98);
}

/* --- Profile HUD polish --- */
.yn-profile-hud { gap: 22px; }

.yn-hud-field { padding: 8px 0; }
.yn-hud-field--full { grid-column: 1 / -1; }

.yn-hud-label{
  display:block;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 8px;
}

.yn-hud-value{
  display:block;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 0 rgba(0,0,0,.45);
  min-height: 22px; /* keeps rows consistent */
}

.yn-hud-grid{ padding: 18px 22px 22px; }

.yn-hud-cta{ padding: 16px 18px; }
.yn-hud-link{ color:#ffde17; font-weight:900; text-decoration:none; display:inline-block; }

/* Mobile tightening */
@media (max-width: 768px){
  .yn-hud-grid{ padding: 14px 14px 16px; }
  .yn-hud-value{ font-size: 16px; }
}

/* ==========================================================
   ARMember Avatar (field class: yn-avatar-field)
   Targets your exact structure:
   .yn-avatar-field .arm-ffw__file-upload-box ...
   ========================================================== */

   :root{
    --yn-av-size: 148px;                /* mobile */
    --yn-av-size-d: 176px;              /* desktop */
    --yn-av-glow: rgba(255,222,23,.35);
    --yn-av-stroke: rgba(255,222,23,.70);
    --yn-av-stroke-dim: rgba(255,222,23,.22);
    --yn-av-bg: rgba(0,0,0,.85);
  }
  @media (min-width: 768px){
    :root{ --yn-av-size: var(--yn-av-size-d); }
  }
  
  /* 0) tighten label spacing */
  .yn-avatar-field .arm_form_label_wrapper{ margin: 0 0 10px !important; }
  .yn-avatar-field .arm_label_input_separator{ display:none !important; }
  
  /* 1) Make the REAL box the circle */
  .yn-avatar-field .arm-ffw__file-upload-box{
    width: var(--yn-av-size) !important;
    height: var(--yn-av-size) !important;
    max-width: var(--yn-av-size) !important;
  
    border-radius: 999px !important;
    overflow: hidden !important;
  
    position: relative !important;
    display: grid !important;
    place-items: center !important;
  
    background:
      radial-gradient(circle at 35% 30%,
        rgba(255,255,255,.10),
        rgba(255,255,255,.03) 38%,
        rgba(0,0,0,.92) 78%) !important;
  
    border: 1px solid var(--yn-av-stroke-dim) !important;
    box-shadow:
      0 0 16px var(--yn-av-glow),
      inset 0 0 22px rgba(0,0,0,.75) !important;
  }
  
  /* 2) Remove the big rectangular placeholder box (THIS is what you're seeing) */
  .yn-avatar-field .armFileDragAreaText,
  .yn-avatar-field .armFileUploaderWrapper,
  .yn-avatar-field .armFileUploaderPlaceholder{
    display: none !important;
  }
  
  /* 3) Preview container should not impose its own size/shape */
  .yn-avatar-field .arm_old_file,
  .yn-avatar-field .arm_file_preview_container,
  .yn-avatar-field .arm_uploaded_file_info{
    width: 100% !important;
    height: 100% !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    position: relative !important;
  }
  
  /* 4) Make the image fill the circle */
  .yn-avatar-field .arm_uploaded_file_info img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display:block !important;
  }
  
  /* 5) The file input should cover the circle so click/tap works */
  .yn-avatar-field input[type="file"][name="avatar"]{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    cursor: pointer !important;
    z-index: 4 !important;
  }
  
  /* 6) Remove button styling (the little X) */
  .yn-avatar-field .armFileRemoveContainer{
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    z-index: 6 !important;
  
    width: 30px !important;
    height: 30px !important;
    border-radius: 999px !important;
  
    background: rgba(0,0,0,.65) !important;
    border: 1px solid rgba(255,222,23,.28) !important;
    color: #ffde17 !important;
  
    display: grid !important;
    place-items: center !important;
    cursor: pointer !important;
  }
  
  /* 7) HUD conic-gradient ring + inner ring */
  .yn-avatar-field .arm-ffw__file-upload-box::before{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:999px;
    pointer-events:none;
  
    background: conic-gradient(
      from 210deg,
      rgba(255,222,23,0) 0deg,
      rgba(255,222,23,.95) 18deg,
      rgba(255,222,23,.10) 30deg,
      rgba(255,222,23,0) 52deg,
      rgba(255,222,23,0) 120deg,
      rgba(255,222,23,.85) 150deg,
      rgba(255,222,23,.08) 165deg,
      rgba(255,222,23,0) 195deg,
      rgba(255,222,23,0) 270deg,
      rgba(255,222,23,.9) 305deg,
      rgba(255,222,23,.10) 320deg,
      rgba(255,222,23,0) 360deg
    );
  
    -webkit-mask: radial-gradient(farthest-side,
      transparent calc(100% - 3px),
      #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side,
      transparent calc(100% - 3px),
      #000 calc(100% - 3px));
  
    filter: drop-shadow(0 0 10px var(--yn-av-glow));
    opacity: .95;
  }
  .yn-avatar-field .arm-ffw__file-upload-box::after{
    content:"";
    position:absolute;
    inset: 10px;
    border-radius: 999px;
    pointer-events:none;
    border: 1px solid rgba(255,222,23,.18);
    box-shadow: inset 0 0 18px rgba(0,0,0,.55);
  }
  
  /* 8) If no image exists, show a clean center hint */
  .yn-avatar-field .arm-ffw__file-upload-box:not(:has(img))::marker{ content:""; }
  .yn-avatar-field .arm-ffw__file-upload-box:not(:has(img))::after{
    content:"Tap to upload";
    display:grid;
    place-items:center;
    color: rgba(255,255,255,.70);
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
    font-size: 11px;
  }

  /* ===========================
   Avatar HUD polish (patch)
   =========================== */

/* 1) Lock circle geometry + center everything */
.yn-avatar-field .arm-ffw__file-upload-box{
  margin: 10px 0 22px !important;
  place-items: center !important;
  box-shadow:
    0 0 22px rgba(255,222,23,.22),
    inset 0 0 30px rgba(0,0,0,.75) !important;
}

/* 2) Make image sit as a clean disc (no weird edges) */
.yn-avatar-field .arm_uploaded_file_info img{
  transform: scale(1.02); /* tiny bleed to hide any inner seams */
  filter: contrast(1.05) saturate(1.05);
}

/* 3) Make the outer ring a real “ring”, not a halo */
.yn-avatar-field .arm-ffw__file-upload-box::before{
  inset: -10px !important;           /* push ring OUTSIDE the photo disc */
  opacity: 1 !important;
  filter: drop-shadow(0 0 14px rgba(255,222,23,.25)) !important;

  /* ring thickness via mask (stronger + cleaner) */
  -webkit-mask: radial-gradient(farthest-side,
    transparent calc(100% - 5px),
    #000 calc(100% - 5px));
  mask: radial-gradient(farthest-side,
    transparent calc(100% - 5px),
    #000 calc(100% - 5px));
}

/* 4) Add a sharp “inner rim” so it reads like a module */
.yn-avatar-field .arm-ffw__file-upload-box::after{
  inset: 8px !important;
  border: 1px solid rgba(255,222,23,.22) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,222,23,.08),
    inset 0 0 18px rgba(0,0,0,.55) !important;
}

/* 5) Fix the X button: move it OUTSIDE + make it match UI */
.yn-avatar-field .armFileRemoveContainer{
  top: -6px !important;
  right: -6px !important;

  width: 34px !important;
  height: 34px !important;

  background: rgba(10,10,10,.75) !important;
  border: 1px solid rgba(255,222,23,.35) !important;
  box-shadow: 0 0 10px rgba(255,222,23,.20) !important;

  font-size: 18px !important;
  line-height: 1 !important;
}

/* 6) Add 3 subtle “ticks” on the ring using extra pseudo on preview container */
.yn-avatar-field .arm_file_preview_container::before{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius:999px;
  pointer-events:none;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg 20deg,
      rgba(255,222,23,.85) 20deg 21deg,
      transparent 21deg 140deg,
      rgba(255,222,23,.65) 140deg 141deg,
      transparent 141deg 260deg,
      rgba(255,222,23,.75) 260deg 261deg,
      transparent 261deg 360deg
    );
  -webkit-mask: radial-gradient(farthest-side,
    transparent calc(100% - 3px),
    #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side,
    transparent calc(100% - 3px),
    #000 calc(100% - 3px));
  opacity:.55;
  filter: drop-shadow(0 0 10px rgba(255,222,23,.18));
}

/* 7) Prevent any hidden upload UI from affecting layout */
.yn-avatar-field .arm_old_file,
.yn-avatar-field .armFileUploadWrapper,
.yn-avatar-field .armNormalFileUpload{
  width: 100% !important;
}