/* Session Vault canonical tier pills.
   Source design: Session Vault Tier Pills.html, Direction B.
   Scope: tier labels only. Generic chips, filters, and status pills stay local. */

:root {
  --sv-001-navy: #0b3d90;
  --sv-001-magenta: #af015a;
  --sv-001-royal: #0165c9;
  --sv-001-orange: #d55d01;
  --sv-001-purple: #6a4b93;
  --sv-001-green: #2d7d32;
  --sv-001-red: #c62828;
  --sv-001-slate: #37464f;
  --sv-001-sky: #6593ad;
  --sv-001-amber: #f9a922;
  --sv-001-ink: #101826;
}

/* Session™ Vault — sidebar tier pill sized to fit next to SESSION wordmark.
   Source: scaled down from the original spec so STARTER / FAMILY / LABEL fit. */
.sidebar__brand .sv-tier-pill,
.sidebar__brand .tier-pill {
  font-size: 9px !important;
  padding: 3px 9px !important;
  letter-spacing: 0.10em !important;
  height: auto !important;
  line-height: 1.2 !important;
}
.sv-tier-pill,
.tier-pill,
.session-tier-pill,
.avatar-menu-inline-tier,
.session-tier-badge > span,
.tier-badge {
  --tp-bg: linear-gradient(180deg, #e8e8ea 0%, #d4d4d6 100%);
  --tp-color: #444448;
  --tp-border: #c2c2c5;
  --tp-shadow:
    inset 0 1px 0 rgba(255,255,255,.70),
    inset 0 -1px 0 rgba(0,0,0,.06);
  --tp-hover-shadow: var(--tp-shadow);
  --tp-hover-lift: -1px;
  --tp-lift: 0px;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  min-width: 44px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid var(--tp-border);
  background: var(--tp-bg);
  color: var(--tp-color);
  box-shadow: var(--tp-shadow);
  font-family: 'Inter', 'Geist', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .22em;
  line-height: 1;
  text-align: center;
  text-indent: .22em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  font-feature-settings: "ss01", "cv11", "tnum";
  font-variant-numeric: tabular-nums;
  cursor: default;
  overflow: hidden;
  isolation: isolate;
  transform: perspective(280px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--tp-lift));
  transition:
    box-shadow .28s ease,
    transform .2s ease,
    background .2s ease,
    color .2s ease,
    border-color .2s ease,
    letter-spacing .25s ease;
}

.sv-tier-pill > .tp-text,
.tier-pill > .tp-text,
.session-tier-pill > .tp-text,
.avatar-menu-inline-tier > .tp-text,
.session-tier-badge > span > .tp-text,
.tier-badge > .tp-text {
  position: relative;
  z-index: 2;
}

.sv-tier-pill::before,
.sv-tier-pill::after,
.tier-pill::before,
.tier-pill::after,
.session-tier-pill::before,
.session-tier-pill::after,
.avatar-menu-inline-tier::before,
.avatar-menu-inline-tier::after,
.session-tier-badge > span::before,
.session-tier-badge > span::after,
.tier-badge::before,
.tier-badge::after {
  content: none;
}

.sv-tier-pill:hover,
.tier-pill:hover,
.session-tier-pill:hover,
.avatar-menu-inline-tier:hover,
.session-tier-badge > span:hover,
.tier-badge:hover {
  --tp-lift: var(--tp-hover-lift);
  box-shadow: var(--tp-hover-shadow);
}

.sv-tier-pill[data-role=""],
.sv-tier-pill[data-tier=""],
.tier-pill[data-role=""],
.tier-pill[data-tier=""],
.session-tier-badge[data-role=""] > span,
.session-tier-badge:not([data-role]) > span {
  display: none;
}

body.session-tier-resolving .sv-tier-pill,
body.session-tier-resolving .tier-pill,
body.session-tier-resolving .session-tier-pill,
body.session-tier-resolving .avatar-menu-tier-badge,
body.session-tier-resolving .avatar-menu-inline-tier,
body.session-tier-resolving .session-tier-badge {
  visibility: hidden;
}

.sv-tier-pill.sv-tp-free,
.tier-pill.tp-free,
.tier-pill[data-role="free"],
.tier-pill[data-role="viewer"],
.tier-pill[data-role="trial"],
.tier-pill[data-tier="free"],
.tier-pill[data-tier="viewer"],
.tier-pill[data-tier="trial"],
.session-tier-pill[data-role="free"],
.session-tier-pill[data-role="viewer"],
.session-tier-pill[data-role="trial"],
.avatar-menu-inline-tier[data-role="free"],
.avatar-menu-inline-tier[data-role="viewer"],
.avatar-menu-inline-tier[data-role="trial"],
.session-tier-badge > span[data-role="free"],
.session-tier-badge > span[data-role="viewer"],
.session-tier-badge > span[data-role="trial"],
.tier-badge[data-role="free"],
.tier-badge[data-role="viewer"],
.tier-badge[data-role="trial"],
.tier-badge[data-tier="free"],
.tier-badge[data-tier="viewer"],
.tier-badge[data-tier="trial"] {
  --tp-bg: linear-gradient(180deg, #e8e8ea 0%, #d4d4d6 100%);
  --tp-color: #444448;
  --tp-border: #c2c2c5;
  --tp-shadow:
    inset 0 1px 0 rgba(255,255,255,.70),
    inset 0 -1px 0 rgba(0,0,0,.06);
  --tp-hover-shadow: var(--tp-shadow);
  --tp-hover-lift: 0px;
  transition: none;
  animation: none;
  text-shadow: none;
}

.dark .tier-pill.tp-free,
body.dark .tier-pill.tp-free,
.dark .tier-pill[data-tier="free"],
body.dark .tier-pill[data-tier="free"],
.dark .session-tier-pill[data-role="free"],
body.dark .session-tier-pill[data-role="free"],
.dark .avatar-menu-inline-tier[data-role="free"],
body.dark .avatar-menu-inline-tier[data-role="free"],
.dark .session-tier-badge > span[data-role="free"],
body.dark .session-tier-badge > span[data-role="free"],
.dark .tier-badge[data-tier="free"],
body.dark .tier-badge[data-tier="free"] {
  --tp-bg: linear-gradient(180deg, #2a2a2e 0%, #1f1f23 100%);
  --tp-color: #b8b8bc;
  --tp-border: #3a3a3e;
  --tp-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.40);
  --tp-hover-shadow: var(--tp-shadow);
}

.sv-tier-pill.sv-tp-pro,
.tier-pill.tp-pro,
.tier-pill[data-role="pro"],
.tier-pill[data-role="editor"],
.tier-pill[data-tier="pro"],
.tier-pill[data-tier="editor"],
.session-tier-pill[data-role="pro"],
.session-tier-pill[data-role="editor"],
.avatar-menu-inline-tier[data-role="pro"],
.avatar-menu-inline-tier[data-role="editor"],
.session-tier-badge > span[data-role="pro"],
.session-tier-badge > span[data-role="editor"],
.tier-badge[data-role="pro"],
.tier-badge[data-role="editor"],
.tier-badge[data-tier="pro"],
.tier-badge[data-tier="editor"] {
  --tp-bg: linear-gradient(180deg, #d4c0f0 0%, #b89ce0 100%);
  --tp-color: #2e0f5e;
  --tp-border: #8a6bc4;
  --tp-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(60,20,120,.30),
    inset 0 0 0 .5px rgba(180,150,220,.50),
    0 0 0 .5px rgba(124,58,237,.30),
    0 0 16px -2px rgba(124,58,237,.40);
  --tp-hover-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -1px 0 rgba(60,20,120,.35),
    inset 0 0 0 .5px rgba(190,160,230,.60),
    0 0 0 .5px rgba(124,58,237,.45),
    0 0 26px 0 rgba(124,58,237,.55);
  font-weight: 600;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

.sv-tier-pill.sv-tp-max,
.sv-tier-pill.sv-tp-family,
.tier-pill.tp-max,
.tier-pill.tp-family,
.tier-pill.tp-vip,
.tier-pill[data-role="max"],
.tier-pill[data-role="master"],
.tier-pill[data-role="vault_black"],
.tier-pill[data-role="vault-black"],
.tier-pill[data-role="black"],
.tier-pill[data-role="atelier"],
.tier-pill[data-role="family"],
.tier-pill[data-role="vip"],
.tier-pill[data-role="reserve"],
.tier-pill[data-role="house"],
.tier-pill[data-tier="max"],
.tier-pill[data-tier="master"],
.tier-pill[data-tier="vault_black"],
.tier-pill[data-tier="vault-black"],
.tier-pill[data-tier="black"],
.tier-pill[data-tier="atelier"],
.tier-pill[data-tier="family"],
.tier-pill[data-tier="vip"],
.tier-pill[data-tier="reserve"],
.tier-pill[data-tier="house"],
.session-tier-pill[data-role="max"],
.session-tier-pill[data-role="master"],
.session-tier-pill[data-role="vault_black"],
.session-tier-pill[data-role="vault-black"],
.session-tier-pill[data-role="black"],
.session-tier-pill[data-role="atelier"],
.session-tier-pill[data-role="family"],
.session-tier-pill[data-role="vip"],
.session-tier-pill[data-role="reserve"],
.session-tier-pill[data-role="house"],
.avatar-menu-inline-tier[data-role="max"],
.avatar-menu-inline-tier[data-role="master"],
.avatar-menu-inline-tier[data-role="vault_black"],
.avatar-menu-inline-tier[data-role="vault-black"],
.avatar-menu-inline-tier[data-role="black"],
.avatar-menu-inline-tier[data-role="atelier"],
.avatar-menu-inline-tier[data-role="family"],
.avatar-menu-inline-tier[data-role="vip"],
.avatar-menu-inline-tier[data-role="reserve"],
.avatar-menu-inline-tier[data-role="house"],
.session-tier-badge > span[data-role="max"],
.session-tier-badge > span[data-role="master"],
.session-tier-badge > span[data-role="vault_black"],
.session-tier-badge > span[data-role="vault-black"],
.session-tier-badge > span[data-role="black"],
.session-tier-badge > span[data-role="atelier"],
.session-tier-badge > span[data-role="family"],
.session-tier-badge > span[data-role="vip"],
.session-tier-badge > span[data-role="reserve"],
.session-tier-badge > span[data-role="house"],
.tier-badge[data-role="max"],
.tier-badge[data-role="master"],
.tier-badge[data-role="vault_black"],
.tier-badge[data-role="vault-black"],
.tier-badge[data-role="black"],
.tier-badge[data-role="atelier"],
.tier-badge[data-role="family"],
.tier-badge[data-role="vip"],
.tier-badge[data-role="reserve"],
.tier-badge[data-role="house"],
.tier-badge[data-tier="max"],
.tier-badge[data-tier="master"],
.tier-badge[data-tier="vault_black"],
.tier-badge[data-tier="vault-black"],
.tier-badge[data-tier="black"],
.tier-badge[data-tier="atelier"],
.tier-badge[data-tier="family"],
.tier-badge[data-tier="vip"],
.tier-badge[data-tier="reserve"],
.tier-badge[data-tier="house"] {
  --tp-bg: linear-gradient(180deg, #1a1a20 0%, #0a0a0e 55%, #07070b 100%);
  --tp-color: #f5f3ee;
  --tp-border: #07070b;
  --tp-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.60),
    inset 0 0 0 .5px rgba(255,255,255,.04),
    0 0 0 .5px rgba(0,0,0,.50),
    0 1px 2px rgba(0,0,0,.35),
    0 8px 24px -8px rgba(0,0,0,.55);
  --tp-hover-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.60),
    inset 0 0 0 .5px rgba(255,255,255,.06),
    0 0 0 .5px rgba(0,0,0,.50),
    0 2px 4px rgba(0,0,0,.40),
    0 14px 36px -8px rgba(0,0,0,.55);
  font-weight: 600;
  text-shadow: 0 1px 0 rgba(0,0,0,.60);
}

.dark .tier-pill.tp-max,
body.dark .tier-pill.tp-max,
.dark .tier-pill.tp-family,
body.dark .tier-pill.tp-family,
.dark .tier-pill[data-tier="max"],
body.dark .tier-pill[data-tier="max"],
.dark .session-tier-pill[data-role="max"],
body.dark .session-tier-pill[data-role="max"],
.dark .avatar-menu-inline-tier[data-role="max"],
body.dark .avatar-menu-inline-tier[data-role="max"],
.dark .session-tier-badge > span[data-role="max"],
body.dark .session-tier-badge > span[data-role="max"],
.dark .tier-badge[data-tier="max"],
body.dark .tier-badge[data-tier="max"] {
  --tp-border: rgba(255,255,255,.08);
  --tp-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.55),
    inset 0 0 0 .5px rgba(255,255,255,.06),
    0 0 0 1px rgba(255,255,255,.05),
    0 0 18px -4px rgba(255,255,255,.06);
  --tp-hover-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.55),
    inset 0 0 0 .5px rgba(255,255,255,.08),
    0 0 0 1px rgba(255,255,255,.10),
    0 0 28px -4px rgba(255,255,255,.10);
}

.sv-tier-pill.sv-tp-label,
.tier-pill.tp-label,
.tier-pill[data-role="label"],
.tier-pill[data-tier="label"],
.session-tier-pill[data-role="label"],
.avatar-menu-inline-tier[data-role="label"],
.session-tier-badge > span[data-role="label"],
.tier-badge[data-role="label"],
.tier-badge[data-tier="label"] {
  --tp-bg: linear-gradient(180deg, #f4d98a 0%, #e6bf63 18%, #c99846 48%, #8e6420 78%, #6b4818 100%);
  --tp-color: #fffaee;
  --tp-border: #4a3110;
  --tp-shadow:
    inset 0 1px 0 rgba(255,245,210,.70),
    inset 0 -1px 0 rgba(40,25,5,.70),
    inset 0 0 0 .5px rgba(255,225,160,.35),
    0 0 0 .5px rgba(120,80,30,.40),
    0 1px 2px rgba(0,0,0,.35),
    0 0 18px -3px rgba(220,170,80,.55),
    0 0 44px -10px rgba(240,200,110,.40);
  --tp-hover-shadow:
    inset 0 1px 0 rgba(255,250,220,.80),
    inset 0 -1px 0 rgba(40,25,5,.70),
    inset 0 0 0 .5px rgba(255,235,180,.45),
    0 0 0 .5px rgba(140,95,40,.50),
    0 1px 2px rgba(0,0,0,.40),
    0 0 32px -2px rgba(230,180,90,.75),
    0 0 72px -8px rgba(245,200,110,.55);
  letter-spacing: .14em;
  text-indent: .14em;
  text-shadow:
    0 1px 0 rgba(0,0,0,.45),
    0 0 6px rgba(120,75,15,.40);
}

.sv-tier-pill.sv-tp-label::before,
.tier-pill.tp-label::before,
.tier-pill[data-role="label"]::before,
.tier-pill[data-tier="label"]::before,
.session-tier-pill[data-role="label"]::before,
.avatar-menu-inline-tier[data-role="label"]::before,
.session-tier-badge > span[data-role="label"]::before,
.tier-badge[data-role="label"]::before,
.tier-badge[data-tier="label"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 35%, rgba(255,250,225,.55) 48%, rgba(255,255,255,.85) 50%, rgba(255,250,225,.55) 52%, transparent 65%);
  transform: translateX(-120%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.sv-tier-pill.sv-tp-001,
.tier-pill.tp-001,
.tier-pill[data-role="001"],
.tier-pill[data-role="one"],
.tier-pill[data-tier="001"],
.tier-pill[data-tier="one"],
.session-tier-pill[data-role="001"],
.session-tier-pill[data-role="one"],
.avatar-menu-inline-tier[data-role="001"],
.avatar-menu-inline-tier[data-role="one"],
.session-tier-badge > span[data-role="001"],
.session-tier-badge > span[data-role="one"],
.tier-badge[data-role="001"],
.tier-badge[data-role="one"],
.tier-badge[data-tier="001"],
.tier-badge[data-tier="one"] {
  --tp-bg: #ffffff;
  --tp-color: #776e68;
  --tp-border: transparent;
  /* 2026-05-06 09:53Z, Tommy: 001 should ONLY glow on hover, and even that
     glow should be subtle. Static state = clean white pill with conic
     RGB ring, NO halo. Hover = soft warm glow (less than GOD's). */
  --tp-shadow:
    0 0 0 1px rgba(0,0,0,.04);
  --tp-hover-shadow:
    0 0 0 1px rgba(0,0,0,.06),
    0 0 20px 0 rgba(251,191,36,.65),
    0 0 44px -2px rgba(184,137,58,.40),
    0 0 72px -10px rgba(120,60,160,.22);
  --tp-ring-angle: 270deg;
  overflow: visible;
  letter-spacing: .22em;
  text-indent: .22em;
}

.sv-tier-pill.sv-tp-001::before,
.tier-pill.tp-001::before,
.tier-pill[data-role="001"]::before,
.tier-pill[data-role="one"]::before,
.tier-pill[data-tier="001"]::before,
.tier-pill[data-tier="one"]::before,
.session-tier-pill[data-role="001"]::before,
.session-tier-pill[data-role="one"]::before,
.avatar-menu-inline-tier[data-role="001"]::before,
.avatar-menu-inline-tier[data-role="one"]::before,
.session-tier-badge > span[data-role="001"]::before,
.session-tier-badge > span[data-role="one"]::before,
.tier-badge[data-role="001"]::before,
.tier-badge[data-role="one"]::before,
.tier-badge[data-tier="001"]::before,
.tier-badge[data-tier="one"]::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: 999px;
  padding: 2px;
  background: conic-gradient(
    from var(--tp-ring-angle, 270deg),
    var(--sv-001-navy) 0 9.0909%,
    var(--sv-001-magenta) 9.0909% 18.1818%,
    var(--sv-001-royal) 18.1818% 27.2727%,
    var(--sv-001-orange) 27.2727% 36.3636%,
    var(--sv-001-purple) 36.3636% 45.4545%,
    var(--sv-001-green) 45.4545% 54.5454%,
    var(--sv-001-red) 54.5454% 63.6363%,
    var(--sv-001-slate) 63.6363% 72.7272%,
    var(--sv-001-sky) 72.7272% 81.8181%,
    var(--sv-001-amber) 81.8181% 90.9090%,
    var(--sv-001-ink) 90.9090% 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
  transition: filter .25s ease;
}

.sv-tier-pill.sv-tp-001:hover::before,
.tier-pill.tp-001:hover::before,
.tier-pill[data-role="001"]:hover::before,
.tier-pill[data-role="one"]:hover::before,
.tier-pill[data-tier="001"]:hover::before,
.tier-pill[data-tier="one"]:hover::before,
.session-tier-pill[data-role="001"]:hover::before,
.session-tier-pill[data-role="one"]:hover::before,
.avatar-menu-inline-tier[data-role="001"]:hover::before,
.avatar-menu-inline-tier[data-role="one"]:hover::before,
.session-tier-badge > span[data-role="001"]:hover::before,
.session-tier-badge > span[data-role="one"]:hover::before,
.tier-badge[data-role="001"]:hover::before,
.tier-badge[data-role="one"]:hover::before,
.tier-badge[data-tier="001"]:hover::before,
.tier-badge[data-tier="one"]:hover::before {
  filter: saturate(1.2) brightness(1.08);
}

/* Force white pill text across every tier. */
.sv-tier-pill,
.tier-pill,
.session-tier-pill,
.avatar-menu-inline-tier,
.session-tier-badge > span,
.tier-badge {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
}
.sv-tier-pill .tp-text,
.tier-pill .tp-text {
  color: #fff !important;
}

.sv-tier-pill.sv-tp-god,
.tier-pill.tp-god,
.tier-pill[data-role="god"],
.tier-pill[data-role="owner"],
.tier-pill[data-tier="god"],
.tier-pill[data-tier="owner"],
.session-tier-pill[data-role="god"],
.session-tier-pill[data-role="owner"],
.avatar-menu-inline-tier[data-role="god"],
.avatar-menu-inline-tier[data-role="owner"],
.session-tier-badge > span[data-role="god"],
.session-tier-badge > span[data-role="owner"],
.tier-badge[data-role="god"],
.tier-badge[data-role="owner"],
.tier-badge[data-tier="god"],
.tier-badge[data-tier="owner"] {
  --tp-bg: linear-gradient(180deg, #ffffff 0%, #f4f0e6 100%);
  --tp-color: #1a0f06;
  --tp-border: rgba(255,228,170,.78);
  --tp-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.78),
    inset 0 0 0 .5px rgba(255,235,180,.24),
    0 0 0 1px rgba(255,232,170,.48),
    0 0 10px 0 rgba(255,232,170,.28),
    0 0 28px 2px rgba(248,215,130,.18);
  --tp-hover-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.78),
    0 0 0 1px rgba(255,232,170,.68),
    0 0 16px 1px rgba(255,232,170,.44),
    0 0 44px 4px rgba(248,215,130,.30);
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}

.sv-tier-pill.sv-tp-god::before,
.tier-pill.tp-god::before,
.tier-pill[data-role="god"]::before,
.tier-pill[data-role="owner"]::before,
.tier-pill[data-tier="god"]::before,
.tier-pill[data-tier="owner"]::before,
.session-tier-pill[data-role="god"]::before,
.session-tier-pill[data-role="owner"]::before,
.avatar-menu-inline-tier[data-role="god"]::before,
.avatar-menu-inline-tier[data-role="owner"]::before,
.session-tier-badge > span[data-role="god"]::before,
.session-tier-badge > span[data-role="owner"]::before,
.tier-badge[data-role="god"]::before,
.tier-badge[data-role="owner"]::before,
.tier-badge[data-tier="god"]::before,
.tier-badge[data-tier="owner"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 38%, rgba(255,235,225,.55) 44%, rgba(255,255,235,.70) 48%, rgba(235,255,245,.65) 52%, rgba(225,240,255,.55) 56%, rgba(255,255,255,0) 62%, rgba(255,255,255,0) 100%);
  background-size: 360% 100%;
  background-repeat: repeat;
  mix-blend-mode: screen;
  pointer-events: none;
}

.sv-tier-pill.sv-tp-god::after,
.tier-pill.tp-god::after,
.tier-pill[data-role="god"]::after,
.tier-pill[data-role="owner"]::after,
.tier-pill[data-tier="god"]::after,
.tier-pill[data-tier="owner"]::after,
.session-tier-pill[data-role="god"]::after,
.session-tier-pill[data-role="owner"]::after,
.avatar-menu-inline-tier[data-role="god"]::after,
.avatar-menu-inline-tier[data-role="owner"]::after,
.session-tier-badge > span[data-role="god"]::after,
.session-tier-badge > span[data-role="owner"]::after,
.tier-badge[data-role="god"]::after,
.tier-badge[data-role="owner"]::after,
.tier-badge[data-tier="god"]::after,
.tier-badge[data-tier="owner"]::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 1px;
  z-index: 1;
  height: 38%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0));
  pointer-events: none;
}

@property --tp-ring-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 270deg;
}

@keyframes sv-tier-001-shift {
  from { --tp-ring-angle: 0deg; }
  to { --tp-ring-angle: 360deg; }
}

@keyframes sv-tier-label-shimmer {
  0%, 60% { transform: translateX(-120%); }
  80%, 100% { transform: translateX(120%); }
}

@keyframes sv-tier-god-sheen {
  0% { background-position: 0% 50%; }
  100% { background-position: 360% 50%; }
}

@keyframes sv-tier-rainbow-glow {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      inset 0 -1px 0 rgba(0,0,0,.55),
      0 0 0 .5px rgba(255,255,255,.06),
      0 0 18px -2px rgba(184,36,92,.55),
      0 0 36px -6px rgba(184,36,92,.40);
  }
  16% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      inset 0 -1px 0 rgba(0,0,0,.55),
      0 0 0 .5px rgba(255,255,255,.06),
      0 0 18px -2px rgba(255,140,40,.60),
      0 0 36px -6px rgba(255,140,40,.40);
  }
  33% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      inset 0 -1px 0 rgba(0,0,0,.55),
      0 0 0 .5px rgba(255,255,255,.06),
      0 0 20px -2px rgba(255,215,80,.65),
      0 0 40px -6px rgba(255,215,80,.45);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      inset 0 -1px 0 rgba(0,0,0,.55),
      0 0 0 .5px rgba(255,255,255,.06),
      0 0 20px -2px rgba(48,140,58,.60),
      0 0 40px -6px rgba(48,140,58,.40);
  }
  66% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      inset 0 -1px 0 rgba(0,0,0,.55),
      0 0 0 .5px rgba(255,255,255,.06),
      0 0 20px -2px rgba(30,127,214,.65),
      0 0 40px -6px rgba(30,127,214,.45);
  }
  83% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      inset 0 -1px 0 rgba(0,0,0,.55),
      0 0 0 .5px rgba(255,255,255,.06),
      0 0 20px -2px rgba(160,80,210,.60),
      0 0 40px -6px rgba(160,80,210,.40);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .sv-tier-pill.sv-tp-001,
  .tier-pill.tp-001,
  .tier-pill[data-role="001"],
  .tier-pill[data-role="one"],
  .tier-pill[data-tier="001"],
  .tier-pill[data-tier="one"],
  .session-tier-pill[data-role="001"],
  .session-tier-pill[data-role="one"],
  .avatar-menu-inline-tier[data-role="001"],
  .avatar-menu-inline-tier[data-role="one"],
  .session-tier-badge > span[data-role="001"],
  .session-tier-badge > span[data-role="one"],
  .tier-badge[data-role="001"],
  .tier-badge[data-role="one"],
  .tier-badge[data-tier="001"],
  .tier-badge[data-tier="one"] {
    animation: sv-tier-001-shift 12s linear infinite;
  }

  .sv-tier-pill.sv-tp-label::before,
  .tier-pill.tp-label::before,
  .tier-pill[data-role="label"]::before,
  .tier-pill[data-tier="label"]::before,
  .session-tier-pill[data-role="label"]::before,
  .avatar-menu-inline-tier[data-role="label"]::before,
  .session-tier-badge > span[data-role="label"]::before,
  .tier-badge[data-role="label"]::before,
  .tier-badge[data-tier="label"]::before {
    animation: sv-tier-label-shimmer 7s ease-in-out infinite;
  }

  .sv-tier-pill.sv-tp-god::before,
  .tier-pill.tp-god::before,
  .tier-pill[data-role="god"]::before,
  .tier-pill[data-role="owner"]::before,
  .tier-pill[data-tier="god"]::before,
  .tier-pill[data-tier="owner"]::before,
  .session-tier-pill[data-role="god"]::before,
  .session-tier-badge > span[data-role="god"]::before,
  .avatar-menu-inline-tier[data-role="god"]::before,
  .tier-badge[data-role="god"]::before,
  .tier-badge[data-tier="god"]::before {
    animation: sv-tier-god-sheen 9s linear infinite;
  }

  .sv-tier-pill.sv-tp-max,
  .sv-tier-pill.sv-tp-family,
  .tier-pill.tp-strobe,
  .tier-pill.tp-max,
  .tier-pill.tp-family,
  .tier-pill.tp-vip,
  .tier-pill[data-role="max"],
  .tier-pill[data-role="master"],
  .tier-pill[data-role="vault_black"],
  .tier-pill[data-role="vault-black"],
  .tier-pill[data-role="black"],
  .tier-pill[data-role="atelier"],
  .tier-pill[data-role="family"],
  .tier-pill[data-role="vip"],
  .tier-pill[data-role="reserve"],
  .tier-pill[data-role="house"],
  .tier-pill[data-tier="max"],
  .tier-pill[data-tier="master"],
  .tier-pill[data-tier="vault_black"],
  .tier-pill[data-tier="vault-black"],
  .tier-pill[data-tier="black"],
  .tier-pill[data-tier="atelier"],
  .tier-pill[data-tier="family"],
  .tier-pill[data-tier="vip"],
  .tier-pill[data-tier="reserve"],
  .tier-pill[data-tier="house"],
  .session-tier-pill[data-role="max"],
  .session-tier-pill[data-role="master"],
  .session-tier-pill[data-role="vault_black"],
  .session-tier-pill[data-role="vault-black"],
  .session-tier-pill[data-role="black"],
  .session-tier-pill[data-role="atelier"],
  .session-tier-pill[data-role="family"],
  .avatar-menu-inline-tier[data-role="max"],
  .avatar-menu-inline-tier[data-role="master"],
  .avatar-menu-inline-tier[data-role="vault_black"],
  .avatar-menu-inline-tier[data-role="vault-black"],
  .avatar-menu-inline-tier[data-role="black"],
  .avatar-menu-inline-tier[data-role="atelier"],
  .avatar-menu-inline-tier[data-role="family"],
  .session-tier-badge > span[data-role="max"],
  .session-tier-badge > span[data-role="master"],
  .session-tier-badge > span[data-role="vault_black"],
  .session-tier-badge > span[data-role="vault-black"],
  .session-tier-badge > span[data-role="black"],
  .session-tier-badge > span[data-role="atelier"],
  .session-tier-badge > span[data-role="family"],
  .tier-badge[data-role="max"],
  .tier-badge[data-role="master"],
  .tier-badge[data-role="vault_black"],
  .tier-badge[data-role="vault-black"],
  .tier-badge[data-role="black"],
  .tier-badge[data-role="atelier"],
  .tier-badge[data-role="family"],
  .tier-badge[data-tier="max"],
  .tier-badge[data-tier="master"],
  .tier-badge[data-tier="vault_black"],
  .tier-badge[data-tier="vault-black"],
  .tier-badge[data-tier="black"],
  .tier-badge[data-tier="atelier"],
  .tier-badge[data-tier="family"] {
    animation: sv-tier-rainbow-glow 6s ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sv-tier-pill,
  .tier-pill,
  .session-tier-pill,
  .avatar-menu-inline-tier,
  .session-tier-badge > span,
  .tier-badge {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
  .sv-tier-pill::before,
  .tier-pill::before,
  .session-tier-pill::before,
  .avatar-menu-inline-tier::before,
  .session-tier-badge > span::before,
  .tier-badge::before {
    animation: none !important;
  }
}

// FINAL — premium 3D gradient palette as Tommy described 2026-05-06 09:04Z.

/* ==========================================================================
   STARTER bronze/brass relock 2026-05-06 10:51Z, Tommy approved.
   Distinct from the FREE block above. Dark warm-bronze gradient, light
   text, soft amber halo. Reads as "first paid step, warmer than free,
   distinct from PRO purple and MAX black-with-rainbow-FX."
   ========================================================================== */
.sv-tier-pill.sv-tp-starter,
.tier-pill.tp-starter,
.tier-pill[data-role="starter"],
.tier-pill[data-tier="starter"],
.session-tier-pill[data-role="starter"],
.avatar-menu-inline-tier[data-role="starter"],
.session-tier-badge > span[data-role="starter"],
.tier-badge[data-role="starter"],
.tier-badge[data-tier="starter"] {
  --tp-bg: linear-gradient(180deg, #4a8a4f 0%, #2d6a3a 50%, #1a4525 100%);
  --tp-color: #f0fff3;
  --tp-border: rgba(15, 45, 25, .85);
  --tp-shadow:
    inset 0 1px 0 rgba(200, 255, 215, .50),
    inset 0 -1px 0 rgba(12, 35, 20, .50),
    inset 0 0 0 .5px rgba(45, 106, 58, .60),
    0 0 0 .5px rgba(15, 45, 25, .35),
    0 0 14px -2px rgba(58, 138, 79, .35);
  --tp-hover-shadow:
    inset 0 1px 0 rgba(210, 255, 220, .60),
    inset 0 -1px 0 rgba(12, 35, 20, .50),
    inset 0 0 0 .5px rgba(60, 130, 75, .70),
    0 0 0 .5px rgba(15, 45, 25, .50),
    0 0 26px 0 rgba(58, 138, 79, .55);
  font-weight: 600;
  text-shadow: 0 1px 0 rgba(12, 35, 20, .45);
}

/* ==========================================================================
   BETA — early access. Mint/teal gradient, fresh and humble. Reads as
   "preview / unfinished" without looking like a paid tier.
   ========================================================================== */
.sv-tier-pill.sv-tp-beta,
.tier-pill.tp-beta,
.tier-pill[data-role="beta"],
.tier-pill[data-tier="beta"],
.session-tier-pill[data-role="beta"],
.avatar-menu-inline-tier[data-role="beta"],
.session-tier-badge > span[data-role="beta"],
.tier-badge[data-role="beta"],
.tier-badge[data-tier="beta"] {
  --tp-bg: linear-gradient(180deg,
    color-mix(in oklab, var(--accent, #FA3A05) 78%, white 22%) 0%,
    var(--accent, #FA3A05) 50%,
    color-mix(in oklab, var(--accent, #FA3A05) 70%, black 30%) 100%);
  --tp-color: #fff5ee;
  --tp-border: color-mix(in oklab, var(--accent, #FA3A05) 60%, black 40%);
  --tp-shadow:
    inset 0 1px 0 color-mix(in oklab, var(--accent, #FA3A05) 30%, white 70%),
    inset 0 -1px 0 color-mix(in oklab, var(--accent, #FA3A05) 70%, black 30%),
    inset 0 0 0 .5px color-mix(in oklab, var(--accent, #FA3A05) 80%, black 20%),
    0 0 0 .5px color-mix(in oklab, var(--accent, #FA3A05) 50%, black 50%),
    0 0 14px -2px color-mix(in oklab, var(--accent, #FA3A05) 60%, transparent);
  --tp-hover-shadow:
    inset 0 1px 0 color-mix(in oklab, var(--accent, #FA3A05) 20%, white 80%),
    inset 0 -1px 0 color-mix(in oklab, var(--accent, #FA3A05) 70%, black 30%),
    inset 0 0 0 .5px color-mix(in oklab, var(--accent, #FA3A05) 90%, white 10%),
    0 0 0 .5px color-mix(in oklab, var(--accent, #FA3A05) 60%, black 40%),
    0 0 26px 0 color-mix(in oklab, var(--accent, #FA3A05) 70%, transparent);
  font-weight: 600;
  text-shadow: 0 1px 0 color-mix(in oklab, var(--accent, #FA3A05) 70%, black 30%);
  transition:
    transform .2s ease,
    letter-spacing .25s ease;
}