/* Matches .sheet-inner's own default max-width (the header's --content-max)
   exactly -- a narrower page-specific value here left this page's content
   short of the header's full width (see .settings-wide for the full
   rationale). Cards inside stay a readable width via max-width on
   .profile-hero/.profile's own card elements, not by shrinking this
   outer container. */
.profile-wide { max-width: var(--content-max); }
/* Single-column cards stay a comfortable reading width even though the
   outer container now matches the header's full 1280px -- otherwise a
   "Sign out" button (say) would sit alone in a page-wide box. */
.profile-hero, .profile-card { max-width: 640px; }
.profile-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.profile-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: #2a1810; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; flex: 0 0 auto; }
.profile-email { font-size: 19px; font-weight: 700; word-break: break-word; }
.profile-plan-tag { display: inline-flex; align-items: center; margin-top: 4px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(251,243,233,0.08); color: var(--muted); }
.profile-plan-tag.active { background: rgba(122,209,154,0.16); color: var(--good); }
.profile-plan-tag.canceling { background: rgba(255,125,125,0.14); color: var(--danger); }

.profile-card { border: 1px solid var(--hair); border-radius: 18px; background: rgba(251,243,233,0.03); padding: 20px; margin-bottom: 20px; }
.profile-card h2 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 14px; }
.profile-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--hair); font-size: 14px; }
.profile-row:last-child { border-bottom: 0; }
.profile-row .label { color: var(--muted); }
.profile-row .value { font-weight: 600; }
.profile-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

.profile-danger { border-color: rgba(255,125,125,0.28); background: rgba(255,125,125,0.05); }
.profile-danger h2 { color: var(--danger); }