main{gap: 32px;}

/* info */
#info{gap: 64px;}

#info > header,
#info > section{display: grid; gap: 16px;}

#info > header > div,
#info > section > div{display: grid; gap: 16px;}

/* dashboard */
#account_dashboard{gap: 48px;}
#account_dashboard header{display: flex; justify-content: space-between;}
#account_dashboard header #toolbar{display: flex; justify-content: end; gap: 8px;}
#account_dashboard header #toolbar > a{width: fit-content; padding: 12px; border: none;}
#account_dashboard header #toolbar > a.logout{background: rgb(150, 30, 30);}

#account_dashboard #page_select{display: flex; justify-content: center; gap: 32px;}

#account_dashboard .button{display: grid; background: var(--img_bg); width: 280px; grid-template-rows: auto auto; border-radius: 32px; text-align: center; box-shadow: 0 4px 8px rgba(0,0,0,0.1); text-decoration: none; color: inherit; transition: all 0.3s ease; font-weight: bold;}
#account_dashboard .button:hover,
#account_dashboard .button:focus{box-shadow: 0 8px 16px rgba(0,0,0,0.2); transform: translateY(-4px);}
#account_dashboard .button > div{padding: 16px; border-top: 1px solid;}

#account_dashboard .button > img{width: 100%; height: 200px; border-radius: 32px 32px 0 0; padding: 8px; object-fit: contain;}
#account_dashboard .button.profile > img{padding: 0; object-fit: cover;}

/* gateway */
#gateway{display: grid; gap: 16px;}

/* settings */
html:has(#settings){scroll-behavior: auto;}

/* profile_create_update */
#profile_create_update #buttons{display: grid; grid-template-columns: 3fr 1fr; gap: 16px;}
#profile_create_update #buttons > button:nth-child(1){background: rgba(0,255,0,0.1);}
#profile_create_update #buttons > button:nth-child(2){background: rgba(255,0,0,0.1);}

/* manage_profiles */
#manage_profiles{gap: 16px;}

#manage_profiles #main:has(#no_profile_message){height: 160px; background: var(--body_gradient_02); border-radius: 16px; place-items: center;}
#manage_profiles #main #no_profile_message{font-size: 1.5rem;}

#manage_profiles #toolbar{display: flex; gap: 8px; justify-content: space-between; align-items: center;}
#manage_profiles #toolbar > div{display: flex; gap: 8px;}

#manage_profiles .button{background: var(--img_bg); line-height: 1rem; font-size: 1rem; padding: 8px 16px; border-radius: 50px; text-align: center; border: none; color: inherit; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: 0.2s;}
#manage_profiles .button:hover,
#manage_profiles .button:focus{box-shadow: 0 2px 4px rgba(0,0,0,0.25);}

#manage_profiles form{padding: 0; gap: 6px; background: transparent; align-content: center;}

#manage_profiles .button_profile{border-radius: 32px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); text-decoration: none; color: inherit; transition: all 0.3s ease; font-weight: bold;}
#manage_profiles .button_profile:hover,
#manage_profiles .button_profile:focus{box-shadow: 0 8px 16px rgba(0,0,0,0.2); transform: translateY(-4px);}

#manage_profiles .button_profile{background: var(--img_bg); display: flex; align-items: center; gap: 16px; text-decoration: none; color: inherit; font-weight: bold; font-size: 1.25rem; padding: 16px;}
#manage_profiles .button_profile > img{width: 64px; height: 64px; border-radius: 50px;}

#manage_profiles > section:nth-child(3){display: grid; gap: 32px;}
#manage_profiles > section:nth-child(3) > div{display: grid; grid-template-columns: 1fr auto; gap: 16px;}




/* socials */
#socials #display_socials{display: grid; gap: 16px;}
#socials #display_socials > a{background: var(--img_bg); padding: 16px; border-radius: 16px; display: flex; align-items: center; gap: 16px;}
#socials #display_socials > a > img{width: 32px; height: 32px; border-radius: 8px;}