/* ---------- Profile tab ---------- */
.profile-view {
  min-height: 100%;
  padding-bottom: calc(var(--bottom-nav-clearance) + var(--space-5));
}

.page-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: clamp(56px, 13vw, 68px);
  padding: env(safe-area-inset-top) var(--container-padding) 0;
  background: linear-gradient(180deg, var(--color-bg) 70%, rgba(6, 7, 10, 0));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.page-title {
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.profile-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: 100%;
  max-width: 42rem;
  margin-inline: auto;
  padding: var(--space-4) var(--container-padding) 0;
}

/* ---------- Account card ---------- */
.profile-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(215, 163, 92, 0.16) 0%, rgba(215, 163, 92, 0) 58%),
    var(--color-bg-elevated);
}

.profile-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: clamp(3.25rem, 15vw, 4rem);
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, var(--color-accent-strong), var(--color-accent));
  color: var(--color-accent-contrast);
  font-size: var(--fs-xl);
  font-weight: 800;
  line-height: 1;
}

.profile-identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.profile-name {
  font-size: var(--fs-md);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* `@username` is stored and rendered in correct logical order (see
   profile.js), but inside an RTL document the bidi algorithm reorders the
   weak `@` relative to the strong-LTR username that follows it, rendering
   as "username@" instead — the same class of mixed-content bug the RTL
   pass was otherwise careful about elsewhere (card-fa-title, hero titles).
   `unicode-bidi: plaintext` resolves this element's own direction from its
   first strong character instead of inheriting the ancestor's, which keeps
   "@username" (and the "ID {id}" fallback) in the correct visual order. */
.profile-sub {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  unicode-bidi: plaintext;
}

.profile-plan {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--color-text-tertiary);
}

.profile-plan svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ---------- Menu ---------- */
.profile-menu {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  overflow: hidden;
}

.profile-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-4);
  text-align: start;
  color: var(--color-text);
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.profile-row + .profile-row {
  border-top: 1px solid var(--color-border);
}

.profile-row:hover,
.profile-row:focus-visible {
  background: var(--color-surface-hover);
}

.profile-row:active {
  background: var(--color-surface);
}

.profile-row-icon {
  display: flex;
  flex-shrink: 0;
  color: var(--color-accent-strong);
}

.profile-row-icon svg {
  width: 20px;
  height: 20px;
}

.profile-row-label {
  flex: 1;
  font-size: var(--fs-base);
  font-weight: 600;
}

.profile-row-chevron {
  display: flex;
  flex-shrink: 0;
  color: var(--color-text-tertiary);
}

.profile-row-chevron svg {
  width: 18px;
  height: 18px;
}

/* ---------- Logout ---------- */
.btn-danger {
  background: rgba(229, 98, 106, 0.12);
  border: 1px solid rgba(229, 98, 106, 0.35);
  color: var(--color-danger);
}

.btn-danger:hover,
.btn-danger:focus-visible {
  background: rgba(229, 98, 106, 0.2);
}

.profile-logout {
  width: 100%;
  min-height: var(--tap-min);
}

.profile-logout svg {
  width: 18px;
  height: 18px;
}

.profile-logout.is-busy {
  opacity: 0.6;
  pointer-events: none;
}

.profile-version {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--color-text-tertiary);
}