.profile-page {
  background:
    radial-gradient(78% 285px at 0% 2%, #8b59284f, transparent 96%),
    radial-gradient(75% 286px at 100% 3%, #694d2b8c, transparent 96%),
    linear-gradient(180deg, #26211f, #171416 360px, var(--bg) 580px);
}

.profile-overview .profile-head {
  gap: 13px;
  margin-bottom: 19px;
}

.profile-overview .profile-account h1 {
  font-size: 23px;
  letter-spacing: .02em;
}

.profile-overview .profile-id {
  color: #c0b9cb;
  font-size: 13px;
}

.profile-overview .profile-shortcuts > * {
  border-color: #f5e8ff20;
  background: #15142078;
}

.profile-overview .profile-wallet {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.profile-wallet-card {
  --wallet-rim: #edb96559;
  --wallet-light: #a76d2d4d;
  --wallet-surface: #372820;
  --wallet-base: #25201c;
  --wallet-frame: #f6cd836b;
  --wallet-medal-bg: #654427;
  --wallet-amount: #ffe093;
  --wallet-note: #e3ccba;
  --wallet-cta: var(--brand-gold-grad);
  align-content: center;
  align-items: center;
  isolation: isolate;
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 151px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px 5px;
  padding: 12px;
  border: 1px solid var(--wallet-rim);
  border-radius: 16px;
  background:
    radial-gradient(95% 105% at 103% -3%, var(--wallet-light), transparent 82%),
    linear-gradient(151deg, var(--wallet-surface), var(--wallet-base) 77%);
  box-shadow: inset 0 1px 0 #fff3db13, 0 8px 18px #08080d48;
}

.profile-wallet-card::before {
  position: absolute;
  top: -98px;
  right: -81px;
  z-index: -1;
  width: 196px;
  aspect-ratio: 1;
  border: 1px solid var(--wallet-rim);
  border-radius: 50%;
  box-shadow: 0 0 0 15px #ffffff07, 0 0 0 31px #ffffff05;
  opacity: .52;
  content: '';
  pointer-events: none;
}

.profile-wallet-member {
  --wallet-rim: #ffe4a070;
  --wallet-light: #c6a06646;
  --wallet-surface: #3b342d;
  --wallet-base: #252222;
  --wallet-frame: #ffe5b65a;
  --wallet-medal-bg: #5c4d37;
  --wallet-amount: #fff1cf;
  --wallet-note: #dfd0b8;
  --wallet-cta: var(--brand-gold-soft);
}

.profile-wallet-title {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: #fff7f1;
  font-size: clamp(16px, 4.35vw, 19px);
  font-weight: 780;
  line-height: 1.18;
}

.profile-wallet-medal {
  width: clamp(39px, 11.6vw, 46px);
  aspect-ratio: 1;
  height: auto;
  flex: none;
  padding: 2px;
  border: 1px solid var(--wallet-frame);
  border-radius: 12px;
  background: linear-gradient(145deg, var(--wallet-medal-bg), var(--wallet-base));
  box-shadow: inset 0 1px 0 #ffffff25, 0 3px 8px #0d09195e;
  object-fit: contain;
}

.profile-wallet-value {
  min-width: 0;
  color: var(--wallet-amount);
  font-size: 16px;
  font-weight: 780;
  line-height: 1.18;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.profile-wallet-coins .profile-wallet-value {
  font-size: clamp(20px, 5.8vw, 26px);
}

.profile-wallet-cta {
  display: grid;
  min-width: 56px;
  min-height: 36px;
  padding: 5px 10px;
  place-items: center;
  border: 1px solid #ffffff36;
  border-radius: 8px;
  background: var(--wallet-cta);
  box-shadow: 0 3px 8px #0a070d52, inset 0 1px 0 #ffffff63;
  color: #302034;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.2;
  white-space: nowrap;
}

.profile-wallet-coins .profile-wallet-cta { color: #3b230c; }
.profile-wallet-cta:active { filter: brightness(.91); }

.profile-wallet-caption {
  grid-column: 1 / -1;
  color: var(--wallet-note);
  font-size: 12px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.profile-overview .profile-bind {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 11px;
  min-height: 77px;
  margin-top: 14px;
  padding: 12px;
  border-color: #f3c58232;
  border-radius: 14px;
  background: linear-gradient(115deg, #3d2e22, #2d2724 65%, #282322);
  box-shadow: inset 0 1px 0 #ffffff11;
}

.profile-bind-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid #fff3bd66;
  border-radius: 10px;
  background: var(--brand-gold-grad);
  color: #442b19;
}

.profile-bind-icon svg { --icon: 23px; }
.profile-overview .profile-bind .arrow { color: #c7bccb; --icon: 16px; }
.profile-overview .profile-bind strong { color: #fbf4ed; font-size: 16px; font-weight: 780; }
.profile-overview .profile-bind small { color: #d6cbd7; font-size: 12px; line-height: 1.45; }

.profile-overview .profile-community-entries { gap: 10px; margin-top: 10px; }
.profile-overview .profile-entry {
  grid-template-columns: 36px minmax(0, 1fr) 10px;
  gap: 8px;
  min-height: 67px;
  padding: 9px;
  border-color: var(--brand-gold-line);
  border-radius: 13px;
  background: linear-gradient(120deg, #342919, #252123 80%);
  box-shadow: inset 0 1px 0 #ffffff0b;
}

.profile-overview .profile-entry-creators { background: linear-gradient(120deg, #3a2f23, #262222 80%); }
.profile-overview .profile-entry-icon {
  width: 36px;
  height: 36px;
  border-color: var(--brand-gold-line);
  color: var(--brand-gold-soft);
  background: linear-gradient(137deg, #74531f, #49391f 90%);
}
.profile-overview .profile-entry-arrow { color: #c3ab87; }
.profile-overview .profile-entry strong { font-size: 14px; }
.profile-overview .profile-entry small { font-size: 11px; }

.profile-overview .profile-library { margin-top: 18px; }
.profile-overview .profile-tabs {
  justify-content: flex-start;
  gap: 18px;
  margin-bottom: 14px;
  border-color: #9483a233;
}

.profile-overview .profile-tabs a {
  padding-inline: 3px;
  font-size: 15px;
}

.profile-overview .profile-tabs a.active::after {
  width: 28px;
  background: var(--brand-gold-grad);
  box-shadow: 0 0 8px #ffcf7e36;
}

.profile-overview .profile-empty {
  margin: 0;
  padding: 29px 10px;
  border: 1px solid #ac97bc22;
  border-radius: 12px;
  background: linear-gradient(145deg, #252331, #1d1b25);
  color: #c4bbcc;
}

.profile-history-grid { gap: 16px 8px; }

.profile-history-card .poster-media {
  aspect-ratio: 3 / 4;
  border: 1px solid #f0dcfd2b;
  border-radius: 10px;
}

.profile-history-card .poster-media::after {
  inset: 44% 0 0;
  background: linear-gradient(0deg, #08070eea, #100c1870 59%, transparent);
}

.profile-history-card .profile-history-badge {
  top: 0;
  left: 0;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 8px 0 9px 0;
  font-size: 12px;
  font-weight: 850;
}

.profile-history-card .profile-history-badge.gold {
  color: var(--brand-gold-ink);
  background: var(--brand-gold-grad);
}

.profile-history-card .profile-history-badge.member {
  color: #513818;
  background: var(--brand-gold-soft);
}

.profile-history-heat {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  inset: auto auto 7px 6px;
  color: #fff7ed;
  font-size: 11px;
  font-weight: 680;
  line-height: 1.25;
  text-shadow: 0 1px 4px #000;
  font-variant-numeric: tabular-nums;
}

.profile-history-heat svg { --icon: 13px; color: #ffad68; }
.profile-history-info { display: flex; align-items: baseline; gap: 5px; }
.profile-history-genre { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.profile-history-episodes { white-space: nowrap; }
.profile-history-card .poster-title { margin-top: 7px; color: #f8f1f7; }
.profile-history-card .profile-history-meta { display: grid; gap: 3px; margin-top: 3px; }
.profile-history-meta > span { overflow: hidden; text-overflow: ellipsis; }
.profile-history-progress { color: #b3a8bb; font-variant-numeric: tabular-nums; }

@media (max-width: 360px) {
  .profile-wallet-card { padding: 10px; }
  .profile-wallet-title { gap: 5px; }
  .profile-wallet-cta { min-width: 50px; padding-inline: 6px; }
  .profile-overview .profile-entry { grid-template-columns: 32px minmax(0, 1fr); gap: 6px; }
  .profile-overview .profile-entry-icon { width: 32px; height: 32px; }
  .profile-overview .profile-entry-arrow { display: none; }
}