@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/static/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --bg: #0B111E;
  --surface: #111A2B;
  --raised: #18233A;
  --line: rgba(226, 236, 250, 0.08);
  --line-strong: rgba(226, 236, 250, 0.14);
  --text: #F1F5FB;
  --muted: #9DB0CC;
  --faint: #6E82A2;
  --accent: #5A9BE0;
  --accent-strong: #3D7EC7;
  --accent-deep: #2C5F9E;
  --accent-soft: rgba(61, 126, 199, 0.14);
  --accent-line: rgba(90, 155, 224, 0.42);
  --link: #7CB3EC;
  --gold: #E9BD68;
  --coin-glow: rgba(233, 189, 104, 0.38);
  --wine: #C74965;
  --rose: #D96A82;
  --win: #3FBF87;
  --sheen: linear-gradient(180deg, rgba(226, 236, 250, 0.05), transparent 42%);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --shadow-md: 0 8px 24px -12px rgba(4, 10, 22, 0.7);
  --shadow-lg: 0 24px 60px -24px rgba(4, 10, 22, 0.8);
  --radius: var(--r-md);
  --launch: var(--bg);
  --paper: var(--text);
  --action: var(--accent-strong);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  color: var(--text);
  font: 400 16px/1.55 Inter, "Inter Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  background: linear-gradient(180deg, #101828 0, var(--bg) 780px) no-repeat, var(--bg);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(70% 42% at 50% -8%, rgba(61, 126, 199, 0.22), transparent 62%);
}
body.theme-wine,
.theme-wine {
  --bg: #14090e;
  --surface: #1f1117;
  --raised: #2a161d;
  --text: #F8EEF1;
  --muted: #C9A4AE;
  --faint: #8E6571;
  --accent: #D96A82;
  --accent-strong: #C74965;
  --accent-deep: #8E2F46;
  --accent-soft: rgba(199, 73, 101, 0.16);
  --accent-line: rgba(217, 106, 130, 0.42);
  --link: #E89AAB;
}
body.theme-wine::before {
  background: radial-gradient(70% 42% at 50% -8%, rgba(199, 73, 101, 0.28), transparent 62%);
}
body.theme-gold,
.theme-gold {
  --bg: #120e08;
  --surface: #1c1710;
  --raised: #2a2216;
  --text: #F7F1E4;
  --muted: #C4B08A;
  --faint: #8A7A5A;
  --accent: #E9BD68;
  --accent-strong: #D4A24A;
  --accent-deep: #9A7428;
  --accent-soft: rgba(233, 189, 104, 0.16);
  --accent-line: rgba(233, 189, 104, 0.42);
  --link: #E9BD68;
}
body.theme-gold::before {
  background: radial-gradient(70% 42% at 50% -8%, rgba(233, 189, 104, 0.22), transparent 62%);
}
body.theme-forest,
.theme-forest {
  --bg: #0b1410;
  --surface: #122019;
  --raised: #1a2c24;
  --text: #E8F5EE;
  --muted: #9DB8AA;
  --faint: #6E8A7C;
  --accent: #3FBF87;
  --accent-strong: #2E9A6C;
  --accent-deep: #1E6E4C;
  --accent-soft: rgba(63, 191, 135, 0.16);
  --accent-line: rgba(63, 191, 135, 0.42);
  --link: #6ED6A8;
}
body.theme-forest::before {
  background: radial-gradient(70% 42% at 50% -8%, rgba(63, 191, 135, 0.22), transparent 62%);
}
body.theme-violet,
.theme-violet {
  --bg: #0f0b18;
  --surface: #181226;
  --raised: #231a36;
  --text: #F3EEFA;
  --muted: #B3A3CC;
  --faint: #7A6B96;
  --accent: #9B7DFF;
  --accent-strong: #7C5CFF;
  --accent-deep: #5438C4;
  --accent-soft: rgba(124, 92, 255, 0.16);
  --accent-line: rgba(155, 125, 255, 0.42);
  --link: #B9A4FF;
}
body.theme-violet::before {
  background: radial-gradient(70% 42% at 50% -8%, rgba(124, 92, 255, 0.28), transparent 62%);
}
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--text); }
button, input, select { font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm); }
button, .btn, .sso-btn, .seg-opt, .role-card, .linkish, .pw-toggle, .dash-balance,
summary, [data-open-email], [data-copy], [data-copy-target],
input[type="submit"], input[type="button"], input[type="reset"], input[type="file"] {
  cursor: pointer;
}
a[href] { cursor: pointer; }
input[type="email"], input[type="password"], input[type="text"],
input[type="number"], input[type="tel"], input[type="search"], input[type="url"],
textarea {
  cursor: text;
}
select { cursor: pointer; }
button:disabled, .btn:disabled, .sso-btn:disabled, [aria-disabled="true"] {
  cursor: not-allowed;
}
.wrap { width: min(1200px, calc(100% - 40px)); margin-inline: auto; position: relative; z-index: 1; }

.sandbox {
  position: relative;
  z-index: 30;
  background: rgba(63, 191, 135, 0.08);
  color: #9be3b0;
  border-bottom: 1px solid rgba(63, 191, 135, 0.16);
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 8px 16px;
}
.top {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(11, 17, 30, 0.76);
  backdrop-filter: blur(22px) saturate(150%);
  border-bottom: 1px solid var(--line);
}
.top-inner {
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand img, .brand .brand-lockup { display: block; height: 32px; width: auto; }
sup.reg, .reg {
  font-family: inherit;
  font-size: 0.62em;
  font-weight: 700;
  line-height: 0;
  vertical-align: super;
  position: relative;
  top: -0.22em;
  letter-spacing: 0;
}
.pay-mark { display: block; margin: 0 0 18px; border-radius: 14px; }
.desk {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 680;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.desk::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
.desk a, .sheet a { color: var(--muted); }
.desk a:hover, .sheet a:hover { color: var(--text); }
.desk .btn.sm { color: #fff; }
.top-inner > .lang {
  margin-left: 4px;
  flex-shrink: 0;
}
.lang {
  position: relative;
  flex-shrink: 0;
}
.lang-btn {
  list-style: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--raised);
  cursor: pointer;
  color: var(--text);
  padding: 0;
}
.lang-btn::-webkit-details-marker { display: none; }
.lang-flag { font-size: 18px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.lang-flag img { display: block; }
.lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 168px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 6px;
  display: grid;
  gap: 2px;
  box-shadow: var(--shadow-lg);
  z-index: 30;
}
.lang-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--muted);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
.lang-menu a:hover,
.lang-menu a.on {
  color: var(--text);
  background: var(--raised);
}
.sheet .lang { margin: 6px 0; }
.sheet .lang-menu { position: static; box-shadow: none; }
.user-nav-badge, .who {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 6px;
  padding-left: 18px;
  border-left: 1px solid var(--line);
}
.user-nav-name, .who-name {
  color: var(--text);
  font-weight: 700;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mob-user-header {
  padding: 8px 0 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.mob-user-name {
  color: #FFFFFF;
  font-weight: 700;
  font-size: 1.05rem;
}
.foot-links { display: block; margin-top: 8px; }
.foot-links a { color: var(--faint); }
.foot-links a:hover { color: var(--text); }
.pay-marks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0 auto 16px;
  padding: 0;
}
.pay-marks li { display: flex; line-height: 0; }
.pay-marks img {
  display: block;
  height: 32px;
  width: auto;
  aspect-ratio: 780 / 500;
  object-fit: contain;
}
.pill {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid var(--line-strong);
  padding: .22rem .55rem;
  border-radius: 999px;
  color: var(--muted);
}
.pill.rec { background: var(--accent-soft); color: var(--accent); border: 0; }
.mob { display: none; position: relative; }
.mob summary {
  list-style: none;
  width: 42px; height: 42px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--raised);
  display: grid;
  place-content: center;
  gap: 5px;
  cursor: pointer;
}
.mob summary::-webkit-details-marker { display: none; }
.mob summary span { display: block; width: 16px; height: 1.5px; background: var(--text); }
.sheet {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 228px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-lg);
}

main.wrap { flex: 1; padding: 48px 0 80px; }
footer {
  position: relative;
  z-index: 1;
  color: var(--faint);
  font-size: 12px;
  padding: 28px 16px 40px;
  text-align: center;
}

h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-weight: 800; letter-spacing: -0.03em; text-wrap: balance; }
h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.12; margin: 0 0 12px; }
h2 { font-size: 1.05rem; letter-spacing: -0.015em; margin: 0 0 14px; }
.kicker {
  color: var(--accent);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 800;
  margin: 0 0 10px;
}
.kicker .reg {
  letter-spacing: 0;
  text-transform: none;
  top: -0.18em;
}
.lede { color: var(--muted); max-width: 38rem; font-size: 1.05rem; line-height: 1.55; margin: 0 0 8px; }
.fine { font-size: 13px; color: var(--faint); margin-top: 18px; max-width: 32rem; }
.muted { color: var(--muted); }
.faint { color: var(--faint); font-weight: 500; }
.gold { color: var(--gold); font-variant-numeric: tabular-nums; }
.win-text { color: var(--win); }
code {
  font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--raised);
  border: 1px solid var(--line);
  padding: .1rem .35rem;
  border-radius: 6px;
}

.row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.row.center { justify-content: center; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--accent), var(--accent-strong));
  color: #fff;
  font-weight: 760;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 12px 28px -14px rgba(61,126,199,.6);
  transition: transform .16s var(--ease), filter .16s var(--ease), border-color .16s var(--ease);
}
.btn:hover { filter: brightness(1.08); color: #fff; transform: translateY(-1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; filter: none; transform: none; }
.btn.is-busy { cursor: wait; }
.btn.ghost {
  background: rgba(24, 35, 58, 0.55);
  border-color: var(--line-strong);
  box-shadow: none;
  color: var(--text);
}
.btn.ghost:hover { border-color: var(--accent-line); filter: none; }
.btn.wine {
  background: var(--wine);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 12px 28px -14px rgba(199,73,101,.5);
}
.btn.xl { min-height: 50px; padding: 0 22px; font-size: 1.02rem; width: 100%; }
.btn.sm { min-height: 40px; padding: 0 15px; font-size: .82rem; }
.done-card .btn.xl { width: auto; min-width: 220px; }

.surface {
  background: var(--sheen), var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 22px 24px 8px;
  box-shadow: var(--shadow-md);
}
.surface > h2 { color: var(--faint); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; margin: 0 0 4px; }

.page { max-width: 820px; }
.page > .lede { margin-bottom: 8px; }
.page .surface { margin-top: 36px; }
.pay-flow, .auth, .dest-flow { max-width: 520px; margin: 0 auto; }
.pay-flow h1, .dest-flow h1 { font-size: clamp(1.8rem, 4vw, 2.25rem); }

.payout-desk { max-width: 640px; }
.payout-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 8px;
}
.payout-head h1 { margin-bottom: 8px; }
.payout-avail { margin: 0; text-align: right; }
.payout-avail span {
  display: block;
  color: var(--faint);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.payout-avail strong {
  font-size: clamp(1.6rem, 3vw, 2rem);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.payout-card {
  background: var(--sheen), var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 18px 20px;
  box-shadow: var(--shadow-md);
  margin-top: 16px;
}
.payout-card > h2 {
  color: var(--faint);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 800;
  margin: 0 0 12px;
}
.payout-card .empty { margin: 4px 0 8px; }
.payout-card .feed { margin-top: 4px; }
.payout-card .fine { margin-top: 10px; }

.dest-now {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.dest-now > div { min-width: 0; }
.dest-now .kicker { margin-bottom: 6px; }
.dest-now strong { display: block; font-size: 1.08rem; font-weight: 750; letter-spacing: -0.02em; }
.dest-now em { display: block; font-style: normal; color: var(--muted); font-size: 13px; margin-top: 2px; }
.dest-now .row { margin: 0; flex-shrink: 0; }
.dest-now .btn { width: auto; }
.dest-current { margin: 0 0 14px; font-size: 13px; }

.dest-pick {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  border: 0;
  padding: 0;
  margin: 0 0 14px;
}
.dest-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 14px 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  cursor: pointer;
  text-align: center;
}
.dest-opt input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.dest-opt .ico { width: 36px; height: 36px; border-radius: 10px; }
.dest-opt:hover { border-color: var(--accent-line); color: var(--text); }
.dest-opt:has(input:checked) {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--text);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.dest-opt:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.dest-pane { display: none; }
.dest-flow:has(#rail-bank:checked) .dest-pane[data-rail="bank"],
.dest-flow:has(#rail-paypal:checked) .dest-pane[data-rail="paypal"],
.dest-flow:has(#rail-venmo:checked) .dest-pane[data-rail="venmo"] { display: block; }
.dest-pane > .muted { margin: 0 0 12px; }
.dest-pane .btn { width: 100%; }
.dest-pane .stack { margin-top: 4px; }
.dest-manual { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.dest-manual summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  margin-bottom: 8px;
}
.dest-manual summary:hover { color: var(--text); }

.withdraw-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end;
  margin: 0;
}
.withdraw-bar label { margin: 0; }
.withdraw-bar .btn { width: auto; min-width: 7.5rem; min-height: 48px; }
.usd-field { position: relative; display: block; }
.usd-field > span {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--faint);
  font-weight: 700;
  pointer-events: none;
}
.usd-field input {
  padding-left: 28px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1.08rem;
}

@media (max-width: 560px) {
  .payout-head { flex-direction: column; align-items: flex-start; }
  .payout-avail { text-align: left; }
  .dest-now { flex-wrap: wrap; }
  .withdraw-bar { grid-template-columns: 1fr; }
  .withdraw-bar .btn { width: 100%; }
  .pay-marks { gap: 6px; }
  .pay-marks img { height: 26px; }
}

.hero { padding: 28px 0 8px; }
.hero h1 {
  font-size: clamp(2.6rem, 6.4vw, 4.6rem);
  line-height: 0.94;
  letter-spacing: -0.045em;
  max-width: 11ch;
  margin-bottom: 20px;
}
.hero .lede { font-size: clamp(1.05rem, 1.6vw, 1.22rem); max-width: 36rem; }
.hero .row { margin-top: 32px; }
.hero-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: center;
  padding-bottom: 12px;
}
.hero-visual {
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  min-height: 240px;
  background: var(--raised);
}
.hero-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 10;
}
.pay-mark { display: block; width: 52px; height: 52px; margin-bottom: 22px; }

.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 56px 0 64px;
}
.bento article {
  background: var(--sheen), var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 22px 22px 24px;
  min-height: 168px;
  box-shadow: var(--shadow-md);
}
.bento h2 { font-size: 1.25rem; margin: 6px 0 8px; }
.bento p { color: var(--muted); margin: 0; font-size: 0.95rem; }

.metric-hero { margin: 4px 0 28px; }
.balance {
  font-size: clamp(3.2rem, 7vw, 4.6rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0 0 12px;
  text-shadow: 0 0 40px var(--coin-glow);
}
.balance span { font-size: 1.05rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 8px 0 20px;
}
.stats div {
  background: var(--sheen), var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px 18px 18px;
}
.stats span {
  display: block;
  color: var(--faint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.stats strong { font-size: 1.45rem; font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: -0.02em; }

.status-line { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 0 0 8px; }

.packages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 28px;
}
.pack {
  background: var(--sheen), var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 22px 22px 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 240px;
  box-shadow: var(--shadow-md);
}
.pack h2 { margin: 0 3rem 0 0; font-size: 1.05rem; }
.pack .pill.rec { position: absolute; top: 18px; right: 16px; }
.pack-coins { font-size: 1.85rem; font-weight: 800; margin: 10px 0 0; letter-spacing: -0.03em; }
.pack-coins span { font-size: .85rem; font-weight: 600; color: var(--muted); }
.pack-price { color: var(--muted); margin: 4px 0 12px; }
.pack .muted { font-size: 13px; margin: 0 0 12px; }
.pack .btn.xl, .pack .paypal-btn { margin-top: auto; }
.paypal-btn { min-height: 48px; }

label { display: block; margin: 14px 0 8px; color: var(--muted); font-size: .82rem; font-weight: 700; letter-spacing: .02em; }
input[type=email], input[type=password], input[type=text], input[type=number], input[type=tel],
input:not([type]), select, textarea {
  width: 100%;
  background: var(--raised);
  border: 1px solid var(--line-strong);
  color: var(--text);
  padding: 14px 14px;
  border-radius: 12px;
}
input::placeholder { color: var(--faint); }
input:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.stack { display: flex; flex-direction: column; gap: 2px; }
.stack .btn.xl { margin-top: 12px; }

.empty {
  color: var(--muted);
  border: 1px dashed var(--line-strong);
  padding: 28px 18px;
  border-radius: var(--r-lg);
  text-align: center;
  margin: 8px 0 20px;
}
.err {
  color: #ffc0c8;
  background: rgba(199, 73, 101, 0.14);
  border: 1px solid rgba(199, 73, 101, 0.32);
  padding: 12px 16px;
  border-radius: 12px;
  max-width: 640px;
  margin: 0 auto 20px;
}
.toast {
  background: rgba(63, 191, 135, 0.12);
  border: 1px solid rgba(63, 191, 135, 0.32);
  color: #b8f0c8;
  padding: 12px 16px;
  border-radius: 12px;
  margin-bottom: 20px;
}

.feed { list-style: none; padding: 0; margin: 0; }
.feed li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.feed li:last-child { border-bottom: 0; }
.feed li .muted { grid-column: 1; font-size: 12px; color: #94A3B8; }
.feed li .num, .feed li .status { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.status { text-transform: uppercase; font-size: 11px; letter-spacing: .08em; font-weight: 800; }
.status.completed { color: var(--win); }
.status.pending, .status.processing { color: var(--gold); }
.status.failed, .status.returned { color: var(--wine); }

form.inline { display: inline; }
.linkish { background: none; border: 0; color: var(--muted); cursor: pointer; font: inherit; font-weight: 680; }
.linkish:hover { color: var(--text); }
.list { list-style: none; padding: 0; }
.list li { padding: .5rem 0; border-bottom: 1px solid var(--line); }
fieldset { border: 1px solid var(--line-strong); border-radius: var(--r-md); }
.num { font-variant-numeric: tabular-nums; }
.disclaimer { font-size: 13px; color: var(--muted); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 40px 0; }
.cards article {
  background: var(--sheen), var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 20px;
}
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .6rem 0; border-bottom: 1px solid var(--line); }

.steps {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
  counter-reset: s;
}
.steps li {
  position: relative;
  text-align: center;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 0 0 12px;
  font-weight: 700;
}
.steps li::before {
  counter-increment: s;
  content: counter(s);
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  margin: 0 auto 8px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  font-size: 11px;
  color: var(--faint);
}
.steps li::after {
  content: "";
  position: absolute;
  left: 50%; right: -50%;
  top: 12px;
  height: 1px;
  background: var(--line-strong);
  z-index: -1;
}
.steps li:last-child::after { display: none; }
.steps li.done, .steps li.current { color: var(--text); }
.steps li.done::before, .steps li.current::before {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.steps li.current { color: var(--accent); }
.steps li.done::before {
  content: "";
  background: var(--accent-strong) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / 13px;
  border-color: var(--accent-strong);
}
.pay-hero { margin-bottom: 28px; }
.pay-hero .lede { margin: 0 0 16px; }
.trust { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 16px 0 0; }
.trust li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
}
.trust li::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  background-color: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / contain;
}

.rail { display: flex; flex-direction: column; gap: 12px; list-style: none; padding: 0; margin: 0; }
.rail-card {
  background: var(--sheen), var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.rail-card.on {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-md);
}
.rail-head {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 16px 18px;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}
.rail-head:hover { background: rgba(226, 236, 250, 0.03); }
a.rail-head:hover { color: inherit; }
.rail-copy { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.rail-copy strong { font-size: 1.05rem; font-weight: 700; color: var(--text); }
.rail-copy em { font-style: normal; color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rail-copy .id-check { width: 20px; height: 20px; margin-inline-start: 0; }
.chev {
  width: 8px; height: 8px;
  border-right: 2px solid var(--muted);
  border-top: 2px solid var(--muted);
  transform: rotate(45deg);
  flex-shrink: 0;
}
.ico {
  width: 42px; height: 42px;
  border-radius: 12px;
  flex-shrink: 0;
  background: var(--accent-soft) center/22px no-repeat;
}
.ico.bank { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%235A9BE0' viewBox='0 0 24 24'%3E%3Cpath d='M3 10h18v2H3zm2 3h2v6H5zm4 0h2v6H9zm4 0h2v6h-2zm4 0h2v6h-2zM12 3l9 6H3z'/%3E%3C/svg%3E"); }
.ico.pp {
  background-color: rgba(0, 121, 193, 0.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7.8 21.6h-3.6c-.3 0-.5-.2-.4-.5l3.1-18.8c0-.2.2-.3.4-.3h6.3c3.4 0 5.6 1.7 5.1 4.7-.6 3.6-3.1 5.6-6.6 5.6H9.9l-.9 5.8c0 .2-.2.3-.4.3h-.8z' fill='%23003087'/%3E%3Cpath d='M10.2 16.9h2.3c3.1 0 5.4-1.7 5.9-4.8.4-2.6-1.3-4.3-4.4-4.3H8.3c-.2 0-.4.2-.4.4l-2.1 13c0 .2.1.4.3.4h3.1l.9-4.3c.1-.2.2-.4.4-.4z' fill='%230079C1'/%3E%3Cpath d='M9.9 12.3l.9-5.5h3.2c1.3 0 2.4.3 3.1.9-.4 2.8-2.6 4.6-5.7 4.6H9.9z' fill='%2300457C'/%3E%3C/svg%3E");
}
.ico.vn {
  background-color: #008CFF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M18.8 3.5c.8 1.4 1.2 2.8 1.1 4.3-.2 3.5-3.3 8.9-6.3 12.8H8.8L5.5 5.6h4.5l1.7 10.4c1.2-2 2.6-5 2.9-7.2.2-1.6-.2-2.7-.8-3.4l5-1.9z' fill='%23FFFFFF'/%3E");
}
.ico.totp { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%235A9BE0' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l9 4v6c0 5.5-3.8 10.7-9 12-5.2-1.3-9-6.5-9-12V5l9-4zm0 6a5 5 0 100 10 5 5 0 000-10zm0 2.2a2.8 2.8 0 110 5.6 2.8 2.8 0 010-5.6z'/%3E%3C/svg%3E"); }
.ico.key { background-color: rgba(61,126,199,.22); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%237CB3EC' viewBox='0 0 24 24'%3E%3Cpath d='M12.6 10.2A5.5 5.5 0 1014 14h-2.2l-.8.8v2.2H9v2H7v2H3v-3.6l5.4-5.4a5.5 5.5 0 014.2-1.8zm4.9-3.7a2 2 0 11-2 2 2 2 0 012-2z'/%3E%3C/svg%3E"); }
.panel { padding: 0 18px 18px; border-top: 1px solid var(--line); }
.panel[hidden] { display: none; }
.panel-lede { color: var(--muted); font-size: .95rem; margin: 14px 0 12px; }
.sso {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 0 0 4px;
}
.sso:not(:has(a)):not(:has(button)) { display: none; }
.sso-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 650;
  line-height: 18px;
  letter-spacing: 0;
  text-decoration: none;
  box-shadow: none;
  box-sizing: border-box;
  cursor: pointer;
  transition: filter .16s var(--ease), opacity .16s var(--ease), background .16s var(--ease);
}
.sso-btn .mark-slot {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.sso-btn .mark-slot img {
  max-width: 22px;
  max-height: 22px;
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}
.sso-btn:hover { filter: none; transform: none; }
.sso-btn.google {
  background: #FFFFFF;
  border-color: #747775;
  color: #1F1F1F;
}
.sso-btn.google:hover { background: #F8F9FA; color: #1F1F1F; }
.sso-btn.twitch {
  background: #9146FF;
  color: #fff;
}
.sso-btn.twitch:hover { color: #fff; background: #772ce8; }
.sso-btn.kick {
  background: #000;
  border-color: #53FC18;
  color: #53FC18;
  font-weight: 700;
}
.sso-btn.kick:hover { color: #53FC18; background: #111; }
.sso-btn.kick .mark-slot img { filter: invert(84%) sepia(72%) saturate(459%) hue-rotate(52deg) brightness(101%) contrast(102%); }
.sso-btn.discord {
  background: #5865F2;
  color: #fff;
}
.sso-btn.discord:hover { color: #fff; background: #4752c4; }
.sso-btn.steam {
  background: #171a21;
  border-color: #1b2838;
  color: #c7d5e0;
}
.sso-btn.steam:hover { color: #fff; background: #1b2838; }
.sso-btn.microsoft {
  background: #2f2f2f;
  border-color: #2f2f2f;
  color: #fff;
}
.sso-btn.microsoft:hover { color: #fff; background: #3b3b3b; }
.sso-btn.xbox {
  background: #107C10;
  border-color: #107C10;
  color: #fff;
  font-weight: 700;
}
.sso-btn.xbox:hover { color: #fff; background: #0e6b0e; }
.sso-btn.paypal {
  background: #FFFFFF;
  border-color: #0070BA;
  color: #003087;
}
.sso-btn.paypal:hover { color: #003087; background: #F5F7FA; }
.sso-btn.tiktok {
  background: #FFFFFF;
  border-color: rgba(22, 24, 35, 0.12);
  color: #161823;
  font-weight: 600;
}
.sso-btn.tiktok:hover { color: #161823; background: #F8F8F8; }
.sso-btn.x {
  background: #000000;
  border: 1px solid #e7e9ea;
  color: #FFFFFF;
  font-weight: 600;
}
.sso-btn.x:hover { color: #fff; background: #141414; border-color: #fff; }
.sso-btn.email {
  background: linear-gradient(180deg, var(--accent), var(--accent-strong));
  border-color: transparent;
  color: #fff;
  font-weight: 760;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 12px 28px -14px rgba(61,126,199,.6);
}
.sso-btn.email:hover { color: #fff; filter: brightness(1.08); background: linear-gradient(180deg, var(--accent), var(--accent-strong)); }
.sso-btn.email:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sso-btn.email .mark-slot svg { display: block; }
.sso-head { margin: 14px 0 8px; }
.sso-group-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 16px 0 8px;
}
.sso-group-label:has(+ .sso:not(:has(a)):not(:has(button))),
.sso-group-label:has(+ .sso-note + .sso:not(:has(a)):not(:has(button))) { display: none; }
.sso-note:has(+ .sso:not(:has(a)):not(:has(button))) { display: none; }
.sso-low { margin-top: 16px; opacity: .92; }
.sso-low:not(:has(a)) { display: none; }
.or {
  display: flex; align-items: center; gap: 12px;
  color: var(--faint); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  margin: 10px 0 4px;
}
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); }
.seg { display: flex; gap: 8px; border: 0; padding: 0; margin: 10px 0 16px; }
.seg legend { color: var(--muted); font-size: .82rem; font-weight: 700; margin-bottom: 8px; }
.seg-opt {
  flex: 1; margin: 0;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--raised);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 12px 8px;
  color: var(--text);
  cursor: pointer;
}
.seg-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.seg-opt input { width: auto; margin: 0; accent-color: var(--accent); }

.done-card { text-align: center; padding: 28px 8px 12px; }
.done-card .done-icon,
.done-card .check {
  width: 60px; height: 60px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(233, 189, 104, 0.18) 0%, rgba(212, 155, 40, 0.1) 100%);
  border: 1.5px solid rgba(233, 189, 104, 0.45);
  box-shadow: 0 0 24px rgba(233, 189, 104, 0.2);
  color: var(--gold);
  font-size: 1.6rem;
  font-weight: 800;
  display: grid; place-items: center;
}
.done-card .kicker { color: var(--gold); font-weight: 700; letter-spacing: 0.08em; }
.dest { margin: 0 auto 16px; }
.avail { font-size: 1.05rem; color: var(--muted); margin: 0 0 18px; }
.avail .gold { font-size: 1.5rem; font-weight: 800; }
.change-wrap { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); }
.change-wrap summary { cursor: pointer; color: var(--muted); }
.change-wrap summary:hover { color: var(--text); }
.change-wrap .row { margin-top: 14px; }
.row.wrap { flex-wrap: wrap; }

.mfa-flow .rail-card .panel { display: block; }
.qr-wrap { display: grid; grid-template-columns: 212px 1fr; gap: 18px; align-items: start; margin: 16px 0 8px; }
.qr { background: #F1F5FB; border-radius: 12px; padding: 8px; line-height: 0; }
.qr svg { display: block; width: 196px; height: 196px; }
.secret { font-size: 12px; letter-spacing: .04em; word-break: break-all; color: var(--text); }
.codes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; list-style: none; padding: 0; margin: 16px auto; max-width: 22rem; text-align: left; }
.codes code { font-size: 1rem; letter-spacing: .06em; }

.creator-list { margin-top: 8px; }
.creator-list h2 { font-size: 1.4rem; margin: 4px 0 18px; }
.creator-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.creator-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--sheen), var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transition: border-color .16s var(--ease), transform .16s var(--ease);
}
.creator-card:hover {
  border-color: var(--accent-line);
  color: inherit;
  transform: translateY(-1px);
}
.creator-tile {
  display: block;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transition: border-color .16s var(--ease), transform .16s var(--ease);
}
.creator-tile:hover {
  border-color: var(--accent-line);
  color: inherit;
  transform: translateY(-2px);
}
.tile-cover {
  display: block;
  height: 128px;
  overflow: hidden;
  background: var(--raised);
}
.tile-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tile-meta {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 0 16px 16px;
}
.tile-meta .avatar {
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  max-width: 56px;
  max-height: 56px;
  flex: 0 0 56px;
  border-radius: 50%;
  object-fit: cover;
  margin-top: -28px;
  border: 3px solid var(--surface);
  box-shadow: var(--shadow-md);
}
.creator-tile .rail-copy { padding-top: 12px; gap: 4px; }
.mini-stage {
  display: block;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--line);
  margin: 4px 0 14px;
  color: inherit;
  text-decoration: none;
  background: var(--raised);
}
.mini-stage:hover { color: inherit; }
.mini-cover {
  display: block;
  height: 92px;
  overflow: hidden;
}
.mini-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-id {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px 12px;
}
.mini-id .avatar {
  width: 44px;
  height: 44px;
  margin-top: -18px;
  border: 2px solid var(--raised);
}
.mini-id strong { display: block; color: var(--text); }
.mini-id em { display: block; font-style: normal; color: var(--muted); font-size: 12px; }
.dash-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin: 4px 0 36px;
}
.dash-head h1 { margin-bottom: 8px; }
.dash-head .lede { margin: 0; }
.dash-balance {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
  padding: 18px 22px 20px;
  background: var(--sheen), var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-md);
}
.dash-balance:hover { color: inherit; border-color: var(--accent-line); }
.dash-balance span {
  color: var(--faint);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.dash-balance strong {
  font-size: 2rem;
  letter-spacing: -0.04em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.dash-balance.usd strong { font-size: 1.7rem; }
.dash-balance em { font-style: normal; font-size: 1rem; font-weight: 600; color: var(--muted); }
.dash {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 28px;
}
.dash-card {
  background: var(--sheen), var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 22px 22px 24px;
  box-shadow: var(--shadow-md);
}
.dash-card h2 { font-size: 1.25rem; margin: 4px 0 8px; }
.auth-stage {
  position: relative;
  max-width: 960px;
  margin: 16px auto 40px;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 600px;
}
.auth-backdrop {
  position: relative;
  background: linear-gradient(180deg, rgba(11, 17, 30, 0.2) 0%, rgba(11, 17, 30, 0.85) 100%),
              url('/static/look/login-backdrop.webp') center / cover no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px;
  overflow: hidden;
  border-right: 1px solid var(--line);
}
.auth-backdrop-content {
  position: relative;
  z-index: 2;
}
.auth-backdrop-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.auth-backdrop-sub {
  font-size: 0.95rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}
.auth-main {
  padding: 40px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(17, 26, 43, 0.96);
  backdrop-filter: blur(16px);
}
@media (max-width: 820px) {
  .auth-stage {
    grid-template-columns: 1fr;
    max-width: 480px;
    min-height: auto;
  }
  .auth-backdrop {
    display: none;
  }
  .auth-main {
    padding: 32px 24px;
  }
}
.auth-card {
  width: min(440px, 100%);
  margin: 0 auto;
  background: var(--sheen), var(--surface);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 32px 28px 28px;
  box-shadow: var(--shadow-lg);
}
.auth-card.signup { width: min(460px, 100%); }
.field { margin: 0 0 16px; }
.field > label {
  display: block;
  margin: 0 0 6px;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 700;
}
.field-hint {
  margin: 0 0 8px;
  color: var(--faint);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 4.5rem; }
.pw-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: var(--link);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 10px;
  border-radius: 8px;
}
.pw-toggle:hover { color: var(--text); }
.role-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  border: 0;
  padding: 0;
  margin: 4px 0 18px;
}
.role-cards legend {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 700;
  margin-bottom: 8px;
  padding: 0;
}
.role-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 14px 12px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--raised);
  color: var(--text);
  min-height: 108px;
}
.role-card input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.role-card:hover { border-color: var(--accent-line); }
.role-card:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent);
}
.role-card strong { font-size: 15px; letter-spacing: -0.02em; }
.role-card span { color: var(--muted); font-size: 12px; line-height: 1.45; font-weight: 500; }
.terms-agree {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 4px;
  cursor: pointer;
  user-select: none;
}
.terms-agree input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}
.terms-agree span {
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}
.terms-agree a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.terms-agree a:hover {
  color: var(--text);
}
.auth-card .or { margin: 18px 0 12px; }
.auth-card h1 { font-size: clamp(1.7rem, 4vw, 2.1rem); }
.auth-card .lede { font-size: 0.98rem; }
.auth-card.compact {
  padding: 18px 18px 16px;
  border-radius: 22px;
}
.auth-card.compact h1 {
  font-size: 1.45rem;
  margin: 0 0 8px;
}
.auth-card.compact .kicker { margin-bottom: 6px; }
.auth-card.compact .lede { font-size: .9rem; margin-bottom: 8px; }
.auth-card.compact .stack label { margin: 8px 0 4px; }
.auth-card.compact input[type=email],
.auth-card.compact input[type=password],
.auth-card.compact input[type=text] { padding: 10px 12px; }
.auth-card.compact .btn.xl { min-height: 42px; margin-top: 8px; }
.auth-card.compact .fine { margin-top: 10px; }
.auth-card.compact .seg { margin: 4px 0 10px; }
.auth-card.compact .field { margin: 0 0 10px; }
.auth-card.compact .field > label { margin: 0 0 4px; }
body:has(.auth-card.compact) main.wrap { padding: 16px 0 32px; }
.sso-note {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--faint);
  line-height: 1.4;
}
.verify .lede { margin-bottom: 16px; }
.otp-field input {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.18em;
  font-size: 1.35rem;
  font-weight: 650;
  text-align: center;
}
.resend {
  margin: 12px 0 0;
  text-align: center;
}
.resend .linkish[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}
/* Autofill fix - prevents jarring blue/yellow background */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #18233a inset !important;
  -webkit-text-fill-color: #f1f5f9 !important;
  caret-color: #f1f5f9 !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Enhanced Verify Card */
.auth-card.verify {
  border: 1px solid var(--line-strong);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.verify-badge-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #818cf8;
  margin-bottom: 12px;
}
.passkey-action-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.passkey-hero-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  width: 100%;
}
.passkey-hero-btn:disabled {
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: #94a3b8;
  cursor: wait;
}
.passkey-status-msg {
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  margin: 10px 0 0;
  min-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Clean Alternate Ways */
.other-ways-clean {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.other-ways-toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 600;
  padding: 6px 4px;
  border-radius: 8px;
  transition: color 0.15s;
  list-style: none;
  user-select: none;
}
.other-ways-toggle::-webkit-details-marker { display: none; }
.other-ways-toggle:hover {
  color: #fff;
}
.other-ways-clean[open] .other-ways-toggle .chevron {
  transform: rotate(180deg);
}
.other-ways-toggle .chevron {
  transition: transform 0.2s ease;
}
.other-ways-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.alt-method-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font-size: 0.86rem;
  transition: background 0.15s, border-color 0.15s;
}
.alt-method-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--line-strong);
}
.alt-method-btn strong {
  display: block;
  font-size: 0.88rem;
  color: #fff;
}
.alt-method-btn .muted {
  display: block;
  font-size: 0.76rem;
  color: var(--muted);
}
.alt-method-details {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--raised);
  overflow: hidden;
}
.alt-method-details summary.alt-method-btn {
  background: transparent;
  border: none;
  border-radius: 0;
  list-style: none;
}
.alt-method-details summary::-webkit-details-marker { display: none; }
.alt-form-body {
  padding: 10px 12px 12px;
  border-top: 1px solid var(--line);
}
.alt-sso-wrap {
  margin-top: 6px;
  padding-top: 8px;
}
.alt-sso-label {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0 0 8px;
}
.other-ways {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.other-ways summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  margin-bottom: 10px;
}
.other-ways summary:hover { color: var(--text); }
.auth-card .other-ways {
  margin-top: 14px;
  padding-top: 12px;
}
.auth-card .other-ways .sso-note { margin-top: 8px; }
.other-ways .stack { margin-top: 10px; }
.other-ways .sso { margin-top: 8px; }
.extra-form { margin-top: 8px; }
.settings { max-width: 640px; }
.set-intro { margin: 0 0 12px; font-size: .92rem; }
.set-list { list-style: none; padding: 0; margin: 0 0 8px; }
.set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.set-row:last-child { border-bottom: 0; }
.set-row > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.set-row strong { font-size: .98rem; }
.set-row .muted { font-size: 13px; }
.set-row form { margin: 0; }
.set-sub { list-style: none; padding: 0 0 12px; margin: 0; color: var(--muted); font-size: 13px; }
.settings .surface { padding: 18px 20px 10px; margin-top: 18px; }
.settings .surface > h2 { margin-bottom: 8px; }
.page > h1 { font-size: clamp(1.7rem, 3vw, 2.1rem); }
.profile-page { max-width: 900px; }
.profile-stage {
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  margin: 0 0 28px;
}
.profile-cover {
  height: 220px;
  overflow: hidden;
  position: relative;
  background: var(--raised);
}
.profile-cover img {
  width: 100%;
  height: 100%;
  object-fit: var(--banner-fit, cover);
  object-position: var(--banner-pos, 50% 40%);
  display: block;
}
.profile-cover .dim,
.profile-cover i.dim {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: calc(var(--banner-dim, 24) * 0.01);
  pointer-events: none;
}
.profile-cover::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 72px;
  background: linear-gradient(transparent, var(--surface));
  pointer-events: none;
}
.profile-page .avatar,
.profile-page .avatar.photo,
.look-stage .avatar,
.look-stage .avatar.photo,
.hub .avatar,
.hub .avatar.photo {
  object-fit: var(--avatar-fit, cover);
  object-position: var(--avatar-pos, 50% 20%);
}
.profile-body { padding: 0 24px 22px; }
.share-btn {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: var(--text);
  background: rgba(11, 17, 30, 0.62);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background .15s var(--ease), transform .15s var(--ease);
}
.share-btn:hover { background: rgba(11, 17, 30, 0.8); }
.share-btn:active { transform: scale(0.96); }
.share-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.share-btn svg,
.share-btn img,
.share-btn .i-share,
.share-btn .i-done {
  width: 18px;
  height: 18px;
  grid-area: 1 / 1;
  transition: opacity .15s cubic-bezier(0.2, 0, 0, 1);
  display: grid;
  place-items: center;
}
.share-btn .i-share { opacity: 1; }
.share-btn .i-done { opacity: 0; }
.share-btn.is-copied .i-share { opacity: 0; }
.share-btn.is-copied .i-done { opacity: 1; }
.profile-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0 0 14px;
}
.profile-head .avatar.xl {
  margin-top: -52px;
  border: 3px solid var(--surface);
  position: relative;
  z-index: 1;
  box-shadow: none;
}
.profile-hero {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0 0 22px;
}
.profile-hero h1,
.profile-id h1 {
  font-size: clamp(1.9rem, 4.2vw, 2.45rem);
  margin: 0;
  letter-spacing: -0.04em;
  line-height: 1;
  text-wrap: nowrap;
}
.profile-id {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
.profile-id h2 { font-size: 1.4rem; margin: 0 0 4px; text-transform: none; letter-spacing: -0.03em; color: var(--text); }
.host-note { font-size: 13px; color: var(--faint); margin: 8px 0 0; }
.bio { color: var(--text); font-size: 1.05rem; margin: 4px 0 0; max-width: 40rem; line-height: 1.5; }
.lede:empty, .bio:empty, .page-quote:empty { display: none; }
.look-form { margin-top: 8px; padding-bottom: 22px; gap: 14px; }
.look-stage { position: relative; }
.look-stage.theme-wine { --surface: #1f1117; --raised: #2a161d; --accent: #D96A82; --accent-line: rgba(217,106,130,.42); }
.look-stage.theme-gold { --surface: #1c1710; --raised: #2a2216; --accent: #E9BD68; --accent-line: rgba(233,189,104,.42); }
.look-stage.theme-forest { --surface: #122019; --raised: #1a2c24; --accent: #3FBF87; --accent-line: rgba(63,191,135,.42); }
.look-stage.theme-violet { --surface: #181226; --raised: #231a36; --accent: #9B7DFF; --accent-line: rgba(155,125,255,.42); }
.look-stage.theme-night { --accent: #5A9BE0; }
.look-stage .look-actions {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 2;
  display: flex;
  gap: 8px;
}
.avatar-edit {
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  border-radius: 999px;
}
.avatar-edit .avatar { pointer-events: none; }
.ctrl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
.ctrl-grid input[type=range] { width: 100%; accent-color: var(--accent); }
.theme-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 14px;
}
.theme-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--raised);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}
.theme-chip input { margin: 0; }
.theme-chip.on, .theme-chip:has(input:checked) {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.theme-chip.night { --swatch: #5A9BE0; }
.theme-chip.wine { --swatch: #D96A82; }
.theme-chip.gold { --swatch: #E9BD68; }
.theme-chip.forest { --swatch: #3FBF87; }
.theme-chip.violet { --swatch: #9B7DFF; }
.theme-chip::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 99px;
  background: var(--swatch);
}
.gallery-edit {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin: 8px 0 4px;
}
.gallery-edit figure {
  margin: 0;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.gallery-edit img { display: block; width: 100%; height: 96px; object-fit: cover; }
.gallery-edit .check { padding: 6px 8px; font-size: 12px; }
.gallery-add {
  min-height: 128px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font-weight: 650;
  cursor: pointer;
}
.page-quote {
  margin: 14px 0 0;
  padding: 0 0 0 14px;
  border-left: 3px solid var(--accent);
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.45;
}
.page-video {
  margin: 16px 0 0;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #000;
}
.page-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.page-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin: 16px 0 0;
}
.page-gallery img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.amount-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0 0 8px;
}
.gifts-card { margin-top: 22px; padding-bottom: 8px; }
.gifts-card h2 { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; color: var(--faint); }
.gift-list { list-style: none; padding: 0; margin: 8px 0 12px; }
.gift-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.gift-list li:last-child { border-bottom: 0; }
.gift-list strong { color: var(--text); }
.gift-list.numbered { list-style: decimal; padding-left: 1.2rem; }
.gift-list.numbered li { padding-left: 4px; }
.extras {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 12px;
}
.extras button {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: var(--raised);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.extras button strong { font-size: 1.15rem; color: var(--gold); }
.extras button span { color: var(--muted); font-size: 13px; font-weight: 650; }
.extras button.on { border-color: var(--gold); background: rgba(233,189,104,.12); }
.extra-edit {
  display: grid;
  grid-template-columns: 1.4fr 0.7fr;
  gap: 8px;
  margin: 0 0 12px;
}
label.check,
.check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #CBD5E1;
  font-size: 13.5px;
  font-weight: 500;
  margin: 8px 0;
  cursor: pointer;
  width: auto;
  max-width: 100%;
  height: auto;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  white-space: normal;
  line-height: 1.4;
}
label.check span,
.check span {
  color: #CBD5E1;
  font-size: 13px;
  font-weight: 500;
}
label.check input[type="checkbox"],
label.check input[type="radio"],
.check input {
  width: 16px;
  min-width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}
.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 10px 0 0;
}
.socials:empty { display: none; }
.socials a {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.preview-frame {
  margin: 0 0 24px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: repeating-conic-gradient(#18233A 0% 25%, #111A2B 0% 50%) 50% / 24px 24px;
  line-height: 0;
}
.preview-frame iframe {
  border: 0;
  width: 100%;
  max-width: 960px;
  height: 420px;
  background: transparent;
}
.cmds { flex-wrap: wrap; }
.clock-line { margin: 0 0 8px; font-variant-numeric: tabular-nums; }
.suite-h { margin: 28px 0 8px; font-size: 1.15rem; }
.cheat {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 18px;
  font-size: 14px;
}
.cheat th, .cheat td {
  text-align: left;
  vertical-align: top;
  padding: 10px 8px;
  border-bottom: 1px solid var(--line);
}
.cheat th { color: #94A3B8; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.cheat td { color: #E2E8F0; }
.cheat code { font-size: 12px; word-break: break-all; }
.cheat .btn { margin-left: 6px; }
.director {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
  margin: 0 0 18px;
  padding: 16px 18px;
}
.director .kicker { grid-column: 1 / -1; }
.director p { margin: 0; }
.director .dir-live { color: var(--gold); font-weight: 800; }
.director .dir-last { grid-column: 1 / -1; color: var(--muted); }
.share-tools {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 14px 0 0;
}
.page-qr {
  width: 132px;
  height: 132px;
  border-radius: 12px;
  background: #F1F5FB;
  flex-shrink: 0;
}
.share-tools .share-line { flex: 1; margin: 0; }
.goal-box { margin: 14px 0 4px; max-width: 28rem; }
.goal-bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(226,236,250,.1);
  overflow: hidden;
  margin: 6px 0;
}
.goal-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-strong), var(--gold));
  border-radius: 999px;
}
.goal-nums { margin: 0; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; }
input[type=file] {
  padding: 12px;
  background: var(--raised);
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  color: var(--muted);
}
.page .donate-grid .surface { margin-top: 0; }
.donate-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 16px;
  margin-top: 24px;
  align-items: start;
}
.donate-card { padding: 24px 24px 22px; }
.donate-card h2 { font-size: 1.35rem; text-transform: none; letter-spacing: -0.03em; color: var(--text); margin: 0 0 8px; }
.donate-card.primary { box-shadow: var(--shadow-lg); }
.donate-card.side { background: var(--sheen), var(--raised); }
.donate-card .row { margin-top: 16px; }
.share-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0;
}
.share-line code {
  font-size: 14px;
  word-break: break-all;
  background: var(--raised);
  padding: .35rem .55rem;
}
.share-card .share-line {
  margin: 14px 0 0;
  padding: 12px 14px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.share-card .share-line code { background: none; border: 0; padding: 0; font-size: 13px; }
.social-name { margin: 0 0 8px; }
.avatar.xl {
  width: 88px;
  height: 88px;
  font-size: 2rem;
  box-shadow: none;
}
img.avatar,
img.avatar.photo {
  object-fit: var(--avatar-fit, cover);
  object-position: var(--avatar-pos, 50% 20%);
}
@media (max-width: 720px) {
  .donate-grid { grid-template-columns: 1fr; }
}
.gift-who { margin: 8px 0 20px; }
.gift-flow .lede { margin-bottom: 18px; }
.label-like {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .02em;
  margin: 8px 0 6px;
}
.coin-picks { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.coin-picks button {
  min-width: 68px;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--raised);
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}
.coin-picks button:hover { border-color: var(--accent-line); }
.coin-picks button.on {
  border-color: var(--gold);
  background: rgba(233, 189, 104, 0.14);
  color: var(--gold);
}
.coin-picks button.all { min-width: auto; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}
textarea {
  resize: vertical;
  min-height: 88px;
  line-height: 1.45;
}
.avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--accent-strong);
  color: #fff;
  display: grid; place-items: center;
  flex-shrink: 0;
  font-size: 1rem;
  font-weight: 800;
}
.avatar.lg { width: 56px; height: 56px; font-size: 1.25rem; }
.identity { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; }
.identity h1 { margin: 0; }
.quote { color: var(--muted); font-style: italic; max-width: 28rem; margin: 0 auto 16px; }

@media (max-width: 860px) {
  .bento, .packages, .stats, .dash { grid-template-columns: 1fr 1fr; }
  .hero-split { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .wrap { width: min(1120px, calc(100% - 32px)); }
  .desk { display: none; }
  .mob { display: block; }
  main.wrap { padding: 32px 0 64px; }
  .hero h1 { max-width: none; }
  .hero-split { grid-template-columns: 1fr; gap: 22px; }
  .profile-cover { height: 160px; }
  .profile-head { flex-direction: column; align-items: flex-start; }
  .profile-head .avatar.xl { margin-top: -40px; }
  .amount-row { grid-template-columns: 1fr 1fr; }
  .share-tools { flex-direction: column; align-items: flex-start; }
  .bento, .packages, .stats, .dash { grid-template-columns: 1fr; }
  .dash-head { flex-direction: column; align-items: stretch; }
  .dash-balance { min-width: 0; }
  .avatar.xl { width: 72px; height: 72px; font-size: 1.65rem; }
  .profile-hero { gap: 16px; }
  .row { flex-direction: column; }
  .row .btn, .btn.xl { width: 100%; }
  .qr-wrap { grid-template-columns: 1fr; }
  .done-card .btn.xl { width: 100%; }
  .auth-card { padding: 24px 20px 22px; border-radius: 22px; }
  .auth-card.compact { padding: 16px 14px 14px; }
  .sso { gap: 5px; }
  .role-cards { grid-template-columns: 1fr; }
  .role-card { min-height: 0; }
}
.name-line { color: var(--text); }
.profile-id h1.name-line,
.hub-card h1.name-line {
  display: flex;
  align-items: center;
  gap: 0.28em;
  max-width: 100%;
}
h1 .name-line {
  display: inline-flex;
  align-items: center;
  gap: 0.28em;
  max-width: 100%;
  vertical-align: middle;
}
.profile-id h1.name-line .name-text,
.hub-card h1.name-line .name-text,
h1 .name-line .name-text {
  min-width: 0;
}
.profile-id h1.name-line .name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.id-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0;
}
.id-meta:not(:has(.league-chip, a)) { display: none; }
.id-meta a {
  font-size: 14px;
  font-weight: 650;
  color: var(--muted);
  text-decoration: none;
}
.id-meta a:hover { color: var(--text); }
.marks {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 8px;
  font-size: 13px;
  color: var(--faint);
}
.marks a { color: inherit; }
.id-check {
  display: inline-block;
  width: 20px;
  height: 20px;
  color: #1D9BF0;
  flex: 0 0 auto;
  vertical-align: -0.18em;
  margin-inline-start: 0.28em;
}
h1 .id-check,
.profile-id h1 .id-check,
.hub-card h1 .id-check,
h1 .name-line .id-check {
  width: 0.78em;
  height: 0.78em;
  min-width: 22px;
  min-height: 22px;
  flex-shrink: 0;
  margin-inline-start: 0;
  vertical-align: 0;
  translate: 0 -0.02em;
}
.creator-tile .id-check,
.board-who .id-check {
  width: 20px;
  height: 20px;
  margin-inline-start: 0;
}
.id-check svg { width: 100%; height: 100%; display: block; }
.league-chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--league-ink, var(--muted));
  border: 1px solid color-mix(in srgb, var(--league-ring, var(--line-strong)) 50%, transparent);
  background: color-mix(in srgb, var(--league-ring, transparent) 16%, transparent);
}
.league-chip.league-rising {
  color: var(--muted);
  border-color: var(--line-strong);
  background: transparent;
}
.league-chip.league-club {
  color: #7CB3EC;
  border-color: rgba(90, 155, 224, 0.42);
  background: rgba(90, 155, 224, 0.14);
}
.league-chip.league-open {
  color: #C4B5FD;
  border-color: rgba(155, 125, 255, 0.42);
  background: rgba(155, 125, 255, 0.14);
}
.league-chip.league-prime {
  color: #E9BD68;
  border-color: rgba(233, 189, 104, 0.42);
  background: rgba(233, 189, 104, 0.16);
}
.league-chip.league-demo {
  color: #A78BFA;
  border-color: rgba(167, 139, 250, 0.45);
  background: rgba(167, 139, 250, 0.16);
}
.creator-tile .league-chip,
.board-who .league-chip {
  height: 20px;
  padding: 0 8px;
  font-size: 11px;
}
.league-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  text-transform: none;
  letter-spacing: 0;
}
.league-head .id-check {
  width: 22px;
  height: 22px;
  margin-inline-start: 0;
  vertical-align: 0;
}
.league-rising { --league-ink: var(--text); --league-ring: transparent; }
.league-club { --league-ink: #7CB3EC; --league-ring: #5A9BE0; }
.league-open { --league-ink: #C4B5FD; --league-ring: #9B7DFF; }
.league-prime { --league-ink: #E9BD68; --league-ring: #E9BD68; }
.league-club .avatar,
.league-open .avatar,
.league-prime .avatar {
  box-shadow: 0 0 0 3px var(--league-ring);
}
.profile-head.league-club .avatar.xl,
.profile-head.league-open .avatar.xl,
.profile-head.league-prime .avatar.xl {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--league-ring);
}
.league-rising .avatar,
.profile-head.league-rising .avatar.xl {
  box-shadow: none;
}
.tile-meta .avatar { border-color: var(--surface); }
.creator-tile.league-rising .avatar,
.board-row.league-rising .avatar {
  box-shadow: none;
  border-color: var(--surface);
}
.creator-tile .name-line,
.board-who .name-line {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  color: var(--text);
}
.creator-tile .name-line .name-text,
.board-who .name-line .name-text {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.creator-tile .rail-copy em,
.board-who em {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 0;
}
.league {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  background: transparent;
}
.league-scale .league-club { color: #7CB3EC; border-color: rgba(90,155,224,.42); }
.league-scale .league-open { color: #C4B5FD; border-color: rgba(155,125,255,.42); }
.league-scale .league-prime { color: #E9BD68; border-color: rgba(233,189,104,.42); }
.look-preview { max-width: 900px; }
.look-donate { pointer-events: none; user-select: none; }
.look-donate .coin-picks button { cursor: default; }
.crop-flow {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: rgba(11, 17, 30, 0.88);
  backdrop-filter: blur(8px);
  display: grid;
  gap: 8px;
}
.crop-flow[hidden] { display: none; }
.crop-flow p { margin: 0; font-size: 13px; color: var(--text); font-weight: 650; }
.crop-flow label { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.crop-flow input[type=range] { flex: 1; accent-color: var(--accent); }
.crop-flow-avatar {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  margin: 0 0 12px;
}
.profile-cover.cropping,
.avatar-edit.cropping { cursor: grab; touch-action: none; }
.profile-cover.cropping:active,
.avatar-edit.cropping:active { cursor: grabbing; }
.leagues-page h1 { letter-spacing: -0.04em; margin: 0 0 8px; }
.league-scale {
  list-style: none;
  margin: 22px 0 28px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.league-scale li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 14px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.league-scale em {
  font-style: normal;
  color: var(--faint);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.league-board {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.board-row {
  display: grid;
  grid-template-columns: 2.2rem 40px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: inherit;
  text-decoration: none;
}
.board-row:hover {
  border-color: var(--accent-line);
  color: inherit;
}
.board-rank {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--faint);
  font-size: 13px;
}
.board-row .avatar {
  width: 40px;
  height: 40px;
}
.board-who { min-width: 0; }
.board-who strong {
  display: flex;
  align-items: center;
  gap: 6px;
}
.board-who em {
  display: flex;
  align-items: center;
  gap: 8px;
  font-style: normal;
  color: var(--faint);
  font-size: 13px;
}
.board-usd {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  min-width: 4.5rem;
  text-align: right;
}
.rail-copy strong {
  display: inline-flex;
  align-items: center;
}
.verify-page .lede { max-width: 42rem; }
.verify-page { max-width: 42rem; }
.id-partner {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: start;
  padding: 14px 16px;
  margin: 18px 0 8px;
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  border-radius: var(--r-md);
}
.id-partner strong { display: block; margin-bottom: 4px; }
.id-partner p { margin: 0; color: var(--muted); font-size: .92rem; }
.id-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 18px 0 8px;
}
.id-pane {
  padding: 16px 16px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--raised);
}
.id-pane.didit { border-color: var(--accent-line); }
.id-pane h3 { margin: 0 0 8px; font-size: .95rem; }
.id-pane ul {
  margin: 0;
  padding: 0 0 0 1.1rem;
  color: var(--muted);
  font-size: .9rem;
}
.id-pane li { margin: 6px 0; }
.id-steps {
  list-style: none;
  padding: 0;
  margin: 8px 0 10px;
}
.id-steps li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.id-steps li:last-child { border-bottom: 0; }
.id-steps h2 {
  font-size: 1rem;
  margin: 2px 0 4px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.id-steps p { margin: 0; color: var(--muted); font-size: .92rem; }
.id-ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--link);
}
.id-ico svg { width: 20px; height: 20px; display: block; }
.id-wait {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px;
  margin: 8px 0 16px;
  border: 1px dashed var(--accent-line);
  border-radius: var(--r-md);
  background: var(--raised);
}
.id-wait[hidden] { display: none; }
.id-wait strong { display: block; margin-bottom: 4px; }
.id-wait p { margin: 0; color: var(--muted); font-size: .92rem; }
.id-actions { margin-top: 8px; }
.lock-note {
  font-size: 13px;
  color: var(--faint);
  margin: 4px 0 12px;
  max-width: 36rem;
}
input:read-only,
textarea:read-only {
  opacity: 0.78;
  cursor: not-allowed;
}
@media (max-width: 720px) {
  .league-scale { grid-template-columns: 1fr 1fr; }
  .board-row {
    grid-template-columns: 1.6rem 36px 1fr auto;
  }
  .id-split { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover { transform: none; }
}

/* Explore Page */
.explore-page { margin: 12px 0 36px; }
.search-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  max-width: 580px;
  margin: 18px 0 16px;
}
.search-input-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}
.search-input-wrap .search-icon,
.search-input-wrap > .luminight-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--faint);
  pointer-events: none;
  z-index: 2;
}
.search-input-wrap input {
  width: 100%;
  box-sizing: border-box;
  padding-left: 42px;
  padding-right: 36px;
}
.search-input-wrap .clear-search {
  position: absolute;
  right: 12px;
  color: var(--muted);
  text-decoration: none;
  font-size: 20px;
  line-height: 1;
  z-index: 2;
}
.explore-genres {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
}
.genre-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.2;
  transition: all .16s var(--ease);
}
.genre-chip img.luminight-icon {
  flex-shrink: 0;
}
.genre-chip:hover {
  color: var(--text);
  border-color: var(--line-strong);
  background: var(--raised);
}
.genre-chip.on {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}
.explore-item { list-style: none; }
.explore-item .creator-tile {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.tile-cover-link { display: block; text-decoration: none; }
.name-line-link { text-decoration: none; color: inherit; }
.name-line-link:hover { color: var(--accent); }
.tile-bio {
  padding: 0 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  margin: 0 0 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tile-actions {
  display: flex;
  gap: 8px;
  padding: 12px 16px 16px;
  margin-top: auto;
  border-top: 1px solid var(--line);
}
.tile-actions .btn { flex: 1; text-align: center; }

/* Messages / Chat */
.messages-page { max-width: 780px; margin: 12px auto 48px; }
.messages-shell {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  min-height: 520px;
}
.messages-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--raised);
}
.messages-user-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}
.messages-user-meta .avatar { width: 44px; height: 44px; }
.messages-user-info strong { display: block; font-size: 15px; color: var(--text); }
.messages-user-info em { font-style: normal; font-size: 13px; color: var(--muted); }
.messages-stream {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  min-height: 280px;
}
.msg-bubble {
  max-width: 80%;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
  position: relative;
  word-break: break-word;
}
.msg-bubble.me {
  align-self: flex-end;
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.msg-bubble.them {
  align-self: flex-start;
  background: var(--raised);
  border: 1px solid var(--line-strong);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.msg-time {
  display: block;
  font-size: 11px;
  margin-top: 4px;
  opacity: 0.72;
}
.msg-bubble.me .msg-time { text-align: right; }
.messages-input-row {
  display: flex;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.messages-input-row input { flex: 1; margin: 0; }
.locked-chat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  margin: auto;
  max-width: 440px;
}
.locked-chat-card .lock-icon {
  font-size: 48px;
  margin-bottom: 12px;
  filter: drop-shadow(0 4px 12px rgba(90, 155, 224, 0.4));
}
.locked-chat-card h2 { margin: 0 0 8px; font-size: 1.35rem; color: var(--text); }
.locked-chat-card p { margin: 0 0 24px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.messages-threads-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.thread-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  transition: background .14s var(--ease);
}
.thread-row:hover { background: var(--raised); color: inherit; }
.thread-row:last-child { border-bottom: none; }
.unread-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent, #6366f1);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  margin-left: 6px;
  vertical-align: middle;
}
.unread-dot.inline {
  width: 8px;
  min-width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  background: #10b981;
}
.thread-row.has-unread {
  background: rgba(90, 155, 224, 0.08);
}
.thread-row.has-unread strong {
  color: var(--accent);
}

/* Member Checkout & Simplified Creator Page */
.donate-grid.member-layout {
  display: flex;
  flex-direction: column;
  max-width: 680px;
  margin-inline: auto;
  gap: 20px;
}
.member-card {
  padding: 28px 28px 26px;
}
.member-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.member-head h2 {
  font-size: 1.5rem;
  margin: 2px 0 0;
}
.member-coin-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(233, 189, 104, 0.08);
  border: 1px solid rgba(233, 189, 104, 0.25);
  padding: 6px 12px;
  border-radius: 999px;
}
.coin-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text);
}
.coin-pill .coin-svg {
  filter: drop-shadow(0 0 6px var(--coin-glow));
}
.add-coins-btn {
  font-size: 12px;
  padding: 4px 10px;
  height: auto;
  min-height: 28px;
  border-radius: 999px;
  border-color: rgba(233, 189, 104, 0.4);
  color: var(--gold);
}
.add-coins-btn:hover {
  border-color: var(--gold);
  background: rgba(233, 189, 104, 0.14);
}
.member-coins-form {
  margin-top: 8px;
}
.member-send-btn {
  margin-top: 14px;
  width: 100%;
}
.member-empty-coins {
  text-align: center;
  padding: 24px 16px;
  background: var(--raised);
  border-radius: var(--r-md);
  border: 1px dashed var(--line-strong);
}
.member-empty-coins .btn {
  margin-top: 12px;
}
.gold-btn {
  background: linear-gradient(180deg, #F0CA7D, #D4A24A);
  color: #120e08 !important;
  font-weight: 700;
  border: none;
}
.gold-btn:hover {
  filter: brightness(1.08);
}

/* Send USD Collapsible Dropdown */
.send-usd-dropdown {
  margin-top: 24px;
  border-top: 1px solid var(--line-strong);
  padding-top: 18px;
}
.send-usd-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 18px;
  background: var(--raised);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  color: var(--muted);
  transition: all 0.2s var(--ease);
  list-style: none;
  user-select: none;
}
.send-usd-summary::-webkit-details-marker {
  display: none;
}
.send-usd-summary:hover {
  border-color: var(--accent-line);
  color: var(--text);
}
.send-usd-dropdown[open] .send-usd-summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent;
  color: var(--text);
  background: rgba(226, 236, 250, 0.05);
}
.dropdown-chevron {
  transition: transform 0.22s ease;
  color: var(--muted);
}
.send-usd-dropdown[open] .dropdown-chevron {
  transform: rotate(180deg);
  color: var(--text);
}
.dropdown-pane {
  background: var(--raised);
  border: 1px solid var(--line-strong);
  border-top: none;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  padding: 20px 20px 18px;
}

/* Recurring Payments Section */
.recurring-section {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line-strong);
}
.recurring-head {
  margin-bottom: 16px;
}
.recurring-head h3 {
  font-size: 1.25rem;
  margin: 2px 0 4px;
  letter-spacing: -0.02em;
  color: var(--text);
}
.recurring-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.recurring-card {
  aspect-ratio: 1 / 1;
  min-height: 124px;
  padding: 14px 10px;
  border-radius: 18px;
  border: 1px solid var(--line-strong);
  background: var(--raised);
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  transition: transform 0.18s var(--ease), border-color 0.18s, box-shadow 0.18s, background 0.18s;
  position: relative;
  user-select: none;
}
.recurring-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-line);
  box-shadow: var(--shadow-md);
  background: rgba(226, 236, 250, 0.04);
}
.recurring-card.on,
.recurring-card.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 2px var(--accent), 0 0 24px rgba(96, 165, 250, 0.35);
  transform: translateY(-2px);
}
.tier-img-wrap {
  width: 56px;
  height: 56px;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 8px;
  background: var(--raised);
  border: 1px solid var(--line-strong);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.tier-img-wrap.is-hidden,
.tier-coin.is-hidden {
  display: none !important;
}
.tier-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  display: block;
  transition: transform 0.25s var(--ease);
}
.recurring-card:hover .tier-card-img {
  transform: scale(1.06);
}
.tier-coin {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
  font-weight: 800;
  font-size: 17px;
  flex-shrink: 0;
}
.coin-inner {
  line-height: 1;
}
.coin-color-purple, .coin-color-0 {
  background: radial-gradient(circle at 35% 30%, #A855F7, #581C87);
  color: #FFFFFF;
  border: 2px solid #C084FC;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.42);
}
.coin-color-emerald, .coin-color-1 {
  background: radial-gradient(circle at 35% 30%, #34D399, #064E3B);
  color: #FFFFFF;
  border: 2px solid #6EE7B7;
  box-shadow: 0 0 14px rgba(52, 211, 153, 0.42);
}
.coin-color-gold, .coin-color-2 {
  background: radial-gradient(circle at 35% 30%, #FBBF24, #78350F);
  color: #120e08;
  border: 2px solid #FDE68A;
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.42);
}
.coin-color-3 {
  background: radial-gradient(circle at 35% 30%, #F43F5E, #881337);
  color: #FFFFFF;
  border: 2px solid #FDA4AF;
  box-shadow: 0 0 14px rgba(244, 63, 94, 0.42);
}
.tier-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 2px;
  line-height: 1.25;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.tier-amount {
  font-size: 15px;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: -0.02em;
}
.tier-freq {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  margin-top: 2px;
}

@media (max-width: 420px) {
  .recurring-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .recurring-card {
    min-height: 110px;
    padding: 10px 6px;
    border-radius: 14px;
  }
  .tier-img-wrap {
    width: 46px;
    height: 46px;
    margin-bottom: 6px;
  }
  .tier-title {
    font-size: 12px;
  }
  .tier-amount {
    font-size: 14px;
  }
}

/* Creator Studio Throne-Style Gift Editor */
.extra-studio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 640px) {
  .extra-studio-grid {
    grid-template-columns: 1fr;
  }
}
.extra-slot-card {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.extra-slot-card:hover {
  border-color: var(--line-strong);
}
.extra-thumb-box {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 150px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px dashed var(--line-strong);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.extra-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}
.extra-thumb-img.is-empty {
  display: none;
}
.extra-coin-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
}
.coin-fallback-hint {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.extra-coin-fallback.is-hidden {
  display: none !important;
}
.extra-thumb-overlay {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
  justify-content: center;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(8px);
  padding: 5px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.extra-thumb-overlay .btn {
  padding: 4px 10px;
  font-size: 0.78rem;
  height: 26px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.extra-remove-btn.is-hidden {
  display: none !important;
}
.extra-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.extra-fields .field {
  margin: 0;
}
.extra-fields label {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 3px;
  display: block;
}
.extra-fields input {
  width: 100%;
  padding: 7px 10px;
  font-size: 0.88rem;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
}
.studio-recurring-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.studio-recurring-grid .recurring-card {
  min-height: 140px;
  padding: 10px 8px;
}

/* Payment Rail Header & Dark Container */
.pay-options-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 14px;
  margin-bottom: 6px;
  padding: 10px 14px;
  background: rgba(226, 236, 250, 0.04);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
}
.pay-header-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.pay-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.pay-badges img {
  height: 18px;
  width: auto;
  opacity: 0.92;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}
.paypal-btn {
  min-height: 48px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--raised);
  padding: 2px;
  margin-top: 4px;
}
.paypal-btn iframe {
  border-radius: 12px !important;
}

/* ==========================================================================
   Rory Obsidian Card Management & IPC / PCI-DSS Checkout System
   ========================================================================== */

.checkout-stage {
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: stageFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes stageFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.commit-next-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  font-size: 15.5px;
  font-weight: 600;
  padding: 13px 20px;
  border-radius: 12px;
  cursor: pointer;
  background: linear-gradient(180deg, #b8860b 0%, #8b6508 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 16px rgba(184, 134, 11, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  margin-top: 4px;
}

.commit-next-btn:hover {
  background: linear-gradient(180deg, #c99616 0%, #9e730a 100%);
  box-shadow: 0 6px 20px rgba(184, 134, 11, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

.commit-next-btn svg {
  transition: transform 0.2s ease;
}

.commit-next-btn:hover svg {
  transform: translateX(2px);
}

.committed-summary-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  margin-bottom: 2px;
}

.committed-summary-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #fff;
  flex-wrap: wrap;
}

.committed-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(184, 134, 11, 0.25);
  border: 1px solid rgba(184, 134, 11, 0.4);
  color: #e5be5a;
}

.committed-sum-amt {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

.committed-sum-to {
  color: var(--muted);
  font-size: 13px;
}

.edit-amt-btn {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: all 0.15s ease;
}

.edit-amt-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.sso-btn.passkey {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
}

.sso-btn.passkey:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.24);
}

.pay-method-nav {
  display: flex;
  background: rgba(10, 13, 20, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
  margin-top: 14px;
  margin-bottom: 12px;
}

.pay-nav-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.pay-nav-tab:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
}

.pay-nav-tab.active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.pay-nav-tab svg {
  flex-shrink: 0;
}

.rory-card-box {
  background: linear-gradient(180deg, rgba(22, 27, 39, 0.85) 0%, rgba(13, 16, 25, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  gap: 12px;
}

.card-field-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.card-field-group label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.card-brand-tag {
  display: inline-flex;
  align-items: center;
  height: 18px;
}

.brand-badge-icon {
  height: 18px;
  width: auto;
  border-radius: 3px;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

.card-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.card-input-wrap input {
  width: 100%;
  padding-right: 36px;
}

.card-valid-indicator {
  position: absolute;
  right: 12px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
  pointer-events: none;
  transition: all 0.2s ease;
}

.card-valid-indicator.valid {
  background: #10b981;
  color: #fff;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

.card-row-split {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 10px;
}

@media (max-width: 480px) {
  .card-row-split {
    grid-template-columns: 1fr 1fr;
  }
  .card-row-split .card-field-group:last-child {
    grid-column: span 2;
  }
}

.card-cvv-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.6);
  font-size: 10px;
  cursor: help;
  vertical-align: middle;
}

.card-security-badge {
  background: rgba(14, 20, 32, 0.85);
  border: 1px solid rgba(184, 134, 11, 0.22);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 4px 0 2px;
}

.security-badge-header {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #d4af37;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.security-badge-text {
  font-size: 11px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.52);
  margin-top: 4px;
  margin-bottom: 0;
}

.card-status-msg {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
}

.card-status-msg.err {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #fca5a5;
}

.card-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  font-size: 15px;
  font-weight: 600;
  padding: 13px 20px;
  border-radius: 11px;
  cursor: pointer;
  background: linear-gradient(180deg, #b8860b 0%, #8b6508 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 16px rgba(184, 134, 11, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-submit-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #c99616 0%, #9e730a 100%);
  box-shadow: 0 6px 20px rgba(184, 134, 11, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

.card-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.spinner-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Passkey Login Button */
.passkey-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: all 0.18s ease;
  margin-bottom: 8px;
}

.passkey-login-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.06) 100%);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 12px 0 14px;
  color: rgba(255, 255, 255, 0.36);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.auth-divider span {
  padding: 0 10px;
}

/* ==========================================================================
   Central Dedicated Checkout Flow
   ========================================================================== */

.checkout-page-wrap {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}

.checkout-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

@media (min-width: 840px) {
  .checkout-container {
    grid-template-columns: 360px 1fr;
    gap: 36px;
    align-items: start;
  }
}

.checkout-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 20px;
  transition: color 0.15s ease;
}

.checkout-back-link:hover {
  color: #fff;
}

.checkout-recipient-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  margin-bottom: 20px;
}

.recipient-avatar-wrap {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.14);
  flex-shrink: 0;
}

.recipient-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recipient-kicker {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 2px;
}

.recipient-name {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.recipient-slug {
  font-size: 13px;
  color: var(--muted);
}

.checkout-order-card {
  padding: 20px;
  background: rgba(14, 18, 27, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  margin-bottom: 20px;
}

.order-summary-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 0 0 16px;
}

.order-line-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  margin-bottom: 16px;
}

.item-name {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}

.item-note {
  font-size: 13px;
  font-style: italic;
  color: var(--muted);
  margin: 6px 0 0;
}

.item-price {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

.order-breakdown {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.breakdown-row {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  color: var(--muted);
}

.fee-free {
  color: var(--accent, #5A9BE0);
  font-weight: 600;
}

.breakdown-row.total-row {
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
  margin-top: 4px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

.total-amount {
  font-size: 22px;
  color: #E9BD68;
}

/* Trust Box (Consumer Brags Only) */
.checkout-trust-box {
  padding: 16px;
  background: rgba(90, 155, 224, 0.05);
  border: 1px solid rgba(90, 155, 224, 0.2);
  border-radius: 14px;
}

.trust-box-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #fff;
  margin-bottom: 6px;
}

.trust-box-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.45;
  margin: 0 0 12px;
}

.trust-badge-icons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.trust-badge-icons img {
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Right Column */
.checkout-pay-card {
  padding: 24px;
  background: rgba(14, 18, 27, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

.checkout-heading {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 20px;
}

/* Guest Checkout Upsell Banner */
.checkout-member-perk-banner {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.09) 0%, rgba(56, 189, 248, 0.05) 100%);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 22px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.perk-banner-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.perk-banner-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.perk-banner-copy strong {
  display: block;
  font-size: 14.5px;
  font-weight: 750;
  color: #FBBF24;
  margin-bottom: 4px;
}

.perk-banner-copy p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #CBD5E1;
}

.perk-banner-copy p strong {
  display: inline;
  color: #FFFFFF;
}

.perk-banner-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.perk-btn-link {
  color: #38BDF8;
  text-decoration: none;
  font-weight: 650;
  transition: color 0.15s ease;
}

.perk-btn-link:hover {
  color: #7DD3FC;
  text-decoration: underline;
}

.perk-btn-gold {
  color: #F59E0B;
}

.perk-btn-gold:hover {
  color: #FBBF24;
}

.perk-divider {
  color: rgba(255, 255, 255, 0.3);
}

/* Saved Cards Selector */
.saved-cards-section {
  margin-bottom: 20px;
}

.section-label {
  font-size: 13px;
  font-weight: 650;
  color: var(--muted);
  margin: 0 0 10px;
}

.saved-cards-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.saved-card-radio {
  display: block;
  cursor: pointer;
}

.saved-card-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.saved-card-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  transition: all 0.18s ease;
}

.saved-card-radio:hover .saved-card-inner {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}

.saved-card-radio.selected .saved-card-inner {
  background: rgba(233, 189, 104, 0.08);
  border-color: #E9BD68;
  box-shadow: 0 0 0 1px #E9BD68;
}

.saved-card-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.saved-card-num {
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.02em;
}

.saved-card-exp {
  font-size: 12px;
  color: var(--muted);
}

.saved-default-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(233, 189, 104, 0.2);
  color: #E9BD68;
}

.new-card-option .saved-card-inner {
  border-style: dashed;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
}

.new-card-option.selected .saved-card-inner {
  color: #fff;
}

.saved-card-action-bar {
  margin-top: 16px;
}

.save-card-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  margin: 6px 0 14px;
}

.save-card-toggle input {
  cursor: pointer;
  accent-color: #E9BD68;
}

.checkout-submit-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 12px;
  background: linear-gradient(180deg, #F0CA7A 0%, #D4A346 100%);
  color: #120e08;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(212, 163, 70, 0.35);
  transition: all 0.18s ease;
}

.checkout-submit-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(212, 163, 70, 0.45);
}

.checkout-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Wallet Saved Cards & Full Wallet Suite */
.wallet-hero-card {
  background: radial-gradient(130% 100% at 100% 0%, rgba(245, 158, 11, 0.15) 0%, rgba(17, 24, 39, 0.95) 100%);
  border: 1px solid rgba(245, 158, 11, 0.25);
  padding: 28px;
  border-radius: 16px;
  margin-bottom: 24px;
}

.hero-balance-content {
  margin-bottom: 20px;
}

.balance-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.gold-coin-pill {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  background: rgba(245, 158, 11, 0.2);
  color: #FBBF24;
  border-radius: 999px;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.hero-action-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.wallet-section {
  margin-bottom: 24px;
}

.section-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}

.empty-cards-box {
  text-align: center;
  padding: 32px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 12px;
}

.empty-cards-box svg {
  margin-bottom: 10px;
}

.wallet-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.wallet-card-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  transition: border-color 0.15s ease;
}

.wallet-card-item.is-default-card {
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.03);
}

.wallet-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.card-brand-badge {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}

.card-brand-badge.brand-visa {
  background: #1A1F71;
  color: #FFFFFF;
}

.card-brand-badge.brand-mastercard {
  background: #EB001B;
  color: #FF5F00;
}

.card-brand-badge.brand-amex {
  background: #006FCF;
  color: #FFFFFF;
}

.card-digits-block {
  display: flex;
  flex-direction: column;
}

.card-digits-block strong {
  font-size: 0.92rem;
  color: #F8FAFC;
}

.card-digits-block .muted {
  font-size: 0.76rem;
  color: #64748B;
}

.wallet-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.saved-default-badge {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 7px;
  background: rgba(16, 185, 129, 0.2);
  color: #34D399;
  border-radius: 999px;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

/* Statement Header & Filter Pills */
.statement-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 20px;
  gap: 16px;
  flex-wrap: wrap;
}

.ledger-filter-pills {
  display: flex;
  background: rgba(255, 255, 255, 0.04);
  padding: 3px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  gap: 2px;
}

.filter-pill {
  background: none;
  border: none;
  color: #94A3B8;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.filter-pill.active {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}

.filter-pill:hover:not(.active) {
  color: #E2E8F0;
}

/* Statement Table */
.statement-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.statement-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.88rem;
}

.statement-table th {
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  color: #64748B;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.statement-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: middle;
}

.statement-table tr:last-child td {
  border-bottom: none;
}

.statement-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

.tx-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
}

.recharge-badge {
  background: rgba(16, 185, 129, 0.15);
  color: #34D399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.support-badge {
  background: rgba(168, 85, 247, 0.15);
  color: #C084FC;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.desc-cell strong {
  display: block;
  color: #F8FAFC;
  font-size: 0.9rem;
}

.creator-slug-link {
  color: #60A5FA;
  font-size: 0.8rem;
  text-decoration: none;
}

.creator-slug-link:hover {
  text-decoration: underline;
}

.row-msg-preview {
  font-size: 0.78rem;
  color: #94A3B8;
  margin: 3px 0 0;
  font-style: italic;
}

.amt-cell {
  white-space: nowrap;
}

.amt-cell .num {
  font-size: 0.95rem;
  font-weight: 700;
  font-feature-settings: "tnum";
}

.amt-cell .spend-text {
  color: #E2E8F0;
}

.amt-cell .usd-sub {
  font-size: 0.78rem;
  color: #64748B;
  margin-left: 4px;
}

/* Modals Shared Overlay */
.wallet-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

html:has(body.modal-open),
body.modal-open {
  overflow: hidden !important;
  height: 100% !important;
}

.wallet-modal-overlay {
  overscroll-behavior: contain;
}

.wallet-modal-card {
  background: #111827;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.65);
  overflow: hidden;
  margin: 0 auto;
  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
  animation: modalPop 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.wallet-modal-scroll-body {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  overscroll-behavior: contain;
}

@keyframes modalPop {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.modal-header {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.modal-header h3 {
  margin: 0 0 4px;
  font-size: 1.15rem;
  color: #FFFFFF;
}

.modal-header p {
  margin: 0;
  font-size: 0.82rem;
  color: #94A3B8;
}

.modal-close-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #94A3B8;
  cursor: pointer;
  padding: 6px;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}

/* Re-Up Modal Specifics */
.reup-packages-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 10px;
  padding: 20px 24px 14px;
}

.reup-pack-option {
  position: relative;
  overflow: visible;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px 12px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.reup-pack-option:hover {
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.04);
}

.reup-pack-option.selected {
  border-color: #F59E0B;
  background: rgba(245, 158, 11, 0.1);
  box-shadow: 0 0 0 1px #F59E0B inset;
}

.reup-pack-option:focus-visible {
  outline: 2px solid #F59E0B;
  outline-offset: 2px;
}

.reup-pack-option .pack-title {
  font-size: 0.94rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 2px;
  display: block;
  line-height: 1.25;
}

.reup-pack-option .pack-coins-amt {
  font-size: 0.82rem;
  color: #FBBF24;
  font-weight: 600;
  margin-bottom: 6px;
}

.reup-pack-option .pack-price-tag {
  font-size: 1.05rem;
  font-weight: 800;
  color: #FFFFFF;
}

.reup-pack-option .pack-badge-bonus {
  position: absolute;
  top: -9px;
  right: 10px;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #F59E0B, #D97706);
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.2);
  z-index: 2;
  white-space: nowrap;
  pointer-events: none;
}

.reup-payment-selector {
  padding: 0 24px 16px;
}

.reup-payment-selector h4 {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748B;
  margin: 0 0 10px;
}

.reup-card-picks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.reup-card-radio {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.reup-card-radio:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
}

.reup-card-radio.selected-radio {
  border-color: #3B82F6;
  background: rgba(59, 130, 246, 0.08);
  box-shadow: 0 0 0 1px #3B82F6 inset;
}

.reup-card-radio input {
  margin: 0;
  cursor: pointer;
}

.radio-card-body {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: #E2E8F0;
  flex: 1;
}

.card-brand-tag {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}

.new-card-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  background: rgba(255, 255, 255, 0.02);
  padding: 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.card-field-wrap {
  position: relative;
}

.card-input-with-brand {
  position: relative;
  display: flex;
  align-items: center;
}

.card-input-with-brand input {
  padding-right: 68px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: 0.04em;
}

.card-brand-indicator {
  position: absolute;
  right: 10px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 3px 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: #94A3B8;
  text-transform: uppercase;
  transition: all 0.15s ease;
  pointer-events: none;
}

.card-brand-indicator.brand-visa {
  background: #1A1F71;
  color: #FFFFFF;
}

.card-brand-indicator.brand-mastercard {
  background: #EB001B;
  color: #FFFFFF;
}

.card-brand-indicator.brand-amex {
  background: #006FCF;
  color: #FFFFFF;
}

.card-brand-indicator.brand-discover {
  background: #FF6600;
  color: #FFFFFF;
}

.reup-input-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94A3B8;
  margin: 0 0 4px;
}

.new-card-fields input[type="text"] {
  padding: 10px 12px;
  font-size: 0.9rem;
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input-error {
  border-color: #EF4444 !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25) !important;
}

.reup-footer {
  flex-shrink: 0;
  padding: 16px 24px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: #111827;
}

.reup-feedback {
  font-size: 0.82rem;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 12px;
  text-align: center;
  line-height: 1.4;
}

.reup-feedback.error {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #FCA5A5;
}

.reup-feedback.success {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #6EE7B7;
}

/* Digital Receipt Modal Specifics */
.receipt-card {
  max-width: 440px;
}

.receipt-header {
  background: radial-gradient(100% 100% at 50% 0%, rgba(59, 130, 246, 0.12) 0%, rgba(17, 24, 39, 1) 100%);
  padding: 24px 24px 18px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
  text-align: center;
}

.receipt-brand-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.receipt-rory-logo {
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #FFFFFF;
}

.receipt-status-tag {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  background: rgba(16, 185, 129, 0.2);
  color: #34D399;
  border-radius: 4px;
}

.receipt-kicker {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748B;
  margin: 0 0 4px;
}

.receipt-header h3 {
  margin: 0 0 4px;
  font-size: 1.25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #60A5FA;
}

.receipt-date {
  font-size: 0.78rem;
  color: #94A3B8;
  margin: 0;
}

.receipt-body {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.receipt-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.86rem;
}

.receipt-row span {
  color: #94A3B8;
}

.receipt-row strong {
  color: #F8FAFC;
}

.receipt-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 4px 0;
}

.receipt-row.total-row strong {
  font-size: 1rem;
  font-feature-settings: "tnum";
}

.receipt-security-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 24px 16px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  font-size: 0.72rem;
  color: #64748B;
}

.receipt-footer-row {
  display: flex;
  justify-content: space-between;
  padding: 16px 24px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Express Checkout Apple Pay Button */
.express-checkout-wrap {
  margin: 6px 0 20px;
}

.express-checkout-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 8px;
}

.apple-pay-express-btn {
  width: 100% !important;
  height: 48px !important;
  background: #000000 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: not-allowed !important;
  opacity: 0.45 !important;
  filter: grayscale(30%) !important;
  transition: all 0.2s ease;
  box-sizing: border-box !important;
  padding: 0 16px !important;
}

.apple-pay-inner {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.apple-pay-inner svg {
  display: block;
}

.apple-pay-text {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

.apple-pay-soon-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
  padding: 3px 8px;
  border-radius: 999px;
  margin-left: 6px;
}

.express-or-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 14px 0 10px;
  color: var(--muted);
  font-size: 12px;
}

.express-or-divider::before,
.express-or-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.express-or-divider span {
  padding: 0 12px;
}

/* Apple Pay Nav Tab */
.pay-nav-tab.disabled-tab {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

.pay-tab-soon-pill {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  padding: 1px 5px;
  border-radius: 999px;
  margin-left: 4px;
}

.pack-soon-pill {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.12);
  padding: 1px 5px;
  border-radius: 999px;
}

/* Settings Pages */
.creator-settings-page,
.fan-settings-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}
.settings-header {
  margin-bottom: 28px;
}
.settings-sections-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.settings-card {
  padding: 24px 28px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.settings-card-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}
.settings-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent, #63a4ff);
  flex-shrink: 0;
}
.settings-icon.plus-icon {
  color: #F5A623;
  background: rgba(245, 166, 35, 0.1);
}
.settings-balance-strip {
  display: flex;
  gap: 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  padding: 16px 20px;
  border-radius: 12px;
  margin-bottom: 20px;
}
.balance-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.balance-label {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.balance-val {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
}
.balance-val.pending-val {
  color: #F5A623;
}
.settings-policy-box {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 20px;
}
.settings-policy-box h3 {
  font-size: 15px;
  margin: 0 0 12px;
  color: var(--text);
}
.policy-list {
  list-style: disc;
  padding-left: 20px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}
.policy-list strong {
  color: var(--text);
}
.settings-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 16px;
}
.settings-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: 16px;
}
.rory-plus-highlight {
  border-color: rgba(245, 166, 35, 0.3);
  background: linear-gradient(180deg, rgba(245, 166, 35, 0.04) 0%, var(--surface) 100%);
}

/* Fan Settings Layout */
.fan-settings-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
}
@media (max-width: 820px) {
  .fan-settings-grid {
    grid-template-columns: 1fr;
  }
}
.fan-settings-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.handle-input-wrap {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.handle-prefix {
  padding: 0 12px;
  color: var(--muted);
  font-weight: 700;
  font-size: 16px;
}
.handle-input-wrap input {
  border: none !important;
  background: transparent !important;
  padding-left: 0 !important;
}
.disabled-input {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Thank You Screen Enhancements */
.account-welcome-box {
  background: linear-gradient(135deg, rgba(74, 144, 226, 0.12) 0%, rgba(99, 164, 255, 0.04) 100%);
  border: 1px solid rgba(99, 164, 255, 0.25);
  border-radius: 14px;
  padding: 20px;
  margin: 20px 0;
  text-align: left;
}
.welcome-badge-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(99, 164, 255, 0.2);
  color: #82b6ff;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.account-welcome-box h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: #fff;
}
.account-welcome-desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 16px;
}
.welcome-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.coins-incentive-box {
  background: linear-gradient(135deg, rgba(245, 166, 35, 0.1) 0%, rgba(245, 166, 35, 0.02) 100%);
  border: 1px solid rgba(245, 166, 35, 0.25);
  border-radius: 14px;
  padding: 20px;
  margin: 20px 0;
  text-align: left;
}
.coins-incentive-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: #F5A623;
  font-size: 16px;
}
.coins-incentive-text {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 16px;
}
.gold-btn {
  background: #F5A623 !important;
  color: #111 !important;
  font-weight: 700 !important;
}
.gold-btn:hover {
  background: #e59a1f !important;
}

/* ==========================================================================
   Luxury Thank You & Payment Confirmation Screen
   ========================================================================== */
.thanks-screen-wrap {
  position: relative;
  max-width: 580px;
  margin: 36px auto 72px;
  padding: 0 16px;
}

.thanks-card-glow {
  position: absolute;
  top: 6%;
  left: 50%;
  transform: translateX(-50%);
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.2) 0%, rgba(99, 102, 241, 0.1) 45%, transparent 70%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
}

.thanks-card {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, rgba(22, 30, 49, 0.9) 0%, rgba(13, 19, 33, 0.97) 100%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 32px 80px -16px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.04);
  border-radius: 28px;
  padding: 40px 36px 36px;
  text-align: center;
}

/* Hero Check Icon */
.thanks-hero-icon-wrap {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.thanks-icon-glow {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(233, 189, 104, 0.35) 0%, transparent 70%);
  animation: thanks-pulse 3s ease-in-out infinite;
}

.thanks-hero-icon {
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFDF70 0%, #D49B28 100%);
  box-shadow: 0 12px 28px -4px rgba(233, 189, 104, 0.45), inset 0 2px 4px rgba(255, 255, 255, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #120e08;
  animation: thanks-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes thanks-pop {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes thanks-pulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.18); opacity: 0.9; }
}

/* Status Pill */
.thanks-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(233, 189, 104, 0.12);
  border: 1px solid rgba(233, 189, 104, 0.3);
  color: #E9BD68;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 9999px;
  margin-bottom: 12px;
}

.thanks-status-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #E9BD68;
  box-shadow: 0 0 6px #E9BD68;
}

/* Title & Amount */
.thanks-title {
  font-size: 1.85rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 6px;
  letter-spacing: -0.025em;
}

.thanks-amount-display {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin: 10px 0 14px;
}

.thanks-amount-val {
  font-size: 2.85rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  background: linear-gradient(180deg, #FFFFFF 30%, #CBD5E1 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.thanks-amount-currency {
  font-size: 1.1rem;
  font-weight: 700;
  color: #94A3B8;
  letter-spacing: 0.02em;
}

.thanks-recipient-bar {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 6px 16px;
  border-radius: 9999px;
  color: var(--muted);
  font-size: 0.92rem;
  margin-bottom: 24px;
  max-width: 100%;
}

.thanks-creator-pill {
  color: var(--text);
  white-space: nowrap;
}

.thanks-creator-pill strong {
  color: #ffffff;
}

/* Ticket Details Box */
.thanks-ticket-box {
  background: rgba(10, 15, 28, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  padding: 16px 20px;
  margin-bottom: 20px;
  text-align: left;
}

.thanks-ticket-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.thanks-ticket-row:last-child {
  border-bottom: none;
}

.thanks-ticket-label {
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.thanks-ticket-value {
  color: var(--text);
  font-weight: 600;
  font-size: 0.9rem;
  text-align: right;
  word-break: break-word;
}

/* Quote & Creator Note Cards */
.thanks-msg-card {
  background: rgba(30, 41, 59, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 18px;
  text-align: left;
}

.thanks-msg-label {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 4px;
}

.thanks-msg-quote {
  font-size: 0.95rem;
  color: var(--text);
  font-style: italic;
  line-height: 1.45;
  margin: 0;
}

.thanks-creator-note {
  background: rgba(245, 166, 35, 0.06);
  border: 1px solid rgba(245, 166, 35, 0.2);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 20px;
  text-align: left;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.thanks-creator-note-icon {
  flex-shrink: 0;
  color: #F5A623;
  margin-top: 2px;
}

.thanks-creator-note-text {
  font-size: 0.92rem;
  color: #F1F5FB;
  line-height: 1.45;
}

/* Account Welcome Box */
.thanks-account-box {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.14) 0%, rgba(139, 92, 246, 0.05) 100%);
  border: 1px solid rgba(129, 140, 248, 0.28);
  border-radius: 20px;
  padding: 22px 24px;
  margin-bottom: 20px;
  text-align: left;
  box-shadow: 0 12px 28px -6px rgba(99, 102, 241, 0.15);
}

.thanks-account-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.thanks-account-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(129, 140, 248, 0.2);
  color: #A5B4FC;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.thanks-account-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 6px;
}

.thanks-account-desc {
  font-size: 0.9rem;
  color: #CBD5E1;
  line-height: 1.5;
  margin: 0 0 16px;
}

.thanks-account-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.thanks-account-actions .btn {
  font-size: 0.92rem;
  padding: 10px 18px;
  border-radius: 10px;
}

/* Coins Incentive Box */
.thanks-coins-box {
  background: linear-gradient(135deg, rgba(245, 166, 35, 0.12) 0%, rgba(251, 191, 36, 0.03) 100%);
  border: 1px solid rgba(245, 166, 35, 0.28);
  border-radius: 20px;
  padding: 22px 24px;
  margin-bottom: 24px;
  text-align: left;
  box-shadow: 0 12px 28px -6px rgba(245, 166, 35, 0.12);
  position: relative;
  overflow: hidden;
}

.thanks-coins-box::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(245, 166, 35, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.thanks-coins-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.thanks-coins-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(245, 166, 35, 0.2);
  border: 1px solid rgba(245, 166, 35, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.thanks-coins-title {
  font-size: 1.08rem;
  font-weight: 700;
  color: #F8FAFC;
  margin: 0;
}

.thanks-coins-desc {
  font-size: 0.88rem;
  color: #94A3B8;
  line-height: 1.45;
  margin: 0 0 16px;
}

.thanks-coins-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, #F5A623 0%, #D97706 100%);
  color: #0B0F19;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 10px 20px;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(245, 166, 35, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  text-decoration: none;
}

.thanks-coins-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(245, 166, 35, 0.45);
}

.thanks-fine-text {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0 0 20px;
}

/* Footer Action Buttons */
.thanks-actions-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.thanks-actions-row .btn {
  min-width: 180px;
}

@media (max-width: 640px) {
  .thanks-card {
    padding: 32px 20px 28px;
    border-radius: 22px;
  }
  .thanks-amount-val {
    font-size: 2.35rem;
  }
  .thanks-actions-row .btn {
    width: 100%;
  }
}

/* ==========================================================================
   TELEGRAM-STYLE MESSAGING & RORY+ CREATOR FEATURES (NATIVE POLISHED DESKTOP)
   ========================================================================== */

/* Full-bleed Native Chat Viewport */
html:has(body.chat-body-viewport) {
  height: 100%;
  overflow: hidden !important;
}

body.chat-body-viewport,
body:has(.chat-page) {
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

body.chat-body-viewport .sandbox,
body.chat-body-viewport header.top {
  flex-shrink: 0 !important;
}

body.chat-body-viewport main.wrap,
body:has(.chat-page) main.wrap {
  flex: 1 1 0px !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  padding: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

body.chat-body-viewport > footer,
body:has(.chat-page) > footer {
  display: none !important;
}

.chat-page {
  flex: 1 1 0px !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.chat-shell {
  display: flex !important;
  flex: 1 1 0px !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  width: 100% !important;
  background: #0E1621 !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  box-shadow: none !important;
  position: relative !important;
}

/* Left Sidebar: Conversations & Contacts */
.chat-sidebar {
  width: 330px;
  min-width: 280px;
  max-width: 400px;
  background: #17212B;
  border-right: 1px solid #0E1621;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: 100%;
  overflow: hidden;
}

.chat-sidebar-head {
  padding: 12px 14px 10px;
  border-bottom: 1px solid #10161E;
  flex-shrink: 0;
}

.chat-sidebar-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.chat-sidebar-title-row h2 {
  font-size: 1.22rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
  letter-spacing: -0.01em;
}

.chat-header-action-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: #708499;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.chat-header-action-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}

.chat-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.chat-search-wrap svg {
  position: absolute;
  left: 12px;
  color: #708499;
  pointer-events: none;
}

.chat-search-wrap input {
  width: 100%;
  padding: 7px 12px 7px 34px;
  background: #242F3D;
  border: 1px solid transparent;
  border-radius: 18px;
  color: #FFFFFF;
  font-size: 0.86rem;
  transition: all 0.15s ease;
}

.chat-search-wrap input:focus {
  outline: none;
  background: #242F3D;
  border-color: #2B5278;
}

.chat-search-wrap input::placeholder {
  color: #708499;
}

/* Native Segmented Control */
.chat-segmented-control {
  display: flex;
  background: #0E1621;
  padding: 2px;
  border-radius: 8px;
  gap: 2px;
}

.segment-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: #7F91A4;
  font-size: 0.76rem;
  font-weight: 500;
  padding: 5px 0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}

.segment-btn:hover {
  color: #FFFFFF;
}

.segment-btn.active {
  background: #242F3D;
  color: #FFFFFF;
  font-weight: 600;
}

.chat-thread-list {
  flex: 1 1 0px;
  min-height: 0;
  height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 0;
}

.chat-thread-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 0;
  text-decoration: none;
  color: inherit;
  transition: background 0.12s ease;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}

.chat-thread-item:hover {
  background: #202B36;
}

.chat-thread-item.active {
  background: #2B5278;
}

.chat-thread-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.chat-thread-avatar-wrap .avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.chat-unread-badge {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #40B2FF;
  border: 2px solid #17212B;
}

.chat-thread-info {
  flex: 1;
  min-width: 0;
}

.chat-thread-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 3px;
}

.chat-thread-name {
  font-weight: 600;
  font-size: 0.92rem;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 4px;
}

.supporter-star {
  color: #F5A623;
  font-size: 0.8rem;
}

.chat-thread-time {
  font-size: 0.72rem;
  color: #708499;
  flex-shrink: 0;
}

.chat-thread-item.active .chat-thread-time {
  color: #A2B9D0;
}

.chat-thread-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.chat-thread-snippet {
  font-size: 0.82rem;
  color: #7F91A4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-thread-item.active .chat-thread-snippet {
  color: #C0D3E5;
}

.snippet-media {
  color: #40B2FF;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.chat-thread-item.active .snippet-media {
  color: #FFFFFF;
}

.thread-supporter-amount {
  font-size: 0.74rem;
  font-weight: 600;
  color: #F5A623;
  opacity: 0.9;
  flex-shrink: 0;
}

.chat-empty-threads {
  padding: 48px 20px;
  text-align: center;
  color: #708499;
}

.empty-plane-icon {
  margin-bottom: 12px;
  color: #40B2FF;
  opacity: 0.8;
}

.chat-empty-threads p {
  font-weight: 600;
  color: #CBD5E1;
  margin: 0 0 4px;
  font-size: 0.95rem;
}

.chat-empty-threads span {
  font-size: 0.82rem;
  line-height: 1.4;
  display: block;
}

/* Right Main Chat Pane */
.chat-main {
  flex: 1 1 0px !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  background: #0E1621;
  position: relative;
}

/* Native Header */
.chat-header {
  height: 56px;
  padding: 0 18px;
  background: #17212B;
  border-bottom: 1px solid #10161E;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.chat-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.chat-back-btn {
  display: none;
  background: none;
  border: none;
  color: #708499;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
}

.chat-back-btn:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.08);
}

.chat-target-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  display: block;
}

.chat-target-avatar-wrap .avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.chat-online-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #10B981;
  border: 2px solid #17212B;
}

.chat-target-meta {
  min-width: 0;
}

.chat-target-title {
  display: flex;
  align-items: center;
  gap: 5px;
}

.chat-target-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: #FFFFFF;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-target-name:hover {
  text-decoration: underline;
}

.chat-target-status {
  font-size: 0.75rem;
  margin-top: 1px;
}

.chat-status-text {
  color: #708499;
  font-weight: 400;
}

.chat-supporter-text {
  color: #F5A623;
  font-weight: 600;
}

.chat-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-header-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: #708499;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
}

.chat-header-icon-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}

/* Creator Setup Drawer */
.creator-setup-drawer {
  background: #17212B;
  border-bottom: 1px solid #10161E;
  padding: 16px 20px;
  animation: drawerSlideDown 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 25;
}

@keyframes drawerSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.creator-setup-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.creator-setup-header h3 {
  font-size: 0.96rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 2px;
}

.creator-setup-header p {
  font-size: 0.78rem;
  color: #708499;
  margin: 0;
}

.close-setup-btn {
  background: none;
  border: none;
  color: #708499;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 4px;
  transition: color 0.15s ease;
}

.close-setup-btn:hover {
  color: #FFFFFF;
}

.setup-field-group {
  margin-bottom: 12px;
}

.toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.toggle-row input {
  display: none;
}

.toggle-slider {
  width: 36px;
  height: 20px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
  position: relative;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.toggle-slider::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #FFFFFF;
  border-radius: 50%;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-row input:checked + .toggle-slider {
  background: #10B981;
}

.toggle-row input:checked + .toggle-slider::before {
  transform: translateX(16px);
}

.toggle-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.toggle-label strong {
  font-size: 0.88rem;
  color: #F8FAFC;
}

.toggle-label .muted {
  font-size: 0.76rem;
  color: #708499;
}

.setup-subfield {
  margin-top: 8px;
  padding-left: 48px;
}

.setup-subfield label {
  display: block;
  font-size: 0.78rem;
  color: #94A3B8;
  margin-bottom: 4px;
}

.setup-subfield textarea {
  width: 100%;
  padding: 8px 10px;
  background: #242F3D;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 0.85rem;
  line-height: 1.4;
  resize: vertical;
}

.setup-subfield textarea:focus {
  outline: none;
  border-color: #2B5278;
}

.welcome-templates-bar {
  margin-bottom: 8px;
}

.welcome-templates-bar .template-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #708499;
  margin-bottom: 4px;
}

.template-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.template-chip {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #CBD5E1;
  font-size: 0.76rem;
  padding: 3px 10px;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.template-chip:hover {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.4);
  color: #34D399;
}

.welcome-textarea-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.welcome-textarea-header label {
  margin-bottom: 0 !important;
}

.welcome-textarea-header .char-count {
  font-size: 0.72rem;
  color: #64748B;
  font-feature-settings: "tnum";
}

.welcome-preview-box {
  margin-top: 10px;
  background: rgba(14, 22, 33, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px 12px;
}

.preview-box-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.preview-pill {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  background: rgba(43, 82, 120, 0.4);
  color: #60A5FA;
  border-radius: 4px;
}

.preview-sample-target {
  font-size: 0.72rem;
  color: #64748B;
}

.welcome-preview-box .preview-bubble {
  font-size: 0.82rem;
  line-height: 1.45;
  color: #E2E8F0;
  background: #2B5278;
  padding: 8px 12px;
  border-radius: 12px 12px 12px 2px;
  display: inline-block;
  max-width: 90%;
  word-break: break-word;
}

.setup-btn-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

/* Chat Stream */
.chat-stream {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior-y: contain;
  padding: 16px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #0E1621;
}

/* Custom Scrollbars */
.chat-stream::-webkit-scrollbar,
.chat-thread-list::-webkit-scrollbar {
  width: 5px;
}

.chat-stream::-webkit-scrollbar-track,
.chat-thread-list::-webkit-scrollbar-track {
  background: transparent;
}

.chat-stream::-webkit-scrollbar-thumb,
.chat-thread-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 5px;
}

.chat-stream::-webkit-scrollbar-thumb:hover,
.chat-thread-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.chat-stream-empty {
  margin: auto;
  text-align: center;
  padding: 40px 20px;
  max-width: 360px;
}

.chat-stream-empty .empty-icon {
  margin-bottom: 12px;
  color: #40B2FF;
}

.chat-stream-empty h3 {
  font-size: 1.12rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 4px;
}

.chat-stream-empty p {
  color: #708499;
  font-size: 0.86rem;
  margin: 0;
}

/* True Native Message Bubbles */
.chat-bubble-row {
  display: flex;
  width: 100%;
  margin-bottom: 2px;
}

.chat-bubble-row.me {
  justify-content: flex-end;
}

.chat-bubble-row.them {
  justify-content: flex-start;
}

.chat-bubble {
  width: fit-content;
  max-width: 68%;
  padding: 7px 11px 6px;
  position: relative;
  word-wrap: break-word;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}

.chat-bubble.voice-only {
  padding: 6px 10px 5px 8px;
}

.chat-bubble-row.me .chat-bubble {
  background: #2B5278;
  color: #FFFFFF;
  border-radius: 14px 14px 4px 14px;
}

.chat-bubble-row.them .chat-bubble {
  background: #182533;
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: #F5F5F5;
  border-radius: 14px 14px 14px 4px;
}

.chat-text {
  font-size: 0.9rem;
  line-height: 1.38;
  white-space: pre-wrap;
}

.chat-bubble-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  margin-top: 3px;
  font-size: 0.67rem;
  user-select: none;
}

.chat-bubble-row.me .chat-bubble-foot {
  color: #7E9DB8;
}

.chat-bubble-row.them .chat-bubble-foot {
  color: #6C7883;
}

.chat-bubble-row.me .chat-checks {
  color: #8696a0;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.chat-bubble-row.me .chat-checks.delivered {
  color: #8696a0;
}

.chat-bubble-row.me .chat-checks.read {
  color: #53bdeb;
}

.wa-double-check {
  display: inline-block;
  vertical-align: middle;
}

/* Digital Support Transfer Card */
.chat-support-card {
  background: rgba(245, 166, 35, 0.12);
  border: 1px solid rgba(245, 166, 35, 0.25);
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 4px;
}

.support-card-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}

.support-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #F5A623;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.support-card-body {
  font-size: 0.88rem;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 1.35;
}

/* In-Chat Coin Gift Card */
.chat-gift-card {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.22) 0%, rgba(217, 119, 6, 0.12) 100%);
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 4px;
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.18);
  position: relative;
  overflow: hidden;
}

.gift-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.gift-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 800;
  color: #FBBF24;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.gift-card-amount {
  font-size: 0.85rem;
  font-weight: 800;
  color: #FFFFFF;
  background: rgba(245, 158, 11, 0.3);
  padding: 2px 8px;
  border-radius: 9999px;
  border: 1px solid rgba(245, 158, 11, 0.5);
}

.gift-card-body {
  font-size: 0.92rem;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 1.4;
  white-space: pre-wrap;
}

/* In-Chat Coin Gift Modal / Sheet */
.chat-coin-gift-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
}

.coin-gift-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
}

.coin-gift-sheet {
  position: relative;
  z-index: 2;
  width: 90%;
  max-width: 420px;
  background: #181F2A;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  animation: punch 0.25s ease-out;
  margin: 0 auto;
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
}

.coin-gift-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.coin-gift-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.05rem;
  font-weight: 750;
  color: #FFFFFF;
}

.coin-gift-close {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
}

.coin-gift-close:hover {
  color: #FFFFFF;
}

.coin-gift-balance-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: #94A3B8;
  margin-bottom: 16px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
}

.coin-gift-balance-line strong {
  color: #FBBF24;
}

.buy-more-link {
  color: #38BDF8;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.82rem;
}

.buy-more-link:hover {
  text-decoration: underline;
}

.coin-gift-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.coin-preset-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #FFFFFF;
  padding: 10px 4px;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}

.coin-preset-btn:hover {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.4);
}

.coin-preset-btn.active {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.3) 0%, rgba(217, 119, 6, 0.3) 100%);
  border-color: #F59E0B;
  color: #FDE68A;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.25);
}

.coin-gift-custom-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 0.88rem;
  color: var(--muted);
}

.custom-coins-input {
  flex: 1;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: #FFFFFF;
  padding: 8px 12px;
  font-size: 0.95rem;
  font-weight: 600;
  outline: none;
}

.custom-coins-input:focus {
  border-color: #F59E0B;
}

.coin-gift-msg-field textarea {
  width: 100%;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #FFFFFF;
  padding: 10px 12px;
  font-size: 0.88rem;
  resize: vertical;
  outline: none;
  margin-bottom: 12px;
  box-sizing: border-box;
}

.coin-gift-msg-field textarea:focus {
  border-color: #F59E0B;
}

.coin-gift-zero-fee-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: #34D399;
  margin-bottom: 16px;
}

.send-gift-submit-btn {
  width: 100%;
  padding: 12px;
  font-weight: 750;
  font-size: 0.98rem;
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  border: 1px solid rgba(254, 240, 138, 0.4);
  color: #18181B;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
  cursor: pointer;
  border-radius: 12px;
}

.send-gift-submit-btn:hover {
  background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
  transform: translateY(-1px);
}

/* Chat Quick Coin Tip Chips */
.chat-quick-tip-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px 2px;
  background: transparent;
  overflow-x: auto;
  scrollbar-width: none;
}
.chat-quick-tip-bar::-webkit-scrollbar {
  display: none;
}
.quick-tip-label {
  font-size: 0.76rem;
  font-weight: 700;
  color: #F59E0B;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-right: 2px;
}
.quick-tip-chip {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 9999px;
  color: #FDE68A;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 3px 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.quick-tip-chip:hover {
  background: rgba(245, 158, 11, 0.28);
  border-color: #F59E0B;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
}
.quick-tip-chip.custom {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  color: #94A3B8;
}
.quick-tip-chip.custom:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}

/* Locked Coins Unlock Box */
.locked-coins-unlock-box {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 14px;
  padding: 14px 18px;
  margin: 16px auto;
  max-width: 380px;
  text-align: center;
}
.locked-coins-balance {
  font-size: 0.88rem;
  color: #94A3B8;
  margin-bottom: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

/* Coin Celebration Burst Overlay */
.coin-celebration-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 999;
}
.celebration-coin {
  position: absolute;
  font-size: 20px;
  user-select: none;
  animation: coinFly 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes coinFly {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(0.5) rotate(0deg);
  }
  60% {
    opacity: 1;
    transform: translate(var(--tx), var(--ty)) scale(1.3) rotate(var(--rot));
  }
  100% {
    opacity: 0;
    transform: translate(calc(var(--tx) * 1.2), calc(var(--ty) + 100px)) scale(0.8) rotate(calc(var(--rot) * 2));
  }
}

.chat-bubble-row.me .chat-checks.single-tick {
  color: #8696a0;
  opacity: 0.85;
}
.wa-single-check {
  display: inline-block;
  vertical-align: middle;
}

/* Compact Telegram-Grade Voice Note Player */
.chat-voice-player {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 195px;
  padding: 2px 0;
}

.chat-bubble.voice-only .chat-voice-player {
  min-width: 180px;
}

.voice-play-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.12s ease;
  flex-shrink: 0;
}

.voice-play-btn:hover {
  transform: scale(1.05);
}

.chat-bubble-row.me .voice-play-btn {
  background: #FFFFFF;
  color: #204160;
}

.chat-bubble-row.them .voice-play-btn {
  background: #40B2FF;
  color: #FFFFFF;
}

.voice-track-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.voice-waveform {
  display: flex;
  align-items: center;
  gap: 1.5px;
  height: 16px;
  cursor: pointer;
}

.voice-waveform .bar {
  width: 2px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 2px;
  transition: background 0.1s ease;
}

.chat-bubble-row.them .voice-waveform .bar {
  background: rgba(255, 255, 255, 0.25);
}

.voice-waveform .bar.active {
  background: #40B2FF !important;
}

.chat-bubble-row.me .voice-waveform .bar.active {
  background: #FFFFFF !important;
}

.voice-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.68rem;
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}

.voice-timers {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.inline-foot {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 0 !important;
  font-size: 0.67rem;
  user-select: none;
}

.chat-bubble-row.me .voice-meta {
  color: #9AB6CF;
}

.chat-bubble-row.them .voice-meta {
  color: #708499;
}

/* Image Attachment */
.chat-image-wrap {
  margin-bottom: 4px;
  border-radius: 10px;
  overflow: hidden;
  max-width: 280px;
}

.chat-img-thumb {
  width: 100%;
  height: auto;
  max-height: 240px;
  object-fit: cover;
  display: block;
  cursor: pointer;
  border-radius: 10px;
  transition: opacity 0.15s ease;
}

.chat-img-thumb:hover {
  opacity: 0.9;
}

/* Lightbox Modal */
.chat-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.chat-lightbox.show {
  display: flex;
}

.lightbox-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
}

.lightbox-content img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
}

.lightbox-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #FFFFFF;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Floating AI Replies Popover */
.ai-quick-popover {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 56px;
  right: 56px;
  background: #17212B;
  border: 1px solid #242F3D;
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  z-index: 50;
  animation: popoverFadeIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes popoverFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.ai-popover-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.ai-popover-title {
  font-size: 0.76rem;
  font-weight: 700;
  color: #40B2FF;
}

.ai-popover-close {
  background: none;
  border: none;
  color: #708499;
  cursor: pointer;
  font-size: 0.9rem;
}

.ai-popover-chips {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ai-quick-chip {
  background: #242F3D;
  border: 1px solid transparent;
  color: #E2E8F0;
  font-size: 0.82rem;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
  line-height: 1.35;
}

.ai-quick-chip:hover {
  background: #2B5278;
  color: #FFFFFF;
}

/* Native Composer Wrap */
.chat-composer-wrap {
  position: relative !important;
  padding: 8px 16px max(10px, env(safe-area-inset-bottom)) !important;
  background: #17212B !important;
  border-top: 1px solid #10161E !important;
  flex-shrink: 0 !important;
  z-index: 20 !important;
}

.chat-compose-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.composer-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: #708499;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
  margin-bottom: 2px;
}

.composer-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}

.composer-input-wrap {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  background: #242F3D;
  border: 1px solid #242F3D;
  border-radius: 20px;
  padding: 2px 14px;
  transition: all 0.15s ease;
}

.composer-input-wrap:focus-within {
  background: #242F3D;
  border-color: #2B5278;
}

.composer-input-wrap textarea {
  width: 100%;
  min-height: 36px;
  max-height: 120px;
  background: transparent;
  border: none;
  outline: none;
  color: #FFFFFF;
  font-size: 0.92rem;
  font-family: inherit;
  resize: none;
  padding: 8px 0;
  line-height: 1.4;
}

.composer-input-wrap textarea::placeholder {
  color: #708499;
}

.composer-sparkle-btn {
  position: absolute;
  right: 10px;
  background: transparent;
  border: none;
  color: #40B2FF;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, color 0.15s ease;
}

.composer-sparkle-btn:hover {
  color: #60A5FA;
  transform: scale(1.12);
}

/* Telegram / iMessage Mic-to-Send Action Button */
.composer-action-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  margin-bottom: 2px;
}

.composer-action-btn.mode-voice {
  background: transparent;
  color: #708499;
}

.composer-action-btn.mode-voice:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #EF4444;
}

.composer-action-btn.mode-send {
  background: #2B5278;
  color: #FFFFFF;
}

.composer-action-btn.mode-send:hover {
  background: #346392;
}

/* Inline Live Recording Bar */
.chat-recording-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 0;
  width: 100%;
}

.recording-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.25);
  padding: 5px 12px;
  border-radius: 16px;
}

.recording-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #EF4444;
  box-shadow: 0 0 8px #EF4444;
  animation: pulseDot 1.2s infinite ease-in-out;
}

@keyframes pulseDot {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.7; }
}

.recording-timer {
  font-family: monospace;
  font-size: 0.88rem;
  font-weight: 700;
  color: #F87171;
  font-variant-numeric: tabular-nums;
}

.recording-wave-visual {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 14px;
}

.recording-wave-visual span {
  width: 2px;
  height: 6px;
  background: #F87171;
  border-radius: 2px;
  animation: waveBar 0.8s infinite ease-in-out alternate;
}

.recording-wave-visual span:nth-child(2) { animation-delay: 0.15s; height: 12px; }
.recording-wave-visual span:nth-child(3) { animation-delay: 0.3s; height: 8px; }
.recording-wave-visual span:nth-child(4) { animation-delay: 0.45s; height: 14px; }
.recording-wave-visual span:nth-child(5) { animation-delay: 0.6s; height: 10px; }

@keyframes waveBar {
  from { height: 4px; }
  to { height: 14px; }
}

.recording-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.recording-cancel-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #94A3B8;
  padding: 5px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.recording-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}

.recording-send-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #EF4444;
  border: none;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.recording-send-btn:hover {
  transform: scale(1.06);
  background: #DC2626;
}

/* Empty Inbox Selection Pane (Desktop) */
.chat-empty-selection {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: #0E1621;
}

.empty-selection-card {
  max-width: 400px;
  text-align: center;
  padding: 32px 24px;
}

.empty-selection-icon {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  color: #F59E0B;
}

.empty-selection-card h2 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 8px;
}

.empty-selection-card p {
  font-size: 0.9rem;
  color: #708499;
  line-height: 1.5;
  margin: 0;
}

/* Locked Chat Pane */
.chat-locked-pane {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

.locked-card {
  max-width: 420px;
  text-align: center;
  background: #17212B;
  border: 1px solid #242F3D;
  border-radius: 18px;
  padding: 32px 24px;
}

.locked-card .lock-glyph {
  margin-bottom: 12px;
  color: #E9BD68;
}

.locked-card h2 {
  font-size: 1.22rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 6px;
}

.locked-card p {
  font-size: 0.88rem;
  color: #708499;
  line-height: 1.45;
  margin: 0 0 20px;
}

/* Status and Destination helpers */
.dest-meta-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.dest-active-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  color: #10B981;
  font-weight: 600;
}
.thanks-creator-link {
  color: #FFFFFF;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s ease;
}
.thanks-creator-link:hover {
  color: #40B2FF;
}
.thanks-account-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #10B981;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .chat-sidebar {
    width: 100%;
    height: 100%;
    border-right: none;
  }
  .chat-main {
    display: none;
  }
  .chat-sidebar.hide-mobile {
    display: none;
  }
  .chat-main.show-mobile {
    display: flex !important;
  }
  .chat-stream {
    padding: 12px 14px max(32px, env(safe-area-inset-bottom)) !important;
  }
  .chat-composer-wrap {
    padding: 8px 12px max(10px, env(safe-area-inset-bottom)) !important;
  }
  .chat-back-btn {
    display: flex;
  }
  .chat-bubble {
    max-width: 86%;
  }
  .chat-header {
    padding: 0 14px;
  }
}

/* Native Badges & Indicators */
.pack .pack-badge-bonus {
  position: absolute;
  top: 18px;
  right: 16px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 6px;
  background: rgba(233, 189, 104, 0.15);
  color: var(--gold);
  border: 1px solid rgba(233, 189, 104, 0.3);
}

.status-indicator-on {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #10B981;
}

.status-indicator-pending {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #94A3B8;
}

.status-pending-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #64748B;
}

.suite-plus-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(245, 166, 35, 0.2) 0%, rgba(245, 166, 35, 0.08) 100%);
  color: #F5A623;
  border: 1px solid rgba(245, 166, 35, 0.3);
  margin-left: 6px;
}

/* Public Creator Page 2-Column Desktop Architecture */
@media (min-width: 940px) {
  .profile-page {
    max-width: 1160px !important;
    display: grid !important;
    grid-template-columns: 1.15fr 0.85fr !important;
    gap: 24px !important;
    align-items: start !important;
  }
  .profile-stage {
    margin-bottom: 0 !important;
  }
  .donate-grid {
    margin-top: 0 !important;
    position: sticky !important;
    top: 84px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
  .donate-grid.member-layout {
    max-width: 100% !important;
    margin-inline: 0 !important;
  }
  .profile-page > .recurring-section {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
  .profile-stage .gifts-card {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
  }
}

/* Modern Crowdfunding Goal Card */
.crowd-goal-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(226, 236, 250, 0.1);
  border-radius: 16px;
  padding: 16px 18px;
  margin: 16px 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.goal-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.goal-badge-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.goal-icon {
  color: #F59E0B;
  flex-shrink: 0;
}

.goal-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #FFFFFF;
}

.goal-pct-pill {
  font-size: 11px;
  font-weight: 750;
  color: #F59E0B;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 6px;
  padding: 2px 7px;
  letter-spacing: 0.02em;
}

.crowd-goal-card .goal-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin: 12px 0 8px;
}

.crowd-goal-card .goal-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #F59E0B, #10B981);
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}

.goal-stats-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
}

.goal-raised {
  color: #F1F5FB;
  font-variant-numeric: tabular-nums;
}

.goal-target {
  color: #94A3B8;
  font-variant-numeric: tabular-nums;
}

/* Branded Creator Social Pills */
.creator-social-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}

.social-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 650;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #CBD5E1;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.social-pill:hover {
  transform: translateY(-1px);
}

.pill-twitch:hover {
  background: rgba(168, 85, 247, 0.18);
  border-color: rgba(168, 85, 247, 0.4);
  color: #C084FC;
}

.pill-youtube:hover {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.4);
  color: #F87171;
}

.pill-x:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
}

.pill-kick:hover {
  background: rgba(34, 197, 94, 0.18);
  border-color: rgba(34, 197, 94, 0.4);
  color: #4ADE80;
}

.pill-web:hover {
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(59, 130, 246, 0.4);
  color: #60A5FA;
}

/* Member Supporter Console Mode Switcher */
.member-mode-switch {
  display: inline-flex;
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  padding: 3px;
  border-radius: 12px;
  gap: 3px;
  margin-bottom: 18px;
}

.mode-btn {
  flex: 1;
  padding: 9px 12px;
  font-size: 0.84rem;
  font-weight: 650;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: all 0.15s ease;
}

.mode-btn:hover {
  color: #FFFFFF;
}

.mode-btn.active {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.mode-pane {
  display: none;
}

.mode-pane.is-active {
  display: block;
}

/* ------------------------------------------------------------- */
/* Creator Plus (/creator/plus) Overhaul Styles                  */
/* ------------------------------------------------------------- */
.plus-page {
  max-width: 880px;
  margin: 0 auto;
  padding: 8px 0 48px;
}

.plus-hero-header {
  margin-bottom: 28px;
}

.plus-badge-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.plus-pill-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.18), rgba(245, 158, 11, 0.08));
  border: 1px solid rgba(234, 179, 8, 0.4);
  color: #FACC15;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.plus-status-indicator.active {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.35);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  color: #4ADE80;
  font-weight: 600;
}

.plus-hero-title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin: 0 0 10px;
  color: #FFFFFF;
}

.plus-hero-sub {
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
  max-width: 660px;
}

.plus-active-card {
  padding: 24px;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(34, 197, 94, 0.08), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(34, 197, 94, 0.3);
  margin-bottom: 36px;
}

.plus-active-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.plus-active-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.2);
  border: 1px solid rgba(34, 197, 94, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4ADE80;
  flex-shrink: 0;
}

.plus-active-header h2 {
  font-size: 1.25rem;
  margin: 0 0 4px;
  color: #FFFFFF;
}

.plus-active-header p {
  margin: 0;
  font-size: 0.92rem;
}

.plus-active-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.plus-pricing-grid {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 40px;
}

.plus-pricing-card {
  width: 100%;
  max-width: 480px;
  padding: 28px;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(234, 179, 8, 0.35);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.pricing-card-top {
  margin-bottom: 20px;
}

.pricing-label {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #FACC15;
  text-transform: uppercase;
}

.pricing-amount {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 8px 0 4px;
}

.pricing-amount .currency {
  font-size: 1.8rem;
  font-weight: 700;
  color: #FFFFFF;
}

.pricing-amount .value {
  font-size: 3.2rem;
  font-weight: 850;
  letter-spacing: -0.04em;
  color: #FFFFFF;
  line-height: 1;
}

.pricing-amount .cycle {
  font-size: 1rem;
  color: var(--muted);
  font-weight: 500;
}

.pricing-tagline {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
}

.pricing-checklist {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 22px;
}

.check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: #E2E8F0;
}

.check-item svg {
  color: #FACC15;
  flex-shrink: 0;
}

.plus-cta-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 20px;
  font-size: 0.98rem;
  font-weight: 700;
  border-radius: 12px;
  background: linear-gradient(135deg, #FACC15, #EAB308);
  color: #000000;
  border: 0;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(234, 179, 8, 0.35);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.plus-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(234, 179, 8, 0.45);
}

.checkout-guarantee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--muted);
  margin: 12px 0 0;
}

.plus-features-section {
  margin-top: 40px;
}

.section-title-wrap {
  margin-bottom: 18px;
}

.section-headline {
  font-size: 1.45rem;
  font-weight: 750;
  letter-spacing: -0.03em;
  margin: 4px 0 0;
  color: #FFFFFF;
}

.plus-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
  margin-bottom: 40px;
}

.feature-card {
  padding: 20px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.feature-card:hover {
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateY(-2px);
}

.feature-icon-box {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.feature-icon-box.gold { background: rgba(234, 179, 8, 0.15); color: #FACC15; }
.feature-icon-box.blue { background: rgba(59, 130, 246, 0.15); color: #60A5FA; }
.feature-icon-box.purple { background: rgba(168, 85, 247, 0.15); color: #C084FC; }
.feature-icon-box.pink { background: rgba(236, 72, 153, 0.15); color: #F472B6; }
.feature-icon-box.green { background: rgba(34, 197, 94, 0.15); color: #4ADE80; }
.feature-icon-box.cyan { background: rgba(6, 182, 212, 0.15); color: #22D3EE; }

.feature-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: #FFFFFF;
}

.feature-card p {
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--muted);
  margin: 0;
}

.plus-comparison-section {
  margin-top: 40px;
}

.comparison-table-card {
  padding: 0;
  overflow-x: auto;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 40px;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.comparison-table th {
  padding: 14px 18px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
}

.comparison-table td {
  padding: 14px 18px;
  font-size: 0.88rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.comparison-table tr:last-child td {
  border-bottom: 0;
}

.col-feature, .cell-feature {
  width: 45%;
  color: #FFFFFF;
}

.col-free, .cell-free {
  width: 27%;
  color: var(--muted);
}

.col-plus, .cell-plus {
  width: 28%;
  background: rgba(234, 179, 8, 0.03);
}

.badge-pro {
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 6px;
  background: #FACC15;
  color: #000000;
  font-weight: 800;
  margin-left: 4px;
}

.highlight-val {
  color: #FACC15;
  font-weight: 650;
}

.plus-compare-table .check,
.cell-free .check,
.cell-plus .check {
  color: #4ADE80;
  font-weight: 700;
  margin-right: 4px;
}

.cross {
  color: rgba(255, 255, 255, 0.35);
  font-weight: 700;
  margin-right: 4px;
}

.text-dim {
  color: var(--muted);
}

.plus-faq-section {
  margin-top: 40px;
}

.faq-accordion-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  overflow: hidden;
  transition: border-color 0.15s ease;
}

.faq-item:hover {
  border-color: rgba(255, 255, 255, 0.15);
}

.faq-item summary {
  padding: 16px 20px;
  font-size: 0.94rem;
  font-weight: 650;
  color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  user-select: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary .chevron {
  transition: transform 0.2s ease;
  color: var(--muted);
  flex-shrink: 0;
}

.faq-item[open] summary .chevron {
  transform: rotate(180deg);
  color: #FACC15;
}

.faq-answer {
  padding: 0 20px 18px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--muted);
}

.faq-answer p {
  margin: 0;
}

/* Grayworth Asset CDN Icon Engine: Luminight Emulation Styles */
.luminight-icon {
  display: inline-block;
  vertical-align: -0.18em;
  object-fit: contain;
  border: 0;
  background: transparent;
  flex-shrink: 0;
  pointer-events: none;
  image-rendering: auto;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
  transition: transform 0.15s ease, filter 0.2s ease;
}

.luminight-icon:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.chat-gift-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.chat-supporter-text {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.supporter-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.gift-thanked-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hub-top-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ==========================================================================
   Fan Prestige Coins (Status Tiers: Blue, Silver, Gold, Purple, Icon)
   ========================================================================== */

.fan-coin-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-inline: 4px;
  user-select: none;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fan-coin-badge:hover {
  transform: scale(1.18) translateY(-1px);
}

.fan-coin-badge .coin-disc {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  position: relative;
  box-sizing: border-box;
}

/* Coin Sizes */
.fan-coin-badge.coin-lg .coin-disc {
  width: 26px;
  height: 26px;
  font-size: 13px;
}

.fan-coin-badge.coin-xl .coin-disc {
  width: 36px;
  height: 36px;
  font-size: 18px;
}

/* Blue (Member: < $100) */
.tier-blue .coin-disc {
  background: linear-gradient(135deg, #38BDF8 0%, #0284C7 50%, #0369A1 100%);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 2px 5px rgba(2, 132, 199, 0.35);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

/* Silver ($100 - $499) */
.tier-silver .coin-disc {
  background: linear-gradient(135deg, #FFFFFF 0%, #E2E8F0 35%, #94A3B8 70%, #CBD5E1 100%);
  color: #0F172A;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.9), 0 2px 5px rgba(0, 0, 0, 0.25);
  text-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.6);
}

/* Gold ($500 - $1,999) */
.tier-gold .coin-disc {
  background: linear-gradient(135deg, #FDE68A 0%, #F59E0B 45%, #B45309 85%, #FDE047 100%);
  color: #451A03;
  border: 1px solid rgba(254, 240, 138, 0.9);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.85), 0 2px 8px rgba(245, 158, 11, 0.4);
  text-shadow: 0 0.5px 0 rgba(254, 240, 138, 0.7);
}

/* Purple Platinum ($2,000 - $9,999) */
.tier-purple .coin-disc {
  background: linear-gradient(135deg, #E9D5FF 0%, #A855F7 45%, #6B21A8 85%, #C084FC 100%);
  color: #FAF5FF;
  border: 1px solid rgba(233, 213, 255, 0.7);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.8), 0 2px 8px rgba(168, 85, 247, 0.45);
  text-shadow: 0 1px 2px rgba(74, 14, 110, 0.5);
}

/* The Icon Coin ($10,000+ - Obsidian / Tungsten Black Metal & Diamond-Edge Reflective) */
.tier-icon .coin-disc {
  background: radial-gradient(circle at 35% 35%, #3F3F46 0%, #18181B 50%, #09090B 100%);
  color: #FFFFFF;
  border: 1.2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 
    inset 0 0 0 1px rgba(255, 255, 255, 0.6),
    inset 0 1px 2px rgba(255, 255, 255, 0.8),
    0 0 10px rgba(255, 255, 255, 0.35),
    0 3px 8px rgba(0, 0, 0, 0.75);
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.9), 0 1px 2px rgba(0, 0, 0, 0.9);
  position: relative;
  overflow: hidden;
}

.tier-icon .coin-disc::after {
  content: "";
  position: absolute;
  inset: -50%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 40%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 60%,
    transparent 100%
  );
  transform: rotate(25deg);
  animation: diamondShimmer 4s infinite linear;
  pointer-events: none;
}

@keyframes diamondShimmer {
  0% { transform: translateY(-100%) rotate(25deg); }
  35% { transform: translateY(100%) rotate(25deg); }
  100% { transform: translateY(100%) rotate(25deg); }
}

/* ==========================================================================
   VIP Status Card (Fan Settings / Wallet)
   ========================================================================== */

.vip-status-card {
  position: relative;
  border-radius: 20px;
  padding: 24px;
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  overflow: hidden;
  margin-bottom: 24px;
}

.vip-status-card.card-tier-icon {
  background: radial-gradient(circle at 10% 20%, rgba(39, 39, 42, 0.95) 0%, rgba(9, 9, 11, 0.98) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.7), inset 0 0 15px rgba(255, 255, 255, 0.08);
}

.vip-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.vip-card-badge-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vip-card-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
  letter-spacing: -0.02em;
}

.vip-card-subtitle {
  font-size: 0.85rem;
  color: #94A3B8;
  margin: 2px 0 0;
}

.vip-progress-wrap {
  margin-top: 16px;
}

.vip-progress-track {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.vip-progress-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.vip-progress-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  font-size: 0.8rem;
  color: #94A3B8;
}

.vip-tiers-guide {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.vip-tier-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.78rem;
  font-weight: 600;
  color: #CBD5E1;
}

.vip-tier-chip.current {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
}

/* ==========================================================================
   Creator Supporters Hub & Private Leaderboard
   ========================================================================== */

.supporters-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.supporters-stat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.supporters-stat-num {
  font-size: 1.8rem;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.03em;
  margin-top: 4px;
}

.supporters-podium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

@media (max-width: 640px) {
  .supporters-podium {
    grid-template-columns: 1fr;
  }
}

.podium-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  transition: transform 0.16s ease, border-color 0.16s ease;
}

.podium-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
}

.podium-card.rank-1 {
  border-color: rgba(245, 158, 11, 0.4);
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.08) 0%, var(--surface) 100%);
}

.podium-rank-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--raised);
  border: 1px solid var(--line-strong);
  color: #94A3B8;
}

.podium-card.rank-1 .podium-rank-badge {
  background: #F59E0B;
  color: #000;
  border-color: #F59E0B;
}

.supporters-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
}

.supporter-row {
  background: var(--surface);
  transition: background 0.15s ease;
}

.supporter-row:hover {
  background: var(--raised);
}

.supporter-row td {
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.supporter-row td:first-child {
  border-left: 1px solid var(--line);
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
}

.supporter-row td:last-child {
  border-right: 1px solid var(--line);
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
}

.supporter-rank-cell {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--muted);
}

.supporter-rank-cell.rank-col-1 {
  color: #F59E0B;
}

.supporter-rank-cell.rank-col-2 {
  color: #E2E8F0;
}

.supporter-rank-cell.rank-col-3 {
  color: #C084FC;
}

/* VIP Card Tier Pill Badges */
.vip-tier-chip.tier-badge-blue { border-color: #38BDF8; color: #fff; }
.vip-tier-chip.tier-badge-silver { border-color: #E2E8F0; color: #fff; }
.vip-tier-chip.tier-badge-gold { border-color: #F59E0B; color: #FDE68A; }
.vip-tier-chip.tier-badge-purple { border-color: #C084FC; color: #FAF5FF; }
.vip-tier-chip.tier-badge-icon { border-color: rgba(255, 255, 255, 0.7); color: #fff; background: rgba(255, 255, 255, 0.15); box-shadow: 0 0 10px rgba(255, 255, 255, 0.2); }

/* VIP Card Progress Fills */
.vip-progress-fill.tier-fill-blue { background: linear-gradient(90deg, #0284C7, #38BDF8); }
.vip-progress-fill.tier-fill-silver { background: linear-gradient(90deg, #94A3B8, #F8FAFC); }
.vip-progress-fill.tier-fill-gold { background: linear-gradient(90deg, #D97706, #FDE047); }
.vip-progress-fill.tier-fill-purple { background: linear-gradient(90deg, #7E22CE, #E879F9); }
.vip-progress-fill.tier-fill-icon { background: linear-gradient(90deg, #52525B, #FFFFFF); box-shadow: 0 0 8px rgba(255, 255, 255, 0.5); }

/* Print Styles for Digital Receipts */
@media print {
  body * {
    visibility: hidden !important;
  }
  #receiptModal, #receiptModal * {
    visibility: visible !important;
  }
  #receiptModal {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    background: transparent !important;
    display: block !important;
    padding: 0 !important;
  }
  .wallet-modal-card.receipt-card {
    border: 1px solid #CBD5E1 !important;
    box-shadow: none !important;
    background: #FFFFFF !important;
    color: #0F172A !important;
    margin: 20px auto !important;
    width: 480px !important;
    max-width: 100% !important;
  }
  .receipt-header, .receipt-body, .receipt-security-note {
    color: #0F172A !important;
  }
  .receipt-rory-logo {
    color: #0F172A !important;
  }
  .receipt-status-tag {
    background: #ECFDF5 !important;
    color: #065F46 !important;
    border: 1px solid #A7F3D0 !important;
  }
  .receipt-footer-row, .modal-close-btn {
    display: none !important;
  }
}