/* shwn-wallet — structure (geometry + layout). Copy byte-identical; skin lives in element.tokens.css. */
.sp-shwn-wallet,
.sp-shwn-wallet *,
.sp-shwn-wallet *::before,
.sp-shwn-wallet *::after {
  box-sizing: border-box;
}

.sp-shwn-wallet {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  font-family: var(--sp-shwn-wallet-font, "Public Sans", "Public Sans Fallback", "Geist", "Geist Fallback", "Inter", "Inter Fallback", ui-sans-serif, system-ui, sans-serif);
  font-size: 16px;
  line-height: 1.5;
  color-scheme: light;
  -webkit-user-select: none;
  user-select: none;
}

.sp-shwn-wallet p { margin: 0; }

.sp-shwn-wallet-shell {
  position: relative;
  width: 530px;
  height: 460px;
  padding: 16px;
  border-radius: 60px;
  background-color: var(--sp-shwn-wallet-shell-bg, #37473c);
  box-shadow: var(--sp-shwn-wallet-shell-shadow, 0 0 10px 0 #000000e6 inset, 0 10px 20px 0 #0003 inset, 0 -3px 10px 0 #000c inset, 0 50px 50px -20px #00000059);
}

.sp-shwn-wallet-tex {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 60px;
  padding: 12px;
  pointer-events: none;
}

.sp-shwn-wallet-tex img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  mix-blend-mode: multiply;
  filter: contrast(1.2) brightness(0.9);
}

.sp-shwn-wallet-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 44px;
}

.sp-shwn-wallet-dash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.sp-shwn-wallet-dash rect {
  stroke: var(--sp-shwn-wallet-stroke, #597461);
  stroke-opacity: var(--sp-shwn-wallet-stroke-opacity, 0.75);
}

.sp-shwn-wallet-card {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 36px;
  height: 300px;
  aspect-ratio: 1536 / 969;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  background: 0 0;
  will-change: transform;
  transition-property: all;
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.sp-shwn-wallet-card--primary { box-shadow: var(--sp-shwn-wallet-card-face-shadow, 0 1px 1px 0 #ffffffc0 inset, 0 -1px 1px 0 #000a inset); }
.sp-shwn-wallet-card--secondary { box-shadow: var(--sp-shwn-wallet-card-2-face-shadow, 0 1px 1px 0 #d2f5e18c inset, 0 -1px 1px 0 #000a inset); }

.sp-shwn-wallet-card--primary:not(.sp-shwn-wallet-card--live) { z-index: 0; transform: translateY(0); }
.sp-shwn-wallet-card--secondary:not(.sp-shwn-wallet-card--live) { z-index: 10; transform: translateY(0); }

.sp-shwn-wallet-card--primary.sp-shwn-wallet-card--live[data-state="front"] { animation: 0.58s cubic-bezier(0.42, 0, 0.2, 1) forwards sp-shwn-wallet-front; }
.sp-shwn-wallet-card--secondary.sp-shwn-wallet-card--live[data-state="front"] { animation: 0.58s cubic-bezier(0.42, 0, 0.2, 1) forwards sp-shwn-wallet-front-2; }
.sp-shwn-wallet-card--primary.sp-shwn-wallet-card--live[data-state="behind"] { animation: 0.38s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards sp-shwn-wallet-behind; }
.sp-shwn-wallet-card--secondary.sp-shwn-wallet-card--live[data-state="behind"] { animation: 0.38s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards sp-shwn-wallet-behind-2; }

@keyframes sp-shwn-wallet-front {
  0% { transform: translateY(0); }
  30% { transform: translateY(-280px); }
  52% { z-index: 99999; }
  to { z-index: 99999; transform: translateY(0) scale(1.5); }
}

@keyframes sp-shwn-wallet-front-2 {
  0% { z-index: 1; transform: translateY(0); }
  30% { z-index: 1; transform: translateY(-280px); }
  52% { z-index: 99999; }
  to { z-index: 99999; transform: translateY(0) scale(1.5); }
}

@keyframes sp-shwn-wallet-behind {
  0% { z-index: 999; transform: translateY(0) scale(1.5); }
  50% { z-index: 0; transform: translateY(-300px); }
  60% { transform: translateY(-260px) scale(1); }
  to { z-index: 0; transform: translateY(0) scale(1); }
}

@keyframes sp-shwn-wallet-behind-2 {
  0% { z-index: 999; transform: translateY(0) scale(1.5); }
  50% { z-index: 10; transform: translateY(-300px); }
  60% { transform: translateY(-260px) scale(1); }
  to { z-index: 10; transform: translateY(0) scale(1); }
}

.sp-shwn-wallet-cc {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  isolation: isolate;
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 21.6px 22.4px 20px;
}

.sp-shwn-wallet-cc::after {
  content: "";
  border-radius: inherit;
  pointer-events: none;
  z-index: 5;
  position: absolute;
  inset: 0;
}

.sp-shwn-wallet-cc--onyx::after { box-shadow: inset 0 1px #ffffff8c, inset 0 -1px #28648c1f; }
.sp-shwn-wallet-cc--aurora::after { box-shadow: inset 0 1px #ffffff80, inset 0 -1px #1e5a3c1f; }

.sp-shwn-wallet-cc__mesh {
  z-index: 0;
  opacity: 0.55;
  pointer-events: none;
  position: absolute;
  inset: -40%;
}

.sp-shwn-wallet-cc__pattern {
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.sp-shwn-wallet-cc__noise {
  z-index: 2;
  opacity: 0.35;
  pointer-events: none;
  background-image: repeating-linear-gradient(-18deg, #0000, #0000 1px, #ffffff05 1px 2px);
  position: absolute;
  inset: 0;
}

.sp-shwn-wallet-cc__top {
  z-index: 4;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.sp-shwn-wallet-cc__chip {
  border-radius: 5.6px;
  flex-shrink: 0;
  width: 42.4px;
  height: 32.8px;
  position: relative;
}

.sp-shwn-wallet-cc__chip::before {
  content: "";
  background: linear-gradient(#0003 0%, #ffffff14 100%);
  border-radius: 1.92px;
  position: absolute;
  inset: 4.48px 5.12px;
  box-shadow: inset 0 0 0 1px #00000026;
}

.sp-shwn-wallet-cc__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7.2px;
}

.sp-shwn-wallet-cc__nfc {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  padding-top: 2.4px;
}

.sp-shwn-wallet-cc__nfc span {
  opacity: 0.55;
  background: currentColor;
  border-radius: 999px;
  height: 2px;
  display: block;
}

.sp-shwn-wallet-cc__nfc span:first-child { width: 21.6px; }
.sp-shwn-wallet-cc__nfc span:nth-child(2) { width: 16px; }
.sp-shwn-wallet-cc__nfc span:nth-child(3) { width: 10.4px; }

.sp-shwn-wallet-cc__mark {
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  opacity: 0.72;
  font-size: 8px;
  font-weight: 700;
}

.sp-shwn-wallet-cc__mid {
  z-index: 4;
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  padding: 5.6px 0;
}

.sp-shwn-wallet-cc__number {
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  white-space: nowrap;
  font-family: var(--sp-shwn-wallet-number-font, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
  font-size: 24.8px;
  font-weight: 500;
}

.sp-shwn-wallet-cc__bottom {
  z-index: 4;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  font-size: 10.4px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.sp-shwn-wallet-cc__name {
  letter-spacing: 0.14em;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 62%;
  font-size: 10.88px;
  font-weight: 600;
  overflow: hidden;
}

.sp-shwn-wallet-cc__exp-block { text-align: right; }

.sp-shwn-wallet-cc__exp-label {
  letter-spacing: 0.2em;
  opacity: 0.55;
  margin-bottom: 2.4px;
  font-size: 8.32px;
  display: block;
}

.sp-shwn-wallet-cc__exp {
  letter-spacing: 0.12em;
  font-family: var(--sp-shwn-wallet-number-font, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
  font-size: 12px;
  font-weight: 600;
}

.sp-shwn-wallet-cc--onyx .sp-shwn-wallet-cc__mesh,
.sp-shwn-wallet-cc--aurora .sp-shwn-wallet-cc__mesh { opacity: 0.48; }

.sp-shwn-wallet-cc--onyx .sp-shwn-wallet-cc__chip {
  background: linear-gradient(145deg, #f5fbff 0%, #b9daf2 38%, #7eb8dc 72%, #4a8eb8 100%);
  box-shadow: inset 0 1px #ffffff8c, inset 0 -1px #285f8238, 0 2px 8px #1e5a822e;
}

.sp-shwn-wallet-cc--aurora .sp-shwn-wallet-cc__chip {
  background: linear-gradient(145deg, #f4fff8 0%, #a8e0c0 36%, #5cb88a 68%, #2d7a58 100%);
  box-shadow: inset 0 1px #ffffff73, inset 0 -1px #0f462d47, 0 2px 8px #14503733;
}

.sp-shwn-wallet-cc--onyx {
  color: var(--sp-shwn-wallet-cc-onyx-text, #12344ef0);
  background: radial-gradient(108% 78% at 96% 4%, #ffffffa6 0%, transparent 52%), radial-gradient(82% 72% at 4% 96%, #78b9e638 0%, transparent 54%), linear-gradient(158deg, var(--sp-shwn-wallet-cc-onyx-a, #e6f3fc) 0%, var(--sp-shwn-wallet-cc-onyx-b, #c5e4f8) 42%, var(--sp-shwn-wallet-cc-onyx-c, #9fd2ef) 100%);
}

.sp-shwn-wallet-cc--onyx .sp-shwn-wallet-cc__mesh {
  background: radial-gradient(circle at 24% 28%, var(--sp-shwn-wallet-cc-onyx-gleam, #ffffff8c) 0%, transparent 44%), radial-gradient(circle at 84% 76%, var(--sp-shwn-wallet-cc-onyx-accent, #64b4f047) 0%, transparent 46%);
}

.sp-shwn-wallet-cc--onyx .sp-shwn-wallet-cc__pattern {
  opacity: 0.28;
  mix-blend-mode: soft-light;
  background-image: repeating-linear-gradient(90deg, #ffffff0a 0 1px, #0000 1px 9px), repeating-linear-gradient(0deg, #ffffff09 0 1px, #0000 1px 9px), repeating-linear-gradient(125deg, #0000 0 14px, #a0dcff14 14px 15px, #0000 15px 32px);
}

.sp-shwn-wallet-cc--onyx .sp-shwn-wallet-cc__nfc { color: var(--sp-shwn-wallet-cc-onyx-text, #12344ef0); }
.sp-shwn-wallet-cc--onyx .sp-shwn-wallet-cc__mark { color: #3778a58c; }
.sp-shwn-wallet-cc--onyx .sp-shwn-wallet-cc__number { text-shadow: 0 1px #ffffff73, 0 0 18px #78bef033; }

.sp-shwn-wallet-cc--onyx .sp-shwn-wallet-cc__noise {
  opacity: 0.28;
  background-image: repeating-linear-gradient(-18deg, #0000, #0000 1px, #ffffff06 1px 2px);
}

.sp-shwn-wallet-cc--onyx .sp-shwn-wallet-cc__bottom { color: var(--sp-shwn-wallet-cc-onyx-muted, #2d5f7d8c); }

.sp-shwn-wallet-cc--onyx .sp-shwn-wallet-cc__name,
.sp-shwn-wallet-cc--onyx .sp-shwn-wallet-cc__exp { color: var(--sp-shwn-wallet-cc-onyx-text, #12344ef0); }

.sp-shwn-wallet-cc--onyx::before {
  content: "";
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(105deg, #0000 34%, #ffffff6b 50%, #0000 64%);
  width: 70%;
  height: 140%;
  transition: transform 0.9s ease-out;
  position: absolute;
  top: -20%;
  right: -30%;
  transform: rotate(18deg);
}

.sp-shwn-wallet-card--primary:hover .sp-shwn-wallet-cc--onyx::before { transform: rotate(18deg) translate(6%); }

.sp-shwn-wallet-cc--aurora {
  color: var(--sp-shwn-wallet-cc-aurora-text, #123a28f0);
  background: radial-gradient(100% 88% at 88% 6%, var(--sp-shwn-wallet-cc-aurora-halo, #bef5d780) 0%, transparent 52%), radial-gradient(72% 75% at 8% 92%, #78d2a033 0%, transparent 54%), linear-gradient(132deg, var(--sp-shwn-wallet-cc-aurora-a, #e8f7ef) 0%, var(--sp-shwn-wallet-cc-aurora-b, #c5ebd6) 38%, var(--sp-shwn-wallet-cc-aurora-c, #95d9b3) 100%);
}

.sp-shwn-wallet-cc--aurora .sp-shwn-wallet-cc__mesh {
  background: radial-gradient(100% 58% at 50% 118%, #8cdcaf47 0%, #0000 56%), radial-gradient(circle at 14% 22%, #ffffff59 0%, #0000 42%);
}

.sp-shwn-wallet-cc--aurora .sp-shwn-wallet-cc__pattern {
  opacity: 0.32;
  mix-blend-mode: soft-light;
  background-image: repeating-linear-gradient(60deg, #0000, #0000 5px, #ffffff1f 5px 6px, #0000 6px 18px), repeating-linear-gradient(-60deg, #0000, #0000 5px, #195a3714 5px 6px, #0000 6px 18px), radial-gradient(circle at 50% 0, #c8f5dc59 0%, #0000 45%);
}

.sp-shwn-wallet-cc--aurora .sp-shwn-wallet-cc__nfc { color: var(--sp-shwn-wallet-cc-aurora-text, #123a28f0); }
.sp-shwn-wallet-cc--aurora .sp-shwn-wallet-cc__mark { color: #2d785580; }
.sp-shwn-wallet-cc--aurora .sp-shwn-wallet-cc__number { text-shadow: 0 1px #fff6, 0 0 18px #64c8962e; }

.sp-shwn-wallet-cc--aurora .sp-shwn-wallet-cc__noise {
  opacity: 0.22;
  background-image: repeating-linear-gradient(-18deg, #0000, #0000 1px, #19503208 1px 2px);
}

.sp-shwn-wallet-cc--aurora .sp-shwn-wallet-cc__bottom { color: var(--sp-shwn-wallet-cc-aurora-muted, #2a64488c); }

.sp-shwn-wallet-cc--aurora .sp-shwn-wallet-cc__name,
.sp-shwn-wallet-cc--aurora .sp-shwn-wallet-cc__exp { color: var(--sp-shwn-wallet-cc-aurora-text, #123a28f0); }

.sp-shwn-wallet-cc--aurora::before {
  content: "";
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: soft-light;
  background: linear-gradient(118deg, #0000 0% 34%, #fff0 42%, #ebfff58c 50%, #fff0 58%, #0000 70% 100%) 0% / 200% 100%;
  transition: background-position 1.2s ease-out;
  position: absolute;
  inset: -1px;
}

.sp-shwn-wallet-card--secondary:hover .sp-shwn-wallet-cc--aurora::before { background-position: 100%; }

.sp-shwn-wallet-pocket {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 32px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 44px;
  border-bottom-left-radius: 44px;
  background-color: var(--sp-shwn-wallet-pocket-bg, #37473c);
}

.sp-shwn-wallet-pocket--mid { height: 80%; }

.sp-shwn-wallet-pocket--front {
  height: 60%;
  z-index: 10;
  box-shadow: var(--sp-shwn-wallet-pocket-front-shadow, 0 -14px 40px -7px #0009 inset, 0 -3px 10px -4px #000c inset, 0 4px 11px -4px #000, 0 -2px 10px 0 #0003, 0 -1px 4px 0 #0000004d);
}

.sp-shwn-wallet-rim {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 44px;
  border-bottom-left-radius: 44px;
  pointer-events: none;
  box-shadow: var(--sp-shwn-wallet-pocket-rim-shadow, 0 -2px 12px 0 #0000004d, 0 -1px 4px 0 #0000004d);
}

.sp-shwn-wallet-depth {
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  bottom: -12px;
}

.sp-shwn-wallet-depth--mid {
  box-shadow: var(--sp-shwn-wallet-pocket-depth-mid-shadow);
  background: var(--sp-shwn-wallet-pocket-depth-mid-bg);
}

.sp-shwn-wallet-depth--front {
  box-shadow: var(--sp-shwn-wallet-pocket-depth-front-shadow);
  background: var(--sp-shwn-wallet-pocket-depth-front-bg);
}

.sp-shwn-wallet-tex--pocket {
  border-radius: 0;
}

.sp-shwn-wallet-tex--front {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 44px;
  border-bottom-left-radius: 44px;
  padding: 0;
}

.sp-shwn-wallet-stitch {
  position: absolute;
  top: 12px;
  left: 8px;
  right: 8px;
  width: 97%;
  display: block;
}

.sp-shwn-wallet-stitch line {
  stroke: var(--sp-shwn-wallet-stroke, #597461);
  stroke-opacity: var(--sp-shwn-wallet-stroke-opacity, 0.75);
}

.sp-shwn-wallet-balance {
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: default;
}

.sp-shwn-wallet-balance-amount {
  letter-spacing: -0.05em;
  color: var(--sp-shwn-wallet-balance-amount-text, #0000006a);
  text-shadow: 0 3px 0 var(--sp-shwn-wallet-balance-amount-shadow, #44584a);
  background-image: var(--sp-shwn-wallet-balance-amount-shine, linear-gradient(110deg, #0000005f 30%, #ffffffa2 50%, #0000005f 70%));
  background-position: 0;
  background-size: 290% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 70px;
  font-weight: 600;
  transition: background-position 0.7s ease-in-out;
}

.sp-shwn-wallet-shell:hover .sp-shwn-wallet-balance-amount { background-position: 100%; }

.sp-shwn-wallet-balance-label {
  font-family: var(--sp-shwn-wallet-mono, "Geist Mono", "Geist Mono Fallback", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  color: var(--sp-shwn-wallet-balance-label-text, #0000007a);
  text-shadow: 0 2px 0 var(--sp-shwn-wallet-balance-label-shadow, #485c4e);
}

.sp-shwn-wallet-card:focus-visible {
  outline: 2px solid var(--sp-shwn-wallet-card-inset-top, #ffffffc0);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .sp-shwn-wallet-card--live { animation: none !important; }
  .sp-shwn-wallet-card--primary[data-state="front"] { z-index: 99999; transform: translateY(0) scale(1.5); }
  .sp-shwn-wallet-card--secondary[data-state="front"] { z-index: 99999; transform: translateY(0) scale(1.5); }
  .sp-shwn-wallet-card--primary[data-state="behind"]:not(.sp-shwn-wallet-card--live) { z-index: 0; transform: translateY(0); }
  .sp-shwn-wallet-card--secondary[data-state="behind"]:not(.sp-shwn-wallet-card--live) { z-index: 10; transform: translateY(0); }
  .sp-shwn-wallet-card--primary.sp-shwn-wallet-card--live[data-state="behind"] { z-index: 0; transform: translateY(0) scale(1); }
  .sp-shwn-wallet-card--secondary.sp-shwn-wallet-card--live[data-state="behind"] { z-index: 10; transform: translateY(0) scale(1); }
  .sp-shwn-wallet * { transition: none !important; }
}