/* SESSION CANONICAL TIER PILLS — single source of truth, identical on every bg.
   Glossy/dimensional FX (top sheen + bevel + glow) + hover lift. Live
   admin.session.am colors + Tommy 2026-06-18 corrections. Every surface reads this. */
.tier-pill {
  --accent: #7c5cff;
  --tp-glow: 0 0 0 transparent;
  --tp-glow-hover: 0 0 0 transparent;
  display: inline-flex; align-items: center; justify-content: center;
  height: 23px; min-width: 0; padding: 0 11px; border-radius: 999px;
  border: 1px solid var(--tp-border, #c2c2c5);
  background: var(--tp-bg, #fff);
  color: var(--tp-color, #000);
  font-family: 'Geist', 'Geist Sans', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  font-size: 10px; font-weight: 500; letter-spacing: .22em; text-indent: .22em;
  font-feature-settings: "ss01", "cv11", "tnum"; font-variant-numeric: tabular-nums;
  line-height: 1; text-transform: uppercase; white-space: nowrap;
  user-select: none; position: relative; isolation: isolate; cursor: default; overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1.5px 1px rgba(0,0,0,.30),
    inset 0 0 0 .5px rgba(255,255,255,.08),
    0 1px 2px rgba(0,0,0,.28),
    0 2px 6px -2px rgba(0,0,0,.30),
    var(--tp-glow);
  transition: transform .18s ease, box-shadow .28s ease, filter .2s ease;
  transform: translateY(0);
}
/* glossy top sheen — screen-blended so it only adds light (never darkens text) */
.tier-pill::after {
  content:''; position:absolute; left:0; right:0; top:0; height:52%;
  background: linear-gradient(180deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,.10) 70%, rgba(255,255,255,0) 100%);
  mix-blend-mode: screen; pointer-events:none; z-index:2;
  border-radius: 999px 999px 60% 60% / 999px 999px 100% 100%;
}
.tier-pill:hover {
  transform: translateY(-1.5px);
  filter: brightness(1.06) saturate(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -1.5px 1px rgba(0,0,0,.32),
    0 4px 10px rgba(0,0,0,.32),
    var(--tp-glow-hover);
}
.tier-pill.tp-free { --tp-bg:#ffffff; --tp-color:#000000; --tp-border:#c2c2c5; }
.tier-pill.tp-starter, .tier-pill.tp-artist {
  --tp-bg: linear-gradient(180deg,#2c6e49 0%,#1f5132 55%,#15391f 100%);
  --tp-color:#ffffff; --tp-border:rgba(10,34,19,.9);
  --tp-glow: 0 0 16px -3px rgba(31,81,50,.55); --tp-glow-hover: 0 0 26px -2px rgba(31,81,50,.7); }
.tier-pill.tp-pro {
  --tp-bg: linear-gradient(180deg,#22222a 0%,#0a0a0e 55%,#07070b 100%);
  --tp-color:#f5f3ee; --tp-border:#07070b; --tp-glow: 0 0 14px -4px rgba(255,255,255,.18); }
.tier-pill.tp-max {
  --tp-bg: linear-gradient(180deg,#22222a 0%,#0a0a0e 55%,#07070b 100%);
  --tp-color:#ffffff; --tp-border:#07070b;
  --tp-glow: 0 0 18px -2px rgba(248,215,130,.65); --tp-glow-hover: 0 0 32px -2px rgba(248,215,130,.85); }
.tier-pill.tp-label, .tier-pill.tp-team {
  --tp-bg: var(--accent,#7c5cff); --tp-color:#000000; --tp-border: transparent; border: none;
  --tp-glow: 0 0 14px -4px var(--accent,#7c5cff); --tp-glow-hover: 0 0 24px -2px var(--accent,#7c5cff); }
.tier-pill.tp-beta {
  --tp-bg: var(--accent,#7c5cff); --tp-color:#000000; --tp-border: transparent; border: none;
  --tp-glow: 0 0 14px -4px var(--accent,#7c5cff); --tp-glow-hover: 0 0 24px -2px var(--accent,#7c5cff); }
.tier-pill.tp-god {
  --tp-bg: linear-gradient(180deg,#fbf6e8 0%,#ede1c4 100%);
  --tp-color:#000000; --tp-border:rgba(255,228,170,.85);
  --tp-glow: 0 0 0 1px rgba(255,232,170,.75), 0 0 12px 0 rgba(255,232,170,.85), 0 0 28px 2px rgba(248,215,130,.55), 0 0 64px 6px rgba(240,200,110,.30);
  --tp-glow-hover: 0 0 0 1px rgba(255,232,170,.85), 0 0 16px 1px rgba(255,232,170,1), 0 0 44px 4px rgba(248,215,130,.75), 0 0 96px 10px rgba(240,195,100,.45); }
.tier-pill.tp-001 { --tp-bg:#ffffff; --tp-color:#6f655b; --tp-border:transparent; border-color:transparent;
  --tp-glow: 0 0 12px -3px rgba(251,191,36,.5); }
.tier-pill.tp-001::before {
  content:''; position:absolute; inset:0; border-radius:999px; padding:1.5px; z-index:3;
  background: conic-gradient(#0b3d90,#af015a,#0165c9,#d55d01,#6a4b93,#2d7d32,#c62828,#37464f,#6593ad,#f9a922,#101826,#0b3d90);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; }

/* FREE is FLAT — no gloss/bevel/glow (Tommy 2026-06-18: free no fx, team YES fx).
   TEAM/BETA now keep the base glossy FX. */
.tier-pill.tp-free {
  box-shadow: none;
  --tp-glow: 0 0 0 transparent; --tp-glow-hover: 0 0 0 transparent;
}
.tier-pill.tp-free::after { display: none; }
.tier-pill.tp-free:hover { transform: none; filter: none; box-shadow: none; }

/* MAX: animated rainbow glow halo (Tommy 2026-06-18: "max pill should have the rainbow fx").
   Keeps the black face + gloss; the outer glow cycles through the spectrum. */
.tier-pill.tp-max {
  --tp-glow: 0 0 0 transparent;
  animation: tp-max-rainbow 5s linear infinite;
}
@keyframes tp-max-rainbow {
  0%,100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1.5px 1px rgba(0,0,0,.30), 0 1px 2px rgba(0,0,0,.28), 0 0 20px -1px hsl(0,95%,62%); }
  20%     { box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1.5px 1px rgba(0,0,0,.30), 0 1px 2px rgba(0,0,0,.28), 0 0 20px -1px hsl(48,95%,58%); }
  40%     { box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1.5px 1px rgba(0,0,0,.30), 0 1px 2px rgba(0,0,0,.28), 0 0 20px -1px hsl(140,80%,52%); }
  60%     { box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1.5px 1px rgba(0,0,0,.30), 0 1px 2px rgba(0,0,0,.28), 0 0 20px -1px hsl(205,92%,58%); }
  80%     { box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1.5px 1px rgba(0,0,0,.30), 0 1px 2px rgba(0,0,0,.28), 0 0 20px -1px hsl(282,85%,64%); }
}
@media (prefers-reduced-motion: reduce) { .tier-pill.tp-max { animation: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1.5px 1px rgba(0,0,0,.30), 0 1px 2px rgba(0,0,0,.28), 0 0 18px -2px rgba(248,215,130,.65); } }