:root {
  --profile-purple: #9875fb;
  --profile-purple-dark: #7e5deb;
  --profile-ink: #111116;
  --profile-muted: #656873;
  --profile-bg: #f5f6f8;
  --profile-line: #ececf1;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--profile-bg); }
body {
  min-width: 320px;
  margin: 0;
  padding-bottom: calc(67px + env(safe-area-inset-bottom));
  color: var(--profile-ink);
  background: var(--profile-bg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.modal-open { overflow: hidden; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
svg { display: block; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
[hidden] { display: none !important; }

.profile-app { width: min(100%, 750px); min-height: 100vh; margin: 0 auto; background: var(--profile-bg); }
.profile-hero {
  position: relative;
  height: 167px;
  padding: max(41px, calc(env(safe-area-inset-top) + 25px)) 31px 20px;
  color: #fff;
  background:
    radial-gradient(circle at 89% 78%, rgba(226, 212, 255, .48) 0 29%, transparent 30%),
    radial-gradient(circle at 12% 11%, rgba(255, 255, 255, .17) 0 29%, transparent 30%),
    linear-gradient(148deg, #956df5 0%, #9e77f9 50%, #c7b4ff 100%);
  border-radius: 0 0 9px 9px;
}
.profile-back { position: absolute; top: max(13px, env(safe-area-inset-top)); left: 18px; width: 30px; height: 30px; display: none; place-items: center; color: rgba(255,255,255,.82); background: transparent; }
.profile-back svg { width: 19px; height: 19px; stroke-width: 2.2; }
.profile-user { display: flex; align-items: center; gap: 15px; }
.profile-avatar { width: 62px; height: 62px; display: grid; place-items: center; flex: 0 0 auto; border: 2px solid rgba(255,255,255,.85); border-radius: 50%; color: #9c79ed; background: rgba(255,255,255,.62); box-shadow: 0 2px 1px rgba(99, 64, 190, .13); }
.profile-avatar span { position: relative; width: 30px; height: 30px; display: block; border-radius: 50%; background: #c8b3ff; font-size: 0; }
.profile-avatar span::before { content: ""; position: absolute; top: 7px; left: 11px; width: 8px; height: 8px; border-radius: 50%; background: #a17df4; }
.profile-avatar span::after { content: ""; position: absolute; right: 6px; bottom: 5px; left: 6px; height: 7px; border-radius: 8px 8px 5px 5px; background: #a17df4; }
.profile-user-copy { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.profile-user-copy strong { font-size: 17px; font-weight: 750; line-height: 1; }
.profile-user-copy span { color: rgba(255,255,255,.94); font-size: 11px; font-weight: 550; letter-spacing: .01em; }
.profile-sign-in { position: absolute; top: 57px; right: 31px; min-width: 77px; min-height: 33px; padding: 0 14px; border-radius: 999px; color: var(--profile-purple); background: rgba(255,255,255,.91); font-size: 14px; font-weight: 750; box-shadow: 0 2px 6px rgba(103,72,188,.08); }
.profile-sign-in:hover { background: #fff; }

.profile-main { position: relative; z-index: 2; width: calc(100% - 20px); margin: -35px auto 0; }
.profile-wallet-card { padding: 16px 11px 8px; border-radius: 9px; background: #fff; box-shadow: 0 3px 13px rgba(30, 34, 46, .035); }
.wallet-heading { display: flex; align-items: center; min-height: 32px; gap: 10px; padding: 0 8px; }
.wallet-heading-icon { width: 24px; height: 24px; display: grid; place-items: center; color: #fc759c; }
.wallet-heading-icon svg { width: 23px; height: 23px; stroke-width: 1.65; }
.wallet-heading h1 { margin: 0; font-size: 17px; font-weight: 780; line-height: 1; }
.wallet-balance { display: inline-flex; align-items: baseline; gap: 5px; margin-left: auto; color: #54565e; font-size: 12px; }
.wallet-balance strong { color: #050507; font-size: 17px; font-weight: 800; }
.wallet-balance strong:nth-of-type(2) { color: #e9a82d; margin-left: 7px; }
.profile-top-up { min-width: 76px; min-height: 34px; display: inline-grid; place-items: center; margin-left: 1px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #a17afc, #8e66ef); font-size: 13px; font-weight: 780; }
.profile-top-up:hover { background: #805ce6; }
.profile-membership { margin-top: 14px; }
.profile-menu-card { margin-top: 11px; padding: 0 21px; border-radius: 9px; background: #fff; box-shadow: 0 3px 13px rgba(30, 34, 46, .035); }
.profile-menu-row { min-height: 63px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--profile-line); }
.profile-menu-row:last-child { border-bottom: 0; }
.profile-menu-row strong { font-size: 16px; font-weight: 720; }
.profile-menu-icon { width: 18px; height: 18px; display: grid; place-items: center; flex: 0 0 auto; }
.profile-menu-icon svg { width: 18px; height: 18px; stroke-width: 1.65; }
.profile-menu-icon.blue { color: #5b62ff; }
.profile-menu-icon.violet { color: #7657f8; }
.profile-menu-icon.lavender { color: #7c67e7; }
.profile-menu-icon.lilac { color: #8360e6; }
.profile-menu-arrow { width: 17px; height: 17px; margin-left: auto; color: #999da8; stroke-width: 2; }
.profile-menu-row:hover strong { color: #8666ec; }

.profile-bottom-nav { position: fixed; z-index: 20; right: 0; bottom: 0; left: 0; height: calc(67px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(4, 1fr); align-items: start; padding: 9px max(17px, calc((100vw - 750px) / 2 + 17px)) env(safe-area-inset-bottom); border-top: 1px solid #f0f0f2; background: rgba(255,255,255,.98); }
.profile-bottom-item { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; color: #777b87; font-size: 11px; line-height: 1; }
.profile-bottom-item img { width: 24px; height: 24px; object-fit: contain; }
.profile-bottom-item.active { color: #9771f8; font-weight: 700; }
.profile-bottom-item.active img { filter: none; }

.profile-editor-layer { position: fixed; z-index: 250; inset: 0; display: grid; place-items: center; padding: 20px; }
.profile-editor-backdrop { position: absolute; inset: 0; background: rgba(20, 18, 33, .42); }
.profile-editor { position: relative; width: min(100%, 360px); padding: 24px 20px 20px; border-radius: 18px; background: #fff; box-shadow: 0 20px 50px rgba(35, 27, 63, .2); }
.profile-editor h2 { margin: 0 0 18px; font-size: 20px; }
.profile-editor-close { position: absolute; top: 12px; right: 13px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #838693; background: #f2f2f6; }
.profile-editor-close svg { width: 16px; height: 16px; }
.profile-editor label { display: flex; flex-direction: column; gap: 7px; color: #626571; font-size: 12px; }
.profile-editor input { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid #e3e3ea; border-radius: 9px; color: #20212a; outline: none; }
.profile-editor input:focus { border-color: #9b78f8; box-shadow: 0 0 0 3px rgba(155,120,248,.15); }
.profile-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.profile-form-actions button { min-height: 37px; padding: 0 16px; border-radius: 9px; color: #777987; background: #f2f2f7; font-size: 13px; font-weight: 650; }
.profile-form-actions button[type="submit"] { color: #fff; background: #9672f6; }
.toast { position: fixed; z-index: 400; right: 50%; bottom: calc(82px + env(safe-area-inset-bottom)); max-width: calc(100% - 40px); padding: 10px 14px; border-radius: 9px; color: #fff; background: rgba(24,24,31,.84); font-size: 12px; opacity: 0; pointer-events: none; transform: translate(50%, 8px); transition: opacity .18s ease, transform .18s ease; }
.toast.visible { opacity: 1; transform: translate(50%, 0); }

@media (min-width: 751px) {
  .profile-bottom-nav { left: 50%; width: min(100%, 750px); right: auto; transform: translateX(-50%); }
}
@media (max-width: 360px) {
  .profile-hero { padding-inline: 21px; }
  .profile-sign-in { right: 21px; }
  .profile-user { gap: 11px; }
  .profile-avatar { width: 57px; height: 57px; }
  .wallet-heading { gap: 6px; padding-inline: 3px; }
  .wallet-heading h1 { font-size: 16px; }
  .profile-top-up { min-width: 70px; }
  .profile-menu-card { padding-inline: 16px; }
}