/* rwc-token-logo.css - universal token logo (circular glass badge).
   Palette: Cyan #00E5FF, Primary Green #00FF00, Dark Navy #021522, Dark Blue #072642.
   No black squares, no hover scale. Sizes via modifier classes. */
.token-logo-frame{
  --tl:64px; --tl-glow:rgba(0,229,255,.38); --tl-glow2:rgba(0,229,255,.20);
  position:relative; display:inline-grid; place-items:center; flex:none;
  width:var(--tl); height:var(--tl); border-radius:50%; overflow:hidden; isolation:isolate;
  vertical-align:middle; box-sizing:border-box;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.22) 0%, rgba(255,255,255,.05) 46%, rgba(0,229,255,.07) 100%),
    rgba(7,38,66,.55);
  box-shadow:0 0 0 1.5px rgba(0,229,255,.62), 0 0 14px var(--tl-glow), inset 0 0 12px var(--tl-glow2);
  transition:box-shadow .22s ease;
}
.token-logo-frame::after{ /* glass sheen + inner rim, above the image */
  content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none; z-index:2;
  background:linear-gradient(155deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 38%),
             radial-gradient(circle, rgba(0,0,0,0) 62%, rgba(2,21,34,.30) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.token-logo-frame:hover{ box-shadow:0 0 0 1.5px rgba(0,229,255,.85), 0 0 24px rgba(0,229,255,.62), inset 0 0 14px rgba(0,229,255,.30) }
.token-logo-frame>img{
  position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1;
  object-fit:cover; object-position:center; background:none; border-radius:50%;
  image-rendering:auto; -webkit-user-drag:none; user-select:none;
}
/* sizes (cards use lg = 64px; rows/chips use the smaller variants of the same component) */
.token-logo-frame--xs{--tl:24px}.token-logo-frame--sm{--tl:32px}.token-logo-frame--md{--tl:48px}
.token-logo-frame--lg{--tl:64px}.token-logo-frame--xl{--tl:96px}
.token-logo-frame--xs,.token-logo-frame--sm{box-shadow:0 0 0 1px rgba(0,229,255,.6), 0 0 8px var(--tl-glow)}
.token-logo-frame--xs:hover,.token-logo-frame--sm:hover{box-shadow:0 0 0 1px rgba(0,229,255,.85), 0 0 14px rgba(0,229,255,.6)}
/* wide (landscape) sources: centre crop plus a small zoom so the coin fills the circle (static, not a hover effect) */
.token-logo-frame.tl-wide>img{ width:128%; height:128%; inset:-14%; }
/* smart visibility */
.token-logo-frame.tl-dark{ --tl-glow:rgba(255,255,255,.30); --tl-glow2:rgba(255,255,255,.10);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.55), 0 0 0 4px rgba(255,255,255,.10), 0 0 18px rgba(255,255,255,.30), inset 0 0 12px rgba(0,229,255,.14); }
.token-logo-frame.tl-dark>img{ filter:brightness(1.22) contrast(1.12) saturate(1.08) }
.token-logo-frame.tl-dark:hover{ box-shadow:0 0 0 1.5px rgba(255,255,255,.75), 0 0 0 4px rgba(255,255,255,.14), 0 0 28px rgba(255,255,255,.48), inset 0 0 14px rgba(0,229,255,.22) }
.token-logo-frame.tl-clear{ background:radial-gradient(circle, rgba(0,229,255,.22) 0%, rgba(0,229,255,.06) 62%, rgba(7,38,66,.5) 100%);
  --tl-glow:rgba(0,229,255,.55) }
.token-logo-frame.tl-bright{ /* bright logos: no extra background, just the frame */ }
.token-logo-frame.tl-unknown>img{ filter:brightness(1.08) contrast(1.05) }
/* fallback: initials in a premium badge (hue set inline via --h) */
.token-logo-frame--initials{
  --h:200; background:linear-gradient(145deg, hsl(var(--h) 72% 34%) 0%, hsl(calc(var(--h) + 38) 70% 16%) 100%);
  color:#fff; font:700 calc(var(--tl)*.34)/1 'Inter',system-ui,sans-serif; letter-spacing:.02em;
  text-shadow:0 1px 8px rgba(0,0,0,.45);
}
.token-logo-frame--initials .tl-ini{position:relative;z-index:1}
/* card variant: the badge overlaps the top edge of the card */
.token-logo-frame--overlap{ margin-top:calc(var(--tl) / -2); box-shadow:0 0 0 3px rgba(2,21,34,.95), 0 0 0 4.5px rgba(0,229,255,.62), 0 0 20px var(--tl-glow) }
@media (prefers-reduced-motion:reduce){ .token-logo-frame{transition:none} }