.my-screen { padding-bottom: 24px; }
.my-page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.my-page-head small { display: block; color: #7d8c9d; font-size: 8px; font-weight: 900; letter-spacing: .16em; }
.my-page-head h1 { margin: 3px 0 0; font-size: 25px; }
.my-profile-content { display: grid; gap: 12px; }

.my-gate { min-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.my-gate > span { width: 64px; height: 64px; border-radius: 22px; background: #eef5f8; display: grid; place-items: center; }
.my-gate > span img { width: 34px; height: 34px; }
.my-gate h2 { margin: 16px 0 6px; font-size: 18px; }
.my-gate p { max-width: 280px; margin: 0 0 18px; color: var(--muted); font-size: 11px; line-height: 1.6; }

.my-identity-hero { position: relative; overflow: hidden; min-height: 132px; padding: 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 28px; background: radial-gradient(circle at 88% 10%, rgba(107,214,255,.20), transparent 33%), linear-gradient(145deg,#171d23,#2b353d); color: #fff; display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 13px; box-shadow: 0 19px 42px rgba(24,35,44,.20); }
.my-identity-hero:after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg,rgba(255,255,255,.12),transparent 32%,transparent 70%,rgba(126,215,255,.06)); }
.my-avatar-button { position: relative; z-index: 1; width: 72px; height: 72px; padding: 0; border: 2px solid rgba(255,255,255,.30); border-radius: 24px; background: #111; overflow: visible; box-shadow: 0 12px 27px rgba(0,0,0,.30); }
.my-avatar-button > img { width: 100%; height: 100%; border-radius: 21px; object-fit: cover; }
.my-avatar-button > i { position: absolute; right: -5px; bottom: -5px; width: 25px; height: 25px; border-radius: 9px; background: #fff; display: grid; place-items: center; box-shadow: 0 5px 13px rgba(0,0,0,.24); }
.my-avatar-button > i img { width: 15px; height: 15px; }
.my-identity-copy { position: relative; z-index: 1; min-width: 0; }
.my-identity-copy > div { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.my-identity-copy h2 { margin: 0; color: #fff; font-size: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-identity-copy > b { display: block; margin-top: 5px; color: #93ddff; font: 850 10px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .06em; }
.my-identity-copy > p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 7px 0 0; color: #bdcbd4; font-size: 10px; line-height: 1.5; }
.my-verification { display: inline-flex; align-items: center; gap: 3px; padding: 4px 6px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; color: #c8d4dc; background: rgba(255,255,255,.07); font-size: 7px; font-weight: 900; }
.my-verification img { width: 13px; height: 13px; }
.my-verification.blue { color: #84dcff; }
.my-verification.gold { color: #ffd96e; }
.my-edit-button { position: relative; z-index: 1; align-self: start; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(255,255,255,.09); color: #fff; padding: 7px 10px; font-size: 8px; font-weight: 900; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

.my-membership-strip { width: 100%; min-height: 65px; padding: 10px 12px; border: 1px solid #dbe4ea; border-radius: 20px; background: linear-gradient(135deg,rgba(255,255,255,.92),rgba(240,245,248,.76)); display: grid; grid-template-columns: 40px 1fr auto 18px; align-items: center; gap: 10px; text-align: left; box-shadow: 0 10px 28px rgba(40,67,82,.07); }
.my-membership-strip > span { width: 40px; height: 40px; border-radius: 14px; background: #eaf4f8; display: grid; place-items: center; }
.my-membership-strip > span img { width: 24px; height: 24px; }
.my-membership-strip > p { margin: 0; display: flex; flex-direction: column; gap: 3px; }
.my-membership-strip > p small { color: #71828d; font-size: 7px; font-weight: 900; letter-spacing: .12em; }
.my-membership-strip > p b { font-size: 12px; }
.my-membership-strip > em { color: #087bea; font-size: 8px; font-style: normal; font-weight: 900; }
.my-membership-strip > .ui-glyph { width: 17px; height: 17px; }

.my-assets-card { padding: 15px; border: 1px solid #dfe7ec; border-radius: 24px; background: #fff; box-shadow: 0 11px 30px rgba(45,75,91,.055); }
.my-assets-card > header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 8px; }
.my-assets-card > header small { display: block; color: #78909c; font-size: 7px; font-weight: 900; letter-spacing: .14em; }
.my-assets-card > header h2 { margin: 3px 0 0; font-size: 16px; }
.my-assets-card > header button { border: 0; background: transparent; color: #087bea; font-size: 8px; font-weight: 900; }
.my-asset-list > button,.my-token-preview { width: 100%; min-height: 65px; padding: 10px 0; border: 0; border-bottom: 1px solid #edf1f3; background: transparent; display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 10px; text-align: left; }
.my-asset-list > :last-child { border-bottom: 0; }
.my-asset-list > button > span,.my-token-preview > span { width: 42px; height: 42px; border-radius: 15px; background: #f2f5f7; display: grid; place-items: center; overflow: hidden; }
.my-asset-list > button > span img,.my-token-preview > span img { width: 28px; height: 28px; object-fit: contain; }
.my-token-preview > span img { width: 100%; height: 100%; object-fit: cover; }
.my-asset-list p { margin: 0; display: flex; flex-direction: column; gap: 3px; }
.my-asset-list p b { font-size: 13px; }
.my-asset-list p small { color: var(--muted); font-size: 8px; }
.my-asset-list > button > div,.my-token-preview > div { text-align: right; display: flex; flex-direction: column; gap: 3px; }
.my-asset-list strong { font-size: 13px; }
.my-asset-list div small { color: var(--muted); font-size: 7px; }
.my-token-preview strong { color: #71828d; font-size: 10px; }

.my-invite-card { min-height: 156px; padding: 15px; border-radius: 25px; background: linear-gradient(145deg,#eaf1f5,#f8fafb); border: 1px solid #dce5ea; display: grid; grid-template-columns: 1fr 112px; align-items: center; gap: 13px; }
.my-invite-copy small { color: #087bea; font-size: 7px; font-weight: 900; letter-spacing: .14em; }
.my-invite-copy h3 { margin: 5px 0 6px; font: 900 17px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .05em; }
.my-invite-copy p { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.5; }
.my-invite-copy > div { display: flex; gap: 6px; margin-top: 11px; }
.my-invite-copy button { min-height: 30px; padding: 0 9px; border: 1px solid #d3e0e7; border-radius: 10px; background: rgba(255,255,255,.72); color: #173144; font-size: 8px; font-weight: 900; }
.my-qr-button { width: 112px; height: 112px; padding: 8px; border: 1px solid rgba(255,255,255,.92); border-radius: 20px; background: #fff; box-shadow: 0 12px 28px rgba(36,73,93,.12); }
.my-qr-button img { width: 100%; height: 100%; border-radius: 12px; }

.my-detail-list { border: 1px solid #dfe7ec; border-radius: 24px; background: #fff; padding: 2px 14px; }
.my-detail-list > button { width: 100%; min-height: 61px; border: 0; border-bottom: 1px solid #edf1f3; background: transparent; display: grid; grid-template-columns: 38px 1fr 18px; align-items: center; gap: 10px; text-align: left; }
.my-detail-list > button:last-child { border-bottom: 0; }
.my-detail-list > button > span { width: 38px; height: 38px; border-radius: 13px; background: #f0f5f7; display: grid; place-items: center; }
.my-detail-list > button > span img { width: 22px; height: 22px; }
.my-detail-list > button > p { margin: 0; display: flex; flex-direction: column; gap: 3px; }
.my-detail-list b { font-size: 11px; }
.my-detail-list small { color: var(--muted); font-size: 8px; }
.my-detail-list > button > .ui-glyph { width: 17px; height: 17px; }

.my-wallet-binding { min-height: 59px; padding: 10px 12px; border: 1px solid #dfe7ec; border-radius: 19px; background: #f7f9fa; display: grid; grid-template-columns: 37px 1fr auto; align-items: center; gap: 9px; }
.my-wallet-binding > span { width: 37px; height: 37px; border-radius: 13px; background: #fff; display: grid; place-items: center; }
.my-wallet-binding > span img { width: 22px; height: 22px; }
.my-wallet-binding p { margin: 0; display: flex; flex-direction: column; gap: 3px; }
.my-wallet-binding small { color: var(--muted); font-size: 7px; letter-spacing: .1em; }
.my-wallet-binding b { font: 850 9px ui-monospace,SFMono-Regular,Menlo,monospace; }
.my-wallet-binding button { border: 0; background: transparent; color: #087bea; font-size: 8px; font-weight: 900; }

.my-qr-modal { display: flex; flex-direction: column; align-items: center; text-align: center; }
.my-qr-modal > img { width: 216px; height: 216px; padding: 13px; border: 1px solid #dfe7ec; border-radius: 26px; background: #fff; }
.my-qr-modal > small { margin-top: 14px; color: #087bea; font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.my-qr-modal > h3 { margin: 5px 0; font: 900 20px ui-monospace,SFMono-Regular,Menlo,monospace; }
.my-qr-modal > p { margin: 0 0 14px; color: var(--muted); font-size: 9px; }

.my-entry-card > span { overflow: hidden; background: #151515; }
.my-entry-card > span > img { width: 100%; height: 100%; object-fit: cover; }
.my-entry-card p > i { color: var(--muted); font: 750 7px ui-monospace,SFMono-Regular,Menlo,monospace; font-style: normal; }
.my-entry-card p > b { font-family: inherit; letter-spacing: 0; font-size: 11px; }

html[data-theme="dark"] .my-membership-strip,
html[data-theme="dark"] .my-assets-card,
html[data-theme="dark"] .my-detail-list { border-color: #2a3a43; background: #17232a; }
html[data-theme="dark"] .my-membership-strip { background: linear-gradient(135deg,rgba(30,45,53,.94),rgba(20,33,40,.86)); }
html[data-theme="dark"] .my-membership-strip > span,
html[data-theme="dark"] .my-asset-list > button > span,
html[data-theme="dark"] .my-token-preview > span,
html[data-theme="dark"] .my-detail-list > button > span { background: #202f37; }
html[data-theme="dark"] .my-asset-list > button,
html[data-theme="dark"] .my-token-preview,
html[data-theme="dark"] .my-detail-list > button { border-color: #263740; }
html[data-theme="dark"] .my-invite-card { border-color: #2a3c46; background: linear-gradient(145deg,#182730,#111e25); }
html[data-theme="dark"] .my-invite-copy button { border-color: #344650; background: rgba(255,255,255,.06); color: #d9e7ed; }
html[data-theme="dark"] .my-wallet-binding { border-color: #2a3a43; background: #162229; }
html[data-theme="dark"] .my-wallet-binding > span { background: #202f37; }

@media (max-width: 360px) {
  .my-identity-hero { grid-template-columns: 62px 1fr; }
  .my-avatar-button { width: 62px; height: 62px; border-radius: 20px; }
  .my-avatar-button > img { border-radius: 17px; }
  .my-edit-button { position: absolute; right: 13px; top: 12px; }
  .my-invite-card { grid-template-columns: 1fr 96px; }
  .my-qr-button { width: 96px; height: 96px; }
}