.profile-view {
  background: #000;
}
.profile-view main {
  max-width: 760px;
  padding: calc(14px + env(safe-area-inset-top)) 12px 30px;
}
.profile-view:has(.profile-dialog-backdrop) main {
  position: relative;
  z-index: 40;
}
.profile-view:has(.profile-dialog-backdrop) .bottom-nav {
  visibility: hidden;
  pointer-events: none;
}
.profile-page {
  display: grid;
  gap: 14px;
  width: 100%;
  min-width: 0;
  color: #fff;
}
.profile-page:focus { outline: none; }
.profile-hero-card,
.profile-chakra-card,
.profile-details-card,
.profile-friends-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(150, 158, 184, .23);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(15, 18, 27, .98), rgba(7, 10, 17, .98));
  box-shadow: 0 14px 42px rgba(0, 0, 0, .24), inset 0 1px rgba(255, 255, 255, .015);
}
.profile-hero-card { display: grid; gap: 18px; padding: 16px; }
.profile-identity {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) minmax(174px, 39%);
  align-items: center;
  gap: 14px;
}
.profile-main-avatar {
  position: relative;
  display: grid;
  width: 76px;
  height: 76px;
  place-items: center;
  overflow: hidden;
  border: 2px solid rgba(221, 228, 255, .92);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #4d7dff, #7b46de);
  box-shadow: 0 0 0 4px rgba(92, 108, 255, .13), 0 0 22px rgba(77, 125, 255, .17);
  padding: 0;
  font-family: inherit;
  font-size: 23px;
  font-weight: 780;
  cursor: pointer;
}
.profile-main-avatar:focus-visible { outline: 2px solid #75a6ff; outline-offset: 3px; }
.profile-main-avatar img,
.profile-friend-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .16s ease;
}
.profile-main-avatar.has-image img,
.profile-friend-avatar.has-image img { opacity: 1; }
.profile-avatar-fallback { line-height: 1; }
.profile-identity-copy {
  display: flex;
  min-width: 0;
  min-height: 76px;
  flex-direction: column;
  justify-content: center;
}
.profile-identity-copy h2 {
  overflow: hidden;
  margin: 0;
  font-size: clamp(25px, 6vw, 33px);
  font-weight: 760;
  line-height: 1.08;
  letter-spacing: -.035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-identity-copy p {
  overflow: hidden;
  margin: 9px 0 0;
  color: rgba(228, 229, 239, .68);
  font-size: clamp(16px, 4.1vw, 20px);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 3px;
  border: 1px solid rgba(145, 151, 178, .2);
  border-radius: 999px;
  background: rgba(3, 4, 9, .72);
}
.profile-segmented button {
  min-width: 0;
  min-height: 48px;
  padding: 8px 10px;
  border-radius: 999px;
  color: rgba(235, 235, 244, .72);
  background: transparent;
  font-size: 16px;
  font-weight: 620;
  line-height: 1;
  transition: color .18s ease, background-color .18s ease;
}
.profile-segmented button[aria-selected="true"] {
  color: #fff;
  background: linear-gradient(145deg, rgba(95, 99, 117, .56), rgba(53, 56, 70, .7));
  box-shadow: inset 0 1px rgba(255, 255, 255, .055);
}
.profile-progress {
  display: grid;
  gap: 11px;
  padding: 15px 14px;
  border: 1px solid rgba(145, 151, 178, .14);
  border-radius: 21px;
  background: rgba(2, 4, 9, .34);
}
.profile-progress-title-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  color: rgba(231, 232, 241, .7);
  font-size: 16px;
}
.profile-help {
  display: grid;
  width: 31px;
  min-width: 31px;
  height: 31px;
  min-height: 31px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(200, 203, 222, .3);
  border-radius: 50%;
  color: rgba(226, 228, 240, .68);
  background: transparent;
  font-size: 16px;
}
.profile-progress-metrics {
  display: grid;
  grid-template-columns: minmax(60px, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.profile-level {
  color: #b04aff;
  font-size: 31px;
  font-weight: 720;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.profile-progress-track {
  display: block;
  height: 14px;
  overflow: hidden;
  border: 1px solid rgba(183, 186, 211, .28);
  border-radius: 999px;
  background: rgba(4, 5, 11, .82);
}
.profile-progress-fill {
  display: block;
  width: var(--profile-progress);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ba48ff 0%, #7649ff 46%, #414cff 100%);
  box-shadow: 0 0 13px rgba(126, 69, 255, .44);
}
.profile-progress-value {
  color: rgba(218, 219, 230, .52);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.profile-progress-value b { color: #bd55f6; font-weight: 570; }
.profile-tab-body { display: grid; gap: 14px; }
.profile-chakra-card {
  position: relative;
  display: grid;
  min-height: 360px;
  aspect-ratio: 1.22 / 1;
  place-items: center;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 45%, rgba(71, 33, 133, .27), transparent 48%),
    #05070d;
}
.profile-chakra-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: saturate(.98) contrast(1.02);
}
.profile-energy-overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.profile-energy-overlay.is-dynamic { opacity: 1; }
.profile-energy-channel {
  position: absolute;
  width: 3px;
  height: 69%;
  top: 13%;
  left: 50%;
  border-radius: 999px;
  background: linear-gradient(to top, #f33, #ff8b19, #ffd21e, #70df2b, #2bd7f2, #3977ff, #a349ff);
  transform: translateX(-50%);
  filter: drop-shadow(0 0 5px currentColor);
}
.profile-energy-sphere { position: absolute; left: 50%; width: 18px; height: 18px; border-radius: 50%; transform: translate(-50%, 50%); }
.profile-energy-root { bottom: 17%; background: #ff2e2e; }
.profile-energy-sacral { bottom: 28%; background: #ff8b18; }
.profile-energy-solar { bottom: 39%; background: #ffd21e; }
.profile-energy-heart { bottom: 50%; background: #67e52e; }
.profile-energy-throat { bottom: 61%; background: #2bd7f2; }
.profile-energy-third-eye { bottom: 72%; background: #3977ff; }
.profile-energy-crown { bottom: 83%; background: #a349ff; }
.profile-details-card { padding: 4px 16px; }
.profile-detail-row {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 69px;
  grid-template-columns: 38px minmax(0, 1fr) 23px;
  align-items: center;
  gap: 11px;
  padding: 8px 2px;
  overflow: visible;
  border-bottom: 1px solid rgba(163, 169, 191, .13);
  color: #fff;
  background: transparent;
  text-align: left;
}
.profile-detail-row:last-child { border-bottom: 0; }
.profile-detail-icon,
.profile-detail-chevron {
  display: grid;
  place-items: center;
  color: rgba(230, 232, 241, .72);
}
.profile-detail-icon svg { width: 29px; height: 29px; stroke-width: 1.7; }
.profile-detail-chevron svg { width: 21px; height: 21px; }
.profile-detail-copy { display: grid; min-width: 0; gap: 3px; }
.profile-detail-copy strong { overflow: hidden; font-size: 17px; font-weight: 540; text-overflow: ellipsis; white-space: nowrap; }
.profile-detail-copy small { overflow: hidden; color: rgba(220, 222, 234, .46); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.profile-primary {
  display: flex;
  width: calc(100% - 4px);
  min-height: 62px;
  align-items: center;
  justify-content: center;
  gap: 11px;
  margin: 0 auto;
  padding: 12px 18px;
  border: 1px solid rgba(190, 75, 255, .92);
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(100deg, #422087 0%, #6c24b7 46%, #3c176f 100%);
  box-shadow: 0 0 21px rgba(154, 52, 255, .27), inset 0 1px rgba(255, 255, 255, .08);
  font-size: clamp(16px, 4vw, 20px);
  font-weight: 680;
}
.profile-primary-icon { display: grid; flex: 0 0 auto; place-items: center; }
.profile-primary-icon svg { width: 28px; height: 28px; }
.profile-friends-card { padding: 15px 16px 7px; }
.profile-friends-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 2px 10px;
}
.profile-friends-heading h2 { min-width: 0; margin: 0; color: rgba(230, 231, 241, .75); font-size: 18px; font-weight: 530; }
.profile-friends-heading strong { flex: 0 0 auto; color: #bd55f6; font-size: 14px; font-weight: 560; }
.profile-friends-list { display: grid; max-height: min(56dvh, 640px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(125, 86, 205, .42) transparent; }
.profile-friend-row {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 69px;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 7px 0;
  overflow: visible;
  border-bottom: 1px solid rgba(163, 169, 191, .12);
  color: #fff;
  background: transparent;
  text-align: left;
}
.profile-friend-row:last-child { border-bottom: 0; }
.profile-friend-avatar {
  position: relative;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  color: #e6e8f2;
  background: #171a24;
  font-size: 13px;
  font-weight: 700;
}
.profile-friend-name { overflow: hidden; font-size: 16px; font-weight: 520; text-overflow: ellipsis; white-space: nowrap; }
.profile-payment-badge {
  display: inline-flex;
  min-height: 33px;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 530;
  white-space: nowrap;
}
.profile-payment-badge.is-paid { color: #31e995; background: rgba(0, 112, 65, .33); }
.profile-payment-badge.is-unpaid { color: rgba(225, 222, 239, .74); background: rgba(92, 91, 108, .23); }
.profile-payment-icon { display: grid; }
.profile-payment-icon svg { width: 18px; height: 18px; }
.profile-friends-empty { display: grid; min-height: 250px; align-content: center; justify-items: center; gap: 13px; padding: 28px 18px; text-align: center; }
.profile-friends-empty p { max-width: 340px; margin: 0; color: rgba(222, 224, 236, .55); font-size: 14px; line-height: 1.5; }
.profile-empty-icon { display: grid; width: 56px; height: 56px; place-items: center; border: 1px solid rgba(176, 77, 247, .28); border-radius: 50%; color: #ad54e8; background: rgba(111, 42, 158, .12); }
.profile-empty-icon svg { width: 28px; height: 28px; }
.profile-list-state { margin: 18px 0; color: rgba(222, 224, 236, .58); text-align: center; }
.profile-load-more { width: 100%; min-height: 48px; border-top: 1px solid rgba(163, 169, 191, .12); color: #bd55f6; background: transparent; }
.profile-state { display: grid; min-height: 280px; align-content: center; justify-items: center; gap: 12px; padding: 24px; color: rgba(225, 227, 238, .66); text-align: center; }
.profile-state h2, .profile-state p { margin: 0; }
.profile-dialog-backdrop {
  position: fixed;
  z-index: 1350;
  inset: 0;
  display: grid;
  align-items: end;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, .76);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.profile-dialog {
  position: relative;
  display: grid;
  width: min(100%, 480px);
  max-height: calc(100dvh - 24px - env(safe-area-inset-top));
  gap: 17px;
  margin: 0 auto;
  padding: 22px;
  overflow-y: auto;
  border: 1px solid rgba(160, 90, 232, .4);
  border-radius: 26px;
  color: #fff;
  background: #10131d;
  box-shadow: 0 18px 70px rgba(0, 0, 0, .55), 0 0 26px rgba(128, 55, 207, .13);
}
.profile-dialog h2 { margin: 0; padding-right: 44px; font-size: 23px; }
.profile-dialog-copy { margin: 2px 0 8px; color: rgba(235, 235, 244, .78); font-size: 17px; line-height: 1.5; }
.profile-dialog-close { position: absolute; top: 13px; right: 13px; display: grid; width: 44px; height: 44px; place-items: center; padding: 0; border: 0; border-radius: 14px; color: rgba(232, 232, 240, .68); background: transparent; }
.profile-dialog-close svg { width: 21px; height: 21px; }
.profile-editor-form { display: grid; min-width: 0; gap: 17px; }
.profile-weight-editor { display: grid; grid-template-columns: minmax(0, 1fr) 116px; gap: 9px; }
.profile-form-label { display: grid; gap: 8px; color: rgba(227, 228, 238, .68); font-size: 13px; }
.profile-form-control {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 10px 13px;
  border: 1px solid rgba(175, 179, 203, .18);
  border-radius: 15px;
  outline: 0;
  color: #fff;
  background: #080b12;
  color-scheme: dark;
  font: inherit;
  font-size: 16px;
}
.profile-form-control[type="date"],
.profile-form-control[type="time"] { -webkit-appearance: none; appearance: none; }
.profile-form-control:focus { border-color: rgba(162, 80, 235, .72); box-shadow: 0 0 0 3px rgba(152, 69, 225, .12); }
.profile-dialog-actions { display: grid; grid-template-columns: 1fr 1.25fr; gap: 9px; }
.profile-dialog-actions button,
.profile-dialog-save { min-height: 49px; border-radius: 15px; font-weight: 680; }
.profile-dialog-cancel { border: 1px solid rgba(255, 255, 255, .1); color: rgba(231, 232, 241, .72); background: transparent; }
.profile-dialog-save { padding: 10px 16px; border: 1px solid rgba(184, 80, 255, .36); color: #fff; background: #6a2aa4; }
.profile-dialog-save:disabled { opacity: .55; }
.profile-toast {
  position: fixed;
  z-index: 1450;
  right: 14px;
  bottom: calc(104px + env(safe-area-inset-bottom));
  left: 14px;
  width: min(calc(100% - 28px), 460px);
  margin: 0 auto;
  padding: 12px 16px;
  border: 1px solid rgba(171, 85, 235, .34);
  border-radius: 15px;
  color: #f5ebff;
  background: #29163e;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .42);
  text-align: center;
}

@media (max-width: 560px) {
  .profile-view main { padding-right: 10px; padding-left: 10px; }
  .profile-page { gap: 12px; }
  .profile-hero-card { gap: 14px; padding: 13px; border-radius: 26px; }
  .profile-identity { grid-template-columns: 68px minmax(0, 1fr); gap: 12px; }
  .profile-main-avatar { width: 68px; height: 68px; }
  .profile-identity-copy { min-height: 68px; }
  .profile-identity-copy h2 { font-size: clamp(22px, 6.5vw, 28px); }
  .profile-identity-copy p { margin-top: 6px; font-size: 15px; }
  .profile-segmented { grid-column: 1 / -1; width: 100%; }
  .profile-segmented button { min-height: 45px; }
  .profile-progress { padding: 13px 12px; }
  .profile-progress-metrics { grid-template-columns: minmax(44px, 1fr) auto; gap: 9px; }
  .profile-level { font-size: 28px; }
  .profile-progress-value { font-size: 12px; }
  .profile-chakra-card { min-height: 290px; border-radius: 25px; }
  .profile-details-card, .profile-friends-card { border-radius: 25px; }
  .profile-primary { min-height: 58px; border-radius: 20px; }
}

@media (max-width: 360px) {
  .profile-progress-metrics { grid-template-columns: minmax(36px, 1fr) auto; gap: 6px; }
  .profile-progress-value { font-size: 10.5px; }
  .profile-friends-card { padding-right: 12px; padding-left: 12px; }
  .profile-friend-row { grid-template-columns: 42px minmax(0, 1fr) auto; gap: 8px; }
  .profile-friend-avatar { width: 42px; height: 42px; }
  .profile-friend-name { font-size: 14px; }
  .profile-payment-badge { padding-right: 8px; padding-left: 8px; font-size: 10.5px; }
  .profile-weight-editor { grid-template-columns: minmax(0, 1fr) 98px; }
}