:root{
  --pink-header: rgba(216,138,151,0.47);
  --pink-light: #fec8c8;
  --pink-label: #d88a97;
  --pink-title: #d88a98;
  --pink-input-bg: rgba(255,215,215,0.46);
  --pink-glow: #ffecf0f3;
  --pink-link: #d78996;
  --text-black: #1a1a1a;
}

*{ box-sizing: border-box; }

html, body{
  margin:0;
  padding:0;
  height:100%;
  width:100%;
  background:#ffffff;
  font-family:'Be Vietnam Pro', sans-serif;
  color:var(--text-black);
  overflow-x:hidden;
}

a{ text-decoration:none; color:inherit; }

/* ===== estrutura geral (preenche a tela toda) ===== */
.page{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  width:100%;
}

/* ===== cabeçalho ===== */
.topbar{
  flex:0 0 auto;
  width:100%;
  background:var(--pink-header);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: clamp(8px,1.4vw,14px) clamp(20px,4vw,60px);
  flex-wrap:wrap;
  row-gap:8px;
}

.logo{
  line-height:1;
  white-space:nowrap;
}
.logo .lux{ font-family:'Luxurious Script', cursive; font-size:clamp(24px,2.6vw,44px); }
.logo .ita{ font-family:'Italiana', serif; font-size:clamp(18px,2vw,32px); letter-spacing:1px; }
.logo .imp{ font-family:'Imperial Script', cursive; font-size:clamp(24px,2.6vw,44px); }

.navlinks{
  display:flex;
  gap:clamp(16px,2.6vw,44px);
  flex-wrap:wrap;
  justify-content:center;
}
.nav-item{
  position:relative;
  font-family:'Afacad Flux', sans-serif;
  font-size:clamp(16px,1.6vw,26px);
  font-weight:400;
  color:var(--text-black);
  padding-bottom:2px;
}
.nav-item::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:0%;
  height:2px;
  background:currentColor;
  transition:width .25s ease;
}
.nav-link{
  cursor:pointer;
  transition:opacity .2s ease;
}
.nav-link:hover{ opacity:0.7; }
.nav-link:hover::after,
.nav-item:hover::after{ width:100%; }

.icons{
  display:flex;
  align-items:center;
  gap:clamp(12px,1.6vw,22px);
}
.icons svg{
  width:clamp(20px,1.8vw,26px);
  height:clamp(20px,1.8vw,26px);
  fill:none;
  stroke:#1a1a1a;
  stroke-width:1.8;
}

/* ===== corpo: card do formulário ===== */
.profile-main{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:clamp(24px,4vw,60px) clamp(16px,3vw,40px);
}

.profile-card{
  position:relative;
  width:100%;
  max-width:560px;
  background:#ffffff;
  border-radius:20px;
  padding:clamp(28px,4vw,50px) clamp(24px,4vw,48px);
  display:flex;
  flex-direction:column;
  align-items:center;
  box-shadow:0 0 60px 12px var(--pink-glow);
}

.avatar-wrap{
  width:clamp(110px,14vw,160px);
  aspect-ratio:1/1;
  margin-bottom:clamp(14px,2vw,20px);
}
.avatar-icon{
  width:100%;
  height:100%;
  border-radius:50%;
  overflow:hidden;
}

.avatar-link{
  color:rgba(0,0,0,0.28);
  font-size:clamp(15px,1.5vw,20px);
  margin-bottom:clamp(24px,3.4vw,36px);
  transition:color .2s ease;
}
.avatar-link:hover{ color:var(--pink-label); }

form{ width:100%; }

.field{
  margin-bottom:clamp(14px,2vw,20px);
}
.field label{
  display:block;
  color:var(--pink-label);
  font-size:clamp(16px,1.6vw,22px);
  margin-bottom:6px;
  font-weight:500;
}
.field input{
  width:100%;
  border:none;
  outline:none;
  background:var(--pink-input-bg);
  border-radius:36px;
  height:clamp(46px, 5.4vw, 60px);
  padding:0 clamp(18px, 2.4vw, 26px);
  font-family:'Be Vietnam Pro', sans-serif;
  font-size:clamp(15px, 1.5vw, 19px);
  color:#8a4a55;
  transition:box-shadow .2s ease, background .2s ease;
}
.field input::placeholder{ color:var(--pink-header); }
.field input:focus{
  box-shadow:0 0 0 3px rgba(254,200,200,0.6);
  background:rgba(249,208,213,0.55);
}

.forgot-link{
  display:block;
  text-align:center;
  color:var(--pink-link);
  font-size:clamp(15px,1.5vw,20px);
  margin:clamp(10px,1.6vw,16px) 0 clamp(24px,3vw,30px) 0;
}
.forgot-link:hover{ text-decoration:underline; }

/* ===== botão "Editar" — mesma linguagem de animação do site ===== */
.btn-editar{
  display:block;
  width:100%;
  max-width:340px;
  margin:0 auto;
  border:none;
  cursor:pointer;
  background:var(--pink-label);
  color:#ffffff;
  font-family:'Be Vietnam Pro', sans-serif;
  font-weight:600;
  font-size:clamp(18px,2vw,24px);
  border-radius:11px;
  height:clamp(54px, 6vw, 72px);
  transition:transform .15s ease, background .2s ease, box-shadow .2s ease;
  animation: btn-respirar 2.6s ease-in-out infinite;
}
.btn-editar:hover{
  background:#c67a87;
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 6px 16px rgba(216,138,151,0.4);
  animation-play-state:paused;
}
.btn-editar:active{
  transform:scale(0.94);
  transition:transform .1s ease;
}
@keyframes btn-respirar{
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.025); }
}

/* ===== responsivo ===== */
@media (max-width: 900px){
  .navlinks{ order:3; width:100%; justify-content:center; }
  .icons{ order:2; }
}

@media (max-width: 640px){
  .profile-card{
    border-radius:16px;
    box-shadow:0 0 40px 8px var(--pink-glow);
  }
}

@media (max-width: 360px){
  .profile-card{ padding:24px 18px; }
  .avatar-wrap{ width:100px; }
}