.empty-state {
    padding: 60px 100px;
    border-radius: 90px;
    position: relative;
    background-color: #090909;
    background-image: 
        var(--dashed-border),
        repeating-linear-gradient(
            -55deg,
            #090909,
            #090909 14px,
            #101010 14px,
            #101010 16px
        );
}

#dropArea::before {
    content: "";
    position: absolute;
    border-radius: 90px;
    width: 100%;
    height: 100%;
    inset: 0;
    background-image:
        var(--dashed-border),
        linear-gradient(0deg,rgba(255, 255, 255, 0.06),rgba(255, 255, 255, 0.04));
    opacity: 0;
    transition: opacity var(--motion-base) var(--ease-standard);
    pointer-events: none;
}

#dropArea.drag-over::before {
    opacity: 0.5;
}

.empty-state *:not(.background) {
    z-index: 1;
}

.empty-state .img-icon {
  width: 150px;
  margin-bottom: 12px;
}

.empty-state .title {
  font-size: 22px;
  color: var(--text-primary);
  font-weight: 500;
}

.empty-state .description {
  font-size: 16px;
  color: var(--text-secondary);
  font-weight: 300;
}

.empty-state .header {
    gap: 12px;
    margin-bottom: 32px;
}

.empty-state .btn-container {
    gap: 6px;
}