.invoice{
  max-width:900px;
  margin:0 auto;
  padding:2rem;
  display:grid;
  gap:1.5rem;
}

.invoice__form{
  display:grid;
  gap:1.25rem;
  max-height:70vh;
  overflow-y:auto;
  padding-right:.5rem;
}

.invoice__group{display:flex;flex-direction:column;}

.invoice__input,
.invoice__textarea,
.invoice__select{
  color-scheme:dark;
  font:inherit;
  padding:.6rem .8rem;
  border:2px solid #ffffff60;
  border-radius:6px;
  background:#ffffff10;
  color:#fff;
}

.invoice__select option{background:#1f1c2c;color:#fff;}

.invoice__textarea{min-height:7.5rem;resize:vertical;}

.invoice__add-row{
  background:none;
  border:2px dashed #ffffff60;
  border-radius:6px;
  color:#fff;
  padding:.5rem .9rem;
  cursor:pointer;
}

.invoice__submit{
  padding:.8rem 1.4rem;
  font-weight:600;
  border:2px solid #ff004c;
  border-radius:9999px;
  background:#ff004c;
  color:#fff;
  cursor:pointer;
}

.invoice__items{display:block;}

.items-table{
  width:100%;
  border-collapse:collapse;
  text-align:left;
}
.items-table th,
.items-table td{
  padding:.5rem .6rem;
  border:1px solid #ffffff60;
}

.back-projects{
  position:fixed;
  top:1.2rem;
  left:1.2rem;
  width:3.2rem;
  height:3.2rem;
  border:2px solid #ffffff60;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#ffffff10;
  transition:transform .2s ease,border-color .2s ease;
}
.back-projects a{
  color:#ffffffd0;
  font-size:1.4rem;
  line-height:1;
}
.back-projects:hover,
.back-projects:focus{
  transform:scale(1.15) rotate(-4deg);
  border-color:#ff004c;
  color:#ff004c;
}

@media(prefers-reduced-motion:reduce){*:hover{transform:none}}