.site-header {
  margin: .25rem 0 1.25rem;
  padding: .75rem;
  background: linear-gradient(135deg, rgba(31,14,69,.78), rgba(19,9,44,.74)) padding-box, var(--prism-soft) border-box;
  border: 1px solid transparent;
  border-radius: 22px;
  box-shadow: var(--shadow-small);
  backdrop-filter: blur(22px) saturate(130%);
}
.brand-mark {
  position: relative;
  overflow: hidden;
  color: #120629;
  background: radial-gradient(circle at 30% 24%, #fff 0 8%, transparent 23%), conic-gradient(from 220deg, #59f5ff, #6ff7b8, #ffe66d, #ff9364, #ff5ecb, #a967ff, #59f5ff);
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: -5px 7px 18px rgba(89,245,255,.25), 6px 7px 20px rgba(255,94,203,.24), inset 0 1px 0 #fff;
}
.brand-mark::after { position: absolute; inset: -45% -85%; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.82) 49%, transparent 60%); transform: translateX(-42%) rotate(8deg); animation: prism-shimmer 8s ease-in-out infinite; content: ""; }
@keyframes prism-shimmer { 0%,62% { transform: translateX(-42%) rotate(8deg); opacity: 0; } 70% { opacity: .76; } 84%,100% { transform: translateX(42%) rotate(8deg); opacity: 0; } }
.brand-name { width: fit-content; color: #fff; background: linear-gradient(90deg, #fff, #c7faff 32%, #ffd4f1 66%, #fff1a8); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 1.18rem; }
.brand-tagline { color: #cfc2e8; }

.credit-balance {
  position: relative;
  isolation: isolate;
  min-height: 48px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(110deg, rgba(255,255,255,.13), rgba(89,245,255,.08) 30%, rgba(255,94,203,.11) 68%, rgba(255,230,109,.09)) padding-box, var(--prism) border-box;
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 10px 30px rgba(4,1,22,.42);
}
.credit-balance::after { position: absolute; z-index: -1; inset: 0; opacity: .28; background: linear-gradient(112deg, transparent 18%, rgba(255,255,255,.58) 42%, transparent 66%); transform: translateX(-110%); content: ""; }
.credit-balance-label { color: #e1d7f3; }
.credit-balance strong { color: #fff; font-size: 1.25rem; font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(89,245,255,.48); }
.prismatic-credit-token { position: relative; display: inline-grid; flex: 0 0 29px; width: 29px; height: 29px; place-items: center; overflow: hidden; background: radial-gradient(circle at 32% 24%, #fff 0 8%, transparent 23%), conic-gradient(from 220deg, #59f5ff, #6ff7b8, #ffe66d, #ff9364, #ff5ecb, #a967ff, #59f5ff); border: 1px solid rgba(255,255,255,.78); border-radius: 50%; box-shadow: 0 0 18px rgba(89,245,255,.3), 0 0 22px rgba(255,94,203,.2), inset 0 -4px 8px rgba(50,10,110,.22); }
.prismatic-credit-token::before { color: rgba(24,6,48,.78); font-size: .78rem; font-weight: 950; content: "C"; }
.prismatic-credit-token::after { position: absolute; inset: 2px; border: 1px solid rgba(255,255,255,.34); border-radius: inherit; content: ""; }