.profile-shell {
max-width:1120px}

.profile-shell>.page-title {
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:16px;
margin-bottom:28px}

.profile-heading h1 {
font-size:29px}

.profile-layout-note {
display:flex;
align-items:center;
gap:6px;
color:var(--muted);
font-size:11px}

.profile-layout-note .icon {
width:15px;
height:15px}

.account-layout {
display:grid;
grid-template-columns:232px minmax(0,1fr);
gap:26px;
align-items:start}

.account-sidebar {
padding:25px 14px 12px;
position:sticky;
top:100px}

.account-identity {
text-align:center;
padding:3px 0 25px}

.large-avatar {
display:inline-flex;
align-items:center;
justify-content:center;
width:62px;
height:62px;
border-radius:21px;
background:var(--blue-soft);
color:var(--blue);
font:500 27px var(--display-font);
margin-bottom:13px;
box-shadow:0 0 0 6px var(--bg)}

.account-identity h2 {
font-size:17px;
margin-bottom:10px;
word-break:break-word}

.account-sidebar nav {
display:flex;
flex-direction:column;
gap:7px}

.account-sidebar nav a {
display:flex;
align-items:center;
gap:10px;
padding:12px 13px;
color:var(--muted);
font-size:12px;
border-radius:11px}

.account-sidebar nav a:hover {
background:var(--bg);
color:var(--text)}

.account-sidebar nav a.active {
background:var(--blue-soft);
color:var(--blue)}

.account-sidebar nav a>.icon {
width:17px;
height:17px}

.account-sidebar nav a>.icon:last-child {
margin-left:auto;
width:13px}

.logout-button {
display:flex;
width:100%;
align-items:center;
gap:10px;
padding:16px 13px;
margin-top:20px;
border-top:1px solid var(--line);
background:transparent;
color:var(--muted);
font-size:12px}

.logout-button:hover {
color:var(--red)}

.logout-button .icon {
width:17px}

.account-content {
display:flex;
flex-direction:column;
gap:22px;
min-width:0;
animation:page-in .45s var(--ease)}

.account-metrics {
display:grid;
grid-template-columns:1fr 1fr;
gap:22px}

.account-metric {
padding:25px 28px;
position:relative}

.account-metric>span {
font-size:12px;
color:var(--muted)}

.account-metric .metric-hint {
font-size:10px;
color:var(--blue);
white-space:nowrap}

.account-metric strong {
display:block;
font:500 37px var(--display-font);
margin:14px 0 10px;
color:var(--text)}

.account-metric strong small {
font-size:12px;
color:var(--muted);
margin-left:9px;
font-family:var(--body-font)}

.account-metric p {
font-size:11px;
color:var(--muted)}

.account-section {
padding:28px 31px}

.account-section h2 {
font-size:18px}

.vip-overview {
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
background:linear-gradient(110deg,var(--blue-soft),var(--surface))}

.vip-overview .eyebrow {
color:var(--blue);
font-size:9px}

.vip-overview h2 {
margin:11px 0;
font-size:18px}

.vip-overview p {
font-size:12px;
color:var(--muted)}

.vip-overview .button {
font-size:12px;
flex-shrink:0}

.account-facts {
margin:0}

.account-facts>div {
display:flex;
justify-content:space-between;
gap:20px;
padding:15px 0;
font-size:12px;
border-bottom:1px solid var(--line)}

.account-facts>div:last-child {
border:0;
padding-bottom:0}

.account-facts dt {
color:var(--muted)}

.account-facts dd {
margin:0;
text-align:right;
overflow-wrap:anywhere;
font-variant-numeric:tabular-nums}

.vip-detail {
background:linear-gradient(120deg,var(--blue-soft),var(--surface));
padding:33px}

.vip-detail .eyebrow {
color:var(--blue)}

.vip-detail h2 {
font-size:24px;
margin:14px 0}

.vip-detail>p {
font-size:13px;
color:var(--muted)}

.vip-validity {
padding-top:23px;
margin-top:26px;
border-top:1px solid var(--line)}

.vip-validity span,.vip-validity strong {
display:block}

.vip-validity span {
font-size:11px;
color:var(--muted);
margin-bottom:9px}

.vip-validity strong {
font:500 22px var(--display-font)}

.redeem-button {
margin-top:23px}

.security-hint {
margin-bottom:25px}

.account-section form {
max-width:570px}