.erp-asset-upload {
    display: grid;
    gap: var(--erp-space-2, .5rem);
}

.erp-asset-upload__label {
    color: var(--erp-text-primary, #1f2937);
    font-size: var(--erp-font-size-sm, .875rem);
    font-weight: 600;
}

.erp-asset-upload__body {
    display: flex;
    align-items: center;
    gap: var(--erp-space-4, 1rem);
}

.erp-asset-upload__preview {
    width: 7rem;
    height: 7rem;
    flex: 0 0 7rem;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--erp-border-color, #d1d5db);
    border-radius: 50%;
    background: var(--erp-surface-muted, #f3f4f6);
    color: var(--erp-text-secondary, #6b7280);
    font-size: .75rem;
    text-align: center;
}

.erp-asset-upload__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.erp-asset-upload__controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--erp-space-2, .5rem);
}

.erp-asset-upload__input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.erp-asset-upload__input:focus-visible + input + .erp-button {
    outline: 2px solid var(--erp-focus-color, #2563eb);
    outline-offset: 2px;
}

.erp-asset-upload__help,
.erp-asset-upload__error {
    flex-basis: 100%;
    color: var(--erp-text-secondary, #6b7280);
}

.erp-asset-upload__error:empty {
    display: none;
}

.erp-asset-upload__error {
    color: var(--erp-danger, #b91c1c);
}