.digins-bg { --gap: 14px; }
.digins-bg__form 
{ 
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr; 
  gap: var(--gap); 
  margin-bottom: 20px; 
}

.digins-bg__field label
{ 
  display:block; 
  font-weight: 600;
  margin-bottom: 6px;
}

.digins-bg__field input, 
.digins-bg__field select 
{ 
  width: 100%; 
  padding: 10px 12px; 
  border: 0px solid #d1d5db;
   border-radius: 0px; 
   font-size: 16px; 
 }
 
.digins-bg__list { display: grid; gap: 18px; }
.digins-bg__item { display: grid; grid-template-columns: 420px 1fr; gap: 20px;  border-radius: 12px; padding: 20px; background: #ffffff; align-items: start; }
.digins-bg__preview { display:flex; justify-content:center; align-items:flex-start; background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 12px; padding: 10px; overflow: hidden; }
.digins-bg__canvas { max-width: 100%; height: auto; display:block; border-radius: 8px; }
.digins-bg__title { font-size: 18px; font-weight: 700; margin-bottom: 6px; margin-top: 20px; }
.digins-bg__size { color:#6b7280; margin-bottom: 12px; }
.digins-bg__actions { display:flex; gap: 10px; flex-wrap: wrap; }
.digins-bg__btn { border: 0; border-radius: 12px; padding: 10px 14px; font-weight: 700; cursor: pointer; }
.digins-bg__btn[disabled] { opacity: .5; cursor: not-allowed; }
.digins-bg__btn--download { background: #111827; color: #fff; }
.digins-bg__btn--share { background: #e5e7eb; color: #111827; }
.digins-bg__hint { margin-top: 10px; color: #6b7280; font-size: 13px; }


@media (max-width: 900px) {
  .digins-bg__form { grid-template-columns: 1fr; }
  .digins-bg__item { grid-template-columns: 1fr; }
  .digins-bg__actions { flex-direction: column; }
  .digins-bg__btn { width: 100%; }
}